/* ============================================================ Lumiva — sistema de design tokens ------------------------------------------------------------ 3 capas: 1) PRIMITIVOS — esqueleto, fijos. NO se usan en componentes. 2) SEMÁNTICOS — lo que los componentes SÍ consumen. 3) ACENTO — slice angosto de la clínica, vía [data-accent]. Reglas no negociables: · Ningún componente usa un hex. Todo sale de --lv-*. · El acento solo toca el chrome (botón, nav activa, focus). · El color del doctor solo toca el dato contenido (barra/punto). · El color de texto y los estados son esqueleto: no se tematizan. Dark-ready: para dark mode, mañana se sobreescriben los valores de la capa 1 bajo [data-theme="dark"]. Las capas 2 y 3 no se tocan. Por eso ningún componente referencia primitivos directo. ============================================================ */ :root { /* ---------- 1. PRIMITIVOS — esqueleto ---------- */ /* Rampa neutral: jerarquía de texto y superficies */ --lv-neutral-0: #ffffff; --lv-neutral-50: #f7f7f6; --lv-neutral-100: #eeeeec; --lv-neutral-200: #e2e2df; --lv-neutral-300: #cbcbc6; --lv-neutral-400: #9b9b95; --lv-neutral-500: #6f6f6a; --lv-neutral-600: #52524e; --lv-neutral-700: #3a3a37; --lv-neutral-800: #262624; --lv-neutral-900: #161615; /* Estados — significado, NO marca. Fijos para todas las clínicas. */ --lv-success-bg: #eaf3de; --lv-success-fg: #3b6d11; --lv-warning-bg: #faeeda; --lv-warning-fg: #854f0b; --lv-danger-bg: #fcebeb; --lv-danger-fg: #a32d2d; --lv-info-bg: #e6f1fb; --lv-info-fg: #185fa5; /* Paleta operativa de doctores — 8 slots fijos, normalizados. Se asignan por índice (color_slot 1..8), NUNCA se eligen libres. Mid-tones de peso parejo: ninguno grita más que otro, y todos son más claros que cualquier acento (separación tonal de capa). */ --lv-doctor-1: #4f6bd8; /* azul */ --lv-doctor-2: #1d9e75; /* teal */ --lv-doctor-3: #b8642a; /* ámbar */ --lv-doctor-4: #c4517d; /* rosa */ --lv-doctor-5: #7a5bd0; /* violeta */ --lv-doctor-6: #2f8f8a; /* cian */ --lv-doctor-7: #9a7a1f; /* oliva */ --lv-doctor-8: #b84a4a; /* ladrillo */ /* Tipografía — esqueleto, FIJA (decidido: fuera del theme). -apple-system PRIMERO, a propósito: es la fuente del sistema, cero descarga, cero costo de performance — la opción más rápida posible, y en Mac/iOS ES San Francisco de verdad. "Inter" queda como mejora futura SI algún día se self-hostea de verdad (@font-face en otro archivo); hasta entonces no listarla primero evita que el navegador la busque y falle silenciosamente antes de caer al system font. */ --lv-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", system-ui, Roboto, sans-serif; --lv-font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; /* Escala tipográfica */ --lv-text-xs: 12px; --lv-text-sm: 13px; --lv-text-md: 14px; --lv-text-lg: 16px; --lv-text-xl: 20px; --lv-leading: 1.5; /* Espaciado / radios / densidad operativa. Radios más generosos (chrome: tarjetas, botones, modal) — pero la GRILLA del calendario (Evento, líneas de hora) se queda con la misma densidad de siempre. A propósito: el propio Calendar.app de Apple mantiene su grid denso y funcional mientras el resto de la interfaz respira. "Denso donde importa, aireado donde no" es más fiel al lenguaje real de Apple que hacer todo espacioso parejo. */ --lv-space-1: 4px; --lv-space-2: 8px; --lv-space-3: 12px; --lv-space-4: 16px; --lv-space-5: 24px; --lv-radius: 10px; /* antes 8px — botones, chips, inputs */ --lv-radius-lg: 16px; /* antes 12px — tarjetas, modal, sidebar */ --lv-radius-pill: 999px; /* formaliza lo que ya se usaba suelto inline */ --lv-row-h: 40px; /* alto de fila denso para la agenda — SIN cambio */ /* ---------- 2. SEMÁNTICOS — lo que el componente usa ---------- */ --lv-bg: var(--lv-neutral-50); /* canvas de página */ --lv-surface: var(--lv-neutral-0); /* tarjeta / panel */ --lv-surface-sunk: var(--lv-neutral-100); /* header, zebra, hover */ --lv-surface-glass: rgba(255, 255, 255, 0.72); /* tarjetas flotantes tipo "vibrancy" (macOS) — translúcida, deja ver el fondo A TRAVÉS, no detrás. Combínala con --lv-glass-blur en el elemento que está DETRÁS (no en la tarjeta misma) — dos capas de blur apiladas cuestan más GPU que una sola, y el efecto se ve igual. TODO(dark mode): esta necesitará su propia variante bajo [data-theme="dark"] — un blanco translúcido sobre fondo oscuro se ve mal, ahí sería un negro/gris translúcido en su lugar. */ --lv-text: var(--lv-neutral-900); /* principal */ --lv-text-muted: var(--lv-neutral-600); /* secundario */ --lv-text-faint: var(--lv-neutral-400); /* hints, placeholders */ --lv-border: 0.5px solid var(--lv-neutral-200); --lv-border-strong: 0.5px solid var(--lv-neutral-300); /* Estados mapeados — los badges usan ESTOS, no los primitivos */ --lv-status-confirmed-bg: var(--lv-success-bg); --lv-status-confirmed-fg: var(--lv-success-fg); --lv-status-pending-bg: var(--lv-warning-bg); --lv-status-pending-fg: var(--lv-warning-fg); --lv-status-cancelled-bg: var(--lv-neutral-100); --lv-status-cancelled-fg: var(--lv-neutral-600); --lv-status-noshow-bg: var(--lv-danger-bg); --lv-status-noshow-fg: var(--lv-danger-fg); /* Focus ring — derivado del acento (capa 3) */ --lv-focus-ring: 0 0 0 2px var(--lv-accent-subtle), 0 0 0 3px var(--lv-accent); /* Sombras — dos capas (contacto + ambiente), no un solo golpe duro. Tinte con el neutral-900 en vez de negro puro: sombra más suave, menos "recortada". Así es como Apple construye profundidad real. Úsalas en vez de escribir rgba(0,0,0,...) suelto en cada componente. */ --lv-shadow-sm: 0 1px 2px rgba(22, 22, 21, 0.06); --lv-shadow-md: 0 2px 6px rgba(22, 22, 21, 0.08), 0 1px 2px rgba(22, 22, 21, 0.04); --lv-shadow-lg: 0 16px 40px rgba(22, 22, 21, 0.16), 0 2px 8px rgba(22, 22, 21, 0.06); /* Transición estándar — arranque rápido, asentado suave (la curva que asociamos con animaciones "premium" de Apple, no el ease-in-out genérico del navegador). Úsala en CUALQUIER transición nueva para que todo el portal se sienta consistente, no cada quien su curva. */ --lv-ease: cubic-bezier(0.16, 1, 0.3, 1); --lv-transition: all 160ms var(--lv-ease); /* Vidrio esmerilado — SOLO para superficies que flotan SOBRE contenido (el modal de detalle, hoy). backdrop-filter tiene costo real de GPU si se usa de más (muchas capas, o animado en loop) — aquí se aplica UNA vez, sobre un elemento estático mientras está abierto. NO ponerlo en sidebar, botones, ni nada que se repita muchas veces en pantalla. El número de blur() es el control real del efecto: · Más alto (20-30px) → el fondo se vuelve una mancha de color pareja, casi irreconocible. Se ve "oscurecido", no "translúcido". · Más bajo (6-10px) → el fondo sigue siendo reconocible (formas, colores de las citas) pero suavizado — así SÍ se nota que la tarjeta encima es transparente, no solo un overlay oscuro. 8px es el punto donde el ojo todavía reconoce que hay contenido real detrás. Si se ve DEMASIADO nítido (como si no hubiera blur), sube a 10-12px; si se ve otra vez como mancha pareja, baja a 5-6px. */ --lv-glass-blur: blur(8px) saturate(150%); /* ---------- 3. ACENTO — default seguro ---------- Si la clínica no definió acento, cae aquí. Lo sobreescribe [data-accent="..."] (ver bloque siguiente). */ --lv-accent: #185fa5; --lv-accent-hover: #0c447c; --lv-accent-subtle: #e6f1fb; /* tint: nav activa, hover suave */ --lv-accent-contrast: #ffffff; /* texto sobre el acento */ } /* ============================================================ ACENTOS CURADOS — la clínica elige UNO de este set. Cada uno trae su rampa derivada con contraste ya resuelto. El servidor manda la CLAVE (clinics.theme_accent); el CSS es dueño de los valores. La clínica nunca teclea un hex. Todos son oscuros a propósito (banda ~600) para que el texto blanco SIEMPRE pase contraste sobre el acento, y para que el acento quede más oscuro que los slots de doctor (no se mezclan). NOTA: diseñados para pasar WCAG AA con texto blanco; valida el set final con un checker antes de cerrarlo en producción. ============================================================ */ [data-accent="azul"] { --lv-accent:#185fa5; --lv-accent-hover:#0c447c; --lv-accent-subtle:#e6f1fb; --lv-accent-contrast:#fff; } [data-accent="teal"] { --lv-accent:#0f6e56; --lv-accent-hover:#085041; --lv-accent-subtle:#e1f5ee; --lv-accent-contrast:#fff; } [data-accent="indigo"] { --lv-accent:#4338ca; --lv-accent-hover:#312e9e; --lv-accent-subtle:#eeedfe; --lv-accent-contrast:#fff; } [data-accent="violeta"] { --lv-accent:#6d28d9; --lv-accent-hover:#5b21b6; --lv-accent-subtle:#f3eefe; --lv-accent-contrast:#fff; } [data-accent="coral"] { --lv-accent:#c2410c; --lv-accent-hover:#9a3412; --lv-accent-subtle:#fbeae0; --lv-accent-contrast:#fff; } [data-accent="rosa"] { --lv-accent:#be185d; --lv-accent-hover:#9d174d; --lv-accent-subtle:#fce7f0; --lv-accent-contrast:#fff; } [data-accent="ambar"] { --lv-accent:#92600a; --lv-accent-hover:#6b4708; --lv-accent-subtle:#faf0db; --lv-accent-contrast:#fff; } [data-accent="verde"] { --lv-accent:#15803d; --lv-accent-hover:#166534; --lv-accent-subtle:#e9f5e2; --lv-accent-contrast:#fff; } [data-accent="slate"] { --lv-accent:#334155; --lv-accent-hover:#1e293b; --lv-accent-subtle:#eef1f5; --lv-accent-contrast:#fff; } [data-accent="granate"] { --lv-accent:#9f1239; --lv-accent-hover:#7f1230; --lv-accent-subtle:#fbe7ec; --lv-accent-contrast:#fff; } /* ============================================================ UTILIDADES DE INTERACCIÓN — hover/active reales. ------------------------------------------------------------ Todo el portal usa estilos inline (style={{...}}), y CSS inline NO puede expresar :hover ni :active — por eso estas dos clases chicas, la única salida del patrón 100% inline, a propósito y contenida aquí. .lv-hoverable → tarjetas/bloques que "se levantan" al pasar el mouse (eventos del calendario, celdas del mini-calendario). .lv-btn → cualquier botón/pill: oscurece un poco al hover, se comprime un poco al click. Consistente en todo el portal en vez de que cada botón tenga su propio micro-efecto inventado a mano. prefers-reduced-motion: quien pidió menos movimiento en su sistema operativo no debería recibir transiciones igual — barato de respetar. ============================================================ */ .lv-hoverable { transition: var(--lv-transition); } .lv-hoverable:hover { transform: translateY(-1px); box-shadow: var(--lv-shadow-md); } .lv-btn { transition: var(--lv-transition); } .lv-btn:hover { filter: brightness(0.97); } .lv-btn:active { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { .lv-hoverable, .lv-btn { transition: none; } .lv-hoverable:hover, .lv-btn:active { transform: none; } } /* ============================================================ EJEMPLOS DE USO (referencia — bórralo si estorba) ------------------------------------------------------------ .lv-btn-primary { background: var(--lv-accent); color: var(--lv-accent-contrast); border: 0; border-radius: var(--lv-radius); } .lv-btn-primary:hover { background: var(--lv-accent-hover); } .lv-nav-item--active { color: var(--lv-accent); border-bottom: 2px solid var(--lv-accent); } .lv-row:focus-visible { box-shadow: var(--lv-focus-ring); outline: 0; } .lv-appt-bar { width: 3px; background: var(--lv-doctor-2); } (en el front: slot N del doctor -> var(--lv-doctor-N)) .lv-badge--confirmed { background: var(--lv-status-confirmed-bg); color: var(--lv-status-confirmed-fg); } ============================================================ */