/*
 * Portal de accesos y pantalla de ingreso.
 *
 * Va en archivo aparte y no al final de app.css porque app.css ya pasa las 870
 * líneas y mezcla estilos de todos los módulos: separar lo del portal permite
 * cargarlo sólo donde se usa (layouts/portal.php y layouts/blank.php).
 *
 * Todo se apoya en los tokens de design-system.css. Sin colores sueltos, salvo
 * los tres tonos ámbar de la marca "acceso acotado", que no existen como token.
 */

/* Utilidad que faltaba: etiqueta visible sólo para lectores de pantalla. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   1. CABECERA DEL PORTAL
   ========================================================================== */

body.is-portal { background: var(--color-background); }

.portal-top { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.portal-top__inner {
  max-width: 1120px; margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex; align-items: center; gap: var(--space-4);
}
.portal-top__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.portal-top__brand b     { display: block; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; }
.portal-top__brand small { display: block; font-size: var(--text-xs); color: var(--color-muted-fg); }

.portal-top__user  { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.portal-top__datos { text-align: right; line-height: 1.35; }
.portal-top__datos b     { display: block; font-size: var(--text-sm); font-weight: 600; }
.portal-top__datos small { display: block; font-size: var(--text-xs); color: var(--color-muted-fg); }
.portal-top__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
}

/* ==========================================================================
   2. LIENZO Y AGRUPACIONES
   ========================================================================== */

.portal-lienzo { max-width: 1120px; margin: 0 auto; padding: var(--space-10) var(--space-6) var(--space-16); }

.portal-saludo h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); margin: 0; }
.portal-saludo p  { color: var(--color-muted-fg); margin-top: var(--space-2); max-width: 66ch; }

.portal-buscador { margin-top: var(--space-5); max-width: 360px; }
.portal-buscador input {
  width: 100%; min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-base);
  background: var(--color-surface); color: var(--color-foreground);
}
.portal-buscador input:focus {
  border-color: var(--color-primary); outline: none;
  box-shadow: 0 0 0 3px rgba(10, 91, 168, .18);
}

.portal-grupo { margin-top: var(--space-10); }
.portal-grupo__tit {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--color-muted-fg);
  margin: 0 0 var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
}
.portal-grupo__tit::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.portal-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }

.portal-vacio, .portal-sin-resultados {
  color: var(--color-muted-fg); font-size: var(--text-sm);
  padding: var(--space-5); border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-surface);
}
.portal-sin-resultados { margin-top: var(--space-4); }

.portal-pie {
  max-width: 1120px; margin: 0 auto;
  padding: 0 var(--space-6) var(--space-8);
  font-size: var(--text-xs); color: var(--color-muted-fg);
}

/* ==========================================================================
   3. TARJETA DE MÓDULO
   ========================================================================== */

.mod {
  position: relative; display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none; color: inherit;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
a.mod:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow); }
a.mod:focus-visible { outline: var(--focus-ring) solid var(--color-ring); outline-offset: 2px; }

.mod__ico {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--color-muted); color: var(--color-primary);
  display: grid; place-items: center; margin-bottom: var(--space-3);
}
.mod h3 { font-size: var(--text-lg); margin: 0; line-height: var(--leading-tight); }
.mod p  { font-size: var(--text-sm); color: var(--color-muted-fg); margin: var(--space-2) 0 0; }

.mod__chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.mod__chip {
  font-size: var(--text-xs); background: var(--color-muted); color: var(--color-primary-600);
  padding: 2px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap;
}

.mod__marca {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--color-muted); color: var(--color-muted-fg);
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
}
/* El alcance acotado va en ámbar y no en gris: informa sobre el permiso de la
   persona, no es una etiqueta decorativa. */
.mod__marca--acotado { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }

.mod--proximo { border-style: dashed; background: transparent; opacity: .72; }
.mod--proximo .mod__ico { background: var(--color-muted); color: var(--color-muted-fg); }
.mod--proximo h3 { color: var(--color-muted-fg); }

/* ==========================================================================
   4. PANTALLA DE INGRESO
   ========================================================================== */

.auth-shell__aside {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg,
    var(--color-primary-700) 0%, var(--color-primary) 45%, var(--color-accent-600) 100%);
}
.auth-shell__aside > * { position: relative; z-index: 1; }

.auth-shell__marca { display: flex; align-items: center; gap: var(--space-3); }
.auth-shell__marca b     { display: block; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; }
.auth-shell__marca small { display: block; font-size: var(--text-sm); color: rgba(255, 255, 255, .8); }

.auth-shell__titulo {
  color: var(--color-on-primary); font-size: var(--text-4xl);
  line-height: var(--leading-tight); max-width: 15ch; margin: 0;
}
.auth-shell__bajada { color: rgba(255, 255, 255, .88); margin-top: var(--space-4); max-width: 44ch; }
.auth-shell__sello {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-6);
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  padding: var(--space-2) var(--space-4); border-radius: 999px;
  font-size: var(--text-sm); color: rgba(255, 255, 255, .92);
}
.auth-shell__pie {
  font-size: var(--text-xs); color: rgba(255, 255, 255, .72);
  line-height: var(--leading-loose); margin: 0;
}

.auth-card__titulo { font-size: var(--text-2xl); text-align: center; margin: 0 0 var(--space-2); }
.auth-card__sub    { color: var(--color-muted-fg); text-align: center; font-size: var(--text-sm); margin: 0 0 var(--space-6); }
.field__pista      { font-size: var(--text-xs); color: var(--color-muted-fg); }
.auth-card__ayuda  { text-align: center; font-size: var(--text-sm); color: var(--color-primary); margin-top: var(--space-4); }
.auth-card__legal {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: center; font-size: var(--text-xs); color: var(--color-muted-fg);
  line-height: var(--leading-loose);
}

/* ==========================================================================
   5. PANTALLAS ANGOSTAS
   ========================================================================== */

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-shell__aside { padding: var(--space-8) var(--space-6); }
  .auth-shell__titulo { font-size: var(--text-3xl); }
  .portal-top__datos { display: none; }
  .portal-lienzo { padding: var(--space-8) var(--space-4) var(--space-12); }
}

/* ==========================================================================
   6. CABECERA DE MÓDULO  —  layouts/modulo.php
   ========================================================================== */

/* La vuelta al portal se lee como un botón y no como un enlace suelto: es la
   única salida del módulo y tiene que encontrarse sin buscarla. */
.modulo-volver {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-primary);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.modulo-volver:hover { background: var(--color-muted); border-color: var(--color-primary); }
.modulo-volver:focus-visible { outline: var(--focus-ring) solid var(--color-ring); outline-offset: 2px; }

.modulo-titulo {
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 600;
  color: var(--color-foreground);
  padding-left: var(--space-4); margin-left: var(--space-1);
  border-left: 1px solid var(--color-border);
}

@media (max-width: 700px) {
  .modulo-titulo { display: none; }
  .modulo-volver span { display: none; }
}

/* ==========================================================================
   7. POBLACIÓN BAJO CONTROL
   ========================================================================== */

.bc-carga {
  display: grid; gap: var(--space-4); align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.bc-carga .field { margin-bottom: 0; }
.bc-carga select, .bc-carga input[type="date"], .bc-carga input[type="file"] {
  min-height: var(--touch-target); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-sm);
  background: var(--color-surface); color: var(--color-foreground); width: 100%;
}

.bc-meta { color: var(--color-muted-fg); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.bc-nota { color: var(--color-muted-fg); font-size: var(--text-sm); margin: 0 0 var(--space-4); max-width: 70ch; }

.bc-cortes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.bc-corte {
  font-size: var(--text-xs); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  color: var(--color-muted-fg); text-decoration: none; background: var(--color-surface);
}
.bc-corte.is-activo { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

.bc-titulares { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.bc-tarjeta {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.bc-tarjeta__rotulo { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted-fg); }
.bc-tarjeta__valor  { display: block; font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.1; margin: var(--space-1) 0; }
.bc-tarjeta__pie    { display: block; font-size: var(--text-xs); color: var(--color-muted-fg); }

/* Cobertura: la barra hace evidente de un vistazo qué campos están a medio
   llenar, que es justo lo que un número suelto esconde. */
.bc-cobertura { display: grid; gap: var(--space-2); }
.bc-barra { display: grid; grid-template-columns: minmax(140px, 1.2fr) 3fr auto; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.bc-barra__nombre { color: var(--color-foreground); }
.bc-barra__pista  { background: var(--color-muted); border-radius: 999px; height: 8px; overflow: hidden; }
.bc-barra__relleno{ display: block; height: 100%; background: var(--color-primary); border-radius: 999px; }
.bc-barra__cifra  { color: var(--color-muted-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-barra__cifra small { color: var(--color-muted-fg); opacity: .75; }

.bc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--space-4); }
.bc-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.bc-panel h3 { font-size: var(--text-base); margin: 0 0 var(--space-3); }

.bc-tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.bc-tabla th {
  text-align: right; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-muted-fg); font-weight: 600;
  padding: 0 0 var(--space-2); border-bottom: 1px solid var(--color-border);
}
.bc-tabla th:first-child, .bc-tabla td:first-child { text-align: left; }
.bc-tabla td { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); text-align: right; font-variant-numeric: tabular-nums; }
.bc-tabla tr:last-child td { border-bottom: 0; }
.bc-tabla td small { color: var(--color-muted-fg); margin-left: var(--space-1); }
.bc-oculto { color: var(--color-muted-fg); font-style: italic; text-align: right; }

.bc-metodologia { margin: 0 0 var(--space-4); padding-left: var(--space-5); color: var(--color-muted-fg); font-size: var(--text-sm); line-height: var(--leading-loose); }

/* ==========================================================================
   8. ACTIVIDADES COMUNITARIAS
   ========================================================================== */

.ac-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.ac-tarjeta { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.ac-tarjeta__rotulo { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted-fg); }
.ac-tarjeta__valor  { display: block; font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.1; margin: var(--space-1) 0; }
.ac-tarjeta__pie    { display: block; font-size: var(--text-xs); color: var(--color-muted-fg); }

.ac-filtros { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.ac-filtros select {
  min-height: var(--touch-target); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-sm);
  background: var(--color-surface); color: var(--color-foreground);
}
.ac-nota { color: var(--color-muted-fg); font-size: var(--text-sm); margin: 0 0 var(--space-4); max-width: 70ch; }

/* La agenda se agrupa por día: la pregunta es "qué hay el jueves", no
   "qué actividad número 14 existe". */
.ac-dia {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-muted-fg);
  margin: var(--space-5) 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2);
}
.ac-dia:first-child { margin-top: 0; }
.ac-dia.es-hoy { color: var(--color-primary); }
.ac-hoy {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: 1px var(--space-2); border-radius: var(--radius-sm);
}

.ac-lista { display: grid; gap: var(--space-2); }
.ac-item {
  display: grid; grid-template-columns: 78px 1fr auto; gap: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.ac-item--realizada { border-left-color: #0f7a55; }
.ac-item--cancelada { border-left-color: var(--color-muted-fg); opacity: .65; }
.ac-item__hora {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
  color: var(--color-foreground); font-variant-numeric: tabular-nums;
}
.ac-item__hora small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-muted-fg); }
.ac-item__cuerpo h4 { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.ac-item__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.ac-item__detalle { font-size: var(--text-sm); color: var(--color-muted-fg); margin: var(--space-2) 0 0; }
.ac-item__accion { align-self: start; }

.ac-marca {
  font-size: var(--text-xs); background: var(--color-muted); color: var(--color-primary-600);
  padding: 2px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap;
}
/* Las dos sedes se distinguen por color: es el filtro que más se usa. */
.ac-marca--cauquenes { background: #E7F0FA; color: #084A8A; }
.ac-marca--chanco    { background: #FDF0E7; color: #8A4A08; }
.ac-marca--ambas     { background: #EDE9F7; color: #4A3A8A; }
.ac-marca--estado    { background: #FFFBEB; color: #92400E; }

.ac-desplegable {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4); margin-top: var(--space-4);
}
.ac-desplegable summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); color: var(--color-primary); }
.ac-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.ac-form .field { margin-bottom: 0; }
.ac-form input, .ac-form select, .ac-form textarea {
  min-height: var(--touch-target); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-sm);
  background: var(--color-surface); color: var(--color-foreground); width: 100%;
}
.ac-form textarea { min-height: 0; }
.ac-ancho { grid-column: 1 / -1; }
.ac-error { color: #991B1B; font-size: var(--text-xs); }

.ac-hitos { display: grid; gap: var(--space-2); }
.ac-hito {
  display: grid; grid-template-columns: 58px 1fr auto; gap: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.ac-hito__fecha { text-align: center; }
.ac-hito__fecha strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }
.ac-hito__fecha small  { display: block; font-size: var(--text-xs); text-transform: uppercase; color: var(--color-muted-fg); }
.ac-hito__cuerpo h4 { font-size: var(--text-base); margin: 0 0 var(--space-2); }

@media (max-width: 640px) {
  .ac-item, .ac-hito { grid-template-columns: 1fr; gap: var(--space-2); }
  .ac-item__accion { justify-self: start; }
}

/* Distribución mensual: barras en CSS puro, sin librería de gráficos. Son doce
   valores y cargar Chart.js para eso pesa más que el dato que muestra. */
.ac-meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-2); align-items: end; height: 180px; }
.ac-mes { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: var(--space-1); }
.ac-mes__barra { width: 100%; background: var(--color-primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 4px; }
.ac-mes__n { font-size: var(--text-xs); color: var(--color-foreground); font-variant-numeric: tabular-nums; }
.ac-mes__rotulo { font-size: var(--text-xs); color: var(--color-muted-fg); }
@media (max-width: 640px) { .ac-meses { grid-template-columns: repeat(6, 1fr); height: auto; } }

/* --- Carga masiva desde planilla -------------------------------------------
   La tabla de previsualización es de texto, no de cifras: por eso no reutiliza
   .bc-tabla, que alinea todo a la derecha para comparar números.
   El color del borde izquierdo distingue las tres suertes de una fila —se
   agrega, se omite, no se guarda— sin depender sólo del texto de la última
   columna, que en una planilla de sesenta filas hay que ir a buscar.
   -------------------------------------------------------------------------- */

.imp-resumen { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; gap: var(--space-1); }
.imp-resumen li { font-size: var(--text-sm); color: var(--color-muted-fg); }
.imp-resumen strong { color: var(--color-foreground); font-variant-numeric: tabular-nums; }

.imp-envoltorio { overflow-x: auto; }
.imp-tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.imp-tabla th {
  text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-muted-fg); font-weight: 600; white-space: nowrap;
  padding: 0 var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.imp-tabla td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border); vertical-align: top;
}
.imp-tabla td:first-child { font-variant-numeric: tabular-nums; color: var(--color-muted-fg); }
.imp-tabla tr:last-child td { border-bottom: 0; }

.imp-tabla .fila-nueva   td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); padding-left: var(--space-2); }
.imp-tabla .fila-omitida td { color: var(--color-muted-fg); }
.imp-tabla .fila-omitida td:first-child { box-shadow: inset 3px 0 0 var(--color-border); padding-left: var(--space-2); }
.imp-tabla .fila-error   td:first-child { box-shadow: inset 3px 0 0 #DC2626; padding-left: var(--space-2); }
.imp-tabla .fila-error   td { background: rgba(220, 38, 38, .04); }

.imp-acciones { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.imp-acciones form { margin: 0; }

/* ==========================================================================
   9. CARGA DE PLANILLAS  (Análisis REM)
   ========================================================================== */

.carga-rejilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-4); }
.carga {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-3);
}
.carga h3 { font-size:var(--text-base); margin:0; }
.carga p  { font-size:var(--text-sm); color:var(--color-muted-fg); margin:0; flex:1; }
.carga input[type=file] {
  padding:var(--space-3); border:1px dashed var(--color-border);
  border-radius:var(--radius); background:var(--color-muted);
  font-size:var(--text-sm); width:100%;
}
.carga__fila { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.carga__fila label { flex:1 1 110px; font-size:var(--text-xs); color:var(--color-muted-fg); display:grid; gap:4px; }
.carga__fila input {
  min-height:var(--touch-target); padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-border); border-radius:var(--radius);
  font-family:var(--font-body); font-size:var(--text-sm);
  background:var(--color-surface); color:var(--color-foreground); width:100%;
}
.carga button { align-self:flex-start; }

/* Pestañas de clase en actividades: comunitarias / psicosociales grupales. */
.ac-pestanas { display:flex; gap:var(--space-2); margin-top:var(--space-5); flex-wrap:wrap; }
.ac-pestana {
  padding:var(--space-2) var(--space-4); border:1px solid var(--color-border);
  border-radius:999px; text-decoration:none; font-size:var(--text-sm); font-weight:600;
  color:var(--color-muted-fg); background:var(--color-surface);
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.ac-pestana:hover { border-color:var(--color-primary); color:var(--color-primary); }
.ac-pestana.is-activa { background:var(--color-primary); color:var(--color-on-primary); border-color:var(--color-primary); }

/* ==========================================================================
   10. GRÁFICOS SVG  (app/core/Grafico.php)
   ========================================================================== */

.graf-rejilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--space-4); }
.graf-rejilla--ancha { grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); margin-top:var(--space-4); }
.graf-panel {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-5);
}
.graf-panel h3 { font-size:var(--text-base); margin:0 0 var(--space-4); }

.graf { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.graf-dona { width:150px; height:150px; flex:0 0 auto; }
.graf-dona__total {
  font-family:var(--font-display); font-size:30px; font-weight:600;
  fill:var(--color-foreground);
}

.graf-leyenda { list-style:none; margin:0; padding:0; flex:1 1 150px; font-size:var(--text-sm); }
.graf-leyenda li { display:flex; align-items:center; gap:7px; padding:3px 0; }
.graf-leyenda i { width:12px; height:12px; border-radius:3px; flex:0 0 auto; }
.graf-leyenda span { flex:1; color:var(--color-foreground); }
.graf-leyenda b { font-variant-numeric:tabular-nums; }
.graf-leyenda small { color:var(--color-muted-fg); min-width:34px; text-align:right; }
.graf-leyenda__nota { color:var(--color-muted-fg); font-size:var(--text-xs); font-style:italic; display:block; padding-top:var(--space-2); }

.graf-barras { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); font-size:var(--text-sm); }
.graf-barras li { display:grid; grid-template-columns:minmax(110px,1.1fr) 2.4fr auto auto; gap:var(--space-3); align-items:center; }
.graf-barras__lbl { color:var(--color-foreground); }
.graf-barras__pista { background:var(--color-muted); border-radius:999px; height:10px; overflow:hidden; }
.graf-barras__relleno { display:block; height:100%; border-radius:999px; }
.graf-barras b { font-variant-numeric:tabular-nums; }
.graf-barras small { color:var(--color-muted-fg); min-width:34px; text-align:right; }
.graf-vacio { color:var(--color-muted-fg); font-size:var(--text-sm); font-style:italic; margin:0; }


/* ==========================================================================
   11. ANÁLISIS REM — embudo, cupos y tablas

   Estos estilos vivían en un bloque <style> dentro de la vista del módulo que
   se eliminó. Al mover la vista a su propio controlador se quedaron atrás y la
   pantalla salía sin formato: las barras del embudo desbordaban el ancho y las
   tarjetas de cifras se apilaban como texto suelto.
   ========================================================================== */
.embudo{display:flex;flex-direction:column;gap:10px;margin:6px 0}
  .embudo__row{display:grid;grid-template-columns:180px 1fr 200px;gap:14px;align-items:center}
  .embudo__label{font-weight:600;font-size:.88rem;text-align:right}
  .embudo__bar-wrap{display:flex;align-items:center;gap:10px}
  .embudo__bar{height:34px;border-radius:7px;display:flex;align-items:center;min-width:70px;transition:width .3s}
  .embudo__val{color:#fff;font-weight:700;font-size:.82rem;padding:0 10px;white-space:nowrap}
  .embudo__pct{font-size:.78rem;font-weight:600;white-space:nowrap}
  .embudo__nota{font-size:.74rem;line-height:1.3}
  .cupos-kpis{display:flex;gap:16px;flex-wrap:wrap;align-items:stretch;margin:6px 0}
  .kpi-card{border:1px solid var(--color-border,#e2e8f0);border-radius:12px;padding:16px 20px;min-width:150px;background:var(--color-surface,#fff)}
  .kpi-card__val{font-size:2rem;font-weight:800;line-height:1;color:#334155}
  .kpi-card__lbl{font-size:.82rem;margin-top:8px;line-height:1.35}
  .cupos-spark{flex:1;min-width:220px;border:1px solid var(--color-border,#e2e8f0);border-radius:12px;padding:14px 16px}
  .spark{display:flex;align-items:flex-end;gap:8px;height:80px}
  .spark__col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
  .spark__bar{width:100%;max-width:38px;background:linear-gradient(180deg,#059669,#34d399);border-radius:4px 4px 0 0;min-height:6px}
  .spark__x{font-size:.7rem;color:var(--color-text-muted,#64748b);margin-top:4px}
  .uso-cell{display:flex;align-items:center;gap:8px}
  .uso-bar{flex:1;max-width:110px;height:6px;border-radius:4px;background:var(--color-surface-2,#eef2f5);overflow:hidden}
  .uso-bar span{display:block;height:100%}
  .pill{display:inline-block;font-size:.74rem;font-weight:600;padding:2px 9px;border-radius:99px;border:1px solid}
  .flujo-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 var(--space-6);padding:12px 16px;background:var(--color-surface-2,#f1f5f9);border-radius:12px}
  .flujo-nav a{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--color-text,#334155);text-decoration:none;padding:4px 8px;border-radius:7px}
  .flujo-nav a:hover{background:var(--color-surface,#fff)}
  .flujo-nav a span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:99px;background:var(--color-primary,#0f766e);color:#fff;font-size:.72rem;font-weight:700}
  .flujo-arrow{color:var(--color-text-muted,#94a3b8);font-weight:700}
  .tramo{padding-top:var(--space-6);scroll-margin-top:20px}
  .tramo__n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:99px;background:var(--color-primary,#0f766e);color:#fff;font-size:.8rem;font-weight:700;margin-right:8px;vertical-align:middle}
  .tramo__link{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
  .table-sortable th{cursor:pointer;user-select:none;white-space:nowrap}
  .table-sortable th:hover{background:var(--color-surface-2,#f1f5f9)}
  .table-sortable th.sort-active{color:var(--color-primary,#0f766e)}
  .sort-ind{font-size:.7rem;opacity:.7}
  @media (max-width:640px){ .embudo__row{grid-template-columns:1fr} .embudo__label{text-align:left} .embudo__nota{display:none} }

/* ==========================================================================
   12. ACCESOS POR PERSONA  (Cuentas y accesos)
   ========================================================================== */

.acc-lista { display:grid; gap:var(--space-2); }
.acc-fila {
  display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:var(--space-4);
  align-items:center;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-4);
}
.acc-fila__id strong { display:block; font-size:var(--text-base); }
.acc-fila__control { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.acc-fila__control select, .acc-fila__control input {
  min-height:var(--touch-target); padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-border); border-radius:var(--radius);
  font-family:var(--font-body); font-size:var(--text-sm);
  background:var(--color-surface); color:var(--color-foreground);
}
.acc-fila__control input { min-width:180px; }

/* El estado actual se dice con palabras y no sólo con color: "lo ve / no lo ve"
   se entiende sin tener que interpretar un verde o un gris. */
.acc-estado { display:block; font-size:var(--text-sm); margin-top:2px; }
.acc-estado small { color:var(--color-muted-fg); margin-left:6px; }
.acc-estado--si { color:#0F6E56; font-weight:600; }
.acc-estado--no { color:var(--color-muted-fg); }

.acc-excepciones { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); }
.acc-excepciones li {
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-left:3px solid #C2740D; border-radius:var(--radius); padding:var(--space-3) var(--space-4);
}
.acc-excepciones small { color:var(--color-muted-fg); }

.acc-marca {
  font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:2px var(--space-2); border-radius:var(--radius-sm); white-space:nowrap;
}
.acc-marca--concedido { background:#E3F3ED; color:#0B4F3E; }
.acc-marca--quitado   { background:#FDECEC; color:#8A1F1F; }
.acc-marca--acotado   { background:#FFFBEB; color:#92400E; border:1px solid #FDE68A; }

/* Punto en la lista de cuentas: avisa que esa persona tiene excepciones. */
.acc-punto { color:#C2740D; font-size:1.2em; line-height:0; }

@media (max-width:760px) {
  .acc-fila { grid-template-columns:1fr; }
}