/* ============================================================================ BLACKDEZA DESIGN SYSTEM v2 — "Opción D" Fuente de verdad: /DESIGN_SYSTEM.md — cualquier cambio aquí debe reflejarse también ahí. Este archivo es compartido por TODO el ecosistema ConsultorioMK, nunca debe modificarse solo para un módulo (crear overrides locales si hace falta, nunca tocar estos tokens por conveniencia de una sola pantalla). ============================================================================ */ /* ---------- Tipografía auto-alojada (sin dependencia de Google Fonts en runtime) ---------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; /* variable font: cubre todo el rango en un solo archivo */ font-display: swap; src: url('/assets/fonts/Inter-Variable.woff2') format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/SourceSerif4-Variable.woff2') format('woff2'); } :root { /* ---------- Color: acción (turquesa) — interacción cotidiana ---------- */ --color-accent: #2A9D8F; --color-accent-hover: #227F74; --color-accent-soft: #DCEEEC; /* ---------- Color: institucional (azul petróleo) — toques de marca, uso moderado ---------- */ --color-brand: #1D4E63; /* ---------- Color: cobre — reservado a marca/superadmin, NUNCA interacción cotidiana ---------- */ --color-copper: #B5652C; --color-copper-soft: #F3E4D6; /* ---------- Color: neutros (modo claro por defecto) ---------- */ --color-bg: #FAF8F5; --color-surface: #FFFFFF; --color-surface-alt: #F3F0EA; --color-border: #E4DFD6; --color-text: #221F1B; --color-text-muted: #6E6A61; /* El "papel" de la vista previa se mantiene claro incluso en modo oscuro — una hoja real no cambia de color según el tema del sistema operativo. */ --color-paper: #FEFDFB; --color-paper-text: #221F1B; --color-paper-text-muted: #6E6A61; --color-paper-border: #E4DFD6; /* ---------- Color: semánticos (independientes de la identidad) ---------- */ --color-success: #4C7A5C; --color-danger: #B4483A; --color-warning: #B9902E; --color-info: #4A6FA0; /* ---------- Tipografía ---------- */ --font-ui: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-documento: 'Source Serif 4', Georgia, 'Times New Roman', serif; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; /* ---------- Espaciado (escala de 8px) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ---------- Sombras: dos capas (contacto + difusa) para sensación natural ---------- */ --shadow-sm: 0 1px 2px rgba(34, 31, 27, 0.05), 0 1px 1px rgba(34, 31, 27, 0.04); --shadow-md: 0 4px 12px rgba(34, 31, 27, 0.08), 0 1px 3px rgba(34, 31, 27, 0.05); --shadow-lg: 0 16px 40px rgba(34, 31, 27, 0.14), 0 4px 10px rgba(34, 31, 27, 0.06); /* ---------- Radios ---------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* ---------- Movimiento ---------- */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-easing: cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- Modo oscuro ---------- Claro es SIEMPRE el default real (ver public/assets/js/recetas.js: initTema() y el script inline en que fija data-theme="light" salvo elección explícita guardada). La media query de abajo es solo una red de seguridad para el caso sin JavaScript — en uso normal, [data-theme] manda siempre porque tiene más especificidad. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-accent: #4FBBAC; --color-accent-hover: #63C7B9; --color-accent-soft: #1C3634; --color-brand: #4A7A91; --color-copper: #D98A4E; --color-copper-soft: #3A2A1C; --color-bg: #171512; --color-surface: #201D19; --color-surface-alt: #292521; --color-border: #3A352F; --color-text: #F2EEE7; --color-text-muted: #A29B90; --color-success: #6B9B7D; --color-danger: #D97C6C; --color-warning: #D4AC5C; --color-info: #7DA0D1; } } :root[data-theme="dark"] { --color-accent: #4FBBAC; --color-accent-hover: #63C7B9; --color-accent-soft: #1C3634; --color-brand: #4A7A91; --color-copper: #D98A4E; --color-copper-soft: #3A2A1C; --color-bg: #171512; --color-surface: #201D19; --color-surface-alt: #292521; --color-border: #3A352F; --color-text: #F2EEE7; --color-text-muted: #A29B90; --color-success: #6B9B7D; --color-danger: #D97C6C; --color-warning: #D4AC5C; --color-info: #7DA0D1; } /* ---------- Accesibilidad: respeta prefers-reduced-motion en todo el sistema ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* El atributo [hidden] siempre debe ganar, sin importar qué otra clase (.modal, .campo, etc.) también fije "display" en el mismo elemento. */ [hidden] { display: none !important; }