/* =========================================================================== Vínculo · hoja única. Sin preprocesador, sin Tailwind, sin Bootstrap. Lo que hace coherentes veinte pantallas escritas en meses distintos son los tokens, no la disciplina. Reglas completas en la skill `estilos-vinculo`. TODO COLOR SE DECLARA UNA VEZ, con sus dos valores en el mismo renglón: --algo: light-dark(, ); Antes eran tres bloques —`:root`, la media query de `prefers-color-scheme` y `:root[data-tema="oscuro"]`— con la paleta oscura escrita dos veces palabra por palabra. La regla «ningún color puede tener su única definición dentro de un bloque de tema» había que recordarla en cada edición; ahora no hay dónde incumplirla, porque no existe el bloque donde escribir un color a medias. El interruptor de tema ya no reescribe la paleta: solo cambia el `color-scheme` del documento, y `light-dark()` elige la columna. =========================================================================== */ /* Las capas fijan la cascada por ORDEN DE DECLARACIÓN y no por especificidad: `pantallas` gana a `componentes` aunque su selector sea más corto. Lo que compra es que una pantalla ajuste un componente sin inventar un selector más específico ni desarmar una propiedad heredada —el ingreso tenía un `filter: none` cuyo único trabajo era deshacer el hover del botón global—. El orden lo fija esta línea y no el lugar del archivo donde aparezca cada bloque, así que los `@layer` de abajo envuelven regiones en su sitio y no reindentan su contenido: el diff quedaría ilegible y la cascada es la misma. `utilidades` se declara vacía a propósito: reserva el último lugar para el día que haga falta un ayudante puntual, sin tener que reordenar nada. */ @layer base, componentes, pantallas, utilidades; /* Inter, vendorizada en assets/vendor/inter/ y servida desde ESTE origen. La regla de «sin recursos externos» no prohíbe una @font-face: prohíbe que apunte a Google. En una red hospitalaria aislada esa fuente no baja, y la pantalla queda con la tipografía del sistema sin que nadie entienda por qué se ve distinta en cada puesto — que es exactamente lo que pasaba hasta ahora, con `Inter` prometida en --tipo y ningún archivo detrás. Se llama `InterVariable` y no `Inter` a propósito. Si el puesto tuviera instalada la Inter ESTÁTICA, un @font-face con ese mismo nombre competiría con ella; la local no tiene eje de peso variable y el 600 saldría sintetizado. Con otro nombre no hay ambigüedad, y `Inter` queda igual en el stack como segunda opción, para ese mismo puesto. Un solo archivo para los tres pesos que usa la interfaz (400, 600, 700): es la fuente variable, no tres estáticas. `swap` y no `block`: el texto se lee de inmediato con la del sistema y cambia cuando la fuente llega. Esperar a que baje para mostrar la agenda no es una opción en un mesón de atención. Prueba (25-09-2026): --tipo ya no arranca acá — ver RobotoVariable más abajo. Este @font-face y assets/vendor/inter/ NO se borran mientras dure la prueba: volver a Inter es poner `InterVariable` primero en --tipo. */ @font-face { font-family: InterVariable; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/vendor/inter/InterVariable-latin.woff2') format('woff2'); } /* Roboto, vendorizada en assets/vendor/roboto/ con el mismo mecanismo que Inter arriba: un solo archivo variable, subconjunto latino, servido desde este origen. Ver assets/vendor/roboto/VERSION para el detalle de cobertura —el mismo límite que Inter: sin diacríticos eslavos—. Se llama `RobotoVariable` por el mismo motivo que `InterVariable`: si el puesto tuviera la Roboto ESTÁTICA del sistema (es común en Android/Chrome OS y en algunas instalaciones de Windows), un @font-face `Roboto` chocaría con ella y el peso variable no se activaría. `Roboto` queda como segunda opción en el stack para ese mismo puesto. Trae también el eje de ancho (wdth 75%-100%) porque el archivo vendorizado lo incluye sin costo relevante; hoy nada en la hoja lo usa, así que el ancho de reposo es 100% en todas partes. */ @font-face { font-family: RobotoVariable; font-style: normal; font-weight: 100 900; font-stretch: 75% 100%; font-display: swap; src: url('/assets/vendor/roboto/RobotoVariable-latin.woff2') format('woff2'); } :root { /* `light dark` es lo que habilita light-dark(), y de paso hace que los controles nativos —scrollbars, selects, el calendario— sigan al tema. */ color-scheme: light dark; /* --------------------------------------------------------------------- Roles de color MD3, esquema TonalSpot desde la semilla #004741. Calculados por `tools/paleta.php` (sRGB → CIELAB → LCh, gamut mapping), que documenta el cómo y el porqué de cada hue elegido. Las cuatro secciones que trajo `assets/css/_md3-tokens.css` —color, forma, elevación y movimiento— ya están todas acá abajo, generadas por las herramientas de `tools/`; ese archivo de trabajo se borró. No hay capa semántica intermedia: un componente usa `--md-primary`, `--md-error-container`, etc. directo. Los `--ok`/`--fail`/`--pending`/ `--info` de antes desaparecen — duplicaban roles que MD3 ya trae (success/error/warning/tertiary) y ya no hay dos lugares donde un color pueda quedar mal actualizado. El bloque de acá abajo, hasta el marcador de cierre, lo escribe `tools/paleta.php` — no se edita a mano. Para cambiar la semilla o revisar los parámetros de cada familia: `php tools/paleta.php --help` no existe, pero el encabezado de `tools/paleta.php` los documenta. */ /* >>> paleta generada por tools/paleta.php — no editar a mano <<< Semilla #523bf6 -> L*=40,53 C*=108,37 h=304,77° Para regenerar: php tools/paleta.php '#523bf6' --neutro-oscuro '#1a1522' --escribir Roles MD3, esquema TonalSpot. primary/secondary comparten el hue de la semilla; tertiary usa +60°. error/success/warning son colores de dominio con hue y croma propios (ver más abajo). El NEUTRO tiene dos familias, una por tema: la clara sale de la semilla (h=304,77°, croma 6/8) y la oscura es azul (h=306,60°, croma 10,1/12); la nota de familias() dice por qué. */ --md-primary: light-dark(#66558f, #d2bcfe); --md-on-primary: light-dark(#ffffff, #461db8); --md-primary-container: light-dark(#e9ddff, #4d3d75); --md-on-primary-container: light-dark(#1d1244, #e9ddff); --md-secondary: light-dark(#635a74, #ccc2df); --md-on-secondary: light-dark(#ffffff, #342d44); --md-secondary-container: light-dark(#e8defb, #4b435b); --md-on-secondary-container: light-dark(#1e182d, #e8defb); --md-tertiary: light-dark(#844f5c, #f3b6c4); --md-on-tertiary: light-dark(#ffffff, #50212e); --md-tertiary-container: light-dark(#ffd9e1, #6a3744); --md-on-tertiary-container: light-dark(#380a1a, #ffd9e1); /* hue 36 en Lab, no el 25 que publica MD3 en HCT —un espacio que no comparte escala de matiz con CIELAB—: trasladar el 25 literal daba un carmesí virado a magenta. #c00013 (claro, T40) cae en h=36,02°, contra h=36,36° del --fail que este proyecto ya usaba y h=35,86° del rojo de referencia de MD3 (#ba1a1a): prácticamente el mismo matiz, y el que corresponde en este espacio. 🔴 NO devolver esto a hue 25. */ --md-error: light-dark(#c00013, #ffb4a5); --md-on-error: light-dark(#ffffff, #690001); --md-error-container: light-dark(#ffdad3, #93000c); --md-on-error-container: light-dark(#390c00, #ffdad3); /* success/warning: MD3 los llamaría "custom colors" — acá son de primera clase porque son los estados de contactabilidad confirmada/pendiente del modelo de datos. El tercer estado, informativo, no tiene familia propia: ver la nota debajo de warning. */ --md-success: light-dark(#2b6b37, #94d69a); --md-on-success: light-dark(#ffffff, #003912); --md-success-container: light-dark(#aff3b5, #0c5221); --md-on-success-container: light-dark(#002202, #aff3b5); --md-warning: light-dark(#7d5800, #f1be69); --md-on-warning: light-dark(#ffffff, #412d00); --md-warning-container: light-dark(#ffdeae, #5e4100); --md-on-warning-container: light-dark(#261a00, #ffdeae); /* Acá habría ido 'info'. Con hue 250/croma 40 (calculado, no emitido), el dE76 contra tertiary en T40 da 45,56 — dos azules a L*40 indistinguibles a simple vista. En Vínculo los estados tienen que distinguirse entre sí (§4 de la skill), y un azul "casi tertiary" no resuelve eso, lo esconde. 🔴 NO reintroducir una familia `info`: el estado informativo usa los roles `tertiary` directo — más fiel a MD3, donde tertiary está pensado justo para ese acento de apoyo. El acento de INTERFAZ —foco, enlace de navegación activo, fila abierta de la tabla— es un caso distinto y va a `--md-primary`: no es un estado de dominio. */ /* SUPERFICIES Y NEUTROS. La columna oscura sale de una familia azul (h=306,60°) y no de la semilla, y con menos contraste que antes. Contra #1a1522: texto 10,49:1, secundario 6,65:1, borde 1,66:1 — donde antes eran 14,95 · 11,34 · 2,06. Los dos primeros siguen sobre 4,5:1; el tercero es silueta y no texto. 🔴 En oscuro -lowest (#1a1522) es MÁS CLARO que -low (#150e1c): el lienzo va al fondo y el cromo y las piezas apoyadas —navbar, riel, tabla, hoja, modal— quedan por encima. Está invertido respecto de MD3 a propósito, y en claro NO se invierte. No «arreglar» esto sin leer antes la nota de mapaRoles() en el generador. */ --md-surface: light-dark(#fbf8ff, #17111e); --md-on-surface: light-dark(#1d1a22, #cbc3d6); --md-surface-container-lowest: light-dark(#ffffff, #1a1522); --md-surface-container-low: light-dark(#f6f2fd, #150e1c); --md-surface-container: light-dark(#f0ecf7, #221d2b); --md-surface-container-high: light-dark(#eae6f1, #2d2736); --md-surface-container-highest: light-dark(#e5e1ec, #383241); --md-surface-variant: light-dark(#e6e0ef, #393243); --md-on-surface-variant: light-dark(#494551, #a39ab0); --md-outline: light-dark(#7a7582, #7c7388); --md-outline-variant: light-dark(#c9c4d3, #423a4d); --md-inverse-surface: light-dark(#322f37, #e7dff2); --md-inverse-on-surface: light-dark(#f3effa, #342e3c); --md-inverse-primary: light-dark(#d2bcfe, #66558f); /* scrim es N0 (negro puro) en las dos columnas: a L*=0 el cono de Lab se cierra y no admite croma, así que negro es el resultado del cálculo, no un atajo. Sigue con light-dark() de todos modos por el §1 de la skill: ningún color se define en un solo lado. */ --md-scrim: light-dark(#000000, #000000); --md-shadow: light-dark(#000000, #000000); /* Barra superior — esquema oscuro FIJO, sin light-dark(). Chrome persistente que no sigue el interruptor de tema, igual que `.ingreso` fija `color-scheme: dark` para sí mismo. Se derivan de la columna OSCURA de neutral/neutral-variant (T8/T12/T80/NV65/NV26), no son tonos nuevos. Contraste verificado: barra-texto/barra-superficie 10,49:1, barra-tenue/barra-superficie 6,65:1 — sobre 4,5:1. */ --md-barra-superficie: #1a1522; --md-barra-hover: #221d2b; --md-barra-texto: #cbc3d6; --md-barra-tenue: #a39ab0; --md-barra-borde: #423a4d; /* <<< fin de la paleta generada — tools/paleta.php <<< */ /* Separador de fila, más tenue que el borde del contenedor (--md-outline-variant a secas): con el mismo peso, la línea entre filas competía con el borde que ahora delimita el cajón de la tabla. Escrito a mano, FUERA del bloque generado de arriba —regenerar la paleta no debe poder borrarlo—. No lleva su propio light-dark(): --md-outline-variant ya resuelve las dos columnas, así que envolverlo de nuevo repetiría la regla del §1 de la skill en vez de servirla; el color-mix() hereda el valor correcto del tema vigente porque su origen ya lo es. 60% deja la línea perceptible en claro —no es texto, el mínimo que le aplica es 3:1 de silueta y no 4,5:1— y más suave que el borde del cajón en los dos temas. */ --md-separador: color-mix(in srgb, var(--md-outline-variant) 60%, transparent); /* --------------------------------------------------------------------- FORMA — shape scale de Material Design 3. Reemplaza a --r1..--r4: esos cuatro radios eran una escala propia sin relación con el resto del sistema MD3 que ya gobierna color; con --md-shape-* un componente de acogida (large/extra-large) y uno de trabajo (extra-small/small) usan el mismo vocabulario que --md-primary o --md-surface-container-low, en vez de un radio "que quedaba bien" elegido aparte. El criterio de asignación es el de los dos registros (skill §3): acogida (modal, .hoja, el panel desplegable) lleva forma plena —large o extra-large según el peso de la pieza—, trabajo (tablas, celdas, elementos dentro de una fila) lleva forma contenida —extra-small o small—, y los campos de formulario van siempre en small. Cada uso puntual lleva su propio comentario cuando el porqué no es obvio por el nombre del token. */ --md-shape-none: 0px; --md-shape-extra-small: 4px; --md-shape-small: 8px; --md-shape-medium: 12px; --md-shape-large: 16px; --md-shape-extra-large: 28px; --md-shape-full: 9999px; --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --ancho-contenido: 1600px; --pad-lateral: clamp(var(--e4), 2.5vw, var(--e5)); --alto-cab: 60px; --ancho-riel: 248px; --ancho-riel-compacto: 76px; /* --------------------------------------------------------------------- MOVIMIENTO — spring tokens de Material Design 3, generados por tools/resorte.php. Reemplazan al par único --dur/--curva: ese par trataba «algo que se desplaza» y «algo que solo cambia de color» con la misma curva, y --curva («arranca rápido y frena largo») era una decisión razonable para lo primero que quedaba de prestado en lo segundo. Con seis tokens cada cual lleva el suyo — ver el criterio completo en el comentario del bloque generado, y en la skill `estilos-vinculo` §8. El bloque de acá abajo, hasta el marcador de cierre, lo escribe `tools/resorte.php` — no se edita a mano. Para regenerarlo: php tools/resorte.php --escribir */ /* >>> movimiento generado por tools/resorte.php — no editar a mano <<< Curvas `linear()` de un resorte amortiguado (masa 1, rigidez + amortiguación por par), muestreado hasta asentarse dentro del 0,1 %. Para regenerar: php tools/resorte.php --escribir espacial-* : algo que se DESPLAZA (el panel que se despliega, el riel del ingreso, el rótulo del botón que sube). Sobrepasan 1 y vuelven — el rebote es lo que lo hace leerse como un objeto con inercia. efecto-* : algo que CAMBIA SIN MOVERSE (opacidad, color, fondo, borde, el velo del modal). No rebasan 1: un fundido que rebota en opacidad parpadea, no ayuda. Un hover de color NUNCA lleva un token espacial — es el error clásico al adoptar MD3: darle resorte a todo deja la interfaz entera gelatinosa. Detalle completo en la skill `estilos-vinculo` §8. */ --resorte-espacial-rapido: linear(0, 0.049, 0.1628, 0.3037, 0.4476, 0.5803, 0.6946, 0.788, 0.861, 0.9156, 0.9547, 0.9814, 0.9984, 1.0084, 1.0134, 1.0151, 1.0147, 1.0132, 1.0111, 1.0089, 1.0068, 1.005, 1.0035, 1.0024, 1.0015, 1.0008, 1.0004, 1.0001, 1); --dur-espacial-rapido: 257ms; /* rebota, pico 1.0151 */ --resorte-espacial-normal: linear(0, 0.0442, 0.1456, 0.2706, 0.3985, 0.5179, 0.6228, 0.7113, 0.7836, 0.8411, 0.8857, 0.9197, 0.945, 0.9634, 0.9766, 0.9857, 0.992, 0.9961, 0.9987, 1.0002, 1.001, 1.0014, 1.0015, 1.0015, 1.0013, 1.0011, 1.0009, 1.0007, 1); --dur-espacial-normal: 347ms; /* rebota, pico 1.0015 */ --resorte-espacial-lento: linear(0, 0.0234, 0.0816, 0.1602, 0.2487, 0.3399, 0.4289, 0.5125, 0.5889, 0.6573, 0.7173, 0.7692, 0.8135, 0.8508, 0.882, 0.9077, 0.9286, 0.9455, 0.9591, 0.9698, 0.9782, 0.9846, 0.9896, 0.9933, 0.996, 0.998, 0.9994, 1.0003, 1); --dur-espacial-lento: 375ms; /* rebota, pico 1.0003 */ --resorte-efecto-rapido: linear(0, 0.0606, 0.1885, 0.3333, 0.4703, 0.5889, 0.6867, 0.7645, 0.8249, 0.871, 0.9057, 0.9315, 0.9505, 0.9644, 0.9745, 0.9818, 0.9871, 0.9908, 0.9935, 0.9954, 0.9968, 0.9977, 0.9984, 0.9989, 0.9992, 0.9995, 0.9996, 0.9997, 1); --dur-efecto-rapido: 180ms; --resorte-efecto-normal: linear(0, 0.0544, 0.1718, 0.3078, 0.4393, 0.556, 0.6544, 0.7345, 0.7983, 0.8481, 0.8864, 0.9156, 0.9376, 0.9541, 0.9664, 0.9754, 0.9821, 0.987, 0.9906, 0.9932, 0.9951, 0.9965, 0.9975, 0.9982, 0.9987, 0.9991, 0.9993, 0.9995, 1); --dur-efecto-normal: 261ms; --resorte-efecto-lento: linear(0, 0.0513, 0.1632, 0.2943, 0.4227, 0.5381, 0.6365, 0.7177, 0.783, 0.8347, 0.8749, 0.906, 0.9297, 0.9476, 0.9612, 0.9713, 0.9789, 0.9845, 0.9886, 0.9917, 0.9939, 0.9956, 0.9968, 0.9977, 0.9983, 0.9988, 0.9991, 0.9994, 1); --dur-efecto-lento: 357ms; /* <<< fin del movimiento generado — tools/resorte.php <<< */ /* Prueba (25-09-2026): Roboto en vez de Inter como tipografía principal, reversible igual que la del azul del armazón. Volver a Inter es poner `InterVariable` primero acá — el @font-face y assets/vendor/inter/ siguen intactos mientras dure la prueba, no se borran. RobotoVariable es la que se vendorizó arriba y la que se usa ahora. `Roboto` la sigue por si el archivo no llegó a bajar y el puesto la tiene instalada (es común en Android/Chrome OS). Detrás queda InterVariable/Inter por si algún puesto ya la tuviera cacheada de antes de la prueba, y el resto es la caída al sistema. Ninguna sale a la red: no hay una sola URL de terceros en esta hoja. */ --tipo: RobotoVariable, Roboto, InterVariable, Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* --------------------------------------------------------------------- ESCALA TIPOGRÁFICA — fase 2 (densidad y tipografía). Pocos peldaños, cada uno con un trabajo fijo. Antes convivían números sueltos y cercanos —11, 12, 13, 14, 16, 18px— elegidos pantalla por pantalla, y la diferencia entre un dato y su metadato la hacía casi solo el color (dos señales que además debían viajar juntas, no una sola). Con la escala nombrada el tamaño mismo dice qué es cada texto: --fs-micro rótulo de sección en versalitas: el nombre de grupo de la matriz, la marca «crítico» junto a un código. --fs-meta metadato — lo que CALIFICA al dato y no es el dato: la etiqueta de un campo, la cabecera de una tabla, la ayuda y el error de un formulario. --fs-dato texto secundario de interfaz: subtítulo de panel, conteo de una lista, el cuerpo de un aviso flotante. --fs-cuerpo el dato principal — es el tamaño base de , así que una celda de tabla sin regla propia ya cae acá; se nombra igual para poder escribirlo explícito donde haga falta decir «este es el peldaño base» sin dejar un 14px suelto. --fs-titulo título de una pieza que presenta UN registro: panel, modal, el primer renglón de un estado vacío. --fs-vista el título de la VISTA, en el navbar. Hay uno solo por pantalla y es el texto más grande de la interfaz: el peldaño existe para que sea el tamaño, y no solo el peso, lo que lo separa del módulo que lo antecede en las migas. Lo agregó la fase 4 (riel y navbar), que es la que se lo encontró; la fase 2 dejó el hueco escrito. El riel y el navbar entraron a la escala en esa misma fase 4: la marca «Vínculo» en --fs-titulo, los destinos en --fs-cuerpo, el segundo nivel y el pie en --fs-dato, el rótulo de módulo en --fs-micro. No quedan números sueltos en el armazón. Dos interlíneas y no una por componente: `--lh-ajustada` para texto corto que no es prosa —una celda de tabla, un código con su descripción debajo— y `--lh-texto` para lo que se lee de corrido —el mensaje de un modal, la nota de un aviso—. `--lh-texto` es el 1.5 que ya traía : queda nombrado para no repetir el número suelto en cada regla que lo necesite explícito, no para cambiarlo. */ --fs-micro: 11px; --fs-meta: 12px; --fs-dato: 13px; --fs-cuerpo: 14px; --fs-titulo: 16px; --fs-vista: 18px; --lh-ajustada: 1.3; --lh-texto: 1.5; /* --------------------------------------------------------------------- ELEVACIÓN — seis niveles MD3. Reemplaza a --sombra-hoja/--sombra-flota: esos dos eran EL PAR que el proyecto necesitaba hasta ahora (una hoja apoyada, un modal que flota), y seguían pensados como un par y no como una escala. Con los seis niveles, «apoyada» y «flota» pasan a ser dos puntos de la misma escala —nivel 1 y nivel 3— en vez de dos sombras inventadas aparte, y queda espacio para lo que necesite un nivel intermedio o mayor sin inventar un tercer token suelto. Offset/blur/alpha son literales en rgba() e IGUALES en los dos temas —no hay una segunda columna que light-dark() tenga que elegir—, pero cómo se LEE la elevación sí distingue por tema: en claro la sombra alcanza sola (una sombra oscura sobre superficie clara ya contrasta, y el paso entre surface-container-* aporta el resto); en oscuro una sombra negra sobre una superficie ya oscura apenas se nota, así que MD3 suma una segunda señal, el TINTE de --md-primary mezclado sobre la superficie, que crece con el nivel. Ese tinte se aplica en cada componente que usa un nivel —ver `.hoja` y `.modal` más abajo—, no acá: --md-elevation-tint-N es el porcentaje, no el color final, porque el color base a teñir cambia según qué superficie use cada pieza (surface-container-low en las dos que hay hoy, pero no tiene por qué ser siempre esa). */ --md-elevation-0: none; --md-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, .30), 0px 1px 3px 1px rgba(0, 0, 0, .15); --md-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, .30), 0px 2px 6px 2px rgba(0, 0, 0, .15); --md-elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, .30), 0px 4px 8px 3px rgba(0, 0, 0, .15); --md-elevation-4: 0px 2px 3px 0px rgba(0, 0, 0, .30), 0px 6px 10px 4px rgba(0, 0, 0, .15); --md-elevation-5: 0px 4px 4px 0px rgba(0, 0, 0, .30), 0px 8px 12px 6px rgba(0, 0, 0, .15); --md-elevation-tint-0: 0%; --md-elevation-tint-1: 5%; --md-elevation-tint-2: 8%; --md-elevation-tint-3: 11%; --md-elevation-tint-4: 12%; --md-elevation-tint-5: 14%; /* --- Vidrio del riel -------------------------------------------------- El filo y el borde del cristal son BRILLO y no color de marca: un blanco a muy baja opacidad que simula la luz pegando en el canto de una lámina. Por eso no salen de la paleta generada y llevan literal, igual que --ing-papel-filo. En claro el filo es casi opaco —el brillo sobre una superficie clara tiene que ganarle al fondo— y en oscuro apenas se insinúa: ahí el mismo valor se vería como una línea blanca dibujada. */ --riel-vidrio-filo: light-dark(rgba(255, 255, 255, .70), rgba(255, 255, 255, .13)); --riel-vidrio-borde: light-dark(rgba(0, 45, 40, .10), rgba(255, 255, 255, .09)); /* --- El roce del armazón ---------------------------------------------- Un solo tono para el `:hover` de TODO el cromo —la palanca, el destino, el subenlace, el botón del pie y el ☰ del navbar—, porque desde la fase 4 el riel y el navbar son el mismo plano (-lowest) y un roce distinto en cada uno se leería como dos superficies. Es una CAPA DE ESTADO a la manera de MD3 —8 % del color del texto mezclado sobre la superficie— y no un escalón de la escala de contenedores, y el motivo es aritmético: en claro el riel es blanco puro y la píldora del destino activo, una vez resuelto su 55 % de --md-secondary-container, cae en rgb(219, 245, 241); los escalones candidatos caen en rgb(230, 247, 244), rgb(225, 241, 239) y rgb(219, 236, 233) — el último tiene EXACTAMENTE la misma claridad que la píldora—. Pasar el mouse por un destino cualquiera lo dejaba tan lleno como el destino donde uno está parado, y el relleno es la única señal que el riel tiene para decir dónde está parado. La capa de estado resuelve eso cambiando de eje: arrastra el gris del texto, así que el roce es NEUTRO y la píldora TEÑIDA, y lo que las separa pasa a ser el matiz y no dos puntos de claridad. 8 % y no el 12 % que usa `.boton:hover`: un riel tiene quince destinos a la vez y una barra de acciones tiene tres. A esa cantidad, el roce de un botón sería ruido recorriendo la columna. */ --armazon-roce: color-mix(in oklab, var(--md-surface-container-lowest) 92%, var(--md-on-surface)); /* --- Prueba visual: el armazón azul (SOLO tema claro) ------------------- Pedido de Rafael, 25-09-2026: un armazón azul en el riel y el navbar. El oscuro no cambia — el lado oscuro de cada `light-dark()` de acá abajo es exactamente lo que el riel y el navbar ya usaban (el escalón -lowest, --md-on-surface, --md-on-surface-variant, --armazon-roce, --md-outline-variant, --md-primary). Todo el color nuevo vive en LOS TOKENS de acá abajo: para revertir la prueba o probar otro azul, se edita el valor claro de --armazon-fondo y nada más en el resto de la hoja. No se reutiliza --armazon-roce para el roce de este cromo: ese token también lo usan `.panel-lateral__cerrar` y `.organigrama__accion`, que NO están sobre este azul, y sigue calibrado contra una superficie clara casi blanca — pintado como capa opaca (no es transparente) quedaría un rectángulo gris claro sobre el azul en vez del velo blanco fino que pide el roce de un cromo de color. Por eso --armazon-realce es un token aparte, con su propia opacidad. */ /* Prueba 2 (25-09-2026): azul profundo #19369c en degradado hacia #3a64e0 (primero fue hacia #2a4fc4; Rafael lo pidió más marcado). Blanco sobre los dos extremos: 10,25:1 y 5,15:1; el tenue al 92 %, 4,62:1 en el extremo claro — todo el texto del armazón sigue en AA. 🔴 #3a64e0 es el límite: más claro que eso, el tenue cae bajo 4,5:1 (con #3f6ae8, 4,27:1). La prueba 1 era #5d87ff plano (3,29:1, no pasaba). El degradado se arma con DOS tokens de color y no con un token de imagen porque light-dark() solo acepta colores: en oscuro los dos extremos son la misma superficie y el degradado queda plano, sin una regla aparte por tema. Para volver a un color plano, igualar --armazon-fondo-fin a --armazon-fondo. */ --armazon-fondo: light-dark(#19369c, var(--md-surface-container-lowest)); --armazon-fondo-fin: light-dark(#3a64e0, var(--md-surface-container-lowest)); /* Un solo degradado para riel y navbar, anclado a la ventana (`background-attachment: fixed` donde se usa): así los dos planos son tramos de la MISMA superficie y la esquina no puede abrir costura, que es lo que pasaría con un degradado vertical en el riel y otro horizontal en el navbar. */ --armazon-degradado: linear-gradient(135deg, var(--armazon-fondo) 0%, var(--armazon-fondo-fin) 100%); /* Prueba (25-09-2026): el botón principal de toda la aplicación deja el violeta de la paleta y toma el azul profundo del armazón, para que haya un solo color de marca. Blanco sobre #19369c: 10,25:1; el hover mezcla hacia on-surface y solo sube. En oscuro sigue el primario de la paleta. Volver: poner var(--md-primary) / var(--md-on-primary) en el lado claro. */ --boton-principal-fondo: light-dark(#19369c, var(--md-primary)); --boton-principal-texto: light-dark(#ffffff, var(--md-on-primary)); /* Prueba (25-09-2026): el botón oscuro, para las acciones que cada vista carga en el navbar (`.cab__acciones`: «Nuevo usuario», «Nueva cita»…). El primario de la paleta es violeta y sobre este azul se ve ajeno; un relleno casi negro de la misma familia se lee como parte del armazón. Blanco sobre #0b1437: 18,4:1. El borde blanco al 28 % es lo que lo despega del extremo oscuro del degradado, que está a solo 1,9:1 del relleno. En oscuro vuelve al primario de siempre. */ --armazon-boton-fondo: light-dark(#0b1437, var(--md-primary)); --armazon-boton-texto: light-dark(#ffffff, var(--md-on-primary)); --armazon-boton-borde: light-dark(rgba(255, 255, 255, .28), transparent); /* El hover mezcla HACIA el blanco en claro: la fórmula general mezcla hacia on-surface, que sobre un relleno casi negro no se notaría. */ --armazon-boton-roce: light-dark(#ffffff, var(--md-on-surface)); --armazon-texto: light-dark(#ffffff, var(--md-on-surface)); /* El verde de la marca, igual en los dos temas: es el color del logo y no cambia con la pantalla. 🔴 Decoración: sobre blanco no llega a AA, así que nunca lleva texto ni es la única señal de nada. */ --marca-verde: #57b198; /* El pliegue de la V: el verde oscurecido, donde la cinta pasa bajo la azul. */ --marca-pliegue: #3d8f78; /* .92 y no opaco: la diferencia con --armazon-texto es la única señal de jerarquía que le queda a un rótulo secundario del armazón, ahora que el color de fondo ya no es la superficie neutra de siempre. Sobre el azul profundo queda cerca de 9:1 en el extremo oscuro y sobre 6:1 en el claro; no bajarlo mucho más, porque el blanco translúcido se mezcla con el fondo y el extremo claro del degradado es el que manda. */ --armazon-texto-tenue: light-dark(rgba(255, 255, 255, .92), var(--md-on-surface-variant)); /* El separador (borde derecho del riel, raya del navbar, línea del pie, el trazo del árbol del segundo nivel): decorativo, no texto, así que no le aplica el 4,5:1 — alcanza con leerse como una línea sobre el azul. */ --armazon-borde: light-dark(rgba(255, 255, 255, .24), var(--md-outline-variant)); /* El roce (`:hover`) de este cromo. Ver la nota de arriba sobre por qué no es --armazon-roce. */ --armazon-realce: light-dark(rgba(255, 255, 255, .14), var(--armazon-roce)); /* El destino activo NO usa --md-secondary-container (el tono de la paleta que ya cumplía ese papel): sobre este azul, un lila casi blanco se funde con el fondo y deja de leerse como relleno. Pasa a blanco —sigue llevando el vidrio (blur + saturate) que ya tenía el riel— con el texto en un azul MÁS SATURADO que el de fondo: el mismo #5d87ff sobre blanco vuelve a dar 3,29:1, y el enlace activo es texto normal de verdad, no una silueta — 4,5:1 le corresponde. #3f6ae8 sobre blanco: 4,73:1. */ --armazon-activo-fondo: light-dark(rgba(255, 255, 255, .85), color-mix(in srgb, var(--md-secondary-container) 55%, transparent)); /* La misma pieza sin `backdrop-filter` (el `@supports not` de más abajo): ahí no hay nada detrás que mezclar, así que el blanco va opaco. */ --armazon-activo-fondo-opaco: light-dark(#ffffff, var(--md-secondary-container)); --armazon-activo-texto: light-dark(#19369c, var(--md-on-secondary-container)); /* El foco global (§5 de la skill) usa --md-primary, que sobre este azul da apenas 1,96:1 — casi no se ve. Este token lo reemplaza SOLO dentro del riel y el navbar (ver el selector puntual más abajo); en oscuro es el mismo --md-primary de siempre, sin cambio. La regla global de `:focus-visible` no se toca ni se apaga en ningún lado: sigue rigiendo para el resto de la aplicación. */ --armazon-foco: light-dark(#ffffff, var(--md-primary)); /* --- Panel de indicadores (27-09-2026) --------------------------------- Las series de los gráficos. Una por gráfico, nunca más de dos en la pantalla, y se validaron con el script de la skill `dataviz` (`validate_palette.js`): en claro contra #ffffff y en oscuro contra #1a1522 —la superficie -lowest donde se dibujan—, las dos pasan banda de claridad, croma, separación para daltonismo y 3:1 contra el fondo. El azul de la maqueta (#19369c) NO pasa la banda: es demasiado oscuro para una línea de 2 px junto a la tinta del texto, y por eso la serie usa el extremo más vivo de la familia del armazón. Ningún texto se pinta con estos colores: la línea lleva el color, el rótulo la tinta. */ --grafico-serie-1: light-dark(#2f55d4, #5f7ff0); --grafico-serie-2: light-dark(#b35c00, #d57a22); /* La tarjeta ámbar de «Sin respuesta · hay que llamar». El fondo es la única superficie teñida del panel: es lo que hay que hacer primero. */ --kpi-alerta-fondo: light-dark(#fffaf1, color-mix(in srgb, var(--md-warning-container) 30%, var(--md-surface-container-lowest))); --kpi-alerta-borde: light-dark(#f1be69, #7d5800); --kpi-alerta-texto: light-dark(#5e4100, #ffdeae); /* Las píldoras de variación: más suaves que los contenedores MD3 de éxito, que en claro saturan demasiado para seis píldoras a la vez. */ --kpi-mejor-fondo: light-dark(#dcf5de, #0c5221); --kpi-mejor-texto: light-dark(#1f5a2b, #aff3b5); --kpi-peor-fondo: light-dark(#ffdad3, #5c1a12); --kpi-peor-texto: light-dark(#93000c, #ffdad3); /* La sombra de las tarjetas tira al azul del armazón en claro; en oscuro una sombra de color no se ve, así que es negra y más densa. */ --kpi-sombra: light-dark(rgba(25, 54, 156, .18), rgba(0, 0, 0, .55)); /* Los filtros sobre la franja: vidrio blanco sobre el azul en claro, y en oscuro —donde la franja es la superficie plana del armazón— los controles de siempre. */ --kpi-filtro-fondo: light-dark(rgba(255, 255, 255, .14), var(--md-surface-container-high)); --kpi-filtro-borde: light-dark(rgba(255, 255, 255, .40), var(--md-outline-variant)); --kpi-filtro-activo-fondo: light-dark(#ffffff, var(--md-primary-container)); --kpi-filtro-activo-texto: light-dark(#19369c, var(--md-on-primary-container)); /* --- Ingreso --------------------------------------------------------- Hasta el 25-09-2026 el ingreso se comprometía con UN aspecto fijo y no seguía el tema, a propósito: «es una puerta, no un escritorio». Rafael pidió ese día llevar el azul del armazón (--armazon-fondo, más arriba) también al ingreso, con el formulario respetando los tres estados de tema — eso invierte la parte de la decisión vieja que mantenía el PAPEL siempre claro. Lo que se pierde: la garantía de «se ve igual en cualquier puesto, sin depender de qué tema tenga elegido ese navegador» — ahora si el puesto está en oscuro, el papel también. El PANEL DE MARCA (`.ingreso__identidad`, más abajo) sigue sin seguir el tema: es fieltro siempre oscuro, ahora en el azul del armazón en vez de verde, y con eso alcanza para que se vea igual en los dos temas —no hace falta light-dark() ahí. El PAPEL del formulario sí lo sigue desde hoy, así que sus tokens llevan light-dark() como el resto de la hoja (ver la nota del encabezado del archivo). */ /* --- El panel de marca: el azul, no el fieltro verde --- Mismo azul y mismo ángulo que --armazon-degradado, pero en tokens propios y literales (no reutiliza --armazon-fondo): ese token vuelve a gris en tema oscuro porque el riel sí sigue el tema, y este panel no tiene que hacerlo — «se ve igual en los dos temas, porque ya es oscuro» es la instrucción, y --armazon-fondo no lo cumpliría acá. */ --ing-marca-1: #19369c; --ing-marca-fin: #3a64e0; /* --- El velo, en DOS capas --- Pedido de Rafael, 25-09-2026 (segunda vuelta): con el velo parejo al 94 % el video prácticamente no se veía —cumplía el contraste, pero ya no se leía como una toma—. La alternativa es partir el velo en dos: 1. `.ingreso__velo` — PAREJO, sobre TODO el panel, mucho más tenue. Es el que deja que el video se vea de verdad. 2. `.ingreso__identidad-contenido` — un fondo PROPIO, solo detrás del bloque de texto (nombre, bajada, detalle), con su propio borde difuso (`box-shadow` con blur, ver el CSS). Es el que carga TODO el trabajo de contraste, y solo ahí. 🔴 Cómo se midió: mismo método que antes —`ingreso.jpg` es el primer cuadro exacto de `ingreso.mp4` (mismo `-ss 3`, ver ORIGEN); con PIL (`GaussianBlur` + `numpy`) el máximo de cada canal en cualquier píxel del cuadro da RGB(255,255,237), y esa sigue siendo la referencia—. Ahora la composición es en DOS pasos, cada uno en espacio sRGB: Paso 1 — el velo parejo (68 %, dentro del 65-70 % pedido) sobre el extremo MÁS CLARO del degradado (`--ing-marca-fin`, el peor caso) compositado sobre RGB(255,255,237): → color resultante ≈ rgb(121, 150, 228), L = 0,314. Solo, ese resultado da 2,89:1 contra blanco — bastante menos que 4,5:1, y es justo lo que se espera: este velo NO tiene que cargar el contraste solo, para eso está el paso 2. Paso 2 — el fondo del bloque de texto: un navy casi negro, rgb(6, 10, 26), ENCIMA del resultado del paso 1, a distintas opacidades: 30 % → contraste final 5,13:1 — ya cumple. 35 % → contraste final 5,69:1. 40 % → contraste final 6,34:1 (elegido). Con el velo parejo solo al 68 % —en vez del 94 % de la vuelta anterior— el video se ve como una toma en el 92 % del panel que no tiene texto encima. El fondo del bloque de texto es una caja SÓLIDA —no un degradado que se apaga hacia el borde—, así que el contraste vale igual en el centro que pegado al borde de la caja: lo que se difumina (`box-shadow` con blur) queda POR FUERA de esa caja, donde no hay ninguna letra. El botón de pausa queda FUERA de esta caja —esquina opuesta del panel— y sigue con su propio fondo oscuro de siempre (`.ingreso__video-boton`): contra este velo más claro da 8,54:1 para su ícono blanco, de sobra sobre el 3:1 que le corresponde por ser un control y no texto. */ --ing-marca-velo-1: rgba(25, 54, 156, .68); --ing-marca-velo-fin: rgba(58, 100, 224, .68); --ing-marca-scrim: rgba(6, 10, 26, .40); /* El nombre («Vínculo») en blanco sólido: 6,34:1 contra el fondo del bloque de texto en el peor cuadro medido —de sobra, es lo primero que se lee—. La bajada y el detalle SÍ pueden volver a un blanco tenue —el fondo del bloque ya no es el video a secas, así que hay margen—: #e4e9f2 da 5,20:1 contra ese mismo peor caso, visiblemente más apagado que el blanco puro y todavía sobre 4,5:1. Los dos son sólidos y no traslúcidos: un tono que se mezcla con lo que tiene detrás vuelve a depender de qué tan claro está el cuadro de video de ese instante, que es justo lo que la caja del paso 2 existe para dejar de importar. */ --ing-marca-texto: #ffffff; --ing-marca-texto-tenue: #e4e9f2; /* --- El papel del formulario --- Opaco y no translúcido: el cristal con backdrop-filter existía para que el degradado se viera a través de la tarjeta, y a través de una hoja de papel no se ve nada. Desde el 25-09-2026 sigue el tema (ver la nota de arriba): el valor claro es el papel crema de siempre, el oscuro es un azul-noche muy oscuro que combina con el acento —no un gris neutro— para que el formulario no se sienta desconectado del panel de marca. */ --ing-papel: light-dark(#f0ede4, #12181f); --ing-papel-borde: light-dark(rgba(0, 45, 40, .16), rgba(255, 255, 255, .14)); --ing-papel-filo: light-dark(rgba(255, 255, 255, .85), rgba(255, 255, 255, .10)); /* el filo superior */ --ing-texto: light-dark(#15302c, #eef1f5); --ing-tenue: light-dark(#4c5f5a, #b7c0cc); /* etiquetas y ayuda: 5,80:1 claro, 9,71:1 oscuro, los dos sobre --ing-papel */ --ing-hueco: light-dark(#7d8a85, #7c8794); /* la sugerencia del campo: no es texto que haga falta leer, no le aplica 4,5:1 */ --ing-campo: light-dark(#fbf9f4, #1c242e); --ing-campo-borde: light-dark(rgba(0, 71, 65, .22), rgba(255, 255, 255, .22)); --ing-campo-borde-hover: light-dark(rgba(0, 71, 65, .38), rgba(255, 255, 255, .36)); --ing-campo-activo: light-dark(#ffffff, #222c38); /* El relleno automático de Chrome se tapa con un color OPACO —una rgba con alfa dejaría ver el papel de abajo—, y tiene que ser el mismo que el campo activo o el campo autocompletado se ve de otro color que el resto. */ --ing-campo-autofill: light-dark(#ffffff, #222c38); /* --- El azul, en el formulario --- Pedido de Rafael, 25-09-2026: el mismo azul del armazón —#19369c hacia #3a64e0— en los acentos del formulario. Dos tokens y no uno, porque cumplen roles distintos: `--ing-acento` es el RELLENO del botón: siempre #19369c con texto blanco, en los dos temas — un azul oscuro funciona igual de bien como fondo sólido tenga el papel el tono que tenga, así que no hace falta light-dark() acá. `--ing-acento-papel` es el azul TAL COMO SE LEE SOBRE EL PAPEL —el nombre en celular, los enlaces, el borde del campo enfocado—. Ahí sí hace falta light-dark(): #19369c da 8,75:1 sobre el papel claro pero apenas 1,74:1 sobre el papel oscuro —los dos son azules oscuros, se confunden—. #8fb0ff dando 8,35:1 sobre el papel oscuro es el reemplazo para ese lado. */ --ing-acento: #19369c; --ing-acento-alto: #2a4fc4; /* hover: 6,97:1 con blanco encima, un tono intermedio hacia --ing-marca-fin */ --ing-acento-texto: #ffffff; /* 10,25:1 sobre --ing-acento */ --ing-acento-papel: light-dark(#19369c, #8fb0ff); /* La línea y el resplandor de foco usan el mismo azul que el resto del formulario (antes era un teal propio, `--ing-linea-foco`, que no tenía relación con ningún otro acento de la pantalla). */ --ing-linea-foco: var(--ing-acento-papel); --ing-foco: light-dark(rgba(25, 54, 156, .22), rgba(143, 176, 255, .30)); /* Los avisos van con texto OSCURO sobre un tinte claro en tema claro, y AL REVÉS en oscuro —texto claro sobre un tinte oscuro—, porque el papel se invirtió: pintar el mismo tono oscuro sobre un papel ya oscuro repite el error que esta nota describía antes (salmón sobre crema, ilegible) con los dos temas cambiados de lugar. */ --ing-fail: light-dark(#a3271f, #ffb4ab); /* 5,34:1 claro / 7,84:1 oscuro, los dos sobre su propio fondo */ --ing-fail-fondo: light-dark(rgba(163, 39, 31, .10), rgba(255, 180, 171, .14)); --ing-fail-borde: light-dark(rgba(163, 39, 31, .32), rgba(255, 180, 171, .35)); /* El verde de la confirmación se corre hacia el verde puro y se aleja del azul del botón: en una pantalla que ya lleva azul de sobra, un «listo» del mismo tono que el acento se lee como decoración y no como respuesta. */ --ing-ok: light-dark(#0f6b3f, #9ee6b8); /* 4,73:1 claro / 8,84:1 oscuro, los dos sobre su propio fondo */ --ing-ok-fondo: light-dark(rgba(15, 107, 63, .12), rgba(158, 230, 184, .14)); --ing-ok-borde: light-dark(rgba(15, 107, 63, .30), rgba(158, 230, 184, .35)); } /* Los tres estados del tema (§2). El de por omisión —«sistema»— es no llevar el atributo: ahí manda el `color-scheme: light dark` de arriba, que sigue al sistema operativo. `ts/lib/tema.ts` no cambia: pone y quita el mismo atributo, solo que ahora acciona el esquema en vez de repintar la paleta. */ :root[data-tema="claro"] { color-scheme: light; } :root[data-tema="oscuro"] { color-scheme: dark; } @layer base { /* --- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; /* El lienzo baja un escalón respecto de --md-surface: antes el fondo (--md-surface) y el contenido (--md-surface-container-low, en .hoja y la tabla) quedaban a UN escalón de distancia en la escala de contenedores y apenas se distinguían. Ahora el lienzo ocupa ese escalón y el contenido sube a --md-surface-container-lowest —.cab, .hoja, .modal, .menu, .tabla-caja, todas abajo—, así que el salto pasa a ser de DOS escalones en los dos temas: en claro el contenido se acerca al blanco puro y el lienzo queda apenas más gris; en oscuro el lienzo es el tono más oscuro de la escala y el contenido queda POR ENCIMA de él. Esa segunda mitad cambió el 20 de septiembre de 2026. Antes, con el orden de MD3, -lowest era el extremo más oscuro y el contenido quedaba MÁS oscuro que el lienzo: la tabla se leía recesada y no elevada. La columna oscura invirtió -lowest y -low a propósito —el porqué está en el bloque generado de la paleta— y ahora las dos columnas dicen lo mismo: más pasos de contenedor = más elevado, que es la dirección que .hoja ya usaba con el tinte. */ background: var(--md-surface-container-low); color: var(--md-on-surface); font-family: var(--tipo); /* --fs-cuerpo/--lh-texto y no 14px/1.5 sueltos: es el mismo valor de siempre, ahora nombrado en la escala de :root (ver el comentario ahí), así que el peldaño base del sistema tipográfico se lee en un solo lugar y no como un literal que la escala «casi» repite. */ font-size: var(--fs-cuerpo); line-height: var(--lh-texto); -webkit-text-size-adjust: 100%; } /* Cifras tabulares en todo lo que se lee de corrido y se compara entre filas. Un RUN o una hora mal leídos mandan a un paciente al box equivocado. */ table, input, kbd, .mono, .cifra { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); } /* El foco visible va global y NO se quita. En un mesón de atención, con el teclado y sin soltar el mouse, es la única forma de saber dónde se está. Nunca `outline: none` sin poner otra señal igual de visible en su lugar. */ :focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; /* Respaldo para lo que no define radio propio (un suelto, por ejemplo): un componente con su propio --md-shape-* en una capa posterior lo pisa igual —misma especificidad, y `componentes` va después de `base` en el orden de capas de la línea 33. */ border-radius: var(--md-shape-extra-small); } /* --- `hidden` gana siempre ------------------------------------------------ */ /* 🔴 El `display: none` que el navegador le da a `[hidden]` es de la hoja de usuario-agente, así que CUALQUIER `display` de un componente le gana: un `.riel__subnivel { display: flex }` deja la lista dibujada aunque el JavaScript le haya puesto `hidden`. El elemento queda marcado como oculto para el lector de pantalla y visible para el ojo, que es la peor de las dos mitades. Es el único lugar de la hoja con `!important` y tiene motivo: es la forma de que un atributo del HTML le gane a la declaración de cualquier componente, presente o futuro. Va en `base` por lo mismo que el bloque de abajo — para las declaraciones `!important` el orden de las capas se invierte, así que desde acá le gana también a lo que venga en `componentes`. */ [hidden] { display: none !important; } /* --- Movimiento reducido -------------------------------------------------- */ /* Va en la primera capa a propósito: para las declaraciones `!important` el orden de las capas se INVIERTE, así que desde `base` este bloque le gana a cualquier !important que se agregue después en otra capa. */ @media (prefers-reduced-motion: reduce) { /* `::backdrop` va en la lista porque el velo del modal se anima ahí y no lo alcanzaría ni `*` ni `*::before`. */ *, *::before, *::after, *::backdrop { animation-duration: .01ms !important; /* el usuario pidió no ver movimiento */ animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } } @layer componentes { /* --- Estados de pantalla ------------------------------------------------- */ .cargando, .vacio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e2); min-height: 60vh; padding: var(--e5) var(--pad-lateral); color: var(--md-on-surface-variant); text-align: center; } .vacio p { margin: 0; } .vacio p:first-child { color: var(--md-on-surface); font-size: var(--fs-titulo); font-weight: 600; } /* --- La hoja ------------------------------------------------------------- */ /* Una pantalla que presenta UN registro —la ficha de una persona, el detalle de una cita, el expediente de una anonimización— lleva `.hoja`. Es transversal: son la misma clase de pantalla y tienen que leerse igual. Un listado NO la lleva: una tabla no es una hoja, es un cajón. */ .hoja { /* Tinte de elevación nivel 1: en claro el color es el llano surface-container-LOWEST —light-dark() ni evalúa el color-mix()—; en oscuro se mezcla el --md-elevation-tint-1 (5%) de --md-primary encima, reproduciendo la misma señal que ya aporta la sombra pero por el lado del color. `in oklab` y no sRGB por la misma razón que ya vale para el hover del botón (línea ~600): interpolar en sRGB ensucia el paso — ver ese comentario para el detalle. Antes era -container-low, el mismo tono que el lienzo (body): con el lienzo ahora en -container-low (ver `body`), quedarse acá lo hubiera fundido con el fondo. -lowest es el escalón del cromo y de todo lo apoyado —el mismo que usan .modal, .menu, .cab, .tabla-caja y el riel—: suben juntos, para no quedar cada pieza a una distancia distinta del lienzo. En claro es el blanco puro, el extremo de la escala; en oscuro está un escalón por encima del lienzo y no en el extremo, desde que la columna oscura invirtió los dos tonos. */ background: light-dark(var(--md-surface-container-lowest), color-mix(in oklab, var(--md-primary) var(--md-elevation-tint-1), var(--md-surface-container-lowest))); border: 1px solid var(--md-outline-variant); /* Acogida: la ficha de una persona, el detalle de una cita. */ border-radius: var(--md-shape-large); /* Apoyada en el escritorio, no flotando: nivel 1, el más bajo que trae sombra propia. Ver la nota junto a .modal, que usa el nivel 3 — si se parecieran, lo que flota dejaría de distinguirse de lo posado. */ box-shadow: var(--md-elevation-1); padding: var(--e5); } /* --- El panel que se pliega ---------------------------------------------- */ /* El alto lo escribe el JS —ver ts/ui/desplegable.ts—: el CSS no sabe animar hacia `auto`, y el truco de `grid-template-rows: 0fr/1fr` no cubre el caso que acá es la mitad del trabajo, que es REEMPLAZAR el contenido —pulsar «Parámetros» con el formulario de edición ya abierto—. Ahí el valor sigue siendo `1fr`, no hay transición, y el alto salta. `visible clip` recorta en vertical, que es lo que hace falta para que el contenido no asome mientras se pliega, y deja pasar el horizontal, donde la sombra de la hoja sobresale unos píxeles a cada lado: con `clip` en los dos ejes esa sombra quedaría cortada a plomo. Espacial: el panel se DESPLAZA —crece de alto y empuja lo que sigue—, no solo cambia de aspecto. Rápido porque es la pieza más chica de las tres que usan el resorte espacial (panel, riel del ingreso, rótulo del botón). */ .desplegable { overflow: visible clip; transition: height var(--dur-espacial-rapido) var(--resorte-espacial-rapido); } /* La separación con lo que sigue va ADENTRO del alto que se anima. Como margen del contenedor quedaría en pie con el panel cerrado, dejando un hueco encima de la lista sin nada que lo explique. De paso le da a la sombra de la hoja el espacio que necesita antes del recorte. */ .desplegable__caja { padding-bottom: var(--e5); } /* El contenido no aparece de golpe al terminar de abrirse: entra subiendo un poco mientras el alto crece. Seis píxeles — lo justo para que se lea como que el panel trajo algo, y no como un salto. Lleva `translateY`, así que es espacial igual que el alto que la contiene —misma duración, para que las dos lecturas de «el panel llegó» terminen juntas—. */ @keyframes desplegable-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .desplegable__entrada { animation: desplegable-entra var(--dur-espacial-rapido) var(--resorte-espacial-rapido) both; } /* --- El panel lateral ------------------------------------------------------ Ver `ts/ui/panelLateral.ts`: es para un lienzo (pan/zoom), no para una lista, así que no reemplaza a `.desplegable`. Mismo resorte que el riel angosto (`--dur-espacial-rapido`): las dos son piezas grandes que entran desde el borde de la pantalla. SIN velo: el lienzo de atrás sigue completo y usable, a propósito — por eso esto no es un `