/* ==========================================================
   TEMA GENERAL Y TOKENS DE DISEÑO (RADIO NARANJA)
   Soporte: Modo Claro / Modo Oscuro
   ========================================================== */

:root {
    /* MODO OSCURO (Naranja Eléctrico sobre Negro Profundo) */
    --bg: #0d0905;
    --bg-soft: #1a1108;
    --surface: rgba(255, 140, 0, 0.12);
    --surface-2: rgba(255, 140, 0, 0.22);
    --border: rgba(255, 140, 0, 0.4);
    --shadow: 0 18px 60px rgba(255, 69, 0, 0.25);

    --accent: #ff8c00;
    --accent-2: #ff4500;
    --accent-contrast: #000;
    --focus: rgba(255, 140, 0, 0.5);

    /* Typography Colors (Dark Mode) */
    --text: #ffffff;
    /* Cuerpo en blanco puro */
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-heading: var(--accent);
    /* Títulos en Naranja de la marca */

    /* Animaciones y Refinamientos */
    --transition-smooth: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Paper Background (Modo Oscuro Naranja Vivo) */
    --paper-opacity: 0.2;
    --paper-filter: contrast(1.2) brightness(0.9);
    --paper-shadow: rgba(0, 0, 0, 0.95);
    --paper-1-a: #662200;
    --paper-1-b: #331100;
    --paper-2-a: #441100;
    --paper-2-b: #220500;
    --paper-3-a: #221a15;
    --paper-3-b: #000000;
    --depth-1: rgba(255, 69, 0, 0.15);
    --depth-2: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] {
    /* MODO CLARO (Naranja Saturado / Papeles Vivos) */
    --bg: #ffe6c1;
    /* Naranja crema más profundo */
    --bg-soft: #fff3db;
    --surface: #ffcc80;
    --surface-2: #ffa726;
    --border: #fb8c00;
    --shadow: 0 12px 40px rgba(230, 81, 0, 0.25);

    --accent: #e65100;
    --accent-2: #bf360c;
    --accent-contrast: #fff;
    --focus: rgba(230, 81, 0, 0.4);

    /* Typography Colors (Light Mode) */
    --text: #4e2b00;
    --text-muted: rgba(78, 43, 0, 0.75);
    --text-heading: #261200;
    /* Títulos mucho más oscuros para contraste */
    --heading-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

    /* Paper Background (Modo Claro Naranja Intenso) */
    --paper-opacity: 0.6;
    --paper-filter: saturate(1.8) contrast(1.1) brightness(0.95);
    --paper-shadow: rgba(230, 81, 0, 0.3);
    --paper-1-a: #ffcc80;
    --paper-1-b: #ff9800;
    --paper-2-a: #ffe0b2;
    --paper-2-b: #ffb74d;
    --paper-3-a: #fff8e1;
    --paper-3-b: #ffe0b2;
    --depth-1: rgba(255, 152, 0, 0.4);
    --depth-2: rgba(255, 204, 128, 0.25);
}

/* Compatibilidad con variables previas (Legacy support) */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --bg-page: var(--bg);
    --bg-panel: var(--surface);
    --text-main: var(--text);
    --text-muted: var(--text-muted);
    --border-soft: var(--border);
    --orange: var(--accent);
    --orange-dark: var(--accent-2);
}

/* ==========================================================
   ESTILOS BASE PARA THEME
   ========================================================== */
body {
    background-color: var(--bg);
    color: var(--text);
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

/* Fondo de Papeles (Paper BG) */
.paper-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--bg);
    overflow: hidden;
    pointer-events: none;
    transition: background-color var(--transition-smooth);
}

.paper-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 700px at 70% 30%, var(--depth-1), transparent 55%),
        radial-gradient(900px 600px at 30% 70%, var(--depth-2), transparent 55%);
    opacity: 0.95;
    transition: background var(--transition-smooth);
}

.paper {
    position: absolute;
    border-radius: 18px;
    box-shadow: 0 22px 45px var(--paper-shadow);
    opacity: var(--paper-opacity);
    filter: var(--paper-filter);
    will-change: transform;
    transition: all var(--transition-smooth);
}

.paper--pink {
    width: clamp(260px, 45vw, 520px);
    height: clamp(220px, 38vw, 430px);
    background: linear-gradient(145deg, var(--paper-1-a), var(--paper-1-b));
    top: -60px;
    left: -60px;
    transform: rotate(-18deg);
}

.paper--green {
    width: clamp(280px, 48vw, 560px);
    height: clamp(240px, 40vw, 460px);
    background: linear-gradient(145deg, var(--paper-2-a), var(--paper-2-b));
    top: 180px;
    left: -120px;
    transform: rotate(-18deg);
}

.paper--gray {
    width: clamp(360px, 58vw, 860px);
    height: clamp(320px, 52vw, 760px);
    background: linear-gradient(145deg, var(--paper-3-a), var(--paper-3-b));
    top: -40px;
    right: -140px;
    transform: rotate(18deg);
}

/* ==========================================================
   CONTRASTE MODO CLARO
   ========================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-heading);
    transition: color var(--transition-smooth);
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 {
    text-shadow: var(--heading-shadow);
}

[data-theme="light"] .hero-badge {
    background: rgba(255, 122, 0, 0.12);
    color: var(--accent);
    border-color: rgba(255, 122, 0, 0.25);
}

[data-theme="light"] .hero-text h2 {
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
    text-shadow: 0 4px 15px rgba(255, 255, 255, 0.7) !important;
}

[data-theme="light"] .hero-text p {
    color: var(--text-muted) !important;
}

/* ==========================================================
   THEME TOGGLE BOTÓN (HEADER)
   ========================================================== */
.theme-toggle-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-pill);
    padding: 0 14px;
    height: 38px;
    cursor: pointer;
    transition: all var(--transition-smooth);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    backdrop-filter: blur(8px);
    box-sizing: border-box;
}

.theme-toggle-btn:hover {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.theme-toggle-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Ocultar en móvil si vamos a usar el bottom sheet */
@media (max-width: 768px) {
    .theme-toggle--desktop {
        display: none !important;
    }
}