/* =============================================================================
   MediSuite — sistema de diseño. Archivo único, listo para pegar.
   Orden de carga:  bootstrap.min.css  →  medisuite-tokens.css
   Ningún componente usa un hexadecimal directo: todo sale de estas variables.

   v0.4 · 31 jul 2026
   Cambios vs v0.3 en la nota al pie de este archivo.
   ========================================================================== */

/* ============================================================================
   1. TIPOGRAFÍA AUTOALOJADA
   NO se puede incrustar Iowan Old Style. Es un tipo comercial de Bitstream que
   Apple licencia y distribuye con macOS; la copia instalada no otorga derechos
   de web font ni de autoalojado, y no existe licencia web a la venta por
   separado. Convertirla a woff2 y servirla sería una violación de licencia.

   Literata — SIL Open Font License 1.1: uso comercial, autoalojado,
   incrustación y modificación permitidos, sin atribución en la interfaz. Es el
   equivalente más cercano que sí se puede servir: oldstyle de altura de x
   grande, serifas robustas y cifras alineadas, diseñada para pantalla.

   Un solo archivo, un solo peso (600), sólo para títulos:
     pyftsubset Literata-SemiBold.ttf \
       --unicodes=U+0020-007E,U+00A0-00FF,U+2013,U+2014,U+2018-201D,U+2026,U+20AC \
       --layout-features=kern,liga --flavor=woff2 --output-file=literata-600.woff2
   Peso resultante ≈ 29 KB. Confírmalo al generar el archivo: si tu build no
   recorta las tablas de OpenType puede irse a ~48 KB, y en ese caso agrega
   --desubroutinize.

   font-display: swap, y el respaldo en orden de cercanía: Iowan Old Style donde
   exista (macOS), Palatino Linotype en Windows, Georgia como último recurso.
   Así, si el woff2 falta o falla, nadie cae en la opción más lejana.
   ========================================================================== */
@font-face{
  font-family:"MediSuite Serif";
  src:url("/fuentes/literata-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+2013,U+2014,U+2018-201D,U+2026,U+20AC;
}

/* ============================================================================
   2. TOKENS — TEMA CLARO (predeterminado)
   Nomenclatura por función, nunca por apariencia.
   Prefijos, uno por concepto, sin solapamiento:
     --fuente-*   familia tipográfica
     --tipo-*     categoría clínica (tipo de consulta)
     --texto-*    tinta
     --accion-*   acción del producto
     --chrome-*   armazón oscuro (menú lateral, franja del login)
   ========================================================================== */
:root{
  /* ---- 2.1 superficies: de la más al fondo a la más al frente ---- */
  --fondo:              #F2F5F1;  /* área de trabajo; nunca blanco puro */
  --superficie:         #FFFFFF;  /* tarjetas, tablas, diálogos */
  --superficie-hundida: #F8FAF7;  /* encabezado de tabla, campo, barra, fila alterna */
  --superficie-inerte:  #EDF2EE;  /* sólo lectura, deshabilitado */
  --linea:              #DCE4DE;  /* separador */
  --linea-fuerte:       #C1CEC7;  /* borde de control interactivo */
  --linea-decorativa:   #7E8D87;  /* ex --ink-3: iconografía y trazos, NUNCA texto */

  /* ---- 2.2 tinta ---- */
  --texto:        #16211E;  /* 16.5:1 sobre superficie */
  --texto-2:      #4B5A55;  /* 7.3:1 */
  --texto-apoyo:  #64726C;  /* 5.0:1 — sustituye al #7E8D87 de v0.3 (3.5:1) */
  --texto-inerte: #7E8D87;  /* deshabilitado: 3.1:1, exento por WCAG 1.4.3 */
  --tinta-sobre-color: #FFFFFF; /* texto encima de un relleno de categoría */

  /* ---- 2.3 acción e identidad ---- */
  --accion:         #1F7A6B;
  --accion-hover:   #1B6D5F;
  --accion-activa:  #166054;
  --accion-tinta:   #FFFFFF;  /* 5.2:1 sobre --accion */
  --accion-tenue:   #E0F0EA;  /* relleno de estado seleccionado */
  --accion-texto:   #166054;  /* botón terciario y enlaces: 7.4:1 */
  --marca-cobalto:  #2A4E9B;  /* sitio público, correo, franja de marca del login */

  /* ---- 2.4 foco ---- */
  --foco:        #1F7A6B;   /* 5.2:1 contra superficie; >3:1 exigido a no-texto */
  --foco-chrome: #7ED8C4;   /* 9.8:1 contra --chrome-fondo */
  --foco-grosor: 3px;
  --foco-salto:  2px;

  /* ---- 2.5 retroalimentación DEL SISTEMA (no clínica) ---- */
  --exito:         #1F7A6B;  --exito-tinta:    #166054;  --exito-fondo:    #E0F0EA;
  --atencion:      #B07213;  --atencion-tinta: #8F5C0E;  --atencion-fondo: #F9EDD8;
  --error:         #A8332B;  --error-tinta:    #A8332B;  --error-fondo:    #FBE4E2;
  /* --error es un fallo de la aplicación; --tipo-urgencia es una categoría
     clínica. Comparten familia de tono y NO deben compartir variable. */

  /* ---- 2.6 código clínico — cuatro papeles por categoría ----
     -base    barra lateral, borde, punto de leyenda
     -tinta   texto sobre superficie o sobre -fondo (mínimo 4.5:1)
     -fondo   relleno tenue del bloque
     -relleno relleno sólido (estado «en consulta»), con --tinta-sobre-color
     El cuarto papel no estaba en el plan: ver nota (B) al pie.            */
  --tipo-primera:       #2B5CA8;  --tipo-primera-tinta:       #2B5CA8;
  --tipo-primera-fondo: #E6EDFA;  --tipo-primera-relleno:     #2B5CA8;

  --tipo-seguimiento:       #1F7A6B;  --tipo-seguimiento-tinta:   #166054;
  --tipo-seguimiento-fondo: #DEF0EA;  --tipo-seguimiento-relleno: #1F7A6B;

  --tipo-estudios:       #B07213;  --tipo-estudios-tinta:   #8F5C0E;
  --tipo-estudios-fondo: #F9EDD8;  --tipo-estudios-relleno: #8F5C0E;

  --tipo-procedimiento:       #7A4A86;  --tipo-procedimiento-tinta:   #7A4A86;
  --tipo-procedimiento-fondo: #F1E7F4;  --tipo-procedimiento-relleno: #7A4A86;

  --tipo-urgencia:       #A8332B;  --tipo-urgencia-tinta:   #A8332B;
  --tipo-urgencia-fondo: #FBE4E2;  --tipo-urgencia-relleno: #A8332B;

  /* AÑADIDO (no viene de Claude Design): la cita sin tipo, TipoConsulta = 0.
     Gris verdoso porque no significa nada clínico, que es la regla del sistema.
     La tinta es --texto-2 (#4B5A55) y da 6.9:1 sobre su fondo. */
  --tipo-sin-clasificar:       #64726C;  --tipo-sin-clasificar-tinta:   #4B5A55;
  --tipo-sin-clasificar-fondo: #EDF2EE;  --tipo-sin-clasificar-relleno: #64726C;

  /* ---- 2.7 figura redundante por categoría: es contenido, no adorno ---- */
  --figura-primera:"◆"; --figura-seguimiento:"●"; --figura-estudios:"▲";
  --figura-procedimiento:"■"; --figura-urgencia:"✚";
  /* AÑADIDO (no viene de Claude Design). Sexta categoría: la cita cuyo tipo nadie
     ha dicho — TipoConsulta = 0 en clinicas.Agenda. Hace falta porque el directorio
     público y las citas viejas llegan sin clasificar, y pintarlas de cualquiera de
     las cinco sería inventar un dato clínico.
     Gris verdoso a propósito: la regla del sistema es que si un color no significa
     nada clínico, es gris. Y el círculo VACÍO se distingue del ● relleno de
     Seguimiento incluso en blanco y negro. */
  --figura-sin-clasificar:"○";

  /* ---- 2.8 tipografía ---- */
  --fuente-titulo:"MediSuite Serif","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --fuente-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fuente-cifra:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;

  /* Literata tiene proporciones cercanas a Iowan Old Style: la escala original
     se conserva sin recortes */
  --titulo-1:34px; --titulo-2:30px; --titulo-3:24px; --titulo-4:19px;
  --texto-base:16px; --texto-chico:14.5px; --texto-micro:12.5px;
  /* 12.5px es el piso absoluto y sólo para etiquetas en mayúsculas con peso 700 */

  /* ---- 2.9 forma, profundidad, ritmo ---- */
  --radio-control:10px; --radio-tarjeta:14px; --radio-pastilla:999px;

  /* Alto de una hora en la rejilla de la Agenda. SÍ viene de Claude Design
     —está en la maqueta— pero se quedó fuera al destilar este archivo, y sin él
     `height: var(--px-hora)` es una declaración inválida: la columna de horas se
     colapsa al alto del texto y las líneas de la rejilla DESAPARECEN, porque el
     repeating-linear-gradient también depende de esta variable.
     Tiene gemelo en C#: Agenda.razor usa PxHora = 72 para colocar cada cita. */
  --px-hora:72px;
  --sombra:0 1px 2px rgba(22,33,30,.06), 0 8px 24px -12px rgba(22,33,30,.22);
  --sombra-alta:0 24px 60px -18px rgba(22,33,30,.38);
  --paso:4px;  /* escala 4·8·12·16·22·26·34 */

  /* ---- 2.10 densidad de tabla ---- */
  --fila-comoda:44px;    /* predeterminada: listados que se leen y se tocan */
  --fila-compacta:34px;  /* opt-in por usuario: revisión de miles de renglones */
  --celda-x:14px; --celda-y:11px;
  --fila-alterna:var(--superficie-hundida);
  --fila-hover:var(--superficie-hundida);
  --fila-seleccionada:var(--accion-tenue);

  /* ---- 2.11 armazón oscuro (constante en tema claro y oscuro) ---- */
  --chrome-fondo:#16211E; --chrome-fondo-2:#1B2522; --chrome-fondo-3:#212C29;
  --chrome-linea:#2A3733; --chrome-linea-fuerte:#3D4D48;
  --chrome-texto:#E7EEEA;        /* 14.1:1 */
  --chrome-texto-2:#C7D4CF;      /* 10.8:1 */
  --chrome-texto-apoyo:#A9B8B2;  /*  8.0:1 — sustituye al #7C8B85 (4.6:1) */

  /* ---- 2.12 impresión láser B/N ---- */
  --papel:#FFFFFF; --tinta:#000000; --tinta-apoyo:#4A4A4A;
}

/* ============================================================================
   3. TEMA OSCURO — turno nocturno
   Sólo intercambio de variables; ni un componente cambia.
   Se activa con data-tema="oscuro" en <html>, guardado por usuario.
   A propósito NO se usa @media (prefers-color-scheme:dark): que la recepción
   amanezca en modo oscuro porque Windows está en oscuro es un defecto, no una
   cortesía. Ver nota (C) al pie.
   ========================================================================== */
[data-tema="oscuro"]{
  --fondo:#0E1513; --superficie:#161F1C; --superficie-hundida:#1B2522;
  --superficie-inerte:#212C29; --linea:#2A3733; --linea-fuerte:#3D4D48;
  --linea-decorativa:#5C6B65;

  --texto:#E7EEEA;        /* 14.3:1 sobre --superficie */
  --texto-2:#C7D4CF;
  --texto-apoyo:#A9B8B2;  /* 7.6:1 */
  --texto-inerte:#6E7D77;
  --tinta-sobre-color:#0E1513;

  --accion:#46B39D; --accion-hover:#55BFA9; --accion-activa:#63C7B2;
  --accion-tinta:#06201A;  /* 6.7:1 sobre --accion */
  --accion-tenue:#16302A; --accion-texto:#5FC7B2;

  --foco:#7ED8C4; --foco-chrome:#7ED8C4;

  --exito:#46B39D; --exito-tinta:#5FC7B2; --exito-fondo:#13312C;
  --atencion:#E0AE55; --atencion-tinta:#E0AE55; --atencion-fondo:#332711;
  --error:#F08B82; --error-tinta:#F08B82; --error-fondo:#3B1B19;

  /* los saturados oscuros desaparecen sobre fondo oscuro: misma familia, más luz */
  --tipo-primera:#83ACEA; --tipo-primera-tinta:#83ACEA;
  --tipo-primera-fondo:#1C2B45; --tipo-primera-relleno:#83ACEA;
  --tipo-seguimiento:#5FC7B2; --tipo-seguimiento-tinta:#5FC7B2;
  --tipo-seguimiento-fondo:#13312C; --tipo-seguimiento-relleno:#5FC7B2;
  --tipo-estudios:#E0AE55; --tipo-estudios-tinta:#E0AE55;
  --tipo-estudios-fondo:#332711; --tipo-estudios-relleno:#E0AE55;
  --tipo-procedimiento:#C69AD1; --tipo-procedimiento-tinta:#C69AD1;
  --tipo-procedimiento-fondo:#2D1F34; --tipo-procedimiento-relleno:#C69AD1;
  --tipo-urgencia:#F08B82; --tipo-urgencia-tinta:#F08B82;
  --tipo-urgencia-fondo:#3B1B19; --tipo-urgencia-relleno:#F08B82;
  /* AÑADIDO: la cita sin tipo. Gris claro sobre superficie hundida. */
  --tipo-sin-clasificar:#A9B8B2; --tipo-sin-clasificar-tinta:#C7D4CF;
  --tipo-sin-clasificar-fondo:#212C29; --tipo-sin-clasificar-relleno:#A9B8B2;

  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --sombra-alta:0 24px 60px -18px rgba(0,0,0,.8);

  --fila-alterna:var(--superficie-hundida);
  --fila-hover:var(--superficie-hundida);
}
[data-tema="claro"]{color-scheme:light}
[data-tema="oscuro"]{color-scheme:dark}

/* ============================================================================
   4. BASE
   ========================================================================== */
*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--fuente-ui); font-size:var(--texto-base); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.titulo{
  font-family:var(--fuente-titulo); font-weight:600;
  letter-spacing:-.01em; line-height:1.15; text-wrap:balance;
}
h1{font-size:var(--titulo-1)} h2{font-size:var(--titulo-2)}
h3{font-size:var(--titulo-3)} h4{font-size:var(--titulo-4)}
p{text-wrap:pretty}
a{color:var(--accion-texto); font-weight:600; text-decoration:none}
a:hover{color:var(--accion); text-decoration:underline}
.cifra,.tabular{font-family:var(--fuente-cifra); font-variant-numeric:tabular-nums}
:focus-visible{
  outline:var(--foco-grosor) solid var(--foco);
  outline-offset:var(--foco-salto); border-radius:4px;
}
/* el menú lateral es oscuro: el anillo verde de acción se pierde ahí */
.chrome :focus-visible,[data-chrome] :focus-visible{outline-color:var(--foco-chrome)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================================
   5. ESTADOS FORMALIZADOS — lo que v0.3 no definía
   ========================================================================== */

/* 5.1 sólo lectura: se lee, se copia, no se edita. Sin borde de foco de edición. */
.es-solo-lectura,input[readonly],textarea[readonly]{
  background:var(--superficie-inerte); color:var(--texto-2);
  border-color:var(--linea); cursor:default;
}
.es-solo-lectura:focus-visible{outline-color:var(--linea-fuerte)}

/* 5.2 deshabilitado: no recibe foco ni cursor. El color NO es la única señal:
   va acompañado de cursor:not-allowed y de aria-disabled en el markup. */
.es-inerte,:disabled,[aria-disabled="true"]{
  background:var(--superficie-inerte); color:var(--texto-inerte);
  border-color:var(--linea); cursor:not-allowed; box-shadow:none; opacity:1;
}

/* 5.3 tabla: densidad, fila alterna, hover, selección */
.tabla{width:100%;border-collapse:collapse;font-size:var(--texto-chico)}
.tabla th{
  text-align:left; padding:var(--celda-y) var(--celda-x);
  background:var(--superficie-hundida); border-bottom:1px solid var(--linea);
  font-size:var(--texto-micro); letter-spacing:.09em; text-transform:uppercase;
  color:var(--texto-2); font-weight:700; white-space:nowrap;
}
.tabla td{padding:var(--celda-y) var(--celda-x);border-bottom:1px solid var(--linea)}
.tabla tbody tr{height:var(--fila-comoda)}
.tabla.densidad-compacta tbody tr{height:var(--fila-compacta)}
.tabla.densidad-compacta td{padding:5px var(--celda-x)}
/* fila alterna en hover, no rayado fijo: el rayado permanente compite con la
   barra de color de categoría, que es la señal que sí significa algo */
.tabla tbody tr:hover{background:var(--fila-hover)}
.tabla tbody tr[aria-selected="true"]{background:var(--fila-seleccionada)}
.tabla.rayada tbody tr:nth-child(even){background:var(--fila-alterna)}

/* 5.4 tres niveles de botón, con los cuatro estados de cada uno */
.b1,.b2,.b3{
  font:inherit; font-weight:700; border-radius:var(--radio-control);
  cursor:pointer; transition:background .15s,border-color .15s,color .15s;
}
.b1{background:var(--accion);border:1px solid var(--accion);color:var(--accion-tinta);padding:11px 20px;box-shadow:var(--sombra)}
.b1:hover{background:var(--accion-hover);border-color:var(--accion-hover)}
.b1:active{background:var(--accion-activa);border-color:var(--accion-activa);box-shadow:none}
.b1:disabled{background:var(--superficie-inerte);border-color:var(--linea);color:var(--texto-inerte);box-shadow:none}
.b2{background:var(--superficie);border:1px solid var(--linea-fuerte);color:var(--texto-2);padding:10px 17px;font-weight:600}
.b2:hover{background:var(--superficie-hundida);color:var(--texto)}
.b2:active{background:var(--superficie-inerte)}
.b2:disabled{color:var(--texto-inerte);background:var(--superficie-inerte)}
.b3{background:none;border:0;color:var(--accion-texto);padding:6px 2px;font-weight:600;text-decoration:underline}
.b3:hover{color:var(--accion)}
.b3:active{color:var(--accion-activa)}
.b3:disabled{color:var(--texto-inerte);text-decoration:none;background:none}
/* 5.5 botón de ícono con tooltip: acción por renglón en tablas densas.
   El title nativo tarda ~1 s y no aparece con teclado; este tooltip sale al
   instante y también con :focus-visible. El aria-label es obligatorio e incluye
   el sujeto del renglón ("Editar datos de Guadalupe Cárdenas"). */
.bi{
  position:relative; width:36px; height:36px; display:grid; place-items:center;
  background:var(--superficie); border:1px solid var(--linea-fuerte);
  border-radius:8px; color:var(--texto-2); cursor:pointer;
}
.bi:hover{background:var(--superficie-hundida);color:var(--texto)}
.bi.principal{color:var(--accion-texto)}
.bi.principal:hover{background:var(--accion-tenue);border-color:var(--accion)}
.bi:disabled{background:var(--superficie-inerte);color:var(--texto-inerte);border-color:var(--linea);cursor:not-allowed}
.bi svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bi[data-tip]::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); right:0;
  background:var(--chrome-fondo); color:var(--chrome-texto);
  font-size:var(--texto-micro); font-weight:600; line-height:1.3;
  white-space:nowrap; padding:5px 9px; border-radius:7px;
  box-shadow:var(--sombra-alta); opacity:0; pointer-events:none;
  transition:opacity .12s .15s; z-index:20;
}
.bi[data-tip]:hover::after,.bi[data-tip]:focus-visible::after{opacity:1}
@media print{.bi{display:none}}

/* destructivo: variante de b2, nunca de b1. Borrar no es la acción principal. */
.b2.destructivo{color:var(--error-tinta);border-color:var(--error)}
.b2.destructivo:hover{background:var(--error-fondo)}

/* ============================================================================
   6. CATEGORÍA CLÍNICA — un solo lugar donde se aplican los cuatro papeles
   Uso: <span class="tipo t-urgencia">…</span>  |  data-relleno para el sólido
   ========================================================================== */
.t-primera      {--c:var(--tipo-primera);      --c-tinta:var(--tipo-primera-tinta);      --c-fondo:var(--tipo-primera-fondo);      --c-relleno:var(--tipo-primera-relleno);      --c-figura:var(--figura-primera)}
.t-seguimiento  {--c:var(--tipo-seguimiento);  --c-tinta:var(--tipo-seguimiento-tinta);  --c-fondo:var(--tipo-seguimiento-fondo);  --c-relleno:var(--tipo-seguimiento-relleno);  --c-figura:var(--figura-seguimiento)}
.t-estudios     {--c:var(--tipo-estudios);     --c-tinta:var(--tipo-estudios-tinta);     --c-fondo:var(--tipo-estudios-fondo);     --c-relleno:var(--tipo-estudios-relleno);     --c-figura:var(--figura-estudios)}
.t-procedimiento{--c:var(--tipo-procedimiento);--c-tinta:var(--tipo-procedimiento-tinta);--c-fondo:var(--tipo-procedimiento-fondo);--c-relleno:var(--tipo-procedimiento-relleno);--c-figura:var(--figura-procedimiento)}
.t-urgencia     {--c:var(--tipo-urgencia);     --c-tinta:var(--tipo-urgencia-tinta);     --c-fondo:var(--tipo-urgencia-fondo);     --c-relleno:var(--tipo-urgencia-relleno);     --c-figura:var(--figura-urgencia)}
.t-sin-clasificar{--c:var(--tipo-sin-clasificar);--c-tinta:var(--tipo-sin-clasificar-tinta);--c-fondo:var(--tipo-sin-clasificar-fondo);--c-relleno:var(--tipo-sin-clasificar-relleno);--c-figura:var(--figura-sin-clasificar)}
.tipo{
  display:inline-flex; align-items:center; gap:8px;
  border-left:4px solid var(--c); background:var(--c-fondo); color:var(--texto);
  border-radius:6px; padding:3px 9px;
  font-size:13px; font-weight:650; white-space:nowrap;
}
.tipo::before{content:var(--c-figura);font-family:var(--fuente-cifra);font-weight:700;color:var(--c-tinta)}
.tipo.solo-texto{background:none;border-left:0;padding:0;color:var(--c-tinta)}
.tipo[data-relleno]{background:var(--c-relleno);border-color:var(--c-relleno);color:var(--tinta-sobre-color)}
.tipo[data-relleno]::before{color:var(--tinta-sobre-color)}

/* ============================================================================
   7. PUENTE A BOOTSTRAP 5.3
   7.1 Lo que SÍ se resuelve asignando variables de Bootstrap.
   ========================================================================== */
:root{
  --bs-body-bg:var(--fondo);
  --bs-body-color:var(--texto);
  --bs-body-font-family:var(--fuente-ui);
  --bs-body-font-size:var(--texto-base);
  --bs-body-line-height:1.5;
  --bs-emphasis-color:var(--texto);
  --bs-secondary-color:var(--texto-2);
  --bs-tertiary-color:var(--texto-apoyo);
  --bs-secondary-bg:var(--superficie-hundida);
  --bs-tertiary-bg:var(--superficie-inerte);

  --bs-border-color:var(--linea);
  --bs-border-color-translucent:var(--linea);
  --bs-border-radius:var(--radio-control);
  --bs-border-radius-sm:8px;
  --bs-border-radius-lg:var(--radio-tarjeta);
  --bs-border-radius-xl:18px;
  --bs-border-radius-pill:var(--radio-pastilla);

  /* TRAMPA DE MANTENIMIENTO: Bootstrap necesita los colores también en decimal
     para las utilidades con opacidad (.text-primary, .bg-primary-subtle, etc.),
     y no acepta var() ahí. Cada tripleta de abajo es la repetición de un
     hexadecimal de la sección 2. Si cambia --accion, --exito, --atencion o
     --error, hay que actualizarlas A MANO, aquí y en el bloque oscuro de la
     línea siguiente. Ninguna herramienta va a avisar. */
  --bs-primary:var(--accion);
  --bs-primary-rgb:31,122,107;          /* = --accion #1F7A6B */
  --bs-primary-text-emphasis:var(--accion-texto);
  --bs-primary-bg-subtle:var(--accion-tenue);
  --bs-primary-border-subtle:var(--accion);
  --bs-success:var(--exito); --bs-success-rgb:31,122,107;
  --bs-success-text-emphasis:var(--exito-tinta);
  --bs-success-bg-subtle:var(--exito-fondo); --bs-success-border-subtle:var(--exito);
  --bs-warning:var(--atencion); --bs-warning-rgb:176,114,19;
  --bs-warning-text-emphasis:var(--atencion-tinta);
  --bs-warning-bg-subtle:var(--atencion-fondo); --bs-warning-border-subtle:var(--atencion);
  --bs-danger:var(--error); --bs-danger-rgb:168,51,43;
  --bs-danger-text-emphasis:var(--error-tinta);
  --bs-danger-bg-subtle:var(--error-fondo); --bs-danger-border-subtle:var(--error);

  --bs-link-color:var(--accion-texto);
  --bs-link-color-rgb:22,96,84;
  --bs-link-hover-color:var(--accion);
  --bs-link-hover-color-rgb:31,122,107;
  --bs-link-decoration:none;
  --bs-link-hover-decoration:underline;

  --bs-box-shadow:var(--sombra);
  --bs-box-shadow-lg:var(--sombra-alta);
  --bs-focus-ring-color:var(--foco);
  --bs-focus-ring-width:var(--foco-grosor);
  --bs-focus-ring-opacity:1;

  --bs-font-monospace:var(--fuente-cifra);
  --bs-heading-color:var(--texto);

  --bs-card-bg:var(--superficie);
  --bs-card-border-color:var(--linea);
  --bs-table-bg:var(--superficie);
  --bs-table-color:var(--texto);
  --bs-table-border-color:var(--linea);
  --bs-table-striped-bg:var(--fila-alterna);
  --bs-table-hover-bg:var(--fila-hover);
  --bs-table-active-bg:var(--fila-seleccionada);
}
[data-tema="oscuro"]{
  --bs-primary-rgb:70,179,157; --bs-success-rgb:70,179,157;
  --bs-warning-rgb:224,174,85; --bs-danger-rgb:240,139,130;
  --bs-link-color-rgb:95,199,178; --bs-link-hover-color-rgb:126,216,196;
}

/* ----------------------------------------------------------------------------
   7.2 Lo que NO se puede tematizar sólo con variables, y su regla.
   Cinco causas: (i) los colores de variante van compilados en la clase,
   (ii) hay SVG incrustados como data-URI con el color quemado dentro,
   (iii) la sombra de foco sale de una variable de Sass, no de CSS,
   (iv) los tokens de componente sólo existen dentro del ámbito de la clase,
   (v) nuestra forma difiere de la de Bootstrap (pestaña de 3 px, etc).
   -------------------------------------------------------------------------- */

/* (a) BOTONES. --bs-primary no pinta los botones: .btn-primary trae su propio
   juego de --bs-btn-* compilado. Hay que asignarlos dentro de la clase.
   Bootstrap calcula hover/active oscureciendo el color en tiempo de compilación,
   así que los cuatro estados van explícitos. */
.btn{--bs-btn-border-radius:var(--radio-control);--bs-btn-font-weight:700;transition:background-color .15s,border-color .15s,color .15s}
.btn-primary{
  --bs-btn-bg:var(--accion);              --bs-btn-border-color:var(--accion);
  --bs-btn-color:var(--accion-tinta);
  --bs-btn-hover-bg:var(--accion-hover);  --bs-btn-hover-border-color:var(--accion-hover);
  --bs-btn-hover-color:var(--accion-tinta);
  --bs-btn-active-bg:var(--accion-activa);--bs-btn-active-border-color:var(--accion-activa);
  --bs-btn-active-color:var(--accion-tinta);--bs-btn-active-shadow:none;
  --bs-btn-disabled-bg:var(--superficie-inerte);
  --bs-btn-disabled-border-color:var(--linea);
  --bs-btn-disabled-color:var(--texto-inerte);
  --bs-btn-focus-shadow-rgb:31,122,107;
  box-shadow:var(--sombra);
}
.btn-primary:disabled,.btn-primary.disabled{box-shadow:none;cursor:not-allowed}
/* nivel 2: en Bootstrap sería .btn-secondary (gris plomo) o .btn-outline-*.
   Ninguno encaja: usamos superficie con borde. */
.btn-secondary,.btn-outline-secondary{
  --bs-btn-bg:var(--superficie);           --bs-btn-border-color:var(--linea-fuerte);
  --bs-btn-color:var(--texto-2);           --bs-btn-font-weight:600;
  --bs-btn-hover-bg:var(--superficie-hundida);--bs-btn-hover-border-color:var(--linea-fuerte);
  --bs-btn-hover-color:var(--texto);
  --bs-btn-active-bg:var(--superficie-inerte);--bs-btn-active-border-color:var(--linea-fuerte);
  --bs-btn-active-color:var(--texto);      --bs-btn-active-shadow:none;
  --bs-btn-disabled-bg:var(--superficie-inerte);
  --bs-btn-disabled-border-color:var(--linea);
  --bs-btn-disabled-color:var(--texto-inerte);
  --bs-btn-focus-shadow-rgb:31,122,107;
}
/* nivel 3: .btn-link subraya al pasar el ratón; nosotros subrayamos siempre,
   porque un terciario sin subrayado no se lee como accionable */
.btn-link{
  --bs-btn-color:var(--accion-texto);   --bs-btn-hover-color:var(--accion);
  --bs-btn-active-color:var(--accion-activa);
  --bs-btn-disabled-color:var(--texto-inerte);
  --bs-btn-font-weight:600; text-decoration:underline;
}
.btn-link:disabled{text-decoration:none;cursor:not-allowed}
/* OJO al portar pantallas del GIN: aquí .btn-danger es un botón FANTASMA —fondo
   blanco, borde y texto rojos— no el rojo sólido de Bootstrap. Es decisión de
   diseño: en una pantalla clínica un «Eliminar» sólido grita más que el contenido.
   Las pantallas que se porten del GIN usan .btn-danger esperando el sólido, así
   que sus acciones destructivas van a verse más suaves. Revisar en la primera
   pantalla real con una acción destructiva y decidir ahí; si hace falta peso,
   la salida es una variante .btn-danger-solido, no cambiar ésta. */
.btn-danger{
  --bs-btn-bg:var(--superficie);        --bs-btn-border-color:var(--error);
  --bs-btn-color:var(--error-tinta);
  --bs-btn-hover-bg:var(--error-fondo); --bs-btn-hover-border-color:var(--error);
  --bs-btn-hover-color:var(--error-tinta);
  --bs-btn-active-bg:var(--error-fondo);--bs-btn-active-border-color:var(--error);
  --bs-btn-active-color:var(--error-tinta);
  --bs-btn-focus-shadow-rgb:168,51,43;
}
/* DECIDIDO el 4 de agosto de 2026, en la primera pantalla con acción destructiva
   (cancelar una cita en la Agenda), tal como pedía la nota de arriba.

   Se quedan LOS DOS, y cada uno tiene su sitio:
     .btn-danger          fantasma, para LLEGAR a la acción destructiva. Está en una
                          pantalla que se usa todo el día; no debe gritar.
     .btn-danger-solido   rojo de verdad, sólo para CONSUMARLA, dentro de una
                          confirmación de la que no se sale por accidente.

   Un solo estilo no servía: fantasma en los dos sitios deja el punto de no retorno
   con el mismo peso que «volver», y sólido en los dos convierte la pantalla en una
   alarma permanente. */
.btn-danger-solido{
  --bs-btn-bg:var(--error);             --bs-btn-border-color:var(--error);
  --bs-btn-color:var(--tinta-sobre-color);
  --bs-btn-hover-bg:var(--error-tinta); --bs-btn-hover-border-color:var(--error-tinta);
  --bs-btn-hover-color:var(--tinta-sobre-color);
  --bs-btn-active-bg:var(--error-tinta);--bs-btn-active-border-color:var(--error-tinta);
  --bs-btn-active-color:var(--tinta-sobre-color);
  --bs-btn-font-weight:700;
  --bs-btn-focus-shadow-rgb:168,51,43;
}

/* foco: Bootstrap sustituye el outline por box-shadow. En monitor de consultorio
   con reflejo, una sombra difusa se pierde: reponemos el anillo sólido. */
.btn:focus-visible,.page-link:focus-visible,.form-control:focus-visible,
.form-select:focus-visible,.form-check-input:focus-visible,.nav-link:focus-visible{
  outline:var(--foco-grosor) solid var(--foco);
  outline-offset:var(--foco-salto); box-shadow:none;
}

/* (b) CAMPOS. La sombra de foco viene de $input-btn-focus-color (Sass, azul
   quemado) y el ícono de validación es un data-URI con el color dentro. */
.form-control,.form-select{
  background-color:var(--superficie-hundida); color:var(--texto);
  border-color:var(--linea-fuerte); border-radius:var(--radio-control);
}
.form-control:focus,.form-select:focus{
  background-color:var(--superficie); border-color:var(--accion); box-shadow:none;
}
.form-control::placeholder{color:var(--texto-apoyo);opacity:1}
.form-control:disabled,.form-select:disabled{
  background-color:var(--superficie-inerte); color:var(--texto-inerte);
  border-color:var(--linea); cursor:not-allowed;
}
.form-control[readonly]{background-color:var(--superficie-inerte);color:var(--texto-2);border-color:var(--linea)}
/* El chevron de Bootstrap es un data-URI con el azul quemado dentro. Se SUSTITUYE
   por uno en --texto-2, igual que se hizo con casilla, radio e interruptor.
   La versión original de este archivo lo quitaba con background-image:none, y un
   <select> sin flecha no se lee como desplegable: el usuario no sabe que se abre. */
.form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234B5A55' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 10px;
  padding-right:34px;
}
.form-select:disabled{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237E8D87' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-tema="oscuro"] .form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C7D4CF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* Las reglas de validación de más abajo vuelven a poner background-image:none;
   se repone el chevron ahí también. */
.form-select.is-invalid,.was-validated .form-select:invalid,
.form-select.is-valid,.was-validated .form-select:valid{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234B5A55' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 10px;
  padding-right:34px;
}
.form-label{font-size:var(--texto-chico);font-weight:650;color:var(--texto);margin-bottom:6px}
.form-text{color:var(--texto-apoyo);font-size:var(--texto-micro)}
/* validación: 2 px de borde + fondo + ✕ monoespaciado en el texto de ayuda.
   Quitamos el ícono de fondo de Bootstrap: tapa el final del valor escrito. */
.was-validated .form-control:invalid,.form-control.is-invalid,
.was-validated .form-select:invalid,.form-select.is-invalid{
  border:2px solid var(--error); background-color:var(--error-fondo);
  background-image:none; padding-right:12px; box-shadow:none;
}
.was-validated .form-control:valid,.form-control.is-valid,
.was-validated .form-select:valid,.form-select.is-valid{
  border-color:var(--exito); background-image:none; padding-right:12px; box-shadow:none;
}
.invalid-feedback{color:var(--error-tinta);font-size:13.5px;font-weight:600}
.invalid-feedback::before{content:"✕ ";font-family:var(--fuente-cifra);font-weight:700}
.valid-feedback{color:var(--exito-tinta);font-size:13px;font-weight:600}
.valid-feedback::before{content:"✓ ";font-weight:700}

/* (c) CASILLAS, RADIOS E INTERRUPTOR. Los tres pintan su marca con un SVG
   data-URI de color fijo: sin regla propia siguen azules y con paloma blanca. */
.form-check-input{background-color:var(--superficie);border-color:var(--linea-fuerte)}
.form-check-input:checked{background-color:var(--accion);border-color:var(--accion)}
.form-check-input:checked[type="checkbox"]{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"]{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2364726C'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input:disabled{background-color:var(--superficie-inerte);border-color:var(--linea)}
.form-check-input:disabled~.form-check-label{color:var(--texto-inerte)}

/* (d) PESTAÑAS. .nav-tabs dibuja una caja con borde; nuestra pestaña es un
   subrayado de 3 px con contador de errores. Hay que reescribir el borde. */
.nav-tabs{border-bottom:1px solid var(--linea);gap:4px}
.nav-tabs .nav-link{
  border:0; border-bottom:3px solid transparent; border-radius:0;
  color:var(--texto-2); font-weight:500; padding:11px 15px; margin-bottom:-1px;
}
.nav-tabs .nav-link:hover{border-color:transparent transparent var(--linea-fuerte);background:none;color:var(--texto)}
.nav-tabs .nav-link.active{
  background:none; color:var(--texto); font-weight:700;
  border-bottom-color:var(--accion);
}
.nav-tabs .nav-link:disabled,.nav-tabs .nav-link.disabled{color:var(--texto-inerte);background:none}
.nav-pills .nav-link{color:var(--texto-2);border-radius:8px}
.nav-pills .nav-link.active{background:var(--accion);color:var(--accion-tinta)}

/* (e) TABLA. --bs-table-*-bg funcionan, pero Bootstrap los aplica con un
   box-shadow:inset sobre las celdas, así que el hover gana al color de la
   categoría si no fijamos la densidad y el borde aquí. */
.table{--bs-table-bg:var(--superficie);border-color:var(--linea);font-size:var(--texto-chico)}
.table>:not(caption)>*>*{padding:var(--celda-y) var(--celda-x);background-color:transparent;box-shadow:none}
.table>thead th{
  background:var(--superficie-hundida); color:var(--texto-2); font-weight:700;
  font-size:var(--texto-micro); letter-spacing:.09em; text-transform:uppercase;
  border-bottom:1px solid var(--linea); white-space:nowrap;
}
.table>tbody>tr{height:var(--fila-comoda)}
.table-hover>tbody>tr:hover>*{background-color:var(--fila-hover)}
.table-striped>tbody>tr:nth-of-type(odd)>*{background-color:var(--fila-alterna)}
.table.densidad-compacta>tbody>tr{height:var(--fila-compacta)}
.table.densidad-compacta>:not(caption)>*>*{padding:5px var(--celda-x)}

/* (f) PAGINACIÓN */
.pagination{
  --bs-pagination-color:var(--texto-2);
  --bs-pagination-bg:var(--superficie);
  --bs-pagination-border-color:var(--linea-fuerte);
  --bs-pagination-border-radius:9px;
  --bs-pagination-hover-color:var(--texto);
  --bs-pagination-hover-bg:var(--superficie-hundida);
  --bs-pagination-hover-border-color:var(--linea-fuerte);
  --bs-pagination-focus-bg:var(--superficie-hundida);
  --bs-pagination-focus-box-shadow:none;
  --bs-pagination-active-color:var(--accion-tinta);
  --bs-pagination-active-bg:var(--accion);
  --bs-pagination-active-border-color:var(--accion);
  --bs-pagination-disabled-color:var(--texto-inerte);
  --bs-pagination-disabled-bg:var(--superficie-inerte);
  --bs-pagination-disabled-border-color:var(--linea);
  gap:5px;
}
.page-link{font-family:var(--fuente-cifra);font-weight:700;font-variant-numeric:tabular-nums}

/* (g) AVISOS. .alert-danger y compañía traen color, fondo y borde compilados en
   la clase: las variables de tema no los alcanzan. */
.alert{border-radius:12px;border-width:1px;padding:13px 16px}
.alert-danger{--bs-alert-bg:var(--error-fondo);--bs-alert-color:var(--texto);--bs-alert-border-color:var(--error);border-left-width:4px}
.alert-success{--bs-alert-bg:var(--exito-fondo);--bs-alert-color:var(--texto);--bs-alert-border-color:var(--exito);border-left-width:4px}
.alert-warning{--bs-alert-bg:var(--atencion-fondo);--bs-alert-color:var(--texto);--bs-alert-border-color:var(--atencion);border-left-width:4px}
.alert-info{--bs-alert-bg:var(--accion-tenue);--bs-alert-color:var(--texto);--bs-alert-border-color:var(--accion);border-left-width:4px}
.alert-link{color:var(--accion-texto)}

/* (h) INSIGNIAS. .text-bg-* calcula el color de texto en compilación con
   color-contrast(): sobre nuestros tonos se equivoca. */
.badge{border-radius:var(--radio-pastilla);font-weight:700;padding:3px 11px;font-size:var(--texto-micro)}
.text-bg-primary{background-color:var(--accion)!important;color:var(--accion-tinta)!important}
.text-bg-success{background-color:var(--exito-fondo)!important;color:var(--texto)!important;border:1px solid var(--exito)}
.text-bg-warning{background-color:var(--atencion-fondo)!important;color:var(--texto)!important;border:1px solid var(--atencion)}
.text-bg-danger{background-color:var(--error-fondo)!important;color:var(--texto)!important;border:1px solid var(--error)}
.text-bg-secondary{background-color:var(--superficie-inerte)!important;color:var(--texto-2)!important;border:1px solid var(--linea-fuerte)}

/* (i) BOTÓN DE CIERRE Y ACORDEÓN: SVG data-URI negro/azul quemado */
.btn-close{
  background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='%234B5A55' stroke-width='2' stroke-linecap='round' d='M4 4l8 8M12 4l-8 8'/%3e%3c/svg%3e") center/14px auto no-repeat;
  opacity:1; border-radius:6px;
}
.btn-close:hover{background-color:var(--superficie-inerte)}
.accordion{--bs-accordion-bg:var(--superficie);--bs-accordion-border-color:var(--linea);--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-active-bg:var(--accion-tenue);--bs-accordion-active-color:var(--texto)}
.accordion-button::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234B5A55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23166054' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* (j) RESTO: tematizable por variable, se deja asignado */
.card{--bs-card-bg:var(--superficie);--bs-card-border-color:var(--linea);--bs-card-border-radius:var(--radio-tarjeta);box-shadow:var(--sombra)}
.dropdown-menu{--bs-dropdown-bg:var(--superficie);--bs-dropdown-border-color:var(--linea);--bs-dropdown-link-color:var(--texto-2);--bs-dropdown-link-hover-bg:var(--superficie-hundida);--bs-dropdown-link-hover-color:var(--texto);--bs-dropdown-link-active-bg:var(--accion);--bs-dropdown-link-active-color:var(--accion-tinta);--bs-dropdown-border-radius:12px;box-shadow:var(--sombra-alta)}
.modal{--bs-modal-bg:var(--superficie);--bs-modal-border-color:var(--linea);--bs-modal-border-radius:var(--radio-tarjeta);--bs-modal-header-border-color:var(--linea);--bs-modal-footer-border-color:var(--linea)}
.list-group{--bs-list-group-bg:var(--superficie);--bs-list-group-border-color:var(--linea);--bs-list-group-color:var(--texto);--bs-list-group-action-hover-bg:var(--superficie-hundida);--bs-list-group-active-bg:var(--accion);--bs-list-group-active-border-color:var(--accion);--bs-list-group-active-color:var(--accion-tinta);--bs-list-group-disabled-color:var(--texto-inerte)}
.offcanvas{--bs-offcanvas-bg:var(--superficie);--bs-offcanvas-border-color:var(--linea);--bs-offcanvas-color:var(--texto)}
.tooltip{--bs-tooltip-bg:var(--chrome-fondo);--bs-tooltip-color:var(--chrome-texto);--bs-tooltip-opacity:1}
.progress{--bs-progress-bg:var(--superficie-inerte);--bs-progress-bar-bg:var(--accion)}
.spinner-border,.spinner-grow{color:var(--accion)}
/* menú lateral oscuro: Bootstrap ya no trae .navbar-dark, se hace por ámbito */
.chrome{background:var(--chrome-fondo);color:var(--chrome-texto)}
.chrome .nav-link{color:var(--chrome-texto-2)}
.chrome .nav-link:hover{color:var(--chrome-texto);background:var(--chrome-fondo-3)}
.chrome .nav-link.active{background:var(--accion);color:var(--accion-tinta);font-weight:700}
.chrome .text-muted,.chrome .form-text{color:var(--chrome-texto-apoyo)!important}

/* ============================================================================
   8. IMPRESIÓN — láser blanco y negro
   La hoja no hereda la paleta. Las categorías se imprimen con el nombre escrito
   y un cintillo de borde: el relleno de color se vuelve un gris 60 % sucio que
   borra el texto encima.
   ========================================================================== */
@media print{
  :root,[data-tema="oscuro"]{
    --fondo:var(--papel); --superficie:var(--papel);
    --superficie-hundida:var(--papel); --superficie-inerte:var(--papel);
    --texto:var(--tinta); --texto-2:var(--tinta); --texto-apoyo:var(--tinta-apoyo);
    --texto-inerte:var(--tinta-apoyo);
    --linea:var(--tinta); --linea-fuerte:var(--tinta); --linea-decorativa:var(--tinta);
    --accion:var(--tinta); --accion-tinta:var(--papel); --accion-texto:var(--tinta);
    --accion-tenue:var(--papel);
    --sombra:none; --sombra-alta:none;
    --radio-control:3px; --radio-tarjeta:3px;
    --fila-alterna:var(--papel); --fila-hover:var(--papel);
  }
  .tipo,.badge,.alert{
    background:var(--papel)!important; color:var(--tinta)!important;
    border:1px solid var(--tinta)!important; border-left-width:1px!important;
    border-radius:3px; text-transform:uppercase; letter-spacing:.07em;
    font-weight:700; font-size:11.5px;
  }
  .tipo[data-relleno]{border-width:2px!important}
  .tipo.pendiente,.badge.pendiente{border-style:dashed!important}
  .card,.table{box-shadow:none!important;border:1px solid var(--tinta)}
  .no-imprimir,.pagination,.btn,.form-check-input{display:none!important}
  a::after{content:" (" attr(href) ")";font-size:10px;color:var(--tinta-apoyo)}
  tr,.card,.hoja-dia{break-inside:avoid}
}

/* ============================================================================
   9. NOTA DE CAMBIOS  v0.3 → v0.4
   (a) --ink-3 #7E8D87 (3.5:1) se partió en dos: --texto-apoyo #64726C (5.0:1)
       para texto y --linea-decorativa #7E8D87 para trazos. En el armazón
       oscuro, #7C8B85 (4.6:1) subió a --chrome-texto-apoyo #A9B8B2 (8.0:1).
   (b) Urgencia #C0453C → #A8332B (5.1:1 → 6.6:1): separa urgencia de
       seguimiento en protanopia, donde ambas convergían en el mismo gris.
   (c) Cada categoría clínica se desdobló. Pedí tres papeles y hacen falta
       CUATRO: base, tinta, fondo y relleno. El estado «en consulta» de la
       Agenda rellena el bloque con el color de la categoría y pone texto
       blanco encima; con estudios eso daba 4.0:1 y no pasa AA. Por eso
       --tipo-estudios-relleno es #8F5C0E (5.7:1) y no #B07213. Las otras
       cuatro categorías tienen relleno = base.
   (d) --tipo-titulo / --tipo-ui / --tipo-cifra se renombraron a --fuente-*:
       --tipo-* queda reservado a categoría clínica. Otras colisiones
       corregidas: --error (fallo del sistema) frente a --tipo-urgencia
       (categoría clínica) son variables distintas aunque compartan familia;
       --exito y --accion comparten valor y siguen separados, porque el día que
       el acento cambie el verde de «correcto» no debe seguirlo.
   (e) Se formalizaron: sólo lectura, deshabilitado, foco sobre fondo oscuro,
       dos densidades de tabla, fila alterna y tres niveles de botón con sus
       cuatro estados.
   (f) Se eliminó @media (prefers-color-scheme:dark): el tema es una decisión
       por usuario, no del sistema operativo.
   (g) Tipografía: Iowan Old Style sale del sistema porque no se puede incrustar
       (Bitstream/Apple, sin licencia web). La sustituye Literata (OFL 1.1)
       autoalojada, con Iowan y Palatino Linotype como respaldo local. La escala
       de títulos vuelve a 34/30/24 px.
   (h) Nuevo: .bi, botón de ícono con tooltip inmediato y aria-label obligatorio,
       para las acciones por renglón de las tablas densas.
   ========================================================================== */