/* Tokens de color del dashboard: tema oscuro (el de siempre) y claro.
 *
 * El servidor pinta <html data-theme="oscuro|claro|sistema"> con la
 * preferencia del usuario y el script de templates/_tema.html resuelve
 * "sistema" con prefers-color-scheme antes del primer paint. Sin atributo (o
 * sin JS) aplica el oscuro.
 *
 * Los valores del oscuro son EXACTAMENTE los colores que tenía radar.html
 * antes de tokenizar: cambiar uno cambia el look acordado (reunión 31-oct).
 *
 * Los tokens "-lch" guardan solo los canales L C H de un oklch para armar
 * variantes translúcidas: oklch(var(--mx-lch) / 0.16). Su versión sólida
 * (--mx) se deriva al final del archivo.
 */

:root,
:root[data-theme="oscuro"] {
  /* superficies, de la más honda a la más alta */
  --fondo: #0b0d12;
  --fondo-tabs: #0d1016;
  --header: rgba(14,17,23,0.86);
  --cajon: #0e1119;              /* panel lateral del detalle */
  --campo: #0e1219;              /* inputs, tarjetas hundidas, fondo de gráfica */
  --chip-apagado: #0f131a;
  --superficie: #10141b;         /* tarjetas, menús, tooltip */
  --panel: #12161e;              /* botones, encabezados, calendario */
  --pastilla: #141922;
  --hover: #161b24;
  --sutil: #1a202b;              /* bordes de tarjeta, divisores, hover de lista */

  /* bordes y trazos */
  --borde-tabs: #171c26;
  --borde: #1d232f;
  --borde-apagado: #20262f;
  --barra-vacia: #232a36;
  --divisor: #232b38;
  --borde-control: #262d3a;
  --scroll: #2a3140;
  --rejilla-corte: #2b3341;      /* línea punteada del top-25 */
  --borde-fuerte: #2d3444;
  --borde-hover: #39424f;
  --deshabilitado: #3a414d;

  /* texto, del más tenue al más fuerte */
  --texto-apagado: #4b525f;
  --texto-4: #5c6472;
  --gris: #6b7280;
  --eje: #6b7386;
  --texto-3: #7d8698;
  --texto-meta: #8a93a3;
  --texto-2: #9aa3b2;
  --texto-suave: #c4ccd8;
  --texto-lista: #d6dae2;
  --texto: #e6e9ef;
  --texto-titulo: #f2f4f8;
  --texto-fuerte: #fff;
  --sobre-marca: #fff;           /* texto sobre el rojo de marca */

  /* sombras y velos */
  --sombra: rgba(0,0,0,0.5);
  --sombra-fuerte: rgba(0,0,0,0.55);
  --velo: rgba(5,7,10,0.55);
  --esquema: dark;               /* color-scheme de los inputs de fecha */

  /* marca, enlaces y acentos */
  --marca: oklch(0.62 0.19 27);
  --enlace: oklch(0.80 0.10 220);
  --enlace-hover: oklch(0.87 0.11 220);
  --hashtag: oklch(0.78 0.11 250);
  --hashtag-detalle: oklch(0.80 0.11 250);
  --acento-lch: 0.72 0.19 30;    /* tab activa, filtro activo, estado de error */
  --foco-lch: 0.72 0.14 250;     /* borde de foco y hover de enlaces */
  --rojo-lch: 0.70 0.19 25;      /* selección, ícono PDF */
  --alerta-lch: 0.68 0.20 25;
  --error-lch: 0.62 0.16 25;
  --verde-lch: 0.72 0.14 155;
  --ambar-lch: 0.72 0.14 60;
  --texto-error: oklch(0.84 0.10 30);
  --texto-alerta: oklch(0.82 0.12 30);
  --texto-activo: oklch(0.87 0.11 25);
  --texto-ok: oklch(0.82 0.11 155);
  --texto-pausa: oklch(0.82 0.11 60);
  --vivo: oklch(0.78 0.13 155);
  --baja: oklch(0.70 0.15 30);
  --opcion-activa-fondo: oklch(0.62 0.20 25 / 0.16);
  --destello: oklch(0.70 0.14 155 / 0.22);

  /* clasificación (CLS del radar = politica_mx / politica_us / no_relevante) */
  --mx-lch: 0.72 0.19 30;
  --eua-lch: 0.72 0.12 250;
  --nr-lch: 0.60 0.02 250;

  /* fuentes */
  --src-x-lch: 0.72 0.14 250;
  --src-tt-lch: 0.72 0.14 155;
  --src-t283-lch: 0.72 0.14 300;
  --src-aio-lch: 0.72 0.14 60;
  --src-pk-lch: 0.72 0.14 20;
  --src-otra-lch: 0.72 0.10 200;

  /* niveles de la tab Salud */
  --nivel-ok: oklch(0.72 0.15 155);
  --nivel-warn: oklch(0.78 0.15 80);
  --nivel-bad: oklch(0.65 0.20 25);
  --nivel-ok-barra: oklch(0.72 0.15 155);     /* barras de volumen por captura */
  --nivel-warn-barra: oklch(0.78 0.15 80);
  --nivel-bad-barra: oklch(0.65 0.20 25);

  /* login y cambio de contraseña */
  --boton-marca: #ED1C24;
  --boton-marca-sombra: oklch(0.55 0.20 25 / 0.28);
  --resplandor: oklch(0.62 0.20 25 / 0.16);
  --sombra-marca: rgba(0,0,0,0.45);
  --enlace-rojo: oklch(0.80 0.10 25);
  --enlace-rojo-hover: oklch(0.87 0.11 25);
  --aviso-texto: oklch(0.86 0.10 30);
  --regla-pendiente: oklch(0.72 0.13 25);
  --texto-error-campo: oklch(0.78 0.13 25);
}

/* Claro: gris frío (no crema). Los acentos bajan de L para tener contraste AA
 * como texto sobre blanco y sobre su propio tinte. */
:root[data-theme="claro"] {
  --fondo: #eef1f5;
  --fondo-tabs: #f9fafc;
  --header: rgba(255,255,255,0.86);
  --cajon: #ffffff;
  --campo: #f8fafc;
  --chip-apagado: #f1f3f6;
  --superficie: #ffffff;
  --panel: #ffffff;
  --pastilla: #f1f4f7;
  --hover: #e9edf2;
  --sutil: #e2e7ee;

  --borde-tabs: #e2e7ed;
  --borde: #d5dbe4;
  --borde-apagado: #dde2e9;
  --barra-vacia: #dfe4ea;
  --divisor: #d5dbe4;
  --borde-control: #cdd4de;
  --scroll: #c4cbd5;
  --rejilla-corte: #c3cad5;
  --borde-fuerte: #c8cfd9;
  --borde-hover: #a3adbb;
  --deshabilitado: #c0c7d1;

  --texto-apagado: #9aa2ae;
  --texto-4: #666e7e;
  --gris: #8a919d;
  --eje: #646c7c;
  --texto-3: #586172;
  --texto-meta: #525b6c;
  --texto-2: #4f5868;
  --texto-suave: #2f3643;
  --texto-lista: #262c37;
  --texto: #151a23;
  --texto-titulo: #10141b;
  --texto-fuerte: #0b0e14;
  --sobre-marca: #fff;

  --sombra: rgba(23,30,42,0.14);
  --sombra-fuerte: rgba(23,30,42,0.16);
  --velo: rgba(21,26,35,0.28);
  --esquema: light;

  --marca: oklch(0.55 0.20 27);
  --enlace: oklch(0.50 0.12 235);
  --enlace-hover: oklch(0.42 0.12 235);
  --hashtag: oklch(0.48 0.13 255);
  --hashtag-detalle: oklch(0.46 0.13 255);
  --acento-lch: 0.55 0.20 28;
  --foco-lch: 0.55 0.15 250;
  --rojo-lch: 0.60 0.20 25;
  --alerta-lch: 0.60 0.21 25;
  --error-lch: 0.58 0.18 25;
  --verde-lch: 0.60 0.15 155;
  --ambar-lch: 0.70 0.14 70;
  --texto-error: oklch(0.50 0.17 28);
  --texto-alerta: oklch(0.50 0.18 28);
  --texto-activo: oklch(0.48 0.17 27);
  --texto-ok: oklch(0.45 0.12 155);
  --texto-pausa: oklch(0.48 0.12 60);
  --vivo: oklch(0.50 0.14 155);
  --baja: oklch(0.52 0.18 30);
  --opcion-activa-fondo: oklch(0.62 0.20 25 / 0.12);
  --destello: oklch(0.70 0.14 155 / 0.22);

  --mx-lch: 0.50 0.19 30;
  --eua-lch: 0.48 0.13 250;
  --nr-lch: 0.55 0.02 250;

  --src-x-lch: 0.47 0.14 250;
  --src-tt-lch: 0.47 0.14 155;
  --src-t283-lch: 0.47 0.14 300;
  --src-aio-lch: 0.47 0.12 60;
  --src-pk-lch: 0.47 0.14 20;
  --src-otra-lch: 0.47 0.10 200;

  --nivel-ok: oklch(0.50 0.14 155);
  --nivel-warn: oklch(0.55 0.13 75);
  --nivel-bad: oklch(0.52 0.20 25);
  --nivel-ok-barra: oklch(0.74 0.12 155);
  --nivel-warn-barra: oklch(0.82 0.13 85);
  --nivel-bad-barra: oklch(0.68 0.17 25);

  --boton-marca: #ED1C24;
  --boton-marca-sombra: oklch(0.55 0.20 25 / 0.22);
  --resplandor: oklch(0.62 0.20 25 / 0.10);
  --sombra-marca: rgba(23,30,42,0.18);
  --enlace-rojo: oklch(0.50 0.17 27);
  --enlace-rojo-hover: oklch(0.42 0.17 27);
  --aviso-texto: oklch(0.48 0.17 28);
  --regla-pendiente: oklch(0.52 0.17 27);
  --texto-error-campo: oklch(0.50 0.17 27);
}

/* Versiones sólidas de los tokens de canales (se recalculan al cambiar de tema) */
:root {
  --acento: oklch(var(--acento-lch));
  --foco: oklch(var(--foco-lch));
  --rojo: oklch(var(--rojo-lch));
  --alerta: oklch(var(--alerta-lch));
  --error: oklch(var(--error-lch));
  --verde: oklch(var(--verde-lch));
  --ambar: oklch(var(--ambar-lch));
  --mx: oklch(var(--mx-lch));
  --eua: oklch(var(--eua-lch));
  --nr: oklch(var(--nr-lch));
  --src-x: oklch(var(--src-x-lch));
  --src-tt: oklch(var(--src-tt-lch));
  --src-t283: oklch(var(--src-t283-lch));
  --src-aio: oklch(var(--src-aio-lch));
  --src-pk: oklch(var(--src-pk-lch));
  --src-otra: oklch(var(--src-otra-lch));
}

/* Fondo desde el primer paint (antes de que el runtime monte la página) */
body {
  background: var(--fondo);
  color: var(--texto);
}

/* Cambio de tema instantáneo (ver aplicar() en templates/_tema.html) */
.tema-cambiando,
.tema-cambiando * {
  transition: none !important;
}

/* Imágenes que cambian con el tema (p. ej. logotipo blanco u oscuro) */
:root[data-theme="claro"] .solo-oscuro {
  display: none !important;
}
:root:not([data-theme="claro"]) .solo-claro {
  display: none !important;
}

/* ============ COMPONENTES COMPARTIDOS ============
 * Desde aquí hasta el final solo tokens, sin colores literales (lo cuida
 * radar/tests_rutas.py). El corte de 900 px es el mismo de esMovil en radar.html.
 */

/* Base de las páginas con sesión; login y contraseña traen la suya, igual */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- Header (templates/_header.html) ---- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.hdr-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  min-height: 74px;
  padding: 0 22px;
}
.hdr-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.hdr-logo {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 40px;
}
.hdr-divisor {
  flex-shrink: 0;
  width: 1px;
  height: 38px;
  background: var(--divisor);
}
.hdr-titulo {
  min-width: 0;
  line-height: 1.1;
}
.hdr-nombre {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--texto);
}
.hdr-x {
  color: var(--src-x);
}
.hdr-lema {
  font-size: 12.5px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--texto-3);
}

.hdr-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.hdr-enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--texto-2);
}
a.hdr-enlace:hover {
  background: var(--hover);
  color: var(--texto-fuerte);
  text-decoration: none;
}
.hdr-enlace[aria-current="page"] {
  background: var(--sutil);
  box-shadow: inset 0 0 0 1px var(--borde-hover);
  font-weight: 700;
  color: var(--texto-fuerte);
}
/* Lo propio de cada página. Vacía no ocupa fila, solo empuja la cuenta a la derecha */
.hdr-ranura {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
}
.hdr-captura {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hdr-captura-hora {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.hdr-captura-etiqueta {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.hdr-captura-valor {
  font-size: 13px;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--texto);
}
.hdr-fuentes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-left: auto;
}

/* Cuenta */
.hdr-cuenta {
  position: relative;
  flex-shrink: 0;
}
.hdr-boton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--borde-control);
  background: transparent;
  color: var(--texto-suave);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.hdr-boton:hover {
  border-color: var(--borde-hover);
  color: var(--texto-fuerte);
}
.hdr-usuario {
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hdr-flecha {
  font-size: 9px;
  color: var(--texto-4);
}
.hdr-menu {
  position: absolute;
  top: 36px;
  right: 0;
  z-index: 45;
  width: 212px;
  padding: 6px;
  border-radius: 11px;
  border: 1px solid var(--borde-control);
  background: var(--superficie);
  box-shadow: 0 12px 32px var(--sombra);
}
.hdr-sesion {
  padding: 7px 10px 9px;
  overflow: hidden;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--texto-3);
}
.hdr-separador {
  height: 1px;
  margin: 0 4px 5px;
  background: var(--sutil);
}
.hdr-tema {
  padding: 4px 10px 10px;
}
.hdr-tema-titulo {
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.hdr-tema-opciones {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--borde-control);
  background: var(--campo);
}
.hdr-tema-opcion {
  flex: 1;
  height: 26px;
  padding: 0 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--texto-3);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}
.hdr-tema-opcion[aria-pressed="true"] {
  background: var(--sutil);
  box-shadow: inset 0 0 0 1px var(--borde-hover);
  font-weight: 700;
  color: var(--texto-fuerte);
}
.hdr-tema-error {
  margin-top: 7px;
  font-size: 11px;
  color: var(--texto-error);
}
.hdr-opcion {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--texto);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.hdr-opcion:hover {
  background: var(--sutil);
  color: var(--texto-fuerte);
  text-decoration: none;
}
.hdr-opcion-tenue {
  color: var(--texto-2);
}
.hdr-boton:focus-visible,
.hdr-enlace:focus-visible,
.hdr-tema-opcion:focus-visible,
.hdr-opcion:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}

/* ---- Noticias: home y /noticias/ (templates/noticias_base.html) ---- */
.noti {
  display: grid;
  gap: 26px;
  align-items: start;
  padding: 18px 22px 40px;
}
.noti-inicio {
  grid-template-columns: 272px minmax(0, 1fr);
}
.noti-historico {
  grid-template-columns: minmax(0, 1fr) 248px;
}
.noti-tono-mx {
  --tono: var(--mx);
}
.noti-tono-eua {
  --tono: var(--eua);
}
.noti-tono-nr {
  --tono: var(--nr);
}

/* La firma de la página: una marca por medio, en el color de la clasificación.
 * El ancho lo pone el JS (cobertura x paso) y el degradado dibuja las marcas. */
.noti-barra {
  display: block;
  flex-shrink: 0;
  max-width: 100%;
  height: 11px;
  background: repeating-linear-gradient(90deg, var(--tono) 0 2px, transparent 2px 3px);
}
.noti-barra-lider {
  height: 22px;
  background: repeating-linear-gradient(90deg, var(--tono) 0 3px, transparent 3px 5px);
}
.noti-cobertura {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.noti-cobertura-num {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tono);
}

/* Columna lateral */
.noti-lateral {
  position: sticky;
  top: 93px;
  max-height: calc(100vh - 93px - 18px);
  overflow-y: auto;
}
.noti-seccion {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-titulo);
}
/* Título de sección con ⓘ: el aviso se abre con clic, toque, Enter o Espacio y cierra con Esc */
.noti-seccion-cabeza {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}
.noti-seccion-cabeza .noti-seccion {
  margin: 0;
}
.noti-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-3);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.noti-info:hover,
.noti-info[aria-expanded="true"] {
  color: var(--texto-fuerte);
}
.noti-info-burbuja {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 2;
}
.noti-info-burbuja p {
  max-width: 340px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--borde-control);
  border-radius: 10px;
  background: var(--superficie);
  box-shadow: 0 12px 32px var(--sombra);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--texto-2);
}
.noti-lateral-aviso {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-3);
}
.noti-tend-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.noti-tend {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 7px;
  border-left: 3px solid var(--tono);
  background: transparent;
  color: var(--texto-lista);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.noti-tend:hover {
  background: var(--hover);
  color: var(--texto-fuerte);
}
.noti-tend-activa {
  background: var(--sutil);
  box-shadow: inset 0 0 0 1px var(--borde-hover);
  color: var(--texto-fuerte);
}
.noti-tend-rank {
  flex-shrink: 0;
  width: 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  text-align: right;
  color: var(--texto-3);
}
.noti-tend-nombre {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.noti-sube {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--vivo);
}
.noti-baja {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--baja);
}
.noti-tend-nueva {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-ok);
}
.noti-enlace-todas {
  display: inline-block;
  margin: 10px 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--enlace);
  text-decoration: none;
}
.noti-enlace-todas:hover {
  color: var(--enlace-hover);
  text-decoration: underline;
}
.noti-reportes-home {
  margin-top: 26px;
}
.noti-reportes-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.noti-reporte {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--enlace);
  text-decoration: none;
}
.noti-reporte:hover {
  background: var(--hover);
  color: var(--enlace-hover);
  text-decoration: none;
}
.noti-reporte-hora {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--texto-3);
}

/* Cabeza y filtros */
.noti-principal {
  min-width: 0;
}
.noti-cabeza {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 14px;
}
.noti-h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--texto-titulo);
}
.noti-dia {
  display: flex;
  align-items: center;
  gap: 6px;
}
.noti-paso {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--borde-control);
  border-radius: 7px;
  background: var(--panel);
  color: var(--texto-2);
  font-size: 10px;
  cursor: pointer;
}
.noti-paso:hover:not(:disabled) {
  border-color: var(--borde-hover);
  color: var(--texto-fuerte);
}
.noti-paso:disabled {
  color: var(--deshabilitado);
  cursor: default;
}
/* Cabe la etiqueta más larga: "miércoles 30 sep 2026" (día de otro año) */
.noti-fecha-campo {
  width: 168px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--borde-control);
  border-radius: 7px;
  background: var(--campo);
  color: var(--texto);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.noti-volver {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--borde-control);
  border-radius: 7px;
  background: transparent;
  color: var(--texto-suave);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.noti-volver:hover {
  border-color: var(--borde-hover);
  color: var(--texto-fuerte);
}
.noti-estado {
  font-size: 12px;
  color: var(--texto-3);
}
.noti-filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 18px;
}
.noti-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.noti-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--borde-apagado);
  border-radius: 7px;
  background: transparent;
  color: var(--texto-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.noti-chip:hover {
  border-color: var(--borde-hover);
  color: var(--texto-fuerte);
}
.noti-chip-activo {
  border-color: oklch(var(--acento-lch) / 0.5);
  background: oklch(var(--acento-lch) / 0.1);
  color: var(--texto-fuerte);
}
.noti-chip-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--texto-3);
}
.noti-controles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.noti-control {
  display: flex;
  align-items: center;
  gap: 7px;
}
.noti-control-et {
  font-size: 12px;
  color: var(--texto-3);
}
.noti-select,
.noti-buscar {
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--borde-control);
  border-radius: 7px;
  background: var(--campo);
  color: var(--texto);
  font-family: inherit;
  font-size: 12.5px;
  color-scheme: var(--esquema);
}
.noti-buscar {
  width: 190px;
}
.noti-puente {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}
.noti-puente-quitar {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--enlace);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.noti-puente-quitar:hover {
  color: var(--enlace-hover);
  text-decoration: underline;
}
.noti-aviso {
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid oklch(var(--error-lch) / 0.3);
  border-radius: 9px;
  background: oklch(var(--error-lch) / 0.12);
  font-size: 13px;
  color: var(--texto-error);
}
.noti-nota {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--texto-3);
}
.noti-vacio {
  padding: 44px 20px;
  border: 1px dashed var(--borde-control);
  border-radius: 12px;
  text-align: center;
}
.noti-vacio-texto {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--texto-2);
}
.noti-vacio-texto:last-child {
  margin-bottom: 0;
}

/* Esqueleto de carga */
.noti-esqueleto {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.noti-esqueleto-lider,
.noti-esqueleto-fila {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--panel) 25%, var(--sutil) 37%, var(--panel) 63%);
  background-size: 720px 100%;
  animation: noti-brillo 1.4s infinite linear;
}
.noti-esqueleto-lider {
  height: 220px;
  margin-bottom: 10px;
}
.noti-esqueleto-fila {
  height: 58px;
}
@keyframes noti-brillo {
  from {
    background-position: -360px 0;
  }
  to {
    background-position: 360px 0;
  }
}

/* Historia líder */
.noti-lider-texto {
  flex: 1;
  min-width: 0;
}
article.noti-tono-mx,
article.noti-tono-eua,
article.noti-tono-nr {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--sutil);
}
.noti-lider-titular {
  max-width: 34em;
  margin: 12px 0 10px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.22;
}
.noti-lider-resumen {
  max-width: 62ch;
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--texto-suave);
}
.noti-lider-img {
  flex-shrink: 0;
  width: 212px;
  max-height: 262px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--sutil);
  border-radius: 10px;
  cursor: pointer;
}
/* Atajo de ratón al detalle; display: contents no altera el flex del artículo */
.noti-lider-img-abrir {
  display: contents;
}

/* El titular es un botón; su ::after estira el clic a toda la fila */
.noti-abrir {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--texto-titulo);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.noti-abrir:hover {
  color: var(--enlace-hover);
}
.noti-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.noti-lista > li {
  position: relative;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--sutil);
}
.noti-fila-titular::after {
  content: '';
  position: absolute;
  inset: 0;
}
.noti-fila-cobertura {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.noti-fila-num {
  flex-shrink: 0;
  width: 26px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--tono);
}
.noti-fila-cuerpo {
  min-width: 0;
}
.noti-fila-titular {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.32;
}
.noti-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--texto-meta);
}
.noti-cls {
  font-weight: 600;
  color: var(--tono);
}

/* Detalle */
.noti-velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--velo);
  backdrop-filter: blur(2px);
}
.noti-cajon {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: 560px;
  max-width: 100%;
  border-left: 1px solid var(--borde);
  background: var(--cajon);
  box-shadow: -24px 0 60px var(--sombra);
}
.noti-cajon-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--borde);
}
.noti-cajon-titular {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--texto-titulo);
}
.noti-cerrar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--borde-control);
  border-radius: 8px;
  background: transparent;
  color: var(--texto-2);
  font-size: 15px;
  cursor: pointer;
}
.noti-cerrar:hover {
  border-color: var(--borde-hover);
  color: var(--texto-fuerte);
}
.noti-cajon-cuerpo {
  flex: 1;
  padding: 18px 22px 40px;
  overflow-y: auto;
}
.noti-cajon-resumen {
  margin: 14px 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto-suave);
}
.noti-en-x {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--enlace);
  text-decoration: none;
}
.noti-en-x:hover {
  color: var(--enlace-hover);
  text-decoration: underline;
}
.noti-cajon-img {
  display: block;
  width: 100%;
  max-width: 340px;
  max-height: 420px;
  margin-bottom: 22px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--sutil);
  border-radius: 10px;
}
.noti-momentos,
.noti-tweets {
  display: flex;
  flex-direction: column;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.noti-momento {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--sutil);
}
.noti-momento-hora {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--texto-3);
}
.noti-momento-titular {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--texto-lista);
  text-decoration: none;
}
.noti-momento-titular:hover {
  color: var(--enlace-hover);
  text-decoration: underline;
}
.noti-tweet {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0;
  border-top: 1px solid var(--sutil);
  color: var(--texto-suave);
  text-decoration: none;
}
.noti-tweet:hover {
  color: var(--texto-fuerte);
  text-decoration: none;
}
.noti-tweet-autor {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto-titulo);
}
.noti-tweet-texto {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}
.noti-chip:focus-visible,
.noti-paso:focus-visible,
.noti-volver:focus-visible,
.noti-select:focus-visible,
.noti-buscar:focus-visible,
.noti-fecha-campo:focus-visible,
.noti-tend:focus-visible,
.noti-abrir:focus-visible,
.noti-puente-quitar:focus-visible,
.noti-cerrar:focus-visible,
.noti-info:focus-visible,
.noti-reporte:focus-visible,
.noti-enlace-todas:focus-visible,
.noti-en-x:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .noti-esqueleto-lider,
  .noti-esqueleto-fila {
    animation: none;
  }
}

/* El header cabe en una fila hasta 1030 px soltando lo menos útil. Debajo de
 * eso se reparte en filas; el resto del radar sigue con esMovil (< 900 px). */
@media (max-width: 1499px) {
  .hdr-lema {
    display: none;
  }
}
@media (max-width: 1429px) {
  .hdr-divisor,
  .hdr-titulo {
    display: none;
  }
}
@media (max-width: 1129px) {
  .hdr-usuario {
    display: none;
  }
}
@media (max-width: 1029px) {
  /* Tres filas de header no caben pegadas arriba en un teléfono. Sigue
   * posicionado: el z-index mantiene el menú de cuenta sobre la página. */
  .hdr {
    position: relative;
  }
  .hdr-fila {
    gap: 10px 12px;
    padding: 12px 22px;
  }
  .hdr-marca {
    flex: 1 1 0;
  }
  .hdr-logo {
    height: 32px;
  }
  .hdr-divisor,
  .hdr-titulo {
    display: block;
  }
  .hdr-divisor {
    height: 30px;
  }
  .hdr-nombre {
    font-size: 15px;
  }
  .hdr-cuenta {
    order: 1;
  }
  .hdr-nav {
    order: 2;
    flex-basis: 100%;
  }
  .hdr-ranura {
    order: 3;
    flex: 1 1 100%;
  }
  .hdr-ranura:empty {
    display: none;
  }
}
@media (max-width: 1099px) {
  .noti-lista > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}
@media (max-width: 899px) {
  .noti-inicio,
  .noti-historico {
    grid-template-columns: minmax(0, 1fr);
  }
  /* En móvil las tendencias son una franja que se desplaza de lado, arriba */
  .noti-lateral {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .noti-inicio .noti-lateral {
    min-width: 0;
  }
  .noti-tend-lista {
    display: flex;
    gap: 6px;
    margin: 0 -22px;
    padding: 0 22px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .noti-tend {
    width: auto;
    white-space: nowrap;
  }
  .noti-tend-nombre {
    overflow-wrap: normal;
  }
  .noti-reportes-home {
    display: none;
  }
  .noti-historico .noti-lateral {
    order: 1;
  }
  .noti-buscar {
    flex: 1;
    width: auto;
    min-width: 140px;
  }
  .noti-controles {
    width: 100%;
  }
  article.noti-tono-mx,
  article.noti-tono-eua,
  article.noti-tono-nr {
    flex-direction: column;
    gap: 14px;
  }
  .noti-lider-titular {
    font-size: 21px;
  }
  .noti-lider-img {
    width: 100%;
    max-height: 240px;
  }
}