/* ───────────────────────────────────────────────────────────────── 4. COMPONENTES GLOBALES — Toggle de tema + Aspecto (more.html) ───────────────────────────────────────────────────────────────── */ /* Botón sol/luna en el header */ .theme-btn{background:none;border:none;cursor:pointer;color:var(--gray4);width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color .18s,background .18s;flex-shrink:0;padding:0} .theme-btn:hover{color:var(--white);background:var(--gray1)} /* Light → mostrar luna (para ir a dark) */ .theme-btn .icon-sun{display:none} .theme-btn .icon-moon{display:block} /* Dark → mostrar sol (para ir a light) */ [data-theme="dark"] .theme-btn .icon-sun{display:block} [data-theme="dark"] .theme-btn .icon-moon{display:none} /* Oculto en móvil — en móvil se usa la sección Aspecto de more.html */ @media(max-width:1023px){.header .theme-btn{display:none}} /* Wrapper flex para toggle + back-link en headers secundarios */ .header-right{display:flex;align-items:center;gap:10px} /* Sección Aspecto (more.html) — visible en móvil y desktop */ .aspecto-section{margin-bottom:1.5rem} .aspecto-label{font-size:10px;font-weight:600;letter-spacing:1.5px;color:var(--gray4);text-transform:uppercase;margin-bottom:10px} .aspecto-row{display:flex;gap:8px} .aspecto-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);color:var(--gray4);font-family:var(--fb);font-size:14px;font-weight:500;cursor:pointer;transition:all .18s;-webkit-tap-highlight-color:transparent} .aspecto-btn:hover{border-color:var(--gray3);color:var(--white)} .aspecto-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(255,45,120,.06)} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ OutfitAI — theme.css ║ ║ Design System · Fase 1: Token Foundation ║ ║ ║ ║ Architecture: ║ ║ :root → ☀️ Light mode (default, principal) ║ ║ [data-theme="dark"] → 🌙 Dark mode (alternativa premium) ║ ║ ║ ║ Fase 1: Dark tokens = valores actuales → sin cambio visual. ║ ║ Los 12 themes del Content Pack (canvas JS) no usan este CSS. ║ ╚═══════════════════════════════════════════════════════════════════╝ */ /* ───────────────────────────────────────────────────────────────── 1. STATIC TOKENS — compartidos por ambos modos, nunca cambian ───────────────────────────────────────────────────────────────── */ :root { /* Brand accent — identidad OutfitAI, invariable */ --accent: #ff2d78; --accent2: #ff6ba8; --accent-glow: rgba(255,45,120,0.25); /* Score tier palette */ --tier-red: #ff4d1c; /* 0–59 */ --tier-orange: #f57c23; /* 60–74 */ --tier-gold: #f5c842; /* 75–89 */ --tier-green: #39d98a; /* 90–94 */ --tier-emerald: #00ffaa; /* 95–100 */ /* Status semánticos */ --red: #ff4d1c; --amber: #f5a623; --green: #39d98a; /* Layout */ --radius: 16px; --radius-sm: 8px; --radius-lg: 20px; --w-page: 1200px; --w-form: 540px; --w-modal-lg: 900px; --w-modal-sm: 440px; /* Tipografía */ --fd: 'Bebas Neue', sans-serif; --fb: 'DM Sans', sans-serif; } /* ───────────────────────────────────────────────────────────────── 2. ☀️ LIGHT MODE — apariencia principal (default) Inspirado en la filosofía visual del theme Minimal. Activado cuando NO hay data-theme="dark" en . ───────────────────────────────────────────────────────────────── */ :root { /* Superficies — marfil editorial cálido */ --black: #faf8f5; /* fondo página principal */ --card: #f2ede5; /* superficie cards */ --gray1: #ece7dc; /* superficie elevada (modales, dropdowns) */ --gray2: #e5dfd7; /* superficie inputs / hover */ --gray3: #b8ad9e; /* borde medio / texto muy muted */ /* Texto */ --white: #1a1a1a; /* texto principal — contraste 16.6:1 sobre bg */ --gray5: #6b5f55; /* texto secundario — contraste 5.3:1 sobre bg */ --gray4: #6e6760; /* texto muted — contraste 5.25:1 sobre bg (WCAG AA ✓) */ --accent-text: #c4005a; /* accent como texto — contraste 5.67:1 sobre bg (WCAG AA ✓) */ /* Bordes */ --border: rgba(26,26,26,0.08); --border-medium: rgba(26,26,26,0.14); /* Valores dependientes del tema */ --ambient-stop: rgba(255,45,120,0.04); --color-header-bg: rgba(250,248,245,0.92); --color-overlay-bg: rgba(200,195,185,0.88); --color-loading-bg: rgba(250,248,245,0.97); --color-cam-overlay: rgba(0,0,0,0.35); /* overlay detrás de bottom sheets */ /* Sombras */ --shadow-card: 0 1px 4px rgba(26,26,26,0.06); --shadow-card-hover: 0 4px 16px rgba(26,26,26,0.10); --shadow-popup: 0 8px 24px rgba(26,26,26,0.12); --shadow-floating: 0 -4px 16px rgba(0,0,0,0.08); /* PWA banner, sheets flotantes */ } /* ───────────────────────────────────────────────────────────────── 3. 🌙 DARK MODE — apariencia alternativa premium Evolución del diseño actual. Misma identidad, refinada. Activado con data-theme="dark" en . ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Superficies — negros con matiz vino/púrpura */ --black: #0a0a0a; --card: #120d10; --gray1: #1a1117; --gray2: #2a1f25; --gray3: #443040; /* Texto */ --white: #f5f0f5; /* texto principal — contraste 17.2:1 sobre bg */ --gray5: #ccaabb; /* texto secundario — contraste 9.8:1 sobre bg */ --gray4: #a07898; /* texto muted — contraste 5.32:1 sobre bg (WCAG AA ✓) */ --accent-text: #ff2d78; /* accent como texto — contraste 5.57:1 sobre bg (= --accent en dark) */ /* Bordes */ --border: rgba(255,255,255,0.09); --border-medium: rgba(255,255,255,0.14); /* Valores dependientes del tema */ --ambient-stop: rgba(255,45,120,0.08); --color-header-bg: rgba(10,10,10,0.92); --color-overlay-bg: rgba(0,0,0,0.85); --color-loading-bg: rgba(10,10,10,0.97); --color-cam-overlay: rgba(0,0,0,0.65); /* Sombras */ --shadow-card: none; --shadow-card-hover: none; --shadow-popup: 0 8px 24px rgba(0,0,0,0.4); --shadow-floating: 0 -4px 32px rgba(0,0,0,0.5); } /* ───────────────────────────────────────────────────────────────── ⚠️ ISSUE PENDIENTE v1.0 — Score tier colors en Light Mode ─────────────────────────────────────────────────────────────────── Los tier colors (--tier-green, --tier-gold, --amber, --tier-emerald) tienen contraste de 1.4–1.8:1 sobre fondos light. En dark mode superan los 10:1 y no tienen problema. CONTEXTO: Decisión de identidad visual aplazada hasta estabilizar el Design System completo. No cambiar los valores de token hasta revisar. Archivos afectados: · armario-inteligente.html → score-num, score-tier (Bebas Neue, grande) · checker.html → score-verdict, val-hint, strength-card icons · armario.html → verdict-badge, filter-pill, action-btn OPCIONES EVALUADAS: A) Badge invertido: bg=tier-color, color=var(--black) [recomendada] B) Tokens dark: --tier-X-text con hex más oscuros para light C) Dejar como está si los scores solo aparecen en contextos dark-bg NOTA: el array SCORE_TIERS en armario-inteligente.html duplica los hex de los tokens. Si se cambia un tier, actualizar también ese array. ─────────────────────────────────────────────────────────────────── */