/* ═══════════════════════════════════════════════════════
MIRLXS — Sistema de colores unificado
Editar aquí para cambiar el aspecto visual completo
═══════════════════════════════════════════════════════ */
:root {
/* ── Brand ───────────────────────────────────────────── */
--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;
--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);
--overlay: rgba(0,0,0,0.65);
--overlay-light: rgba(0,0,0,0.55);
--overlay-dark: rgba(0,0,0,0.7);
/* ── Fondo ───────────────────────────────────────────── */
/* Si cambiás --bg (light), actualizá a mano el en index.html e inscripcion/index.html — los meta tags no soportan var(). */
/* También actualizá a mano background_color/theme_color en manifest.json (barra de gestos de Android en PWA instalada) — el manifest solo admite un valor único, sin variante dark, así que usa el valor light. */
--bg: #FDF3EB;
--bg-2: #F7EAE0;
/* ── Superficies ─────────────────────────────────────── */
--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 ──────────────────────────────────────────── */
--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 ───────────────────────────────────────────── */
--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;
/* ── Botones ─────────────────────────────────────────── */
--btn-primary-bg: var(--brand-light);
--btn-primary-color: var(--brand);
--btn-primary-hover: rgba(249,115,22,0.22);
--btn-secondary-bg: var(--surface-2);
--btn-secondary-color:var(--text-2);
/* ── Cards ───────────────────────────────────────────── */
--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;
/* ── Sombras ─────────────────────────────────────────── */
--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 */
--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);
/* 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);
/* Dark mode tokens */
--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-datepicker-bg: #22140ae5;
--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: #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 ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root {
/* Fondo */
/* Si cambiás --bg (dark), actualizá a mano el en index.html e inscripcion/index.html — los meta tags no soportan var(). */
--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);
/* 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);
/* 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);
}
}