/* HuellaSafe — Estilos globales */

:root {
  /* Tipografía — dos familias con roles fijos. Poppins es interfaz y base;
     Newsreader es la voz editorial (.hs-display, .cf-detail h3, .hg-title).
     La mono no pasa por acá: vive en Tailwind (font-mono) y en --mono de
     academia-guias.css. */
  --hs-sans:    'Poppins', system-ui, -apple-system, sans-serif;
  --hs-display: 'Newsreader', Georgia, serif;

  --escudo-red: #A32D2D;
  --escudo-red-dark: #8B2525;
  --escudo-red-light: #C44A4A;
  --escudo-red-muted: #FDF2F2;

  /* Niveles de riesgo del score */
  --risk-bajo: #1D9E75;
  /* ERA #D4A017, y lo destapó el paso C. Sobre blanco daba 2.38:1 — por debajo
     incluso del 3.0 de texto grande— y contra el carril de los segmentos 1.92:1,
     por debajo del 3.0 de objeto gráfico. No era visible antes porque el token
     sólo pintaba el número dentro del anillo y un punto de 7px; el rediseño lo
     pone en un titular de 2rem y en una barra, y ahí deja de pasar.
     #A16207 lo sube a 4.92:1 sobre blanco, 3.98:1 contra el carril y 4.67:1
     sobre el fondo de `.badge-severidad-medio`. Es el mismo movimiento que ya se
     hizo con `--risk-alto` (#E07B30 -> #B45309) y de la misma familia.
     El valor OSCURO no se toca: #FBBF24 da 10.23:1 sobre #181C23. */
  --risk-moderado: #A16207;
  /* ERA #E07B30, y no pasaba AA: 2.98:1 sobre blanco, por debajo incluso del
     3.0 que exige un objeto gráfico —y uno de sus usos ES un objeto gráfico,
     el punto de `.fc-sev--alto`—. #B45309 lo sube a 5.02:1. No es un color
     nuevo: es el mismo que `.badge-proceso` (l. 284) ya usaba.
     El valor OSCURO no se toca: #FB923C da 7.55:1 sobre #181C23. */
  --risk-alto: #B45309;
  --risk-critico: #C0392B;
  --risk-severo: #7B241C;

  /* Texto secundario ("gris de meta"). NO ES UN COLOR NUEVO: es el par que el
     proyecto ya usaba suelto en tres sitios —`.fc-sev` (l. 988-989) y un literal
     inline en `js/main.js`— ascendido a token para que deje de duplicarse.
     Contraste medido sobre las superficies reales: 4.83:1 sobre #FFFFFF y
     5.39:1 sobre #181C23 (`bg-white` en oscuro). Ambos pasan AA para texto
     normal. */
  --text-meta: #6B7280;

  /* ── PASO D — EL COLOR DE GESTIÓN ─────────────────────────────────────────
     AZUL Y NUNCA VERDE, y la razón es de producto: verde diría «estás a salvo»
     y no lo estás — las credenciales siguen circulando. Azul dice «gestionado»,
     que es lo único que el usuario declaró.

     #1D4ED8 da 5.41:1 contra el carril de los segmentos y 6.70:1 sobre el fondo
     de la tarjeta; el valor oscuro #60A5FA da 5.27:1 y 6.72:1 sobre #181C23.
     Los dos pasan de sobra el 3.0 de objeto gráfico, que es el umbral que dice
     «este segmento está relleno».

     ⚠️ LO QUE NO PASA, Y HAY QUE SABERLO: el azul NO alcanza 3:1 contra los
     colores de nivel (amarillo/naranja/rojo). Medido sobre los seis: el mejor
     azul legible da 1.90 en tema claro y 1.17 en oscuro, y bajarlo hasta 2.70
     exige un #172554 que ya no se lee como azul. **La distinción entre un
     segmento gestionado y uno sin gestionar es de TONO, no de luminancia**, así
     que quien no distinga azul de naranja no la ve.

     No se tapa: se resuelve porque **el color NO es el único canal**. La
     etiqueta dice «· en gestión» / «· atendidas» y la línea de detalle dice
     «Marcaste N de M», así que el significado nunca depende de distinguir dos
     colores. El azul es redundante con el texto, no su portador. */
  --fill-accent: #1D4ED8;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--hs-sans);
  -webkit-font-smoothing: antialiased;
}

/* Títulos display en serif (Newsreader). Clase aplicada a mano solo a heroes
   y h2 de sección grandes; el cuerpo y la UI siguen en Poppins. letter-spacing:normal
   neutraliza cualquier tracking heredado. No requiere override en html.dark — la
   fuente no cambia con el tema. */
.hs-display {
  font-family: var(--hs-display);
  letter-spacing: normal;
}

/* Inputs con foco en color de marca */
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* Botón deshabilitado */
.btn-scan:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Animación sutil para tarjetas */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(163, 45, 45, 0.15);
}

/* Escudo logo pulse sutil en hero */
@keyframes shield-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.shield-icon {
  animation: shield-pulse 3s ease-in-out infinite;
}

/* ── Dashboard ── */

.sidebar-link.active {
  background-color: var(--escudo-red-muted);
  color: var(--escudo-red);
}

/* Hover del sidebar. Va por tokens, no por utilidades Tailwind: hover:bg-* y
   hover:text-* no tienen par en html.dark (Tailwind no tiene darkMode
   configurado y los overrides de modo oscuro solo alcanzan la clase literal,
   no la variante con prefijo), asi que quedaban en el valor claro sobre el
   aside oscuro. --escudo-red si se recalibra en html.dark, con lo que esta
   regla sirve en ambos temas sin duplicarse.

   Transparencia sobre --escudo-red en vez de --escudo-red-muted para que el
   hover no se confunda con el item activo.

   :not(.active) y no solo :hover — ambos selectores pesan (0,2,0), asi que
   entre `.sidebar-link.active` y `.sidebar-link:hover` gana el ultimo del
   archivo, que seria el hover: el item de la pagina actual perderia su fondo
   al pasar el mouse. El :not lo sube a (0,3,0) y lo vuelve independiente del
   orden.

   El color va con !important solo porque compite contra
   `html.dark .text-gray-600 { color: ... !important }` (l. 598), que aplica al
   mismo <a> por la clase text-gray-600 que trae el enlace inactivo. Sin el, en
   oscuro cambiaba el fondo y el texto se quedaba gris. El fondo no lo necesita:
   ninguna regla !important compite por el. */
.sidebar-link:not(.active):hover {
  background-color: color-mix(in srgb, var(--escudo-red) 8%, transparent);
  color: var(--escudo-red) !important;
}

/* Enlace a admin destacado en dashboard.html. No lleva .sidebar-link a
   proposito (pinta fondo propio y no debe recibir .sidebar-link.active), asi
   que la regla de arriba no lo alcanza y necesita su propio par de tokens.
   Sustituye a bg-escudo/5 y hover:bg-escudo/10, que tampoco se recalibraban. */
.sidebar-link-destacado {
  background-color: color-mix(in srgb, var(--escudo-red) 5%, transparent);
}

.sidebar-link-destacado:hover {
  background-color: color-mix(in srgb, var(--escudo-red) 10%, transparent);
}

.threat-filter.active {
  background-color: var(--escudo-red);
  border-color: var(--escudo-red);
  color: #fff;
}

.exposure-bar {
  transition: width 1s ease-out;
}

.risk-ring-progress {
  transition: stroke-dashoffset 1.2s ease-out, stroke 0.4s ease;
}

#dash-score-value,
#dash-risk-label,
#dash-risk-desc {
  transition: color 0.4s ease;
}

/* ── Descripción de riesgo: el color sigue a la URGENCIA, no a la banda ──
   El anillo (`#dash-score-value`) y la etiqueta (`#dash-risk-label`) siguen
   pintándose con el color de banda desde `applyScoreColors`. Esta frase NO:
   describe qué pasó y cuándo, y su color tiene que responder esa pregunta y no
   la del número. Antes heredaba `r.color`, así que "Es historial, no una
   amenaza activa" salía en el rojo de Crítico.

   TRES estados y no dos, porque `malware` es el único texto del banco con
   acción inmediata justificada: compartir color con `reciente` haría que un
   solo color respondiera dos preguntas distintas — el mismo colapso que
   `gravedad`/`urgencia` ya separó en la sección de filtraciones. */
/* ══ PASO C — BANDA + TRES EJES ═══════════════════════════════════════════
   TODO POR CLASE Y POR TOKEN, NUNCA POR `style.color`. Es `NEW-36`: los cuatro
   naranjas de banda que ya viven inline ignoran el modo oscuro, porque un color
   escrito desde JS se queda con el valor del tema en que se pinto. Los cuatro
   tokens de riesgo TIENEN variante oscura (l. 640-643), asi que por clase el
   tema se voltea solo y aqui no hay nada que mantener. */

.banda-bloque { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.banda-nombre {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-meta);            /* sin medicion, hasta que el JS clasifique */
}

/* `.banda-escala` («de 4 niveles») se retiró: no se entendía sin explicarla. */

.banda--bajo     { color: var(--risk-bajo); }
.banda--moderada { color: var(--risk-moderado); }
.banda--alta     { color: var(--risk-alto); }
.banda--critica  { color: var(--risk-critico); }
/* `sin_medicion` NO es una banda: es su ausencia, y por eso comparte el gris del
   texto secundario en vez de tener color propio. Quinta cara, no quinto nivel. */
.banda--sin-medicion { color: var(--text-meta); }

#dash-amenaza { align-self: flex-start; margin-top: 8px; }

/* ── Los tres ejes ── */

.ejes { display: flex; flex-direction: column; gap: 16px; }

.eje-cab { display: flex; align-items: center; gap: 8px; }
.eje-ico { width: 16px; height: 16px; color: var(--text-meta); flex-shrink: 0; }
.eje-ico svg { width: 100%; height: 100%; }
.eje-nombre { font-size: .8125rem; font-weight: 600; color: #374151; }
html.dark .eje-nombre { color: #D1D5DB; }

/* A la derecha, y es lo que el usuario lee primero despues del nombre. Sale del
   MOTIVO y no del nivel: dos ejes en nivel 3 pueden estar ahi por razones que no
   se pueden rotular igual (A11). */
.eje-etiqueta {
  margin-left: auto;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-meta);
  text-align: right;
}

.eje-barra { display: flex; gap: 4px; margin-top: 6px; }

.eje-seg {
  flex: 1;
  height: 6px;
  border-radius: 9999px;
  background: #E5E7EB;
  transition: background-color .4s ease;
}
html.dark .eje-seg { background: #2A2F3A; }

/* CUATRO SEGMENTOS EN LOS TRES EJES, y el nivel 1 rellena CERO.
   El correo es binario y aun asi usa la misma barra: si "sin exposicion"
   rellenara distinto en cada eje, dos filas que afirman LO MISMO se pintarian
   distinto. Y que el correo tope en 2 de 4 dice algo cierto — sin contrasena no
   hay gradacion de gravedad, asi que no puede llegar arriba. */
.eje-barra[data-nivel="2"] .eje-seg:nth-child(-n+2),
.eje-barra[data-nivel="3"] .eje-seg:nth-child(-n+3),
.eje-barra[data-nivel="4"] .eje-seg:nth-child(-n+4) { background: var(--risk-moderado); }
.eje-barra[data-nivel="3"] .eje-seg:nth-child(-n+3) { background: var(--risk-alto); }
.eje-barra[data-nivel="4"] .eje-seg:nth-child(-n+4) { background: var(--risk-critico); }

/* ── PASO D — LOS SEGMENTOS GESTIONADOS ──────────────────────────────────
   La especificidad NO es accidental: la regla de nivel es
   `.eje-barra[data-nivel="N"] .eje-seg:nth-child(-n+N)` —cuatro selectores— así
   que ésta necesita otros cuatro para poder ganarle. Con tres perdería y el azul
   no se vería nunca, sin que nada fallara. */
.eje-barra[data-nivel] .eje-seg.eje-seg--gestion { background: var(--fill-accent); }

/* `data-nivel="0"` es NO MEDIDO, y es distinto de nivel 1. El 1 afirma "no hay
   exposicion"; el 0 dice "no lo miramos". Los dos dejan la barra vacia porque no
   hay nada que rellenar, y lo que los separa es la etiqueta: el 0 lleva guion. */

.eje-detalle {
  margin-top: 6px;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--text-meta);
}

#dash-risk-desc.risk-desc--malware  { color: var(--risk-critico); }
#dash-risk-desc.risk-desc--reciente { color: var(--risk-alto); }
#dash-risk-desc.risk-desc--neutro   { color: var(--text-meta); }

.sidebar.open {
  transform: translateX(0);
}

/* ── Academia: guías expandibles ── */

.guia-card summary {
  list-style: none;
}

.guia-card summary::-webkit-details-marker {
  display: none;
}

.guia-card .guia-chevron {
  transition: transform 0.2s ease;
}

.guia-card[open] .guia-chevron {
  transform: rotate(180deg);
}

.guia-block-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--escudo-red);
}

.guia-steps {
  list-style: decimal;
  padding-left: 1.25rem;
}

.guia-steps li {
  margin-top: 0.5rem;
  padding-left: 0.25rem;
}

/* ── Academia: radar de amenazas ── */

.radar-card summary {
  list-style: none;
}

.radar-card summary::-webkit-details-marker {
  display: none;
}

.radar-card .radar-chevron {
  transition: transform 0.2s ease;
}

.radar-card[open] .radar-chevron {
  transform: rotate(180deg);
}

/* Resumen del summary: una línea con "…" mientras la tarjeta está cerrada.
   Reemplaza a la clase `truncate` de Tailwind, que dejaba el texto cortado
   TAMBIÉN al expandir — no había forma de leerlo completo. Al abrir la tarjeta
   se muestra entero. */
.radar-card .radar-resumen {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radar-card[open] .radar-resumen {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.radar-badge-critico {
  background-color: #fee2e2;
  color: #991b1b;
}

.radar-badge-alto {
  background-color: #ffedd5;
  color: #9a3412;
}

.radar-badge-medio {
  background-color: #fef9c3;
  color: #854d0e;
}

.radar-archivo-modal:not(.hidden) {
  display: flex;
}

.radar-archivo-year summary,
.radar-archivo-month summary {
  list-style: none;
}

.radar-archivo-year summary::-webkit-details-marker,
.radar-archivo-month summary::-webkit-details-marker {
  display: none;
}

.scan-progress-bar {
  transition: width 0.35s ease-out;
}

.badge-verificado {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: #d1fae5;
  color: var(--risk-bajo);
}

.badge-estimado {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: #f3f4f6;
  color: #6b7280;
}

.badge-informativo {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: #f3f4f6;
  color: #6b7280;
}

.badge-proceso {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: #fef3c7;
  color: #b45309;
}

.badge-resuelto {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: #d1fae5;
  color: #065f46;
}

/* Sin text-transform: capitalize. Antes lo tenía, y como el render imprimía el
   enum crudo de la BD (`critico`), el CSS lo mostraba como "Critico" sin tilde.
   La etiqueta la pone SEVERIDAD_LABEL en js/main.js, ya acentuada. */
.badge-severidad {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

.badge-severidad-critico {
  background-color: #fde8e6;
  color: var(--risk-critico);
}

.badge-severidad-alto {
  background-color: #fdede4;
  color: var(--risk-alto);
}

.badge-severidad-medio {
  background-color: #fef9e7;
  color: var(--risk-moderado);
}

.badge-severidad-bajo {
  background-color: #d1fae5;
  color: var(--risk-bajo);
}

.auth-tab-active {
  background-color: #fff;
  color: #A32D2D;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.auth-tab:not(.auth-tab-active):hover {
  color: #374151;
}

.rutificador-confirm-btn:active {
  transform: scale(0.98);
}

.rutificador-btn-si {
  background-color: #C0392B;
  border-color: #C0392B;
}

.rutificador-btn-si:hover {
  background-color: #a93226;
  border-color: #a93226;
}

.rutificador-btn-no {
  background-color: #1D9E75;
  border-color: #1D9E75;
}

.rutificador-btn-no:hover {
  background-color: #178364;
  border-color: #178364;
}

.rutificador-btn-antigua {
  background-color: #fef9e7;
  border-color: #D4A017;
  color: #92400e;
}

.rutificador-btn-antigua:hover {
  background-color: #fde68a;
  border-color: #b8860b;
}

.rutificador-btn-no-indicar {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  color: #4b5563;
}

.rutificador-btn-no-indicar:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

.riesgo-contextual-card {
  background-color: #f8f9fa;
}

.riesgo-contextual-block + .riesgo-contextual-block {
  padding-top: 0.25rem;
}

/* ── Sección de alias (#alias en index.html) ──
   La estructura 2-col y las SUPERFICIES van en utilidades Tailwind y heredan el
   modo oscuro existente. La columna izquierda usa el eyebrow y los ticks de marca;
   la columna derecha es una imagen (.alias-img). Cada clase con color tiene su par
   html.dark al final del bloque de modo oscuro. */
.alias-mock-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A32D2D;
  background: rgba(163, 45, 45, 0.08);
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.alias-mock-eyebrow span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A32D2D;
}
.alias-mock-tick {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  margin-top: 1px;
  background: rgba(163, 45, 45, 0.1);
  color: #A32D2D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

/* ── "Cómo funciona" — tarjetas pasado/presente/futuro (#como-funciona) ──
   Hover en desktop levanta .cf-detail; en touch lo togglea la clase .open (JS).
   Las clases con color de marca/superficie tienen su par html.dark más abajo.
   Las que viven sobre la imagen (base/eyebrow/título/brief/detalle) usan blanco
   y overlays oscuros: son iguales en ambos temas (van sobre la imagen). */
.cf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.cf-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 16px 40px -24px rgba(80, 20, 20, 0.25);
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.cf-card:focus-visible {
  outline: 2px solid #A32D2D;
  outline-offset: 2px;
}
.cf-card-img {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
  background: #e5e7eb;
  flex-shrink: 0;
}
/* La imagen real, cuando se reemplace el placeholder, cubre toda la zona. */
.cf-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cf-num {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #A32D2D;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.cf-base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  transition: transform .35s ease, opacity .35s ease;
}
.cf-eyebrow {
  /* Badge: banda de vidrio esmerilado SOLO bajo el texto del eyebrow (inline-flex
     para ajustarse al ancho del texto). El blur + fondo oscuro semitransparente
     refuerzan el rosado sobre zonas claras de la foto; el text-shadow suma contraste.
     Es mode-agnostic (va sobre la imagen): no necesita par html.dark. */
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f0a8a6;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.cf-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.15;
  /* Sombra más sutil: el blanco ya tiene buen contraste por el gradiente,
     pero en fotos muy claras el título (justo bajo el eyebrow) puede quedar justo. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.cf-brief {
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.cf-hint {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  opacity: 0.85;
}
.cf-plus {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}
.cf-detail {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(17, 24, 39, 0.86);
  backdrop-filter: blur(2px);
  color: #fff;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.cf-detail h3 {
  font-family: var(--hs-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.15;
}
.cf-detail p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
@media (hover: hover) {
  .cf-card:hover .cf-detail { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .cf-card:hover .cf-base { opacity: 0; transform: translateY(10px); }
}
.cf-card.open .cf-detail { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cf-card.open .cf-base { opacity: 0; }
@media (max-width: 880px) {
  .cf-grid { grid-template-columns: 1fr; gap: 22px; max-width: 26rem; margin-left: auto; margin-right: auto; }
  .cf-card { min-height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-base, .cf-detail { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════
   MODO OSCURO — controlado por la clase .dark en <html>.
   js/theme-init.js aplica la clase (preferencia guardada > sistema)
   antes del primer paint. Si agregas superficies nuevas, replica
   el patrón aquí prefijando el selector con "html.dark".
   ════════════════════════════════════════════════════════════ */

/* Tokens de marca/riesgo recalibrados para fondo oscuro.
   Las clases que usan var(...) se voltean solas. */
html.dark {
  --escudo-red: #D05757;
  --escudo-red-muted: #241619;
  --risk-bajo: #34D399;
  --risk-moderado: #FBBF24;
  --risk-alto: #FB923C;
  --risk-critico: #F87171;
  --risk-severo: #EF4444;
  --text-meta: #8B919C;
  --fill-accent: #60A5FA;
}

/* ── Superficies base ── */
html.dark body { background-color: #0F1217 !important; color: #E6E8EC !important; }
html.dark .bg-gray-50 { background-color: #0F1217 !important; }
html.dark .bg-white { background-color: #181C23 !important; }
html.dark .bg-gray-100 { background-color: #22272F !important; }
html.dark .hover\:bg-gray-50:hover { background-color: #22272F !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #2A303A !important; }

/* ── Bordes ── */
html.dark .border-gray-100 { border-color: #232831 !important; }
html.dark .border-gray-200 { border-color: #2A2F3A !important; }
html.dark .border-gray-300 { border-color: #353C48 !important; }

/* ── Texto ── */
html.dark .text-gray-900 { color: #E6E8EC !important; }
html.dark .text-gray-800 { color: #DADDE3 !important; }
html.dark .text-gray-700 { color: #C2C7D0 !important; }
html.dark .text-gray-600 { color: #A8AEB9 !important; }
html.dark .text-gray-500 { color: #8B919C !important; }
html.dark .text-gray-400 { color: #6B7280 !important; }

/* ── Marca (utilidades Tailwind) ── */
html.dark .text-escudo { color: #D05757 !important; }
html.dark .bg-escudo-muted { background-color: #241619 !important; }
html.dark .hover\:bg-escudo-dark:hover { background-color: #B83C3C !important; }
/* bg-escudo (CTA) se mantiene: rojo con texto blanco lee bien sobre oscuro */

/* ── Inputs ── */
html.dark input, html.dark textarea, html.dark select {
  background-color: #1C2129 !important;
  color: #E6E8EC !important;
  border-color: #2A2F3A !important;
}
html.dark ::placeholder { color: #6B7280 !important; }

/* ── Anillo de score (atributo inline en el SVG) ── */
html.dark circle[stroke="#F3F4F6"] { stroke: #2A2F3A !important; }

/* ── Overlays de modales ── */
html.dark .bg-gray-900\/40, html.dark .bg-gray-900\/50 { background-color: rgba(0, 0, 0, 0.65) !important; }

/* ── Badges (fondos claros hardcodeados → oscuros) ── */
html.dark .badge-estimado, html.dark .badge-informativo { background-color: #262B34 !important; color: #9AA3AF !important; }
html.dark .badge-verificado, html.dark .badge-severidad-bajo { background-color: #0E2A20 !important; }
html.dark .badge-resuelto { background-color: #0E2A20 !important; color: #34D399 !important; }
html.dark .badge-proceso { background-color: #2C2412 !important; color: #E0B34D !important; }
html.dark .badge-severidad-critico { background-color: #2C1517 !important; }
html.dark .badge-severidad-alto { background-color: #2C1D12 !important; }
html.dark .badge-severidad-medio { background-color: #2C2713 !important; }
html.dark .radar-badge-critico { background-color: #2C1517 !important; color: #F2A6A2 !important; }
html.dark .radar-badge-alto { background-color: #2C1D12 !important; color: #F2BC93 !important; }
html.dark .radar-badge-medio { background-color: #2C2713 !important; color: #EAD68C !important; }

/* ── Componentes ── */
html.dark .riesgo-contextual-card { background-color: #1C2129 !important; }
html.dark .auth-tab-active { background-color: #181C23 !important; color: #D05757 !important; }
html.dark .auth-tab:not(.auth-tab-active):hover { color: #C2C7D0 !important; }
html.dark .card-hover:hover { box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.5) !important; }

/* Logo del login: versión con texto oscuro en claro, versión blanca en oscuro */
.logo-login-oscuro { display: none; }
html.dark .logo-login-claro { display: none !important; }
html.dark .logo-login-oscuro { display: block !important; }

/* ── Fondos translúcidos y gradientes (no capturados por overrides sólidos) ── */
html.dark .bg-white\/90 { background-color: rgba(24, 28, 35, 0.92) !important; }
html.dark .bg-white\/80 { background-color: rgba(24, 28, 35, 0.85) !important; }
html.dark .bg-gradient-to-b.from-escudo-muted\/60 {
  background-image: linear-gradient(to bottom, #1A1316, #0F1217) !important;
}
html.dark .bg-gradient-to-br.from-escudo-muted {
  background-image: linear-gradient(to bottom right, #241619, #181C23) !important;
}

/* ── Barra Dark Web (relleno gris oscuro que se fundía con el fondo) ── */
html.dark .bg-gray-800.rounded-full { background-color: #64748B !important; }

/* ── Overrides de utilidades translúcidas en tema oscuro ──────────────────
   Se escribieron para el panel B2B que se retiró el 24/08, PERO NO SON SUYAS:
   son overrides de clases Tailwind genéricas, y CUATRO DE LAS CINCO siguen con
   consumidores vivos —`diagnostico.html`, `js/main.js` y el radar—. Borrarlas
   junto al panel habría roto el tema oscuro en páginas que no tenían nada que
   ver con él; se comprobó uno por uno antes de decidir. Lo que sí se fue es el
   selector por id y el rótulo de sección, que eran suyos de verdad.
   (`.text-[#1a1a1a]` es hoy la única sin consumidores. Se deja: retirarla es
   otra decisión, y mezclarla aquí ampliaría el alcance de este cambio.) */
html.dark .text-\[\#1a1a1a\] { color: #E6E8EC !important; }
html.dark .bg-escudo-muted\/60 { background-color: #1E1619 !important; }
html.dark .bg-escudo-muted\/40 { background-color: #1A1316 !important; }
html.dark .bg-gray-50\/80 { background-color: rgba(34, 39, 47, 0.8) !important; }
html.dark .text-red-600\/80 { color: #EF9A98 !important; }

/* ── Tarjetas de riesgo contextual + badges pastel (Crítico/Alto/Medio) ── */
html.dark .bg-red-50 { background-color: #1F1416 !important; }
html.dark .bg-orange-50 { background-color: #1F1812 !important; }
html.dark .bg-yellow-50 { background-color: #1E1B11 !important; }
html.dark .border-red-200 { border-color: #3A1F22 !important; }
html.dark .border-orange-200 { border-color: #3A2A1A !important; }
html.dark .border-yellow-200 { border-color: #3A331A !important; }

/* ── Bloque azul de atestación (RUT) ── */
html.dark .bg-blue-50 { background-color: #141B26 !important; }
html.dark .border-blue-200 { border-color: #26374F !important; }
html.dark .bg-red-100 { background-color: #2C1517 !important; }
html.dark .bg-orange-100 { background-color: #2C1D12 !important; }
html.dark .bg-yellow-100 { background-color: #2A2613 !important; }
html.dark .text-red-700 { color: #F0908C !important; }
html.dark .text-orange-700 { color: #F0B473 !important; }
html.dark .text-yellow-700 { color: #E6C84F !important; }
html.dark .border-black\/5 { border-color: rgba(255, 255, 255, 0.08) !important; }

/* ── Texto rojo enfático (banner "Detectamos filtraciones nuevas") ──
   Escalera 700 < 800 < 900 en contraste, igual que en claro. Sobre .bg-red-50
   oscuro (#1F1416): 900 → 11,1:1 y 800 → 9,2:1; el 800 también vive sobre
   .bg-red-100 (#2C1517) en el badge "Mensual" → 8,8:1. AA pide 4,5:1.
   La variante :hover necesita su propia regla: Tailwind genera el selector
   .hover\:text-red-900:hover, que html.dark .text-red-900 NO captura — sin
   esto los botones "Reintentar" caen a 1,8:1 al pasar el cursor. */
html.dark .text-red-900 { color: #F7BEBB !important; }
html.dark .text-red-800 { color: #F2A6A2 !important; }
html.dark .hover\:text-red-900:hover { color: #F7BEBB !important; }

/* ── Familia verde: no tenía NINGÚN par oscuro (grep green → 0) ──
   No era un problema de contraste sino de superficie sin par: bg-green-50
   quedaba blanco en medio de la interfaz oscura. Los hexes son el espejo de
   los rojos de arriba, con el canal dominante rotado, para que las dos
   variantes del banner pesen igual. El texto reusa #34D399, que ya está en
   el proyecto (.badge-resuelto, :663), en vez de sumar otro verde.
   Ratios sobre #141F17: 900 → 11,6:1, 800 → 10,2:1, 700 → 8,8:1;
   el 700 sobre .bg-green-100 (#152C1B) → 7,8:1 y sobre .bg-white (#181C23)
   → 8,9:1, donde antes daba 3,4:1. */
html.dark .bg-green-50 { background-color: #141F17 !important; }
html.dark .bg-green-100 { background-color: #152C1B !important; }
html.dark .border-green-200 { border-color: #1F3A25 !important; }
html.dark .border-green-100 { border-color: #1A2E20 !important; }
html.dark .text-green-900 { color: #7FE9BE !important; }
html.dark .text-green-800 { color: #5ADFAB !important; }
html.dark .text-green-700 { color: #34D399 !important; }

/* ── Sección de alias (#alias): pares oscuros. El eyebrow y los ticks de marca de
   la columna izquierda mantienen su color en oscuro; la imagen de la derecha se
   suaviza un poco para que su fondo claro/cálido no destaque demasiado. */
html.dark .alias-mock-eyebrow { color: #e0716f !important; background: rgba(224, 113, 111, 0.12) !important; }
html.dark .alias-mock-eyebrow span { background: #e0716f !important; }
html.dark .alias-mock-tick { color: #e0716f !important; background: rgba(224, 113, 111, 0.15) !important; }
html.dark .alias-img { filter: brightness(0.9); border: 1px solid #2A2F3A; }

/* ── "Cómo funciona" (#como-funciona): pares oscuros. Solo las superficies y el
   badge de marca cambian; el resto vive sobre la imagen (blanco/overlay) y es igual. */
html.dark .cf-card { background: #181C23 !important; border-color: #2A2F3A !important; }
html.dark .cf-card-img { background: #2A2F3A !important; }
html.dark .cf-num { background: #e0716f !important; }
html.dark .cf-detail { background: rgba(0, 0, 0, 0.82) !important; }
html.dark .cf-card:focus-visible { outline-color: #e0716f; }

/* ===================================================================
   Toggle Mensual/Anual — sección #planes
   (clases nuevas, sin colisión. Solo .billing-toggle__pill necesita
    par dark; el resto hereda los overrides globales de utilidades.)
   =================================================================== */

.billing-toggle { position: relative; }

.billing-toggle__pill {
  position: absolute;
  top: 4px; left: 4px; bottom: 4px;
  width: calc(50% - 4px);
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
}
.billing-toggle[data-ciclo="anual"] .billing-toggle__pill { transform: translateX(100%); }

.billing-toggle__btn { position: relative; z-index: 1; transition: color .2s ease; }

/* Número de precio: tabular para que no salte el ancho al animar */
.precio-num { font-variant-numeric: tabular-nums; }

/* Nota "facturado anual": aparece/desaparece sin reflow brusco */
.anual-nota {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
}
article[data-ciclo-aware][data-mostrar-nota="1"] .anual-nota {
  max-height: 40px; opacity: 1; margin-top: .35rem;
}

.ahorro-badge { transition: opacity .25s ease, transform .25s ease; }

/* ── Modo oscuro: única regla nueva necesaria (la pastilla sobre fondo claro).
      El riel (bg-gray-100), texto (text-gray-500) y badge (bg-escudo) ya los
      cubren los overrides globales existentes de styles.css. ── */
html.dark .billing-toggle__pill { background: #181C23 !important; }

/* Hero video: en reduced-motion no autoreproduce; el poster queda visible */
@media (prefers-reduced-motion: reduce) {
  .hero-video { animation: none; }
}

/* ============================================================
   Easter egg del logo (huella + escudo) — solo CSS + transform.
   Nada anima layout (CLS 0). Respeta prefers-reduced-motion.
   ============================================================ */
.hs-logo{ position:relative; }
.hs-logo-svg path{ fill:currentColor; }

.hs-egg-btn{ position:absolute; margin:0; padding:0; border:0;
  background:transparent; cursor:pointer; }
.hs-egg-btn:focus-visible{ outline:none; border-radius:10px;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px #A32D2D; }  /* blanco+rojo: visible en cualquier fondo */

/* origenes de transformacion */
.hs-iso{ transform-box:fill-box; transform-origin:center; }
.hs-ridge,.hs-core{ transform-box:view-box; transform-origin:165px 178px; }

/* 1 - Pulso biometrico */
@keyframes hs-fx-pulse{
  0%{transform:scale(1)} 30%{transform:scale(1.15)}
  55%{transform:scale(.96)} 75%{transform:scale(1.05)} 100%{transform:scale(1)}
}
.hs-logo-svg[data-logo-fx="pulse"] .hs-iso{ animation:hs-fx-pulse .55s cubic-bezier(.34,1.56,.64,1) both; }

/* 2 - Barrido de crestas (el escudo queda quieto) */
@keyframes hs-fx-ridge{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }
.hs-logo-svg[data-logo-fx="ridge"] .hs-ridge,
.hs-logo-svg[data-logo-fx="ridge"] .hs-core{
  animation:hs-fx-ridge .5s ease-in-out both;
  animation-delay:calc(var(--i,0) * 60ms);
}

/* 3 - Giro de sello */
@keyframes hs-fx-seal{
  0%{transform:rotate(0)} 35%{transform:rotate(-12deg)}
  70%{transform:rotate(6deg)} 100%{transform:rotate(0)}
}
.hs-logo-svg[data-logo-fx="seal"] .hs-iso{ animation:hs-fx-seal .55s cubic-bezier(.34,1.56,.64,1) both; }

/* 4 - Wobble gelatina */
@keyframes hs-fx-wobble{
  0%,100%{transform:scale(1,1)} 25%{transform:scale(1.12,.9)}
  50%{transform:scale(.94,1.08)} 75%{transform:scale(1.04,.98)}
}
.hs-logo-svg[data-logo-fx="wobble"] .hs-iso{ animation:hs-fx-wobble .55s ease-out both; }

/* Belt-and-suspenders: si algo setea data-logo-fx bajo reduced-motion, no animar */
@media (prefers-reduced-motion: reduce){
  .hs-logo-svg[data-logo-fx] *{ animation:none !important; }
}

.diferencia-card {
  transition: transform .28s cubic-bezier(.2,.7,.3,1),
              box-shadow .28s ease, border-color .28s ease;
}
.diferencia-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 14px 30px -16px rgba(17,24,39,.28), 0 0 0 1px var(--escudo-red);
}
.diferencia-card .text-xl { transition: transform .28s cubic-bezier(.2,.7,.3,1); }
.diferencia-card:hover .text-xl { transform: scale(1.12) translateY(-1px); }

html.dark .diferencia-card:hover {
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.65), 0 0 0 1px var(--escudo-red);
}

@media (prefers-reduced-motion: reduce) {
  .diferencia-card, .diferencia-card .text-xl { transition: none; }
  .diferencia-card:hover { transform: none; }
}

.footer-link { color:#9CA3AF; font-size:14px; text-decoration:none; transition:color .2s ease; }
.footer-link:hover { color:#fff; }
.footer-col-title { color:#E5E7EB; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.footer-social { display:none; gap:14px; margin-top:16px; }
.footer-social a { color:#9CA3AF; transition:color .2s ease; }
.footer-social a:hover { color:var(--escudo-light); }

/* ════════════════════════════════════════════════════════════
   GESTIÓN DE HALLAZGOS DE CORREO (P3) — tarjetas + dinamismo.
   Estructura/behavior del demo `demo-hallazgos-dinamismo.html`,
   estilo del dashboard (tema claro; dark vía tokens :root).
   Namespacing `hg-` para no colisionar con `.threat`/`.badge`.
   ════════════════════════════════════════════════════════════ */
.hg-title { font-family: var(--hs-display); }

/* Tarjeta: hover sutil (patrón de .diferencia-card, glow rojo de marca) */
.hg-card {
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.hg-card:not(.hg-gestionado):hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 14px 30px -16px rgba(17,24,39,.28), 0 0 0 1px var(--escudo-red-light);
}
html.dark .hg-card:not(.hg-gestionado):hover {
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.65), 0 0 0 1px var(--escudo-red-light);
}

/* Entrada escalonada (fade + slide-up) */
@keyframes hg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.hg-card.hg-enter { opacity: 0; animation: hg-rise .5s cubic-bezier(.2,.7,.2,1) forwards; }

/* Colapso animado: capa full <-> collapsed (max-height + opacity + padding) */
.hg-full {
  max-height: 640px; opacity: 1; overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease, padding .45s ease;
}
.hg-collapsed {
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  max-height: 0; opacity: 0; overflow: hidden; font-size: 14px;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease .1s, padding .45s ease;
}
.hg-card.hg-gestionado .hg-full { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.hg-card.hg-gestionado .hg-collapsed { max-height: 140px; opacity: 1; padding-top: 14px; padding-bottom: 14px; }
.hg-card.hg-ignorado { opacity: .62; }
.hg-card.hg-atendido .hg-collapsed { border-left: 3px solid var(--risk-bajo); }
.hg-card.hg-ignorado .hg-collapsed { border-left: 3px solid #9CA3AF; }

/* Ícono de la fila colapsada */
.hg-ico { width: 22px; height: 22px; border-radius: 9999px; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.hg-atendido .hg-ico { background: rgba(29,158,117,.16); color: var(--risk-bajo); }
.hg-ignorado .hg-ico { background: #F3F4F6; color: #6B7280; }
html.dark .hg-ignorado .hg-ico { background: #1F2937; color: #9CA3AF; }

/* Barra de progreso (separada del score) */
.hg-progress-track { height: 6px; background: #E5E7EB; border-radius: 9999px; overflow: hidden; }
html.dark .hg-progress-track { background: #1F2937; }
.hg-progress-fill {
  height: 100%; width: 0; border-radius: 9999px;
  background: linear-gradient(90deg, var(--escudo-red-light), var(--risk-bajo));
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .hg-card, .hg-full, .hg-collapsed, .hg-progress-fill { transition: none !important; }
  .hg-card.hg-enter { animation: none; opacity: 1; }
  .hg-card:not(.hg-gestionado):hover { transform: none; }
}

/* Lista vertical — "Filtraciones de tu correo".
   Reemplaza el carrusel horizontal, que producía tarjetas de distinto alto:
   eran 300px fijos con align-items:flex-start, así que cada una medía lo que
   medía su contenido. En columna con stretch las filas ocupan todo el ancho y
   el problema desaparece por construcción.
   No modifica .hg-card ni sus estados (hg-full/hg-collapsed/hg-atendido/...). */
.hg-lista {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════════
   Restyle editorial — "Filtraciones de tu correo" (P5.1, re-tono).
   Carácter editorial (Newsreader + hairline + severidad-punto +
   acción-separador + acento de marca) sobre la MISMA superficie
   gris/fría del dashboard: las superficies usan utilidades Tailwind
   del template (bg-white/border-gray-100/text-gray-*) y sus overrides
   html.dark globales. Sin tokens cálidos propios del componente.
   100% bajo #filtraciones-correo-card; contrato P3 intacto.
   ════════════════════════════════════════════════════════════ */

/* Serif Newsreader — h3 de tarjeta 23px/400, h2 de sección 30px/450 (color heredado del dashboard).
   La familia ya no se declara acá: la pone .hg-title desde var(--hs-display). Lo que queda
   son los ajustes de tamaño y tracking propios de la tarjeta, que no son redundantes. */
#filtraciones-correo-card .hg-title { font-weight: 400; font-size: 1.4375rem; line-height: 1.15; letter-spacing: -.01em; }
#filtraciones-correo-card h2.hg-title { font-size: 1.875rem; font-weight: 450; line-height: 1.1; }

/* Hover sobrio: leve elevación. El anillo de marca y el border-color lo pone la regla .hg-card:hover global. */
#filtraciones-correo-card .hg-card:not(.hg-gestionado):hover { transform: translateY(-2px); }
/* Techo del colapso más alto por el contenido editorial (solo expandido; el gestionado sigue colapsando a 0) */
#filtraciones-correo-card .hg-card:not(.hg-gestionado) .hg-full { max-height: 720px; }

/* Severidad: punto de color (tokens --risk-* globales) + palabra en gris de meta */
.fc-sev { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #6B7280; }
html.dark .fc-sev { color: #8B919C; }
.fc-sev-dot { width: 7px; height: 7px; border-radius: 9999px; background: #9CA3AF; }
.fc-sev--critico .fc-sev-dot { background: var(--risk-critico); }
.fc-sev--alto .fc-sev-dot { background: var(--risk-alto); }
.fc-sev--medio .fc-sev-dot { background: var(--risk-moderado); }
.fc-sev--bajo .fc-sev-dot { background: var(--risk-bajo); }

/* URGENCIA — el segundo eje (§4). SIN COLOR, y es deliberado: una sola píldora
   de color por tarjeta, y es la de GRAVEDAD. El color es un canal escaso y dos
   escalas compitiendo reconstruyen el ruido que la separación en dos ejes vino
   a quitar. La urgencia se lee como lo que es: una acción con plazo. */
.fc-urgencia { display: block; margin-top: 4px; font-size: 11px; color: #6B7280; line-height: 1.45; }
.fc-urgencia b { font-weight: 600; color: #4B5563; }
html.dark .fc-urgencia { color: #8B919C; }
html.dark .fc-urgencia b { color: #C2C7D0; }

/* Acento de marca (var(--escudo-red), se voltea en dark): link de acción, botón "atendido" y "Deshacer/Reactivar" */
#filtraciones-correo-card .hg-action a { color: var(--escudo-red); }
#filtraciones-correo-card .hg-mark[data-estado="atendido"] { background: var(--escudo-red); color: #fff; border: 1px solid var(--escudo-red); }
#filtraciones-correo-card .hg-mark[data-estado="atendido"]:hover { filter: brightness(1.06); }
#filtraciones-correo-card .hg-undo { color: var(--escudo-red); }
#filtraciones-correo-card .hg-undo:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   Filas compactas. Una línea de identificación, una de datos y
   los botones. El párrafo por tarjeta se fue al pie de la sección:
   repetido en cada fila era la mitad del texto que nadie leía.
   ════════════════════════════════════════════════════════════ */

.fc-fila { padding: 13px 16px; }

/* Línea 1 — servicio · año · severidad · correo */
.fc-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.fc-servicio {
  font-family: var(--hs-display); font-weight: 500;
  font-size: 1.0625rem; line-height: 1.2; letter-spacing: -.01em; color: #111827;
}
html.dark .fc-servicio { color: #E7EAF0; }
.fc-anio { font-size: 12px; color: #9CA3AF; font-variant-numeric: tabular-nums; }
.fc-anio::before { content: '· '; }
.fc-correo { font-size: 11px; color: #9CA3AF; margin-left: auto; }
@media (max-width: 640px) { .fc-correo { margin-left: 0; } }

/* Línea 2 — qué quedó expuesto */
.fc-datos { font-size: 13px; line-height: 1.45; color: #4B5563; margin-top: 3px; }
html.dark .fc-datos { color: #9CA3AF; }
.fc-datos-lbl { font-weight: 600; color: #6B7280; }
html.dark .fc-datos-lbl { color: #8B919C; }

/* Línea 3 — botones */
.fc-acciones { display: flex; gap: 8px; margin-top: 10px; }
.fc-btn-ok,
.fc-btn-no {
  font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 7px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fc-btn-ok { display: inline-flex; align-items: center; gap: 6px; }
.fc-btn-no { color: #6B7280; border: 1px solid #E5E7EB; }
.fc-btn-no:hover { color: #111827; border-color: #9CA3AF; }
html.dark .fc-btn-no { color: #9CA3AF; border-color: #2A2F3A; }
html.dark .fc-btn-no:hover { color: #E7EAF0; border-color: #4B5563; }

/* Encabezados de grupo. "Requieren acción" lleva el acento de marca y solo
   aparece si hay al menos una con contraseña o token. */
.fc-encabezado {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #9CA3AF; padding: 10px 2px 2px;
}
.fc-encabezado--accion { color: var(--escudo-red); padding-top: 2px; }

/* Fila resumen — solo existe si algo quedó fuera del tope de filas */
.fc-resumen {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 11px 16px; margin-top: 2px;
  font-size: 12.5px; color: #6B7280; cursor: pointer;
  background: transparent; border: 1px dashed #E5E7EB; border-radius: 10px;
  transition: border-color .15s ease, background .15s ease;
}
/* Variante de los grupos: el botón es solo la acción explícita ("Ver las 3
   restantes"), sin un texto a la izquierda que la duplique. */
.fc-resumen--solo { justify-content: flex-start; }
.fc-resumen:hover { border-color: #9CA3AF; background: rgba(0,0,0,.015); }
html.dark .fc-resumen { color: #9CA3AF; border-color: #2A2F3A; }
html.dark .fc-resumen:hover { border-color: #4B5563; background: rgba(255,255,255,.02); }
.fc-resumen-accion { font-weight: 600; color: var(--escudo-red); flex-shrink: 0; }
.fc-resto { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; }
/* El estado oculto tiene que ganar de forma DETERMINISTA, no por orden de hojas.
   `.fc-resto` y la utilidad `.hidden` de Tailwind tienen la misma especificidad
   (0,1,0), y Tailwind entra por CDN inyectando su <style> en tiempo de ejecución:
   confiar en el orden sería confiar en algo que no controlamos. Con la clase
   doble esta regla es (0,2,0) y gana siempre, sin ID y sin !important.
   Este es el bug que se escapó: antes la base era `#filtraciones-correo-card
   .fc-resto` (1,1,0), que derrotaba a `.hidden` y dejaba las filas colapsadas
   siempre visibles. */
.fc-resto.hidden { display: none; }

/* Grupo por correo — solo con más de una dirección. Ningún correo queda
   invisible aunque otro concentre las exposiciones graves. */
.fc-grupo { display: flex; flex-direction: column; gap: 8px; }
.fc-grupo + .fc-grupo { margin-top: 14px; }
/* La escala va DEBAJO del correo, en columna, no alineada a la derecha: es lo
   único que comunica el tamaño real del problema y a la derecha competía con la
   primera fila del grupo. Acá se lee como parte del encabezado. */
.fc-grupo-cab {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 3px; padding: 2px 2px 0;
}
.fc-grupo-correo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #6B7280;
}
html.dark .fc-grupo-correo { color: #9CA3AF; }
.fc-grupo-escala { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; }
/* Texto secundario normal, NO el muted: antes estaba en #9CA3AF y quien
   escaneaba la página leía un servicio por correo y concluía que tenía poco. */
.fc-grupo-meta { font-size: 12px; font-weight: 500; color: #4B5563; }
html.dark .fc-grupo-meta { color: #9CA3AF; }

/* Pie — el consejo va una vez por sección, no por fila */
.fc-pie { margin-top: 14px; padding-top: 13px; border-top: 1px solid #F3F4F6; }
html.dark .fc-pie { border-top-color: #1F2937; }
.fc-pie-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #9CA3AF; margin-bottom: 6px;
}
.fc-pie-lista { display: flex; flex-direction: column; gap: 5px; }
.fc-pie-lista li { font-size: 12.5px; line-height: 1.5; color: #6B7280; }
html.dark .fc-pie-lista li { color: #8B919C; }
.fc-link { color: var(--escudo-red); font-weight: 600; white-space: nowrap; }
.fc-link:hover { text-decoration: underline; }