@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Azul principal mas oscuro -- Jorge senalo dos veces que el azul claro/vivo
     (#2f6fed) se veia muy claro (tabs, "80%", y luego botones/enlaces como
     "Guardar y evaluar"/"eliminar"/"No aplica"). El azul base ahora ES el tono
     oscuro que antes solo se usaba en hover (contraste 7.08:1 sobre blanco,
     de sobra sobre el minimo AA 4.5:1); el hover usa un tono aun mas oscuro. */
  --azul: #1d4fc4;
  --azul-oscuro: #163a94;
  --azul-claro: #eaf1fe;
  --verde: #15803d;
  --verde-claro: #e8f5ec;
  --rojo: #dc2626;
  --rojo-claro: #fdecec;
  --amarillo: #b45309;
  --amarillo-claro: #fef6e7;
  --naranja: #d97706;
  --naranja-claro: #fdf0e0;
  --gris: #5c6270;
  --gris-suave: #9a9fac;
  --texto: #171923;
  --borde: #e3e6eb;
  --fondo: #f6f7f9;
  /* Navy + dorado: nueva direccion visual para pantallas de acceso, arrancando por
     login (public/index.html). Verificados contra WCAG AA: blanco 13:1, dorado 5.6:1
     y gris-navy 7.5:1, todos sobre --marino-700 (el tono predominante del panel). */
  --marino-900: #0b1c36;
  --marino-800: #102544;
  --marino-700: #16305c;
  --dorado: #cda45e;
  --dorado-suave: #e3c081;
  --marino-texto-suave: #b9c6da;
  /* Sombras sutiles tipo tablero SaaS (Cloudflare/Stripe/Linear), para dar
     profundidad a tarjetas y elementos flotantes sin recurrir a bordes duros. */
  --sombra-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sombra-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --radio: 12px;
}
* { box-sizing: border-box; }
body {
  font-family: "Inter", "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Quita el "flash" azul solido que Chrome/Edge en Windows pintan sobre todo un boton
     al hacer click/tap (tap-highlight de webkit) -- se veia como si un rectangulo azul
     cubriera el boton entero por un instante. Se reemplaza mas abajo por un contorno de
     foco propio, mas discreto y solo visible al navegar con teclado. */
  -webkit-tap-highlight-color: transparent;
}
button, .boton, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}
button:focus, .boton:focus, a:focus, input:focus, select:focus {
  outline: none;
}
button:focus-visible, .boton:focus-visible, a:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}
.contenedor { max-width: 720px; margin: 0 auto; padding: 24px 16px 80px; }
.contenedor-ancho { max-width: 980px; margin: 0 auto; padding: 24px 16px 80px; }
.barra-superior {
  background: white;
  color: var(--texto);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--borde);
}
.barra-superior strong { color: var(--azul); font-size: 1.05rem; }
.barra-superior a { color: var(--azul); text-decoration: none; font-weight: 500; }
.tarjeta {
  background: white;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  padding: 24px;
  margin-bottom: 16px;
}
h1 { color: var(--texto); font-size: 1.7rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { color: var(--texto); font-size: 1.15rem; font-weight: 700; margin-top: 0; letter-spacing: -0.01em; }
label { display: block; font-weight: 600; margin: 14px 0 5px; font-size: 0.9rem; color: var(--texto); }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 0.97rem;
  font-family: inherit;
  color: var(--texto);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }
textarea { min-height: 70px; resize: vertical; }
button, .boton {
  background: var(--azul);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: var(--sombra-sm);
}
button:not(:disabled):not(.secundario):hover, .boton:not(.secundario):hover { background: var(--azul-oscuro); }
button.secundario, .boton.secundario { background: white; color: var(--azul); border: 1px solid var(--borde); box-shadow: none; }
button.secundario:hover, .boton.secundario:hover { background: var(--fondo); border-color: var(--gris-suave); }
/* Variante neutra de .secundario -- para acciones utilitarias (exportar, descargar) que
   no deben competir visualmente con los enlaces/acciones azules de la pantalla. */
button.boton-exportar { color: var(--texto); display: inline-flex; align-items: center; gap: 7px; }
button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.ayuda { color: var(--gris); font-size: 0.85rem; margin-top: 2px; }

/* ===== App shell: layout tipo panel SaaS (sidebar fijo + contenido).
   Se usa en las pantallas autenticadas (dashboard, evaluacion) reemplazando
   la antigua barra-superior. Login/registro/verificar-acceso NO lo usan --
   mantienen su propio look "dark cyber" (.fondo-cyber) sin cambios. ===== */
.app-shell { display: flex; min-height: 100vh; align-items: flex-start; }
.app-nav {
  width: 232px;
  flex-shrink: 0;
  background: white;
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.app-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--texto);
  padding: 2px 8px 20px;
  letter-spacing: -0.01em;
}
.app-nav-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.app-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--gris);
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
}
.app-nav-link:hover { background: var(--fondo); color: var(--texto); }
.app-nav-link.activo { background: var(--azul-claro); color: var(--azul); }
.app-nav-sep { height: 1px; background: var(--borde); margin: 14px 4px; flex-shrink: 0; }
.app-nav-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borde); font-size: 0.78rem; color: var(--gris); }
.app-nav-footer .app-nav-empresa { font-weight: 700; color: var(--texto); display: block; margin-bottom: 2px; font-size: 0.85rem; }
.app-nav-footer a.app-nav-salir { color: var(--rojo); font-weight: 600; text-decoration: none; }
.app-nav-footer a.app-nav-salir:hover { text-decoration: underline; }
.app-main { flex: 1; min-width: 0; }
.app-topbar {
  background: white;
  border-bottom: 1px solid var(--borde);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.app-topbar .migas { font-size: 0.85rem; color: var(--gris); }
.app-topbar .migas a { color: var(--gris); text-decoration: none; }
.app-topbar .migas a:hover { color: var(--azul); }
.app-topbar .migas .actual { color: var(--texto); font-weight: 600; }
.app-content { padding: 28px 32px 80px; max-width: 1080px; margin: 0 auto; }
@media (max-width: 880px) {
  .app-shell { flex-direction: column; }
  .app-nav {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    overflow-x: auto;
    gap: 8px;
  }
  .app-nav-brand { padding: 0 12px 0 0; }
  .app-nav-lista { flex-direction: row; }
  .app-nav-sep, .app-nav-footer { display: none; }
  .app-content { padding: 20px 16px 60px; }
  .app-topbar { padding: 12px 16px; }
}

/* Tabs tipo "segmented control" (vista ejecutiva / tecnica / plan de accion en
   evaluacion.html). El JS solo alterna la clase "secundario" en cada boton
   (ver mostrarVista en evaluacion.js) -- aqui solo se reestiliza esa misma
   logica dentro de este contenedor, sin tocar el JS. */
.tabs-segmentadas {
  background: var(--fondo);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--borde);
  display: inline-flex;
  flex-wrap: wrap;
}
/* Padding/tamano un poco mas compactos que un boton comun -- los 3 tabs (el ultimo
   con nombre largo, "Plan de accion / Remediaciones") tienen que convivir con el
   titulo en la misma fila dentro de .cabecera-evaluacion; ver comentario ahi. */
.tabs-segmentadas button { padding: 8px 14px; font-size: 0.87rem; }
.tabs-segmentadas button.secundario {
  background: transparent;
  border: none;
  color: var(--gris);
  box-shadow: none;
}
.tabs-segmentadas button.secundario:hover { background: rgba(0, 0, 0, 0.04); color: var(--texto); }
.tabs-segmentadas button:not(.secundario) {
  background: white;
  color: var(--azul);
  box-shadow: var(--sombra-sm);
}

/* Cabecera unificada de evaluacion.html: titulo (con el nombre de la vista activa
   inyectado por mostrarVista), subtitulo compacto de una linea, y los tabs + el boton
   de exportar a la derecha -- reemplaza la antigua tarjeta-resumen (5 stat-caja +
   barra segmentada) que ocupaba mucho espacio y no se veia en el mockup de referencia.
   Se usa igual en las 3 vistas (ejecutiva/tecnica/plan), solo cambia el texto. */
/* flex sin wrap en desktop a proposito: con wrap, el bloque derecho (tabs + exportar)
   caia entero a una fila nueva y quedaba pegado a la izquierda (se veia "roto") en
   cuanto el titulo+subtitulo de la izquierda no cabian en la misma fila -- pasaba en
   Vista tecnica/Plan de accion (titulos mas largos) pero no en Vista ejecutiva. Ahora
   la columna izquierda tiene flex:1 + min-width:0 asi es ELLA la que se angosta/envuelve
   su propio texto si hace falta, y tabs+exportar se mantienen siempre a la derecha. */
.cabecera-evaluacion { display: flex; align-items: flex-start; gap: 20px; }
.cabecera-evaluacion h1 { font-size: 1.25rem; margin: 0; }
.cabecera-evaluacion-izq { flex: 1; min-width: 0; }
.cabecera-evaluacion-der { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cabecera-evaluacion-exportar { text-align: right; }
@media (max-width: 700px) {
  .cabecera-evaluacion { flex-wrap: wrap; }
  .cabecera-evaluacion-der { align-items: flex-start; width: 100%; }
}

/* Insignias de estado */
.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.badge.pendiente { background: #f0f0f2; color: var(--gris); }
.badge.cumple { background: var(--verde-claro); color: var(--verde); }
.badge.cumple_parcialmente { background: var(--naranja-claro); color: var(--naranja); }
.badge.no_cumple { background: var(--rojo-claro); color: var(--rojo); }
.badge.requiere_revision_humana { background: var(--amarillo-claro); color: var(--amarillo); }
.badge.no_aplica { background: #eef0f2; color: #64748b; }

/* Stat boxes tipo tablero de resumen */
.stat-fila { display: flex; gap: 14px; flex-wrap: wrap; }
.stat-caja {
  /* flex-grow en 0 (no flex:1) a proposito: con un numero impar de cajas (ej. 5), la
     ultima que cae sola en su fila ya no se estira a lo ancho de todo el contenedor --
     mantiene el mismo tamano que las demas, se ve como una tarjeta mas, no una barra rara. */
  flex: 0 1 170px;
  max-width: 220px;
  min-width: 140px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 16px 18px;
}
.stat-numero { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-numero .stat-pct { font-size: 1.1rem; font-weight: 600; margin-left: 4px; }
.stat-numero.color-verde { color: var(--verde); }
.stat-numero.color-naranja { color: var(--naranja); }
.stat-numero.color-azul { color: var(--azul); }
.stat-numero.color-gris { color: var(--gris); }
/* El primer stat-caja (puntaje de cumplimiento) se destaca con fondo azul claro --
   mismo tratamiento que el resto de la app le da al numero protagonista de la pantalla,
   para que no compita visualmente con las 4 cajas blancas de conteo que le siguen. */
.stat-caja.destacada { background: var(--azul-claro); border-color: transparent; }

/* Score "hero" del panel principal -- mucho mas grande que el stat-numero comun, para que
   el % de cumplimiento se sienta como el protagonista de la pantalla (es el numero que mas
   le importa a un dueño de empresa) y no una cifra mas entre varias. */
.tarjeta-score-hero { padding: 28px; }
.stat-numero-hero { font-size: 3.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.stat-numero-hero .stat-pct-hero { font-size: 1.7rem; font-weight: 700; margin-left: 2px; }
.stat-numero-hero.color-verde { color: var(--verde); }
.stat-numero-hero.color-naranja { color: var(--naranja); }
.stat-numero-hero.color-rojo { color: var(--rojo); }

/* "Cómo funciona": tarjetas rectangulares con icono SVG propio, mismo lenguaje visual
   que las tarjetas de las 10 areas del dashboard (.categoria-chip se reutiliza tal
   cual para garantizar consistencia real, no solo un parecido). */
.pasos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 16px; }
@media (max-width: 900px) { .pasos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pasos-grid { grid-template-columns: 1fr; } }
.paso-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.paso-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--azul); color: white; font-size: 0.72rem; font-weight: 700;
  flex-shrink: 0;
}

.reportes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px; }
@media (max-width: 720px) { .reportes-grid { grid-template-columns: 1fr; } }

/* "Ejemplos": grid de 2 columnas, una tarjeta por area con insignia NUMERADA (1-10,
   el mismo orden que el resto de la app) en vez de iniciales -- evita que dos areas
   con iniciales parecidas (ej. "Contraseñas" / "Copias de seguridad") se confundan. */
.ejemplos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 760px) { .ejemplos-grid { grid-template-columns: 1fr; } }
.ejemplo-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ejemplo-numero {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--marino-800); color: #fff; font-weight: 800; font-size: 1.05rem;
}
.ejemplo-caja { background: var(--fondo); border-radius: 8px; padding: 12px 14px; margin-top: 6px; }
.stat-numero.color-rojo { color: var(--rojo); }
.stat-numero.color-amarillo { color: var(--amarillo); }
.stat-numero.color-texto { color: var(--texto); }
.stat-etiqueta { color: var(--gris); font-size: 0.85rem; margin-top: 4px; }

/* Barra de progreso segmentada (varios colores proporcionales) */
.progreso-fondo { background: #eee; border-radius: 20px; height: 12px; width: 100%; overflow: hidden; display: flex; }
.progreso-relleno { background: var(--azul); height: 100%; }
.progreso-segmento { height: 100%; }
.progreso-segmento.seg-cumple { background: var(--verde); }
.progreso-segmento.seg-cumple_parcialmente { background: var(--naranja); }
.progreso-segmento.seg-no_cumple { background: var(--rojo); }
/* Gris, no ambar -- mismo criterio que la barra hero del dashboard (ver comentario en
   renderHero de dashboard.js): "revision humana" no debe compartir color con "parcial". */
.progreso-segmento.seg-requiere_revision_humana { background: var(--gris-suave); }
.progreso-segmento.seg-no_aplica { background: #c4c8ce; }
.progreso-segmento.seg-pendiente { background: var(--gris-suave); }

.categoria-titulo { margin-top: 30px; margin-bottom: 10px; color: var(--texto); font-size: 1.05rem; border-bottom: 2px solid var(--azul-claro); padding-bottom: 6px; }

/* Tarjeta de control con acento de color a la izquierda segun estado */
.control-tarjeta { border-left: 4px solid var(--gris-suave); }
.control-tarjeta.estado-cumple { border-left-color: var(--verde); }
.control-tarjeta.estado-cumple_parcialmente { border-left-color: var(--naranja); }
.control-tarjeta.estado-no_cumple { border-left-color: var(--rojo); }
.control-tarjeta.estado-requiere_revision_humana { border-left-color: var(--amarillo); }
.control-tarjeta.estado-no_aplica { border-left-color: #9aa1ab; }
.control-tarjeta.estado-pendiente { border-left-color: var(--borde); }

.control-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.evidencia-lista { margin-top: 8px; font-size: 0.85rem; color: var(--gris); }

/* Filtro por estado en Vista tecnica -- pildoras redondeadas en vez de botones
   rectangulares comunes; la activa usa navy solido (no el azul de accion estandar)
   para leerse como un filtro de datos, no como un boton de "hacer algo". */
.filtro-etiqueta { font-weight: 700; font-size: 0.9rem; margin-right: 2px; }
.filtro-pildoras { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro-pildora {
  background: white;
  color: var(--texto);
  border: 1px solid var(--borde);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: none;
}
.filtro-pildora:hover { background: var(--fondo); border-color: var(--gris-suave); }
.filtro-pildora.activa, .filtro-pildora.activa:hover { background: var(--marino-800); color: white; border-color: var(--marino-800); }

/* Badge de seguimiento de remediacion -- se muestra tanto en el Plan de accion como
   (sincronizado en vivo) en la tarjeta de la vista tecnica, para que ambas vistas
   cuenten la misma historia sobre un control sin tener que recargar la pagina. */
.remediacion-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 20px; font-size: 0.76rem; font-weight: 600; }
.remediacion-badge.remediacion-pendiente { background: #f0f0f2; color: var(--gris); }
.remediacion-badge.remediacion-en_progreso { background: var(--azul-claro); color: var(--azul); }
.remediacion-badge.remediacion-resuelto { background: var(--verde-claro); color: var(--verde); }

/* Caja de analisis de la IA -- badge "IA" + texto en cursiva, mismo lenguaje visual
   que recomendacion-ia/sugerencia-ia pero en gris neutro (es una observacion, no una
   accion sugerida). Reemplaza el "IA: ..." en texto plano sin caja. */
.analisis-ia {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--fondo);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 8px;
}
.analisis-ia-badge {
  flex-shrink: 0;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 5px;
  margin-top: 1px;
}
.analisis-ia p { margin: 0; font-style: italic; color: var(--gris); font-size: 0.87rem; }

.recomendacion-ia {
  background: var(--azul-claro);
  border-left: 3px solid var(--azul);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.88rem;
  color: var(--texto);
}

/* Mejora complementaria/opcional en controles que SI cumplen -- deliberadamente en verde
   (mismo color que "cumple") y no en azul, para que se lea como un plus y no se confunda
   visualmente con una recomendacion de brecha real. */
.sugerencia-ia {
  background: var(--verde-claro);
  border-left: 3px solid var(--verde);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.88rem;
  color: var(--texto);
}

/* Roadmap sugerido dentro de Plan de accion: 3 columnas por horizonte de tiempo. */
.roadmap-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 14px; }
.roadmap-columna { border: 1px solid var(--borde); border-radius: 10px; padding: 14px; background: var(--fondo); }
.roadmap-columna h3 { margin: 0 0 4px; font-size: 0.95rem; }
.roadmap-columna .roadmap-item { font-size: 0.85rem; padding: 6px 0; border-top: 1px solid var(--borde); }
.roadmap-columna .roadmap-item:first-of-type { border-top: none; }
.error-msg { color: var(--rojo); font-size: 0.9rem; margin-top: 8px; }
.exito-msg { color: var(--verde); font-size: 0.9rem; margin-top: 8px; }
.enlace-simple { color: var(--azul); font-weight: 600; text-decoration: none; }
.enlace-simple:hover { text-decoration: underline; }

/* Zona de arrastrar y soltar evidencia */
.dropzone {
  border: 2px dashed var(--borde);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  margin-top: 6px;
  color: var(--gris);
  font-size: 0.88rem;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone.dropzone-activa { border-color: var(--azul); background: var(--azul-claro); }

/* Categorias animadas del resumen ejecutivo en el dashboard -- tarjetas RECTANGULARES
   alineadas a la izquierda (no chips cuadrados centrados), 5 columnas en escritorio,
   para calzar con el mockup final de dashboard.html. */
.categorias-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 1100px) { .categorias-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .categorias-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .categorias-grid { grid-template-columns: 1fr; } }
.categoria-chip {
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 20px;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  animation: apareceCategoria 0.5s ease forwards;
  transition: transform 0.15s, box-shadow 0.15s;
}
.categoria-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(47,111,237,0.14); }
.categoria-chip .icono { font-size: 1.6rem; display: block; margin-bottom: 6px; animation: flotar 3s ease-in-out infinite; }
.categoria-chip .nombre { font-size: 0.98rem; font-weight: 700; color: var(--texto); margin-top: 2px; line-height: 1.3; }

@keyframes apareceCategoria {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Layout de la pantalla de evaluacion: columna principal + barra lateral de progreso */
.contenedor-con-barra { display: flex; gap: 24px; align-items: flex-start; }
.contenedor-con-barra .columna-principal { flex: 1; min-width: 0; }
.barra-lateral {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.barra-lateral .titulo-barra { font-weight: 700; font-size: 0.9rem; margin: 0 0 10px; color: var(--texto); }
.barra-lateral .item-categoria {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: white;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--texto);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.barra-lateral .item-categoria:hover { border-color: var(--gris-suave); }
.barra-lateral .item-categoria.activa { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul-claro); }
/* Icono de avance por categoria: aro gris = no empezada, aro naranja = la que se esta
   viendo ahora (misma logica que ya marcaba .activa via el IntersectionObserver), check
   verde relleno = completa. Reemplaza el emoji "check" + barra fina que habia antes. */
.avance-icono {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--gris-suave); box-sizing: border-box; background: white;
}
.item-categoria.activa:not(.completa) .avance-icono { border-color: var(--naranja); }
.item-categoria.completa .avance-icono { background: var(--verde); border-color: var(--verde); }
.avance-nombre { flex: 1; font-weight: 600; }
.avance-conteo { color: var(--gris); font-size: 0.74rem; font-weight: 600; flex-shrink: 0; }
@media (max-width: 900px) {
  .contenedor-con-barra { flex-direction: column; }
  .barra-lateral { position: static; width: 100%; max-height: none; order: -1; }
}

/* Tabla del panel de administracion (listado de empresas) */
.tabla-admin { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tabla-admin th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--borde);
  color: var(--gris);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tabla-admin td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-admin tbody tr:hover { background: var(--fondo); }

/* ===== Pantallas de acceso (login, registro, verificar-acceso): "tarjeta flotante
   sobre grid oscuro" -- fondo degradado azul-negro con grilla sutil, tarjeta
   translucida centrada. Solo se usa en estas 3 paginas; el resto de la app
   (dashboard, evaluacion) mantiene el look claro tipo reporte. ===== */
.fondo-cyber {
  min-height: 100vh;
  /* Centro del resplandor movido a donde cae la tarjeta (no la esquina), para que
     se lea como una luz detras de ella en vez de un degradado generico de fondo. */
  background: radial-gradient(circle at 50% 38%, #1d3c72, #081527 65%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}
.fondo-cyber::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  /* Se desvanece hacia los bordes -- la grilla se nota cerca del centro/tarjeta
     y casi desaparece en las esquinas, en vez de verse uniforme en toda la pantalla. */
  mask-image: radial-gradient(circle at 50% 38%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 38%, black 0%, transparent 75%);
  pointer-events: none;
}
/* Marca sobre la tarjeta -- da identidad de producto sin recargar la tarjeta misma. */
.marca-cyber {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
  color: #eaf1ff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  opacity: 0;
  animation: apareceTarjetaCyber 0.5s ease forwards;
}
.tarjeta-cyber {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(127, 176, 240, 0.3);
  border-radius: 18px;
  padding: 40px 36px;
  backdrop-filter: blur(10px);
  color: #eaf1ff;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(127, 176, 240, 0.05) inset;
  opacity: 0;
  animation: apareceTarjetaCyber 0.5s 0.08s ease forwards;
}
@keyframes apareceTarjetaCyber {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.tarjeta-cyber .icono-cyber {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(127, 176, 240, 0.3), rgba(127, 176, 240, 0.1));
  border: 1px solid rgba(127, 176, 240, 0.4);
  box-shadow: 0 0 0 6px rgba(127, 176, 240, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 22px;
}
.tarjeta-cyber h1 { color: #fff; font-size: 1.55rem; line-height: 1.25; letter-spacing: -0.01em; }
.tarjeta-cyber .ayuda { color: #b7cbef; line-height: 1.55; }
.tarjeta-cyber label { color: #cfe0fa; }
.tarjeta-cyber input[type=text],
.tarjeta-cyber input[type=email],
.tarjeta-cyber select {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 11px 14px;
  border-radius: 9px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tarjeta-cyber input::placeholder { color: rgba(255, 255, 255, 0.38); }
.tarjeta-cyber input:focus,
.tarjeta-cyber select:focus {
  border-color: #7fb0f0;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(127, 176, 240, 0.22);
}
.tarjeta-cyber select option { color: #1c1c22; }
.tarjeta-cyber button:not(.secundario):not(.enlace-simple) {
  background: linear-gradient(135deg, #4a89ea, #2f66c9);
  box-shadow: 0 6px 18px rgba(47, 102, 201, 0.35);
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.tarjeta-cyber button:not(.secundario):not(.enlace-simple):hover {
  background: linear-gradient(135deg, #5a94ec, #3568c4);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(47, 102, 201, 0.45);
}
.tarjeta-cyber .enlace-simple { color: #4fd1c5; text-decoration: underline; text-underline-offset: 3px; }
.tarjeta-cyber .enlace-simple:hover { color: #7ee0d6; }
.tarjeta-cyber p { color: #cfe0fa; }
.tarjeta-cyber hr { border-top-color: rgba(255, 255, 255, 0.15) !important; }
.tarjeta-cyber .error-msg { color: #ff9d9d; }
.tarjeta-cyber .exito-msg { color: #8fe0b8; }

/* Pantalla de confirmacion que reemplaza el formulario tras pedir el enlace */
.confirmacion-envio { text-align: center; }
.confirmacion-envio .icono-cyber { margin: 0 auto 16px; font-size: 26px; }
.confirmacion-envio h1 { margin-bottom: 10px; }

/* ===== Modal generico de confirmacion/prompt (panel de admin).
   Reemplaza a confirm()/prompt() nativos del navegador -- esos no se pueden estilizar
   (se ven como una alerta del sistema operativo, no como parte de la app) y ademas
   bloquean el hilo principal de forma menos controlable. Se arma una sola vez en el HTML
   (ver admin.html) y admin.js llena su contenido dinamicamente segun la accion. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 26, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal-caja {
  background: white;
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  padding: 24px;
  max-width: 440px;
  width: 100%;
}
.modal-caja h3 { margin: 0 0 10px; font-size: 1.1rem; }
.modal-caja p { margin: 0 0 14px; color: var(--gris); font-size: 0.93rem; line-height: 1.5; }
.modal-caja input[type=text] { margin-bottom: 4px; }
.modal-error { color: var(--rojo); font-size: 0.85rem; margin: 0 0 10px; display: none; }
.modal-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
button.peligro, .boton.peligro { background: var(--rojo); }
button.peligro:hover { background: #b91c1c; }

/* ===== Login "panel dividido" navy + dorado -- nueva direccion visual para las
   pantallas de acceso, de ahora en adelante (por ahora solo public/index.html;
   registro.html y verificar-acceso.html siguen usando .fondo-cyber/.tarjeta-cyber
   hasta que se migren aparte). No reemplaza esas clases, se suma junto a ellas. ===== */
.acceso-split { display: flex; min-height: 100vh; }
.acceso-marca {
  flex: 1 1 46%;
  background: linear-gradient(160deg, var(--marino-800), var(--marino-900));
  color: #fff;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.acceso-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
/* Antes "justify-content: space-between" en .acceso-marca clavaba este bloque al
   fondo del panel -- se veia bien a 100vh normal, pero a zoom bajo (<150%) el panel
   es mucho mas alto en px reales y el bloque quedaba "muy abajo". margin:auto lo
   centra en el espacio libre que queda debajo del logo, sin importar la altura. */
.acceso-marca-inferior { max-width: 460px; margin: auto 0; }
.acceso-carrusel { position: relative; min-height: 260px; }
.acceso-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.acceso-slide.activa { opacity: 1; visibility: visible; transform: translateY(0); position: relative; }
.acceso-eyebrow {
  color: var(--dorado);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.acceso-slide h1 { color: #fff; font-size: 1.65rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 26px; }
.acceso-stat { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 18px; }
.acceso-stat-numero { display: block; color: var(--dorado); font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.01em; margin-bottom: 8px; }
.acceso-stat-texto { color: var(--marino-texto-suave); font-size: 0.92rem; line-height: 1.5; margin: 0 0 8px; }
.acceso-stat-cita { color: var(--marino-texto-suave); opacity: 0.75; font-size: 0.76rem; margin: 0; }
.acceso-dots { display: flex; gap: 8px; margin-top: 22px; }
.acceso-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: rgba(255, 255, 255, 0.25); border: none; box-shadow: none;
  cursor: pointer; transition: background 0.15s, transform 0.15s;
}
.acceso-dot:hover { background: rgba(255, 255, 255, 0.4); }
.acceso-dot.activo { background: var(--dorado); transform: scale(1.15); }
.acceso-form {
  flex: 1 1 54%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.acceso-form-interior { width: 100%; max-width: 400px; }
.acceso-icono {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--azul-claro); color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin: 0 auto 20px;
}
.acceso-form-interior h1 { font-size: 1.55rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.acceso-form-interior .ayuda { margin: 0 0 26px; }
.acceso-form button:not(.enlace-simple) {
  background: var(--marino-700);
  box-shadow: 0 6px 18px rgba(16, 37, 68, 0.3);
}
.acceso-form button:not(.enlace-simple):hover { background: var(--marino-900); }
@media (max-width: 860px) {
  .acceso-split { flex-direction: column; }
  .acceso-marca { padding: 32px 28px; gap: 24px; }
  .acceso-carrusel { min-height: 220px; }
}

/* ===== Panel superior (dashboard.html) -- diseno final decidido por Jorge ("1d" +
   ronda de ajustes): barra horizontal fija arriba (logo + links + avatar), no sidebar
   lateral. Reemplaza el rail lateral compacto probado antes en esta misma pagina.
   Clases propias (topnav-*), no toca .app-nav/.app-nav-link usados por las demas
   paginas internas. ===== */
.topnav {
  background: #fff;
  border-bottom: 1px solid var(--borde);
  padding: 20px 40px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.topnav-marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; color: var(--texto); }
.topnav-lista { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; flex: 1; }
.topnav-link { color: var(--gris); text-decoration: none; font-weight: 600; font-size: 0.98rem; }
.topnav-link:hover { color: var(--texto); }
.topnav-link.activo { color: var(--texto); font-weight: 700; }
.topnav-avatar-wrap { position: relative; }
.topnav-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--marino-800); color: #fff; border: none;
  font-weight: 800; font-size: 0.9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.topnav-avatar:hover { background: var(--marino-900); }
.topnav-avatar-menu {
  position: absolute; top: 48px; right: 0; z-index: 30;
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-md);
  padding: 14px; width: 220px; text-align: left;
}
.topnav-avatar-menu .topnav-empresa { display: block; font-weight: 700; font-size: 0.88rem; color: var(--texto); margin-bottom: 2px; }
.topnav-avatar-menu .topnav-usuario { display: block; font-size: 0.8rem; color: var(--gris); margin-bottom: 12px; word-break: break-word; }
.topnav-avatar-menu a.topnav-salir { color: var(--rojo); font-weight: 600; text-decoration: none; font-size: 0.85rem; }
.topnav-avatar-menu a.topnav-salir:hover { text-decoration: underline; }
@media (max-width: 780px) {
  .topnav { flex-wrap: wrap; gap: 14px; padding: 14px 20px; }
  .topnav-lista { gap: 16px; flex-basis: 100%; order: 3; }
}

/* Tarjeta hero del panel: numero grande + mensaje + leyenda de colores + barra
   horizontal segmentada -- version final (se probaron un anillo y un donut antes de
   esta ronda; el diseno decidido vuelve a una barra, pero ahora con leyenda de colores
   explicita en vez de solo el numero). "Revision humana" usa gris (no el amarillo que
   se usa en badges/otras paginas) a proposito, para no confundirse visualmente con
   "Parcial" (naranja) en esta tarjeta especifica. */
.panel-hero-bar { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.panel-hero-bar-numero { font-size: 3.2rem; font-weight: 800; color: var(--azul); line-height: 1; flex-shrink: 0; }
.panel-hero-bar-numero span { font-size: 1.6rem; font-weight: 700; }
.panel-hero-bar-texto { flex: 1; min-width: 260px; }
.panel-hero-bar-mensaje { margin: 0 0 10px; font-weight: 700; font-size: 1.05rem; }
.panel-hero-bar-leyenda { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.panel-hero-bar-leyenda li { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--gris); }
.panel-hero-bar-leyenda .punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.panel-hero-bar-progreso { height: 12px; margin-bottom: 10px; }
.panel-barra-segmento.color-cumple { background: var(--verde); }
.panel-barra-segmento.color-parcial { background: var(--naranja); }
.panel-barra-segmento.color-no_cumple { background: var(--rojo); }
.panel-barra-segmento.color-revision { background: var(--gris-suave); }
.panel-barra-segmento.color-otro { background: #d8dce2; }

/* Iconos de las "10 areas" -- imagenes SVG propias (public/img/iconos/*.svg), no emoji.
   El estado (Cumple/Parcial/No cumple/Revision humana/Sin evaluar) se muestra como
   texto + punto de color debajo del nombre, calculado agrupando los controles reales
   de la evaluacion por categoria (ver agruparPorCategoria en dashboard.js). */
/* width/height + aspect-ratio + object-fit explicitos (no solo los atributos width/height
   del <img>) para que el icono nunca se deforme -- a ciertos niveles de zoom del navegador
   (ej. 175%) una tarjeta angosta podia comprimir el ancho de la imagen sin respetar su
   proporcion cuadrada. */
.categoria-icono-img { display: block; width: 52px; height: 52px; aspect-ratio: 1 / 1; object-fit: contain; flex-shrink: 0; margin: 0 0 14px; }
.categoria-estado { display: flex; align-items: center; justify-content: flex-start; gap: 6px; font-size: 0.85rem; font-weight: 600; margin-top: 8px; }
.categoria-estado .punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.categoria-estado.estado-cumple { color: var(--verde); }
.categoria-estado.estado-parcial { color: var(--naranja); }
.categoria-estado.estado-no_cumple { color: var(--rojo); }
.categoria-estado.estado-revision { color: var(--gris); }
.categoria-estado.estado-sin_evaluar { color: var(--gris-suave); }

/* Estado de carga explicito en botones de envio (login, registro, etc.) -- antes solo
   se deshabilitaba el boton sin cambiar el texto, asi que en una red lenta parecia que
   no habia pasado nada. button.cargando cambia su contenido via JS a un spinner + texto. */
button.cargando { opacity: 0.9; cursor: not-allowed; display: flex; align-items: center; justify-content: center; gap: 8px; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: girar 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes girar { to { transform: rotate(360deg); } }