/* ============================================================
   login.css — Estilos exclusivos de index.php y registro.php
   ============================================================ */

body {
    overflow: hidden;
    position: relative;
    display: block;
    padding-right: 0;
    align-items: unset;
    justify-content: unset;
}

/* ================================= */
/* Spline fondo                      */
/* ================================= */

.spline-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 0;
}

spline-viewer {
    width: 100%;
    height: 100%;
    display: block;
}

/* ================================= */
/* Overlay oscuro                    */
/* ================================= */

.dark-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 1;
    background: rgba(10, 10, 30, 0);
    pointer-events: none;
    transition: background 0.4s ease;
}

body.dark .dark-overlay {
    background: rgba(10, 10, 30, 0.55);
}

/* ================================= */
/* Formas decorativas                */
/* ================================= */

.deco {
    position: fixed;
    z-index: 2;
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.4s;
}

body.dark .deco { opacity: 0.35; }

.deco-1 { width: 280px; height: 280px; border-radius: 50%; background: #f5e100; top: -120px; left: -100px; }
.deco-2 { width: 200px; height: 200px; border-radius: 50%; background: #e04e1a; top: -80px; right: -60px; }
.deco-3 { width: 18px; height: 260px; border-radius: 12px; background: #7b2cbf; top: 50%; left: 0; transform: translateY(-50%); }
.deco-4 { width: 220px; height: 220px; border-radius: 50%; background: #e04e1a; bottom: -100px; left: -80px; }
.deco-5 { width: 180px; height: 180px; border-radius: 50%; background: #7b2cbf; bottom: -70px; right: -50px; }
.deco-6 { width: 260px; height: 16px; border-radius: 12px; background: #f5e100; top: 0; left: 50%; transform: translateX(-50%); }
.deco-7 { width: 200px; height: 14px; border-radius: 12px; background: #e04e1a; bottom: 0; left: 50%; transform: translateX(-50%); }

/* ================================= */
/* Form flotante                     */
/* ================================= */

.form-side {
    position: fixed;
    top: 50%;
    right: 12%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.form-side form {
    pointer-events: all;
}

/* ================================= */
/* Botón modo oscuro                 */
/* ================================= */

.dark-toggle {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 100;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid var(--black);
    background: var(--card);
    box-shadow: 3px 3px 0 var(--black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.dark-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 var(--black);
}

body.dark .dark-toggle {
    background: #1a1a2e;
    border-color: #f0ece0;
    box-shadow: 3px 3px 0 #f0ece040;
}

/* ================================= */
/* Modo oscuro — overrides           */
/* ================================= */

body.dark form {
    background: #1a1a2e;
    border-color: #ffffff30;
    box-shadow: 5px 5px 0 #ffffff20;
}

body.dark h1 { color: #f0ece0; }

body.dark input[type="text"],
body.dark input[type="password"] {
    color: #f0ece0;
    border-bottom-color: #ffffff30;
}

body.dark input::placeholder { color: #ffffff50; }

body.dark input[type="submit"] {
    background: #f0ece0;
    color: #1a1a2e;
    border-color: #f0ece0;
}

body.dark .divider::before,
body.dark .divider::after { background: #ffffff30; }
body.dark .divider span { color: #ffffff60; }

body.dark .btn-google {
    border-color: #ffffff30;
    color: #f0ece0;
}

body.dark .btn-google:hover {
    border-color: #f0ece0;
    box-shadow: 3px 3px 0 #f0ece0;
}

body.dark a { color: #ffffff60; }
body.dark a[href] { color: #f0ece0; }
body.dark .toggle-password { color: #ffffff50; }

body.dark .error-msg {
    background: #3a1a1a;
    border-color: #ff000040;
    color: #ff8080;
}