/* =============================================================
   Emprendapp · UI v3 — FASE 1 (sistema de diseño + temas + foco)
   Paleta tomada del logo: azul noche, petróleo, celeste, cian, rosa.
   Se carga DESPUÉS de app.css: solo sobreescribe valores visuales.
   ============================================================= */

/* ---------- 1. Tokens base (escala, tipografía, radios) ---------- */
:root {
    --marca-noche:    #16213a;
    --marca-petroleo: #1f6f78;
    --marca-celeste:  #2d9cdb;
    --marca-cian:     #33d6e6;
    --marca-rosa:     #f4a7b9;

    --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
    --esp-5: 24px; --esp-6: 32px; --esp-7: 48px;

    --radio-sm: 8px; --radio-md: 12px; --radio-lg: 18px; --radio-pill: 999px;

    --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem;
    --fs-lg: 1.25rem; --fs-xl: 1.75rem; --fs-precio: clamp(2rem, 6vw, 3rem);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.22s;
    --foco: 0 0 0 3px var(--fondo), 0 0 0 5px var(--marca-cian);
}

/* ---------- 2. Tema oscuro (por defecto) ---------- */
:root, :root[data-theme="dark"] {
    --fondo:        #0d1424;
    --fondo-2:      #090f1c;
    --panel:        rgba(255, 255, 255, 0.045);
    --panel-solido: #141d31;
    --panel-borde:  rgba(148, 178, 220, 0.16);
    --texto:        #f3f5f9;          /* contraste 16:1 sobre fondo */
    --texto-tenue:  #a9b6cc;          /* contraste 8.6:1 */
    --acento:       #2d9cdb;
    --acento-2:     #33d6e6;
    --gradiente:    linear-gradient(135deg, #1f6f78 0%, #2d9cdb 55%, #33d6e6 100%);
    --acento-tenue: rgba(51, 214, 230, 0.14);
    --exito: #4ade9a;
    --error: #ff8a8a;
    --glass-blur:   16px;
    --glass-sombra: 0 10px 34px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

/* ---------- 3. Tema claro ---------- */
:root[data-theme="light"], body.light-theme {
    --fondo:        #f5f7fb;
    --fondo-2:      #ffffff;
    --panel:        #ffffff;
    --panel-solido: #ffffff;
    --panel-borde:  #dde3ee;
    --texto:        #16213a;          /* contraste 15:1 */
    --texto-tenue:  #4b5873;          /* contraste 7:1 */
    --acento:       #1a7fc0;          /* AA sobre blanco */
    --acento-2:     #1f6f78;
    --gradiente:    linear-gradient(135deg, #1f6f78 0%, #1a7fc0 100%);
    --acento-tenue: rgba(26, 127, 192, 0.09);
    --exito: #137a3f;
    --error: #c62f36;
    --glass-blur:   0px;
    --glass-sombra: 0 1px 2px rgba(22,33,58,.06), 0 6px 20px rgba(22,33,58,.07);
    --foco: 0 0 0 3px #fff, 0 0 0 5px #1a7fc0;
    color-scheme: light;
}

/* ---------- 4. Logos por tema (vectoriales = nitidez total) ---------- */
.logo--oscuro { display: none; }
:root[data-theme="dark"] .logo--claro  { display: none; }
:root[data-theme="dark"] .logo--oscuro { display: inline-block; }
img[class*="logo"], .splash__brand, .auth-card__brand { image-rendering: auto; height: auto; }

/* Transición suave al cambiar de tema (solo durante el cambio) */
.tema-transicion, .tema-transicion * {
    transition: background-color .35s var(--ease), color .35s var(--ease),
                border-color .35s var(--ease) !important;
}

/* ---------- 5. Base ---------- */
body {
    font-size: var(--fs-md);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(1200px 600px at 100% -10%, var(--acento-tenue), transparent 60%),
        var(--fondo);
}
.panel, .auth-card, .modal, .tarjeta-diseno, .tarjeta-landing { border-radius: var(--radio-lg); }

/* ---------- 6. Botones con microinteracciones ---------- */
.boton {
    border-radius: var(--radio-md);
    min-height: 44px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                filter var(--dur) var(--ease);
}
.boton--primario { color: #fff; box-shadow: 0 6px 18px -6px var(--acento); }
.boton--primario:hover  { transform: translateY(-2px); box-shadow: 0 10px 24px -8px var(--acento); filter: brightness(1.06); }
.boton--primario:active { transform: translateY(0) scale(.98); }
.boton--secundario:hover { border-color: var(--acento); background: var(--acento-tenue); transform: translateY(-1px); }
.boton--secundario:active { transform: scale(.98); }
.boton:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.boton-tema {
    width: 44px; height: 44px; border-radius: var(--radio-pill);
    border: 1px solid var(--panel-borde); background: var(--panel); cursor: pointer;
    transition: transform .4s var(--ease), border-color var(--dur) var(--ease);
}
.boton-tema:hover { transform: rotate(-20deg) scale(1.06); border-color: var(--acento); }

/* ---------- 7. Accesibilidad: foco visible con teclado ---------- */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--radio-sm); }
.boton:focus-visible, .boton-tema:focus-visible { box-shadow: var(--foco); }
.sidebar__link:focus-visible { box-shadow: inset 0 0 0 2px var(--marca-cian); }
.campo input:focus-visible, .campo select:focus-visible,
.campo input:focus, .campo select:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-tenue);
}
.campo input, .campo select { border-radius: var(--radio-sm); min-height: 44px; transition: border-color var(--dur), box-shadow var(--dur); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}