/* ───────────────────────────────────────────────────────────── VICOSG — TEMA DUAL (claro / oscuro) Aplicar data-theme="dark" en para modo oscuro ───────────────────────────────────────────────────────────── */ /* MODO CLARO (por defecto) */ :root { --bg-primary: #FFFFFF; --bg-secondary: #F5F5F5; --bg-card: #FFFFFF; --bg-input: #F8F8F8; --border: #E8E8E8; --border-active: #C8F000; --text-primary: #0D0D0D; --text-secondary:#666666; --text-muted: #999999; --accent: #C8F000; --accent-dark: #A3C700; --accent-text: #0D0D0D; --orange: #FF5C1A; --success: #22C55E; --warning: #F59E0B; --error: #EF4444; --shadow: 0 2px 12px rgba(0,0,0,0.08); --shadow-card: 0 4px 20px rgba(0,0,0,0.06); --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; --transition: all 0.3s ease; --nav-height: 64px; } /* MODO OSCURO */ [data-theme="dark"] { --bg-primary: #070708; --bg-secondary: #0E0E10; --bg-card: #161618; --bg-input: #1C1C1F; --border: rgba(255,255,255,0.07); --border-active: #C8F000; --text-primary: #F2EDE6; --text-secondary:#B0AA9F; --text-muted: #555260; --accent: #C8F000; --accent-dark: #A3C700; --accent-text: #0D0D0D; --orange: #FF5C1A; --success: #22C55E; --warning: #F59E0B; --error: #EF4444; --shadow: 0 2px 12px rgba(0,0,0,0.4); --shadow-card: 0 4px 20px rgba(0,0,0,0.3); } /* Transición suave al cambiar tema */ *, *::before, *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; } /* RESET BASE */ *, *::before, *::after { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg-primary); color: var(--text-primary); font-family: 'DM Sans', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.5; min-height: 100vh; /* espacio para navbar inferior fija */ padding-bottom: var(--nav-height); } /* TIPOGRAFÍA */ h1 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; line-height: 1.1; } h2 { font-family: 'Oswald', sans-serif; font-weight: 600; line-height: 1.2; } h3 { font-family: 'Oswald', sans-serif; font-weight: 500; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* SCROLLBAR (webkit) */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* UTILIDADES */ .container { max-width: 480px; margin: 0 auto; padding: 0 20px; } .text-lime { color: var(--accent); } .text-orange { color: var(--orange); } .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .text-right { text-align: right; } .mono { font-family: 'DM Mono', monospace; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom:16px; } .mb-3 { margin-bottom:24px; } .mb-4 { margin-bottom:32px; } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .hidden { display: none !important; } .w-full { width: 100%; }