/* ══════════════════════════════════════════════════════════════════════════════════════════
   BASE_ALFA — piso visual y de accesibilidad del front alfa (ver base_alfa.html).
   Usuario de referencia: daltónico, 64 años, baja visión → tipografía 16-24px conmutables,
   contraste alto opcional, foco de teclado visible, paleta segura (Okabe-Ito), movimiento
   reducible. Los módulos agregan su CSS encima; NO redefinir estos tokens por módulo.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --alfa-fs: 18px;
  /* Paleta Okabe-Ito (segura para daltónicos) — usar SIEMPRE estos tokens en gráficas/badges */
  --alfa-azul: #0072B2;
  --alfa-naranja: #E69F00;
  --alfa-celeste: #56B4E9;
  --alfa-verde: #009E73;
  --alfa-amarillo: #F0E442;
  --alfa-rojo: #D55E00;
  --alfa-rosa: #CC79A7;
  --alfa-primario: #1a5f9e;   /* azul PARA GRÁFICAS: el que sí pasa el validador de dataviz */
  --alfa-marca: #14508a;      /* azul PARA UI (acentos, headers) — el institucional de warroom2 */
  --alfa-txt: #141414;
  --alfa-muted: #3d3d3d;
  --alfa-line: #333;
  /* SEVERIDAD (lineamiento §4.2 de interfaz_pp.md — evita rojo-verde, cada nivel con SU ícono) */
  --alfa-sev-critico: #b30000;
  --alfa-sev-alto: #b35900;
  --alfa-sev-medio: #14508a;
  --alfa-sev-bajo: #4a4a4a;
}

body { font-size: var(--alfa-fs); color: var(--alfa-txt); }
.content-wrapper { font-size: var(--alfa-fs); }

/* ── LENGUAJE VISUAL del front (portado de warroom2 — ES el look, no un parecido) ──
   Sin esto, base_alfa se veía "AdminLTE pelón": bordes finos grises, títulos chicos. El sello
   del front de Pp son los BORDES GRUESOS casi negros, títulos 800 y KPI grandes. */
.content-header h1 { font-size: 1.7rem; font-weight: 800; color: var(--alfa-txt); }
.card { border: 2px solid var(--alfa-line); border-radius: 10px; }
.card-outline { border-top-width: 5px !important; }
.card-header { border-bottom: 2px solid var(--alfa-line); }
.card-title { font-size: 1.2rem !important; font-weight: 800; color: var(--alfa-txt); }
.btn { font-weight: 700; }
.btn-lg { font-weight: 800; }
.btn-outline-secondary, .btn-outline-dark { border-width: 2px; color: var(--alfa-txt); }
input.form-control, select.form-control, textarea.form-control {
  border: 2px solid var(--alfa-line); color: var(--alfa-txt); }
.table thead th { background: #0f2733; color: #fff; border: none;
  font-size: 0.95rem; font-weight: 800; padding: 12px 14px; }

/* KPI tiles (el patrón de dashboard del front) —
   <div class="kpi-tile acento"><div class="valor">139</div>
     <div class="etiqueta">Reportes generados</div><div class="contexto">129 completados</div></div> */
.kpi-tile { border: 2px solid var(--alfa-line); border-radius: 10px; padding: 12px 14px;
  background: #fff; height: 100%; }
.kpi-tile .valor { font-size: 1.7rem; font-weight: 800; color: var(--alfa-txt); line-height: 1.1; }
.kpi-tile .etiqueta { font-size: 0.88rem; color: var(--alfa-muted); font-weight: 700; }
.kpi-tile .contexto { font-size: 0.8rem; color: var(--alfa-muted); }
/* `contexto` también se usa suelta, fuera de un KPI, como texto explicativo de una sección
   (25 usos en las vistas migradas). Solo estaba definida DENTRO de .kpi-tile, así que en el
   resto salía como texto normal: no truena, solo deja de leerse como aclaración. */
.contexto { font-size: 0.86rem; color: var(--alfa-muted); }
.kpi-tile.acento { border-left: 6px solid var(--alfa-marca); }

/* skip-link: invisible hasta recibir foco (lectores de teclado saltan el menú de 97 entradas) */
.alfa-skip { position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: #14508a; color: #fff; padding: 10px 16px; font-weight: 700; border-radius: 0 0 8px 0; }
.alfa-skip:focus { left: 0; }

/* foco de teclado SIEMPRE visible */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--alfa-naranja) !important; outline-offset: 2px; }

/* región de avisos para lectores de pantalla */
.alfa-live { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%);
  z-index: 1500; pointer-events: none; }

/* alto contraste conmutable (texto casi negro sobre claro + bordes gruesos, §4.3) */
body.alfa-alto-contraste .content-wrapper { background: #fff; color: #141414; }
body.alfa-alto-contraste .card { border: 2px solid #141414; }
body.alfa-alto-contraste .text-muted { color: #3d3d3d !important; }
body.alfa-alto-contraste .btn { border-width: 2px; }
body.alfa-alto-contraste a:not(.nav-link):not(.brand-link) { text-decoration: underline; }

/* sidebar: legibilidad por encima del default de AdminLTE */
/* ── Ancho de la columna del menú ──────────────────────────────────────────────────────────
   AdminLTE la fija en 250px, y ahí «Auditoría — Cuenta Pública» parte en dos renglones: con
   103 entradas, un ítem que ocupa el doble de alto rompe el ritmo de la columna y el ojo lo
   lee como un error. 272px es lo justo para que el rótulo más largo entre en una línea.
   ⚠️ En AdminLTE el ancho vive en TRES sitios (la barra, el contenido y el pie): tocar solo
   el primero deja el contenido montado debajo del menú. */
:root { --alfa-menu-ancho: 288px; }
@media (min-width: 992px) {
  .main-sidebar, .main-sidebar::before { width: var(--alfa-menu-ancho); }
  /* ⚠️ `!important` a propósito. AdminLTE marca este margen como importante, así que una regla
     más específica NO le gana. Y no se ve en el inspector propio: su hoja viene de un CDN, y el
     navegador prohíbe leer las reglas de una hoja de otro dominio — al listarlas se salta en
     silencio y parece que la única regla es la nuestra. Sin esto el contenido se monta DEBAJO
     del menú. */
  body:not(.sidebar-collapse) .content-wrapper,
  body:not(.sidebar-collapse) .main-header,
  body:not(.sidebar-collapse) .main-footer { margin-left: var(--alfa-menu-ancho) !important; }
}
/* Una entrada que salta a dos renglones rompe el ritmo de una columna de 103 y el ojo lo lee
   como un error. Con el ancho de arriba entran todas; el corte es solo red de seguridad para
   cuando el usuario agranda el texto con A+. */
.main-sidebar .nav-sidebar .nav-link { align-items: center; }
.main-sidebar .nav-sidebar .nav-link p { font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ícono de ancho fijo: sin esto cada glifo mide distinto y los rótulos quedan desalineados,
   que es lo que hace que una lista larga se lea «sucia». */
.main-sidebar .nav-sidebar .nav-icon { width: 1.6rem; text-align: center; flex: 0 0 1.6rem;
  font-size: 1.02rem; opacity: .92; }

/* ── SECCIONES del menú: banda clara + COLAPSABLES (pedido Gerardo 2026-08-05) ──
   Cada cabecera es un botón que pliega/despliega su sección; el estado persiste por usuario
   (localStorage alfa_sec_<slug>). El verde-agua #8ee6c9 es el de warroom2. */
.main-sidebar .nav-header.alfa-sec-cab { padding: 0; margin-top: 10px;
  border-top: 2px solid rgba(142, 230, 201, 0.35); }
.alfa-sec-btn { display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: rgba(142, 230, 201, 0.08); border: 0; cursor: pointer;
  padding: 10px 14px; color: #8ee6c9; font-size: 0.8rem; letter-spacing: 1.5px; font-weight: 800; }
.alfa-sec-btn:hover { background: rgba(142, 230, 201, 0.16); }
.alfa-sec-btn i { transition: transform 0.15s; }
.alfa-sec-btn[aria-expanded="false"] i { transform: rotate(-90deg); }
.nav-sidebar li[data-sec].alfa-sec-oculta { display: none; }
.main-sidebar .brand-text { white-space: normal; }   /* que nunca trunque el nombre (bug "BET") */

/* footer compacto con la firma git (mitad de alto, siempre visible por layout-footer-fixed) */
.alfa-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; font-size: 0.9rem; padding: 6px 14px; }
.alfa-footer-git { color: #3d3d3d; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.alfa-footer-git .sep { color: #9aa4ae; }
.alfa-footer-git i { color: #14508a; }
.alfa-footer .git-chip { background: #eef3f8; border: 2px solid #333; border-radius: 6px;
  padding: 1px 8px; font-size: 0.82rem; color: #14508a; font-weight: 700; }
.alfa-footer .git-mod { background: #b35900; color: #fff; font-weight: 800; font-size: 0.7rem;
  border-radius: 6px; padding: 2px 7px; }

/* ── SEMÁFOROS REDUNDANTES (regla #1 de Pp: color + ÍCONO + PALABRA, nunca color solo) ──
   Uso:  <span class="alfa-sem alfa-sem-critico"><i class="fas fa-circle-exclamation"></i> CRÍTICO</span>
         critico=fa-circle-exclamation · alto=fa-triangle-exclamation · medio=fa-circle-info · bajo=fa-circle
   La clase NO funciona sin su ícono y su palabra: el color es la vía redundante, no la principal. */
.alfa-sem { display: inline-flex; align-items: center; gap: 6px; font-weight: 800;
  font-size: 0.95em; color: #fff; border-radius: 8px; padding: 3px 10px; border: 2px solid #141414; }
.alfa-sem i { font-size: 1em; }
.alfa-sem-critico { background: var(--alfa-sev-critico); }
.alfa-sem-alto    { background: var(--alfa-sev-alto); }
.alfa-sem-medio   { background: var(--alfa-sev-medio); }
.alfa-sem-bajo    { background: var(--alfa-sev-bajo); }

/* ── TABLA ZEBRA con encabezado de alto contraste (lineamiento §4.9) ──
   Uso: <table class="table alfa-tabla">…  (no hace falta table-striped) */
.alfa-tabla thead th { background: #141414; color: #fff; border-color: #141414; }
.alfa-tabla tbody tr:nth-child(odd) { background: #f2f5f8; }
.alfa-tabla td, .alfa-tabla th { border: 1px solid #b9c4cd; }

/* ── Badges del sidebar en paleta segura ──
   Los badge-danger/success de Bootstrap son rojo #dc3545 / verde #28a745: EXACTAMENTE el par
   que un daltónico rojo-verde no distingue. El texto ya carga el significado (ADMIN/NUEVO),
   pero el color se re-mapea a la paleta de severidad para que también sume, no confunda. */
.main-sidebar .badge-danger  { background: var(--alfa-sev-critico); }
.main-sidebar .badge-success { background: var(--alfa-azul); }
.main-sidebar .badge-warning { background: var(--alfa-sev-alto); color: #fff; }
.main-sidebar .badge-info    { background: var(--alfa-sev-medio); }

/* movimiento reducible: se apaga todo lo no esencial */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Puente de utilidades Bootstrap 5 → 4 ──────────────────────────────────────────────
   Aquí corre Bootstrap 4.6 (AdminLTE), pero el JS que COMPARTIMOS con la cara clásica pinta
   HTML con las utilidades de Bootstrap 5 (`me-2`, `ms-auto`, `gap-2`, `rounded-3`). En BS4
   esas clases NO EXISTEN: no truena nada, simplemente los íconos quedan pegados al texto y
   las filas sin separación — un desajuste que no da ningún error y solo se ve mirando.
   Traducirlas aquí, en la base, evita repetir el parche en cada plantilla. */
.ms-auto { margin-left: auto; }   /* ⚠️ NO tocar `.mr-auto`: en BS4 ya significa lo contrario */
.me-auto { margin-right: auto; }
.me-1 { margin-right: .25rem; } .me-2 { margin-right: .5rem; } .me-3 { margin-right: 1rem; }
.ms-1 { margin-left: .25rem; }  .ms-2 { margin-left: .5rem; }  .ms-3 { margin-left: 1rem; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; }
.rounded-3 { border-radius: .5rem; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.text-end { text-align: right; }
.text-start { text-align: left; }
/* `float-end`/`float-start` las pinta el JS de Calidad de Mensajes; en BS4 son `float-right`/
   `float-left` y sin esto el elemento se queda en el flujo, desalineado y sin avisar. */
.float-end { float: right; }
.float-start { float: left; }