/* ============================================================ GastroCore 360 — TEMA OSCURO Basado en el mockup "GastroMock Design" (Lovable). Estrategia: re-mapea los MISMOS nombres de token que usa admin.css, scoped bajo :root[data-theme="dark"]. Sin el atributo, no hace nada: el tema claro sigue siendo el default y no se toca. Se carga DESPUÉS de admin.css. Flip = . ============================================================ */ :root[data-theme="dark"] { /* Superficies */ --gc-bg: #0A1F1A; --gc-surface: #131F1B; --gc-border: #26332E; --gc-border-lt: #1C2724; --gc-text: #ECFDF5; --gc-muted: #9CB3AB; --gc-muted-lt: #7E938B; /* Marca (más brillante para legibilidad sobre oscuro) */ --gc-accent: #10B981; --gc-accent-hv: #34D399; --gc-accent-dk: #0D6E5A; --gc-accent-lt: rgba(16,185,129,.14); --gc-accent-md: rgba(16,185,129,.24); /* Semántica de dato — variantes brillantes (AA sobre fondo oscuro) */ --gc-pos: #34D399; --gc-neg: #F87171; --gc-warn: #FBBF24; --gc-info: #60A5FA; /* Metal de la ganancia — en Servicio (noche) es BRASA, la lámpara de calor */ --gc-profit: #FF7A18; --gc-profit-soft: rgba(255,122,24,.15); --gc-neutral: #9CA3AF; --gc-pos-bg: rgba(16,185,129,.14); --gc-neg-bg: rgba(248,113,113,.14); --gc-warn-bg: rgba(251,191,36,.14); --gc-info-bg: rgba(96,165,250,.14); /* Marca compartida (tokens.css) */ --gc-brand: #10B981; --gc-brand-dk: #0D6E5A; --gc-brand-lt: rgba(16,185,129,.14); --gc-brand-md: rgba(16,185,129,.24); /* Estados de pedido — texto brillante + tinte translúcido */ --gc-received: #60A5FA; --gc-received-bg: rgba(96,165,250,.14); --gc-prep: #FBBF24; --gc-prep-bg: rgba(251,191,36,.14); --gc-ready: #34D399; --gc-ready-bg: rgba(16,185,129,.14); --gc-dispatched: #A78BFA; --gc-dispatched-bg: rgba(167,139,250,.14); --gc-delivered: #9CA3AF; --gc-delivered-bg: rgba(156,163,175,.12); --gc-cancelled: #F87171; --gc-cancelled-bg: rgba(248,113,113,.14); --gc-danger: #F87171; --gc-warning: #FBBF24; --gc-success: #34D399; /* Sombras más profundas sobre oscuro */ --gc-shadow: 0 1px 3px rgba(0,0,0,.4); --gc-shadow-md: 0 6px 16px rgba(0,0,0,.45); --gc-shadow-lg: 0 14px 36px rgba(0,0,0,.55); /* Portal (mismos nombres --p-*, por si el portal adopta oscuro luego) */ --p-bg: #0A1F1A; --p-surface: #131F1B; --p-border: #26332E; --p-text: #ECFDF5; --p-muted: #9CB3AB; } /* ── Correcciones de hardcodeos que no heredan del token ────────────────────── Reglas de componentes que fijan blanco/gris claro y que en oscuro romperían. Se sobrescriben SOLO bajo el tema oscuro. */ :root[data-theme="dark"] body, :root[data-theme="dark"] .gc-admin, :root[data-theme="dark"] .gc-content { background: var(--gc-bg); color: var(--gc-text); } /* Cards / superficies que hardcodean #fff */ :root[data-theme="dark"] .gc-card, :root[data-theme="dark"] .gc-metric-card, :root[data-theme="dark"] .gc-topbar, :root[data-theme="dark"] .gc-panel, :root[data-theme="dark"] .gc-hero-metric, :root[data-theme="dark"] .gc-table { background: var(--gc-surface); color: var(--gc-text); } /* Inputs sobre oscuro */ :root[data-theme="dark"] .gc-input, :root[data-theme="dark"] .gc-select, :root[data-theme="dark"] textarea.gc-input { background: var(--gc-bg); color: var(--gc-text); border-color: var(--gc-border); } :root[data-theme="dark"] .gc-input::placeholder { color: var(--gc-muted); } /* Botón secundario: sobre oscuro necesita superficie elevada, no blanco */ :root[data-theme="dark"] .gc-btn { background: #182823; color: var(--gc-text); border-color: var(--gc-border); } :root[data-theme="dark"] .gc-btn--primary { background: linear-gradient(135deg,#0D6E5A 0%,#10B981 100%); color: #fff; border-color: transparent; } /* Filas y separadores de tabla */ :root[data-theme="dark"] .gc-table th { background: #182823; color: var(--gc-muted); } :root[data-theme="dark"] .gc-table td, :root[data-theme="dark"] .gc-table th { border-color: var(--gc-border); } /* KPI en Fraunces itálica — igual que el mockup (ya lo hace el tema claro) */ :root[data-theme="dark"] .gc-metric-value { color: var(--gc-text); } /* Glow sutil de fondo, marca del mockup */ :root[data-theme="dark"] body { background-image: radial-gradient(circle at 80% -10%, rgba(16,185,129,.10), transparent 55%), radial-gradient(circle at 10% 100%, rgba(245,158,11,.05), transparent 50%); background-attachment: fixed; } /* Correcciones de hover con fondo claro (encontradas en la prueba) */ :root[data-theme="dark"] .gc-table tbody tr:hover { background: rgba(255,255,255,.04); } :root[data-theme="dark"] .gc-btn:hover { background: #1E2E29; border-color: #34433D; } :root[data-theme="dark"] .gc-order-row:hover, :root[data-theme="dark"] .gc-attention-item:hover { background: rgba(255,255,255,.03); } /* Zebra striping: en claro es rgba(247,248,250,.65) hardcodeado */ :root[data-theme="dark"] .gc-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); } /* Banner "Qué requiere atención" — header y tintes de icono hardcodean claro */ :root[data-theme="dark"] .gc-attention-header { background: var(--gc-warn-bg); border-bottom-color: color-mix(in srgb, var(--gc-warn) 28%, transparent); } :root[data-theme="dark"] .gc-attention-header h2 { color: var(--gc-warn); } :root[data-theme="dark"] .gc-attention-icon--warn { background: var(--gc-warn-bg); } :root[data-theme="dark"] .gc-attention-icon--err { background: var(--gc-neg-bg); } :root[data-theme="dark"] .gc-attention-icon--ok { background: var(--gc-pos-bg); }