/**
* SIGCO — Sistema visual compartido.
*
* Todo el color, la tipografía y el espaciado de cada prototipo sale de las
* variables de este archivo. Ninguna pantalla declara un color propio: el
* producto se vende a la UISEK y a clínicas privadas, así que la identidad
* visual tiene que poder cambiarse enteramente acá, sin tocar los 17 HTML.
*
* Dos capas de variables:
* 1. Paleta (--sigco-*) — los valores crudos de un tema puntual.
* 2. Semántica (--color-*, --fuente-*, --esp-*, --radio-*) — lo único que
* usan los componentes de más abajo. Un tema nuevo, o el modo oscuro el
* día que se implemente, redefinen la capa 2 dentro de un solo bloque
* (`:root` para el tema activo por defecto, un selector `[data-tema]`
* o `[data-modo]` para cualquier otro) — nunca la 1, y nunca los
* componentes. Por eso alcanza con cambiar un bloque, no repasar cada
* pantalla.
*
* Cómo se activa un tema: ``. Sin el
* atributo, corre el tema base SIGCO.
*
* **El tema activo del producto es el verde (`:root`, sin atributo).**
* `azul-profundo` y `world-dental` quedan definidos como variantes
* disponibles —comparados y descartados o en espera de una clínica que
* los pida—, no como el rumbo del producto. Ninguna pantalla debe llevar
* `data-tema` puesto por defecto.
*
* Sin build: esto es una hoja de estilos común, se referencia con
* `` — funciona igual abierto con
* doble clic (`file://`) que servido por la API, sin compilar nada.
*/
/* ═══════════════════════ Tema SIGCO (base, activo) ═══════════════════════ */
:root{
/* ---- Paleta ---- */
--sigco-crema-50: #FBF9F4; /* fondo de página: hueso, no blanco puro */
--sigco-crema-100: #F3EEE3; /* bandas de hover, fondos muy suaves */
--sigco-blanco: #FFFFFF; /* superficies: tarjetas, campos — más claras que el fondo, para que se despeguen */
--sigco-carbon-900: #232A2E; /* texto principal */
--sigco-carbon-600: #5B6469; /* texto secundario, etiquetas, metadatos */
--sigco-carbon-300: #CBD2D3; /* bordes de tarjetas, tablas, campos */
--sigco-carbon-150: #ECEFEA; /* divisiones muy suaves (filas de tabla) */
/* Acento: el color del MARCO — cabecera, botones, foco, pestaña activa.
Es lo único que cambia entre variantes del tema base (ver
[data-tema="azul-profundo"], más abajo): nunca lo usa un estado. */
--sigco-acento-800: #23473F; /* acento fuerte: cabecera, hover de botón primario */
--sigco-acento-600: #3E7268; /* acento: botones y enlaces principales, foco */
--sigco-acento-100: #DEEAE4; /* acento pastel — sin uso directo hoy, completa el juego de tokens */
--sigco-acento-texto:#1B3830; /* texto sobre --sigco-acento-100 */
/* Éxito: el significado "todo bien" (disponible, suficiente). Familia
propia, independiente del acento — para que cambiar el marco no le
cambie el color a un estado. En el tema base coincide en tono con el
acento porque los dos son verdes, pero son variables distintas a
propósito: en la variante azul, el acento se va a azul y esto no. */
--sigco-exito-600: #3E7268;
--sigco-exito-100: #DEEAE4;
--sigco-exito-texto:#1B3830;
--sigco-azul-100: #E1EBF2; /* pastel informativo (neutro, no es alerta) */
--sigco-azul-texto: #294A63;
--sigco-ambar-100: #FBEED2; /* pastel de atención: por vencer, pendiente */
--sigco-ambar-texto:#6B4E12;
--sigco-ambar-600: #8A5A00; /* atención FUERTE: sólido, no pastel — hay que reponer, no solo "tener en cuenta" */
--sigco-ambar-600-texto:#FFFFFF;
--sigco-gris-100: #E7E9E6; /* pastel neutro: bloqueado, dado de baja, inactivo */
--sigco-gris-texto: #565F62;
--sigco-rojo-600: #AE2B2E; /* CRÍTICO — color pleno, nunca pastel */
--sigco-rojo-texto: #FFFFFF; /* texto sobre --sigco-rojo-600 */
--sigco-rojo-100: #F7E3E1; /* fondo de nota contextual sobre algo crítico (.bloq) — no para el indicador principal, ver nota junto a .bloq */
--sigco-rojo-claro: #FFC9C9; /* texto de error legible sobre el acento oscuro de la cabecera (agenda: #sync) — nunca sobre fondo claro, para eso está --sigco-rojo-600 */
/* ---- Tipografía ---- */
--fuente-base: -apple-system, "Segoe UI", Roboto, Calibri, Arial, sans-serif;
--fuente-titulos: var(--fuente-base); /* el tema base no usa una serif aparte */
--texto-mini: 10.5px; /* etiquetas en mayúscula, encabezados de tabla */
--texto-pequeno: 11.5px; /* metadatos, tags de cabecera */
--texto-base: 14px; /* cuerpo, formularios, tablas */
--texto-grande: 19px; /* marca, cifras de KPI */
--interlineado: 1.45;
/* ---- Espaciado (escala de 4px) ---- */
--esp-1: 4px;
--esp-2: 8px;
--esp-3: 12px;
--esp-4: 16px;
--esp-5: 24px;
--esp-6: 32px;
/* ---- Radios ---- */
--radio-sm: 4px; /* botones, campos */
--radio-md: 6px; /* paneles, franjas de estado */
--radio-lg: 7px; /* tarjetas */
/* ═══ Capa semántica: lo único que los componentes de abajo usan ═══ */
--color-fondo: var(--sigco-crema-50);
--color-superficie: var(--sigco-blanco);
--color-superficie-hover: var(--sigco-crema-100);
--color-superficie-sel: var(--sigco-azul-100);
--color-texto: var(--sigco-carbon-900);
--color-texto-tenue: var(--sigco-carbon-600);
--color-borde: var(--sigco-carbon-300);
--color-borde-suave: var(--sigco-carbon-150);
--color-acento: var(--sigco-acento-600);
--color-acento-fuerte: var(--sigco-acento-800);
--color-acento-suave: var(--sigco-acento-100);
--color-acento-contraste: #FFFFFF; /* texto/ícono sobre --color-acento o --color-acento-fuerte */
--color-info-suave: var(--sigco-azul-100);
--color-info-texto: var(--sigco-azul-texto);
--color-atencion-suave: var(--sigco-ambar-100);
--color-atencion-texto: var(--sigco-ambar-texto);
/* Atención FUERTE: todavía no es una emergencia (no es --color-critico),
pero necesita más peso que un aviso tenue — "hay que reponer", no
"tener en cuenta". Sólido, no pastel, para que se distinga de verdad
del resto de la familia atención sin acercarse al rojo. */
--color-atencion-fuerte: var(--sigco-ambar-600);
--color-atencion-fuerte-contraste: var(--sigco-ambar-600-texto);
--color-ok-suave: var(--sigco-exito-100);
--color-ok-texto: var(--sigco-exito-texto);
--color-neutro-suave: var(--sigco-gris-100);
--color-neutro-texto: var(--sigco-gris-texto);
/* CRÍTICO: nunca pastel. Lote vencido, material caducado, consentimiento
sin firmar, error de guardado. Si todo el resto es tenue, esto es lo
único que tiene que gritar. */
--color-critico: var(--sigco-rojo-600);
--color-critico-contraste: var(--sigco-rojo-texto);
--color-critico-suave: var(--sigco-rojo-100);
/* Variante para texto de error sobre un fondo oscuro de marca (la
cabecera, un modal) — nunca sobre fondo claro, ahí --color-critico ya
tiene el contraste que hace falta. */
--color-critico-sobre-oscuro: var(--sigco-rojo-claro);
}
/*
* Modo oscuro (no implementado todavía): el día que se pida, se agrega acá
* un bloque como
*
* [data-modo="oscuro"]{
* --color-fondo: #1B1F22; --color-superficie: #242A2E; ...
* }
*
* que redefine SOLO la capa semántica de arriba. Ningún componente de este
* archivo, y ninguna de las 17 pantallas, necesita tocarse: todas leen
* `var(--color-*)`, nunca un valor de la paleta directo.
*/
/* ══════════ Variante SIGCO · azul profundo (comparada, no elegida) ══════════
*
* Se comparó contra el verde con bodega.html y se decidió quedarse con el
* verde — este bloque queda definido, sin costo de mantenerlo, por si
* alguna clínica lo pide como identidad propia más adelante. No es el
* tema activo del producto (ver la nota al principio del archivo).
*
* Para mirarla: agregar `data-tema="azul-profundo"` a la etiqueta
* de una pantalla (una sola línea, se saca después de mirar). Es la MISMA
* paleta base — fondo, texto, bordes, atención, información, crítico —
* con una sola familia reemplazada: el acento del marco (cabecera,
* botones, foco, pestaña activa). --sigco-exito-* no se toca acá a
* propósito: fue la pregunta que este ejercicio existía para responder —
* si el verde de "disponible/suficiente" se lee mejor una vez que deja de
* compartir cabecera con el marco.
*
* Azul marino profundo, no celeste: HSL ~205°, oscuro y con buena
* saturación. Un celeste claro es exactamente el "azul de hospital" que
* el verde-azulado del tema base ya evita; este tono busca lo mismo que
* el verde original —sobrio, autoridad clínica— por el lado del azul en
* vez del verde, para que la comparación sea justa.
*/
[data-tema="azul-profundo"]{
--sigco-acento-800: #1E3A52; /* cabecera, hover de botón primario */
--sigco-acento-600: #2C5C82; /* botones, enlaces, foco */
--sigco-acento-100: #DCE7EF; /* acento pastel — sin uso directo hoy */
--sigco-acento-texto:#173049;
}
/* ══════════════ Tema World Dental (definido, sin aplicar) ══════════════
*
* Se activa con `` — hoy nada pone ese
* atributo, así que este bloque queda inerte.
*
* Tipografía: Cormorant Garamond (títulos) y Montserrat (cuerpo) no son
* fuentes de sistema. Cargarlas de Google Fonts rompería el modo autónomo
* (`file://`, sin red, es como se enseña el sistema a los docentes): el
* `@font-face` de una CDN simplemente no resuelve sin internet y el texto
* cae al respaldo sin aviso. La forma correcta, para cuando este tema se
* active de verdad, es autoalojar los WOFF2 dentro del proyecto
* (`prototipo/fuentes/cormorant-garamond.woff2`, `montserrat.woff2`) con
* `@font-face{ src:url("fuentes/…woff2") format("woff2"); }` — un archivo
* más en el repositorio, cero llamadas de red, funciona igual con o sin
* conexión. No se agregan los archivos ahora porque el tema no se aplica
* todavía; el respaldo de la pila de abajo es lo que se ve mientras tanto.
*/
[data-tema="world-dental"]{
--sigco-crema-50: #F5F0E6; /* marfil */
--sigco-crema-100: #ECE3D0;
--sigco-blanco: #FFFDF8;
--sigco-carbon-900: #1A1A1A; /* negro de marca */
--sigco-carbon-600: #6B6459; /* gris cálido */
--sigco-carbon-300: #D9CFBC;
--sigco-carbon-150: #EDE6D8;
--sigco-acento-800: #1A1A1A; /* cabecera: negro, no verde, en este tema */
--sigco-acento-600: #9C7A30; /* dorado como acento principal */
--sigco-acento-100: #F0E6CC;
--sigco-acento-texto:#5C4718;
--sigco-exito-600: #5C7A4A; /* verde salvia, cálido: no compite con el dorado de marca */
--sigco-exito-100: #E6EADB;
--sigco-exito-texto:#3B4E2E;
--sigco-azul-100: #EDE6D8; /* sin azul de marca: se resuelve en marfil/gris cálido */
--sigco-azul-texto: #4A4438;
--sigco-ambar-100: #F0E1BE;
--sigco-ambar-texto:#5C4718;
--sigco-ambar-600: #8A5A00;
--sigco-ambar-600-texto:#FFFFFF;
--sigco-gris-100: #E9E3D6;
--sigco-gris-texto: #6B6459;
--sigco-rojo-600: #8C2E2E; /* crítico sigue pleno: la urgencia no se subordina a la marca */
--sigco-rojo-texto: #FFFFFF;
--sigco-rojo-100: #EEDEDA;
--sigco-rojo-claro: #F2C9C9;
--fuente-base: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--fuente-titulos: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
/* ═══════════════════════ Reset y base ═══════════════════════ */
*{box-sizing:border-box}
body{
margin:0;
font:var(--texto-base)/var(--interlineado) var(--fuente-base);
color:var(--color-texto);
background:var(--color-fondo);
}
/* ═══════════════════════ Cabecera ═══════════════════════ */
header{
background:var(--color-acento-fuerte);
color:var(--color-acento-contraste);
padding:10px 18px;
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
font-family:var(--fuente-titulos);
}
header .brand{font-weight:700; font-size:var(--texto-grande); letter-spacing:.5px}
header .tag{background:rgba(255,255,255,.14); padding:3px 9px; border-radius:var(--radio-sm); font-size:var(--texto-pequeno)}
header .sp{flex:1}
header select{background:rgba(255,255,255,.14); color:var(--color-acento-contraste); border-color:rgba(255,255,255,.32)}
/* El