/* Paleta de marca (misma escala que style.css; este chrome es standalone).
   app.accent pisa la base vía /theme.css. */
:root {
    --shark-500: #6c8bf2;
    --shark-700: color-mix(in srgb, var(--shark-500) 65%, #000000);
    --shark-600: color-mix(in srgb, var(--shark-500) 82%, #000000);
    --shark-400: color-mix(in srgb, var(--shark-500) 78%, #ffffff);
    --shark-300: color-mix(in srgb, var(--shark-500) 55%, #ffffff);
    --shark-focus-ring: color-mix(in srgb, var(--shark-500) 45%, transparent);
}
/* Chrome de las páginas pre-auth (login/forgot/reset). Antes vivía
 * inline en auth-page.php; fichero propio por la CSP style-src 'self'. */
    html, body { height: 100%; margin: 0; }
    body.auth-page {
        display: flex;
        min-height: 100vh;
        background: #0e1118;
    }

    /* ====== Mitad izquierda: formulario a pelo (sin caja) ====== */
    .auth-left {
        flex: 1;
        display: grid;
        place-items: center;
        padding: 32px 24px;
        background: #1e1e1e;
    }
    .auth-form {
        width: 100%;
        max-width: 520px;
        animation: rise .55s cubic-bezier(.2, .7, .3, 1) both;
    }
    /* Login providers (Google / passkey): side by side on ≥576px, stacked on phones */
    .login-providers { display: flex; flex-direction: column; gap: 8px; }
    @media (min-width: 576px) {
        .login-providers { flex-direction: row; }
        .login-providers .btn { flex: 1 1 0; min-width: 0; }
    }
    @keyframes rise {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .auth-left .form-control {
        background: rgba(255, 255, 255, .04);
        border-color: rgba(255, 255, 255, .12);
    }
    .auth-left .form-control:focus {
        border-color: var(--shark-500);
        box-shadow: 0 0 0 .25rem var(--shark-focus-ring);
    }
    .btn-brand {
        --bs-btn-bg: var(--shark-500);
        --bs-btn-border-color: var(--shark-500);
        --bs-btn-hover-bg: var(--shark-400);
        --bs-btn-hover-border-color: var(--shark-400);
        --bs-btn-active-bg: var(--shark-600);
        --bs-btn-active-border-color: var(--shark-600);
        --bs-btn-color: #fff;
        --bs-btn-hover-color: #fff;
        --bs-btn-active-color: #fff;
        transition: transform .15s ease, background-color .15s ease;
    }
    .btn-brand:hover { transform: translateY(-1px); }

    /* sin panel derecho (móvil/tablet): logo horizontal pequeño arriba a
       la izquierda. OJO: sin clases d-* de Bootstrap (su !important
       pisaría el display de los media queries). */
    .corner-logo { display: none; }
    @media (max-width: 1199.98px) {
        .corner-logo {
            display: block;
            position: absolute;
            top: 18px;
            left: 20px;
            width: 140px;
        }
    }

    /* ====== Mitad derecha: background.png recreado en CSS + logo ====== */
    .auth-right {
        width: 50%;
        position: relative;
        overflow: hidden;
        display: none;
        place-items: center;
        background: #6372a5;
    }
    .auth-right img {
        width: min(52%, 380px);
        filter: drop-shadow(0 6px 28px rgba(0, 0, 0, .35));
    }
    @media (min-width: 1200px) {
        .auth-right { display: grid; }
    }

    /* marca en texto cuando no hay ficheros de logo */
    .corner-text {
        display: none;
        position: absolute;
        top: 22px;
        left: 24px;
        color: #fff;
        font-weight: 700;
        font-size: 1.1rem;
        letter-spacing: .02em;
    }
    @media (max-width: 1199.98px) { .corner-text { display: block; } }
    .auth-right .panel-text {
        color: #fff;
        font-weight: 800;
        font-size: clamp(2rem, 4vw, 3.2rem);
        letter-spacing: .02em;
        text-shadow: 0 6px 28px rgba(0, 0, 0, .35);
    }

    /* accesibilidad: sin animaciones si el sistema las desaconseja */
    @media (prefers-reduced-motion: reduce) {
        .auth-form, .btn-brand { animation: none; transition: none; }
    }

    /* RTL (Arabic): the flow flips via logical properties; the absolutely
       positioned corner mark needs mirroring. */
    [dir="rtl"] .corner-logo { left: auto; right: 20px; }
    [dir="rtl"] .corner-text { left: auto; right: 24px; }