/* ============================================================
   GreenBox · Gestión Documental — Identidad visual
   Paleta alineada con controlproduccion.greenbox.pe: verde de marca
  #00A65A, sidebar oscuro #222D32, fondo de contenido gris azulado
   claro. Tipografía: Space Grotesk (títulos) + Inter (UI/datos).
   ============================================================ */

:root {
  --gb-forest:      #00A65A; /* verde de marca (botones, acentos, activos) */
  --gb-forest-2:    #008D4D; /* verde de marca, tono hover/oscuro */
  --gb-moss:        #3BC17A; /* verde secundario, tono medio */
  --gb-sand:        #ECF0F5; /* fondo general de contenido */
  --gb-sand-deep:   #E4E7EC; /* fondo secundario / botones outline */
  --gb-card:        #FFFFFF;
  --gb-ink:         #333333;
  --gb-ink-soft:    #767676;
  --gb-line:        #E3E7ED;

  --gb-sidebar:        #222D32; /* fondo de la barra lateral */
  --gb-sidebar-active: #1E282C; /* fondo del ítem de menú activo */
  --gb-sidebar-text:   #B8C7CE; /* texto de menú no activo */

  --estado-borrador-bg: #ECE9DF; --estado-borrador-fg: #5B5748;
  --estado-ambar-bg:    #F6E3C8; --estado-ambar-fg:    #8A5A16;
  --estado-verde-bg:    #DEF5E9; --estado-verde-fg:    #00723C;
  --estado-slate-bg:    #E4E7E9; --estado-slate-fg:    #4B5559;
  --estado-rojo-bg:     #F4DCD5; --estado-rojo-fg:     #8C3A22;

  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(34, 45, 50, 0.06), 0 6px 20px rgba(34, 45, 50, 0.05);

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--gb-sand);
  color: var(--gb-ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  /* Red de seguridad para pantallas angostas: si algo (una tabla ancha,
     un formulario en una sola línea, etc.) no cupiera en el ancho
     disponible, que haga scroll horizontal solo esa pieza (ver overflow-x
     en .card más abajo) y nunca la página completa de lado a lado. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 .4em;
  color: #444444;
  letter-spacing: -0.01em;
}

a { color: var(--gb-forest-2); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid #7FD9AE;
  outline-offset: 2px;
}

/* ---------- App shell (sidebar + contenido) ---------- */
/* El menú lateral debe quedarse siempre visible, incluso con listas largas
   (ej. "Documentos de otras áreas" con 40+ filas): en vez de que la página
   entera haga scroll (lo que antes hacía que la sidebar, al no caber en la
   ventana, se "subiera" y desapareciera de la vista), el panel completo
   ocupa exactamente el alto de la ventana y cada mitad (sidebar / contenido)
   hace su propio scroll vertical de forma independiente. */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--gb-sidebar);
  color: var(--gb-sidebar-text);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.4rem 1.3rem 1.1rem;
}
.brand-mark {
  width: 40px; height: 40px;
  object-fit: contain;
  border-radius: 9px;
  flex-shrink: 0;
}
.brand-text strong { display: block; font-family: var(--font-display); font-size: 1.02rem; color: #fff; }
.brand-text small { opacity: .65; font-size: .74rem; }

.sidebar-nav { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .8rem; flex: 1; }
.sidebar-nav a {
  color: var(--gb-sidebar-text);
  padding: .62rem .8rem;
  border-radius: 8px;
  font-size: .89rem;
  font-weight: 500;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.sidebar-nav a.activo {
  background: var(--gb-sidebar-active);
  color: #fff;
  border-left: 3px solid var(--gb-forest);
  padding-left: calc(.8rem - 3px);
}

.sidebar-footer { padding: 1rem .8rem 1.2rem; border-top: 1px solid rgba(255,255,255,.1); }
.user-chip { display: flex; align-items: center; gap: .6rem; padding: .4rem .2rem .8rem; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gb-forest); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-display); flex-shrink: 0;
}
.user-info strong { display: block; font-size: .85rem; color: #fff; }
.user-info small { font-size: .72rem; color: var(--gb-sidebar-text); }
.link-salir { font-size: .82rem; color: var(--gb-sidebar-text); }

.main-content { flex: 1; min-width: 0; height: 100%; overflow-y: auto; }
.topbar {
  padding: 1.6rem 2.2rem 1.2rem;
  border-bottom: 1px solid var(--gb-line);
  background: var(--gb-sand);
}
/* Antes el contenido se topaba en 1180px (pensado para lectura) y en
   pantallas más anchas quedaba una franja vacía grande a la derecha, sobre
   todo notoria en tablas (Documentos, Contratos, Reportes). Se amplía el
   ancho máximo por defecto para aprovechar mejor pantallas comunes
   (1366px en adelante), manteniendo un tope razonable para no estirar
   demasiado el texto en monitores ultra anchos. */
.content-area { padding: 1.6rem 2.2rem 3rem; max-width: 1800px; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 20% 15%, #2C3A40 0%, #222D32 55%, #171F23 100%);
  padding: 1.5rem;
}
.login-card {
  background: var(--gb-card);
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-lg);
  padding: 2.2rem 2rem 1.8rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.login-brand { text-align: center; margin-bottom: 1.6rem; }
.login-logo { max-width: 220px; width: 100%; height: auto; display: block; margin: 0 auto .6rem; }
.login-brand small { color: var(--gb-ink-soft); font-size: .78rem; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .65rem 1rem;
  border: 1.5px solid var(--gb-line); border-radius: 8px;
  background: #fff; color: var(--gb-ink);
  font-weight: 600; font-size: .9rem; font-family: var(--font-body);
  margin-bottom: 1.1rem;
}
.btn-google:hover { background: var(--gb-sand); text-decoration: none; border-color: #C9CFD6; }
.separador-o {
  display: flex; align-items: center; gap: .8rem;
  color: var(--gb-ink-soft); font-size: .76rem;
  margin-bottom: 1.1rem;
}
.separador-o::before, .separador-o::after { content: ''; flex: 1; height: 1px; background: var(--gb-line); }

/* ---------- Formularios ---------- */
label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; color: var(--gb-ink); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date],
select, textarea {
  width: 100%;
  padding: .65rem .8rem;
  border: 1.5px solid var(--gb-line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .92rem;
  background: #fff;
  color: var(--gb-ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--gb-moss); outline: none; box-shadow: 0 0 0 3px rgba(59,193,122,.18); }
.campo { margin-bottom: 1rem; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* El ícono de calendario de input[type=date] es del navegador (no se puede
   rediseñar por completo con CSS), pero sí se puede teñir para que combine
   con el verde de marca en vez del gris/negro por defecto. Solo funciona en
   navegadores basados en Chromium/WebKit (Chrome, Edge, Safari); en Firefox
   se queda con su propio ícono, sin romper nada. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(46%) sepia(85%) saturate(478%) hue-rotate(93deg) brightness(94%) contrast(93%);
  cursor: pointer;
}

/* Formularios de una sola fila (ej: "Nuevo tipo de documento", los enlaces
   de Drive por área, filas de renombrar en Tipos de documento/Usuarios):
   usan <form style="display:flex; ...">. Sin esta regla, un input de texto
   con width:100% dentro de un contenedor flex no crece de forma confiable
   junto al botón — se termina viendo angosto y recortado. Se aplica a
   cualquier input de texto/fecha dentro de un <form> con "flex" en su
   estilo en línea, sin importar si está envuelto en un <div class="campo">
   o no, para cubrir los dos patrones que usa el proyecto. */
form[style*="flex"] input[type="text"],
form[style*="flex"] input[type="email"],
form[style*="flex"] input[type="search"],
form[style*="flex"] input[type="date"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
/* El botón (ej. "Agregar", "Guardar") no debe pelear el espacio con el
   campo de texto: .btn-primario trae width:100% pensado para botones de
   ancho completo (ej. el de login), lo cual dentro de estas filas hace que
   el botón se coma casi todo el ancho y el campo de texto quede exprimido.
   Aquí se resetea a su tamaño natural (el del texto del botón), solo
   dentro de estos formularios de una fila. */
form[style*="flex"] .btn {
  width: auto;
  flex: 0 0 auto;
}

/* Par de fechas (ej. Vigencia Desde/Hasta en Reportes): mismo look que un
   .campo normal, pero agrupa los dos inputs en un solo bloque flex para que
   nunca se separen en líneas distintas dentro de un formulario .filtros con
   flex-wrap. */
.filtros .campo-rango-fechas { min-width: 300px; }
.rango-fechas { display: flex; align-items: center; gap: .5rem; }
.rango-fechas input[type="date"] { min-width: 0; flex: 1 1 auto; }
.rango-fechas span { color: var(--gb-ink-soft); font-size: .85rem; }

/* Botones de exportación (Reportes): mismo estilo entre sí y siempre en una
   sola línea. */
.acciones-exportar { display: flex; gap: .6rem; flex-wrap: nowrap; }
.acciones-exportar .btn { width: auto; white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .88rem;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primario { background: var(--gb-forest); color: #fff; width: 100%; }
.btn-primario:hover { background: var(--gb-forest-2); }
.btn-secundario { background: var(--gb-sand-deep); color: var(--gb-ink); }
.btn-secundario:hover { background: #D5D9E0; }
/* Antes usaba el mismo tono que el fondo general (var(--gb-sand)) con un
   borde muy claro, así que sobre el fondo de la página (ej. "Limpiar" y
   "Reportes" en los filtros de Documentos, que no están dentro de una
   tarjeta blanca) quedaba casi invisible. Fondo blanco + borde más oscuro
   se distingue en cualquier fondo, tanto sobre la página como sobre una
   tarjeta blanca (el borde sigue siendo la referencia visual ahí). */
.btn-outline { background: var(--gb-card); border: 1.5px solid var(--gb-ink-soft); color: var(--gb-ink); }
.btn-outline:hover { background: var(--gb-sand-deep); border-color: var(--gb-ink); }
.btn-peligro { background: var(--estado-rojo-fg); color: #fff; }
.btn-sm { padding: .4rem .75rem; font-size: .8rem; }

.alerta { padding: .75rem 1rem; border-radius: 8px; font-size: .85rem; margin-bottom: 1rem; }
.alerta-error { background: var(--estado-rojo-bg); color: var(--estado-rojo-fg); }
.alerta-exito { background: var(--estado-verde-bg); color: var(--estado-verde-fg); }
.alerta-info { background: var(--estado-slate-bg); color: var(--estado-slate-fg); }

/* ---------- Tarjetas / paneles ---------- */
.card {
  background: var(--gb-card);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--gb-line);
  margin-bottom: 1.3rem;
  /* Responsive: varias tarjetas del sistema (Documentos, Contratos,
     Reportes, Inicio, Áreas, Auditoría...) traen tablas con varias
     columnas que en pantallas angostas no entran en el ancho disponible.
     En vez de dejar que la página entera se corra hacia los lados (mala
     experiencia: se pierde el menú, hay que hacer scroll horizontal de
     todo), la tarjeta misma hace scroll horizontal y el resto de la
     página se queda quieta. Sin efecto visible cuando el contenido sí
     entra (no aparece ninguna barra). */
  overflow-x: auto;
}
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.stat-card { background: var(--gb-card); border-radius: var(--radius-md); padding: 1.1rem 1.2rem; border: 1px solid var(--gb-line); }
.stat-card .num { font-family: var(--font-display); font-size: 1.9rem; color: var(--gb-forest-2); font-weight: 700; }
.stat-card .lbl { font-size: .78rem; color: var(--gb-ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.stat-card-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.stat-card-link:hover { text-decoration: none; border-color: var(--gb-moss); box-shadow: 0 0 0 3px rgba(59,193,122,.14); }

/* ---------- Badges de estado ---------- */
.badge {
  display: inline-block;
  padding: .22rem .62rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.badge-gris  { background: var(--estado-borrador-bg); color: var(--estado-borrador-fg); }
.badge-ambar { background: var(--estado-ambar-bg); color: var(--estado-ambar-fg); }
.badge-verde { background: var(--estado-verde-bg); color: var(--estado-verde-fg); }
.badge-slate { background: var(--estado-slate-bg); color: var(--estado-slate-fg); }
.badge-rojo  { background: var(--estado-rojo-bg); color: var(--estado-rojo-fg); }

/* ---------- Rastreador de ciclo de vida (elemento distintivo) ---------- */
.ciclo {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 1rem 0 1.4rem;
}
.ciclo-paso {
  flex: 1;
  text-align: center;
  padding: .55rem .4rem;
  border-radius: 8px;
  background: var(--gb-sand-deep);
  color: var(--gb-ink-soft);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  position: relative;
}
.ciclo-paso.completo { background: var(--gb-moss); color: #fff; }
.ciclo-paso.actual { background: var(--gb-forest); color: #fff; box-shadow: 0 0 0 3px rgba(0,166,90,.18); }

/* ---------- Tablas ---------- */
/* Filas más compactas (menos alto por fila, más filas visibles sin
   scroll): se reduce el padding vertical de th/td. El padding horizontal
   se mantiene para no apretar el texto contra los bordes de cada celda. */
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gb-ink-soft);
  padding: .4rem .7rem;
  border-bottom: 2px solid var(--gb-line);
}
td { padding: .45rem .7rem; border-bottom: 1px solid var(--gb-line); vertical-align: middle; }
tr:hover td { background: #F4F6F9; }

/* Cabeceras ordenables (ver .tabla-ordenable en app.js): Documentos,
   Contratos y Reportes. Flechita tenue en las columnas que se pueden
   ordenar; se resalta en verde de marca en la columna por la que está
   ordenado actualmente. */
.tabla-ordenable th.th-ordenable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.4rem;
}
.tabla-ordenable th.th-ordenable:hover { color: var(--gb-ink); }
.tabla-ordenable th.th-ordenable::after {
  content: '\21C5';
  position: absolute;
  right: .45rem;
  opacity: .35;
  font-size: .95em;
}
.tabla-ordenable th.th-ordenable.th-asc::after { content: '\2191'; opacity: 1; color: var(--gb-forest-2); }
.tabla-ordenable th.th-ordenable.th-desc::after { content: '\2193'; opacity: 1; color: var(--gb-forest-2); }

.filtros { display: flex; gap: .8rem; margin-bottom: 1.2rem; flex-wrap: wrap; align-items: end; }
.filtros .campo { margin-bottom: 0; min-width: 160px; }

/* Tablas con varios <select> por fila (ej. Usuarios): con 100% de ancho
   forzado por defecto (ver input/select arriba), estas columnas se
   aplastan entre sí y el texto seleccionado queda cortado ("Gerenc",
   "Activ"). Se les da un ancho mínimo razonable y, si aun así no entran
   en el ancho disponible, la tabla hace scroll horizontal en vez de
   comprimir las columnas. */
.tabla-scroll { overflow-x: auto; }
.tabla-scroll table { min-width: 820px; }
.tabla-scroll select { width: auto; min-width: 110px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-scroll td:last-child { white-space: nowrap; }

/* Documentos, Contratos y Reportes (tablas "tabla-ordenable" con varias
   columnas de texto/badges/enlaces, sin envoltorio .tabla-scroll propio):
   mismo criterio que Usuarios arriba — un ancho mínimo razonable hace que
   en pantallas angostas la tarjeta que las contiene (ver overflow-x en
   .card) ofrezca scroll horizontal con las columnas intactas, en vez de
   apachurrar el texto de cada celda hasta hacerlo ilegible. */
table.tabla-ordenable { min-width: 720px; }

/* Variante para tablas largas (ej. Usuarios): antes, la barra de scroll
   horizontal quedaba pegada al final de la tabla completa, así que con
   muchas filas había que bajar toda la página para encontrarla y, al
   volver a subir, se perdía de vista la fila en la que se estaba. Con un
   alto máximo y scroll vertical propio (con cabecera fija), la barra
   horizontal queda siempre a la vista dentro de ese recuadro, sin
   necesidad de mover la página. */
.tabla-scroll-alta { max-height: 70vh; overflow-y: auto; }
.tabla-scroll-alta thead th { position: sticky; top: 0; background: var(--gb-card); z-index: 1; }

/* Usuarios: la tabla tiene varios <select> anchos (Área, Nivel, Gerencia,
   Estado) además de Nombre/Correo. Ya no necesita un máximo propio: el
   máximo general de .content-area (arriba) quedó más ancho que este valor
   anterior, así que esta regla queda solo como referencia por si alguna
   página necesitara en el futuro un tope distinto al general. Ver la clase
   por página que arma includes/layout_top.php. */
.content-area-usuarios { max-width: 1800px; }

.vacio { text-align: center; padding: 3rem 1rem; color: var(--gb-ink-soft); }
.vacio strong { display: block; color: var(--gb-ink); font-family: var(--font-display); margin-bottom: .3rem; }

.area-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.area-item {
  background: var(--gb-card); border: 1px solid var(--gb-line); border-radius: var(--radius-md);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem;
}
.area-item h4 { margin: 0; font-size: .95rem; }
.area-item .drive-link { font-size: .82rem; display: inline-flex; align-items: center; gap: .3rem; }

.texto-muted { color: var(--gb-ink-soft); font-size: .85rem; }

@media (max-width: 900px) {
  .sidebar { position: fixed; left: -260px; transition: left .2s; z-index: 20; }
  .sidebar.abierto { left: 0; }
  .content-area, .topbar { padding-left: 1.1rem; padding-right: 1.1rem; }
  .fila-campos { grid-template-columns: 1fr; }
}

/* ---------- Tarjetas de documentos por área (Inicio, Gerencia/Dirección) ---------- */
/* Grilla de tarjetas (una por área) para la sección "Documentos por área"
   del panel de Inicio. Fondo claro (var(--gb-card)), igual que el resto de
   tarjetas/.stat-card de la página — el fondo oscuro probado en rondas
   anteriores no combinaba con el resto del panel, de fondo claro. Paleta
   sobria para una vista de Gerencia/Dirección: un solo color de acento
   (gris oscuro de la barra lateral, var(--gb-sidebar), en el total y el
   borde izquierdo — antes era verde de marca; se cambió para que se vea
   aún menos "colorido") y el resto en gris neutro; los tres contadores
   (Documentos/Contratos/Confidenciales) usan el mismo color de número — no
   verde/ámbar/rojo — porque son tres categorías neutras, no un semáforo de
   estado. Ya no lleva una barra de progreso (se quitó: el % que mostraba no
   correspondía a ninguna meta definida por área, podía confundirse con un
   indicador de avance real). */
.area-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.area-card {
  background: var(--gb-card);
  border: 1px solid var(--gb-line);
  border-left: 3px solid var(--gb-sidebar);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.area-card:hover { border-color: var(--gb-moss); border-left-color: var(--gb-sidebar); box-shadow: 0 6px 18px rgba(34,45,50,.1); transform: translateY(-2px); }
.area-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .7rem; }
.area-card-top h4 { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--gb-ink); }
.area-card-total { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--gb-sidebar); flex-shrink: 0; line-height: 1; }
/* min-width:0 es necesario para que los 3 contadores puedan achicarse de
   verdad: por defecto un flex item no se encoge más abajo del ancho de su
   contenido, y la etiqueta "CONFIDENCIALES" (la más larga) empujaba el
   recuadro fuera de la tarjeta en tarjetas angostas. word-break da una
   salida de emergencia (pasar a 2 líneas) si aun así no entra. */
.area-card-stats { display: flex; gap: .4rem; margin: 0 0 .8rem; }
.area-card-stat { flex: 1; min-width: 0; text-align: center; border-radius: 8px; padding: .5rem .2rem; background: var(--gb-sand); }
.area-card-stat strong { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--gb-ink); }
.area-card-stat span { display: block; font-size: .6rem; color: var(--gb-ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; word-break: break-word; margin-top: .2rem; }
.area-card-detalle-btn { width: 100%; }
.area-card-detalle { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--gb-line); }
.area-card-chip { font-size: .78rem; color: var(--gb-ink-soft); }
.area-card-chip strong { color: var(--gb-ink); }

/* ---------- Resumen de la Cola de revisión (revision.php) ---------- */
/* El resumen de arriba de la tabla (total general + una tarjeta por área
   con pendientes) reutiliza tal cual el mismo .grid-cards/.stat-card(-link)
   que ya usa Inicio para sus tarjetas de arriba — mismo formato en todo el
   sistema, en vez de un diseño aparte solo para esta página. Lo único
   nuevo aquí es .stat-card-activa, para marcar cuál de esas tarjetas es el
   filtro de área actualmente aplicado (revision.php?area_id=N) — útil en
   cualquier vista con tarjetas-enlace que dupliquen como filtro, no solo
   en Cola de revisión. Mismo acento sobrio var(--gb-sidebar) de siempre,
   en vez de otro color. */
.stat-card-activa { border-color: var(--gb-sidebar); box-shadow: 0 0 0 2px rgba(34,45,50,.14); }