/*
 * styles.css — Identidad visual sobria de "documento de trabajo".
 * Verde corporativo #63BE21 SOLO como acento (regla, rótulos, números, badges).
 * Nunca grandes fondos de color. Tablas limpias con bordes horizontales finos.
 */

:root {
  /* Acentos verdes corporativos (tokenizados para poder neutralizarlos en modo incógnito) */
  --verde: #63BE21;
  --verde-oscuro: #4e9a1a;       /* acento de TEXTO (enlaces, rótulos): claro en modo oscuro */
  --verde-solido: #4e9a1a;       /* FONDO sólido con texto blanco (pastilla consejero, total): oscuro siempre */
  --verde-ok: #2e9e44;
  --verde-texto: #3f6b1e;
  --verde-texto-2: #0A5A66;
  --verde-bg: #eef5e4;
  /* Verde pastel de «búsqueda sin leer». Va aparte de --verde-bg porque en los temas
     editorial y oscuro ese es gris: la novedad tiene que seguir leyéndose como verde. */
  --verde-sinleer: #eaf6df;
  --verde-sinleer-bd: #cfe6b8;
  --verde-bg-hover: #f3faec;
  --verde-bg-cal: #f9fdf4;
  --verde-bg-panel: #f4f8ef;
  --verde-bg-dg: #f1f8e9;
  --verde-bg-badge: #e6f4d8;
  --verde-bg-chip: #C5F5FC;
  --verde-bd: #dcebca;
  --verde-bd-2: #A2ECF7;
  --verde-bd-dg: #d9ebc4;
  --verde-bd-card: #cfe0c2;
  --verde-bd-sub: #e3ecd8;
  --verde-foto: #edf1ea;
  /* Neutros / superficies (tokenizados para el modo incógnito oscuro) */
  --texto: #1A1A1A;
  --texto-suave: #6B6B6B;
  --linea: #DADADA;
  --gris-fila: #F4F4F4;
  --fondo: #ffffff;       /* fondo de página */
  --superficie: #ffffff;  /* tarjetas, cabecera, inputs, modales, chips */
  --superficie-2: #fafafa;/* filas de detalle, tarjetas vacías */
  --marco: #f4f4f4;       /* área de trabajo del editor/calendario alrededor del documento */
  --ambar: #B8860B;
  --ambar-fondo: #fdf6e3;
  --max: 1080px;
  /* --- Dossier de Prensa · vistas interiores (misma tipografía que toda la plataforma;
         solo tokens de resaltado, con su pareja legible en el modo oscuro) --- */
  --dos-hl-bg: #ffe14d;
  --dos-hl-tx: #1a1a1a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.5;
}
/* LA RAÍZ VALE 16 PX Y EL TEXTO 15, COMO SIEMPRE (12/09/2026, tipografía dinámica): todos los tamaños
   de letra están en rem (1rem = 16px, así que en el escritorio no cambia ni un píxel) y en el iPhone
   tema.js mueve el tamaño raíz con el ajuste «Texto más grande». Por eso la raíz va en px y el resto no. */
html { font-size: 16px; }
body { font-size: .9375rem; }

a { color: var(--verde-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Barra superior fija --- */
.barra-superior {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--superficie);
  border-bottom: 2px solid var(--verde);
}
/* Botones de navegación (atrás + inicio) junto al logo. */
.btn-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--superficie); color: var(--texto-suave); cursor: pointer; text-decoration: none;
}
.btn-nav:hover { background: var(--gris-fila); color: var(--texto); text-decoration: none; }

/* Compatibilidad: cuando aún no se ha reorganizado (carga inicial). */
.barra-interior {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 1rem;
  color: var(--texto);
  letter-spacing: .01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo:hover { text-decoration: none; }
.pestanas {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  flex: 1;
  overflow-x: auto;
}
.pestanas a {
  padding: 6px 9px;
  color: var(--texto-suave);
  border-radius: 4px;
  font-size: .875rem;
  white-space: nowrap;
}
.pestanas a:hover { background: var(--gris-fila); text-decoration: none; }
.pestanas a.activa {
  color: var(--texto);
  font-weight: bold;
  border-bottom: 2px solid var(--verde);
  border-radius: 0;
}

/* Menú desplegable de informes */
.desplegable {
  position: absolute;
  right: 0;
  top: 110%;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.10);
  min-width: 280px;
  padding: 8px;
  z-index: 100;
}
.desplegable h4 {
  margin: 8px 8px 4px;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
}
.desplegable button, .desplegable a.item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  font-size: .875rem;
  font-family: inherit;
  color: var(--texto);
  border-radius: 4px;
}
.desplegable button:hover, .desplegable a.item:hover { background: var(--gris-fila); text-decoration: none; }
.desplegable select {
  width: 100%;
  margin: 4px 0;
  padding: 6px;
  font-family: inherit;
}
.oculto { display: none !important; }

/* --- Contenido --- */
.contenido {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 20px 80px;
}
.cargando { color: var(--texto-suave); }

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.1875rem; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--linea); }
h3 { font-size: 1rem; margin: 20px 0 8px; }

/* Rótulo de sección en mayúsculas pequeñas */
.rotulo {
  text-transform: uppercase;
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--verde-oscuro);
  font-weight: bold;
  margin: 24px 0 8px;
}
.subtitulo { color: var(--texto-suave); margin: 0 0 16px; }

/* --- Métricas --- */
.metricas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 16px 0 8px;
}
.metrica {
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 12px 14px;
}
.metrica .etq {
  text-transform: uppercase;
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--texto-suave);
}
.metrica .valor { font-size: 1.375rem; font-weight: bold; margin-top: 4px; }
.metrica .valor.verde { color: var(--verde-oscuro); }

/* Barra de progreso fina verde */
.barra-progreso {
  height: 6px;
  background: var(--gris-fila);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.barra-progreso > span {
  display: block;
  height: 100%;
  background: var(--verde);
}

/* --- Tarjetas de resumen --- */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 16px 0;
}
.tarjeta {
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.tarjeta:hover { border-color: var(--verde); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.tarjeta h3 { margin: 0 0 8px; }
.tarjeta .lineas { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: .875rem; }
.tarjeta .lineas .etq { color: var(--texto-suave); }
.tarjeta .lineas .num { text-align: right; font-variant-numeric: tabular-nums; }
.tarjeta .pie { margin-top: 10px; font-size: .8125rem; color: var(--texto-suave); }

/* --- Tablas limpias --- */
table.tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  font-size: .875rem;
}
table.tabla th {
  text-transform: uppercase;
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--texto-suave);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linea);
  font-weight: bold;
}
table.tabla td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
table.tabla td.num, table.tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabla tr.total td { font-weight: bold; border-top: 2px solid var(--verde); }
table.tabla tr.grupo td { background: var(--gris-fila); font-weight: bold; }
table.tabla tr.clicable { cursor: pointer; }
table.tabla tr.clicable:hover td { background: var(--verde-bg-hover); }

/* --- Badges de estado --- */
.badge {
  display: inline-block;
  font-size: .6875rem;
  padding: 1px 7px;
  border-radius: 10px;
  text-transform: lowercase;
  white-space: nowrap;
}
.badge.estimado { background: #eee; color: #555; }
.badge.real { background: var(--verde-bg-badge); color: var(--verde-oscuro); border: 1px solid var(--verde); }
.badge.pendiente { background: var(--superficie); color: var(--texto-suave); border: 1px solid var(--linea); }
.badge.ejemplo { background: var(--ambar-fondo); color: var(--ambar); }
.badge.vice { background: var(--verde-bg-badge); color: var(--verde-oscuro); border: 1px solid var(--verde); margin-left: 8px; }

/* --- Admin --- */

.form-error { color: #b00020; font-size: .8125rem; }

.boton-primario {
  background: var(--verde); color: #fff; border: none; padding: 9px 16px;
  border-radius: 4px; cursor: pointer; font-size: .875rem; font-family: inherit; font-weight: bold;
}
.boton-primario:hover { background: var(--verde-oscuro); }
.boton-secundario {
  background: var(--superficie); color: var(--texto); border: 1px solid var(--linea);
  padding: 9px 16px; border-radius: 4px; cursor: pointer; font-size: .875rem; font-family: inherit;
}
.boton-secundario:hover { background: var(--gris-fila); }
.boton-mini {
  background: var(--superficie); color: var(--verde-oscuro); border: 1px solid var(--verde);
  padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: .75rem; font-family: inherit;
}
.boton-mini:hover { background: var(--verde-bg-hover); }
/*
 * ⚠ EL BOTÓN QUE SE VOLVÍA BLANCO AL PASAR EL RATÓN (Jacobo, 09/09/2026).
 *
 * Es la SEGUNDA MITAD del fallo del 08/09, que se arregló a medias. Aquel día se vio que
 * `.boton-mini` le ganaba el `color` a `.boton-primario` por ir después con la misma
 * especificidad, y se arregló con `.boton-primario.boton-mini { color: #fff }` (en liquid.css).
 * Pero el `:hover` tiene exactamente el mismo problema y se quedó sin tocar:
 *
 *     .boton-primario:hover { background: var(--verde-oscuro); }    (0,1,1) — línea 455
 *     .boton-mini:hover     { background: var(--verde-bg-hover); }  (0,1,1) — línea 470, GANA
 *
 * `--verde-bg-hover` es #F1FAFD, o sea casi blanco. Con la letra en #fff que impone el arreglo
 * del 08/09, el botón desaparecía entero al pasar el ratón: fondo blanco, letra blanca. Jacobo
 * lo vio en el aviso de la extensión, que es donde vive el `boton-primario boton-mini` más a
 * la vista, pero le pasaba a los ocho botones que llevan las dos clases.
 *
 * Se arregla con el selector combinado —(0,2,1), gana a los dos— y no quitándole el hover a
 * `.boton-mini`, porque un mini SUELTO sí tiene que aclararse al pasar por encima: es blanco
 * con letra verde, y ahí el aclarado es la señal correcta.
 */
.boton-primario.boton-mini:hover:not(:disabled) { background: var(--verde-oscuro); color: #fff; }

.aviso-info {
  background: var(--ambar-fondo); border: 1px solid #eedca0; color: #6a5300;
  padding: 10px 14px; border-radius: 6px; margin: 12px 0; font-size: .875rem;
}

/* --- Toast --- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--texto); color: #fff; padding: 12px 20px; border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.2); z-index: 200; font-size: .875rem;
}
.toast.error { background: #b00020; }

@media (max-width: 720px) {
  .metricas { grid-template-columns: repeat(2, 1fr); }
}

/* Modal sencillo */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; /* margen para que el modal nunca toque los bordes */
}
/* Ningún modal supera la altura de la pantalla: si no cabe, hace scroll interno. */
.modal { background: var(--superficie); border-radius: 10px; padding: 22px; max-width: 480px; width: calc(100% - 40px); box-shadow: 0 10px 40px rgba(0,0,0,.2); max-height: calc(100vh - 24px); overflow-y: auto; }
.modal h2 { margin-top: 0; border: none; }

/* --- Iconos de Google en el header --- */
.boton-google {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px;
  padding: 6px 14px; font-size: .8125rem; font-family: inherit; cursor: pointer; color: var(--texto);
  white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis;
}
.boton-google:hover:not(:disabled) { background: var(--gris-fila); }
.boton-google:disabled { color: var(--texto-suave); cursor: default; }
.boton-google.conectado { border-color: var(--verde); color: var(--verde-oscuro); background: var(--verde-bg-hover); }
@keyframes pulso { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

/* --- Buscador --- */
.buscador { position: relative; margin: 14px 0 22px; max-width: 760px; }

.resultados {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12); max-height: 420px; overflow-y: auto; z-index: 120;
}

/* Estilos de impresión (plan B si faltara jsPDF) */
@media print {
  .barra-superior, .toast, .no-imprimir { display: none !important; }
  .contenido { max-width: none; padding: 0; }
  body { font-size: .75rem; }
}

/* =========================================================================
   CALENDARIO NATIVO
   ========================================================================= */
.cal-titulo { margin: 0; border: none; font-size: 1.375rem; }
.cal-vistas { display: inline-flex; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; }

/* Vista Mes */
.cal-mes { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: var(--superficie); }
/* minmax(0,1fr): columnas SIEMPRE iguales (1/7). Sin el 0, un evento largo (nowrap)
   ensancha solo su columna y la rejilla se desalinea de la fila de nombres. */
.cal-cabecera-dias, .cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dia-nombre {
  padding: 8px 6px; text-align: center; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-suave); background: var(--gris-fila);
  border-bottom: 1px solid var(--linea);
}
.cal-celda {
  min-height: 104px; min-width: 0; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  padding: 4px 5px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; background: var(--superficie);
}
.cal-celda:nth-child(7n) { border-right: none; }
.cal-celda:hover { background: var(--verde-bg-cal); }
.cal-celda.fuera { background: var(--superficie-2); color: var(--texto-suave); }
.cal-celda.fuera .cal-celda-num { color: var(--texto-suave); }
.cal-celda.hoy { background: var(--verde-bg-hover); }
.cal-celda-num { font-size: .8125rem; font-weight: bold; align-self: flex-end; }
.cal-celda.hoy .cal-celda-num {
  background: var(--verde); color: #fff; border-radius: 50%; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.cal-chip {
  border: none; text-align: left; font-family: inherit; font-size: .71875rem; cursor: pointer;
  background: var(--verde-bg-badge); color: var(--verde-texto-2); border-left: 3px solid var(--verde);
  border-radius: 3px; padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip:hover { filter: brightness(.96); }
.cal-chip-hora { font-weight: bold; }
.cal-mas { font-size: .6875rem; color: var(--texto-suave); padding-left: 4px; }

/* Vista Semana */
.cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-sem-col { border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie); min-height: 200px; display: flex; flex-direction: column; }
.cal-sem-col.hoy { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde) inset; }
.cal-sem-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 4px;
  padding: 6px 8px; border-bottom: 1px solid var(--linea); background: var(--gris-fila);
}

/* Vista Agenda */
.cal-agenda { max-width: 720px; }

@media (max-width: 760px) {
  .cal-semana { grid-template-columns: 1fr; }
  .cal-celda { min-height: 70px; }
}

/* =========================================================================
   MEDIOS (dinero público en medios de comunicación)
   ========================================================================= */
.medios-contenido { max-width: 1180px; }

/* Paginación con flechas */
.paginacion { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 2px; font-size: .8125rem; color: var(--texto-suave); }

/* Editor de partido (página Datos) */
.aviso-datos {
  background: #fff7e0; border: 1px solid #eedfa0; border-radius: 10px;
  padding: 12px 16px; margin: 12px 0; font-size: .875rem;
}
/* El nombre de la región SIEMPRE en una sola línea (elipsis si no cabe) */
.miga { color: var(--texto-suave); font-size: .8125rem; margin: 0 0 4px; }

/* Si la página tiene su propia navegación (Medios, editor…), la barra puede partir
   en dos líneas y el bloque global se mantiene a la derecha. */
.barra-interior { flex-wrap: wrap; row-gap: 6px; }

/* Impresión del editor → Guardar como PDF: solo el documento. */
@media print {
  .barra-superior, .sd-toolbar-wrap, #toast { display: none !important; }
  body { background: #fff !important; }
}

/* Etiqueta «Marca» en la tabla de órganos de publicidad */
.badge.marca { background: #f4eefb; color: #7b5aa0; border: 1px solid #ddc9ee; }

/* Etiqueta especial «Agencia de medios» (categoría aparte de los medios). */
.badge.agencia { background: #e0f2f1; color: #00695c; border: 1px solid #9ed7d1; }
html[data-modo="incognito-oscuro"] .badge.agencia { background: #16302e; color: #7fd8cf; border-color: #2c4f4b; }
/* Botón con aspecto de enlace (p. ej. «ver progreso» del aviso de actualización). */
.enlace-boton { background: none; border: none; padding: 0; font: inherit; color: var(--verde-oscuro); cursor: pointer; text-decoration: underline; }
.enlace-boton:hover { color: var(--texto); }

/* =====================================================================
   MODO INCÓGNITO  (3 estados que cicla el botón de la cabecera)
   - data-modo ausente  → modo normal (identidad la marca + verdes).
   - data-modo="incognito"        → incógnito CLARO: sin la marca, sin verdes,
       todo neutro en blancos y grises/negros.
   - data-modo="incognito-oscuro" → incógnito OSCURO: fondo oscuro, textos
       y cifras en claro.
   El CONTENIDO de los documentos (#superdoc) NUNCA se altera.
   Se redefinen los tokens de color → se propaga a TODAS las herramientas.
   ===================================================================== */

/* Transición suave al cambiar de modo. */
html[data-modo] body,
html[data-modo] .barra-superior,
html[data-modo] .barra-secundaria,
html[data-modo] table.tabla,
html[data-modo] .bloque-consejeria,
html[data-modo] .metrica { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }

/* ---------- INCÓGNITO CLARO ---------- */
html[data-modo="incognito"] {
  /* Verdes → escala de grises/negros (con contraste para el texto blanco). */
  --verde: #3a3a3a;
  --verde-oscuro: #1f1f1f;
  --verde-solido: #2b2b2b;
  --verde-ok: #555555;
  --verde-texto: #2b2b2b;
  --verde-texto-2: #1f1f1f;
  --verde-bg: #f1f1f1;
  --verde-sinleer: #eef6e6;      /* la novedad SÍ lleva color, aunque el tema sea gris */
  --verde-sinleer-bd: #d5e6c4;
  --verde-bg-hover: #f6f6f6;
  --verde-bg-cal: #f7f7f7;
  --verde-bg-panel: #f4f4f4;
  --verde-bg-dg: #f1f1f1;
  --verde-bg-badge: #ececec;
  --verde-bg-chip: #ebebeb;
  --verde-bd: #dcdcdc;
  --verde-bd-2: #d2d2d2;
  --verde-bd-dg: #dcdcdc;
  --verde-bd-card: #d6d6d6;
  --verde-bd-sub: #e2e2e2;
  --verde-foto: #ededed;
}

/* ---------- INCÓGNITO OSCURO ---------- */
html[data-modo="incognito-oscuro"] {
  color-scheme: dark;
  /* Neutros → oscuros. */
  --texto: #e8eaed;
  --texto-suave: #9aa0a6;
  --linea: #353a40;
  --gris-fila: #262b31;
  --fondo: #14171a;
  --superficie: #1e2227;
  --superficie-2: #181b1f;
  --marco: #0e1012;
  /* Verdes → grises neutros para fondo oscuro. */
  --verde: #5b6168;
  --verde-oscuro: #aab0b8;
  --verde-solido: #3a414b;
  --verde-ok: #8a9098;
  --verde-texto: #c7ccd2;
  --verde-texto-2: #d0d4da;
  --verde-bg: #232830;
  --verde-sinleer: #222c22;      /* en oscuro, un verde apagado: se nota sin deslumbrar */
  --verde-sinleer-bd: #3b4a35;
  --verde-bg-hover: #20242b;
  --verde-bg-cal: #1c2026;
  --verde-bg-panel: #1b1f25;
  --verde-bg-dg: #21262e;
  --verde-bg-badge: #2a2f37;
  --verde-bg-chip: #262b33;
  --verde-bd: #353b43;
  --verde-bd-2: #3a4049;
  --verde-bd-dg: #353b43;
  --verde-bd-card: #353b43;
  --verde-bd-sub: #2e333a;
  --verde-foto: #2a2f37;
  /* Ámbar de tokens reutilizados. */
  --ambar-fondo: #2a2417;
  /* Dossier: resaltado adaptado al fondo oscuro (texto oscuro sobre ámbar). */
  --dos-hl-bg: #f2c94c;
  --dos-hl-tx: #1b1d1a;
}
/* Acentos NO verdes (azul/violeta/ámbar) adaptados al fondo oscuro. */
html[data-modo="incognito-oscuro"] .badge.marca { background: #251e30; color: #c4a8e6; border-color: #3d3350; }
html[data-modo="incognito-oscuro"] .badge.estimado { background: #2a2f37; color: #c0c4ca; }
html[data-modo="incognito-oscuro"] .aviso-datos:not(.en-marcha) { background: #2a2417; border-color: #4a4226; }

/* Popup de actualización */
/* Popup de actualización: cabecera y botones fijos; el cuerpo (fuentes + log) hace scroll. */
.modal-actualizar { max-width: 660px; display: flex; flex-direction: column; overflow: hidden; }
.modal-actualizar > h2, .modal-actualizar > .subtitulo, .modal-actualizar > .modal-acciones { flex: 0 0 auto; }
.modal-actualizar > #pa-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal-acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.pa-log { background: var(--gris-fila); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; max-height: 150px; overflow: auto; font-size: .78125rem; }
.pa-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(125,125,125,.3); border-top-color: var(--verde); border-radius: 50%; animation: pa-giro .8s linear infinite; vertical-align: -1px; }
@keyframes pa-giro { to { transform: rotate(360deg); } }

/* Seguimiento personalizado */
.seguimiento { margin: 26px 0 8px; }

/* ============================ DOSSIER DE PRENSA ============================ */
.dos-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dos-cab h1 { font-size: 1.375rem; margin: 0; }
.dos-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.dos-busquedas { display: grid; grid-template-columns: repeat(auto-fill, 256px); justify-content: center; gap: 12px; }
.dos-busqueda-card { border: 1px solid var(--verde-bd); background: var(--superficie); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.dos-busqueda-card h3 { margin: 0; font-size: 1rem; }
.dos-meta { font-size: .75rem; color: var(--texto-suave); }
.dos-kw { display: flex; gap: 5px; flex-wrap: wrap; }
.dos-kw-chip { background: var(--verde-bg-chip); border: 1px solid var(--verde-bd-2); color: var(--verde-texto-2); border-radius: 999px; padding: 2px 9px; font-size: .75rem; }
.dos-card-acc { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.dos-enmarcha { display: flex; align-items: center; gap: 10px; background: var(--verde-bg); border: 1px solid var(--verde-bd); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }

/* LA BARRA DE «SIGUE AMPLIÁNDOSE» (07/09/2026, encargo de Jacobo). El aviso de búsqueda a medias
   era UNA LÍNEA con el porcentaje enterrado en la frase. Desde que la pasada del corpus sirve
   impactos al segundo, quien entra en una búsqueda recién lanzada ya ve contenido — y sin una
   barra que se mueva no hay forma de distinguir «esto es todo» de «esto es el principio».
   `.bus-ampliando` rompe el `flex` de arriba para poder apilar tres filas: cabecera, barra y pie. */
.bus-ampliando { display: block; }
/* `flex: 1` porque cuando solo corren tendencias o redes NO se pone `.bus-ampliando`, y el aviso
   sigue siendo el flex de `.dos-enmarcha` con esta fila como único hijo: sin esto se quedaría
   encogida a su contenido en vez de ocupar el ancho, que es como estaba antes. */
.bus-amp-fila { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; }
.bus-amp-fase { color: var(--texto-suave); font-size: .9em; }
/* `margin-left:auto` empuja la cifra al extremo derecho, y `tabular-nums` evita que la barra
   tiemble cuando pasa de 9 a 10 % (las cifras proporcionales no miden lo mismo). */
/* `flex: 0 0 auto` + `nowrap` porque en móvil el «9 %» se partía en dos líneas —el «9» arriba y el
   «%» debajo—: la caja se encogía antes que la frase de al lado, que es la que tiene que ceder. */
.bus-amp-pct { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--verde-oscuro); }
/* Y que ceda de verdad: sin `min-width:0` un hijo flex no baja de su contenido mínimo. */
.bus-amp-fila > span:not(.bus-amp-pct):not(.pa-spin) { min-width: 0; }
.bus-amp-fila > .pa-spin { flex: 0 0 auto; }
.bus-amp-fila > button { flex: 0 0 auto; }
.bus-amp-barra { margin: 8px 0 6px; background: rgba(125, 125, 125, .18); }
.bus-amp-barra > span { transition: width .6s ease; }
.bus-amp-pie { font-size: .9em; color: var(--texto-suave); }
/* En estrecho la cifra y el rótulo se pisan con el botón: el rótulo se va, que la cifra manda. */
@media (max-width: 620px) {
  .bus-amp-fase { display: none; }
}
/* Formulario de búsqueda: cada bloque es un MÓDULO-tarjeta (la misma membrana que las
   tarjetas del inicio), claramente separado del siguiente por aire. */
.dos-form { max-width: 800px; display: flex; flex-direction: column; gap: 14px; }
.dos-campo { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 20px; border: 1px solid var(--verde-bd); border-radius: 12px; background: var(--superficie); }
.dos-campo > label:first-child { font-weight: bold; font-size: .9375rem; color: var(--texto); }
/* Foco suave (anillo) en los campos de texto del dossier. */
.dos-chips-input:focus-within, .dos-fechas input:focus, .dos-campo input[type="search"]:focus { outline: none; border-color: var(--verde-bd-2); box-shadow: 0 0 0 3px rgba(24, 215, 244, .30); }
.dos-rangos { display: flex; gap: 8px; flex-wrap: wrap; }
.dos-rango { padding: 6px 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); color: var(--texto); font-family: inherit; font-size: .8125rem; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.dos-rango:hover { border-color: var(--verde-bd-2); }
.dos-rango.activo, .dos-rango.activa { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: bold; }
.dos-grupo-n { color: var(--texto-suave); font-weight: normal; }
.dos-fechas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
/* El atributo hidden debe ganar a los display:flex de abajo (si no, no oculta). */
.dos-fechas[hidden], .dos-medios-sel label[hidden] { display: none; }
.dos-fechas label { font-size: .75rem; color: var(--texto-suave); display: inline-flex; flex-direction: column; gap: 3px; }
.dos-fechas input, .dos-campo > input[type="text"] { padding: 7px 9px; border: 1px solid var(--linea); border-radius: 8px; font-family: inherit; font-size: .875rem; background: var(--superficie); color: var(--texto); }
.dos-chips-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--linea); border-radius: 8px; padding: 6px; background: var(--superficie); }
.dos-chips-input input { border: none; outline: none; flex: 1; min-width: 160px; font-family: inherit; font-size: .875rem; background: transparent; color: var(--texto); }
.dos-chip { background: var(--verde-bg-chip); border: 1px solid var(--verde-bd-2); color: var(--verde-texto-2); border-radius: 999px; padding: 3px 10px; font-size: .8125rem; display: inline-flex; align-items: center; gap: 6px; }
.dos-chip button { border: none; background: none; cursor: pointer; color: var(--verde-texto-2); font-size: .875rem; line-height: 1; }
/* Chip de EXCLUIR (NOT): rojo suave para distinguirlo de las palabras clave (verde). */
.dos-chip-ex { background: #fdecec; border-color: #f0c2c2; color: #9a3030; }
.dos-chip-ex button { color: #9a3030; }
/* Resumen del informe = fila de ESTADÍSTICAS en UNA tarjeta, con los bloques separados
   por filetes verticales: etiqueta en versalitas arriba y cifra grande tabular debajo,
   como las cifras de las tarjetas del inicio. */
.dos-resumen { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--superficie); border: 1px solid var(--verde-bd); border-radius: 12px; padding: 0; margin-bottom: 14px; overflow: hidden; }
.dos-stat { display: flex; flex-direction: column; gap: 3px; justify-content: center; padding: 13px 20px 12px; border-left: 1px solid var(--verde-bd-sub); min-width: 118px; }
.dos-stat:first-child { border-left: none; }
.dos-stat-l { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.dos-stat-n { font-size: 1.625rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--texto); }
.dos-stat-t { font-size: .84375rem; font-weight: 600; color: var(--texto); }
.dos-stat-sub { font-size: .71875rem; color: var(--texto-suave); }
.dos-bucket-n { color: var(--texto-suave); font-weight: normal; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.dos-bucket-acc { margin-left: auto; font-size: .75rem; font-weight: normal; letter-spacing: 0; text-transform: none; }
.dos-bucket-acc a { cursor: pointer; color: var(--verde-oscuro); }
/* Impactos: TARJETAS como las del inicio (membrana blanca + filete verde pálido +
   radio 12), en lista con aire de 10px — cada noticia claramente separada. La casilla
   vive integrada en la fila de meta; el cuerpo ocupa todo el ancho de la tarjeta. */
.dos-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-width: 820px; }
.dos-impacto { display: block; padding: 13px 16px 14px; border: 1px solid var(--verde-bd); border-radius: 12px; background: var(--superficie); transition: background .15s, border-color .15s; }
.dos-impacto:hover { background: var(--verde-bg-hover); border-color: var(--verde-bd-2); }
.dos-impacto.no-sel { opacity: .45; }
.dos-impacto > input[type="checkbox"] { position: absolute; top: 15px; left: 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--verde-solido); cursor: pointer; }
.dos-imp-cuerpo { min-width: 0; }
.dos-imp-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; padding-left: 26px; min-height: 22px; }
/* La línea de servicio: medio · fecha · señales, en una sola línea. */
.dos-imp-titular { font-weight: bold; font-size: 1.125rem; line-height: 1.32; letter-spacing: -.01em; }
.dos-imp-titular a { color: var(--texto); text-decoration: none; }
.dos-imp-titular a:visited { color: var(--texto-suave); }
.dos-imp-titular a:hover { color: var(--texto); text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dos-imp-meta { font-size: .75rem; color: var(--texto-suave); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-variant-numeric: tabular-nums; }
/* A TODO EL ANCHO (Jacobo, 09/09/2026). El tope de 70ch venía de cuando el titular vivía en
   media pastilla; ahora la ficha es de una sola columna y el titular, el subtítulo y los
   párrafos ocupan lo que hay. Un renglón largo se lee peor, sí, pero aquí no hay que leer un
   artículo: son dos párrafos difuminados y un titular. */
.dos-imp-sub { font-size: .875rem; line-height: 1.5; color: var(--texto-suave); margin: 4px 0 0; }
/* SIN EL FILETE DE LA IZQUIERDA (Jacobo, 09/09/2026): «no aporta y es un síntoma claro de
   haber usado IA». Se va con su sangrado: el párrafo difuminado ya se distingue de todo lo
   demás por estar difuminado, que para eso está. */
.dos-imp-frag { font-size: .90625rem; line-height: 1.55; color: var(--texto); margin: 12px 0 0; }
/* Renglón en blanco entre extractos distintos del mismo impacto (el 1.º conserva su
   separación con el subtítulo). Así no se ve todo el texto pegado. */
.dos-imp-frag + .dos-imp-frag { margin-top: 22px; }
/* Resaltado de la palabra buscada (titular, subtítulo, extracto): amarillo + negrita.
   Colores por token (--dos-hl-*): legible también en incógnito oscuro. */
.dos-hl { background: var(--dos-hl-bg); color: var(--dos-hl-tx); font-weight: 700; border-radius: 2px; padding: 0 1.5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Secciones del resultado: cabecera limpia (título 17/700 + contador-chip + acciones),
   separadas del bloque anterior por AIRE (sin filetes dobles ni cajas). */
.dos-seccion { margin: 44px 0 0; }
.dos-seccion-cab { display: flex; align-items: center; gap: 10px; border: none; padding: 0 0 2px; margin-bottom: 12px; }
.dos-seccion-tit { font-size: 1.0625rem; font-weight: bold; color: var(--texto); display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
/* Contador de sección/grupo como chip verde pálido (el chip del inicio, compacto). */
.dos-seccion-tit .dos-bucket-n { background: var(--verde-bg-chip); border: 1px solid var(--verde-bd-2); color: var(--verde-texto-2); border-radius: 999px; padding: 1px 10px; font-size: .75rem; font-weight: 600; }
.dos-seccion-tit .dos-bucket-n:empty { display: none; }
/* Botón de plegado = círculo de 26px, como los círculos de las tarjetas del inicio. */
.dos-toggle { background: var(--superficie); border: 1px solid var(--linea); border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--texto-suave); font-size: .6875rem; line-height: 1; padding: 0; flex: 0 0 auto; transition: background .15s, color .15s, border-color .15s; }
.dos-toggle:hover { border-color: var(--texto-suave); background: var(--gris-fila); color: var(--texto); }
.dos-seccion-inc, .dos-grupo-inc { display: flex; align-items: center; gap: 5px; font-size: .71875rem; color: var(--verde-oscuro); cursor: pointer; white-space: nowrap; font-weight: 600; flex: 0 0 auto; background: var(--verde-bg); border: none; padding: 4px 11px; border-radius: 999px; }
.dos-seccion-inc input, .dos-grupo-inc input { accent-color: var(--verde-solido); }
.dos-seccion-cab, .dos-grupo-tit { padding-right: 2px; }
.dos-seccion.no-incluir > .dos-seccion-cab .dos-seccion-tit, .dos-grupo.no-incluir > .dos-grupo-tit .dos-grupo-label { opacity: .45; text-decoration: line-through; }
.dos-seccion-cuerpo[hidden], .dos-grupo-cuerpo[hidden] { display: none; }
/* Subgrupos (nacional / cada región): NO son cajas — micro-rótulo en versalitas (como
   el ámbito de las tarjetas del inicio) + bandera + contador, sobre un filete pálido. */
.dos-grupo { margin: 26px 0 0; }
.dos-grupo-tit { display: flex; align-items: center; gap: 8px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); padding: 0 0 8px; border-bottom: 1px solid var(--verde-bd); margin-bottom: 0; }
.dos-grupo-label { flex: 0 1 auto; color: var(--verde-texto-2); }
.dos-grupo-n { color: var(--texto-suave); font-weight: 600; font-size: .6875rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.dos-grupo-tit .dos-grupo-inc { margin-left: auto; text-transform: none; letter-spacing: 0; }
.dos-grupo-tit .dos-toggle { width: 22px; height: 22px; }
.dos-flag { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: 0 0 auto; vertical-align: middle; }
/* Popup de búsqueda en directo (medio analizado + % + ETA + cifras). */
.pa-prog-medio { font-size: .9375rem; margin: 4px 0 12px; display: flex; align-items: center; gap: 8px; }
/* Un bloque por ÁMBITO dentro del popup: medios y Trends corren a la vez y se ven a la
   vez (petición de Jacobo, 11/08/2026). */
.pa-amb { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--linea); }
.pa-amb:first-child { border-top: none; padding-top: 0; }
.pa-amb-tit { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .84375rem; }
.pa-amb-tit .tar-ico { width: 16px; height: 16px; color: var(--texto-suave); }
.pa-amb-ok { margin-left: auto; font-weight: 600; font-size: .75rem; color: var(--verde-oscuro); }
.pa-amb-fallo { margin-left: auto; font-weight: 600; font-size: .75rem; color: var(--texto-suave); }
.pa-amb-ko .pa-prog-relleno { background: var(--linea); }
.pa-amb-ko .pa-prog-pct { color: var(--texto-suave); }
.pa-prog-barra { height: 12px; background: var(--gris-fila); border-radius: 7px; overflow: hidden; }
.pa-prog-relleno { height: 100%; background: var(--verde); border-radius: 7px; transition: width .4s ease; min-width: 6px; }
.pa-prog-pct { text-align: center; font-size: .8125rem; color: var(--texto-suave); margin: 7px 0 16px; }
.pa-prog-pct b { color: var(--verde-oscuro); font-size: .9375rem; }
.pa-prog-cifras { display: flex; gap: 12px; }
.pa-prog-cifras > div { flex: 1; text-align: center; background: var(--verde-bg); border-radius: 10px; padding: 12px 8px; }
.pa-prog-cifras b { display: block; font-size: 1.625rem; color: var(--verde-oscuro); line-height: 1.1; }
.pa-prog-cifras span { font-size: .75rem; color: var(--texto-suave); }
/* Botón de cerrar sesión, junto a la pastilla de plan (18/08/2026, usuarios reales). */
.tar-salir {
  margin-left: 8px; padding: 4px 10px; font: inherit; font-size: .75rem; font-weight: 600;
  color: var(--texto-suave); background: transparent; border: 1px solid var(--verde-bd-sub);
  border-radius: 999px; cursor: pointer;
}
.tar-salir:hover { color: var(--verde-oscuro); border-color: var(--verde-oscuro); }

.pa-fin-msg { font-size: 1rem; color: var(--verde-oscuro); font-weight: bold; padding: 18px 0; text-align: center; }

/* --- REGISTRO TÉCNICO DEL ESPEJO (18/08/2026, fase 3) ------------------------------------
   Solo aparece en la MAQUETA: en producción el servidor no manda el log, así que este bloque
   nunca llega a pintarse. Deliberadamente sobrio y con letra de máquina: no es parte del
   producto, es el panel de instrumentos. Va plegado por omisión para no tapar el progreso,
   y con altura tope + scroll propio para que una búsqueda larga no estire la ventana. */
.pa-log { margin-top: 14px; border: 1px solid var(--verde-bd-sub); border-radius: 10px; background: #fbfcfb; }
.pa-log > summary {
  cursor: pointer; padding: 9px 12px; font-size: .78125rem; font-weight: 600;
  color: var(--texto-suave); user-select: none; list-style: none;
}
.pa-log > summary::-webkit-details-marker { display: none; }
.pa-log > summary::before { content: '▸ '; color: var(--verde-texto-2); }
.pa-log[open] > summary::before { content: '▾ '; }
.pa-log > summary:hover { color: var(--verde-oscuro); }
.pa-log-lista {
  margin: 0; padding: 0 12px 10px 34px; max-height: 240px; overflow-y: auto;
  font-family: Consolas, 'SF Mono', ui-monospace, monospace; font-size: .71875rem;
  line-height: 1.6; color: var(--texto-suave);
}
.pa-log-lista li { padding: 1px 0; word-break: break-word; }
.pa-log-lista li::marker { color: var(--verde-bd-sub); font-size: .625rem; }
/* Pie de tarjeta con filete, como el pie de acciones de las tarjetas del inicio. */
/* EL PIE, EN DOS APARTADOS (Jacobo, 09/09/2026). Sustituye al enlace suelto «Leer noticia
   original en …»: a la izquierda el medio principal, a la derecha los demás que la reproducen
   —los que antes ocupaban dos renglones de chips POR ENCIMA del titular—. Se van al extremo
   opuesto (`space-between`) porque son dos cosas distintas: dónde está la noticia, y dónde más
   se puede leer. En pantalla estrecha se apilan. */
.dos-imp-pie {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--verde-bd-sub);
}
.dos-imp-pie-bloque { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.dos-imp-pie-tit { font-size: .78125rem; font-weight: bold; color: var(--verde-oscuro); }
.dos-imp-pie-otros .dos-imp-pie-tit { font-weight: 600; color: var(--texto-suave); }
@media (max-width: 640px) { .dos-imp-pie { justify-content: flex-start; } }
/* Señales de la línea de servicio = chips píldora de fondo pálido (la tríada del chip
   del inicio replicada por color): anotan sin gritar; el titular es el protagonista. */
.dos-fuente-g { background: var(--gris-fila); border: 1px solid var(--linea); color: var(--texto-suave); border-radius: 999px; padding: 1px 9px; font-size: .6875rem; }
.dos-fuente-m { background: #e9f1fb; color: #0C6C7A; border: 1px solid #bcd7f2; border-radius: 999px; padding: 1px 9px; font-size: .6875rem; font-weight: 600; }
html[data-modo="incognito-oscuro"] .dos-fuente-m { background: #1b2530; color: #7db3e8; border-color: #2c3a47; }

/* Desplegable de CATEGORÍA (esquina superior DERECHA de cada pastilla): muestra la
   sección actual (Nacional, Extremadura…) y cambiarla envía la noticia a ese grupo.
   Deshabilitado si el informe solo tiene una categoría. */
.dos-impacto { position: relative; }
.dos-imp-mover { position: absolute; top: 10px; right: 10px; max-width: 128px; padding: 3px 6px; border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie); color: var(--texto-suave); font-family: inherit; font-size: .65625rem; cursor: pointer; transition: border-color .12s, color .12s; z-index: 2; }
.dos-imp-mover:hover:not(:disabled) { border-color: var(--verde); color: var(--texto); }
.dos-imp-mover:disabled { opacity: .35; cursor: default; }
/* la primera línea de la cabecera deja hueco al desplegable (el titular va debajo, a todo el ancho) */
.dos-imp-cab { padding-right: 136px; }

/* LA CABECERA, UN SOLO MEDIO (Jacobo, 09/09/2026). Ya no hay fila de chips aquí arriba: el
   chip del medio principal manda solo, con su favicon y enlazando a la noticia en ESE medio.
   Los demás se leen en el pie, en «Leer también». El chip de cabecera va un punto más grande
   que los del pie porque es la identidad de la ficha, no una lista. */
.dos-imp-medio-chip.cab { font-size: .8125rem; padding: 3px 11px 3px 5px; }
.dos-imp-medio-chip.cab .dos-imp-chip-fav { width: 18px; height: 18px; }
.dos-imp-medio-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--linea); border-radius: 999px; padding: 2px 9px 2px 4px; font-size: .75rem; color: var(--texto); text-decoration: none; background: var(--superficie-2); transition: border-color .12s, background .12s; }
.dos-imp-medio-chip:hover { border-color: var(--verde); background: var(--verde-bg-hover); text-decoration: none; }
.dos-imp-medio-chip.principal { border-color: var(--verde-bd-2); background: var(--verde-bg-chip); font-weight: 600; }
.dos-imp-chip-fav { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }

/* «Añadir enlaces a mano», debajo de las pastillas (Jacobo, 30/09/2026, v334): «la barra a todo el
   ancho y la explicación debajo de la barra». La barra es un solo campo —icono, texto y botón
   dentro— y crece con lo que se pega (field-sizing), hasta un tope. */
.dos-manual { margin: 0 0 6px; }
.dos-manual-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 5px 5px 5px 14px; border: 1px solid var(--linea); border-radius: 16px; background: var(--superficie); }
.dos-manual-ico { display: inline-flex; color: var(--texto-suave); flex: 0 0 auto; }
.dos-manual-ico .tar-ico { width: 18px; height: 18px; }
.dos-manual-url { flex: 1 1 220px; min-width: 0; resize: none; field-sizing: content; min-height: 36px; max-height: 120px; padding: 8px 0; border: none; background: transparent; color: var(--texto); font-family: inherit; font-size: .875rem; line-height: 1.4; }
.dos-manual-url:focus { outline: none; box-shadow: none; }
.dos-manual-barra:focus-within { border-color: var(--verde-bd-2); box-shadow: 0 0 0 3px rgba(24, 215, 244, .30); }
.dos-manual-btn { flex: 0 0 auto; white-space: nowrap; }
.dos-manual-exp { margin: 6px 14px 0; font-size: .75rem; line-height: 1.45; color: var(--texto-suave); }
/* Las burbujas (v334): ámbito (Todos · Nacionales · Regionales) | dónde está la palabra. Llevan la
   piel de los chips de rango (.dos-rango): vidrio y, activas, el cian de la marca. */
.dos-burbujas { margin: 18px 0 2px; }
.dos-burbujas-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dos-burbuja { display: inline-flex; align-items: center; gap: 7px; }
.dos-burbuja:disabled { opacity: .42; cursor: default; }
.dos-burbuja-n { font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; padding: 3px 7px; border-radius: 999px; background: var(--verde-bg-chip); color: var(--verde-texto-2); }
.dos-rango.activa .dos-burbuja-n { background: rgba(255, 255, 255, .24); color: #fff; }
.dos-burbuja-flecha { display: inline-flex; margin-left: -2px; transition: transform .2s ease; }
.dos-burbuja-flecha .tar-ico { width: 14px; height: 14px; }
.dos-burbuja-flecha.abierta { transform: rotate(180deg); }
.dos-burbujas-sep { width: 1px; align-self: stretch; margin: 5px 4px; background: var(--linea); }
.dos-burbujas-sel { margin-left: auto; font-size: .78125rem; color: var(--texto-suave); white-space: nowrap; }
.dos-burbujas-sel a { color: var(--verde-oscuro); cursor: pointer; }
.dos-burbujas-regiones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--verde-bg-panel); }
.dos-burbuja-reg { font-size: .78125rem; padding: 5px 11px; }
.dos-sin-filtro { margin: 18px 0 6px; }
/* Las burbujas esconden con `hidden`, y `.dos-impacto { display: block }` pisaría el del navegador (que no lleva
   !important). */
.dos-impacto[hidden], .dos-grupo[hidden], .dos-sin-filtro[hidden] { display: none !important; }
/* Informes de miles de noticias (v334: se enseñan todas): el navegador no maqueta ni pinta las fichas que están
   fuera de la pantalla hasta que se acercan; recuerda la altura de las ya vistas. */
.dos-lista > .dos-impacto { content-visibility: auto; contain-intrinsic-size: auto 300px; }
@media (max-width: 720px) {
  .dos-burbujas-sep { display: none; }
  .dos-burbujas-sel { margin-left: 0; flex-basis: 100%; }
}
.dos-imp-nota { color: var(--texto-suave); font-size: .78125rem; }
.dos-nota-legal { font-size: .71875rem; color: var(--texto-suave); border-top: 1px solid var(--gris-fila); margin-top: 28px; padding-top: 10px; }
.dos-portadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px 12px; margin: 6px 0 4px; }
.dos-portada { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; color: var(--texto-suave); font-size: .6875rem; }
.dos-portada img { width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.06); background: var(--superficie); transition: transform .12s, box-shadow .12s; }
.dos-portada:hover img { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.dos-portada span { text-align: center; line-height: 1.2; }
.dos-portada-reg { font-size: .625rem; color: var(--verde-texto-2); background: var(--verde-bg-chip); border: 1px solid var(--verde-bd-2); border-radius: 999px; padding: 1px 8px; margin-top: 1px; }
/* Portada con casilla en la esquina (incluir/no en el dossier PDF) */
.dos-portada-wrap { position: relative; }
.dos-portada-wrap.no-sel .dos-portada { opacity: .38; }
.dos-portada-check { position: absolute; top: 4px; right: 4px; z-index: 2; background: var(--superficie); border: 1px solid var(--linea); border-radius: 6px; padding: 3px 4px 1px; box-shadow: 0 1px 4px rgba(0,0,0,.18); cursor: pointer; line-height: 1; }
.dos-portada-check input { margin: 0; cursor: pointer; accent-color: var(--verde); }

/* ===== Animación de carga al subir archivos a una carpeta de reunión ===== */
@keyframes carga-giro { to { transform: rotate(360deg); } }
@keyframes carga-indet { 0% { transform: translateX(-115%); } 100% { transform: translateX(320%); } }

/* ===== Tareas: tablones con columnas, vencimiento y completadas ===== */

.tablon { border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie); padding: 12px 14px; margin: 0 0 14px; }

/* Selector de red (chips de marca) */
.rrss-redes { display: flex; flex-wrap: wrap; gap: 8px; }
.rrss-red { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1.5px solid var(--linea); background: var(--fondo); border-radius: 999px; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--texto); transition: all .12s; }
.rrss-red:hover { border-color: var(--red-col); }
.rrss-red .rrss-red-ico { display: inline-flex; color: var(--texto-suave); }
.rrss-red.activo { background: var(--red-col); border-color: var(--red-col); color: #fff; }
.rrss-red.activo .rrss-red-ico { color: #fff; }

/* Segmentos (periodo / ventana) */
.rrss-segment { display: inline-flex; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.rrss-segment button { border: none; background: var(--fondo); padding: 8px 16px; cursor: pointer; font-size: .84375rem; color: var(--texto); border-right: 1px solid var(--linea); }
.rrss-segment button:last-child { border-right: none; }
.rrss-segment button:hover { background: var(--verde-bg-hover, #eef7e3); }
.rrss-segment button.activo { background: var(--verde); color: #fff; font-weight: 700; }

/* Cabecera de cuenta en el resultado */
.rrss-cab-cuenta { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; }
.rrss-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--linea); }
.rrss-cab-info h2 { margin: 0 0 2px; font-size: 1.3125rem; }
.rrss-ver, .rrss-cab-info .rrss-ver { color: var(--verde-oscuro); font-size: .9375rem; }
.rrss-cab-sub { font-size: .8125rem; color: var(--texto-suave); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rrss-cab-sub a { color: var(--texto-suave); }
.rrss-red-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--red-col); font-weight: 700; }
.rrss-red-tag svg { width: 16px; height: 16px; }

/* Avisos honestos */
.rrss-avisos { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.rrss-aviso { background: var(--ambar-fondo, #fff7e6); border: 1px solid var(--ambar-bd, #f0dca8); color: var(--ambar-texto, #7a5b12); border-radius: 8px; padding: 10px 12px; font-size: .8125rem; line-height: 1.5; }

/* KPIs */
.rrss-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; }
.rrss-kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 16px; text-align: center; }
.rrss-kpi-val { font-size: 1.6875rem; font-weight: 800; color: var(--verde-oscuro); line-height: 1.1; }
.rrss-kpi-lab { font-size: .78125rem; color: var(--texto-suave); margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }

/* Fechas personalizadas + opciones de comparación */
.rrss-fechas { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.rrss-fechas.oculto { display: none; }
.rrss-fechas label { font-size: .8125rem; color: var(--texto-suave); display: inline-flex; align-items: center; gap: 6px; }
.rrss-fechas input[type="date"] { padding: 7px 9px; border: 1px solid var(--linea); border-radius: 7px; font-size: .8125rem; background: var(--fondo); color: var(--texto); }

/* Bloques + graficas */
.rrss-leyenda { display: flex; gap: 16px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.rrss-tooltip { position: fixed; z-index: 9999; background: #222; color: #fff; padding: 6px 10px; border-radius: 6px; font-size: .78125rem; pointer-events: none; box-shadow: 0 3px 12px rgba(0,0,0,.28); max-width: 260px; }
.rrss-tooltip.oculto { display: none; }

/* Popup de progreso */
@keyframes rrss-giro { to { transform: rotate(360deg); } }

/* ===== Dossier · CONEXIONES entre búsquedas (cuerdas AZULES) y vista de conjunto ===== */
.dos-busquedas-wrap { position: relative; }
/* EL CHIP DEL CONJUNTO: azul frente al verde de las sueltas, con una fila por búsqueda.
   Aquí vivía el CSS de las cuerdas (SVG con muelle, aros laterales, tijeras). Se retiró el
   27/08/2026: no fallaban por perceptivas sino por operativas — no escalan, no hay gesto de
   arrastrar una cuerda en móvil, y en producción nunca se usaron. */
.dos-cj { border-color: #a9cdf0; background: linear-gradient(0deg, var(--superficie), var(--superficie)); }
.dos-cj:hover { box-shadow: 0 6px 16px rgba(14, 126, 143, .16); }
.dos-cj-cab { display: flex; align-items: center; gap: 8px; }
.dos-cj-tit { display: inline-flex; align-items: center; gap: 5px; font-size: .78125rem; font-weight: bold; color: #0A5A66; }
.dos-cj-sep { margin-left: auto; color: #0A5A66; }
.dos-cj-sep:hover { color: #c23434; border-color: #e0b4b4; }
.dos-cj .dos-card-n { color: #0A5A66; }
/* UNA LÍNEA POR BÚSQUEDA. El chip mide 249 px de ancho y tiene que caber en el MISMO alto
   que una tarjeta suelta: lo que no entra se recorta con puntos suspensivos (el título del
   elemento lleva el texto entero). Dos líneas por miembro estirarían TODA la fila del tablón,
   porque la rejilla iguala el alto de las casillas de una fila. */
.dos-cj-filas { display: flex; flex-direction: column; gap: 2px; }
.dos-cj-fila { display: flex; align-items: baseline; gap: 6px; font-size: .71875rem; line-height: 1.5; color: var(--texto); min-width: 0; }
.dos-cj-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dos-cj-amb { color: var(--texto-suave); }
.dos-cj-n { flex: none; font-weight: bold; color: #0A5A66; }
/* Los tres botones tienen que caber en UNA línea: con «Abrir conjunto» pasaban a dos y el
   chip crecía 35 px. El chevrón va pegado, sin espacio propio. */
.dos-cj .dos-card-acc { flex-wrap: nowrap; }
.dos-cj .dos-card-acc > * { white-space: nowrap; }
.dos-cj-menu { display: inline-flex; align-items: center; gap: 2px; }
.dos-kw-chip.azul { background: #e8f1fb; border-color: #b9d5f0; color: #0A5A66; }

/* EL ARO DE ESPERA. Se llena mientras mantienes una tarjeta encima de otra y es lo que hace
   que la fusión no ocurra nunca por sorpresa: Apple tiene este mismo gesto en su pantalla de
   inicio y la queja conocida es exactamente esa — carpetas creadas sin querer. Se ve venir, y
   apartarse lo cancela. Solo `opacity` y `stroke-dashoffset`: nada que fuerce maqueta. */
/* El aro es una CAPA DEL TABLÓN, no un hijo de la tarjeta: dentro del destino quedaba tapado
   por la tarjeta que arrastras (que va por encima, como debe) y medio aro no se lee. */
.dos-aro { position: absolute; width: 54px; height: 54px; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 40; }
.dos-aro.visible { opacity: 1; }
.dos-aro svg { width: 100%; height: 100%; }
.dos-aro circle { fill: none; stroke-width: 4; }
.dos-aro-b { stroke: rgba(14, 126, 143, .18); }
.dos-aro-a { stroke: #378ADD; stroke-linecap: round; }
.dos-aro.lleno .dos-aro-a { stroke: #2f8f3f; }
.dos-busqueda-card.dos-fusion-destino { border-color: #85b7eb; box-shadow: 0 0 0 3px rgba(55, 138, 221, .18); }
.dos-busqueda-card.dos-fusion-llena { border-color: #e0b4b4; }

/* Durante el arrastre el navegador no puede llevarse el gesto como scroll, o en móvil la
   tarjeta se queda quieta y la página se va. */
.dos-busquedas .dos-busqueda-card { touch-action: none; }

.dos-busqueda-card { position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.dos-busqueda-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .10); }
.dos-busqueda-card.dos-arrastrando { transition: none; z-index: 6; box-shadow: 0 14px 30px rgba(0, 0, 0, .28); cursor: grabbing; opacity: .95; pointer-events: none; }
.dos-busquedas.sin-seleccion, .dos-busquedas.sin-seleccion * { user-select: none; }

/* Vista #/conjunto: pestañas PÍLDORA (como los chips del inicio; la activa en el azul
   de las conexiones) + cada búsqueda en su bloque separado. */
.dos-conj-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 2px 0 6px; border-bottom: 1px solid var(--linea); padding-bottom: 10px; }
.dos-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); cursor: pointer; font-family: inherit; font-size: .8125rem; color: var(--texto); transition: background .12s, border-color .12s, color .12s; }
.dos-tab:hover { border-color: #0E7E8F; }
.dos-tab.activo { background: #0E7E8F; border-color: #0E7E8F; color: #fff; font-weight: 600; }
/* El emoji del nudo, en círculo BLANCO cuando la pestaña Conjunto está activa (si no,
   el nudo azul se pierde sobre el fondo azul de la pestaña seleccionada). */
.dos-tab-ico { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; font-size: .6875rem; line-height: 1; }
.dos-tab.activo .dos-tab-ico { background: #fff; }
.dos-conj-bloque { margin-top: 26px; border-top: 3px solid #0E7E8F; padding-top: 13px; }
.dos-conj-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dos-conj-num { width: 28px; height: 28px; border-radius: 50%; background: #0E7E8F; color: #fff; font-weight: bold; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; flex: none; }
.dos-conj-cab-txt { flex: 1; }
.dos-conj-cab h2 { margin: 0 0 4px; font-size: 1.25rem; }

/* ===== Tarjeta de búsqueda rediseñada: «taco de recortes» minimalista con clip =====
   Concepto: la tarjeta es la hoja superior del taco; por ARRIBA asoman dos hojas
   (pseudo-elementos con clip-path — inmunes al stacking context que crean el hover
   y el arrastre con transform, al contrario que el truco de z-index:-1) y un clip
   de alambre SVG pisa el borde superior izquierdo. Todo con var(--…): funciona en
   los tres modos de tema. */
/* TABLÓN: pastillas más estrechas y HUECO generoso entre casillas para que las
   cuerdas se vean con claridad entre pastilla y pastilla. */
/* PASTILLAS DE TAMAÑO FIJO (norma de Jacobo, 12/09/2026): las tarjetas pequeñas y cuadradas o casi
   —estas, las del panel y las de cuenta de Redes— miden lo mismo en el escritorio, en la pantalla
   dividida y en el móvil; la rejilla las centra y las recoloca, nunca las estira ni las encoge. Las
   pastillas grandes de menú (Mitra) sí se adaptan al ancho. */
.dos-busquedas { grid-template-columns: repeat(auto-fill, 256px); justify-content: center; gap: 26px 24px; }
.dos-busquedas-wrap { padding-top: 8px; }
/* CASILLA (placeholder) fija: contorno discontinuo siempre visible; la pastilla vive
   dentro (el padding superior deja sitio a las hojas y al clip del taco). */
.dos-slot { position: relative; border: 1.5px dashed var(--linea); border-radius: 14px; padding: 14px 8px 8px; min-height: 176px; transition: border-color .15s, background .15s; }
.dos-slot-destino { border-color: #0E7E8F; border-style: dashed; background: rgba(24, 215, 244, .07); }
.dos-slot > .dos-busqueda-card { height: 100%; }
.dos-busqueda-card { border: 1px solid var(--verde-bd); border-radius: 12px; padding: 13px 12px 12px; gap: 8px; background: var(--superficie); cursor: pointer; }
/* Hojas del taco: dos slivers asomando por arriba, recortados por clip-path para
   que nunca pisen la tarjeta ni sobresalgan por los lados (cero scroll lateral). */
/*
 * LOS FOLIOS, CADA UNO DE SU VERDE (Jacobo, 10/09/2026): «los folios de detras de la pastilla y
 * del clip que se ven como sobresalen deben ser cada uno de distintas tonalidades de verde pero
 * sutil, muy suave y liquid glass».
 *
 * Eran los dos del mismo gris (`--superficie-2`), asi que se leian como una sola hoja gruesa. Con
 * dos verdes distintos —y el de mas atras mas claro, que es como se ve un taco de verdad— se
 * separan sin gritar. Los porcentajes son bajos a proposito: 7 % y 4 % sobre la superficie es
 * apenas un tinte, y por encima de eso el taco empieza a competir con la tarjeta.
 *
 * Y el vidrio: `backdrop-filter` con un poco de saturacion es lo que hace que el folio recoja el
 * color de lo que tiene detras en vez de ser una pegatina opaca. Es la misma regla del Liquid
 * Glass de la casa —el vidrio no muestrea vidrio— aplicada aqui: los folios estan FUERA de la
 * tarjeta, sobre el fondo, asi que pueden tener vidrio; la tarjeta no.
 */
.dos-sola.dos-src-medios::before, .dos-sola.dos-src-medios::after {
  content: ''; position: absolute; pointer-events: none;
  height: 16px; border-radius: 8px 8px 0 0;
  -webkit-backdrop-filter: blur(3px) saturate(1.15);
  backdrop-filter: blur(3px) saturate(1.15);
}
/* La hoja de delante: el verde algo mas presente, porque es la que se ve entera. */
.dos-sola.dos-src-medios::before {
  left: 14px; right: 18px; top: -6px; transform: rotate(-1.1deg); clip-path: inset(-4px -4px 8px -4px);
  background: color-mix(in srgb, var(--f-medios) 7%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--f-medios) 22%, var(--linea));
}
/* La de detras, mas clara y mas apagada: es la que da la profundidad del taco. */
.dos-sola.dos-src-medios::after {
  left: 30px; right: 34px; top: -11px; transform: rotate(1.3deg); clip-path: inset(-4px -4px 5px -4px);
  background: color-mix(in srgb, var(--f-medios) 4%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--f-medios) 14%, var(--linea));
  opacity: .85;
}
/* --- SIN LEER: la búsqueda ha terminado con datos y el usuario no ha entrado todavía.
   Verde pastel muy suave; al abrirla vuelve a blanco (marcarLeida en radar.js). --- */
.dos-busqueda-card.sin-leer { background: var(--verde-sinleer); border-color: var(--verde-sinleer-bd); }
.dos-sola.dos-src-medios.sin-leer::before, .dos-sola.dos-src-medios.sin-leer::after { background: var(--verde-sinleer); }

/* --- BARRIDO DE RADAR: la tarjeta como monitor mientras la búsqueda corre --- */
.dos-barrido { display: none; }
.dos-busqueda-card.barriendo > *:not(.dos-barrido) { filter: blur(2.6px); opacity: .5; pointer-events: none; user-select: none; }
.dos-busqueda-card.barriendo {
  display: flex; /* se mantiene la caja; solo cambia lo de dentro */
  border-color: var(--verde-bd);
}
.dos-busqueda-card.barriendo .dos-barrido {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  position: absolute; inset: 0; z-index: 5; border-radius: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--superficie) 62%, transparent);
}
/* --- LA GOTA DE AGUA (12/08/2026, directriz de Jacobo: fuera el radar) ---
   Una gota cae en el centro de la ficha y levanta ondas concéntricas que se abren hasta los
   bordes. NO hay círculos dibujados de fondo: lo único que se ve es la onda mientras pasa, como
   en el agua de verdad.

   Cómo se finge el relieve sin 3D. Un anillo que crece se lee como un círculo que crece, no como
   una ola. Lo que lo convierte en ola son tres cosas, todas de luz:
     · un VALLE en sombra por dentro de la cresta (el agua que la onda se ha llevado),
     · una CRESTA casi blanca (el brillo del borde levantado, con la luz viniendo de arriba),
     · una SOMBRA PROYECTADA que sigue la silueta del anillo (drop-shadow respeta el alfa, así
       que sombrea el aro y no su caja) y cae hacia abajo, coherente con esa misma luz.
   Con eso el ojo ve volumen aunque todo sea plano.

   Todo se anima con transform y opacity —compuestas por GPU— y nunca con ancho/alto: con varias
   tarjetas barriendo a la vez, animar tamaños obligaría a recalcular el degradado en cada
   fotograma justo mientras el hilo principal pinta resultados. */
.dos-barrido-agua {
  position: absolute; inset: 0; overflow: hidden; border-radius: 12px; pointer-events: none;
  /* Brillo húmedo del fondo: sugiere que hay una lámina de agua, sin dibujar ningún borde. */
  background: radial-gradient(120% 100% at 50% 42%,
    color-mix(in srgb, #fff 26%, transparent) 0%,
    transparent 62%);
}
.dos-onda {
  position: absolute; left: 50%; top: 50%;
  width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%;
  opacity: 0;
  /* El corte de la ola, de dentro afuera: valle en sombra, cresta iluminada, cuerpo y caída.
     Dos cosas lo deciden, y las dos costaron una versión fallida cada una.

     EL CONTRASTE. Primera versión: cresta blanca al 78 % sobre una tarjeta que ya es casi
     blanca — invisible, y sin cresta no hay relieve, solo una circunferencia verde. Ahora la
     cresta es blanca del todo y va PEGADA a la parte más oscura de la onda: el salto de claro a
     oscuro en un par de píxeles es lo que el ojo lee como un borde levantado.

     LOS TOPES SUAVES. Segunda versión: con bandas cerradas («42% 45.4%») el navegador pinta
     cantos limpios y salen aros concéntricos de diana. Con topes de una sola posición interpola,
     y lo que sale es un abultamiento — que es lo que es una ola: agua que sube y baja, no una
     circunferencia dibujada. */
  background: radial-gradient(circle,
    transparent 40%,
    color-mix(in srgb, var(--verde-oscuro) 15%, transparent) 45%,
    color-mix(in srgb, #fff 92%, transparent) 47.4%,
    color-mix(in srgb, var(--verde-oscuro) 42%, transparent) 48.8%,
    color-mix(in srgb, var(--verde-oscuro) 8%, transparent) 50.4%,
    transparent 53%);
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--verde-oscuro) 30%, transparent));
  animation: dos-onda 3.6s cubic-bezier(.16, .62, .3, 1) infinite;
  will-change: transform, opacity;
}
/* Cuatro ondas desfasadas 0,9 s: una gota cada 0,9 s con la anterior aún viajando, que es como
   se ve una superficie que alguien no deja de tocar. */
/* Y no son idénticas: cada gota cae con su fuerza. Variar un poco el alcance y el tamaño rompe
   la cadencia de reloj, que es lo que delata a una animación y lo que el agua nunca tiene. */
.dos-onda:nth-child(2) { animation-delay: .9s;  transform-origin: 50% 50%; scale: 1.06; }
.dos-onda:nth-child(3) { animation-delay: 1.8s; scale: .94; }
.dos-onda:nth-child(4) { animation-delay: 2.7s; scale: 1.02; }
@keyframes dos-onda {
  0%   { transform: scale(.04); opacity: 0; }
  6%   { opacity: .95; }                        /* el golpe: la onda nace ya marcada */
  70%  { opacity: .34; }
  100% { transform: scale(1.55); opacity: 0; }  /* se abre más allá del borde y se apaga */
}

/* LA GOTA. Cae, se aplasta contra la superficie y desaparece justo cuando nace la onda: sin
   ella, las ondas salen de la nada y el ojo no entiende qué las provoca. */
.dos-gota {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -34px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%,
    color-mix(in srgb, #fff 92%, transparent) 0 22%,
    color-mix(in srgb, var(--verde-oscuro) 46%, transparent) 60%,
    color-mix(in srgb, var(--verde-oscuro) 26%, transparent) 100%);
  animation: dos-gota 3.6s cubic-bezier(.5, 0, .85, .35) infinite;
  will-change: transform, opacity;
}
@keyframes dos-gota {
  0%   { transform: translateY(-14px) scaleY(1.35) scaleX(.8); opacity: 0; }
  10%  { opacity: .9; }
  22%  { transform: translateY(28px) scaleY(1.15) scaleX(.9); opacity: .95; }
  26%  { transform: translateY(34px) scaleY(.3) scaleX(1.9); opacity: .5; }  /* impacto */
  32%  { transform: translateY(34px) scaleY(.1) scaleX(2.6); opacity: 0; }
  100% { transform: translateY(34px) scaleY(.1) scaleX(2.6); opacity: 0; }
}

/* La ficha «se moja»: el contenido borroso respira al ritmo de las gotas. Muy poco —medio por
   ciento— porque lo que tiene que notarse es que la superficie se mueve, no que algo late. */
.dos-busqueda-card.barriendo > *:not(.dos-barrido) { animation: dos-chapoteo 3.6s ease-in-out infinite; }
@keyframes dos-chapoteo {
  0%, 100% { transform: scale(1); }
  8%       { transform: scale(1.005); }
  30%      { transform: scale(.999); }
  60%      { transform: scale(1); }
}
.dos-barrido-pct { position: relative; font-weight: 800; font-size: 1.875rem; line-height: 1; letter-spacing: -.5px; }
.dos-barrido-pct span { font-size: .9375rem; font-weight: 700; margin-left: 1px; }
.dos-barrido-fase { position: relative; font-size: .71875rem; color: var(--texto-suave); text-align: center; min-height: 14px; }
.dos-barrido-ver { position: relative; margin-top: 4px; padding: 5px 11px; font-size: .75rem; }
/* EN OSCURO la misma cresta se dispara. Sobre una tarjeta clara, un blanco al 92 % es el brillo
   justo de un borde de agua; sobre una oscura, el contraste lo convierte en un aro de neón que
   se come la ficha (visto en pantalla). Se baja la cresta, se sube el verde y se cambia la
   sombra proyectada por una luz tenue: bajo el agua oscura no hay sombras negras, hay reflejos. */
html[data-modo="incognito-oscuro"] .dos-onda {
  background: radial-gradient(circle,
    transparent 40%,
    color-mix(in srgb, var(--verde-oscuro) 22%, transparent) 45%,
    color-mix(in srgb, #fff 46%, transparent) 47.4%,
    color-mix(in srgb, var(--verde-oscuro) 58%, transparent) 48.8%,
    color-mix(in srgb, var(--verde-oscuro) 14%, transparent) 50.4%,
    transparent 53%);
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--verde-oscuro) 26%, transparent));
}
html[data-modo="incognito-oscuro"] .dos-barrido-agua {
  background: radial-gradient(120% 100% at 50% 42%, color-mix(in srgb, #fff 8%, transparent) 0%, transparent 62%);
}

/* Quien pide menos movimiento no debe quedarse sin saber que la búsqueda corre: la gota deja de
   caer y queda UNA onda muy lenta, que informa igual sin agitar la pantalla. */
@media (prefers-reduced-motion: reduce) {
  .dos-onda { animation-duration: 9s; filter: none; }
  .dos-onda:nth-child(2), .dos-onda:nth-child(3), .dos-onda:nth-child(4) { display: none; }
  .dos-gota { display: none; }
  .dos-busqueda-card.barriendo > *:not(.dos-barrido) { animation: none; }
}

/* El clip de alambre que sujeta el taco (único adorno figurativo, monocromo) */
.dos-clip { position: absolute; top: -13px; left: 18px; width: 21px; height: 28px; color: var(--texto-suave); transform: rotate(-8deg); pointer-events: none; z-index: 1; }

/* Esquina superior derecha: círculos de automatización (gris → AZUL activa) y borrar */
.dos-card-sup { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 3; }
.dos-circ { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--linea); background: var(--superficie); color: var(--texto-suave); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; line-height: 1; transition: background .15s, color .15s, border-color .15s, transform .1s; }
.dos-circ svg { display: block; }
.dos-circ:hover { border-color: var(--texto-suave); background: var(--gris-fila); }
.dos-circ:active { transform: scale(.92); }
.dos-circ-auto.activa { background: #0E7E8F; border-color: #0E7E8F; color: #fff; }
.dos-circ-auto.activa:hover { background: #0A5A66; border-color: #0A5A66; }
.dos-circ-borrar:hover { color: #c23434; border-color: #c23434; background: rgba(194, 52, 52, .08); }
.dos-circ-borrar.armada { background: #c23434; border-color: #c23434; color: #fff; }

/* Contenido: keywords (título) → ámbito con banderita → dato → acciones */
/* Una sola línea: las que no caben se ocultan y aparece el botón «+N» (bocadillo). */
.dos-card-kws { margin-top: 2px; padding-right: 62px; min-height: 26px; flex-wrap: nowrap; overflow: hidden; align-items: center; }
.dos-card-kws .dos-kw-chip { font-size: .84375rem; padding: 4px 12px; font-weight: 600; white-space: nowrap; flex: none; }
.dos-kw-mas { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--verde-bd-2); background: var(--verde-bg-chip); color: var(--verde-texto-2); font-size: .6875rem; font-weight: 700; cursor: pointer; padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .12s; }
.dos-kw-mas:hover { background: var(--verde-bg-badge); }
.dos-kw-todas { margin-top: 2px; gap: 5px; flex-wrap: wrap; }
.dos-kw-todas .dos-kw-chip { font-size: .78125rem; padding: 3px 10px; }
.dos-card-ambito { display: flex; align-items: center; gap: 6px; text-transform: uppercase; font-size: .6875rem; letter-spacing: .08em; color: var(--texto-suave); font-weight: 600; }
.dos-card-ambito svg { display: block; }
.dos-card-flag { width: 16px; height: 11px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.dos-card-stats { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
.dos-card-n { font-size: 1.6875rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--texto); }
.dos-card-n-lab { font-size: .78125rem; color: var(--texto-suave); }
.dos-card-fecha { flex-basis: 100%; font-size: .71875rem; color: var(--texto-suave); }
/* Pie de acciones: margin-top auto iguala las alturas de la fila */
.dos-card-acc { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--verde-bd-sub); }
.dos-card-acc .boton-primario, .dos-card-acc .boton-secundario { padding: 6px 12px; font-size: .8125rem; border-radius: 8px; }

/* Mini-popover anclado a la tarjeta (automatización / regenerar) */
.dos-pop-abierta { z-index: 15; }
.dos-minipop { position: absolute; z-index: 40; width: 212px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, .16); padding: 11px; display: flex; flex-direction: column; gap: 8px; font-size: .78125rem; }
.dos-minipop-tit { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); font-weight: 700; }
.dos-minipop-op { display: block; width: 100%; text-align: left; background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: .78125rem; color: var(--texto); cursor: pointer; }
.dos-minipop-op:hover { background: var(--verde-bg-hover); border-color: var(--verde-bd-2); }
.dos-minipop-op-azul { border-color: #0E7E8F; color: #0A5A66; font-weight: 600; }
.dos-minipop-op-azul:hover { background: rgba(24, 215, 244, .08); border-color: #0E7E8F; }
.dos-minipop-n { float: right; background: #0E7E8F; color: #fff; border-radius: 999px; padding: 0 7px; font-size: .6875rem; line-height: 1.0625rem; }
html[data-modo="incognito-oscuro"] .dos-minipop-op-azul { color: #7db3e8; }

/* Popup «qué búsquedas incluir en el PDF» (vista de conjunto) */
.dos-pdfc-conj { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 10px; cursor: pointer; font-size: .875rem; }
.dos-pdfc-inds { display: flex; flex-direction: column; gap: 7px; margin: 0 0 14px 26px; }
.dos-pdfc-inds label { display: flex; gap: 8px; align-items: center; cursor: pointer; font-size: .84375rem; }
.dos-pdfc-inds label:has(input:disabled) { opacity: .45; cursor: default; }

/* Popup de regeneración en conjunto: una barra por búsqueda */
.pa-conj-item { margin-bottom: 14px; }
.pa-conj-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.pa-conj-cab .dos-meta { margin-left: auto; }

/* ===== DOSSIER · ámbito .dosx: SOLO las vistas interiores (resultados, conjunto,
   formulario, portadas, medios, TV). El router lo pone en #contenido en toda ruta
   que no sea el INICIO — el tablón de búsquedas y sus cuerdas no lo llevan y quedan
   exactamente como estaban. Misma tipografía que toda la plataforma. ===== */
.dosx .subtitulo { max-width: 84ch; }
.dosx .dos-seccion-tit { min-width: 0; }
.dosx .dos-seccion-tit .dos-bucket-acc { align-self: center; }

/* --- TARJETA DE LA EXTENSIÓN (18/08/2026, fase 6) ----------------------------------------
   Aparece en el panel y en el Radar. Es una invitación, no un muro: quien no la instale
   sigue usando Tarsis igual, y el mensaje lo dice. Cambia de color según el estado para que
   se distinga de un vistazo lo que hay que hacer (o que no hay que hacer nada). */
.tar-ext {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 14px 18px;
  background: var(--verde-bg); border: 1px solid var(--verde-bd-sub); border-radius: 14px;
}
.tar-ext-txt { flex: 1 1 15rem; font-size: .875rem; line-height: 1.55; color: var(--texto-suave); }
.tar-ext-txt b { color: var(--verde-oscuro); }
.tar-ext .boton-primario, .tar-ext .boton-secundario { flex: 0 0 auto; text-decoration: none; }
/* Informativa (móvil): no hay nada que pulsar, así que ni destaca ni lleva botón. */
.tar-ext-info { background: var(--surface, #fafbfa); border-style: dashed; }

/* Botón dentro del aviso de versión (solo aparece en producción, donde la solución es
   recargar). En la maqueta el aviso no lleva botón: allí hay que reiniciar el servidor. */
.tar-aviso-version button {
  margin-left: 10px; padding: 4px 12px; font: inherit; font-size: .8125rem; font-weight: 600;
  color: #7a1d1d; background: #fff; border: 0; border-radius: 999px; cursor: pointer;
}
.tar-aviso-version button:hover { background: #ffeaea; }

/* =========================================================================
   CANARIO LOGS (26/08/2026) — la sala de máquinas.
   Diseño deliberadamente sobrio: aquí no se viene a mirar, se viene a
   ARREGLAR. Lo accionable arriba y con color; el resto, gris y compacto.
   ========================================================================= */
.can-intro { margin: -6px 0 16px; max-width: 60ch; }

/* El marcador: lo primero que se ve al entrar. Verde no es «bonito», es
   «puedes irte tranquilo»; rojo es «hay trabajo». */
.can-marcador {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--linea); border-left-width: 5px; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 20px; background: var(--superficie);
}
.can-marcador-tit { font-size: 1.0625rem; font-weight: bold; }
.can-bien { border-left-color: var(--verde); }
.can-regular { border-left-color: #d99a2b; }
.can-mal { border-left-color: #b00020; }

.can-h { font-size: .9375rem; margin: 22px 0 8px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.can-vacio { padding: 14px 16px; border: 1px dashed var(--linea); border-radius: 10px; }

/* --- Una incidencia: la unidad de trabajo --- */
.can-inc {
  border: 1px solid var(--linea); border-left-width: 5px; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px; background: var(--superficie);
}
.can-inc-fallo { border-left-color: #b00020; }
.can-inc-aviso { border-left-color: #d99a2b; }
.can-vista { opacity: .82; }
.can-inc-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.can-inc-res { font-size: .9375rem; margin-bottom: 6px; }
.can-inc-meta { margin-bottom: 10px; }
.can-inc-datos { display: grid; gap: 4px; font-size: .84375rem; margin-bottom: 8px; }
.can-inc-det { border-left: 2px solid var(--linea); padding-left: 10px; margin-bottom: 10px; }
.can-inc-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.can-informe { width: 100%; min-height: 220px; margin-top: 10px; font-family: ui-monospace, Consolas, monospace; font-size: .75rem; }

.can-pil { font-size: .71875rem; border-radius: 12px; padding: 2px 9px; white-space: nowrap; }
.can-pil-fallo { background: #fdeaea; color: #b00020; border: 1px solid #e0b4b4; }
.can-pil-aviso { background: #fdf4e3; color: #8a6111; border: 1px solid #e6d2a8; }

/* --- El pulso: una fila por comprobación --- */
.can-lista { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.can-fila { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--linea); background: var(--superficie); }
.can-fila:first-child { border-top: none; }
.can-fila-txt { flex: 1; min-width: 0; }
.can-fila-meta { flex: 0 0 auto; text-align: right; font-size: .75rem; line-height: 1.35; }
.can-medido { font-size: .78125rem; word-break: break-word; }
.can-porque { margin-top: 4px; }
.can-porque summary { cursor: pointer; }
.can-donde { margin-top: 4px; word-break: break-word; }

/* El punto de estado: el mismo lenguaje en las filas y en el diario. */
.can-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; background: var(--texto-suave); }
.can-nivel-bien .can-punto { background: var(--verde); }
.can-nivel-aviso .can-punto { background: #d99a2b; }
.can-nivel-fallo .can-punto { background: #b00020; }
.can-nivel-no-aplica .can-punto { background: var(--linea); }

/* --- El diario en vivo --- */
.can-diario { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.can-linea { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-top: 1px solid var(--linea); font-size: .8125rem; background: var(--superficie); }
.can-linea:first-child { border-top: none; }
.can-hora { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.can-linea-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.can-linea-ms { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
/* EL DIARIO SE ABRE (Jacobo, 02/09/2026): «guarda algo de información desplegable para que te la
   pueda copiar y pegar aquí; si ha pasado algo hace horas no puedo ver el detalle». El detalle
   SIEMPRE se guardó; lo que faltaba era poder llegar a él. */
.can-linea-abre { display: block; padding: 0; }
.can-linea-abre > summary {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; cursor: pointer;
  list-style: none;
}
.can-linea-abre > summary::-webkit-details-marker { display: none; }
.can-linea-abre > summary:hover { background: var(--gris-fila); }
.can-linea-abre[open] > summary { background: var(--gris-fila); }
.can-linea-cuerpo { padding: 4px 14px 12px 40px; font-size: .8125rem; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
/* Las pruebas van en <pre>: llevan una fila por línea (fecha, medio y URL) y romperlas por el
   ancho de la caja las volvería ilegibles justo cuando hacen falta. */
.can-linea-det {
  margin: 4px 0 2px; padding: 8px 10px; border-radius: 8px; background: var(--gris-fila);
  border: 1px solid var(--linea); font-size: .75rem; line-height: 1.45; white-space: pre-wrap;
  word-break: break-word; max-width: 100%; font-family: inherit; color: var(--texto-suave);
}
.can-res { border-bottom: 1px solid var(--linea); }
.can-res > summary { cursor: pointer; padding: 6px 0; }
.can-res .can-linea-cuerpo { padding-left: 12px; }
.can-resueltas { margin-top: 18px; }
.can-resueltas summary { cursor: pointer; }
.can-linea-res { padding: 5px 0; border-bottom: 1px solid var(--linea); }

/* La tarjeta del panel: se distingue de las herramientas de producto. */
.tar-herr-tecnica { border-style: dashed; }

@media (max-width: 700px) {
  .can-fila { flex-wrap: wrap; }
  .can-fila-meta { text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   LAS TARJETAS DEL TABLÓN, UNA POR FUENTE (07/09/2026, encargo de Jacobo)

   Tres objetos y tres colores, pero UNA SOLA retícula: mismos mandos arriba a la derecha, mismas
   palabras clave, mismo alcance, misma cifra y mismas tres acciones abajo. Lo único que cambia de
   sitio es nada; lo que cambia es qué se dice en cada línea.

     · prensa  → legajo con clip   (las hojas ya existían; ahora son SOLO suyas)
     · redes   → notch integrado    (nace del propio material, sin franja que lo separe)
     · Mitra   → barra de ventana   (tres puntos, discretos, dentro de la misma altura)
     · varias  → nada de eso: tarjeta lisa, y el color y los iconos juntos dicen la mezcla

   El color entra como ILUMINACIÓN, no como relleno: un halo detrás y un borde teñido. El interior
   sigue siendo la superficie de siempre, que es lo que mantiene el tablón legible con veinte
   tarjetas a la vez.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --f-medios: #2f9e5e;
  --f-medios-t: #1d6b3e;
  --f-rrss: #7c4dd6;
  --f-rrss-t: #5b32a8;
  --f-trends: #17a8cf;
  --f-trends-t: #0d7290;
}
html[data-modo="incognito-oscuro"] {
  --f-medios: #4fc984; --f-medios-t: #9fe6bd;
  --f-rrss: #a888ee; --f-rrss-t: #cdb6ff;
  --f-trends: #4fcdea; --f-trends-t: #a2e6f6;
}
.dos-src-medios { --src: var(--f-medios); --src-t: var(--f-medios-t); }
.dos-src-rrss { --src: var(--f-rrss); --src-t: var(--f-rrss-t); }
.dos-src-trends { --src: var(--f-trends); --src-t: var(--f-trends-t); }
.dos-varias { --src: var(--verde); --src-t: var(--verde-texto); }

.dos-busqueda-card { position: relative; }
/*
 * EL HALO, CON SOMBRA DE COLOR Y NO CON UN DIV DETRÁS. El primer intento fue una capa absoluta con
 * `z-index: -1`, y no puede verse: un hijo con z-index negativo se pinta DETRÁS del fondo de su
 * propio padre, así que el halo quedaba tapado por la tarjeta entera. Una `box-shadow` teñida hace
 * lo mismo —resplandor fuera de la caja, nada dentro— sin elemento y sin capas que ordenar.
 */
.dos-sola, .dos-varias {
  border-color: color-mix(in srgb, var(--src) 42%, transparent);
  box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--src) 55%, transparent);
}
.dos-sola:hover, .dos-varias:hover { box-shadow: 0 8px 26px -6px color-mix(in srgb, var(--src) 70%, transparent); }

/* Cabecera: iconos pegados + nombre a la izquierda, mandos a la derecha. Los iconos se solapan
   4 px a propósito (Jacobo: sin signos de suma entre ellos, que formen un grupo). */
.dos-card-sup { position: static; display: flex; align-items: center; gap: 7px; min-height: 26px; }
.dos-card-ambitos { display: inline-flex; align-items: center; flex: 0 0 auto; }
.dos-card-ambitos > .dos-amb-ico + .dos-amb-ico { margin-left: -4px; }
.dos-amb-ico {
  width: 24px; height: 24px; border-radius: 7px; display: inline-grid; place-items: center;
  background: var(--superficie); border: 1px solid var(--linea); color: var(--texto-suave);
}
.dos-amb-ico svg { width: 14px; height: 14px; display: block; }
.dos-f-medios { color: var(--f-medios-t); border-color: color-mix(in srgb, var(--f-medios) 40%, transparent); background: color-mix(in srgb, var(--f-medios) 12%, var(--superficie)); }
.dos-f-rrss { color: var(--f-rrss-t); border-color: color-mix(in srgb, var(--f-rrss) 40%, transparent); background: color-mix(in srgb, var(--f-rrss) 12%, var(--superficie)); }
.dos-f-trends { color: var(--f-trends-t); border-color: color-mix(in srgb, var(--f-trends) 40%, transparent); background: color-mix(in srgb, var(--f-trends) 12%, var(--superficie)); }
.dos-card-fuente { font-weight: bold; font-size: .84375rem; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dos-card-mandos { margin-left: auto; display: flex; gap: 5px; flex: 0 0 auto; }

/* Alcance: bandera solo en prensa; burbuja de redes; periodo en Mitra. */
.dos-card-alcance { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-height: 22px; }
.dos-card-periodo { font-size: .71875rem; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }
.dos-burbuja { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; background: var(--gris-fila); border: 1px solid var(--linea); }
.dos-burbuja-red { width: 15px; height: 15px; border-radius: 4px; display: inline-grid; place-items: center; flex: 0 0 auto; }
.dos-burbuja-red svg { width: 15px; height: 15px; display: block; }

/* Resultados: una cifra grande, o el desglose cuando hay varias fuentes. */
.dos-card-desglose { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.dos-card-parte { font-size: .78125rem; color: var(--texto-suave); display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.dos-card-parte b { font-size: 1.1875rem; font-weight: bold; color: var(--texto); font-variant-numeric: tabular-nums; }
.dos-card-parte.dos-f-medios b { color: var(--f-medios-t); }
.dos-card-parte.dos-f-rrss b { color: var(--f-rrss-t); }
.dos-card-parte.dos-f-trends b { color: var(--f-trends-t); }
.dos-card-parte { background: none; border: none; padding: 0; }

/* Botón primario del color de su fuente; en las de varias, un degradado suave entre las suyas. */
.dos-sola .dos-card-acc .boton-primario { background: var(--src); border-color: var(--src); }
.dos-mix-medios-rrss .dos-card-acc .boton-primario { background: linear-gradient(100deg, var(--f-medios), var(--f-rrss)); border: none; }
.dos-mix-medios-trends .dos-card-acc .boton-primario { background: linear-gradient(100deg, var(--f-medios), var(--f-trends)); border: none; }
.dos-mix-rrss-trends .dos-card-acc .boton-primario { background: linear-gradient(100deg, var(--f-rrss), var(--f-trends)); border: none; }
.dos-mix-medios-rrss-trends .dos-card-acc .boton-primario { background: linear-gradient(100deg, var(--f-medios), var(--f-rrss) 55%, var(--f-trends)); border: none; }

/*
 * EL NOTCH DE REDES, QUE TIENE QUE NACER DEL MATERIAL. El primer intento fue una pastilla con
 * esquinas redondeadas abajo, y a la primera mirada se veía justo lo que Jacobo dijo que no podía
 * pasar: un objeto morado POSADO encima de la tarjeta, con su línea separándolo.
 *
 * El problema era el borde: cualquier forma con contorno se lee como una pieza aparte. Con un
 * degradado RADIAL no hay contorno en ninguna dirección —se apaga hacia los lados igual que hacia
 * abajo—, así que el blanco se vuelve lavanda y el lavanda morado sin que haya una raya en medio.
 * La cámara es lo único con forma propia, y va dentro de la mancha.
 */
/*
 * EL HUECO DE ARRIBA ES EL MISMO PARA TODAS. Medido: la tarjeta de Mitra salia 9 px mas alta
 * que las demas, que es exactamente lo que le anadia su `padding-top` por la barra de ventana —
 * y la regla de Jacobo decia que ni el notch ni la barra pueden hacer crecer la tarjeta. Ahora
 * el hueco se reserva en TODAS y los dos adornos viven dentro de el, sin sumar nada.
 */
.dos-sola, .dos-varias { padding-top: 22px; }
/*
 * EL DEGRADADO DE REDES, A TODO EL ANCHO Y SUAVE (Jacobo, 10/09/2026): «el morado de redes
 * sociales degradado debe ser a todo el ancho de la pastilla y mucho mas sutil, menos fuerte el
 * color».
 *
 * Antes era una mancha de 132 px centrada, con el morado A PLENO en el centro (`var(--f-rrss)`
 * al 0 %): se leia como un foco encendido sobre la tarjeta y pesaba mas que su contenido. Ahora
 * ocupa el ancho entero —se apoya en los bordes, que es lo que lo hace parecer parte de la
 * pastilla y no una pegatina— y el color mas fuerte es el 26 %, no el 100.
 */
.dos-notch {
  position: absolute; top: 0; left: 0; right: 0; height: 30px;
  pointer-events: none; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--f-rrss) 26%, transparent) 0%,
    color-mix(in srgb, var(--f-rrss) 12%, transparent) 45%,
    transparent 100%);
}
.dos-notch::after { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 24px; height: 5px; border-radius: 99px; background: var(--superficie); opacity: .55; }

/* El hueco de 14,6 px entre el icono y el nombre era un `margin-right` heredado, no el `gap`. */
.dos-card-sup > .dos-card-ambitos { margin-right: 0; }

/* LA BARRA DE VENTANA DE MITRA. Tres puntos y una regla fina, dentro de la altura de siempre. */

.dos-ventana { position: absolute; top: 0; left: 0; right: 0; height: 17px; display: flex; align-items: center; gap: 4px; padding: 0 10px; border-bottom: 1px solid var(--linea); background: color-mix(in srgb, var(--f-trends) 7%, transparent); border-radius: 12px 12px 0 0; pointer-events: none; }
.dos-ventana u { width: 6px; height: 6px; border-radius: 50%; display: block; }
.dos-ventana u:nth-child(1) { background: #f0776a; }
.dos-ventana u:nth-child(2) { background: #e8bd52; }
.dos-ventana u:nth-child(3) { background: #5cc76a; }

/* EL CONJUNTO EN ORO. Era azul, y el azul ahora es de Mitra; el oro es el otro color de la marca y
   además dice lo que es: no una fuente, sino una relación entre búsquedas. */
.dos-cj { --src: var(--oro-medio, #9a7420); --src-t: var(--oro-texto, #7a5c19); }
.dos-cj-pt { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--texto-suave); border: none; padding: 0; }
.dos-cj-pt.dos-f-medios { background: var(--f-medios); }
.dos-cj-pt.dos-f-rrss { background: var(--f-rrss); }
.dos-cj-pt.dos-f-trends { background: var(--f-trends); }
.dos-cj .dos-card-mandos { margin-left: auto; display: flex; gap: 5px; }

/*
 * QUE QUEPAN LOS TRES BOTONES EN UNA LÍNEA (medido el 07/09/2026). La casilla del tablón mide
 * 249 px y los tres botones sumaban 231 con sus huecos, contra 225 de ancho útil: «Regenerar» se
 * caía a una segunda fila y la tarjeta crecía 30 px. Con el paso más corto suman ~195 y entran
 * holgados, sin tocar el alto de nada.
 */
.dos-card-acc { flex-wrap: nowrap; gap: 5px; }
.dos-card-acc > .boton-primario, .dos-card-acc > .boton-secundario {
  padding: 6px 11px; font-size: .78125rem; white-space: nowrap; flex: 0 0 auto;
}

/* Los chips, del color de su fuente: en una búsqueda de varias, del color de la primera. */
.dos-src-medios .dos-kw-chip { background: color-mix(in srgb, var(--f-medios) 13%, transparent); border-color: color-mix(in srgb, var(--f-medios) 32%, transparent); color: var(--f-medios-t); }
.dos-src-rrss .dos-kw-chip { background: color-mix(in srgb, var(--f-rrss) 13%, transparent); border-color: color-mix(in srgb, var(--f-rrss) 32%, transparent); color: var(--f-rrss-t); }
.dos-src-trends .dos-kw-chip { background: color-mix(in srgb, var(--f-trends) 13%, transparent); border-color: color-mix(in srgb, var(--f-trends) 32%, transparent); color: var(--f-trends-t); }

/*
 * El clip, del color del papel de prensa y no gris: forma parte del legajo. Y en su propio tono
 * (10/09/2026): con los dos folios ya en verdes distintos, un clip al 55 % se comia a los tres.
 * Al 42 % sigue siendo verde y deja de ser lo primero que se mira.
 */
.dos-src-medios .dos-clip { color: color-mix(in srgb, var(--f-medios) 42%, var(--texto-suave)); }

/* Cuando no hay cifra, la casilla no deja un hueco muerto entre el alcance y el pie. */
.dos-card-stats:empty, .dos-card-stats > .dos-card-n:empty { display: none; }
/*
 * MISMA ALTURA, AUNQUE NO HAYA CIFRA (medido el 07/09/2026: Mitra 247 px, una de dos ámbitos sin
 * informe 203, prensa 238). La retícula interna tiene que ser la misma entre fuentes —era la regla
 * de Jacobo— y una tarjeta recién creada, sin informe todavía, se quedaba corta y rompía la fila.
 * El hueco de la cifra se reserva aunque esté vacío: la tarjeta no cambia de tamaño cuando llega
 * el primer resultado, que además evita el salto del tablón al terminar una búsqueda.
 */
/*
 * La altura la iguala el `min-height` de la tarjeta, NO esta caja. El primer intento la puso en
 * columna para reservar sitio y salio peor de lo que arreglaba: en columna, la fecha —que va
 * despues en el HTML— se colocaba ENCIMA del numero, y «36 impactos» se partia en dos lineas.
 * Aqui solo se reserva el alto; el reparto en fila con linea base se queda como estaba.
 */
.dos-card-stats { min-height: 44px; align-content: flex-start; }
.dos-sola, .dos-varias, .dos-cj { min-height: 238px; }

/* =====================================================================
   HERRAMIENTA «REDES SOCIALES» — seguir cuentas y ver su histórico (07/09/2026)
   =====================================================================
   Se apoya en el bloque «RRSS — análisis de cuentas» de más arriba, que estaba escrito y sin usar
   desde que se portó la maqueta de vox-publi: los KPI, los chips de red, la cabecera de cuenta y los
   avisos honestos salen de allí. Aquí va solo lo que faltaba.

   LA REGLA DE ESTAS PANTALLAS: la GRÁFICA manda sobre el número grande. Lo que esta herramienta
   tiene que contar no es cómo está una cuenta —eso lo da cualquier red— sino cómo ha ido
   cambiando. */

/* (sustituido por el bloque REDES SOCIALES del 07/09/2026, al final del fichero) */
.rrss-tarjeta { display: block; text-decoration: none; color: inherit; background: var(--superficie); border: 1px solid var(--linea); border-top: 3px solid var(--red-col, var(--linea)); border-radius: 12px; padding: 14px 16px 10px; transition: box-shadow .14s, transform .14s; }
.rrss-tarjeta:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.rrss-t-cab { display: flex; align-items: center; gap: 10px; }
.rrss-t-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--linea); }
.rrss-t-sinfoto { background: var(--fondo); display: inline-block; }
.rrss-t-quien { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rrss-t-quien strong { font-size: .9375rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrss-t-quien .dos-meta { font-size: .78125rem; }
.rrss-t-cifra { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 12px 0 2px; }
.rrss-t-val { font-size: 1.625rem; font-weight: 800; line-height: 1; color: var(--texto); }
.rrss-t-lab { font-size: .75rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.rrss-t-delta { font-size: .78125rem; color: var(--texto-suave); }
.rrss-t-delta.sube { color: #1a7f37; font-weight: 700; }
.rrss-t-delta.baja { color: #c0392b; font-weight: 700; }
.rrss-t-pie { font-size: .71875rem; color: var(--texto-suave); margin-top: 6px; }
.rrss-t-hueco { color: #a06a12; }

/* La curva. `preserveAspectRatio="none"` la estira a lo ancho: lo que interesa es la FORMA de la
   variación en el tiempo, no que los ejes guarden proporción. */
.rrss-grafica { width: 100%; height: 46px; display: block; margin-top: 8px; overflow: visible; }
.rrss-lienzo { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 18px 16px 14px; margin: 12px 0 6px; }
.rrss-lienzo .rrss-grafica { height: 190px; }
.rrss-sin-curva { text-align: center; padding: 26px 10px; }

.rrss-mandos { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.rrss-leyenda { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: .8125rem; color: var(--texto-suave); }
.rrss-leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.rrss-leyenda-item i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.rrss-nota-grafica { margin: 6px 0 18px; max-width: 62ch; }

.rrss-io h3, .rrss-pubs + h3 { margin-top: 0; }
.rrss-io-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.rrss-io-fila input[type="file"] { font-size: .8125rem; max-width: 100%; }
.rrss-baja { color: #c0392b; }
.rrss-previo { background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.rrss-previo h4 { margin: 0 0 8px; font-size: .9375rem; }
.rrss-previo-lista { margin: 0 0 10px; padding-left: 18px; font-size: .84375rem; line-height: 1.7; }
.rrss-previo-lista code { background: var(--fondo); border: 1px solid var(--linea); border-radius: 4px; padding: 1px 5px; font-size: .78125rem; }

.rrss-pubs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rrss-pub { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: .84375rem; }
.rrss-pub:last-child { border-bottom: none; }
.rrss-pub-fecha { color: var(--texto-suave); font-size: .78125rem; white-space: nowrap; }
.rrss-pub-txt { line-height: 1.5; min-width: 0; }
.rrss-pub-cifras { display: flex; gap: 10px; flex-wrap: wrap; color: var(--texto-suave); font-size: .75rem; grid-column: 2; }
.rrss-pub-ir { white-space: nowrap; font-size: .78125rem; }
.rrss-cupo { margin: 2px 0 0; }

@media (max-width: 640px) {
  .rrss-pub { grid-template-columns: 1fr; }
  .rrss-pub-cifras { grid-column: 1; }
  .rrss-mandos { flex-direction: column; align-items: stretch; }
}

/* La MAQUETA de la herramienta de Redes (07/09/2026, encargo de Jacobo). Datos inventados para ver
   cómo se verá con un año de historia. Va marcada en tres sitios —franja, tarjeta y ficha— porque
   una gráfica inventada es indistinguible de una real: ese es su valor y también su peligro. */
.rrss-demo-franja { background: var(--ambar-fondo, #fff7e6); border: 1px solid var(--ambar-bd, #f0dca8); color: var(--ambar-texto, #7a5b12); border-radius: 10px; padding: 11px 14px; margin: 12px 0 16px; font-size: .84375rem; line-height: 1.55; }
.rrss-demo-franja a { color: inherit; text-decoration: underline; }
.rrss-tarjeta.rrss-demo { position: relative; }
.rrss-tarjeta.rrss-demo::after { content: 'MAQUETA'; position: absolute; top: 10px; right: 12px; font-size: .59375rem; font-weight: 800; letter-spacing: .08em; color: var(--ambar-texto, #7a5b12); background: var(--ambar-fondo, #fff7e6); border: 1px solid var(--ambar-bd, #f0dca8); border-radius: 999px; padding: 2px 7px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   REDES SOCIALES — el panel, rediseñado el 07/09/2026 con Jacobo.

   Tres cosas que pidió y que mandan sobre el resto:

     1. **El buscador de una cuenta nueva es lo primero, y va centrado**, como en Mitra. Todo el
        texto que había encima explicando la herramienta se ha quitado.
     2. **Liquid glass de verdad.** Radar lo tiene y esta herramienta no: sus tarjetas eran cajas
        planas pegadas al fondo. Aquí llevan el desenfoque de detrás, el brillo del canto y una
        sombra que las separa — y el contorno, del color de su red.
     3. **Cuatro por fila.** Con `auto-fill` salían tres o cinco según la ventana; ahora son cuatro
        fijas en pantalla ancha y van bajando a 3, 2 y 1 al estrecharse.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.rrss-cab-min { display: flex; justify-content: flex-end; margin: 2px 0 0; }

/* ── El buscador, en el centro ───────────────────────────────────────────────────────────────── */
.rrss-buscador { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 26px auto 30px; max-width: 660px; text-align: center; }
.rrss-barra { display: flex; gap: 8px; width: 100%; align-items: stretch; }
.rrss-barra input {
  flex: 1; min-width: 0; padding: 14px 18px; font-size: 1rem; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color .14s, box-shadow .14s;
}
.rrss-barra input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-10, rgba(0,150,136,.14)); }
.rrss-barra .boton-primario { padding: 0 26px; border-radius: 999px; font-size: .9375rem; }

/* ── Las redes: solo el icono, y el nombre se despliega al elegirla ──────────────────────────
   La animación es la que pidió Jacobo: al pulsar, el botón se colorea y el nombre SALE hacia la
   derecha empujando a los de al lado. Se hace con `max-width` (de 0 a 120px) y no con `display`,
   que no se puede animar. `white-space: nowrap` evita que el nombre se parta a media transición. */
.rrss-redes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rrss-red {
  display: inline-flex; align-items: center; gap: 0; padding: 9px 11px; cursor: pointer;
  border: 1.5px solid var(--linea); background: var(--superficie); border-radius: 999px;
  font-size: .875rem; font-weight: 700; color: var(--texto);
  transition: border-color .14s, background .14s, color .14s, box-shadow .14s, gap .22s ease;
}
.rrss-red .rrss-red-ico { display: inline-flex; color: var(--texto-suave); transition: color .14s, filter .14s; filter: grayscale(1); }
.rrss-red .rrss-red-nom { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .22s ease, opacity .16s ease .04s; }
.rrss-red:hover { border-color: var(--red-col); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.rrss-red:hover .rrss-red-ico { filter: none; }
.rrss-red.activo { background: var(--red-col); border-color: var(--red-col); color: #fff; gap: 8px; }
.rrss-red.activo .rrss-red-ico { color: #fff; filter: none; }
.rrss-red.activo .rrss-red-nom { max-width: 120px; opacity: 1; }

/* SIN RED ELEGIDA: en rojo, que es donde hay que mirar. El temblor dura una sola vez y es corto —
   suficiente para llevar la vista, no tanto como para molestar a quien vuelva a intentarlo. */
.rrss-redes.falta .rrss-red { border-color: var(--error, #c0392b); }
.rrss-redes.falta .rrss-red .rrss-red-ico { color: var(--error, #c0392b); }
.rrss-redes.falta { animation: rrss-temblor .26s ease; }
@keyframes rrss-temblor {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .rrss-redes.falta { animation: none; }
  .rrss-red, .rrss-red .rrss-red-nom { transition: none; }
}
/* OJO: `.rrss-aviso` YA EXISTE mas arriba y es la caja ambar de los avisos del ingrediente de
   redes de Radar. Este es otro y se llama distinto: reutilizar aquel nombre pintaba una pastilla
   ambar vacia debajo de los iconos aunque no hubiera nada que decir. */
.rrss-alta-aviso { margin: 0; min-height: 18px; font-size: .84375rem; background: none; border: 0; padding: 0; }
.rrss-vacio-centro { max-width: 560px; margin: 0 auto; text-align: center; }

/* ── Las tarjetas ───────────────────────────────────────────────────────────────────────────── */
/* Tarjetas de cuenta de 272 px fijos (norma de pastillas fijas, 12/09/2026): la rejilla se centra y
   recoloca; antes eran 4/3/2/1 columnas estiradas al ancho. */
.rrss-rejilla { display: grid; grid-template-columns: repeat(auto-fill, 272px); justify-content: center; gap: 14px; margin: 6px 0 20px; }

.rrss-tarjeta {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit; padding: 14px 15px 12px; border-radius: 16px;
  /* El contorno es del color de su red: se distingue de un vistazo sin leer nada. */
  border: 1.5px solid color-mix(in srgb, var(--red-col, var(--linea)) 62%, transparent);
  background: var(--superficie);
  /* Separada del fondo: sombra propia + brillo en el canto de arriba (liquid glass). */
  box-shadow: 0 6px 20px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.55);
  transition: box-shadow .16s, transform .16s, border-color .16s;
  cursor: pointer;
}
.rrss-tarjeta:hover {
  transform: translateY(-2px);
  border-color: var(--red-col, var(--linea));
  box-shadow: 0 12px 28px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7);
}
.rrss-tarjeta.arrastrando { opacity: .45; transform: scale(.98); }

.rrss-t-cab { display: flex; align-items: center; gap: 10px; }
.rrss-t-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--linea); }
.rrss-t-sinfoto { background: var(--fondo); display: inline-block; }
.rrss-t-quien { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rrss-t-quien strong { font-size: .9375rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrss-t-quien .dos-meta { font-size: .78125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El logo de la red, SIN su nombre: ocupa lo que ocupa un icono y se reconoce igual. */
.rrss-t-logo { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.rrss-t-logo svg { width: 15px; height: 15px; }

/* Las cifras. Cuatro caben en una fila porque van abreviadas (4,96 M): el número exacto está en el
   `title`, a un segundo de distancia, y en la ficha. */
.rrss-t-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.rrss-t-cif { display: flex; flex-direction: column; min-width: 0; }
.rrss-t-cif b { font-size: 1.1875rem; font-weight: 800; line-height: 1.1; color: var(--texto); letter-spacing: -.01em; }
/* La etiqueta NO se corta: con cuatro columnas, «SEGUIDORES» acababa en «SEGUIDO...» y
   «PUBLICACIONES» en «PUBLICAC...», que no dicen nada. Se deja que baje a dos lineas y se fija la
   altura para que las cuatro casillas —y las tarjetas de la fila— queden alineadas. */
.rrss-t-cif i { font-style: normal; font-size: .59375rem; line-height: 1.15; min-height: 2.3em; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0; overflow-wrap: normal; hyphens: none; }

.rrss-t-problema { font-size: .71875rem; color: #a06a12; }
/* La burbuja de cuándo empezó la cosecha: dentro de la tarjeta, abajo y centrada. Es la cifra que
   dice cuánto histórico hay detrás, que es de lo que va toda la herramienta. */
.rrss-t-desde {
  align-self: center; margin-top: 2px; padding: 3px 11px; border-radius: 999px;
  font-size: .6875rem; color: var(--texto-suave); background: var(--fondo);
  border: 1px solid var(--linea); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   REDES SOCIALES · LA FICHA DE UNA CUENTA (07/09/2026) — modelo Google Analytics.
   El periodo va en una pastilla arriba a la derecha, a la altura de la foto; debajo, comparar;
   las cifras en pastillas cuadradas que cambian con el periodo; y la gráfica con su rejilla, sus
   ejes y el valor al pasar el ratón.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.rrss-ficha-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.rrss-ficha-cab .rrss-cab-cuenta { margin: 0; flex: 1 1 320px; }
.rrss-cab-info h2 { margin: 0 0 2px; font-size: 1.375rem; }
.rrss-cab-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .8125rem; color: var(--texto-suave); }

/* ── La pastilla del periodo ─────────────────────────────────────────────────────────────────── */
.rrss-periodo { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; }
.rrss-periodo-pastilla {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--texto); font-size: .875rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.rrss-periodo-pastilla:hover { border-color: var(--verde); }
.rrss-periodo-pastilla i { font-style: normal; font-size: .6875rem; color: var(--texto-suave); }
.rrss-periodo-menu {
  position: absolute; top: 46px; right: 0; z-index: 30; min-width: 250px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.rrss-periodo-menu button {
  text-align: left; border: none; background: none; cursor: pointer; padding: 9px 12px;
  border-radius: 8px; font-size: .875rem; color: var(--texto);
}
.rrss-periodo-menu button:hover { background: var(--fondo); }
.rrss-periodo-menu button.activo { background: var(--verde); color: #fff; font-weight: 700; }
.rrss-fechas { display: flex; gap: 8px; padding: 8px 10px 4px; flex-wrap: wrap; }
.rrss-fechas label { display: flex; flex-direction: column; gap: 3px; font-size: .71875rem; color: var(--texto-suave); }
.rrss-fechas input { padding: 6px 8px; border: 1px solid var(--linea); border-radius: 7px; background: var(--fondo); color: var(--texto); font-size: .8125rem; }

.rrss-comparar-check { display: inline-flex; align-items: center; gap: 7px; font-size: .84375rem; color: var(--texto); cursor: pointer; }
.rrss-comparar-que { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rrss-comparar-que select { padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie); color: var(--texto); font-size: .8125rem; }

/* ── Las cifras, en pastillas cuadradas. Se pulsan: cada una pinta su gráfica ─────────────────── */
.rrss-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 4px; }
.rrss-kpi {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--linea); background: var(--superficie); color: inherit;
  box-shadow: 0 3px 12px rgba(0,0,0,.05); transition: border-color .14s, box-shadow .14s, transform .14s;
}
.rrss-kpi:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.09); }
/* La elegida es la que se está pintando: tiene que verse de un vistazo cuál manda la gráfica. */
.rrss-kpi.activo { border-color: var(--verde); box-shadow: 0 0 0 2px var(--verde-10, rgba(0,150,136,.15)), 0 6px 18px rgba(0,0,0,.09); }
.rrss-kpi-lab { font-size: .6875rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.rrss-kpi-val { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--texto); letter-spacing: -.01em; }
.rrss-kpi-delta { font-size: .71875rem; color: var(--texto-suave); min-height: 15px; }
.rrss-kpi-delta.sube { color: #1a7f37; font-weight: 700; }
.rrss-kpi-delta.baja { color: #c0392b; font-weight: 700; }

/* ── La gráfica ──────────────────────────────────────────────────────────────────────────────── */
.rrss-lienzo-caja { margin: 10px 0 4px; }
.rrss-lienzo { position: relative; }
/* `height: auto` y no una altura fija: el SVG ya no estira su proporción (ver `graficaAnalytics`),
   así que la altura la marca el ancho — que es lo que mantiene los círculos redondos y el texto
   sin deformar. `max-height` para que en una pantalla muy ancha no se coma media página. */
/* Sin `max-height`: si la altura se topara, el SVG dejaria bandas vacias a los lados —el dibujo se
   centra dentro de la caja— y el raton dejaria de caer sobre la franja que toca, porque el mapa de
   x a franja da por hecho que el dibujo ocupa todo el ancho. */
.rrss-lienzo svg { width: 100%; height: auto; display: block; overflow: visible; }
.rrss-rej { stroke: var(--linea); stroke-width: 1; }
.rrss-eje-y { font-size: .6875rem; fill: var(--texto-suave); text-anchor: end; }
.rrss-eje-der { text-anchor: start; }
.rrss-eje-x { font-size: .6875rem; fill: var(--texto-suave); text-anchor: middle; }
/* Lo comparado va en el BRONCE del sistema (Jacobo, 07/09/2026), no en gris: es el segundo color
   de la marca y se distingue del azul sin competir con él. */
.rrss-linea-comp { fill: none; stroke: var(--comparado); stroke-width: 2; stroke-dasharray: 5 4; opacity: .9; }
.rrss-guia { stroke: var(--texto-suave); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.rrss-tooltip {
  position: absolute; top: 8px; pointer-events: none; z-index: 5;
  display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; border-radius: 10px;
  background: var(--superficie); border: 1px solid var(--linea); box-shadow: 0 8px 22px rgba(0,0,0,.16);
  font-size: .78125rem; color: var(--texto); white-space: nowrap;
}
.rrss-tooltip b { font-size: .71875rem; color: var(--texto-suave); font-weight: 700; }
.rrss-tip-comp { color: var(--texto-suave); }
.rrss-grano-nota { margin-left: auto; }
.rrss-leyenda-item i.rayada { background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }
.rrss-leyenda-item em { font-style: normal; opacity: .75; }

/* ── El comparador cruzado ───────────────────────────────────────────────────────────────────── */
.rrss-cruce { margin-top: 18px; }
.rrss-cruce h3 { margin: 0 0 4px; font-size: 1rem; }
.rrss-cruce-fila { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.rrss-cruce-fila select { flex: 1 1 220px; min-width: 0; padding: 9px 11px; border: 1px solid var(--linea); border-radius: 9px; background: var(--superficie); color: var(--texto); font-size: .84375rem; }
.rrss-cruce-fila select:disabled { opacity: .5; }

@media (max-width: 680px) {
  .rrss-periodo { align-items: stretch; width: 100%; }
  .rrss-periodo-menu { right: auto; left: 0; width: 100%; }
  .rrss-lienzo svg { height: 220px; }
}

/* Las tres pestanas de YouTube (Total / horizontales / shorts). Van encima de las cifras porque
   mandan sobre ellas: al cambiar de pestana cambian todas. El numero de al lado dice cuantos hay
   de cada tipo, que es lo que responde a «merece la pena mirar aqui». */
.rrss-pestanas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 2px; }
.rrss-pestanas .dos-meta { flex: 1 1 260px; }
#rrss-formato button { display: inline-flex; align-items: baseline; gap: 7px; font-weight: 700; }
#rrss-formato button i { font-style: normal; font-weight: 600; font-size: .71875rem; opacity: .7; }

/* Por donde va el mapa de un canal. Va en ambar mientras se construye —es un «faltan datos», no un
   error— y en verde cuando esta entero. Callarlo convertiria «me falta la mitad del canal» en «este
   canal tiene pocas visitas», que es una conclusion falsa sacada de un dato incompleto. */
.rrss-mapa { flex: 1 1 100%; padding: 8px 12px; border-radius: 10px; background: var(--ambar-fondo, #fff7e6); border: 1px solid var(--ambar-bd, #f0dca8); color: var(--ambar-texto, #7a5b12); }
.rrss-mapa.ok { background: var(--verde-bg, #e9f7fb); border-color: var(--verde-bd, #c9e9f2); color: var(--verde-texto, #0c6c7a); }

/* ══ EL «CARGANDO…» QUE SOLO SE VE SI DE VERDAD TARDA (09/09/2026) ════════════════════════════
 *
 * Encargo de Jacobo: «cada vez que recargue el site no debe aparecer nada, tan solo debe
 * recargarse lo más rápido posible». Medido en producción, el panel se pinta a los ~160 ms; el
 * cartel se veía unas décimas y se iba, y ese parpadeo es lo que hace que una carga rápida
 * PAREZCA rota.
 *
 * Quitarlo del todo tampoco vale: si el servidor tarda, la pantalla se quedaría muda en blanco.
 * Así que nace invisible y solo aparece si a los 600 ms la vista todavía no está. Es una
 * animación de duración CERO con 600 ms de retraso: no hay transición ni movimiento —no molesta
 * a quien pide menos animación— y no gasta ni un temporizador de JavaScript. Cuando la vista
 * llega, sustituye el nodo entero y la animación no llega a dispararse nunca.
 *
 * LA LLEVAN LOS DOCE CARTELES, no solo el de la primera pantalla: «Cargando búsquedas…»,
 * «Cargando impactos…», «Cargando dossiers…» y los demás que pone cada vista mientras pide sus
 * datos. Todos duraban lo mismo —unas décimas— y todos parpadeaban igual. El de una búsqueda con
 * 1.846 fichas sí llega a verse, y ahí está bien que se vea: eso es tardar de verdad. */
.tar-cargando { opacity: 0; animation: tar-cargando-aparece 0s linear 600ms forwards; }
@keyframes tar-cargando-aparece { to { opacity: 1; } }