/* * NextShift · Tema (único archivo de tokens). Estilo Apple Human Interface Guidelines. * Todo color, tipografía, radio, sombra y espaciado de la app sale de aquí; app.css y turnos.css * solo usan estas variables. El modo oscuro se aplica solo, según el sistema (prefers-color-scheme). */ :root { color-scheme: light dark; /* Tipografía del sistema */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* Escala tipo iOS */ --fs-large-title: 28px; --fs-title2: 22px; --fs-title3: 20px; --fs-headline: 17px; --fs-body: 15px; --fs-subhead: 14px; --fs-footnote: 13px; --fs-caption: 12px; --fs-caption2: 11px; /* Colores de sistema */ --sys-blue: #0060C7; /* AA: 5,9:1 sobre blanco; el #007AFF de Apple da 4,0:1 */ --sys-green: #34C759; --sys-red: #FF3B30; --sys-orange: #FF9500; --sys-yellow: #FFCC00; --sys-indigo: #5856D6; --sys-purple: #AF52DE; --sys-teal: #30B0C7; --sys-gray: #8E8E93; /* Variantes de alto contraste para texto sobre fondo claro */ --sys-blue-text: #0058B5; --sys-green-text: #1A6E30; --sys-red-text: #D70015; --sys-orange-text: #A32C00; /* Tintes suaves (fondos de indicadores y avisos) */ --tint-blue: rgba(0, 96, 199, .12); --tint-green: rgba(52, 199, 89, .14); --tint-red: rgba(255, 59, 48, .12); --tint-orange: rgba(255, 149, 0, .14); /* Fondos y textos */ --bg-grouped: #F2F2F7; /* fondo de la app (lista agrupada) */ --bg-elevated: #FFFFFF; /* tarjetas, celdas, campos */ --bg-secondary: #F2F2F7; /* dentro de tarjetas */ --bg-tertiary: #E5E5EA; --fill: rgba(120, 120, 128, .12); --fill-strong: rgba(120, 120, 128, .2); --label: #000000; --label-2: #5E5E63; /* texto secundario: 6,4:1 (antes 60 % de opacidad, 3,4:1) */ --label-3: rgba(60, 60, 67, .55); --separator: rgba(60, 60, 67, .18); --separator-opaque: #C6C6C8; --on-accent: #FFFFFF; /* texto sobre botones de color */ --chrome: rgba(249, 249, 249, .8); /* barra superior translúcida */ --seg-on: #FFFFFF; /* opción elegida de un control segmentado */ --chrome-border: rgba(0, 0, 0, .12); /* Forma */ --r-card: 14px; --r-lg: 14px; --r-btn: 8px; --r-sm: 6px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 .5px rgba(0, 0, 0, .04); --shadow-2: 0 4px 14px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .04); --shadow-pop: 0 12px 32px rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .06); --focus-ring: 0 0 0 4px rgba(0, 96, 199, .35); /* Espaciado (múltiplos de 4) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --tap: 44px; /* área táctil mínima */ --tap-compact: 32px; /* controles en filas de tablas, solo con mouse */ /* Grilla de turnos (fondos por franja) */ --f-dia: #E3EEFF; --f-tarde: #FFF4D6; --f-noche: #E7E3FA; --f-saliente: #EFEFF4; --f-libre: #E2F5E6; --f-ausencia: #FFE8D9; --f-libre-text: #1F6B32; --f-ausencia-text: #9A4A12; --grid-line: rgba(60, 60, 67, .12); --grid-head: #F7F7FA; --grid-weekend: #F0F2F7; --grid-week: rgba(60, 60, 67, .3); --dsp-dia: #0062CC; --dsp-tarde: #A05A00; --dsp-noche: #5856D6; } @media (prefers-color-scheme: dark) { :root { --sys-blue: #409CFF; --sys-green: #30D158; --sys-red: #FF453A; --sys-orange: #FF9F0A; --sys-yellow: #FFD60A; --sys-indigo: #5E5CE6; --sys-purple: #BF5AF2; --sys-teal: #40C8E0; --sys-gray: #8E8E93; --sys-blue-text: #409CFF; --sys-green-text: #30D158; --sys-red-text: #FF6961; --sys-orange-text: #FFB340; --tint-blue: rgba(10, 132, 255, .2); --tint-green: rgba(48, 209, 88, .18); --tint-red: rgba(255, 69, 58, .2); --tint-orange: rgba(255, 159, 10, .2); --bg-grouped: #000000; --bg-elevated: #1C1C1E; --bg-secondary: #2C2C2E; --bg-tertiary: #3A3A3C; --fill: rgba(120, 120, 128, .24); --fill-strong: rgba(120, 120, 128, .36); --label: #FFFFFF; --label-2: rgba(235, 235, 245, .7); --label-3: rgba(235, 235, 245, .5); --separator: rgba(84, 84, 88, .6); --separator-opaque: #38383A; --chrome: rgba(30, 30, 30, .72); --seg-on: #636366; --chrome-border: rgba(255, 255, 255, .1); --shadow-1: 0 0 0 .5px rgba(255, 255, 255, .06); --shadow-2: 0 4px 14px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .06); --shadow-pop: 0 12px 32px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(255, 255, 255, .08); --focus-ring: 0 0 0 4px rgba(10, 132, 255, .4); --f-dia: rgba(10, 132, 255, .24); --f-tarde: rgba(255, 214, 10, .2); --f-noche: rgba(94, 92, 230, .32); --f-saliente: rgba(142, 142, 147, .18); --f-libre: rgba(48, 209, 88, .18); --f-ausencia: rgba(255, 159, 10, .24); --f-libre-text: #6EE7A0; --f-ausencia-text: #FFC37A; --grid-line: rgba(84, 84, 88, .55); --grid-head: #232325; --grid-weekend: #202024; --grid-week: rgba(235, 235, 245, .3); --dsp-dia: #64B5FF; --dsp-tarde: #FFC266; --dsp-noche: #A5A3FF; } } /* * Compatibilidad: nombres de variables que ya usan app.css, turnos.css y algunas vistas. * Apuntan a los tokens de arriba, así todo hereda el tema (y el modo oscuro) sin tocar la lógica. */ :root { --cream: var(--bg-grouped); --paper: var(--bg-secondary); --ink: var(--label); --navy: var(--label); --black: var(--label); --white: var(--bg-elevated); --blue: var(--sys-blue); --blue-dark: var(--sys-blue-text); --blue-light: var(--tint-blue); --teal: var(--sys-blue); --teal-light: var(--tint-blue); --green: var(--sys-green-text); --green-light: var(--tint-green); --yellow: var(--sys-orange-text); --yellow-light: var(--tint-orange); --red: var(--sys-red-text); --red-light: var(--tint-red); --gray-1: var(--label-2); --gray-2: var(--label); --gray-3: var(--label-3); --gray-5: var(--bg-secondary); --border: var(--separator); --bg: var(--bg-grouped); --card: var(--bg-elevated); --text: var(--label); --text-muted: var(--label-2); --radius: var(--r-btn); --shadow: var(--shadow-1); --mono: var(--font-mono); --sans: var(--font-sans); }