/* ==========================================================================
   AZTECH METAL - TIPOS DE CONTENIDO
   Antes, toda pieza llevaba la misma etiqueta roja con un texto libre
   ("HISTORIA", "OCTUBRE", "PROGRESIVO") y no había forma de saber si era una
   noticia, un anuncio de gira, un reportaje o una pieza de Raíces.

   Ahora cada pieza dice primero QUÉ ES, con un color propio, y después de
   qué trata. El color se aplica en tres sitios y solo en tres, para que se
   lea sin volverse un carnaval: la etiqueta de tipo, una barra de acento en
   la orilla de la tarjeta, y el punto de la pestaña correspondiente.

   Se carga en todas las páginas, después de grafico.css.
   ========================================================================== */

:root {
  --tp-gira:      #FF2A24;   /* el rojo de la casa: anuncios de fechas */
  --tp-concierto: #FF8A2A;   /* naranja: una fecha concreta, crónica o previa */
  --tp-disco:     #B48CFF;   /* violeta: lanzamientos y reseñas */
  --tp-banda:     #3FD3C6;   /* verde agua: perfiles de banda */
  --tp-reportaje: #F0EBE3;   /* marfil: fondo y análisis */
  --tp-raices:    #E2B25A;   /* latón: rock clásico, prog, post-punk */
  --tp-resumen:   #9AA3AD;   /* gris: varias cosas juntas */
  --tp-evento:    #FF2A24;   /* rojo en contorno: una fecha de la agenda */
}

/* Cada tipo asigna la variable --tp que el resto de reglas usan. */
[data-tipo="gira"]      { --tp: var(--tp-gira); }
[data-tipo="concierto"] { --tp: var(--tp-concierto); }
[data-tipo="disco"]     { --tp: var(--tp-disco); }
[data-tipo="banda"]     { --tp: var(--tp-banda); }
[data-tipo="reportaje"] { --tp: var(--tp-reportaje); }
[data-tipo="raices"]    { --tp: var(--tp-raices); }
[data-tipo="resumen"]   { --tp: var(--tp-resumen); }
[data-tipo="evento"]    { --tp: var(--tp-evento); }

/* --------------------------- La marca de tipo ---------------------------
   <span class="tp-marca"><b>GIRA</b><i>Esta semana</i></span>
   El tipo va en negrita y color; el tema, en gris y sin fondo. */
.tp-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  max-width: 100%;
}
.tp-marca b {
  color: var(--tp, #fff);
  border: 1px solid var(--tp, #fff);
  padding: 0.3rem 0.5rem;
  font-weight: 800;
  white-space: nowrap;
}
.tp-marca i {
  font-style: normal;
  color: rgba(255, 255, 255, 0.46);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El reportaje, en marfil, se lee mejor con fondo que con contorno. */
[data-tipo="reportaje"] .tp-marca b { background: var(--tp); color: #0a0a0c; border-color: var(--tp); }
/* La fecha de agenda va en contorno rojo, distinto del relleno rojo de Gira. */
[data-tipo="evento"] .tp-marca b { border-style: solid; }
[data-tipo="gira"] .tp-marca b { background: var(--tp); color: #fff; }

/* Sobre imagen (portada de la nota, tarjeta del carrusel): fondo oscuro
   detrás para que se lea encima de cualquier foto. */
.tp-marca.tp-sobre-imagen {
  background: rgba(8, 8, 10, 0.78);
  padding: 0.28rem 0.45rem 0.28rem 0.28rem;
  backdrop-filter: blur(3px);
}

/* ----------------------------- Barras de acento -----------------------------
   Una sola orilla por componente. Nada más. */
.nw-wire-item[data-tipo],
.nw-ranked-item[data-tipo],
.hm-ranked-item[data-tipo] {
  border-left: 3px solid var(--tp, transparent);
  padding-left: 0.9rem;
}
.nw-side-card[data-tipo],
.nw-feature[data-tipo],
.hm-news-lead[data-tipo] {
  border-top: 3px solid var(--tp, transparent);
}
.gxs-card[data-tipo] .gxs-face { border-top: 3px solid var(--tp, transparent); }

.ag-poster[data-tipo] .ag-poster-body { border-top: 2px solid var(--tp, transparent); }
.ag-row[data-tipo] { border-left: 3px solid rgba(255, 42, 36, 0.55); padding-left: 0.9rem; }
.ag-row[data-tipo].ag-row-top { border-left-color: var(--tp-evento); }

/* --------------------------- Pestanas del archivo ---------------------------
   Las pestanas son un solo eje: QUE ES la pieza. Antes convivian con Mexico e
   Internacional en la misma fila y una gira de banda extranjera salia en las
   dos: diez de catorce notas repetidas entre pestana y pestana. El lugar se
   mudo a su propia fila, abajo, y se cruza con estas.

   Un punto del color del tipo delante de cada una, para que la paleta se
   aprenda de un vistazo. */
.nw-tab[data-filter="gira"]::before,
.nw-tab[data-filter="concierto"]::before,
.nw-tab[data-filter="disco"]::before,
.nw-tab[data-filter="reportaje"]::before,
.nw-tab[data-filter="raices"]::before,
.nw-tab[data-filter="resumen"]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.45rem;
  vertical-align: middle;
}
.nw-tab[data-filter="gira"]::before      { background: var(--tp-gira); }
.nw-tab[data-filter="concierto"]::before { background: var(--tp-concierto); }
.nw-tab[data-filter="disco"]::before     { background: var(--tp-disco); }
.nw-tab[data-filter="reportaje"]::before { background: var(--tp-reportaje); }
.nw-tab[data-filter="raices"]::before    { background: var(--tp-raices); }
.nw-tab[data-filter="resumen"]::before   { background: var(--tp-resumen); }

/* El numero sale del dato que escribe newsroom.js y cambia con el lugar
   elegido: en "En Mexico", Giras dice cuantas giras mexicanas quedan. */
.nw-tab[data-cuenta]::after,
.nw-lugar[data-cuenta]::after {
  content: attr(data-cuenta);
  margin-left: 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  opacity: 0.5;
}
.nw-tab-vacia { opacity: 0.35; pointer-events: none; }

/* ------------------------- Donde pasa: el otro eje -------------------------
   Fila aparte y con otra forma (pildora llena, no rectangulo con punto) para
   que se lea como otra pregunta, no como mas pestanas de lo mismo. */
.nw-lugares {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nw-lugar {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.32rem 0.8rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.nw-lugar:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.nw-lugar.is-active {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: #0a0a0c;
}

/* ------------------------------- Leyenda -------------------------------
   Una línea bajo la cabecera del archivo que explica los colores. */
.tp-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin: 0.9rem 0 0;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.tp-leyenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tp-leyenda span::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--tp);
  background: color-mix(in srgb, var(--tp) 35%, transparent);
}

/* ------------------------- Cabecera de la nota ------------------------- */
.nt-cabeza .tp-marca { margin-bottom: 0.9rem; font-size: 0.7rem; }
.nt-cabeza .tp-marca b { padding: 0.38rem 0.6rem; }

/* El hero de la portada: la marca en lugar del texto suelto. */
#hm-hero-kicker.tp-marca { margin-bottom: 0.8rem; }

/* ------------------- Portadas con contenido gráfico -------------------
   Una imagen marcada sensible: true en articles.js sale desenfocada donde
   sea que aparezca, y se destapa solo si el lector lo pide. Lo aplica
   sensible.js; el desenfoque de arranque también está atado a la ruta, para
   que sin JavaScript la imagen tampoco salga en claro. */
.sn-borrosa img, img.sn-borrosa,
img[src*="disco-matando-gueros-original"] {
  filter: blur(22px) saturate(0.45) brightness(0.55);
  transform: scale(1.14);
  transition: filter 0.45s ease, transform 0.45s ease;
}
.sn-borrosa.is-visible img, img.sn-borrosa.is-visible,
.sn-borrosa.is-visible img[src*="disco-matando-gueros-original"] {
  filter: none;
  transform: none;
}
.sn-ver {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  padding: 0.5rem 0.85rem;
  background: rgba(8, 8, 10, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(3px);
}
.sn-ver:hover { border-color: var(--neon-crimson, #FF2A24); background: rgba(8, 8, 10, 0.96); }
.sn-ver::before { content: "⚠ "; }