/* =====================================================
   ABASTEMIN by MINDER — abastemin.pe — Estilos del sitio
   =====================================================

   SISTEMA DE DISEÑO (fase 1 del rediseño, 2026-10-13)
   ---------------------------------------------------
   Todo lo nuevo se arma con estos tokens y componentes; no se escriben
   colores, tamaños, radios ni sombras a mano. Las fases siguientes
   escriben en su propia hoja (cargadas después de esta en base.html):
     ui-panel.css · ui-convocatorias.css · ui-cuentas.css · ui-publico.css

   Tokens (definidos en :root, aquí abajo)
   · Marca: --primary-50 … --primary-950 (escala del azul ABASTEMIN).
       --primary (= 700) es EL azul de botones y enlaces activos;
       --primary-hover (= 800). --accent es el celeste de marca (#85AAD6),
       solo para íconos, rayas y fondos: como texto no llega a 4.5:1.
       Los nombres viejos (--navy*, --gold*, --pp-accent, --co-accent,
       --convl-azul…) quedan como alias de esta escala.
   · Estados: --success / --warning / --danger / --info / --neutral,
       cada uno con -bg (fondo suave), -fg (texto, ≥4.5:1 sobre -bg),
       -border y -solid (relleno con texto blanco).
   · Texto: --text-strong (títulos y datos), --text-default (cuerpo),
       --text-muted (secundario, ≥5.5:1 sobre blanco y sobre --gray-bg).
   · Tipografía: --fs-xs 12 · --fs-sm 13 · --fs-md 14 · --fs-base 15 ·
       --fs-lg 16 · --fs-xl 18 · --fs-2xl 20 · --fs-3xl 24 · --fs-4xl 28 ·
       --fs-5xl 32 (más grande solo en titulares de portada, con clamp).
       Nada visible por debajo de 12px. Pesos: --fw-regular 400,
       --fw-medium 500, --fw-semibold 600, --fw-bold 700 (títulos 700,
       subtítulos 600; 800/900 solo en titulares de portada).
   · Radios: --radius-xs 4 · --radius-sm 6 · --radius-md 10 ·
       --radius-lg 14 · --radius-xl 20 · --radius-pill.
   · Sombras: --shadow-sm (reposo), --shadow-md (hover, menús),
       --shadow-lg (modales, paneles flotantes).
   · Botones: --btn-radius (píldora), --btn-h-sm 34 / --btn-h-md 42 /
       --btn-h-lg 48 (en móvil ninguno baja de 40, salvo en tablas),
       --btn-fs, --btn-fw, --btn-primary-bg / -hover y --btn-secondary-*
       (fg, border, hover-bg, hover-border) para el botón blanco con borde.
   · Foco: --focus-ring (anillo de marca de :focus-visible).

   Componentes globales (sección «Sistema de diseño: componentes»)
   · Botones: .btn-navy (= .btn-primary), .btn-outline-navy
       (= .btn-outline-primary), .btn-ghost, .btn-danger-soft; todos los
       .btn de Bootstrap y las variantes propias (pp-btn, conv-btn, cvd-btn,
       auth-btn…) comparten forma, alto y colores por los tokens de arriba.
       Para algo nuevo: <a class="btn btn-navy">…</a> (o .btn-sm/.btn-lg).
   · Etiqueta de estado: <span class="tag is-ok"><i class="bi bi-check2"></i>
       Aprobado</span>. Variantes: is-ok, is-warn, is-danger, is-info,
       is-neutral (por defecto); .tag-sm para tablas densas; .tag-dot pone
       un punto de color en vez de ícono. Los chips viejos (conv-estado,
       cvd-estado, ficha-estado, segui-chip, dash-pill, conv-chip,
       convl-etiqueta) usan las mismas medidas (--tag-*) y colores.
   · Bootstrap pintado con la marca: .table, .badge, .alert, .modal-content,
       .form-control/.form-select, .nav-tabs/.nav-pills, .pagination,
       .dropdown-menu, .card. Los badges bg-*-subtle salen como .tag.
   · Utilidades: .text-xs/.text-sm/.text-md/.text-base/.text-lg/.text-xl,
       .text-strong, .text-default, .text-soft (= --text-muted),
       .fw-semibold-ui, .measure (ancho de lectura, 70ch), .text-pre
       (respeta saltos de línea), .icon-dot (punto de estado decorativo),
       .field-w-sm/-md/-lg (ancho tope de filtros: 170/260/320px),
       .surface (tarjeta blanca con borde, radio y sombra de la marca). */

/* Alibaba Sans (fuente oficial de Alibaba, gratis para uso comercial),
   servida desde static/fonts: la CDN de Alibaba bloquea el enlace directo
   desde otros dominios. No hay peso 600 ni cursiva: el navegador usa Bold
   para 600 y sintetiza la cursiva.
   font-display: swap (2026-10-13; antes block): con block, si la fuente
   tardaba (red móvil lenta, caché vacía) el texto quedaba invisible hasta
   3 segundos. Con swap se lee al instante con la del sistema y cambia al
   llegar. Para que ese cambio casi nunca se vea, base.html precarga
   Regular y Bold (los pesos de casi todo el texto) y las métricas de la
   fuente de respaldo se parecen. */
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Regular.559293ed8e40.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Medium.562758f91b19.woff2") format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Bold.aec1d85346ed.woff2") format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Heavy.97deed845e28.woff2") format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Black.f4f35015787c.woff2") format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* El sitio es solo claro: sin esto, con el sistema en modo oscuro algunos
     navegadores pintan oscuros los controles nativos (selects, barras de
     scroll, autocompletar) sobre fondos blancos. */
  color-scheme: light;
  --font-sans:    'Alibaba Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bs-body-font-family: var(--font-sans);
  --bs-font-sans-serif: var(--font-sans);

  /* ── Marca: escala del azul ABASTEMIN ──
     900 es el navy de la barra superior; 700 el azul de los botones; 300
     el celeste de marca (antes llamado «gold», que nunca fue dorado). Hasta
     el 2026-10-13 convivían siete azules «principales» casi iguales
     (#0B2D63, #163F85, #1a287a, #113775, #1E3D6F, #01256E…): ahora todos
     salen de aquí. */
  --primary-50:   #EAF1F9;
  --primary-100:  #D6E3F3;
  --primary-200:  #A8C4E3;
  --primary-300:  #85AAD6;
  --primary-400:  #5A82B8;
  --primary-500:  #345D8F;
  --primary-600:  #163F85;
  --primary-700:  #113775;
  --primary-800:  #0B2D63;
  --primary-900:  #0A2647;
  --primary-950:  #061428;
  --primary:        var(--primary-700);
  --primary-hover:  var(--primary-800);
  --primary-rgb:    17, 55, 117;
  --accent:         var(--primary-300);

  /* Nombres anteriores, como alias (siguen usándose en muchas reglas). */
  --navy:         var(--primary-900);
  --navy-dark:    var(--primary-950);
  --navy-light:   var(--primary-800);
  --navy-mid:     var(--primary-600);
  /* Degradado decorativo (avatares, marcas). Los botones ya no lo usan:
     van con --btn-primary-bg, un azul plano. */
  --grad-navy:    linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-light) 100%);
  /* Estrella de "destacado". */
  --star:         #f5a623;
  --gold:         var(--accent);
  --gold-light:   var(--primary-200);
  --gold-pale:    var(--primary-50);
  --gold-ink:     var(--navy-dark);
  /* --gold da ~2.4:1 de contraste sobre blanco (falla WCAG AA para texto,
     que pide 4.5:1) -- se usa igual para íconos/insignias decorativos,
     pero para texto real (links, títulos) hay que usar esta variante más
     oscura. Misma familia de color, legible. */
  --gold-dark:    var(--primary-500);
  --accent-blue:  #516fa9;

  /* ── Estados ── -fg es el texto (≥4.5:1 sobre -bg y sobre blanco),
     -solid el relleno de un botón o insignia con texto blanco. */
  --success-bg:     #ECFDF3;
  --success-fg:     #067647;
  --success-border: #ABEFC6;
  --success-solid:  #067647;
  --warning-bg:     #FFFAEB;
  --warning-fg:     #B54708;
  --warning-border: #FEDF89;
  --warning-solid:  #F79009;
  --danger-bg:      #FEF3F2;
  --danger-fg:      #B42318;
  --danger-border:  #FECDCA;
  --danger-solid:   #D92D20;
  --info-bg:        #EFF8FF;
  --info-fg:        #175CD3;
  --info-border:    #B2DDFF;
  --info-solid:     #1570EF;
  --neutral-bg:     #F2F4F7;
  --neutral-fg:     #475467;
  --neutral-border: #EAECF0;
  --success: var(--success-fg);
  --warning: var(--warning-fg);
  --danger:  var(--danger-fg);
  --info:    var(--info-fg);

  /* ── Superficies y bordes ── */
  --gray-bg:      #F7F8FA;
  --surface:      #FFFFFF;
  --card-border:  #E5E7EB;
  --border:       var(--card-border);
  --border-strong: #D0D5DD;

  /* ── Texto: tres tonos ──
     --text-muted pasó de #667085 a #5B6578 (2026-10-13): el gris anterior
     quedaba en el límite (4.5:1) sobre el fondo gris del sitio. */
  --text-strong:  #101828;
  --text-default: #344054;
  --text-muted:   #5B6578;
  --text-title:   var(--text-strong);
  --text-dark:    var(--text-strong);
  --text-body:    var(--text-muted);
  /* Paleta tipográfica del sitio: títulos y subtítulos (h1-h6) y párrafos. */
  --text-heading:   var(--primary-800);
  --text-paragraph: #232A3B;
  /* Bootstrap pinta con esta variable los h1-h6 y las clases .h1-.h6. */
  --bs-heading-color: var(--text-heading);

  /* ── Tipografía ── */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-md:   14px;
  --fs-base: 15px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;
  --fs-4xl:  28px;
  --fs-5xl:  32px;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Radios y sombras ── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);
  --radius-btn:  var(--btn-radius);
  --shadow-sm:   0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05);
  --shadow-md:   0 2px 4px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .09);
  --shadow-lg:   0 4px 10px rgba(16, 24, 40, .06), 0 20px 48px rgba(16, 24, 40, .16);

  /* ── Botones ──
     Una sola forma para todo el sitio (2026-10-13): píldora, que ya era la
     de la barra superior, el buscador y Convocatorias. Antes convivían
     radios de 6, 8, 9 y 999px y altos de 40 a 48px. */
  --btn-radius:   var(--radius-pill);
  --btn-h-sm:     34px;
  --btn-h-md:     42px;
  --btn-h-lg:     48px;
  --btn-fs:       var(--fs-md);
  --btn-fs-sm:    var(--fs-sm);
  --btn-fs-lg:    var(--fs-base);
  --btn-fw:       var(--fw-bold);
  --btn-primary-bg:       var(--primary);
  --btn-primary-bg-hover: var(--primary-hover);
  /* Secundario (blanco con borde): el texto va en el azul de la marca. */
  --btn-secondary-fg:           var(--primary-700);
  --btn-secondary-border:       var(--border-strong);
  --btn-secondary-hover-bg:     var(--primary-50);
  --btn-secondary-hover-border: var(--primary-300);

  /* ── Etiquetas de estado (.tag y los chips viejos) ── */
  --tag-h:    24px;
  --tag-px:   10px;
  --tag-fs:   var(--fs-xs);
  --tag-fw:   var(--fw-bold);
  --tag-radius: var(--radius-pill);

  /* ── Foco ── */
  --focus-ring: 0 0 0 3px rgba(var(--primary-rgb), .28);
  --focus-outline: 2px solid var(--primary-400);

  /* ── Bootstrap 5.3 con los colores de la marca ──
     Sin esto btn-primary, bg-success, text-danger, los enlaces o el anillo
     de foco salían con el azul/verde/amarillo de Bootstrap, que no son los
     del sitio. */
  --bs-primary: #113775;            --bs-primary-rgb: 17, 55, 117;
  --bs-success: #067647;            --bs-success-rgb: 6, 118, 71;
  --bs-warning: #F79009;            --bs-warning-rgb: 247, 144, 9;
  --bs-danger:  #D92D20;            --bs-danger-rgb: 217, 45, 32;
  --bs-info:    #1570EF;            --bs-info-rgb: 21, 112, 239;
  --bs-secondary: #5B6578;          --bs-secondary-rgb: 91, 101, 120;
  --bs-primary-text-emphasis: var(--primary-800);
  --bs-primary-bg-subtle:     var(--primary-50);
  --bs-primary-border-subtle: var(--primary-200);
  --bs-success-text-emphasis: var(--success-fg);
  --bs-success-bg-subtle:     var(--success-bg);
  --bs-success-border-subtle: var(--success-border);
  --bs-warning-text-emphasis: var(--warning-fg);
  --bs-warning-bg-subtle:     var(--warning-bg);
  --bs-warning-border-subtle: var(--warning-border);
  --bs-danger-text-emphasis:  var(--danger-fg);
  --bs-danger-bg-subtle:      var(--danger-bg);
  --bs-danger-border-subtle:  var(--danger-border);
  --bs-info-text-emphasis:    var(--info-fg);
  --bs-info-bg-subtle:        var(--info-bg);
  --bs-info-border-subtle:    var(--info-border);
  --bs-secondary-text-emphasis: var(--neutral-fg);
  --bs-secondary-bg-subtle:     var(--neutral-bg);
  --bs-secondary-border-subtle: var(--neutral-border);
  --bs-body-color:      var(--text-default);
  --bs-secondary-color: var(--text-muted);
  --bs-emphasis-color:  var(--text-strong);
  --bs-border-color:    var(--card-border);
  --bs-link-color:      var(--primary-600);
  --bs-link-color-rgb:  22, 63, 133;
  --bs-link-hover-color:     var(--primary-800);
  --bs-link-hover-color-rgb: 11, 45, 99;
  --bs-focus-ring-color: rgba(var(--primary-rgb), .28);
  --bs-border-radius:    var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);
}

/* ── Ancho del sitio ──
   El .container de Bootstrap se queda en 1140px (xl) / 1320px (xxl) y en
   monitores anchos deja franjas vacías a los costados. Se estira un poco en
   cada escalón; el navbar y el footer usan el mismo .container, así que
   siguen alineados con el contenido. */
@media (min-width: 1200px) { .container { max-width: 1240px; } }
@media (min-width: 1400px) { .container { max-width: 1400px; } }
@media (min-width: 1700px) { .container { max-width: 1560px; } }

/* ── Base ── */
/* overflow-x: clip y no hidden: `hidden` convierte a html/body en
   contenedor de scroll y anula el position: sticky del navbar; `clip`
   recorta el desborde horizontal igual pero deja al navbar pegado arriba. */
html {
  overflow-x: clip;
  /* Reserva siempre el espacio de la barra de scroll vertical: si no, al
     pasar de una página corta a una larga el contenido (y el logo) se
     corren unos píxeles cuando la barra aparece. */
  scrollbar-gutter: stable;
}
body {
  background-color: var(--gray-bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  max-width: 100vw;
}

/* ── Formularios ──
   El placeholder de Bootstrap usa casi el mismo tono que el texto
   tipeado (rgba negro al 75%); se aclara para que se note que es un
   ejemplo y no algo que el usuario ya escribió. */
/* Una regla por prefijo: juntos en una sola lista, cada navegador
   descartaba la regla entera por no reconocer el prefijo del otro. */
.form-control::placeholder { color: rgba(16, 24, 40, 0.45); opacity: 1; }
.form-control::-webkit-input-placeholder { color: rgba(16, 24, 40, 0.45); }
.form-control::-moz-placeholder { color: rgba(16, 24, 40, 0.45); opacity: 1; }
input[type="date"].form-control:required:invalid {
  color: rgba(16, 24, 40, 0.35);
}
/* Los <select> no tienen ::placeholder — mientras siga elegida la
   opción vacía ("Selecciona un rango...") se aclara igual que un
   placeholder, para que no parezca una opción ya seleccionada. */
.form-select:required:invalid {
  color: rgba(16, 24, 40, 0.35);
}
.form-select option {
  color: var(--text-dark);
}

/* Errores y advertencias del sitio (base.html): fijos arriba del
   contenido, no flotantes. */
.page-alert-wrap { padding-top: 14px; }
.page-alert { display: flex; align-items: center; gap: .65rem; margin: 0; border-radius: var(--radius-md); font-size: var(--fs-base); }
.page-alert > .bi { flex-shrink: 0; font-size: var(--fs-lg); }
.page-alert > span { flex: 1; }

/* Títulos a 700 y subtítulos (h4-h6) a 600, no a 800 (2026-10-13): con
   todo en 800 los títulos competían con los números y botones, y la
   página se veía pesada. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-heading);
  font-weight: var(--fw-bold);
}
h4, h5, h6, .h4, .h5, .h6 { font-weight: var(--fw-semibold); }
/* Las utilidades de color de Bootstrap/del sitio en un título (h1 con
   text-navy, subtítulos con text-gold-dark) no le cambian el color. */
:is(h1, h2, h3, h4, h5, h6):is(.text-navy, .text-gold-dark, .text-dark) { color: var(--text-heading) !important; }
p { color: var(--text-paragraph); }

/* Seleccionar y copiar texto dentro de enlaces (tarjetas del directorio,
   listas): sin esto Chrome y Safari arrastran el enlace al sombrear. El
   clic tras seleccionar lo anula main.js. */
a, a img { -webkit-user-drag: none; }
a { user-select: text; -webkit-user-select: text; }

/* =====================================================
   Sistema de diseño: componentes (2026-10-13)
   Van antes de las secciones de cada página para que estas puedan
   ajustarlos con la misma especificidad. Guía de uso al inicio del archivo.
   ===================================================== */

/* ── Foco visible ──
   Un solo anillo de marca para todo lo que se maneja con teclado (antes
   no había regla global y varias piezas lo quitaban con outline: none).
   Solo :focus-visible: al hacer clic con el mouse no aparece. Los campos de
   texto no llevan contorno: su foco es el borde + sombra de :focus, abajo. */
:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
:is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"])):focus-visible { outline: none; }
.btn:focus-visible, .page-link:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible {
  outline: var(--focus-outline); outline-offset: 2px; box-shadow: none;
}

/* ── Formularios (Bootstrap) ──
   Borde un tono más firme que el de las tarjetas (con el gris de las
   tarjetas los campos casi no se distinguían del fondo) y el foco con el
   anillo de la marca en vez del celeste de Bootstrap. */
.form-control, .form-select { border-color: var(--border-strong); color: var(--text-strong); }
.form-control:focus, .form-select:focus { border-color: var(--primary-400); box-shadow: var(--focus-ring); }
.form-check-input:focus { border-color: var(--primary-400); box-shadow: var(--focus-ring); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235A82B8'/%3e%3c/svg%3e");
}

/* ── Botones (Bootstrap y variantes del sitio) ──
   Todos los .btn salen de los tokens --btn-*: misma píldora, mismos altos
   (el alto sale del padding, así el texto largo puede partirse en dos
   líneas sin desbordar) y la letra en negrita. */
.btn {
  --bs-btn-padding-x: 18px;
  --bs-btn-padding-y: calc((var(--btn-h-md) - var(--btn-fs) * 1.5 - 2px) / 2);
  --bs-btn-font-size: var(--btn-fs);
  --bs-btn-font-weight: var(--btn-fw);
  --bs-btn-border-radius: var(--btn-radius);
  --bs-btn-focus-box-shadow: var(--focus-ring);
}
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-x: 13px;
  --bs-btn-padding-y: calc((var(--btn-h-sm) - var(--btn-fs-sm) * 1.5 - 2px) / 2);
  --bs-btn-font-size: var(--btn-fs-sm);
  --bs-btn-border-radius: var(--btn-radius);
}
.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-x: 24px;
  --bs-btn-padding-y: calc((var(--btn-h-lg) - var(--btn-fs-lg) * 1.5 - 2px) / 2);
  --bs-btn-font-size: var(--btn-fs-lg);
  --bs-btn-border-radius: var(--btn-radius);
}
/* Pegado a un campo (buscadores del panel) va con el radio del campo: una
   píldora al lado de un rectángulo redondeado se veía despareja. */
.input-group > .btn { --bs-btn-border-radius: var(--bs-border-radius); }
.input-group-sm > .btn { --bs-btn-border-radius: var(--bs-border-radius-sm); }
.btn-link { --bs-btn-font-weight: var(--fw-semibold); }

/* Principal: azul de la marca, plano. */
.btn-primary, .btn-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--btn-primary-bg);
  --bs-btn-border-color: var(--btn-primary-bg);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--btn-primary-bg-hover);
  --bs-btn-hover-border-color: var(--btn-primary-bg-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-900);
  --bs-btn-active-border-color: var(--primary-900);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--primary-400);
  --bs-btn-disabled-border-color: var(--primary-400);
}
/* Secundario: blanco con borde gris y texto azul; al pasar, celeste suave. */
.btn-outline-primary, .btn-outline-navy, .btn-outline-secondary, .btn-ghost {
  --bs-btn-color: var(--btn-secondary-fg);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--btn-secondary-border);
  --bs-btn-hover-color: var(--primary-800);
  --bs-btn-hover-bg: var(--btn-secondary-hover-bg);
  --bs-btn-hover-border-color: var(--btn-secondary-hover-border);
  --bs-btn-active-color: var(--primary-900);
  --bs-btn-active-bg: var(--primary-100);
  --bs-btn-active-border-color: var(--primary-300);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: var(--neutral-border);
}
.btn-outline-secondary { --bs-btn-color: var(--text-default); }
/* Terciario: sin borde ni fondo hasta que se pasa por encima. */
.btn-ghost { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; }
.btn-secondary {
  --bs-btn-color: var(--text-default);
  --bs-btn-bg: var(--neutral-bg);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-strong);
  --bs-btn-hover-bg: var(--neutral-border);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text-strong);
  --bs-btn-active-bg: #E4E7EC;
  --bs-btn-active-border-color: var(--border-strong);
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--success-solid);
  --bs-btn-border-color: var(--success-solid);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #085D3A;
  --bs-btn-hover-border-color: #085D3A;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #074D31;
  --bs-btn-active-border-color: #074D31;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #47CD89;
  --bs-btn-disabled-border-color: #47CD89;
}
.btn-outline-success {
  --bs-btn-color: var(--success-fg);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--success-border);
  --bs-btn-hover-color: var(--success-fg);
  --bs-btn-hover-bg: var(--success-bg);
  --bs-btn-hover-border-color: #75E0A7;
  --bs-btn-active-color: #085D3A;
  --bs-btn-active-bg: #DCFAE6;
  --bs-btn-active-border-color: #75E0A7;
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--danger-solid);
  --bs-btn-border-color: var(--danger-solid);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--danger-fg);
  --bs-btn-hover-border-color: var(--danger-fg);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #912018;
  --bs-btn-active-border-color: #912018;
}
/* Peligro suave: acciones destructivas que no son la principal (Borrar,
   Rechazar). Antes el hover se llenaba de rojo y asustaba. */
.btn-outline-danger, .btn-danger-soft {
  --bs-btn-color: var(--danger-fg);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--danger-border);
  --bs-btn-hover-color: var(--danger-fg);
  --bs-btn-hover-bg: var(--danger-bg);
  --bs-btn-hover-border-color: #FDA29B;
  --bs-btn-active-color: #912018;
  --bs-btn-active-bg: #FEE4E2;
  --bs-btn-active-border-color: #FDA29B;
  --bs-btn-disabled-color: #F97066;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: var(--danger-border);
}
.btn-danger-soft { --bs-btn-bg: var(--danger-bg); }
.btn-warning {
  --bs-btn-color: var(--text-strong);
  --bs-btn-bg: #FDB022;
  --bs-btn-border-color: #FDB022;
  --bs-btn-hover-color: var(--text-strong);
  --bs-btn-hover-bg: var(--warning-solid);
  --bs-btn-hover-border-color: var(--warning-solid);
  --bs-btn-active-color: var(--text-strong);
  --bs-btn-active-bg: #DC6803;
  --bs-btn-active-border-color: #DC6803;
}

/* ── Etiqueta de estado (.tag) ──
   Un solo componente para «Aprobado», «Por revisar», «Rechazado», etc.
   Los chips anteriores (conv-estado, segui-chip, ficha-estado, dash-pill,
   conv-chip, convl-etiqueta, cvd-estado) se quedan con su nombre pero usan
   estas mismas medidas y colores.
     <span class="tag is-ok"><i class="bi bi-check2"></i> Aprobado</span>
     <span class="tag tag-sm tag-dot is-warn">Por revisar</span> */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: var(--tag-h); padding: 0 var(--tag-px);
  border: 1px solid var(--neutral-border); border-radius: var(--tag-radius);
  background: var(--neutral-bg); color: var(--neutral-fg);
  font-size: var(--tag-fs); font-weight: var(--tag-fw); line-height: 1.2;
  white-space: nowrap; vertical-align: middle; text-decoration: none;
}
.tag > .bi, .tag > .icon { flex-shrink: 0; font-size: 1.05em; line-height: 1; }
.tag > .icon { width: 1.1em; height: 1.1em; }
.tag-sm { --tag-h: 20px; --tag-px: 8px; }
.tag-dot::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.is-ok      { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.tag.is-warn    { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.tag.is-danger  { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger-border); }
.tag.is-info    { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-border); }
.tag.is-primary { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-100); }
.tag.is-neutral { background: var(--neutral-bg); color: var(--neutral-fg); border-color: var(--neutral-border); }

/* ── Insignias de Bootstrap (.badge) ──
   Mismo tamaño mínimo, peso y forma que .tag; los colores salen de las
   variables --bs-* mapeadas a la marca en :root. Antes medían .75em del
   texto que las rodea y en letra chica quedaban en 9-10px. */
.badge {
  --bs-badge-font-size: max(.75em, var(--fs-xs));
  --bs-badge-font-weight: var(--fw-bold);
  --bs-badge-padding-x: .7em;
  --bs-badge-padding-y: .38em;
  --bs-badge-border-radius: var(--radius-pill);
}
/* Sobre el ámbar el texto blanco no se lee (2.3:1): va oscuro, como en
   .btn-warning. Cubre «En revisión» del panel, que arma bg-{{ estado }}. */
.badge.bg-warning { color: var(--text-strong); }

/* ── Tablas ──
   Encabezado chico en mayúsculas sobre gris muy claro, filas separadas por
   una línea suave y el hover con un velo azul de la marca: el mismo
   lenguaje que la tabla de participantes de Convocatorias. */
.table {
  --bs-table-color: var(--text-default);
  --bs-table-border-color: var(--neutral-border);
  --bs-table-striped-bg: rgba(16, 24, 40, .025);
  --bs-table-hover-bg: rgba(var(--primary-rgb), .035);
  --bs-table-hover-color: var(--text-strong);
}
.table > thead > tr > th {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
/* Los botones de una fila no se parten en dos líneas («Revisar y
   Aprobar»): la columna de acciones toma el ancho que necesita. */
.table .btn { white-space: nowrap; }
.table-light {
  --bs-table-color: var(--text-muted);
  --bs-table-bg: #F9FAFB;
  --bs-table-border-color: var(--neutral-border);
  --bs-table-striped-bg: #F2F4F7;
  --bs-table-hover-bg: #F2F4F7;
}
/* En tablas densas los botones chicos se quedan en 34px aunque sea móvil. */
.table { --btn-h-sm: 34px; }

/* ── Avisos, modales, menús, tarjetas ── */
.alert {
  --bs-alert-border-radius: var(--radius-md);
  --bs-alert-padding-y: .8rem;
  font-size: var(--fs-md);
}
.alert-light { --bs-alert-color: var(--text-default); --bs-alert-bg: #fff; --bs-alert-border-color: var(--card-border); }
.modal {
  --bs-modal-border-color: transparent;
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-header-border-color: var(--neutral-border);
  --bs-modal-footer-border-color: var(--neutral-border);
}
.modal-content { box-shadow: var(--shadow-lg); }
.modal-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-heading); }
.dropdown-menu {
  --bs-dropdown-border-color: var(--neutral-border);
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-link-color: var(--text-default);
  --bs-dropdown-link-hover-color: var(--text-strong);
  --bs-dropdown-link-hover-bg: var(--primary-50);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--primary);
  --bs-dropdown-font-size: var(--fs-md);
  box-shadow: var(--shadow-md);
}
.card {
  --bs-card-border-color: var(--card-border);
  --bs-card-border-radius: var(--radius-md);
  --bs-card-cap-bg: #F9FAFB;
}
.list-group { --bs-list-group-active-bg: var(--primary); --bs-list-group-active-border-color: var(--primary); }
.progress { --bs-progress-bar-bg: var(--primary); }

/* ── Pestañas y píldoras de navegación ──
   Las pestañas del panel (Solicitudes, Usuarios…) salían con el azul
   eléctrico de Bootstrap. */
.nav-pills {
  --bs-nav-pills-border-radius: var(--radius-pill);
  --bs-nav-pills-link-active-bg: var(--primary);
  --bs-nav-pills-link-active-color: #fff;
}
.nav-pills .nav-link { color: var(--text-default); font-weight: var(--fw-semibold); }
.nav-pills .nav-link:not(.active):hover { color: var(--primary-800); background: var(--primary-50); }
.nav-pills .nav-link.active { color: #fff; }
.nav-tabs {
  --bs-nav-tabs-border-color: var(--neutral-border);
  --bs-nav-tabs-link-hover-border-color: transparent transparent var(--neutral-border);
  --bs-nav-tabs-link-active-color: var(--primary-800);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--primary);
}
.nav-tabs .nav-link { color: var(--text-muted); font-weight: var(--fw-semibold); border-width: 0 0 2px; margin-bottom: -1px; }
.nav-tabs .nav-link:hover { color: var(--primary-800); }
.nav-tabs .nav-link.active { border-bottom-color: var(--primary); }

/* ── Utilidades ──
   Para no escribir style="…" en las plantillas (el panel tenía más de
   cien). Llevan !important como las de Bootstrap. */
.text-xs   { font-size: var(--fs-xs) !important; }
.text-sm   { font-size: var(--fs-sm) !important; }
.text-md   { font-size: var(--fs-md) !important; }
.text-base { font-size: var(--fs-base) !important; }
.text-lg   { font-size: var(--fs-lg) !important; }
.text-xl   { font-size: var(--fs-xl) !important; }
.text-strong  { color: var(--text-strong) !important; }
.text-default { color: var(--text-default) !important; }
.text-soft    { color: var(--text-muted) !important; }
.fw-semibold-ui { font-weight: var(--fw-semibold) !important; }
.measure   { max-width: 70ch; }
.text-pre  { white-space: pre-wrap; }
/* Punto de estado (bi-circle-fill) junto a un texto: es decorativo, el
   estado lo dice el texto de al lado. */
.icon-dot  { font-size: 8px; vertical-align: middle; }
.field-w-sm { max-width: 170px; }
.field-w-md { max-width: 260px; }
.field-w-lg { max-width: 320px; }
.surface {
  background: var(--surface); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}

/* ── Móvil ──
   iPhone acerca la página al enfocar un campo con letra de menos de 16px y
   no la devuelve: en pantallas chicas todos los campos van a 16px. Lleva
   !important porque los buscadores del sitio fijan su tamaño con selectores
   más específicos. Los botones chicos suben a 40px para el dedo (salvo en
   tablas, ver .table arriba). */
@media (max-width: 767.98px) {
  :root { --btn-h-sm: 40px; }
}
/* Los 16px también en cualquier pantalla táctil: un iPad en vertical
   (768-834px) quedaba fuera del corte por ancho (M-16, 2026-11-02). */
@media (max-width: 767.98px), (pointer: coarse) {
  :is(textarea, select, .form-control, .form-select, input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="image"], [type="color"])) { font-size: 16px !important; }
}

/* ── Colors ── */
.text-navy  { color: var(--navy) !important; }
.text-gold  { color: var(--gold) !important; }
/* Para texto real (links, encabezados) en vez de íconos/insignias: ver el
   comentario de --gold-dark arriba. */
.text-gold-dark  { color: var(--gold-dark) !important; }
.text-gold-dark:hover  { color: var(--navy) !important; }
.bg-navy    { background-color: var(--navy) !important; }

/* Desde 2026-11-06 esta hoja tiene solo el sistema de diseño (tokens, base y
   componentes). El resto de lo que había acá sigue, en el mismo orden, en
   sitio-navegacion.css, sitio-directorio.css,
   sitio-componentes.css y sitio-convocatorias.css. base.html las carga una tras otra
   y ese orden importa: a igual especificidad gana la regla que viene después. */