/* ============================================================================ ExpedienteGine — Themes (Instagram & iOS Glassmorphism) Variables CSS por tema: Claro, Oscuro y Auto (Sistema). ============================================================================ */ /* ── Claro (DEFAULT) ──────────────────────────────────────────────────────── */ [data-theme="claro"], [data-theme="sistema"], :root { /* Declara el esquema para que WKWebView (app de Mac/iOS) pinte los controles NATIVOS (inputs, selects, date-picker, scrollbars) acordes al tema. Sin esto, en oscuro los inputs/date-picker salían BLANCOS en la app de Mac. */ color-scheme: light; --color-bg-primary: #FAFAFA; --color-bg-secondary: #F4F5F7; --color-surface: #FFFFFF; /* Superficies de tarjeta y cajas internas (usadas en estilos inline de plantillas) */ --color-bg-card: #FFFFFF; --color-bg-inner: #F2F2F7; --color-text-primary: #0F172A; --color-text-secondary: #475569; --color-navy: #0F172A; --color-accent: #007AFF; --color-accent-soft: #F1F5F9; --color-accent-rgb: 0, 122, 255; /* Alias usado por varias plantillas (cirugía, perfil, reportes). Se definía en ninguna parte → caía a un fallback BLANCO y rompía el modo oscuro. Referencia accent-soft, así que sigue el tema (claro/oscuro) solo. */ --color-bg-sidebar: var(--color-accent-soft); /* Color de relleno para botones de acción primaria (azul en ambos temas) */ --color-action: #007AFF; --color-action-text: #FFFFFF; --color-secondary: #10B981; --color-secondary-soft: #ECFDF5; /* Tintes suaves de error/warning (claro). Antes vivían como literales en tokens.css bajo `body,[data-theme]`, lo que sombreaba el override oscuro. Ahora se definen por tema aquí (ver el bloque [data-theme="oscuro"]). */ --color-error-soft: #FDECEA; --color-warning-soft: #FFF6E6; --color-olive: #64748B; --color-border: #E2E8F0; --color-error: #EF4444; --color-success: #10B981; --color-warning: #F59E0B; --color-sidebar-bg: #FFFFFF; --color-sidebar-text: #475569; --color-sidebar-active: #007AFF; --color-topbar-bg: #FFFFFF; --color-input-bg: #FFFFFF; --color-input-border: #E2E8F0; --swatch-color: #007AFF; /* Material "vidrio" (Liquid Glass, iOS 26/27): SOLO para cromo — barras, chips, sheets, FAB. El contenido clínico (formularios, notas, recetas) permanece opaco por legibilidad. Las guardas al final de este archivo vuelven estos tokens opacos con transparencia reducida / contraste alto / modo de bajo consumo, exactamente como hace el propio iOS 27. */ /* Color base del vidrio (claro). El knob y los tokens derivados NO van aquí: este selector también aplica al (que lleva data-theme), y si el knob viviera aquí el body lo re-declararía y ganaría sobre el valor inline que el slider fija en :root → el slider no movería nada. Por eso el knob vive en un bloque :root-only (más abajo). */ --glass-rgb: 255, 255, 255; --glass-inner: rgba(255, 255, 255, 0.45); --glass-edge: rgba(15, 23, 42, 0.12); --glass-shadow: 0 10px 30px rgba(15, 23, 42, 0.14); } /* ── Knob del vidrio (SOLO :root/html) ──────────────────────────────────────── Un único control: el slider de la app y las guardas de accesibilidad solo mueven --glass-alpha/-strong/-blur-px sobre :root; los tokens --glass-bg/-blur se derivan de ellos. Como var() resuelve perezoso por elemento, --glass-rgb (que el body sí re-declara por tema) recalcula --glass-bg en claro y oscuro. Vive fuera del selector [data-theme] a propósito: así el NO lo redeclara y el valor inline del slider en :root gana y hereda a todo el cromo. */ :root { --glass-alpha: 0.58; --glass-alpha-strong: 0.72; --glass-blur-px: 26px; --glass-bg: rgba(var(--glass-rgb), var(--glass-alpha)); --glass-bg-strong: rgba(var(--glass-rgb), var(--glass-alpha-strong)); --glass-blur: saturate(180%) blur(var(--glass-blur-px)); } /* ── Oscuro ───────────────────────────────────────────────────────────────── */ [data-theme="oscuro"] { /* Controles nativos (inputs/select/date-picker/scrollbar) en oscuro — arregla el "input/chip blanco" del tema oscuro en la app de Mac (WKWebView). */ color-scheme: dark; --color-bg-sidebar: #1E293B; --color-bg-primary: #000000; --color-bg-secondary: #121212; --color-surface: #1E1E1E; /* Superficies de tarjeta y cajas internas (usadas en estilos inline de plantillas) */ --color-bg-card: #1E1E1E; --color-bg-inner: #2C2C2E; --color-text-primary: #F8FAFC; --color-text-secondary: #94A3B8; --color-navy: #000000; --color-accent: #FFFFFF; --color-accent-soft: #1E293B; --color-accent-rgb: 255, 255, 255; /* En oscuro el acento es blanco; los botones de acción usan azul iOS visible */ --color-action: #0A84FF; --color-action-text: #FFFFFF; --color-secondary: #34D399; --color-secondary-soft: #064E3B; /* Tintes suaves de error/warning para OSCURO. Se definen en tokens.css solo en claro (#FDECEA / #FFF6E6); sin estos overrides los pills is-danger/is-warning (p.ej. el hemotipo A+) quedaban con fondo CLARO sobre tarjetas oscuras. */ --color-error-soft: #4E1616; --color-warning-soft: #4A3410; --color-olive: #A7F3D0; --color-border: #262626; --color-error: #F87171; --color-success: #34D399; --color-warning: #FBBF24; --color-sidebar-bg: #000000; --color-sidebar-text: #94A3B8; --color-sidebar-active: #FFFFFF; --color-topbar-bg: #000000; --color-input-bg: #121212; --color-input-border: #262626; --swatch-color: #FFFFFF; /* Vidrio en oscuro: base gris-negra (no negro puro: el blur necesita algo de luminancia para leerse como material) y brillo interior tenue. */ /* Solo cambia el COLOR base del vidrio; alpha y blur se heredan del knob de :root (o del slider) — así el control único sirve para ambos temas. */ /* Sobre fondo casi negro el vidrio necesita MÁS luminancia base o no lee como material (se veía plano). Charcoal ~46 + filo claro visible = panel esmerilado tipo tabbar oscura de iOS. */ --glass-rgb: 46, 46, 50; --glass-inner: rgba(255, 255, 255, 0.10); --glass-edge: rgba(255, 255, 255, 0.18); --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); /* --glass-bg/-strong se re-derivan AQUÍ (no solo en :root): la sustitución de var(--glass-rgb) ocurre en el elemento donde se DECLARA el token, no donde se hereda. Como el lleva data-theme="oscuro" y su propio --glass-rgb oscuro, hay que recomputar --glass-bg sobre el body para que tome el rgb oscuro; el --glass-alpha (knob/slider) se hereda de :root. */ --glass-bg: rgba(var(--glass-rgb), var(--glass-alpha)); --glass-bg-strong: rgba(var(--glass-rgb), var(--glass-alpha-strong)); } /* Modo oscuro: las cajas de CONTENIDO con bg-light/bg-white de Bootstrap son claras y su texto hereda el color claro del tema → texto invisible. Se vuelven oscuras y legibles. Se excluyen badges/code/botones que usan bg-light + text-dark intencionalmente (deben permanecer claros con texto oscuro). Bootstrap 5.3 añadió variantes "-subtle" (bg-light-subtle, bg-body-secondary, bg-body-tertiary) que NO son bg-light → se quedaban claras en oscuro (p. ej. Configuración Visual: tarjetas de avatar y tema). Se cubren aquí también. */ [data-theme="oscuro"] .bg-light:not(.text-dark):not(.badge):not(.btn):not(code), [data-theme="oscuro"] .bg-white:not(.text-dark):not(.badge):not(.btn):not(code), [data-theme="oscuro"] .bg-light-subtle:not(.text-dark):not(.badge):not(.btn):not(code), [data-theme="oscuro"] .bg-body-secondary:not(.text-dark):not(.badge):not(.btn):not(code), [data-theme="oscuro"] .bg-body-tertiary:not(.text-dark):not(.badge):not(.btn):not(code) { background-color: var(--color-bg-secondary) !important; color: var(--color-text-primary); border-color: var(--color-border) !important; } /* ── BARRIDO modo oscuro: campos de formulario con estilos INLINE ──────────── Muchos flujos (mis_horarios, forms de paciente/consulta, configuración, etc.) traen inputs con `border:1px solid #ddd` y SIN fondo → el navegador los pinta BLANCOS en oscuro (ilegibles). En vez de editar 27 plantillas, esta regla global les da fondo + texto + borde del tema. Se excluyen controles con apariencia propia (range/checkbox/radio/color/file/botones) para no pisarlos. El borde inline (#ddd) puede seguir ganando por especificidad, pero el fondo/texto —el bug real— quedan legibles en todos lados. */ [data-theme="oscuro"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), [data-theme="oscuro"] select, [data-theme="oscuro"] textarea { background-color: var(--color-input-bg); color: var(--color-text-primary); border-color: var(--color-input-border); } [data-theme="oscuro"] input::placeholder, [data-theme="oscuro"] textarea::placeholder { color: var(--color-text-secondary); opacity: .8; } /* Modo oscuro: el nativo pinta un campo BLANCO (destaca feo sobre oscuro, p. ej. "Subir foto de perfil"). Se oscurece el campo y su botón. */ [data-theme="oscuro"] input[type="file"] { color: var(--color-text-primary); background: var(--color-input-bg); border-radius: 8px; } [data-theme="oscuro"] input[type="file"]::file-selector-button { background: var(--color-bg-inner); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: 6px; padding: 4px 10px; margin-right: 10px; } /* Modo oscuro: los botones "outline" de Bootstrap pintan el texto con su color base (primary/secondary), que sobre fondo negro queda casi invisible (texto oscuro sobre oscuro). Se redefinen las variables --bs-btn-* del tema para que el texto y el borde sean legibles. Los semánticos (danger/success/warning) usan sus colores claros del tema oscuro. Aplica a TODOS los templates, no solo al menú de acciones de la consulta. */ [data-theme="oscuro"] .btn-outline-primary, [data-theme="oscuro"] .btn-outline-secondary { --bs-btn-color: var(--color-text-primary); --bs-btn-border-color: var(--color-border); --bs-btn-hover-bg: var(--color-bg-inner); --bs-btn-hover-color: var(--color-text-primary); --bs-btn-hover-border-color: var(--color-text-secondary); --bs-btn-active-bg: var(--color-bg-inner); --bs-btn-active-color: var(--color-text-primary); --bs-btn-active-border-color: var(--color-text-secondary); } [data-theme="oscuro"] .btn-outline-danger { --bs-btn-color: var(--color-error); --bs-btn-border-color: var(--color-error); --bs-btn-hover-bg: var(--color-error); --bs-btn-hover-color: #000; --bs-btn-active-bg: var(--color-error); --bs-btn-active-color: #000; } [data-theme="oscuro"] .btn-outline-success { --bs-btn-color: var(--color-success); --bs-btn-border-color: var(--color-success); --bs-btn-hover-bg: var(--color-success); --bs-btn-hover-color: #000; --bs-btn-active-bg: var(--color-success); --bs-btn-active-color: #000; } [data-theme="oscuro"] .btn-outline-warning { --bs-btn-color: var(--color-warning); --bs-btn-border-color: var(--color-warning); --bs-btn-hover-bg: var(--color-warning); --bs-btn-hover-color: #000; --bs-btn-active-bg: var(--color-warning); --bs-btn-active-color: #000; } /* Swatches para selector visual */ .swatch-sistema { background: linear-gradient(135deg, #FAFAFA 0%, #007AFF 50%, #000000 50%, #FFFFFF 100%); } .swatch-claro { background: #FAFAFA; border: 1px solid #E2E8F0; } .swatch-oscuro { background: #121212; border: 1px solid #262626; } /* ── Guardas del vidrio: solo mueven el knob (--glass-alpha/-strong/-blur-px) ── Como los tokens --glass-bg/-blur se derivan del knob, basta con overridearlo una vez para que aplique a ambos temas. El SLIDER de la app fija el knob INLINE en , ganándole a estas reglas (control explícito del usuario). */ /* Reduce Transparency (Accesibilidad) o el extremo Teñido: material más opaco pero aún vidrio (blur suave). El wrapper iOS espeja el estado del slider nativo vía html[data-liquid-glass] porque el WKWebView no re-evalúa la media query al moverlo. */ /* SIN !important a propósito: el slider fija el knob INLINE en :root y el inline le gana a estas reglas de la hoja. Así estas guardas son el DEFAULT (cuando el usuario NO ha tocado el slider): si tiene Reducir transparencia / Aumentar contraste / bajo consumo, el cromo arranca opaco. Pero en cuanto el usuario MUEVE el slider, su elección explícita manda (aunque tenga esos ajustes) — antes el !important dejaba el vidrio clavado en opaco y mataba el slider en la app. */ @media (prefers-reduced-transparency: reduce) { :root { --glass-alpha: 0.90; --glass-alpha-strong: 0.95; --glass-blur-px: 8px; } } html[data-liquid-glass="tenido"] { --glass-alpha: 0.90; --glass-alpha-strong: 0.95; --glass-blur-px: 8px; } /* Contraste aumentado: superficies más sólidas, blur suave (default, override-able). */ @media (prefers-contrast: more) { :root { --glass-alpha: 1; --glass-alpha-strong: 1; --glass-blur-px: 0px; --glass-inner: transparent; --glass-edge: var(--color-border); } } /* Bajo consumo: el blur es lo más caro en GPU; el cromo se vuelve sólido. */ body.ios-low-power { --glass-alpha: 1; --glass-alpha-strong: 1; --glass-blur-px: 0px; --glass-inner: transparent; } /* ── Slider de transparencia del cromo (menú de tema) ───────────────────────── */ .glass-slider-row { padding: 2px 0 4px; } .glass-slider-ico { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1; } .glass-slider { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--color-text-secondary) 0%, var(--color-action, #007AFF) 100%); outline: none; margin: 0; } .glass-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.15); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; } .glass-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.15); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }