/* ============================================================================
hci.css — sistema visual único de la aplicación
Derivado de /var/www/apps/condominio/app/static/css/{tokens,app}.css,
con el azul propio de hci como acento.
Reglas de composición (petición del usuario, 15/08/2026):
lo que se lee junto va junto · un dato, un lugar · etiquetas de una palabra ·
sin textos de ayuda permanentes · el aire separa grupos.
Densidad (decisión del usuario, 02/09/2026): la regla de "filas de ~28 px" se
retira. El cuerpo sube a 15 px y las filas y los campos se airean. Se sopesó
conservar la densidad en las tablas largas —un listado de 300 pacientes pasa a
ocupar casi el doble— y se prefirió el aire en toda la aplicación, para que no
convivan dos densidades distintas. Las demás reglas de arriba siguen vigentes.
Toda medida de color, tamaño y espacio sale de las variables de :root.
No escribir px ni hex sueltos en las plantillas.
========================================================================= */
:root{
/* ── Azul de acción ──
Un solo azul para todo lo que se puede pulsar, y un solo nombre. `#1266d6`
da 5,39:1 sobre blanco Y admite texto blanco encima con el mismo 5,39:1, así
que desaparece la pareja gráfico/sólido (`--accent` / `--accent-strong`) que
hacía falta con el `#48B7FF`: aquel no aguantaba texto blanco (2,1:1) y
necesitaba una variante oscura aparte. El alias se retiró el 02/09/2026. */
--accent:#1266D6; --accent-soft:#E9F1FD; --accent-ink:#FFFFFF;
/* El tinte deja de ser azul: los encabezados de tabla, la cabecera de la zona
de firma y las secciones plegables pasan al neutro cálido. Un azul pálido
sobre fondo crema se ve sucio. */
--accent-tint:#F3EDE6; --accent-tint-line:#E3D9CC;
/* Rojo institucional Cruz Roja: SOLO identidad (marca de la barra lateral).
Nunca como estado; para eso está --bad. */
--brand:#C8102E;
/* ── Neutros cálidos ──
El cambio de carácter frente al gris azulado anterior: el fondo se lee a
papel, no a panel de administración. `--ink` es tinta suave (13,7:1), no
negro duro; `--ink-strong` queda para cifras y títulos. */
--bg:#F4F0EA; --surface:#FFFFFF; --surface-2:#F8F5F0;
--ink:#332C27; --ink-strong:#211C19;
--muted:#6F665E; /* 4,95:1 sobre el fondo — cumple AA */
--muted-soft:#847A71; /* SOLO trazos de icono y separadores, nunca texto */
--line:#ECE5DB; --line-soft:#F3EDE6;
/* Semánticos. Cada uno cumple AA sobre su propio `*-bg` y sobre --surface */
--good:#1F7A4A; --good-bg:#EEF7F1;
--warn:#8A6410; --warn-bg:#FBF1D8; --warn-dot:#E8B21F;
--bad:#B3261E; --bad-bg:#FDECEB;
--neutral-bg:#F2ECE5; --neutral-fg:#6F665E;
color-scheme:light;
/* Forma. La tarjeta va plana en reposo: `--shadow` es casi invisible y la
elevación (`--shadow-lg`) se reserva a lo que flota o a lo que se levanta
al pasar el puntero. */
--radius:14px; --radius-sm:9px; --radius-xs:6px;
--shadow:0 1px 2px rgba(20,14,10,.04);
--shadow-lg:0 14px 26px -20px rgba(20,14,10,.5), 0 2px 6px rgba(20,14,10,.06);
/* ── Tipografía ──
Tres voces. Barlow es humanista y de terminaciones redondeadas: no tiene la
dureza de una grotesca como Inter, y esa suavidad es media propuesta.
Barlow Condensed carga títulos y cifras — entra más texto sin achicarlo.
IBM Plex Mono es para rótulos en versalitas y para TODO dato numérico o
identificador: documentos, lotes, fechas y horas quedan de ancho fijo y las
columnas se alinean solas.
Auto-alojadas en css/fonts-app.css, sin CDN. */
--font:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-display:"Barlow Condensed","Barlow",system-ui,-apple-system,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* Escala tipográfica — única fuente de tamaños.
Sube un escalón respecto a la versión anterior: el cuerpo pasa de 13 a 15 px
(decisión del usuario, 02/09/2026 — reemplaza la regla de densidad del
15/08 que pedía filas de ~28 px). Se conserva el orden xs < sm < base < md
< lg < xl, así que ningún selector queda con un tamaño menor que el cuerpo. */
--text-xs:11px; --text-sm:13px; --text-base:15px; --text-md:16px;
--text-lg:17px; --text-xl:21px; --text-2xl:26px; --text-3xl:34px;
/* Cifras y títulos grandes. Van aparte de la escala de texto porque no se
leen como texto: se miran. Se usan con --font-display. */
--display-sm:21px; --display-md:26px; --display-lg:34px; --display-xl:46px;
/* Rótulo mono en versalitas — la firma del sistema. El interletrado es lo que
lo hace legible a 10 px; sin él es una mancha. */
--lab-size:10px; --lab-track:.16em;
/* Interlínea. El aire es de dónde sale la suavidad, no de bajar el contraste:
los grises siguen cumpliendo AA. */
--lh-tight:1.15; --lh-snug:1.35; --lh:1.55;
/* Espaciado — múltiplos de 4 */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
/* ── Estructura ──
La barra lateral. Azul profundo en vez del azul cielo `#48B7FF` que tenía
la franja horizontal: sobre `#0B2B52` el blanco da 15,9:1, así que desapareció
el apaño de peso 700 + sombra de texto que hacía falta para compensar el
2,1:1 del anterior.
Los nombres --brandbar, --brandbar-ink y --appbar-h se retiraron el
02/09/2026 junto con la franja: ya no quedaba nada que los usara. */
--nav:#0B2B52; --nav-ink:#E8EEF7; --nav-muted:#C3D5EC; --nav-label:#7EA3D6;
--nav-line:rgba(232,238,247,.14); --nav-hover:rgba(255,255,255,.09);
/* Margen lateral único de toda la app. Menú, submenú, título y contenido lo
comparten para que todo quede sobre la misma línea vertical. El ancho es el
de la pantalla: las tablas de esta app son anchas y el espacio sirve. */
--margen-lateral:clamp(12px,1.6vw,28px);
}
/* ── Tema oscuro ──
Los mismos nombres, en cálido oscuro. Todo par de texto medido está entre
6,5:1 y 15:1. La franja de marca y el rojo institucional NO se invierten. */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
color-scheme:dark;
--accent:#6AA6F5; --accent-soft:#152538; --accent-ink:#0A1A2E;
--accent-tint:#262119; --accent-tint-line:#3A3128;
--bg:#16130F; --surface:#1E1A15; --surface-2:#262119;
--ink:#E5DFD6; --ink-strong:#F4F0EA; --muted:#A89E93; --muted-soft:#8D8378;
--line:#332C24; --line-soft:#2A241D;
--good:#57C98A; --good-bg:#12281D;
--warn:#E8B21F; --warn-bg:#2B2210; --warn-dot:#E8B21F;
--bad:#FF8A80; --bad-bg:#2E1714;
--neutral-bg:#262119; --neutral-fg:#A89E93;
--nav:#100D0A; --nav-ink:#ECE7DF; --nav-muted:#B9B0A4; --nav-label:#8D8378;
--nav-line:rgba(236,231,223,.12); --nav-hover:rgba(255,255,255,.07);
--shadow:0 1px 2px rgba(0,0,0,.35);
--shadow-lg:0 14px 26px -18px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.4);
}
}
:root[data-theme="dark"]{
color-scheme:dark;
--accent:#6AA6F5; --accent-soft:#152538; --accent-ink:#0A1A2E;
--accent-tint:#262119; --accent-tint-line:#3A3128;
--bg:#16130F; --surface:#1E1A15; --surface-2:#262119;
--ink:#E5DFD6; --ink-strong:#F4F0EA; --muted:#A89E93; --muted-soft:#8D8378;
--line:#332C24; --line-soft:#2A241D;
--good:#57C98A; --good-bg:#12281D;
--warn:#E8B21F; --warn-bg:#2B2210; --warn-dot:#E8B21F;
--bad:#FF8A80; --bad-bg:#2E1714;
--neutral-bg:#262119; --neutral-fg:#A89E93;
--nav:#100D0A; --nav-ink:#ECE7DF; --nav-muted:#B9B0A4; --nav-label:#8D8378;
--nav-line:rgba(236,231,223,.12); --nav-hover:rgba(255,255,255,.07);
--shadow:0 1px 2px rgba(0,0,0,.35);
--shadow-lg:0 14px 26px -18px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.4);
}
/* ===================== Base ===================== */
/* El relleno va DENTRO del ancho. Sin esto, `width:100%` más el margen lateral
suman más que la pantalla y aparece la barra de desplazamiento horizontal.
Antes no se notaba porque un ancho máximo fijo tapaba la suma. */
.hci *,.hci *::before,.hci *::after{box-sizing:border-box}
body.hci{
background:var(--bg); color:var(--ink); font-family:var(--font);
font-size:var(--text-base); line-height:var(--lh); margin:0;
/* Sin `-webkit-font-smoothing:antialiased`: adelgaza el trazo y en monitores
corrientes el texto se ve lavado. Se deja el suavizado del sistema. */
text-rendering:optimizeLegibility;
}
/* El interletrado negativo venía de Inter Tight, que es ancha y agradece que la
aprieten. Barlow Condensed ya es estrecha de origen: restarle espacio junta
las astas y a tamaño de titular se lee emborronado. Va en positivo mínimo. */
.hci h1,.hci h2,.hci h3,.hci h4{font-family:var(--font-display); font-weight:600;
letter-spacing:.005em; line-height:var(--lh-tight); color:var(--ink-strong);
margin:0; text-wrap:balance}
.hci a{color:var(--accent); text-decoration:none}
.hci a:hover{text-decoration:underline}
.hci .mono{font-family:var(--font-mono)}
/* Todo dato numérico o identificador va en mono de ancho fijo: documentos,
lotes, fechas y horas. Así una columna de fechas queda pareja sin tocarla. */
.hci .num{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.hci .muted{color:var(--muted)}
.hci :focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* ── El rótulo mono en versalitas ──
Es la firma del sistema: lo que hace que una pantalla se lea como aplicación
cuidada y no como plantilla. Va sobre TODO lo que nombra un dato sin ser el
dato: encabezados de tabla, etiquetas de indicador, títulos de sección de
formulario, metadatos de fila. El interletrado ancho es lo que lo hace legible
a 10 px; sin él es una mancha gris. */
.hci .lab,
.hci .k-lab,
.hci table.data th,
.hci .card-head .sub,
.hci .seccion > summary,
.hci .firma .cab,
.hci table.data .grp td{
font-family:var(--font-mono); font-size:var(--lab-size); font-weight:400;
letter-spacing:var(--lab-track); text-transform:uppercase; color:var(--muted);
line-height:1.4}
/* ===================== Estructura =====================
Barra lateral azul profundo a la izquierda, encabezado con el buscador arriba,
contenido sobre crema.
Reemplaza a la franja horizontal del 18/08/2026 (decisión del usuario,
02/09/2026). El motivo no es estético: Vacunación tiene ocho pantallas, y con
Inventario, Facturación y Administración el menú ya no cabía a lo ancho —el
`scrollIntoView` que había en el JS estaba ahí para compensar que se salía de
la pantalla. En vertical caben todas las secciones con su nombre visible, hay
sitio para contadores al lado de cada una, y añadir un módulo no aprieta a los
demás.
La franja azul de identidad no se pierde: pasa a ser la barra lateral. */
.layout{display:flex; min-height:100vh; align-items:stretch}
/* ── Barra lateral ── */
.chrome{flex:0 0 clamp(212px,20vw,256px); display:flex; z-index:30}
.appbar{flex:1; min-width:0; display:flex; flex-direction:column;
background:var(--nav); color:var(--nav-ink);
position:sticky; top:0; height:100vh; overflow-y:auto; overscroll-behavior:contain}
/* El logo va sobre blanco: es como está impreso y como se usa en producción. */
.appbar .brand-box{background:#fff; display:flex; align-items:center; justify-content:center;
padding:14px clamp(10px,1.4vw,18px); flex:none}
.appbar .brand-box img{height:38px; display:block; max-width:100%}
.appbar .spacer{display:none}
/* ── Menú ── */
.menu{display:flex; flex-direction:column; align-items:stretch; gap:2px;
min-width:0; padding:var(--sp-4) var(--sp-3) 0}
/* Separador de bloque del menú ("Atención", "Gestión"). El filete sale del
propio rótulo, así la plantilla solo escribe la palabra. */
.hci .menu .lab{display:flex; align-items:center; gap:var(--sp-2);
padding:0 8px 8px; margin:0; color:var(--nav-label); letter-spacing:.2em; font-size:9px}
.hci .menu .lab + .lab,.hci .menu a + .lab,.hci .menu .grupo + .lab{margin-top:var(--sp-5)}
.hci .menu .lab::after{content:""; flex:1; height:1px; background:var(--nav-line)}
.hci .menu a,.hci .menu .jefe{position:relative; display:flex; align-items:center; gap:var(--sp-3);
width:100%; padding:10px 12px; border:0; background:none; font:inherit;
font-size:var(--text-base); font-weight:500; color:var(--nav-muted); text-align:left;
text-decoration:none; cursor:pointer; border-radius:11px; text-shadow:none;
transition:background .15s ease, color .15s ease}
.hci .menu a:hover,.hci .menu .jefe:hover{background:var(--nav-hover); color:#fff;
text-decoration:none}
/* El icono va en su cuadro redondeado, como en las tarjetas de acción: da un
punto de anclaje a la izquierda y el menú deja de verse como una lista suelta. */
.menu .ic{width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
flex:none; background:rgba(255,255,255,.08)}
.menu .ic svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round}
/* La sección en la que se está: azul sólido y un riel claro que sale del borde. */
.hci .menu a.active,.hci .menu .grupo.active > .jefe{background:var(--accent);
color:#fff; font-weight:600; text-shadow:none}
.hci .menu a.active .ic,.hci .menu .grupo.active > .jefe .ic{background:rgba(255,255,255,.2)}
.hci .menu a.active::before,.hci .menu .grupo.active > .jefe::before{content:"";
position:absolute; left:-12px; top:10px; bottom:10px; width:4px;
border-radius:0 4px 4px 0; background:#8FC0FF}
.menu .jefe .flecha{font-size:12px; opacity:.9; margin-left:auto; line-height:1;
transition:transform .15s ease}
/* La flecha gira cuando el grupo está abierto: dice si despliega o repliega. */
.menu .grupo.abierto > .jefe .flecha{transform:rotate(180deg)}
/* Contador o punto de alerta al final del renglón: la señal llega al menú sin
tener que entrar al módulo. */
.menu .tail{margin-left:auto; font-family:var(--font-mono); font-size:var(--text-xs);
color:var(--nav-label); flex:none}
.menu .jefe .tail{margin-left:0}
.menu .tail.alerta{background:var(--warn-dot); color:#231A05; padding:2px 7px;
border-radius:999px; font-weight:500}
.menu .tail.punto{width:7px; height:7px; border-radius:50%; background:var(--warn-dot);
display:block}
/* ── Grupo desplegable: acordeón, no menú flotante ──
En vertical hay sitio para abrir en su lugar. Un panel flotante obligaría a
apuntar con precisión y se saldría de la barra. */
.menu .grupo{position:static; display:flex; flex-direction:column}
.menu .desplegable{position:static; display:none; min-width:0; padding:2px 0 6px 40px;
background:none; border:0; border-radius:0; box-shadow:none}
.menu .grupo[open] .desplegable,.menu .grupo.abierto .desplegable{display:block}
.hci .menu .desplegable a{display:flex; width:100%; padding:7px 11px; color:var(--nav-muted);
font-size:var(--text-sm); font-weight:400; text-shadow:none; border-radius:var(--radius-sm)}
.hci .menu .desplegable a:hover{background:var(--nav-hover); color:#fff}
.hci .menu .desplegable a.active{background:rgba(255,255,255,.14); color:#fff; font-weight:500}
.hci .menu .desplegable a.active::before{display:none}
/* ── Usuario: al pie de la barra; el nombre y la salida se despliegan hacia arriba ── */
.usuario{margin-top:auto; position:relative; padding:var(--sp-4) var(--sp-3);
display:flex; flex-direction:column}
.hci .usuario .cara{display:flex; align-items:center; gap:10px; width:100%;
padding:11px; border-radius:12px; border:1px solid var(--nav-line);
background:rgba(255,255,255,.07); color:var(--nav-ink); font:inherit;
font-size:var(--text-sm); font-weight:500; cursor:pointer; text-align:left}
.hci .usuario .cara:hover{background:rgba(255,255,255,.12)}
/* Las iniciales, en su círculo, dentro del botón. */
.hci .usuario .cara::before{content:attr(data-iniciales); flex:none;
width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff;
display:grid; place-items:center; font-weight:600; font-size:var(--text-sm)}
.usuario .desplegable{position:absolute; bottom:100%; left:var(--sp-3); right:var(--sp-3);
z-index:40; background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:var(--sp-3); display:none}
.usuario.abierto .desplegable{display:block}
.usuario .quien b{display:block; font-size:var(--text-base); font-weight:600; color:var(--ink-strong)}
.usuario .quien span{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted)}
.usuario .desplegable hr{border:0; border-top:1px solid var(--line); margin:var(--sp-3) 0}
/* ── Encabezado del área de trabajo ── */
.main{flex:1 1 0; min-width:0; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
padding:var(--sp-3) var(--margen-lateral); background:var(--surface);
border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.topbar .buscador{flex:1 1 280px; display:flex; align-items:center; gap:10px;
height:44px; padding:0 14px; border-radius:var(--radius-sm);
background:var(--surface-2); border:1px solid var(--line); min-width:0}
.topbar .buscador:focus-within{border-color:var(--accent); background:var(--surface);
box-shadow:0 0 0 3px var(--accent-soft)}
.hci .topbar .buscador input{flex:1; min-width:0; border:0; background:none; outline:none;
height:auto; padding:0; font:inherit; font-size:var(--text-base); color:var(--ink)}
.topbar .buscador svg{width:16px; height:16px; flex:none; stroke:var(--muted-soft);
fill:none; stroke-width:1.8; stroke-linecap:round}
.topbar .acciones{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.hamburger{display:none; background:none; border:1px solid var(--line); color:var(--ink);
width:44px; height:44px; border-radius:var(--radius-sm);
font-size:18px; cursor:pointer; flex:none; align-items:center; justify-content:center}
/* ── Cabecera de página y contenido ── */
.page-head{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
width:100%; padding:var(--sp-5) var(--margen-lateral) 0}
/* El título de pantalla es lo más grande de la página: condensada, grande y sin
competencia. Antes era 17 px y quedaba al mismo nivel que un encabezado de
tarjeta, así que ninguna pantalla tenía un punto de entrada claro. */
.page-head .page-title{font-family:var(--font-display); font-size:var(--display-lg);
font-weight:700; line-height:var(--lh-tight); color:var(--ink-strong); margin:0}
.page-head .acciones{margin-left:auto; display:flex; align-items:center;
gap:var(--sp-2); flex-wrap:wrap}
.content{flex:1; width:100%; min-width:0;
padding:var(--sp-4) var(--margen-lateral) var(--sp-6);
display:flex; flex-direction:column; gap:var(--sp-4)}
.scrim{display:none; position:fixed; inset:0; background:rgba(8,14,22,.5); z-index:28}
/* El atributo `hidden` manda sobre cualquier display de este archivo: si no,
un `.field` o un `.card` marcado hidden por JS se sigue viendo. */
.hci [hidden]{display:none !important}
/* Etiqueta para lector de pantalla. `display:none` la quitaría también del
lector, que es justo lo contrario de lo que se quiere: se saca de la vista
sin sacarla del árbol de accesibilidad. */
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
/* ── Páginas de ayuda ──────────────────────────────────────────────────
Texto para leer, no una pantalla de trabajo: la medida de línea se limita a
unos 70 caracteres y la interlínea sube. Una explicación a todo lo ancho de un
monitor de 24 pulgadas no se lee, se abandona. */
.ayuda{max-width:74ch}
.ayuda p,.ayuda li{line-height:var(--lh); color:var(--ink)}
.ayuda h2{font-size:var(--display-md); margin:var(--sp-6) 0 var(--sp-3)}
.ayuda h3{font-size:var(--display-sm); margin:var(--sp-5) 0 var(--sp-2)}
.ayuda > :first-child{margin-top:0}
.ayuda ul,.ayuda ol{margin:var(--sp-3) 0; padding-left:22px}
.ayuda li{margin-bottom:6px}
.ayuda code{background:var(--surface-2); border:1px solid var(--line);
border-radius:var(--radius-xs); padding:1px 6px; font-size:var(--text-sm)}
.ayuda strong{font-weight:600; color:var(--ink-strong)}
/* Pasos numerados. El número va en su cuadro y el texto al lado: se puede
señalar "estoy en el 3" por teléfono, que es como se usa esto de verdad. */
.pasos{counter-reset:paso; display:flex; flex-direction:column; gap:var(--sp-4);
margin:var(--sp-4) 0}
.paso{display:flex; gap:var(--sp-4); align-items:flex-start}
.paso::before{counter-increment:paso; content:counter(paso);
flex:none; width:32px; height:32px; border-radius:9px;
display:grid; place-items:center; background:var(--accent-soft); color:var(--accent);
font-family:var(--font-mono); font-size:var(--text-sm); font-weight:500}
.paso .cuerpo{flex:1; min-width:0}
.paso .cuerpo > b{display:block; font-family:var(--font-display);
font-size:var(--display-sm); font-weight:600; color:var(--ink-strong);
line-height:1.15; margin-bottom:4px}
.paso .cuerpo p{margin:0 0 var(--sp-2)}
.paso .cuerpo > :last-child{margin-bottom:0}
/* "Si algo sale mal": el bloque que de verdad se busca cuando se abre la ayuda. */
.remedio{border-left:3px solid var(--warn); background:var(--warn-bg);
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0}
.remedio b{color:var(--warn)}
.remedio p{margin:4px 0 0; color:var(--ink)}
/* Índice lateral de la ayuda. */
.ayuda-nav{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-5)}
.ayuda-nav a{padding:7px 13px; border-radius:999px; border:1px solid var(--line);
background:var(--surface); font-size:var(--text-sm); font-weight:500;
color:var(--ink); text-decoration:none}
.ayuda-nav a:hover{background:var(--surface-2); text-decoration:none}
.ayuda-nav a.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
/* Botón de ayuda del encabezado. */
.btn-ayuda{width:44px; height:44px; padding:0; flex:none; border-radius:50%;
font-family:var(--font-display); font-size:var(--text-lg); font-weight:700}
/* ── Avisos flotantes ──────────────────────────────────────────────────
Los mensajes de resultado ("Guardado", "No se pudo guardar") salen en una
ventana que flota abajo a la derecha y se va sola (decisión del usuario,
02/09/2026). Antes eran una barra dentro de la página: empujaba el contenido
hacia abajo, así que la pantalla saltaba justo después de guardar y había que
ir a cerrarla a mano.
El `.alert` de toda la vida NO desaparece: sigue usándose para lo que explica
algo de la pantalla en la que se está —el aviso de que agendar es opcional,
por ejemplo—. Eso es contenido, no resultado de una acción, y tiene que poder
leerse con calma.
Duraciones (en el JS de base_app.html): lo bueno se va en 6 s, lo que avisa en
9 s y los errores aguantan 14 s. Un error que se va antes de leerlo obliga a
repetir la acción para volver a verlo. Además se paran al pasar el puntero y
todos tienen aspa. */
.avisos{position:fixed; z-index:200; right:var(--sp-4); bottom:var(--sp-4);
display:flex; flex-direction:column; gap:var(--sp-2);
width:min(400px, calc(100vw - var(--sp-5))); pointer-events:none}
.aviso{pointer-events:auto; position:relative; overflow:hidden;
display:flex; align-items:flex-start; gap:var(--sp-3);
padding:14px var(--sp-4); border-radius:var(--radius-sm);
background:var(--surface); border:1px solid var(--line);
box-shadow:var(--shadow-lg); font-size:var(--text-base); line-height:var(--lh-snug);
color:var(--ink);
animation:aviso-entra .28s cubic-bezier(.22,1,.36,1)}
.aviso.saliendo{animation:aviso-sale .22s ease forwards}
@keyframes aviso-entra{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
@keyframes aviso-sale {to{opacity:0; transform:translateY(6px) scale(.98)}}
/* Un filete de color a la izquierda y un punto: el tipo de mensaje no puede
depender solo del color de fondo. */
.aviso::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
background:var(--muted)}
.aviso .ico{width:18px; height:18px; flex:none; border-radius:50%; margin-top:1px;
display:grid; place-items:center; font-size:11px; font-weight:700;
background:var(--neutral-bg); color:var(--neutral-fg)}
.aviso .txt{flex:1; min-width:0}
.aviso .cerrar{flex:none; width:24px; height:24px; margin:-3px -6px 0 0; border:0;
background:none; color:var(--muted); font-size:15px; line-height:1; cursor:pointer;
border-radius:var(--radius-xs)}
.aviso .cerrar:hover{background:var(--surface-2); color:var(--ink)}
.aviso.good::before{background:var(--good)}
.aviso.good .ico{background:var(--good-bg); color:var(--good)}
.aviso.warn::before{background:var(--warn)}
.aviso.warn .ico{background:var(--warn-bg); color:var(--warn)}
.aviso.bad::before {background:var(--bad)}
.aviso.bad .ico{background:var(--bad-bg); color:var(--bad)}
.aviso.info::before{background:var(--accent)}
.aviso.info .ico{background:var(--accent-soft); color:var(--accent)}
/* Barra de tiempo: se ve cuánto queda antes de que se vaya. Se detiene al pasar
el puntero, junto con el temporizador. */
.aviso .tiempo{position:absolute; left:0; bottom:0; height:2px; width:100%;
transform-origin:left; background:currentColor; opacity:.28;
animation:aviso-tiempo linear forwards}
.aviso.good .tiempo{color:var(--good)} .aviso.warn .tiempo{color:var(--warn)}
.aviso.bad .tiempo{color:var(--bad)} .aviso.info .tiempo{color:var(--accent)}
@keyframes aviso-tiempo{from{transform:scaleX(1)} to{transform:scaleX(0)}}
.aviso:hover .tiempo{animation-play-state:paused}
@media (max-width:560px){
.avisos{left:var(--sp-3); right:var(--sp-3); bottom:var(--sp-3); width:auto}
}
/* Sin animación: el aviso aparece y se va sin transición, pero el temporizador
sigue funcionando — lo controla el JS, no la animación. */
@media (prefers-reduced-motion:reduce){
.aviso,.aviso.saliendo{animation:none}
.aviso .tiempo{display:none}
}
/* ===================== Componentes ===================== */
/* ── La tarjeta ──
Componente central: todo lo demás es una variante suya. Va PLANA en reposo
—borde cálido de 1 px y nada más—; la sombra se reserva a lo que flota o a lo
que se levanta al pasar el puntero. Una sombra permanente en cada tarjeta es
lo que hace que un panel parezca una plantilla comprada. */
.card{min-width:0; background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius); overflow:hidden}
.card-head{display:flex; align-items:center; gap:var(--sp-3);
padding:15px 18px; border-bottom:1px solid var(--line-soft)}
.card-head h2,.card-head h3{font-family:var(--font-display); font-size:var(--display-sm);
font-weight:600; color:var(--ink-strong)}
.card-head .right{margin-left:auto; display:flex; align-items:center; gap:var(--sp-2)}
.card-body{padding:18px}
/* ── Tarjeta de cifra ──
Anatomía fija: rótulo mono arriba (qué es) · la cifra en el peso visual máximo
· pie suave abajo (qué significa). Se retiran el degradado de fondo y la barra
de acento superior que traía de la versión anterior: eran los dos elementos que
más delataban la plantilla, y con la cifra a 46 px la jerarquía ya no los
necesita para nada. */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--sp-4)}
.kpi{position:relative; background:var(--surface);
border:1px solid var(--line); border-radius:var(--radius);
padding:18px 20px; display:flex; flex-direction:column; gap:6px}
.kpi .k-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2)}
.k-lab{margin:0}
.kpi .k-ic{width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
background:var(--neutral-bg); color:var(--neutral-fg)}
.kpi .k-ic svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round}
/* La cifra y su variación comparten línea base: el delta acompaña al número, no
se apila debajo como si fuera otro dato. */
.kpi .k-dato{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.kpi .k-val{font-family:var(--font-display); font-size:var(--display-xl); font-weight:700;
letter-spacing:0; line-height:1; font-variant-numeric:tabular-nums;
color:var(--ink-strong); margin:0}
/* Variación junto a la cifra, alineada a su línea base. Solo se colorea cuando
dice algo: una subida en verde, un atraso en rojo, lo neutro en gris. */
.kpi .k-delta{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted)}
.kpi .k-delta.up{color:var(--good)}
.kpi .k-delta.down{color:var(--bad)}
.kpi .k-sub{font-size:var(--text-base); color:var(--muted); line-height:var(--lh-snug); margin:0}
.kpi.accent-good .k-ic{background:var(--good-bg); color:var(--good)}
.kpi.accent-warn .k-ic{background:var(--warn-bg); color:var(--warn)}
.kpi.accent-bad .k-ic{background:var(--bad-bg); color:var(--bad)}
.kpi.accent-good .k-val{color:var(--good)}
.kpi.accent-warn .k-val{color:var(--warn)}
.kpi.accent-bad .k-val{color:var(--bad)}
/* Tarjeta destacada (la usa el panel de vacunación). Antes era un degradado;
ahora es el azul profundo de la estructura, plano. El `::before` que llevaba
encima desapareció con la barra de acento del KPI. */
.kpi.feature{background:var(--nav); border-color:transparent; color:#fff}
.kpi.feature .k-lab,.kpi.feature .k-sub{color:var(--nav-muted)}
.kpi.feature .k-val{color:#fff}
.kpi.feature .k-ic{background:rgba(255,255,255,.14); color:#fff}
a.kpi{text-decoration:none; color:inherit}
a.kpi:hover{border-color:var(--accent); box-shadow:var(--shadow-lg)}
/* Tablas — fila de ~28 px */
.table-wrap{overflow-x:auto; max-width:100%}
table.data{width:100%; border-collapse:collapse; font-size:var(--text-base)}
table.data th,table.data td{text-align:left; white-space:nowrap}
/* Filas aireadas (decisión del usuario, 02/09/2026). El separador es suave: con
la línea llena en cada fila, un listado de 300 pacientes se lee a rejilla. */
table.data td{padding:12px 18px; line-height:var(--lh-snug);
border-bottom:1px solid var(--line-soft); color:var(--ink)}
table.data th{padding:10px 18px; background:var(--accent-tint);
border-bottom:1px solid var(--accent-tint-line)}
table.data td b{color:var(--ink-strong); font-weight:500; font-size:var(--text-base)}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--surface-2)}
/* `.num` = cantidad: va a la derecha. `.cod` = código, fecha o documento: son
texto, se leen de izquierda a derecha, pero con cifras de ancho fijo para que
una columna de fechas quede pareja. Mezclarlos deja el encabezado a un lado y
el valor al otro. */
table.data td.num,table.data th.num{text-align:right; font-family:var(--font-mono);
font-variant-numeric:tabular-nums; font-size:var(--text-sm)}
table.data td.cod,table.data th.cod{text-align:left; font-family:var(--font-mono);
font-variant-numeric:tabular-nums; font-size:var(--text-sm)}
table.data td.wrap{white-space:normal}
table.data .grp td{background:color-mix(in srgb, var(--muted) 7%, transparent);
font-size:var(--text-xs); font-weight:500; letter-spacing:.07em; text-transform:uppercase;
color:var(--muted); padding:3px 12px}
table.data tr.hi td{background:var(--accent-soft)}
table.data tr.off td{opacity:.55}
/* Fila que lleva a una ficha: toda la fila es el enlace, no solo la palabra
"Abrir" del final. Se pinta al pasar por encima para que se note. */
table.data tbody tr[data-href]{cursor:pointer}
table.data tbody tr[data-href]:hover{background:var(--accent-soft)}
.empty{padding:48px var(--sp-5); text-align:center; color:var(--muted);
font-size:var(--text-base); line-height:var(--lh-snug)}
/* Barra de nivel: cuánto queda contra el mínimo. Va junto al número, nunca en
lugar del número — una barra sola no dice cuántas unidades hay. */
.barra{display:inline-block; vertical-align:middle; width:54px; height:5px; margin-left:7px;
border-radius:999px; background:color-mix(in srgb, var(--muted) 18%, transparent); overflow:hidden}
.barra i{display:block; height:100%; border-radius:999px; background:var(--good)}
.barra.warn i{background:var(--warn)}
.barra.bad i{background:var(--bad)}
/* Fila de filtros sobre una tabla. */
.filtros{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.hci .filtros select,.hci .filtros input{border:1px solid color-mix(in srgb, var(--muted) 32%, transparent);
border-radius:var(--radius-sm); height:36px; padding:0 11px; background:var(--surface); font:inherit;
font-size:var(--text-sm); color:var(--ink)}
.hci .filtros input[type=search]{min-width:190px}
/* ── Listado de personas ──
La fila sigue siendo densa (32 px), pero deja de ser una rejilla plana: cada
persona trae su marca de identidad y la fila entera responde al puntero.
Al pasar por encima aparece un riel de acento a la izquierda: dice "esta es
la fila en la que estás" sin mover nada de sitio. */
table.data tr.persona td{padding-top:12px; padding-bottom:12px}
table.data tr.persona td:first-child{position:relative; padding-left:14px}
table.data tr.persona td:first-child::before{content:""; position:absolute; left:0; top:3px;
bottom:3px; width:3px; border-radius:0 3px 3px 0; background:transparent; transition:background .12s}
table.data tbody tr.persona:hover td:first-child::before{background:var(--accent)}
/* Marca de identidad: iniciales en un cuadro redondeado. El color sale del
documento, así que es estable: el mismo paciente se ve siempre igual. */
.marca{width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
font-family:var(--font-display); font-weight:600; font-size:var(--text-sm);
letter-spacing:.01em; text-transform:uppercase}
/* Recalibrados en cálido (02/09/2026): los tonos fríos anteriores flotaban sobre
el fondo crema como si fueran de otra aplicación. Cada par cumple AA — son
iniciales de 11 px en negrita, así que no basta con que "se distingan". */
.marca.t0{background:#E4EDF8; color:#14548C} /* 6,64:1 */
.marca.t1{background:#E6F1EA; color:#1F6B4A} /* 5,56:1 */
.marca.t2{background:#F7EBDC; color:#8A5214} /* 5,42:1 */
.marca.t3{background:#EDE9F5; color:#4B3F94} /* 7,21:1 */
.marca.t4{background:#F9E7EA; color:#9C2233} /* 6,56:1 */
.marca.t5{background:#E4F0F0; color:#155F66} /* 6,30:1 */
.persona-nom{display:flex; align-items:center; gap:var(--sp-3); min-width:0}
.persona-nom b{font-weight:500; color:var(--ink-strong); font-size:var(--text-base)}
/* Sexo: una letra, no una palabra. En una columna de 300 filas, "Femenino"
repetido es ruido; F y M se leen igual y dejan sitio a lo que sí varía. */
.sexo{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px;
font-size:var(--text-xs); font-weight:600; background:color-mix(in srgb, var(--muted) 12%, transparent);
color:var(--muted)}
/* El botón de la fila se enciende cuando el puntero está en ella. */
table.data tr.persona .btn{opacity:.55; transition:opacity .12s}
table.data tbody tr.persona:hover .btn{opacity:1}
/* Chips de estado — color + etiqueta, nunca color solo */
/* Pastilla → rectángulo de esquina suave, con el texto en mono-versalitas. La
pastilla redonda con negrita se lee a etiqueta de tienda; esta se lee a dato. */
.chip{font-family:var(--font-mono); font-size:var(--lab-size); font-weight:400;
letter-spacing:.08em; text-transform:uppercase; padding:4px 9px;
border-radius:var(--radius-xs); display:inline-flex; align-items:center;
vertical-align:middle; gap:6px; white-space:nowrap;
color:var(--neutral-fg); background:var(--neutral-bg)}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.chip.good{color:var(--good); background:var(--good-bg)}
.chip.warn{color:var(--warn); background:var(--warn-bg)}
.chip.bad{color:var(--bad); background:var(--bad-bg)}
.chip.info{color:var(--accent); background:var(--accent-soft)}
/* Botones */
/* Botones: altura cómoda con guantes y en tablet, sin sombra —el color ya dice
que se puede pulsar— y una sola jerarquía en toda la aplicación. */
.hci .btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
border:1px solid transparent; cursor:pointer; line-height:1;
font:inherit; font-size:var(--text-base); font-weight:600; background:var(--accent);
color:var(--accent-ink); height:44px; padding:0 20px; border-radius:var(--radius-sm);
text-decoration:none; transition:background .15s ease}
.hci .btn:hover{background:color-mix(in srgb, var(--accent) 86%, #000); text-decoration:none}
.hci .btn.secondary{background:var(--surface); color:var(--ink);
border-color:var(--line); font-weight:500}
.hci .btn.secondary:hover{background:var(--surface-2)}
/* El terciario era azul suave y competía con el primario. Ahora es transparente:
está, pero no llama. */
.hci .btn.ghost{background:transparent; color:var(--ink); border-color:transparent; font-weight:500}
.hci .btn.ghost:hover{background:var(--surface-2)}
.hci .btn.danger{background:var(--bad); color:#fff}
.hci .btn.danger:hover{background:color-mix(in srgb, var(--bad) 86%, #000)}
.hci .btn.sm{height:36px; padding:0 14px; font-size:var(--text-sm)}
.hci .btn.xs{height:32px; padding:0 12px; font-size:var(--text-sm)}
.hci .btn.block{width:100%}
.hci .btn[disabled]{opacity:.45; cursor:not-allowed}
.rowlink{font-weight:500; color:var(--accent); text-decoration:none; font-size:var(--text-base)}
/* Formularios — etiqueta corta arriba, campo debajo */
.field{display:flex; flex-direction:column; gap:6px}
/* La etiqueta deja las versalitas: en un formulario de historia clínica con 20
campos, veinte rótulos en mayúsculas son un muro. En caja normal se leen de un
vistazo. Las versalitas mono quedan para los TÍTULOS DE SECCIÓN, que sí son
pocos y sí marcan estructura. */
.field > label{font-size:var(--text-base); text-transform:none; letter-spacing:0;
color:var(--muted); font-weight:500}
.hci .field input,.hci .field select,.hci .field textarea,.field .input,
.hci table.data input,.hci table.data select{
border:1px solid var(--line); border-radius:var(--radius-sm);
height:44px; padding:0 13px; background:var(--surface); font:inherit;
font-size:var(--text-base); color:var(--ink);
transition:border-color .15s ease, box-shadow .15s ease}
.hci .field textarea{height:auto; padding:11px 13px; line-height:var(--lh); resize:vertical}
.hci .field input:focus,.hci .field select:focus,.hci .field textarea:focus{
border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.hci .field input::placeholder,.hci .field textarea::placeholder{color:var(--muted)}
.hci table.data input,.hci table.data select{height:36px; font-size:var(--text-sm)}
/* Un campo no puede empujar la columna que lo contiene: el ancho propio del
(unos 190px por defecto) desbordaba la columna estrecha del split y
se salía de la pantalla. Ocupa lo que le den, ni más ni menos. */
.hci .field input:not([type=checkbox]):not([type=radio]),
.hci .field select,.hci .field textarea,.field .input{width:100%; min-width:0}
.field{min-width:0}
.field .input.ro,.hci .field input[readonly]{background:color-mix(in srgb, var(--muted) 8%, transparent);
color:var(--muted)}
.field .hint{font-size:var(--text-sm); color:var(--muted); line-height:var(--lh-snug)}
.req{color:var(--bad)}
/* ── Sección plegable de un formulario ──
Patrón que el usuario aprobó (pantalla de entrada de stock, 19/08/2026): los
campos van agrupados por asunto, cada grupo con su barra suave, su etiqueta en
versalitas y una marca de Requerido u Opcional, y se pliega.
Se hace con /, que ya trae el navegador: se abre con teclado,
no necesita JavaScript y no se puede quedar desincronizado.
Destino de la entrada Requerido