/* Reset + tokens de diseno. Tema claro/oscuro via [data-theme] en . */ :root { --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --bg: #f8fafc; --bg-elevado: #ffffff; --bg-sutil: #f1f5f9; --borde: #e2e8f0; --texto: #0f172a; --texto-suave: #475569; --texto-tenue: #94a3b8; --marca: #0d9488; --marca-fuerte: #0f766e; --marca-suave: #ccfbf1; --exito: #16a34a; --exito-suave: #dcfce7; --advertencia: #d97706; --advertencia-suave: #fef3c7; --peligro: #dc2626; --peligro-suave: #fee2e2; --riesgo-i-bg: #fee2e2; --riesgo-i-fg: #7f1d1d; --riesgo-i-borde: #fca5a5; --riesgo-i-punto: #ef4444; --riesgo-ii-bg: #ffedd5; --riesgo-ii-fg: #7c2d12; --riesgo-ii-borde: #fdba74; --riesgo-ii-punto: #f97316; --riesgo-iii-bg: #fef3c7; --riesgo-iii-fg: #78350f; --riesgo-iii-borde: #fcd34d; --riesgo-iii-punto: #f59e0b; --riesgo-iv-bg: #d1fae5; --riesgo-iv-fg: #064e3b; --riesgo-iv-borde: #6ee7b7; --riesgo-iv-punto: #10b981; --radio-sm: 6px; --radio-md: 10px; --radio-lg: 16px; --sombra-md: 0 4px 16px -4px rgb(15 23 42 / 0.12); --sombra-lg: 0 12px 32px -8px rgb(15 23 42 / 0.18); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0b1220; --bg-elevado: #131c2e; --bg-sutil: #1a2540; --borde: #263352; --texto: #f1f5f9; --texto-suave: #b6c2d9; --texto-tenue: #6b7ba3; --marca-suave: #0f766e33; --exito-suave: #16a34a33; --advertencia-suave: #d9770633; --peligro-suave: #dc262633; --riesgo-i-bg: #7f1d1d55; --riesgo-i-fg: #fecaca; --riesgo-ii-bg: #7c2d1255; --riesgo-ii-fg: #fed7aa; --riesgo-iii-bg: #78350f55; --riesgo-iii-fg: #fde68a; --riesgo-iv-bg: #064e3b55; --riesgo-iv-fg: #a7f3d0; } } :root[data-theme='dark'] { --bg: #0b1220; --bg-elevado: #131c2e; --bg-sutil: #1a2540; --borde: #263352; --texto: #f1f5f9; --texto-suave: #b6c2d9; --texto-tenue: #6b7ba3; --marca-suave: #0f766e33; --exito-suave: #16a34a33; --advertencia-suave: #d9770633; --peligro-suave: #dc262633; --riesgo-i-bg: #7f1d1d55; --riesgo-i-fg: #fecaca; --riesgo-ii-bg: #7c2d1255; --riesgo-ii-fg: #fed7aa; --riesgo-iii-bg: #78350f55; --riesgo-iii-fg: #fde68a; --riesgo-iv-bg: #064e3b55; --riesgo-iv-fg: #a7f3d0; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--texto); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } button { font-family: inherit; } h1, h2, h3, h4, p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } [hidden] { display: none !important; } .contenedor { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; } .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } ::selection { background: var(--marca); color: white; } /* Scrollbar sutil, consistente en ambos temas */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 999px; }