/* ═══════════════════════════════════════════════════════
MIRLXS — Sistema de colores unificado
═══════════════════════════════════════════════════════
IMPORTANTE (Tanda 1/2 del color de énfasis, ver MANIFEST.md): las
variables marcadas "(runtime)" en los comentarios de sección de abajo
ya NO se editan acá para cambiar el aspecto visual — `js/color-enfasis.js`
las recalcula en tiempo real a partir de un solo color de entrada
(`aplicarColorEnfasis(hex)`, hoy hardcodeado a `#F97316`, el mismo
naranja de siempre) y las pisa vía `root.style.setProperty()` apenas
carga la página. El valor que sigue escrito acá abajo para esas
variables es SOLO el fallback del primer paint, antes de que el JS
corra — hoy coincide exacto con lo que el JS calcula (mismo naranja de
entrada), así que no hay ningún flash ni doble fuente de verdad
compitiendo en la práctica, pero editar el hex de acá **no tiene efecto
visible** en esas variables puntuales una vez que la página carga. Para
cambiar el color de énfasis, la vía real es `js/color-enfasis.js`
(Tanda 2: selector de color, todavía no implementado). El resto de las
variables (sin la marca "(runtime)") no está tocado por ese archivo y
se sigue editando acá normalmente, como siempre. */
:root {
/* ── Brand (runtime) ─────────────────────────────────── */
--brand: #F97316;
--brand-dk: #ea6407;
--brand-secondary:#fb923c;
--brand-zero: rgba(249,115,22,0);
--brand-subtle: rgba(249,115,22,0.04);
--brand-lightest: rgba(249,115,22,0.06);
--brand-06: var(--brand-lightest);
--brand-lighter: rgba(249,115,22,0.07);
--brand-08: rgba(249,115,22,0.08);
--brand-soft: rgba(249,115,22,0.1);
--brand-light: rgba(249,115,22,0.13);
--brand-mid: rgba(249,115,22,0.14);
--brand-focus: rgba(249,115,22,0.15);
--brand-hover: rgba(249,115,22,0.18);
--brand-20: rgba(249,115,22,0.2);
--brand-glow: rgba(249,115,22,0.25);
--brand-30: rgba(249,115,22,0.3);
--brand-pulse: rgba(249,115,22,0.35);
--brand-40: rgba(249,115,22,0.4);
--brand-55: rgba(249,115,22,0.55);
--brand-60: rgba(249,115,22,0.6);
--brand-strong: rgba(249,115,22,0.7);
--brand-warm: #fff8f4;
--brand-warm-2: #fffcf9;
--brand-warm-3: #fff4ec;
/* ── Easing / animaciones ───────────────────────────── */
--ease-sheet: cubic-bezier(0.16,1,0.3,1);
--error: var(--danger);
--error-light: var(--danger-bg);
--error-border: var(--danger-bdr);
--purple: #7c3aed;
--purple-light: #ede9fe;
--purple-bg: rgba(124,58,237,0.1);
--purple-border: rgba(124,58,237,0.35);
--purple-hover: rgba(124,58,237,0.18);
/* Excepción de marca — violeta oficial de DeUna (--color-primary de su
propia hoja de estilos de producción, deuna.app/_astro/BaseLayout*.css,
verificado en julio 2026), no relacionado con --purple de arriba (acento
genérico de la app, usado en badges). Sin variante dark: igual que
--brand, un color de marca no cambia con el tema, sirve de fondo sólido
en cualquier modo — solo usado por .btn-deuna (css/ui.css). */
--deuna: #4C1D80;
--deuna-dk: #3D1766;
/* Excepción de marca — naranja oficial de Banco Internacional Ecuador,
extraído de su CSS de producción real (bancointernacional.com.ec,
.color-naranja/.bt-caja-naranja/#footer-menu svg, todos usan este mismo
hex de forma consistente — verificado julio 2026, no adivinado). Sin
variante dark, mismo criterio que --brand/--deuna. Usado por el
encabezado de "Banco Internacional" en s-pago (index.html). */
--banco-internacional: #EA8E29;
--banco-internacional-dk: #BB7221;
--overlay: rgba(0,0,0,0.65);
--overlay-light: rgba(0,0,0,0.55);
--overlay-dark: rgba(0,0,0,0.7);
--overlay-modal-info: rgba(0,0,0,0.82);
/* ── Fondo (runtime) ───────────────────────────────────── */
/* js/color-enfasis.js sincroniza el correspondiente
(light/dark, por atributo media) cada vez que recalcula --bg — ya no hace
falta tocarlo a mano al cambiar el color de énfasis. manifest.json es la
única pieza que SÍ sigue siendo manual (background_color/theme_color, barra
de gestos de Android en PWA instalada) — es un archivo estático que el SO
lee al instalar, sin ningún mecanismo real de recarga en vivo desde JS de
la página; señalado como limitación conocida, sin resolver todavía. */
--bg: #FDF3EB;
--bg-2: #F7EAE0;
/* ── Superficies (runtime) ─────────────────────────────── */
--surface: rgba(255,255,255,0.90);
--surface-2: rgba(255,245,235,0.95);
--surface-3: rgba(255,235,220,0.45);
--surface-blur: blur(16px);
/* ── Bordes (runtime, salvo --border-slate en claro — ver más abajo) ── */
--border: rgba(249,115,22,0.22);
--border-2: rgba(249,115,22,0.08);
--border-warm: rgba(168,149,135,0.3);
--brand-warm-border: #fde8d4;
/* ── Texto (runtime) ───────────────────────────────────── */
--text: #2C1A0E;
--text-2: #6B3E26;
--muted: #9A6A52;
--hint: #B89080;
/* ── Estados ─────────────────────────────────────────── */
--success: #22c55e;
--success-bg: rgba(34,197,94,0.1);
--success-bdr: rgba(34,197,94,0.3);
--success-dark: #16a34a;
--success-bright: #4ade80;
--success-border-dark: #15803d;
--success-shadow: rgba(34,197,94,0.08);
--success-glow: rgba(22,163,74,0.3);
--success-shadow-hover: rgba(34,197,94,0.15);
--success-lightest: #dcfce7;
--warning: #f59e0b;
--warning-bg: rgba(245,158,11,0.1);
--warning-bdr: rgba(245,158,11,0.3);
--danger: #dc2626;
--danger-bg: rgba(220,38,38,0.1);
--danger-bdr: rgba(220,38,38,0.3);
--danger-dark: #991b1b;
--info: #0ea5e9;
--info-bg: rgba(14,165,233,0.1);
--info-bdr: rgba(14,165,233,0.3);
--info-bg-light: #f0f9ff;
--info-light: #7dd3fc;
--info-dark: #0369a1;
/* Cyan — "información de ubicación" (pills de lugar/venue + "Cómo llegar"),
unificado en toda la app para no repetir 3 colores distintos para el
mismo concepto (antes marca/naranja-rojizo en unos lugares, --info/azul
en otros). Distinto de --info (azul cielo) a propósito -- pedido
explícito de un cyan propio, no reusar el azul existente. */
--cyan: #06b6d4;
--cyan-20: rgba(6,182,212,0.2);
--cyan-border: rgba(6,182,212,0.35);
/* ── Botones ─────────────────────────────────────────── */
/* --btn-primary-* y --btn-secondary-color son var() de otras variables
"(runtime)" de arriba — derivan solas, en cascada, sin que
color-enfasis.js necesite tocarlas directo. --btn-secondary-bg SÍ
tiene su propio setProperty, pero solo en oscuro (acá en claro sigue
siendo el alias var(--surface-2); en la media query de abajo pasa a
ser un literal propio, ahí sí hace falta recalcularlo). */
--btn-primary-bg: var(--brand);
--btn-primary-color: var(--white);
--btn-primary-hover: var(--brand-dk);
--btn-secondary-bg: var(--surface-2);
--btn-secondary-color:var(--text-2);
/* ── Cards ───────────────────────────────────────────── */
/* --card-bg/--card-border son var() (derivan solas); --card-shadow es
"(runtime)" propio, ver sección Sombras de arriba. */
--card-bg: var(--surface);
--card-border: var(--border);
--card-shadow: 0 8px 32px rgba(249,115,22,0.08);
--card-blur: var(--surface-blur);
/* ── Radius ──────────────────────────────────────────── */
--radius-sm: 10px;
--radius: 14px;
--radius-lg: 20px;
--radius-full: 9999px;
/* ── Spacing ─────────────────────────────────────────── */
/* Inset estándar de contenido de pantalla — fuente única entre .contenedor
(ui.css) y .aj-sub-inner (perfil.css), antes 16px duplicado en ambos. */
--space-screen: 16px;
/* Alto de contenido de .app-bottom-nav (css/nav.css), sin contar el
env(safe-area-inset-bottom) que se suma aparte -- fuente única entre la
nav en sí, el spacer de scroll de cada pantalla raíz y el offset de
#cta-footer-s-home (css/estilos.css), para que los 3 se muevan juntos si
el alto de la nav cambia algún día. */
--bottom-nav-h: 60px;
/* ── Sombras (runtime — en oscuro quedan en negro fijo, ver js/color-enfasis.js) ── */
--shadow-sm: 0 4px 12px rgba(249,115,22,0.08);
--shadow: 0 8px 32px rgba(249,115,22,0.1);
--shadow-lg: 0 16px 48px rgba(249,115,22,0.15);
/* Neutros — la mayoría "(runtime)": hoy son grises/blancos planos en
claro (S=0, la fórmula de color-enfasis.js los reproduce sin cambio,
ver ese archivo) pero ya tenían tinte de marca en oscuro, así que
quedaron dentro del alcance de la derivación para no dejar la UI
"parcialmente actualizada" cuando cambie el color de énfasis (Tanda 2).
Únicas excepciones reales, NO tocadas por color-enfasis.js en ningún
modo: --neutral-dark/-gray/-mid/-light/-lighter (grises puros sin
ningún tinte en ningún modo) y --disabled-bg-2/--disabled-bg (su
versión oscura es blanco translúcido, no naranja). --border-slate es
"runtime" SOLO en oscuro — su valor claro (#cbd5e1) es azul genuino,
no emparentado con la marca, se deja fijo a propósito. */
--neutral-dark: #1a1a1a;
--neutral-gray: #777;
--neutral-mid: #666;
--neutral-light: #555;
--neutral-lighter: #ccc;
--text-faint: #aaa;
--text-mid: #444;
--disabled-bg-2: #f5f5f5;
--btn-secondary-hover-bg: #ebebeb;
--border-light: #e5e5e5;
--border-slate: #cbd5e1;
--border-mid: #d4d4d4;
--border-softest: #eaeaea;
--surface-light: #fafafa;
--disabled-bg: #f0f0f0;
--disabled-border: #eee;
--skeleton-base: #d1d1d1;
--skeleton-shine: #e8e8e8;
/* Sombras negras */
--black-xxs: rgba(0,0,0,0.02);
--black-03: rgba(0,0,0,0.03);
--black-xs: rgba(0,0,0,0.04);
--black-05: rgba(0,0,0,0.05);
--black-sm: rgba(0,0,0,0.06);
--black-md: rgba(0,0,0,0.07);
--black-15: rgba(0,0,0,0.15);
--black-25: rgba(0,0,0,0.25);
--black-35: rgba(0,0,0,0.35);
/* Amber */
--amber: #fbbf24;
--amber-light: #fef3c7;
--amber-lighter: #fffbeb;
--amber-dark: #b45309;
--amber-darker: #92400e;
--amber-accent: #d97706;
--amber-border: #fde68a;
--amber-30: rgba(251,191,36,0.4);
/* Green / Error extendidos */
--green-dark: #166534;
--green-light: #f0fdf4;
--green-border: #bbf7d0;
--error-bg: #fee2e2;
--error-light-border: #fecaca;
--error-lightest: #fef2f2;
/* Purple extendido */
--purple-bg-light: rgba(124,58,237,0.08);
--purple-border-light: rgba(124,58,237,0.3);
--purple-lightest: #faf5ff;
--purple-border-soft: #ddd6fe;
/* WhatsApp */
--wa-bg: rgba(37,211,102,0.1);
--wa-bg-hover: rgba(37,211,102,0.18);
--wa-brand: #25D366;
--instagram: #E1306C;
/* Divisores */
--gray-divider: rgba(128,128,128,0.12);
/* ── Cumpleaños (Eventos) ──────────────────────────────
--cumple-dot (puntito de 6px que marca un cumpleaños en la grilla
mensual/franja semanal del calendario, css/eventos.css): deriva de
--brand sin mezclar -- elemento chico, necesita contraste sólido --
coherente con cualquier color de énfasis que el admin elija.
--cumple-bg (mezcla tenue de --brand con el fondo, color-mix, no rgba
plano) quedó sin consumidor desde que la card de cumpleaños dejó de
llevar fondo propio (ver "Cambios recientes" en css/eventos.css --
hereda el mismo `background` que cualquier `.ev-card` normal); se
conserva la variable por si se reactiva a futuro. --cumple-border/
--cumple-text (mismo criterio de mezcla/contraste, para el `.ev-card-icon`
cuadrado + el título en color fijo que tenía la card antes) se
eliminaron del todo -- ver "Cambios recientes", avatar circular + ícono
inline reusando el mismo tratamiento que cualquier otra card de evento,
sin color propio. */
--cumple-bg: color-mix(in srgb, var(--brand) 12%, var(--surface-2));
--cumple-dot: var(--brand);
/* ── Temporadas de descanso / offseason (Eventos, Tanda B) ─────────────
Mismo mecanismo de mezcla que --cumple-bg de arriba (color-mix contra
--surface-2, nunca un hex/rgba plano) pero tiñendo con --amber en vez de
--brand -- a propósito: --brand es el color de énfasis, deriva en
runtime por color de la liga (js/color-enfasis.js) y ya lo usan las
cards de evento normales; un descanso NO es un evento, necesita un tinte
que se distinga incluso si el admin elige un color de énfasis parecido
al ámbar. --amber es un "acento propio" fijo (ver el alcance documentado
de color-enfasis.js, más abajo en este archivo) -- nunca cambia con el
color de énfasis, mismo criterio ya usado para --success/--danger/etc.
--offseason-border reusa --amber-border tal cual (ya tiene su propia
variante dark-mode-aware, ver el bloque `@media` más abajo) -- sin
redefinir nada ahí, ambas variables quedan correctas en claro/oscuro sin
necesitar su propio override dentro de esa media query. */
--offseason-bg: color-mix(in srgb, var(--amber) 10%, var(--surface-2));
--offseason-border: var(--amber-border);
/* Dark mode tokens — "(runtime)" solo --dk-skeleton-base/--dk-pin-press/
--dk-modal-btn-bg (mismo tinte café-marca, aunque no viven dentro de la
media query dark — se definen una sola vez porque solo se usan desde
contextos ya oscuros) y --dk-brand-burn (naranja literal, fondo del
acordeón PIN de login) y --dk-overlay-95/--dk-overlay-97 (atados a
--bg oscuro, ver js/color-enfasis.js). El resto de --dk-* de este
bloque (skeleton-shine/-shine-2, info/error/modal/badge/border/purple)
son grises o colores de estado sin ningún tinte de marca — no derivan. */
--dk-skeleton-base: #2c1c11;
--dk-skeleton-shine: #383838;
--dk-skeleton-shine-2: #2a2a2a;
--dk-info-bg: #0a1929;
--dk-info-border: #1d4ed8;
--dk-info-text: #93c5fd;
--dk-info-text-2: #60a5fa;
--dk-error-bg: #2d1515;
--dk-error-border: #7f1d1d;
--dk-error-text: #fca5a5;
--dk-modal-overlay: #1c1c1c4f;
--dk-modal-item-bg: #252525;
--dk-modal-text: #f0f0f0;
--dk-modal-btn-bg: #2c1c11;
--dk-modal-btn-text: #ccc;
--dk-surface-opaque: #1c1c1c;
--dk-input-bg: #181818;
--dk-pin-press: #2a1a0e;
--dk-brand-burn: #e55a00;
--dk-text-muted: #aaa;
--dk-text-ghost: rgba(127,127,127,0.25);
--dk-text-muted-2: #8a8a8a;
--dk-border-dark: #444;
--dk-border-darker: #333;
--dk-purple-bg: #2d1f5e;
--dk-purple-text: #c4b5fd;
--dk-purple-mid: #6d28d9;
--dk-badge-bg: #3a3a3a;
--dk-badge-text: #bbb;
--dk-overlay-95: rgba(23,9,0,0.95);
--dk-overlay-97: rgba(23,9,0,0.97);
/* ── Especiales y utilidades ─────────────────────────── */
/* --placeholder-color es "(runtime)" (mismo tinte café que --border-warm,
literalmente el mismo RGB base) — el resto de esta sección no deriva. */
--placeholder-color: #a89587;
--text-ghost: rgba(127,127,127,0.3);
--white: #ffffff;
--white-40: rgba(255,255,255,0.4);
--info-btn-bg: #e0f2fe;
--info-btn-hover: #bae6fd;
--info-shadow: rgba(3,105,161,0.1);
--modal-info-card-bg: #ffffff;
}
/* ── DARK MODE ───────────────────────────────────────────── */
/* Mismo aviso que la cabecera del archivo: las variables "(runtime)" de
acá adentro también son solo fallback — root.style.setProperty() (inline)
gana por especificidad sobre CUALQUIER regla de stylesheet, incluida
esta media query, así que una vez que js/color-enfasis.js corre, lo que
esté escrito literal acá abajo para esas variables deja de tener efecto
visible en la práctica (coincide con lo calculado hoy, mismo naranja de
entrada — sin diferencia real, pero el mecanismo real ya no es este
bloque). */
@media (prefers-color-scheme: dark) {
:root {
/* Fondo (runtime) */
/* js/color-enfasis.js sincroniza el de este modo — ver la nota equivalente en la sección "Fondo" del :root claro, más arriba. */
--bg: #170900;
--bg-2: #1f0d00;
/* Superficies — capas translúcidas naranjas sobre el bg oscuro */
--surface: rgba(249,115,22,0.07);
--surface-2: rgba(249,115,22,0.04);
--surface-3: rgba(249,115,22,0.02);
/* Bordes */
--border: rgba(249,115,22,0.18);
--border-2: rgba(249,115,22,0.1);
/* Texto */
--text: #F0E0D0;
--text-2: #C9A090;
--muted: #9A7060;
--hint: #6A4030;
/* Sombras */
--shadow-sm: 0 4px 12px rgba(0,0,0,0.4);
--shadow: 0 8px 32px rgba(0,0,0,0.5);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
/* Cards */
--card-bg: rgba(249,115,22,0.06);
--card-shadow: 0 8px 32px rgba(0,0,0,0.4);
/* Botones */
--btn-secondary-bg: rgba(249,115,22,0.08);
--btn-secondary-color: #C9A090;
/* Estados dark */
--success-bg: rgba(34,197,94,0.08);
--warning-bg: rgba(245,158,11,0.08);
--danger-bg: rgba(220,38,38,0.08);
--info-bg: rgba(14,165,233,0.08);
/* Cyan dark -- más claro que el de modo claro (mismo criterio que
--dk-info-text para .fi-pill-fin, css/reservas.css) para más contraste
sobre el tinte de fondo oscuro; -20/-border bajan de intensidad como
el resto de los "-bg"/"-bdr" de este bloque. */
--cyan: #22d3ee;
--cyan-20: rgba(34,211,238,0.15);
--cyan-border: rgba(34,211,238,0.3);
/* Superficies neutras → versiones oscuras */
--surface-light: rgba(249,115,22,0.05);
--disabled-bg: rgba(255,255,255,0.06);
--disabled-bg-2: rgba(255,255,255,0.05);
--disabled-border: rgba(249,115,22,0.12);
--border-light: rgba(249,115,22,0.12);
--btn-secondary-hover-bg: rgba(249,115,22,0.1);
/* Brand warm → tints oscuros */
--brand-warm: rgba(249,115,22,0.08);
--brand-warm-2: rgba(249,115,22,0.05);
--brand-warm-3: rgba(249,115,22,0.1);
/* Info → dark */
--info-btn-bg: #0a1929;
--info-btn-hover: rgba(14,165,233,0.15);
/* Estados extendidos → dark */
--green-light: rgba(34,197,94,0.06);
--error-bg: #2d1515;
--amber-light: rgba(245,158,11,0.08);
--amber-lighter: rgba(245,158,11,0.04);
/* Neutros → invertidos */
--neutral-dark: var(--text);
--text-mid: #b0a090;
--text-faint: #6a5a50;
--border-slate: rgba(249,115,22,0.2);
--border-mid: rgba(249,115,22,0.15);
/* Errores dark */
--error-lightest: rgba(220,38,38,0.12);
--error-light-border: rgba(220,38,38,0.3);
--error-light: rgba(220,38,38,0.08);
/* Púrpura dark */
--purple-light: rgba(124,58,237,0.2);
--purple-lightest: rgba(124,58,237,0.08);
--purple-border-soft: rgba(124,58,237,0.25);
--purple-bg: rgba(124,58,237,0.15);
/* Amber dark */
--amber-border: rgba(245,158,11,0.3);
/* Cumpleaños: sin override dark -- la definición única en :root (arriba)
ya deriva de --brand/--surface-2/--border-light, que sí tienen su
propio valor dark, así que se recalcula sola sin duplicar acá. */
/* Success dark */
--success-lightest: rgba(34,197,94,0.1);
--green-border: rgba(34,197,94,0.2);
/* Info dark */
--info-bg-light: var(--dk-info-bg);
--info-light: var(--dk-info-text);
/* Skeleton dark */
--skeleton-base: #2a1a0e;
--skeleton-shine: #3a2a1e;
/* Bordes y superficies dark */
--border-softest: rgba(249,115,22,0.1);
--border-warm: rgba(249,115,22,0.15);
--brand-warm-border: rgba(249,115,22,0.2);
--neutral-lighter: #666;
--modal-info-card-bg: rgba(23,9,0,0.97);
}
}