/* web/assets/css/tokens.css */ /* Design tokens — closed system per heuristicas_ux_ui (guidelines repo). Color seed: softwaremed.cl brand (primary cyan #0891B2, teal, emerald, dark #020608). Every ramp below is hand-picked HSL (not lighten()/darken()), hue rotates toward the nearest bright anchor (180/60/300) when lightening and the nearest dark anchor (240/0/120) when darkening, capped at ~20-30deg — see shades_definidos_por_adelantado_con_escala_900_a_100 and saturacion_compensa_lightness_extrema. */ :root{ color-scheme: light; /* ── primary (cyan) — base 600 = #0891B2 ── */ --cyan-50: hsl(183 85% 96%); --cyan-100: hsl(184 82% 91%); --cyan-200: hsl(185 80% 82%); --cyan-300: hsl(187 78% 70%); --cyan-400: hsl(189 82% 58%); --cyan-500: hsl(191 86% 44%); --cyan-600: hsl(191 88% 36%); /* #0891B2 */ --cyan-700: hsl(196 90% 29%); --cyan-800: hsl(202 90% 23%); --cyan-900: hsl(208 88% 16%); /* ── teal — secondary accent, abbreviated ramp (expand on demand, not up front) ── */ --teal-100: hsl(168 60% 90%); --teal-300: hsl(170 65% 70%); --teal-500: hsl(173 80% 36%); /* ~#14B8A6 */ --teal-700: hsl(175 82% 24%); --teal-900: hsl(178 80% 14%); /* ── emerald — positive/success accent, abbreviated ramp ── */ --emerald-100: hsl(152 60% 90%); --emerald-300: hsl(154 60% 66%); --emerald-500: hsl(158 78% 36%); /* ~#10B981 */ --emerald-700: hsl(161 82% 24%); --emerald-900: hsl(165 80% 14%); /* ── semantic accents (own hues, distinguishable under red-green colorblindness) ── */ --crit-100: hsl(4 75% 94%); --crit-500: hsl(4 72% 45%); --crit-700: hsl(4 74% 32%); --warn-100: hsl(38 92% 92%); --warn-500: hsl(38 92% 42%); --warn-700: hsl(36 90% 30%); --info-100: hsl(212 85% 94%); --info-500: hsl(212 85% 42%); --info-700: hsl(212 86% 30%); /* ── neutrals — cyan-biased gray, never pure gray ── */ --gray-50: hsl(200 24% 97%); --gray-100: hsl(199 22% 93%); --gray-200: hsl(199 20% 87%); --gray-300: hsl(200 18% 76%); --gray-400: hsl(200 15% 62%); --gray-500: hsl(201 16% 49%); --gray-600: hsl(202 20% 36%); --gray-700: hsl(203 26% 25%); --gray-800: hsl(204 32% 15%); --gray-900: hsl(206 42% 7%); /* near #020608 */ /* ── semantic aliases (what components consume) ── */ --bg: var(--gray-50); --surface: #FFFFFF; --surface-2: var(--gray-100); --line: var(--gray-200); --line-soft: var(--gray-100); --ink: var(--gray-900); --ink-2: var(--gray-700); --muted: var(--gray-600); --faint: var(--gray-500); --primary: var(--cyan-600); --primary-ink: var(--cyan-700); --primary-wash: var(--cyan-50); --accent: var(--teal-500); --crit: var(--crit-500); --crit-wash: var(--crit-100); --warn: var(--warn-500); --warn-wash: var(--warn-100); --good: var(--emerald-500); --good-wash: var(--emerald-100); --info: var(--info-500); --info-wash: var(--info-100); /* ── typography — hand-picked scale, growing steps, never em (escala_tipografica_hecha_a_mano) ── */ --f-body: "DM Sans", system-ui, -apple-system, sans-serif; --f-ui: "Inter", system-ui, -apple-system, sans-serif; --f-mono: "DM Mono", "Courier New", monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 36px; --text-4xl: 48px; /* ── spacing — base 16px, ~25%+ jump between neighbors (escala_de_spacing_basada_en_un_valor_base) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ── radius — small, consistent, serious/clinical (not playful) ── */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; /* ── elevation — 5 fixed levels, light source from above ── */ --shadow-1: 0 1px 3px hsla(206 42% 7% / .10); --shadow-2: 0 4px 6px hsla(206 42% 7% / .12); --shadow-3: 0 10px 20px hsla(206 42% 7% / .14); --shadow-4: 0 15px 25px hsla(206 42% 7% / .16); --shadow-5: 0 20px 40px hsla(206 42% 7% / .20); --header-h: 60px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --gray-50: hsl(206 40% 6%); --gray-100: hsl(205 34% 9%); --gray-200: hsl(204 28% 14%); --gray-300: hsl(203 24% 21%); --gray-400: hsl(202 18% 34%); --gray-500: hsl(201 16% 48%); --gray-600: hsl(200 22% 65%); --gray-700: hsl(199 30% 80%); --gray-800: hsl(199 34% 90%); --gray-900: hsl(198 40% 96%); --cyan-600: hsl(191 78% 52%); --cyan-700: hsl(187 80% 66%); --primary-wash: hsl(200 40% 12%); --crit-100: hsl(4 40% 16%); --warn-100: hsl(38 45% 16%); --emerald-100: hsl(152 35% 14%); --info-100: hsl(212 45% 16%); /* --surface era #FFFFFF fijo en :root (nunca var(--gray-*)) — quedaba blanco puro en dark mode mientras --ink (var(--gray-900)) se invertía a claro, texto claro sobre fondo blanco = ilegible. Acá se corta esa dependencia explícita: superficie apenas más clara que --bg (mismo salto que en light mode gray-50→gray-100), no un alias 1:1 de --bg (perdería el contraste panel/página). */ --surface: var(--gray-100); --shadow-1: 0 1px 3px hsla(0 0% 0% / .45); --shadow-2: 0 4px 6px hsla(0 0% 0% / .5); --shadow-3: 0 10px 20px hsla(0 0% 0% / .55); --shadow-4: 0 15px 25px hsla(0 0% 0% / .6); --shadow-5: 0 20px 40px hsla(0 0% 0% / .7); } } :root[data-theme="dark"]{ color-scheme: dark; --gray-50: hsl(206 40% 6%); --gray-100: hsl(205 34% 9%); --gray-200: hsl(204 28% 14%); --gray-300: hsl(203 24% 21%); --gray-400: hsl(202 18% 34%); --gray-500: hsl(201 16% 48%); --gray-600: hsl(200 22% 65%); --gray-700: hsl(199 30% 80%); --gray-800: hsl(199 34% 90%); --gray-900: hsl(198 40% 96%); --cyan-600: hsl(191 78% 52%); --cyan-700: hsl(187 80% 66%); --primary-wash: hsl(200 40% 12%); --crit-100: hsl(4 40% 16%); --warn-100: hsl(38 45% 16%); --emerald-100: hsl(152 35% 14%); --info-100: hsl(212 45% 16%); --surface: var(--gray-100); /* ver nota arriba, mismo motivo */ --shadow-1: 0 1px 3px hsla(0 0% 0% / .45); --shadow-2: 0 4px 6px hsla(0 0% 0% / .5); --shadow-3: 0 10px 20px hsla(0 0% 0% / .55); --shadow-4: 0 15px 25px hsla(0 0% 0% / .6); --shadow-5: 0 20px 40px hsla(0 0% 0% / .7); } *,*::before,*::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } /* ── scrollbars — finas, invisibles en reposo, se funden mientras se scrollea ── No hay un "true overlay auto-hide" cross-browser vía CSS puro (Windows Chrome/Edge siempre reservan el gutter, a diferencia de mobile) — esto es la aproximación real: thumb transparente por defecto, visible solo con .is-scrolling (ver assets/js/scrollbar-fade.js, que agrega/saca esa clase con un debounce de scroll). */ *{ scrollbar-width: thin; scrollbar-color: transparent transparent; } *.is-scrolling{ scrollbar-color: var(--faint) transparent; } ::-webkit-scrollbar{ width: 8px; height: 8px; } ::-webkit-scrollbar-track{ background: transparent; } ::-webkit-scrollbar-thumb{ background: transparent; border-radius: 999px; transition: background-color .2s ease; } .is-scrolling::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--ink) 25%, transparent); } body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: var(--text-sm); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5{ font-family: var(--f-ui); margin: 0; text-wrap: balance; letter-spacing: -.011em; } p{ margin: 0; } button,input,select,textarea{ font: inherit; color: inherit; } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } } .mono{ font-family: var(--f-mono); font-variant-numeric: tabular-nums; } /* ───────────────────────────────────────────────────────────────── Layout compartido — vive UNA vez acá, ninguna vista redefine esto. Breakpoints: custom properties no funcionan dentro de la condición de un @media (ningún browser lo soporta todavía), así que la escala se fija por convención, documentada acá, y no se inventan valores nuevos por archivo — dos umbrales, definidos por el usuario: mobile max-width: 767px — todo lo angosto de 768px es mobile desktop min-width: 1024px — todo lo ancho de 1024px es desktop 768-1023px queda entre ambos (tablet): sin @media propio — hereda mobile o desktop según cuál de los dos ya calce mejor para ese bloque, nunca se le agrega un tercer breakpoint para ese rango. Ninguno en uso todavía: smed-nav.js resuelve mobile con overflow-x intrínseco (scroll horizontal, sin @media) y evo-grid/login-card con auto-fill/min() — un breakpoint es el último recurso, no el default. Cuando haga falta uno estructural de verdad, va acá con uno de estos 2 valores, nunca uno nuevo inventado en el archivo de la vista. ───────────────────────────────────────────────────────────────── */ .view-pad{ /* clamp: mismo padding en mobile y desktop sin breakpoint — crece con el viewport entre 320 y 960px y se achica, nunca al revés. */ padding: clamp(var(--space-4), 3vw, var(--space-6)); } .view-pad h1{ font-size: var(--text-2xl); margin-bottom: var(--space-2); } .muted{ color: var(--muted); font-size: var(--text-sm); } .faint{ color: var(--faint); font-size: var(--text-xs); } /* ── card — contenedor de documento/formulario (eSource, ficha, etc.) ── */ .card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; } .card-header{ background: var(--surface-2); padding: var(--space-4); border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: var(--space-3); } .card-header .icon{ color: var(--faint); margin-top: 2px; width: 20px; height: 20px; flex: none; } .card-header h3{ font-size: var(--text-sm); font-weight: 600; color: var(--ink); } .card-header p{ font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-1); line-height: 1.4; } .card-body{ padding: var(--space-6); } .section-title{ font-size: var(--text-sm); color: var(--ink); display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--line); padding-bottom: var(--space-2); margin-bottom: var(--space-4); text-transform: uppercase; letter-spacing: .02em; font-weight: 700; } .section-title .icon{ color: var(--primary); width: 18px; height: 18px; flex: none; } .form-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); } .form-group{ display: flex; flex-direction: column; gap: var(--space-1); } .label{ font-size: var(--text-xs); font-weight: 600; color: var(--muted); } .checkbox-label{ display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink-2); margin-bottom: var(--space-3); cursor: pointer; line-height: 1.4; } .checkbox-label:last-child{ margin-bottom: 0; } .checkbox{ margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); flex: none; } /* ── botones — variantes compartidas, .btn solo (sin fondo/borde) es la base ── */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 8px var(--space-4); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); font-weight: 500; font-family: var(--f-ui); cursor: pointer; transition: all .15s; border: 1px solid transparent; /* .btn on an (e.g. subjects/panels/subject.js's "Ver ficha clínica" link) — every other .btn so far was a real