/* ============================================================
   BITASEG — Tokens de diseño centralizados (spec apariencia)
   Paleta institucional SEGUFAR: azul marino + dorado.
   Cambiar marca = editar SOLO estas variables.
   ============================================================ */

:root {
  /* --- Identidad SEGUFAR --- */
  --primario: #0F2744;
  --primario-oscuro: #0A1628;
  --primario-claro: #1C4E8A;
  --acento: #C9A84C;
  --acento-claro: #d4b85a;
  --acento-oscuro: #a88a3c;

  /* --- Derivados de marca (fondo de íconos, acentos suaves) --- */
  --navy-claro: #E4ECF6;
  --navy-claro-2: #D6E2F0;
  --dorado-claro: #F7F0DC;
  --dorado-claro-2: #F1E6C4;
  --exito: #2A7A3A;
  --exito-fondo: #E8F3EA;

  /* --- PALETA CATEGORÍA → COLOR (un solo lugar, reutilizable en
       chips, badges, estadísticas y reportes — spec cuaderno) ---
       Consigna = navy · Novedad = dorado · Tarea = azul ·
       Interrupción = rojo · Lectura = verde */
  --cat-consigna: #0F2744;
  --cat-consigna-fondo: #E4ECF6;
  --cat-novedad: #A88A3C;
  --cat-novedad-fondo: #F7F0DC;
  --cat-tarea: #2E6BB8;
  --cat-tarea-fondo: #E8F0FA;
  --cat-interrupcion: #C0392B;
  --cat-interrupcion-fondo: #FDECEA;
  --cat-lectura: #2A7A3A;
  --cat-lectura-fondo: #E8F3EA;

  /* --- Neutros (modo claro) --- */
  --fondo: #F5F7FA;
  --superficie: #FFFFFF;
  --superficie-alt: #EEF1F5;
  --borde: #D8DEE6;
  --texto: #1A2233;
  --texto-suave: #5A6577;
  --texto-claro: #8A93A3;

  /* --- Prioridades (spec apariencia) --- */
  --critica: #C0392B;
  --critica-fondo: #FDECEA;
  --alta: #E8A33D;
  --alta-fondo: #FDF3D7;
  --media: #2E6BB8;
  --media-fondo: #E8F0FA;
  --baja: #7D8794;
  --baja-fondo: #F0F2F5;

  /* --- Estados de consigna --- */
  --estado-pendiente: #B8860B;
  --estado-proceso: #2E6BB8;
  --estado-finalizada: #2A7A3A;
  --estado-cancelada: #7D8794;
  --estado-vencida: #C0392B;

  /* --- Relevante (lecturas) --- */
  --relevante: #7A1FA2;
  /* --- Avisos de gestión (supervisor/jefe) --- */
  --gestion: #0E7490;

  /* --- Forma (sobrio corporativo) --- */
  --radio: 5px;
  --radio-pequeno: 3px;
  --sombra: 0 1px 3px rgba(15, 39, 68, 0.10);
  --sombra-media: 0 2px 8px rgba(15, 39, 68, 0.14);

  /* --- Tipografía --- */
  --fuente-titulos: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  --fuente-cuerpo: "Barlow", "Segoe UI", Arial, sans-serif;

  /* --- Espaciado base --- */
  --nav-altura: 56px;
}

/* ============================================================
   MODO OSCURO (turno nocturno o forzado manual) — spec 15.3
   ============================================================ */
[data-tema="oscuro"] {
  /* Fondo de página MUY oscuro; superficie de tarjetas visiblemente más
     clara (elevación real, spec apariencia — dashboard de auditoría).
     Ratio fondo↔superficie ≈ 2.0:1; textos AA sobre superficie. */
  --fondo: #0A1628;
  --superficie: #244A78;
  --superficie-alt: #2C5584;
  --borde: #3A5F8C;
  --texto: #EAF0F8;
  --texto-suave: #B8C4D4;
  --texto-claro: #7E8CA0;

  --critica-fondo: rgba(192, 57, 43, 0.18);
  --alta-fondo: rgba(232, 163, 61, 0.15);
  --media-fondo: rgba(46, 107, 184, 0.18);
  --baja-fondo: rgba(125, 135, 148, 0.15);

  /* Derivados de marca en modo oscuro (fondos más oscuros, stroke claro).
     --navy-claro sube a 0.45 para que los círculos de métricas/íconos
     sean distinguibles sobre la superficie de tarjeta (contraste AA). */
  --navy-claro: rgba(28, 78, 138, 0.45);
  --navy-claro-2: rgba(28, 78, 138, 0.55);
  --dorado-claro: rgba(201, 168, 76, 0.16);
  --dorado-claro-2: rgba(201, 168, 76, 0.26);
  --exito: #4CAF6E;
  --exito-fondo: rgba(42, 122, 58, 0.18);

  /* Categorías en modo oscuro: fondos translúcidos + texto CLARO con
     contraste WCAG AA (spec apariencia) — nunca reutilizar los colores
     del modo claro (navy/verde/rojo oscuros quedan invisibles). */
  --cat-consigna-fondo: rgba(28, 78, 138, 0.30);
  --cat-novedad-fondo: rgba(201, 168, 76, 0.16);
  --cat-tarea-fondo: rgba(46, 107, 184, 0.18);
  --cat-interrupcion-fondo: rgba(192, 57, 43, 0.18);
  --cat-lectura-fondo: rgba(42, 122, 58, 0.18);
  --cat-consigna: #ACD0F5;
  --cat-novedad: #E8D29F;
  --cat-tarea: #A8CEF5;
  --cat-interrupcion: #F5A89F;
  --cat-lectura: #9FE0B0;

  --sombra: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sombra-media: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--fuente-cuerpo);
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.55;
  font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Títulos: Barlow (fuente de cuerpo) con peso alto — sobrio y moderno.
   Bebas Neue queda RESERVADA a momentos de marca (navbar, valores de
   métricas) y a valores grandes (ver .metrica-valor). El dorado NO es
   color por defecto de títulos: en claro navy, en oscuro blanco-gris. */
h1, h2, h3, h4 {
  font-family: var(--fuente-cuerpo);
  color: var(--primario);
  letter-spacing: 0.3px;
  font-weight: 700;
  margin: 0 0 0.6rem;
}
h2 { font-weight: 600; }
h3, h4 { font-weight: 600; }
[data-tema="oscuro"] h1,
[data-tema="oscuro"] h2,
[data-tema="oscuro"] h3,
[data-tema="oscuro"] h4 { color: var(--texto); }

a { color: var(--primario-claro); }
[data-tema="oscuro"] a { color: var(--acento-claro); }

/* ============================================================
   BARRA DE NAVEGACIÓN
   ============================================================ */
.navbar {
  background: var(--primario);
  color: #fff;
  min-height: var(--nav-altura);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--sombra-media);
}
.navbar .marca {
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  letter-spacing: 2px;
  color: var(--acento);
  text-decoration: none;
}
.navbar .marca span { color: #fff; }
.navbar .nav-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.9rem;
  margin-left: 1rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radio-pequeno);
  transition: background 0.15s ease;
}
.navbar .nav-links a:hover { background: rgba(255, 255, 255, 0.12); }
/* Botón "Salir" como enlace (logout por POST con CSRF, spec seguridad-acceso) */
.navbar .form-logout { display: inline; }
.boton-enlace-salir {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font: inherit;
  font-size: 0.9rem;
  margin-left: 1rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radio-pequeno);
  cursor: pointer;
  transition: background 0.15s ease;
}
.boton-enlace-salir:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Menú de usuario (perfil, contraseña, cerrar sesión) */
.usuario-menu { position: relative; display: inline-block; margin-left: 1rem; }
.usuario-menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radio-pequeno);
  cursor: pointer;
}
.usuario-menu-boton:hover { background: rgba(255, 255, 255, 0.12); }
.usuario-rol { color: rgba(255, 255, 255, 0.75); font-size: 0.78rem; }
.usuario-chevron { width: 14px; height: 14px; }
.usuario-menu-desplegable {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 210px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
  z-index: 60;
  overflow: hidden;
}
.usuario-menu-desplegable .usuario-menu-cabecera {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
}
.usuario-menu-desplegable a,
.usuario-menu-desplegable .usuario-menu-logout button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--texto);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  text-decoration: none;
}
.usuario-menu-desplegable a:hover,
.usuario-menu-desplegable .usuario-menu-logout button:hover {
  background: var(--superficie-alt, rgba(0,0,0,0.04));
}
.usuario-menu-logout button { color: var(--critica); }

/* Traslado de usuarios (asignación de miembros a un grupo) */
.traslado {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  margin: 0.6rem 0 1rem;
  flex-wrap: wrap;
}
.traslado-columna {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
}
.traslado-columna h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.traslado-buscar {
  width: 100%;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pequeno);
  font-size: 0.85rem;
}
.traslado-lista {
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 0.88rem;
  padding: 0.25rem;
}
.traslado-lista option { padding: 0.2rem 0.3rem; }
.traslado-lista option.arrastrando { opacity: 0.5; }
.traslado-botones {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}
.traslado-botones .boton { font-size: 1.1rem; padding: 0.4rem 0.7rem; }

/* Resumen compacto por bitácora (acordeón): el "cuadernito" amarillo de cada
   bitácora está colapsado por defecto; al pulsarlo despliega los folios.
   Este diseño compacto es el estándar para los resúmenes (novedades,
   consignas, turnos, lecturas). */
.resumen-bitacora {
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento); /* cuadernito amarillo */
  border-radius: var(--radio);
  margin: 0.5rem 0;
  overflow: hidden;
  background: var(--superficie);
}
.resumen-bitacora > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.resumen-bitacora > summary::-webkit-details-marker { display: none; }
.resumen-bitacora > summary::after {
  content: "▾";
  color: var(--texto-suave);
  transition: transform 0.15s ease;
}
.resumen-bitacora[open] > summary::after { transform: rotate(180deg); }
.resumen-bitacora > summary:hover { background: var(--superficie-alt, rgba(0,0,0,0.03)); }
.resumen-bitacora-nombre { display: inline-flex; align-items: center; gap: 0.4rem; }
.resumen-items { border-top: 1px solid var(--borde); }
.resumen-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--borde-suave, rgba(0,0,0,0.05));
}
.resumen-item:last-child { border-bottom: 0; }
.resumen-folio {
  font-family: var(--fuente-mono, monospace);
  color: var(--primario-claro);
  white-space: nowrap;
  font-size: 0.78rem;
}
.resumen-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumen-texto--detalle { flex: 0 1 auto; max-width: 18rem; color: var(--texto-suave); font-style: italic; }
.resumen-meta { color: var(--texto-suave); font-size: 0.72rem; white-space: nowrap; }
.resumen-acciones { display: flex; gap: 0.3rem; align-items: center; }
.resumen-acciones .boton { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
.resumen-item--relevante { border-left: 3px solid var(--relevante); }
.resumen-item--gestion { border-left: 3px solid var(--gestion); }
.resumen-item--turno { background: var(--media-fondo); }
.resumen-item--completada { opacity: 0.6; }
/* Dashboard: enlace estándar como los demás (sin CTA permanente).
   El dorado marca SOLO el estado activo de navegación (subrayado sutil
   cuando la página actual es el tablero). */
.navbar .nav-links .nav-dashboard { font-weight: 600; }
.navbar .nav-links .nav-activo {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--acento);
}
.navbar .usuario { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; margin-left: 1rem; }

/* Selector de modo (claro/oscuro) — ícono sol/luna con label visible */
.tema-boton {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: var(--radio-pequeno);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
  margin-left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background 0.15s ease;
}
.tema-boton:hover { background: rgba(255, 255, 255, 0.22); }
.tema-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tema-boton svg { width: 18px; height: 18px; }
.tema-boton .tema-label { font-size: 0.8rem; }
@media (max-width: 768px) { .tema-boton .tema-label { display: none; } }

/* Footer — mismo criterio de marca que el resto: navy + dorado, sin grises
   genéricos. Borde superior dorado sutil separa del contenido; izquierda =
   sistema + versión, derecha = contacto de soporte. */
.pie {
  margin-top: 1.6rem;
  padding: 0.9rem 1.25rem 1.1rem;
  border-top: 2px solid var(--acento);
  background: var(--superficie);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--texto-claro);
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}
.pie strong { color: var(--primario); font-family: var(--fuente-titulos); letter-spacing: 1.5px; }
[data-tema="oscuro"] .pie strong { color: var(--acento); }
.pie .pie-soporte { color: var(--texto-suave); }
.pie a { color: var(--primario-claro); font-weight: 600; }
.pie a:hover { color: var(--acento-oscuro); }

/* ============================================================
   CONTENIDO
   ============================================================ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.contenido {
  flex: 1 0 auto;
  max-width: 1080px;
  width: 100%;
  margin: 1.5rem auto;
  padding: 0 1rem;
}
.pie { flex-shrink: 0; }

/* ============================================================
   COMPONENTES
   ============================================================ */
/* --- Jerarquía de botones ---
   Dorado (boton--cta) = UNA acción primaria de alto valor por pantalla.
   Navy (boton) = acción secundaria / navegación estándar. */
.boton, button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--primario);
  color: #fff;
  border: none;
  border-radius: var(--radio);
  padding: 0.6rem 1.15rem;
  font-family: var(--fuente-cuerpo);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
[data-tema="oscuro"] .boton, [data-tema="oscuro"] button[type="submit"] { color: #fff; }
/* Hover: el color de TEXTO se define SIEMPRE explícito (#fff) — sin esto, las
   variantes con texto no blanco (ghost, secundario) heredaban su color base y
   coincidían con el fondo hover (bug 'Ver bitácoras', botón invisible). */
.boton:hover, button[type="submit"]:hover {
  background: var(--primario-claro);
  color: #fff;
}
.boton:active, button[type="submit"]:active { transform: translateY(1px); }
.boton:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
/* CTA prioritario: dorado con texto navy oscuro (contraste AA) */
.boton--cta {
  background: var(--acento);
  color: var(--primario-oscuro);
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.35);
}
.boton--cta:hover { background: var(--acento-claro); color: var(--primario-oscuro); }
.boton--cta:focus-visible { outline-color: var(--primario); }
/* En oscuro la regla base [data-tema="oscuro"] .boton { color:#fff } vencería
   al CTA (texto blanco sobre dorado, 2.3:1). Se restaura el navy oscuro. */
[data-tema="oscuro"] .boton--cta { color: var(--primario-oscuro); }
[data-tema="oscuro"] .boton--cta:hover { color: var(--primario-oscuro); }
.boton--peligro { background: var(--critica); }
.boton--exito { background: var(--estado-finalizada); }
/* Secundario: acción de bajo énfasis en OUTLINE navy (antes gris con texto
   blanco, 3.1:1 — insuficiente). Mismo patrón que ghost. */
.boton--secundario {
  background: transparent;
  color: var(--primario-claro);
  border: 1px solid var(--borde);
}
.boton--secundario:hover {
  background: var(--primario-claro);
  color: #fff;
  border-color: var(--primario-claro);
}
[data-tema="oscuro"] .boton--secundario { color: var(--acento-claro); }
[data-tema="oscuro"] .boton--secundario:hover { background: var(--acento); color: var(--primario-oscuro); border-color: var(--acento); }
/* Botones de acción de turno: compactos, menos dominantes (punto 3) */
.boton--turno {
  padding: 0.4375rem 0.875rem;   /* 7px 14px (antes 9.6px 18.4px) */
  font-size: 0.8125rem;          /* 13px (antes 14.7px) */
}
/* Botón deshabilitado (turno ya abierto/cerrado): atenuado, sin acción */
.boton--deshabilitado {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.boton--ghost {
  background: transparent;
  color: var(--primario-claro);
  border: 1px solid var(--borde);
}
/* Ghost hover: fondo navy relleno + texto BLANCO explícito. El bug original
   dejaba el texto --primario-claro sobre el fondo hover --primario-claro
   (1:1 invisible); el color explícito lo hace imposible. */
.boton--ghost:hover {
  background: var(--primario-claro);
  color: #fff;
  border-color: var(--primario-claro);
}
[data-tema="oscuro"] .boton--ghost { color: var(--acento-claro); }
[data-tema="oscuro"] .boton--ghost:hover { background: var(--acento); color: var(--primario-oscuro); border-color: var(--acento); }

/* --- Tarjetas: borde superior de acento + sombra + hover elevado --- */
.tarjeta {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--primario);
  border-radius: var(--radio);
  padding: 1.15rem 1.25rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
}
.tarjeta:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}
/* Categorías de tarjeta por color de marca (no repetir el mismo en fila) */
.tarjeta--navy { border-top-color: var(--primario); }
.tarjeta--dorada { border-top-color: var(--acento); }
.tarjeta--verde { border-top-color: var(--exito); }
.tarjeta--gris { border-top-color: var(--texto-claro); }
.tarjeta--enlace { cursor: pointer; }

/* --- Icono de tarjeta (lucide, 26px) con personalidad de marca ---
   Fondo derivado de la paleta (navy muy claro / dorado muy claro),
   stroke navy o dorado — nunca gris de sistema. */
.tarjeta-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radio);
  background: var(--navy-claro);
  color: var(--primario);
  margin-bottom: 0.6rem;
}
.tarjeta-icono svg { width: 24px; height: 24px; }
/* Variante dorada */
.tarjeta-icono--dorado {
  background: var(--dorado-claro);
  color: var(--acento-oscuro);
}
[data-tema="oscuro"] .tarjeta-icono--dorado { color: var(--acento-claro); }
/* Variante verde (éxito) */
.tarjeta-icono--verde {
  background: var(--exito-fondo);
  color: var(--exito);
}
/* Variante navy más profunda para contraste */
.tarjeta-icono--navy {
  background: var(--navy-claro-2);
  color: var(--primario-claro);
}
[data-tema="oscuro"] .tarjeta-icono { color: var(--acento-claro); }

/* Borde de prioridad (spec 15.4) — convive con el borde superior */
.tarjeta--critica { border-left: 5px solid var(--critica); }
.tarjeta--alta { border-left: 5px solid var(--alta); }
.tarjeta--media { border-left: 5px solid var(--media); }
.tarjeta--baja { border-left: 5px solid var(--baja); }
.tarjeta--relevante { border-left: 5px solid var(--relevante); }
.tarjeta--apagada { opacity: 0.55; }

/* Avisos emitidos por supervisor/jefe: acento distintivo para que el
   personal operador/guardia los note (spec lecturas-obligatorias). */
.tarjeta--gestion { border-left: 5px solid var(--gestion); }
.badge--gestion {
  background: var(--gestion);
  color: #fff;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
}

/* --- Métricas / contadores grandes con estado visual --- */
.metrica { text-align: center; padding: 0.25rem 0; }
.metrica-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 auto 0.45rem;
  background: var(--navy-claro);
  color: var(--primario);
}
.metrica-icono svg { width: 17px; height: 17px; }
.metrica-valor {
  font-family: var(--fuente-titulos);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--primario);
  display: block;
}
[data-tema="oscuro"] .metrica-valor { color: var(--texto); }
.metrica-etiqueta {
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--texto-suave);
  display: block;
  margin-top: 0.3rem;
}
/* Estado: 0 pendientes = bueno (verde); hay pendientes = atención (ámbar) */
.metrica--ok .metrica-valor { color: var(--exito); }
.metrica--ok .metrica-icono { background: var(--exito-fondo); color: var(--exito); }
.metrica--atencion .metrica-valor { color: var(--alta-oscuro, #8a6d1f); }
.metrica--atencion .metrica-icono { background: var(--alta-fondo); color: var(--alta-oscuro, #8a6d1f); }
.metrica--info .metrica-icono { background: var(--navy-claro); color: var(--primario); }
.metrica--dorada .metrica-valor { color: var(--acento-oscuro); }
.metrica--dorada .metrica-icono { background: var(--dorado-claro); color: var(--acento-oscuro); }
/* Modo oscuro: íconos en círculos con stroke CLARO (blanco-gris o señal),
   nunca navy oscuro sobre navy translúcido (contraste, spec apariencia).
   Las señales de estado (verde/ámbar) mantienen su color de señal. */
[data-tema="oscuro"] .metrica--info .metrica-icono { color: var(--texto); }
[data-tema="oscuro"] .metrica-icono { color: var(--texto); }
[data-tema="oscuro"] .metrica--ok .metrica-icono { color: var(--exito); }
[data-tema="oscuro"] .metrica--atencion .metrica-icono { color: var(--acento-claro); }
[data-tema="oscuro"] .metrica--dorada .metrica-icono { color: var(--acento-claro); }
[data-tema="oscuro"] .metrica--dorada .metrica-valor,
[data-tema="oscuro"] .metrica--atencion .metrica-valor { color: var(--acento-claro); }

/* Badges */
.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge--critica { background: var(--critica-fondo); color: var(--critica); }
.badge--alta { background: var(--alta-fondo); color: var(--alta-oscuro, #8a6d1f); }
.badge--media { background: var(--media-fondo); color: var(--media); }
.badge--baja { background: var(--baja-fondo); color: var(--baja); }
.badge--pendiente { background: var(--media-fondo); color: var(--estado-proceso); }
.badge--proceso { background: var(--media-fondo); color: var(--estado-proceso); }
.badge--finalizada { background: rgba(42, 122, 58, 0.15); color: var(--estado-finalizada); }
.badge--cancelada { background: var(--baja-fondo); color: var(--estado-cancelada); }
.badge--vencida { background: var(--critica-fondo); color: var(--critica); }
.badge--admin_sistema { background: rgba(201, 168, 76, 0.18); color: var(--acento-oscuro); }
.badge--jefe_operaciones { background: var(--media-fondo); color: var(--media); }
.badge--supervisor_area { background: var(--alta-fondo); color: var(--alta-oscuro, #8a6d1f); }
.badge--operador { background: var(--baja-fondo); color: var(--baja); }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabla th {
  background: var(--primario);
  color: #fff;
  text-align: left;
  padding: 0.7rem 0.75rem;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  font-weight: 600;
  white-space: nowrap;
}
.tabla td { border-bottom: 1px solid var(--borde); padding: 0.55rem 0.7rem; font-size: 0.88rem; color: var(--texto); }
.tabla tr:nth-child(even) td { background: var(--superficie-alt); }

/* Tabla de rendimiento (spec estadisticas): encabezado AGRUPADO en dos
   niveles + scroll interno con cabecera sticky + columna "Operador" fija.
   El navbar sticky queda arriba (z-index 100); la cabecera de tabla usa
   z-index inferior para quedar debajo de él. */
.tabla-rendimiento {
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio, 0.5rem);
  background: var(--superficie);
}
/* Divulgación progresiva: por defecto solo las columnas de uso diario; el
   toggle .tabla-expandida muestra el resto. En expandido la tabla es ancha
   y permite scroll horizontal; en colapsado cabe sin scroll en 1280px+. */
.tabla-rendimiento .tabla { margin: 0; }
.tabla-rendimiento.tabla-expandida .tabla { min-width: 900px; }
.tabla-rendimiento:not(.tabla-expandida) .col-extra { display: none; }
.tabla-rendimiento:not(.tabla-expandida) .cabecera-grupos { display: none; }
.tabla-rendimiento thead { position: sticky; top: 0; z-index: 30; background: var(--primario); }
.tabla-rendimiento thead .cabecera-grupos th {
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.8px;
  border-bottom: 2px solid var(--acento, #C9A84C);
  text-align: center;
}
.tabla-rendimiento thead .cabecera-columnas th { font-weight: 600; padding-top: 0.45rem; padding-bottom: 0.45rem; }
/* Columna "Operador": fija al hacer scroll horizontal (primera columna) */
.tabla-rendimiento th:first-child,
.tabla-rendimiento td:first-child { position: sticky; left: 0; }
.tabla-rendimiento thead th:first-child { z-index: 40; }
.tabla-rendimiento td:first-child { z-index: 20; background: var(--superficie); }
.tabla-rendimiento tr:nth-child(even) td:first-child { background: var(--superficie-alt); }
.tabla-rendimiento td:first-child { box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08); }
/* Tinte SUTIL alternado por grupo de columnas (Cumplimiento e Índices),
   separación visual sin rejilla tipo hoja de cálculo. Va DESPUÉS del
   zebra para ganar en filas pares. */
.tabla-rendimiento tbody td.g-tinte { background-color: rgba(10, 22, 40, 0.045); }
.tabla-rendimiento tbody tr:nth-child(even) td.g-tinte { background-color: rgba(10, 22, 40, 0.07); }
.tabla-rendimiento thead .cabecera-columnas th.g-tinte { background-color: rgba(255, 255, 255, 0.06); }
[data-tema="oscuro"] .tabla-rendimiento tbody td.g-tinte { background-color: rgba(255, 255, 255, 0.03); }
[data-tema="oscuro"] .tabla-rendimiento tbody tr:nth-child(even) td.g-tinte { background-color: rgba(255, 255, 255, 0.05); }
[data-tema="oscuro"] .tabla-rendimiento thead .cabecera-columnas th.g-tinte { background-color: rgba(255, 255, 255, 0.05); }
/* Toolbar del toggle de métricas (divulgación progresiva) */
.metricas-toolbar { display: flex; justify-content: flex-end; margin: 0.25rem 0 0.5rem; }
.boton--metricas { font-size: 0.8rem; padding: 0.35rem 0.85rem; }

/* Avatar de operador: círculo 30px con iniciales, color consistente por
   persona (hash del nombre → paleta 1..6). Contraste AA en ambos modos. */
.avatar-operador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 0.5rem;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.avatar--c1 { background: #E4ECF6; color: #1C4E8A; }
.avatar--c2 { background: #F7F0DC; color: #8A6D1F; }
.avatar--c3 { background: #E8F3EA; color: #2A7A3A; }
.avatar--c4 { background: #FDECEA; color: #C0392B; }
.avatar--c5 { background: #FDF3D7; color: #6B4E0D; }  /* AA 6.98:1 sobre su fondo */
.avatar--c6 { background: #E8F0FA; color: #2E6BB8; }
[data-tema="oscuro"] .avatar--c1 { background: rgba(28, 78, 138, 0.30); color: #ACD0F5; }
[data-tema="oscuro"] .avatar--c2 { background: rgba(201, 168, 76, 0.16); color: #E8D29F; }
[data-tema="oscuro"] .avatar--c3 { background: rgba(42, 122, 58, 0.18); color: #9FE0B0; }
[data-tema="oscuro"] .avatar--c4 { background: rgba(192, 57, 43, 0.18); color: #F6B4AC; }  /* AA ≥4.5 sobre fila par */
[data-tema="oscuro"] .avatar--c5 { background: rgba(232, 163, 61, 0.15); color: #F2CA8E; }  /* AA ≥4.5 sobre fila par */
[data-tema="oscuro"] .avatar--c6 { background: rgba(46, 107, 184, 0.18); color: #ADD1F6; }  /* AA ≥4.5 sobre fila par */

/* Tooltip (ⓘ) en encabezados de índices calculados (spec estadisticas) */
.tooltip { position: relative; display: inline-flex; align-items: center; }
.tooltip .tooltip-icono {
  cursor: help;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 0.3rem;
  font-size: 0.85rem;
  line-height: 1;
}
.tooltip .tooltip-texto {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--texto);
  color: var(--fondo);
  padding: 0.45rem 0.6rem;
  border-radius: 0.35rem;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  width: 250px;
  text-align: left;
  z-index: 60;
  box-shadow: var(--sombra-media);
  transition: opacity 0.15s ease;
  pointer-events: none;
  white-space: normal;
}
.tooltip:hover .tooltip-texto { visibility: visible; opacity: 1; }

/* Resaltado condicional de columnas críticas (spec estadisticas) —
   reutiliza los tokens de estados/prioridades ya definidos. */
.celda-alerta { color: var(--critica); font-weight: 700; }
[data-tema="oscuro"] .celda-alerta { color: #F7B8B0; }  /* AA ≥4.5 sobre superficie-alt */
.rend-ok { color: var(--exito); background-color: var(--exito-fondo); border-radius: 0.25rem; padding: 0.1rem 0.35rem; }
.rend-media { color: var(--alta-oscuro, #8a6d1f); background-color: var(--alta-fondo); border-radius: 0.25rem; padding: 0.1rem 0.35rem; }
.rend-baja { color: var(--critica); background-color: var(--critica-fondo); border-radius: 0.25rem; padding: 0.1rem 0.35rem; }
[data-tema="oscuro"] .rend-ok { color: #9FE0B0; }      /* AA 4.74:1 sobre fondo mezclado */
[data-tema="oscuro"] .rend-media { color: #EAD6A7; }   /* AA ≥4.5 sobre fondo mezclado */
[data-tema="oscuro"] .rend-baja { color: #F6B4AC; }    /* AA ≥4.5 sobre fondo mezclado */

/* Formularios */
form.campo-form label { font-size: 0.88rem; font-weight: 600; color: var(--texto-suave); }
input[type="text"], input[type="password"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="url"], input[type="file"], select, textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  margin: 0.3rem 0 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: 0.92rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-tema="oscuro"] input, [data-tema="oscuro"] select, [data-tema="oscuro"] textarea {
  border-color: var(--borde);
  background: var(--superficie-alt);
  color: var(--texto);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.25);
}

/* Desplegables (select) — estilos explícitos de las opciones en AMBOS
   temas. Sin esto, el dropdown nativo usa el tema del sistema y las
   opciones pueden quedar ilegibles (texto claro sobre fondo claro).
   color-scheme indica al navegador el esquema del dropdown. */
:root { color-scheme: light; }
[data-tema="oscuro"] { color-scheme: dark; }
select option {
  background: var(--superficie);
  color: var(--texto);
}
[data-tema="oscuro"] select option {
  background: var(--superficie-alt);
  color: var(--texto);
}
/* Select en dark mode: flecha y fondo explícitos */
[data-tema="oscuro"] select {
  background-color: var(--superficie-alt);
  color: var(--texto);
  border-color: var(--borde);
}

/* Búsqueda global: texto de ayuda sin superposición (sin margin negativo)
   y grupo de desplegables encadenados (Supervisor -> Bitácora). */
.busqueda-ayuda {
  color: var(--texto-suave);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

/* Ícono de teléfono decorativo junto a los números del directorio */
.icono-telefono {
  width: 15px;
  height: 15px;
  color: var(--texto-claro);
  vertical-align: middle;
  margin-right: 0.3rem;
}
.busqueda-grupo {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.busqueda-grupo > div {
  flex: 1;
  min-width: 220px;
}

/* DROPDOWN CUSTOM para el ámbito de búsqueda (reemplaza el <select>
   nativo cuyo popup no es estilizable en dark mode y generaba el texto
   "duplicado/fantasma" al traslucir el contenido subyacente). */
.dropdown-custom {
  position: relative;
}
.dropdown-custom-trigger {
  width: 100%;
  padding: 0.6rem 0.7rem;
  margin: 0.3rem 0 0.4rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.dropdown-custom-trigger::after {
  content: "▾";
  color: var(--texto-claro);
  font-size: 0.8rem;
}
.dropdown-custom-trigger[aria-expanded="true"]::after { content: "▴"; }
[data-tema="oscuro"] .dropdown-custom-trigger {
  background: var(--superficie-alt);
  border-color: var(--borde);
  color: var(--texto);
}
.dropdown-custom-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 2px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  max-height: 240px;
  overflow-y: auto;
  display: none;
}
[data-tema="oscuro"] .dropdown-custom-menu {
  background: var(--superficie-alt);
  border-color: var(--borde);
}
.dropdown-custom-menu.visible { display: block; }
.dropdown-custom-opcion {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  background: transparent;
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.dropdown-custom-opcion:hover { background: var(--navy-claro); }
.dropdown-custom-opcion[aria-selected="true"] {
  background: var(--navy-claro-2);
  font-weight: 600;
}
[data-tema="oscuro"] .dropdown-custom-opcion:hover { background: rgba(28, 78, 138, 0.35); }
[data-tema="oscuro"] .dropdown-custom-opcion[aria-selected="true"] { background: rgba(28, 78, 138, 0.45); }
.dropdown-custom-vacio {
  padding: 0.55rem 0.7rem;
  color: var(--texto-claro);
  font-size: 0.85rem;
}

/* Mensajes flash — feedback integrado, paleta de marca (nunca azul genérico).
   Éxito/info = dorado suave con borde dorado; error = rojo de marca. */
.mensaje-error {
  background: var(--critica-fondo);
  color: var(--critica);
  padding: 0.65rem 0.95rem;
  border-radius: var(--radio);
  margin-bottom: 0.9rem;
  border-left: 4px solid var(--critica);
  font-size: 0.88rem;
}
.mensaje-info {
  background: var(--dorado-claro);
  color: var(--acento-oscuro);
  padding: 0.65rem 0.95rem;
  border-radius: var(--radio);
  margin-bottom: 0.9rem;
  border-left: 4px solid var(--acento);
  font-size: 0.88rem;
}
[data-tema="oscuro"] .mensaje-info { background: var(--dorado-claro); color: var(--acento-claro); }

/* Mensajes auto-ocultables (toast): el JS de base.html los oculta con
   fade-out y colapso de altura tras unos segundos; siempre hay un botón
   de cierre manual (×). El mensaje nunca queda permanente en la pantalla. */
.mensaje-error,
.mensaje-info {
  position: relative;
  padding-right: 2.5rem;
  overflow: hidden;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    max-height 0.35s ease,
    margin 0.35s ease,
    padding 0.35s ease;
}
.mensaje-cerrar {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: inherit;
  opacity: 0.55;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radio-pequeno);
}
.mensaje-cerrar:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
[data-tema="oscuro"] .mensaje-cerrar:hover { background: rgba(255, 255, 255, 0.14); }
.mensaje--ocultar {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
}

/* Utilidades de layout */
.grupo { display: flex; gap: 1rem; flex-wrap: wrap; }
.grupo > * { flex: 1; min-width: 180px; }
.margen-superior { margin-top: 1rem; }
.texto-suave { color: var(--texto-suave); font-size: 0.85rem; }
.medios-miniatura img { max-height: 80px; border-radius: var(--radio-pequeno); border: 1px solid var(--borde); }

/* ============================================================
   CUADERNO / CAPTURA TIPO DOCUMENTO (vista de bitácora)
   Para usuarios que vienen de papel y Word: escribir como anotar.
   ============================================================ */
.bitacora-cuaderno {
  max-width: 860px;
  margin: 0 auto;
}

/* Hoja de cuaderno (punto 1 del mockup): dos bloques apilados sin costura.
   - .cuaderno-superior: blanco liso, border-radius SOLO superior, SIN
     border-bottom (no hay línea divisoria con el papel).
   - .cuaderno-papel: fondo rayado, border-radius 0 en la parte superior,
     comparte border-left/border-right con el bloque superior para verse
     como una sola pieza continua.
   Ambos comparten el border de los lados (no duplicado en el medio). */
.cuaderno-editor {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.cuaderno-superior {
  background: var(--superficie);
  border-radius: var(--radio) var(--radio) 0 0;
  border-bottom: none;           /* sin línea divisoria */
  padding: 0.6rem 0.9rem 0.45rem;  /* compacto (antes 0.8/0.55) */
}
.cuaderno-papel {
  background-image: repeating-linear-gradient(
    transparent,
    transparent 30px,
    rgba(15, 39, 68, 0.18) 30px,
    rgba(15, 39, 68, 0.18) 31px
  );
  border-radius: 0 0 var(--radio) var(--radio);
  padding: 0;
}
[data-tema="oscuro"] .cuaderno-papel {
  background-image: repeating-linear-gradient(
    transparent,
    transparent 30px,
    rgba(216, 222, 230, 0.30) 30px,
    rgba(216, 222, 230, 0.30) 31px
  );
}
/* El textarea del papel: mismo rayado, texto centrado sobre las líneas.
   No tiene borde propio (la "hoja" es .cuaderno-papel). */
.cuaderno-papel .cuaderno-area {
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: 150px;
  line-height: 32px;             /* igual al espaciado del rayado */
  padding: 0 0.9rem;             /* sin padding vertical: el texto parte
                                    de la primera línea del papel */
  border-radius: 0;
}
.cuaderno-papel .cuaderno-area:focus { box-shadow: none; }

/* Membrete de contexto de turno (punto 2 del mockup):
   texto pequeño, mayúsculas, letter-spacing amplio, gris tenue.
   Formato: TURNO DIURNO/NOCTURNO · FECHA · OPERADOR · ABIERTO HORA */
 .historial-membrete {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-claro);
  line-height: 1.3;
  padding: 0.3rem 0.6rem;
  margin: 0 0 0.4rem;
  background: var(--superficie-alt);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-pequeno);
  display: flex;
  align-items: center;
}
/* Membrete repetido por cambio de turno dentro del listado */
.historial-membrete--separador {
  margin-top: 0.3rem;
  background: transparent;
  border-left-color: var(--texto-claro);
}

/* Leyenda de apertura/cierre de turno como evidencia (spec
   registro-apertura-turno-historico) */
.turno-leyenda {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.4rem 0 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radio-pequeno);
  font-size: 0.85rem;
  border-left: 3px solid var(--acento);
}
.turno-leyenda svg { flex-shrink: 0; width: 16px; height: 16px; }
.turno-leyenda--inicio {
  background: var(--media-fondo);
  color: var(--primario-claro);
}
.turno-leyenda--cierre {
  background: var(--alta-fondo);
  color: var(--texto);
}
[data-tema="oscuro"] .turno-leyenda--inicio { background: rgba(46, 107, 184, 0.16); color: #dbe7f6; }
[data-tema="oscuro"] .turno-leyenda--cierre { background: rgba(192, 57, 43, 0.14); color: #f3d7d3; }

/* Traspaso de consignas pendientes aceptadas al abrir turno (visible en
   el historial del operador entrante — garantiza la recepción/lectura). */
.traspaso-item {
  margin: 0.4rem 0 0.5rem;
  padding: 0.55rem 0.7rem;
  background: var(--dorado-claro);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-pequeno);
}
[data-tema="oscuro"] .traspaso-item { background: rgba(201, 168, 76, 0.12); }
.traspaso-titulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--acento-oscuro);
}
[data-tema="oscuro"] .traspaso-titulo { color: var(--texto); }
.traspaso-titulo svg { width: 15px; height: 15px; flex-shrink: 0; }
.traspaso-lista {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  color: var(--texto);
}
.traspaso-lista li { margin-bottom: 0.15rem; }

/* Encabezado de la entrada: "Nueva entrada — fecha/hora" */
.entrada-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;         /* 6.4px (antes 8px) */
}
.entrada-titulo {
  font-family: var(--fuente-cuerpo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primario);
  letter-spacing: 0.2px;
}
[data-tema="oscuro"] .entrada-titulo { color: var(--texto); }
.entrada-autor {
  font-size: 0.85rem;
  color: var(--texto-suave);
}

/* Título de la bitácora: mayor peso visual que la metadata */
.bitacora-titulo {
  font-family: var(--fuente-cuerpo);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 0 0.3rem;
  color: var(--primario);
}
[data-tema="oscuro"] .bitacora-titulo { color: var(--texto); }

/* Enlaces de gestión secundarios (texto, no botones) */
.bitacora-meta-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 0.3rem;           /* 4.8px: encabezado→turno suma ≤16px */
}
.bitacora-meta-links a {
  color: var(--primario-claro);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}
.bitacora-meta-links a:hover { color: var(--acento-oscuro); text-decoration: underline; }
[data-tema="oscuro"] .bitacora-meta-links a { color: var(--acento-claro); }

/* Acciones de estado del turno: ÚNICOS botones grandes de acción.
   Máximo 2 colores (verde=activo/abrir, ámbar=cerrar) */
.turno-acciones {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 0.9rem;           /* sin margen superior: encabezado→turno ≤16px
                                   bottom 0.9rem: turno→editor = 14.4px */
}

/* Área de escritura: fondo tipo papel rayado, tipografía documento */
.cuaderno-area {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  border: 1px solid var(--borde);   /* borde sutil, no foco dorado */
  border-radius: var(--radio);
  padding: 0.7rem 0.9rem;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 32px;
  color: var(--texto);
  background-color: var(--superficie);
  background-image: repeating-linear-gradient(
    transparent,
    transparent 30px,
    rgba(15, 39, 68, 0.18) 30px,
    rgba(15, 39, 68, 0.18) 31px
  );
  caret-color: var(--primario);
}
[data-tema="oscuro"] .cuaderno-area {
  background-image: repeating-linear-gradient(
    transparent,
    transparent 30px,
    rgba(216, 222, 230, 0.30) 30px,
    rgba(216, 222, 230, 0.30) 31px
  );
}
/* LÍNEAS DOBLES EN DARK MODE — CORRECCIÓN:
   El textarea dentro del papel NO debe dibujar su propio rayado; el único
   rayado visible es el de .cuaderno-papel. Esta regla tiene especificidad
   (0,3,0) > [data-tema] .cuaderno-area (0,2,0) y se carga DESPUÉS,
   por lo que gana sin ambigüedad y anula el background-image reasignado. */
[data-tema="oscuro"] .cuaderno-papel .cuaderno-area {
  background-image: none;
  background-color: transparent;
}
.cuaderno-area::placeholder { color: var(--texto-claro); font-style: italic; }
/* Escritura solo con turno abierto: sin cursor de escritura, aspecto bloqueado */
.cuaderno-area:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  background-image: none;
}
[data-tema="oscuro"] .cuaderno-area:disabled { background-image: none; }
.boton--guardar:disabled,
.boton--peligro:disabled,
.adjuntar-label input[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Foco: sombra leve, sin contorno dorado grueso (no parece alerta) */
.cuaderno-area:focus {
  outline: none;
  border-color: var(--borde);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.15);
}
/* SIN doble borde en la unión "Nueva entrada → papel rayado": el textarea
   dentro del papel NO lleva borde propio (la "hoja" es .cuaderno-papel).
   Regla posterior a .cuaderno-area + mayor especificidad: gana siempre. */
.cuaderno-papel .cuaderno-area,
.cuaderno-papel .cuaderno-area:focus {
  border: none;
  box-shadow: none;
}

/* Chips de categoría (selector visible, sin popups) */
.chips {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0.45rem 0 0.4rem;     /* compacto (antes 0.6/0.8) */
}
.chip {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip:hover { border-color: var(--primario-claro); color: var(--primario); }
.chip--activo {
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
}
.chip--consigna.chip--activo { background: var(--cat-consigna); border-color: var(--cat-consigna); }
.chip--novedad.chip--activo { background: var(--cat-novedad); border-color: var(--cat-novedad); }
.chip--tarea.chip--activo { background: var(--cat-tarea); border-color: var(--cat-tarea); }
.chip--interrupcion.chip--activo { background: var(--cat-interrupcion); border-color: var(--cat-interrupcion); }
.chip--lectura.chip--activo { background: var(--cat-lectura); border-color: var(--cat-lectura); }

/* Botón Guardar discreto (acción de fila secundaria, compacto) */
.boton--guardar {
  background: var(--primario);
  padding: 0.375rem 0.875rem;    /* 6px 14px (antes 8.8px 22.4px) */
  font-size: 0.78rem;            /* 12.5px (antes 14.7px) */
  font-weight: 600;
}
.guardar-icono { width: 15px; height: 15px; }

/* Bloque blanco separado que contiene el botón Guardar.
   SIN border-top: el bloque anterior (.cuaderno-editor) ya provee la
   línea de separación; duplicarla crea la "línea doble" visible. */
.guardar-bloque {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.3rem;
  padding: 0.5rem 0.9rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-top: none;              /* sin doble línea con el editor */
  border-radius: var(--radio);
}
/* Selector de adjuntos (fotos/PDF/videos) en el cuaderno */
.adjuntar-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--texto-claro);
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border: 1px dashed var(--borde);
  border-radius: var(--radio-pequeno);
  margin-right: auto;
}
.adjuntar-label:hover { color: var(--primario-claro); border-color: var(--acento); }
.adjuntar-label svg { width: 15px; height: 15px; }
.adjuntar-label input[type="file"] { display: none; }
[data-tema="oscuro"] .adjuntar-label { color: var(--texto-claro); }
[data-tema="oscuro"] .guardar-bloque { background: var(--superficie-alt); }

/* Campos en línea por categoría (consigna: canal/prioridad/fecha límite) */
.campos-categoria {
  display: none;
  margin: 0.4rem 0 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  background: var(--superficie-alt);
}
.campos-categoria.visible { display: block; animation: aparecer 0.22s ease; }
@keyframes aparecer {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.campos-categoria .campo-fila {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.campos-categoria .campo-fila > div { flex: 1; min-width: 140px; }
.campos-categoria label { font-size: 0.8rem; font-weight: 600; color: var(--texto-suave); }
.campos-categoria input,
.campos-categoria select { margin: 0.2rem 0 0; padding: 0.45rem 0.6rem; font-size: 0.88rem; }

/* HISTORIAL — patrón TIMELINE/LISTA DE AUDITORÍA (experimento)
   Cada entrada es un bloque independiente (como fila de feed/actividad):
   fila superior de cabecera + texto en bloque + metadata de cierre.
   Sin cuadrícula rígida de 28px: el texto usa line-height cómodo y se
   ajusta naturalmente a cualquier longitud. Separador entre entradas:
   borde inferior sutil. */
.historial {
  margin-top: 0.6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
.historial-superior {
  background: var(--superficie);
  border-radius: var(--radio) var(--radio) 0 0;
  border-bottom: 1px solid var(--borde);   /* separa cabecera de la lista */
  padding: 0.4rem 1.1rem 0.3rem;
}
.historial-lista {
  padding: 0.3rem 1.1rem 0.8rem;
}
[data-tema="oscuro"] .historial-lista { background: var(--superficie); }
.historial-titulo {
  font-family: var(--fuente-cuerpo);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primario);
  padding-bottom: 0.15rem;
  margin-bottom: 0.25rem;
  letter-spacing: 1px;
}
[data-tema="oscuro"] .historial-titulo { color: var(--texto); }
/* Estado vacío: invitación, no pantalla rota. Ícono sutil + mensaje claro. */
.historial-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 130px;
  text-align: center;
  color: var(--texto-claro);
  font-style: normal;
  font-size: 0.95rem;
  padding: 1.5rem 1rem;
  margin: 0;
}
.historial-vacio svg {
  width: 34px;
  height: 34px;
  color: var(--acento);
  opacity: 0.45;
}
.historial-vacio p { margin: 0; }

/* --- Entrada como bloque de timeline --- */
.timeline-item {
  padding: 10px 0 8px;            /* compacto: registro denso de bitácora */
  border-bottom: 1px solid var(--borde);   /* único separador entre entradas */
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item--anulada { opacity: 0.75; }

/* Fila superior: folio + hora + badge de categoría + badges secundarios */
.timeline-cabecera {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 4px;
}
.timeline-folio {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--texto-claro);
  min-width: 46px;
  text-align: right;
}
.timeline-hora {
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--texto-claro);
}
.timeline-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;             /* badges secundarios a la derecha */
}

/* Texto principal + metadata: flujo de texto corrido (wrap natural)
   NOTA: white-space:pre-wrap SOLO en el cuerpo del texto, no en el
   contenedor — de lo contrario los saltos de línea reales del template
   (entre spans) se preservan y fuerzan la metadata a otra línea. */
.timeline-texto {
  font-family: var(--fuente-cuerpo);   /* sans-serif del sistema */
  font-size: 0.98rem;
  line-height: 1.5;              /* lectura cómoda, sin cuadrícula rígida */
  color: var(--texto);
  margin: 0;
  white-space: normal;           /* el contenedor NO preserva saltos */
}
.timeline-texto-cuerpo {
  display: inline;               /* el texto fluye con la metadata */
  white-space: pre-wrap;         /* SOLO aquí se preservan saltos internos */
  word-wrap: break-word;
}
/* Entrada anulada: texto tachado legible */
.historial-texto--anulada {
  text-decoration: line-through;
  text-decoration-color: var(--critica);
  text-decoration-thickness: 1.5px;
  color: var(--texto-suave);
}

/* Metadata INLINE tras el texto: wrap natural por ancho, nunca forzado */
.timeline-meta {
  display: inline;               /* flujo de texto corrido, no bloque */
  font-size: 0.72rem;
  color: var(--texto-claro);
  line-height: 1.5;
  white-space: normal;
}

/* Leer más para entradas largas (inline dentro del párrafo) */
.leer-mas {
  display: inline;
  background: none;
  border: none;
  color: var(--primario-claro);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.leer-mas:hover { color: var(--acento-oscuro); }
/* Texto largo: al colapsar pasa a inline-block para que max-height funcione */
.texto-colapsado { display: inline-block; max-height: 7.5em; overflow: hidden; vertical-align: top; }
/* Clip de adjuntos */
.clip-adjunto {
  background: none;
  border: none;
  color: var(--texto-claro);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0 0.2rem;
  vertical-align: middle;
}
.clip-adjunto:hover { color: var(--primario); }
.clip-adjunto svg { width: 15px; height: 15px; vertical-align: middle; }
.adjuntos-lista { margin: 0.3rem 0 0; padding: 0.4rem 0.6rem; background: var(--superficie-alt); border-radius: var(--radio-pequeno); }
.adjuntos-lista a { display: inline-block; margin-right: 0.6rem; }
.etiqueta-cat {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-right: 0.4rem;
}
.etiqueta-cat--consigna { background: var(--cat-consigna-fondo); color: var(--cat-consigna); }
.etiqueta-cat--novedad { background: var(--cat-novedad-fondo); color: var(--cat-novedad); }
.etiqueta-cat--tarea { background: var(--cat-tarea-fondo); color: var(--cat-tarea); }
.etiqueta-cat--interrupcion { background: var(--cat-interrupcion-fondo); color: var(--cat-interrupcion); }
.etiqueta-cat--lectura { background: var(--cat-lectura-fondo); color: var(--cat-lectura); }
/* Aviso de lectura obligatoria emitido por supervisor/jefe: acento distintivo */
.etiqueta-cat.etiqueta-gestion {
  background: var(--gestion);
  color: #fff;
  box-shadow: 0 0 0 2px var(--gestion);
}
[data-tema="oscuro"] .etiqueta-cat.etiqueta-gestion { background: #0e5a6e; color: #e3f4f8; }
/* BADGES DE CATEGORÍA EN DARK MODE — HEX EXPLÍCITOS (WCAG AA)
   Reglas posteriores Y de mayor especificidad (0,2,0) que la base
   (0,1,0): siempre ganan en [data-tema="oscuro"]. Valores fijos hex,
   no variables, para no depender de la resolución del tema.
   Ratios: consigna 8.56 · novedad 8.78 · tarea 7.71 · interrupción 8.58 · lectura 8.91 */
[data-tema="oscuro"] .etiqueta-cat--consigna { background: #1e3a5f; color: #cfe0f5; }
[data-tema="oscuro"] .etiqueta-cat--novedad { background: #4a3c16; color: #f5e8b8; }
[data-tema="oscuro"] .etiqueta-cat--tarea { background: #1c3a63; color: #bfd6f5; }
[data-tema="oscuro"] .etiqueta-cat--interrupcion { background: #5c2019; color: #f6ccc6; }
[data-tema="oscuro"] .etiqueta-cat--lectura { background: #1e4029; color: #c3ecd0; }

/* Trazabilidad: badges de cambio/anulación */
.badge--cambio {
  background: var(--navy-claro);
  color: var(--primario-claro);
  border: none;
  cursor: pointer;
  font-family: var(--fuente-cuerpo);
}
.badge--cambio:hover { background: var(--navy-claro-2); }
.badge--anulada {
  background: var(--critica-fondo);
  color: var(--critica);
}
/* Acordeón de cambios */
.cambios-accordion {
  margin: 0.5rem 0 0.4rem;
  padding: 0.6rem 0.8rem;
  background: var(--superficie-alt);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-pequeno);
}
.cambio-row { font-size: 0.82rem; color: var(--texto-suave); margin-bottom: 0.5rem; }
.cambio-bloque { font-size: 0.8rem; margin-top: 0.3rem; }
/* Entrada editada: etiquetas propias en su línea, tachado separado del
   texto vigente para que no se confunda con el mensaje actual. */
.cambio-etiqueta {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.4px;
  margin-right: 0.4rem;
}
.cambio-bloque--anterior {
  padding: 0.25rem 0.5rem;
  background: var(--critica-fondo);
  border-radius: var(--radio-pequeno);
  margin-top: 0.4rem;
}
.cambio-anterior { text-decoration: line-through; color: var(--critica); }
.cambio-nuevo { color: var(--exito); font-weight: 600; }
/* Acciones de auditoría por entrada: iconos discretos SOLO al hover.
   Aparecen a la derecha de la línea, gris, se oscurecen al pasar el mouse.
   Son herramienta secundaria — no acciones principales de la pantalla. */
.historial-acciones {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  margin-left: auto;             /* dentro de .timeline-cabecera (flex) */
}
.timeline-cabecera:hover .historial-acciones,
.timeline-cabecera:focus-within .historial-acciones {
  opacity: 1;
}
.accion-entrada {
  background: none;
  border: none;
  color: var(--texto-claro);
  padding: 0.2rem;
  cursor: pointer;
  border-radius: var(--radio-pequeno);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.accion-entrada svg { width: 15px; height: 15px; }
.accion-entrada:hover { color: var(--primario-claro); background: var(--navy-claro); }
.accion-entrada--anular:hover { color: var(--critica); background: var(--critica-fondo); }
/* Diálogos de edición/anulación */
.dialogo {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 200;
}
/* CRÍTICO: el atributo hidden debe tener prioridad sobre display:flex,
   de lo contrario el diálogo queda siempre visible y bloquea la app. */
.dialogo[hidden] { display: none; }
.dialogo form {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--acento);
  border-radius: var(--radio);
  padding: 1.25rem 1.4rem;
  width: min(520px, 92vw);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.dialogo h3 { margin-top: 0; }

/* Barra de enlaces de la bitácora (discreta, no grid de botones) */
.bitacora-links {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 1.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--borde);
}
.bitacora-links a {
  color: var(--primario-claro);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.bitacora-links a:hover { color: var(--acento-oscuro); text-decoration: underline; }

/* ============================================================
   RESPONSIVE (spec 13.1 / 13.6) — PC y celular
   ============================================================ */
@media (max-width: 768px) {
  .navbar { flex-wrap: wrap; padding: 0.6rem 0.9rem; }
  .navbar .nav-links { order: 3; width: 100%; display: flex; overflow-x: auto; padding-top: 0.4rem; }
  .navbar .nav-links a { margin-left: 0; margin-right: 0.8rem; white-space: nowrap; }
  .contenido { padding: 0 0.75rem; margin-top: 1rem; }
  .tabla { font-size: 0.8rem; }
  h1 { font-size: 1.5rem; }
  /* Gráficos: apilados verticalmente en pantallas chicas (prioriza lectura) */
  .graficos-grid { grid-template-columns: 1fr; }
  .graficos-grid .grafico-bloque--ancho { grid-column: auto; }
  .grafico-svg { height: 300px; }
  .grafico-svg--alto { height: 320px; }
}

/* ============================================================
   GRÁFICOS DE ESTADÍSTICAS (SVG server-side, paleta existente)
   ============================================================ */
.graficos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* dona (media columna) + espacio */
  gap: 1.2rem;
  margin-top: 1.6rem;
}
/* Los gráficos de ancho completo ocupan su propia fila */
.graficos-grid .grafico-bloque--ancho {
  grid-column: 1 / -1;
}
.grafico-bloque {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--acento);       /* acento dorado, como tarjetas */
  border-radius: var(--radio);
  padding: 1.1rem 1.3rem 1.1rem;             /* aire lateral/inferior: las
                                                etiquetas nunca rozan el borde */
  box-shadow: var(--sombra);
}
.grafico-titulo {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  color: var(--primario);
  font-weight: 700;
  letter-spacing: 0.01em;
}
[data-tema="oscuro"] .grafico-titulo { color: var(--texto); }
/* El texto de los SVG (etiquetas de ejes, valores, leyenda) usa el color
   secundario del sistema: gris azulado oscuro en tema claro, claro en
   oscuro — consistente en los tres gráficos. */
.grafico-svg {
  color: var(--texto-suave);
}
/* Altura FIJA controlada (no height:auto): un SVG a ancho completo con
   height:auto calcula su alto por el ratio del viewBox y crece sin tope
   (desborde). Con height fija + preserveAspectRatio="xMidYMid meet" el
   contenido se reescala para caber completo, centrado, sin cortarse. */
.grafico-svg {
  width: 100%;
  height: 320px;          /* dona (media columna) */
  display: block;
}
.grafico-svg--alto {
  height: 380px;          /* ancho completo: barras y tendencia (350-400px) */
}

/* ============================================================
   CARGAR MÁS (historial web limitado a 30 entradas)
   ============================================================ */
.cargar-mas {
  display: block;
  width: 100%;
  margin: 1rem 0 0.4rem;
  padding: 0.6rem;
  background: var(--media-fondo);
  border: 1px dashed var(--acento);
  border-radius: 8px;
  color: var(--primario-claro);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: center;
}
.cargar-mas:hover {
  background: var(--alta-fondo);
  color: var(--acento-oscuro);
}
.cargar-mas:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Progreso del historial: "Mostrando X de Y eventos" y salto al inicio */
.historial-progreso {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--texto-suave, #5f6b7a);
  text-align: center;
}
.historial-salto {
  margin: 0.35rem 0 0;
  text-align: center;
}
.historial-salto a {
  color: var(--primario-claro);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.historial-salto a:hover {
  color: var(--acento-oscuro);
}

/* Gestión de bitácoras: desactivar / eliminar (spec bitacoras) */
.enlace-boton {
  background: none;
  border: none;
  padding: 0;
  color: var(--primario);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
/* Un <button type="submit" class="enlace-boton"> (Desactivar/Reactivar) NO debe
   heredar el estilo sólido de button[type="submit"]: es un enlace de gestión
   secundario más. Especificidad equivalente + orden posterior → gana. */
button.enlace-boton,
button.enlace-advertencia {
  display: inline-block;
  gap: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: underline;
}
/* Color base explícito en CLARO (evita heredar el blanco de
   button[type="submit"], que dejaría el texto invisible) */
button.enlace-boton { color: var(--primario); }
button.enlace-advertencia { color: var(--alta-oscuro, #8a6d1f); }
button.enlace-boton:hover { color: var(--primario-claro); background: none; text-decoration: underline; }
/* Hover en claro MANTIENE el ámbar oscuro (#8A6D1F, 4.9:1 sobre blanco):
   aclararlo a --alta daría 2.16:1 (ilegible). El subrayado indica hover. */
button.enlace-advertencia:hover { color: var(--alta-oscuro, #8a6d1f); background: none; text-decoration: underline; }
.enlace-boton:hover { color: var(--primario-claro); }
[data-tema="oscuro"] .enlace-boton { color: var(--acento-claro); }
[data-tema="oscuro"] button.enlace-boton { color: var(--acento-claro); }
[data-tema="oscuro"] button.enlace-boton:hover { color: #fff; background: none; }

/* Acción de cambio de estado (p. ej. Desactivar): texto ámbar de
   advertencia, NUNCA botón sólido — paleta de estados del sistema. */
.enlace-advertencia { color: var(--alta-oscuro, #8a6d1f); }
.enlace-advertencia:hover { color: var(--alta-oscuro, #8a6d1f); text-decoration: underline; }
[data-tema="oscuro"] .enlace-advertencia { color: var(--cat-novedad, #E8D29F); }
[data-tema="oscuro"] button.enlace-advertencia { color: var(--cat-novedad, #E8D29F); }
[data-tema="oscuro"] button.enlace-advertencia:hover { color: #fff; background: none; }

.enlace-peligro { color: var(--critica); }
.enlace-peligro:hover { color: var(--critica); opacity: .85; }
/* En oscuro el rojo --critica (2.66:1 sobre fondo oscuro) es ilegible; se usa
   un rojo claro AA (mismo tono que celda-alerta). Va después de
   .enlace-peligro:hover (misma especificidad) y supera a
   [data-tema="oscuro"] a (0-1-1). */
[data-tema="oscuro"] .enlace-peligro,
[data-tema="oscuro"] .enlace-peligro:hover { color: #F6B4AC; opacity: 1; }
.tarjeta--peligro { border-top-color: var(--critica); }

/* Corrector ortográfico (spec apariencia): overlay + sugerencias */
.corrector-overlay {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  /* Texto transparente: el overlay SOLO aporta los subrayados ondulados;
     nunca dibuja letras duplicadas sobre el textarea (evita el efecto de
     letras "montadas"/sobrescritas por mínima desalineación). */
  color: transparent !important;
  background: transparent;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  resize: none;
}
.corrector-error {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: underline wavy var(--critica) 2px;
  text-underline-offset: 3px;
  border-radius: 2px;
}
.corrector-error:hover, .corrector-activa {
  background: var(--critica-fondo);
}
.corrector-popover {
  position: fixed;
  z-index: 30;
  min-width: 180px;
  max-width: 280px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  padding: 6px;
  font-size: .875rem;
}
.corrector-popover-titulo {
  padding: 4px 8px;
  font-weight: 600;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.corrector-popover-opcion {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--texto);
  font: inherit;
}
.corrector-popover-opcion:hover { background: var(--superficie-alt); }
.corrector-popover-vacio {
  padding: 6px 8px;
  color: var(--texto-suave);
  font-style: italic;
}
.corrector-popover-ignorar {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--borde);
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--texto-suave);
  font: inherit;
}
.corrector-popover-ignorar:hover { color: var(--critica); }

/* ============================================================
   TABLERO DE TRABAJO (spec 15.8)
   Jerarquía clara por rol: secciones "Resumen" y "Acciones";
   la tarjeta primaria (dorada) destaca la acción central del rol
   y los accesos secundarios llevan flecha de navegación.
   ============================================================ */
.tablero-encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.tablero-titulo { margin-bottom: 0.25rem; }
.tablero-rol {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--navy-claro);
  color: var(--primario);
  border: 1px solid var(--borde);
  white-space: nowrap;
}
[data-tema="oscuro"] .tablero-rol { color: var(--acento-claro); }
.tablero-seccion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  margin: 0 0 0.9rem;
}
.tablero-seccion::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);
}

/* --- Accesos rápidos: tarjeta con ícono, jerarquía y flecha --- */
.acceso {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--primario);
  border-radius: var(--radio);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--sombra);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.acceso:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}
.acceso--primario {
  border-top-color: var(--acento);
  background: linear-gradient(180deg, var(--dorado-claro) 0%, var(--superficie) 55%);
}
[data-tema="oscuro"] .acceso--primario {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.12) 0%, var(--superficie) 55%);
}
.acceso-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.acceso-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radio);
  background: var(--navy-claro);
  color: var(--primario);
}
.acceso-icono svg { width: 24px; height: 24px; }
.acceso-icono--dorado { background: var(--dorado-claro); color: var(--acento-oscuro); }
.acceso-icono--verde { background: var(--exito-fondo); color: var(--exito); }
[data-tema="oscuro"] .acceso-icono { color: var(--acento-claro); }
[data-tema="oscuro"] .acceso-icono--dorado { color: var(--acento-claro); }
.acceso-tag {
  font-size: 0.68rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--acento-oscuro);
  background: var(--dorado-claro);
  border: 1px solid rgba(201, 168, 76, 0.4);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
[data-tema="oscuro"] .acceso-tag { color: var(--acento-claro); }
.acceso-titulo {
  font-size: 1.15rem;
  margin: 0;
}
.acceso .texto-suave { flex: 1; }
.acceso-flecha { display: inline-block; transition: transform 0.15s ease; }
.acceso:hover .acceso-flecha { transform: translateX(3px); }