/*
 * =========================================================
 * AUTH — Innova Partners
 * ruta: public/css/auth.css
 * Estilos completamente independientes de welcome.css
 * =========================================================
 */

/* ════════════════════════════════
   VARIABLES DE TEMA
════════════════════════════════ */
:root {
    --transition-theme: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

html[data-resolved-theme="dark"] {
    --bg:           #1a0a00;
    --card-bg:      rgba(15, 8, 2, 0.75);
    --card-shadow:  0 0 0 1px rgba(250,132,65,0.18), 0 32px 80px rgba(0,0,0,0.65);
    --panel-border: rgba(250,132,65,0.12);
    --text-h:       #ffffff;
    --text-p:       #A1A09A;
    --text-li:      #C8C7C1;
    --link-color:   #FA8441;
    --link-hover:   #ffaa70;
    --overlay-1:    rgba(200, 80, 10, 0.18);
    --overlay-2:    rgba(250, 132, 65, 0.12);
    --overlay-3:    rgba(120, 40, 0, 0.35);
    --seg-bg:       rgba(0,0,0,0.35);
    --seg-border:   rgba(250,132,65,0.25);
    --seg-text:     rgba(255,255,255,0.50);
    --seg-active:   #ffffff;
}

html[data-resolved-theme="light"] {
    --bg:           #FDF3EE;
    --card-bg:      rgba(255, 250, 246, 0.88);
    --card-shadow:  0 0 0 1px rgba(250,132,65,0.20), 0 24px 60px rgba(160,80,20,0.13);
    --panel-border: rgba(250,132,65,0.18);
    --text-h:       #1a0800;
    --text-p:       #6b5a4e;
    --text-li:      #4a3728;
    --link-color:   #c95000;
    --link-hover:   #FA8441;
    --overlay-1:    rgba(250, 132, 65, 0.10);
    --overlay-2:    rgba(200, 100, 30, 0.08);
    --overlay-3:    rgba(255, 200, 160, 0.28);
    --seg-bg:       rgba(0,0,0,0.06);
    --seg-border:   rgba(160,72,8,0.20);
    --seg-text:     rgba(0,0,0,0.42);
    --seg-active:   #1a0800;
}

/* ════════════════════════════════
   RESET MÍNIMO
════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* ════════════════════════════════
   BODY
════════════════════════════════ */
body {
    font-family: 'Instrument Sans', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--bg);
    transition: var(--transition-theme);
}

/* ════════════════════════════════
   GRID GLOW (fondo)
════════════════════════════════ */
.grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

html[data-resolved-theme="dark"] .grid-bg {
    background-image:
        linear-gradient(rgba(250,132,65,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250,132,65,0.10) 1px, transparent 1px);
    background-size: 48px 48px;
}
html[data-resolved-theme="light"] .grid-bg {
    background-image:
        linear-gradient(rgba(160,72,8,0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160,72,8,0.09) 1px, transparent 1px);
    background-size: 48px 48px;
}

.grid-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(90px);
    animation: glowDrift 14s ease-in-out infinite alternate;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
html[data-resolved-theme="dark"]  .grid-glow { background: radial-gradient(circle, rgba(250,132,65,0.22) 0%, transparent 70%); }
html[data-resolved-theme="light"] .grid-glow { background: radial-gradient(circle, rgba(200,90,10,0.13) 0%, transparent 70%); }

.grid-glow-2 {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    filter: blur(70px);
    animation: glowDrift2 18s ease-in-out infinite alternate;
    top: 20%;
    left: 75%;
}
html[data-resolved-theme="dark"]  .grid-glow-2 { background: radial-gradient(circle, rgba(255,160,80,0.14) 0%, transparent 70%); }
html[data-resolved-theme="light"] .grid-glow-2 { background: radial-gradient(circle, rgba(220,110,20,0.09) 0%, transparent 70%); }

@keyframes glowDrift {
    0%   { transform: translate(-60%, -55%) scale(1);    }
    33%  { transform: translate(-38%, -48%) scale(1.1);  }
    66%  { transform: translate(-55%, -38%) scale(0.95); }
    100% { transform: translate(-42%, -58%) scale(1.05); }
}
@keyframes glowDrift2 {
    0%   { transform: translate(0%,   0%)   scale(1);    }
    50%  { transform: translate(-20%, 15%)  scale(1.15); }
    100% { transform: translate(10%,  -10%) scale(0.9);  }
}

.grid-accent {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 60px,
        rgba(250,132,65,1) 60px, rgba(250,132,65,1) 61px
    );
}

.bg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 20% 50%, var(--overlay-1) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 80% 30%, var(--overlay-2) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 50% 100%, var(--overlay-3) 0%, transparent 60%);
    transition: background 0.35s ease;
}

/* ════════════════════════════════
   TOGGLE DE TEMA
════════════════════════════════ */
.auth-header {
    width: 100%;
    max-width: 420px;
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 10;
}

#themeToggle {
    display: inline-flex;
    align-items: center;
    background: var(--seg-bg);
    border: 1px solid var(--seg-border);
    border-radius: 8px;
    padding: 3px;
    position: relative;
    transition: background 0.35s, border-color 0.35s;
    white-space: nowrap;
}

#toggleThumb {
    position: absolute;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    border-radius: 5px;
    pointer-events: none;
    display: block;
    z-index: 0;
    transition: transform 0.28s cubic-bezier(0.34, 1.45, 0.64, 1), width 0.1s, background 0.35s, box-shadow 0.35s;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 0 0 1.5px rgba(250,132,65,0.55);
}

html[data-resolved-theme="dark"] #toggleThumb {
    background: rgba(250,132,65,0.22);
    box-shadow: 0 2px 8px rgba(0,0,0,0.40), 0 0 0 1.5px rgba(250,132,65,0.55);
}

.theme-toggle__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 500;
    font-family: 'Instrument Sans', sans-serif;
    color: var(--seg-text);
    white-space: nowrap;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.22s;
    /* Reset de todo lo que Flux pueda meter */
    border: none;
    background: transparent;
    margin: 0;
    box-shadow: none;
    outline: none;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    height: auto;
    flex-shrink: 0;
}

.theme-toggle__btn.active { color: var(--seg-active); }

.theme-toggle__btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    display: inline-block;
}

/* ════════════════════════════════
   AUTH CARD
════════════════════════════════ */
.auth-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 420px;
    background: var(--card-bg);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
    padding: 2.25rem 2rem 2rem;
    animation: cardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: var(--transition-theme);
}

.auth-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(250,132,65,0.30) 0%, transparent 50%, rgba(250,132,65,0.09) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Logo */
.auth-logo {
    display: block;
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin: 0 auto 1.25rem;
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(250,132,65,0.40)); }
    50%       { filter: drop-shadow(0 0 20px rgba(250,132,65,0.70)); }
}

/* Títulos */
.auth-card h1,
.auth-card [data-flux-heading] {
    color: var(--text-h) !important;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.35rem;
}

.auth-card p,
.auth-card [data-flux-subheading] {
    color: var(--text-p) !important;
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.55;
}

/* Labels */
.auth-card [data-flux-label] {
    color: var(--text-li) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}

/* Inputs */
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
    background: rgba(250,132,65,0.05) !important;
    border-color: rgba(250,132,65,0.22) !important;
    color: var(--text-h) !important;
    border-radius: 7px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

html[data-resolved-theme="light"] .auth-card input[type="email"],
html[data-resolved-theme="light"] .auth-card input[type="password"],
html[data-resolved-theme="light"] .auth-card input[type="text"] {
    background: rgba(250,132,65,0.04) !important;
    border-color: rgba(160,72,8,0.20) !important;
}

.auth-card input:focus {
    outline: none !important;
    border-color: rgba(250,132,65,0.55) !important;
    box-shadow: 0 0 0 3px rgba(250,132,65,0.12) !important;
}

.auth-card input::placeholder {
    color: var(--text-p) !important;
    opacity: 0.7;
}

/* Botón primario */
.auth-card [data-flux-button][variant="primary"],
.auth-card button[type="submit"] {
    background: linear-gradient(135deg, #FA8441 0%, #e0631a 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 4px 18px rgba(250,132,65,0.35) !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
    height: 2.5rem !important;
}

.auth-card [data-flux-button][variant="primary"]:hover,
.auth-card button[type="submit"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 24px rgba(250,132,65,0.50) !important;
}

/* Links */
.auth-card a,
.auth-card [data-flux-link] {
    color: var(--link-color) !important;
    font-weight: 500;
    transition: color 0.2s;
}
.auth-card a:hover,
.auth-card [data-flux-link]:hover {
    color: var(--link-hover) !important;
}

/* Checkbox */
.auth-card [data-flux-checkbox] { accent-color: #FA8441; }

/* Texto secundario */
.auth-card .text-zinc-600,
.auth-card .dark\:text-zinc-400 { color: var(--text-p) !important; }

/* Errores */
.auth-card [data-flux-error],
.auth-card .text-sm.text-red-600 {
    color: #ff6b3d !important;
    font-size: 0.78rem;
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 480px) {
    body { justify-content: flex-start; padding-top: 2.5rem; overflow-y: auto; }
    .auth-card { padding: 1.75rem 1.25rem 1.5rem; }
    .theme-toggle__btn span { display: none; }
    .theme-toggle__btn { padding: 5px 9px; }
}