/* =========================================================
   Tema "futurista" para login.php - mismo lenguaje visual
   que menu-theme.css / barra-theme.css (claro por defecto,
   oscuro opcional via body[data-theme="dark"]).
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    --up-page-bg: #eef2f8;
    /* Azul marino (con acento dorado del sello de la UP): distingue este
       panel del celeste de SIREDE (sirede.up.ac.pa) sin salirse de la
       identidad institucional. */
    --up-panel-bg: linear-gradient(160deg, #1d4278 0%, #163564 55%, #0e2750 100%);
    --up-panel-dot: rgba(96, 165, 250, 0.16);
    --up-panel-dot2: rgba(217, 164, 6, 0.12);
    --up-panel-text: #eef2f9;
    --up-panel-text-muted: #aab9d6;
    --up-hero-heading: #ffffff;
    --up-badge-bg: rgba(255, 255, 255, 0.08);
    --up-badge-border: rgba(96, 165, 250, 0.32);
    --up-card-bg: #ffffff;
    --up-card-border: rgba(15, 23, 42, 0.08);
    --up-card-shadow: 0 20px 45px rgba(15, 23, 42, 0.10);
    --up-text-primary: #0f172a;
    --up-text-secondary: #475569;
    --up-text-muted: #64748b;
    --up-accent: #0ea5e9;
    --up-accent-strong: #0369a1;
    --up-input-bg: #f8fafc;
    --up-input-border: rgba(15, 23, 42, 0.15);
    --up-input-focus-bg: #ffffff;
    --up-footer-text: #94a3b8;

    font-family: 'Jost', 'Segoe UI', sans-serif;
    background: var(--up-page-bg);
    color: var(--up-text-primary);
    transition: background .2s ease, color .2s ease;
}

body[data-theme="dark"] {
    --up-page-bg: #0b1120;
    --up-panel-bg: linear-gradient(160deg, #102544 0%, #0c1d38 55%, #08152a 100%);
    --up-panel-dot: rgba(96, 165, 250, 0.18);
    --up-panel-dot2: rgba(217, 164, 6, 0.14);
    --up-panel-text: #f1f5f9;
    --up-panel-text-muted: #a9b8ce;
    --up-hero-heading: #f1f5f9;
    --up-badge-bg: rgba(255, 255, 255, 0.06);
    --up-badge-border: rgba(96, 165, 250, 0.3);
    --up-card-bg: #0f172a;
    --up-card-border: rgba(148, 163, 184, 0.16);
    --up-card-shadow: 0 20px 45px rgba(2, 6, 23, 0.45);
    --up-text-primary: #f1f5f9;
    --up-text-secondary: #cbd5e1;
    --up-text-muted: #94a3b8;
    --up-accent: #38bdf8;
    --up-accent-strong: #38bdf8;
    --up-input-bg: rgba(255, 255, 255, 0.06);
    --up-input-border: rgba(148, 163, 184, 0.25);
    --up-input-focus-bg: rgba(255, 255, 255, 0.09);
    --up-footer-text: #64748b;
}

/* ---------- Toggle de tema (mismo patron que menu/barra) ---------- */
.theme-toggle-fab {
    position: fixed;
    right: 20px;
    top: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #ffffff;
    font-size: 18px;
    box-shadow: 0 10px 26px rgba(14, 165, 233, .4);
    cursor: pointer;
    z-index: 1045;
    transition: transform .2s ease, box-shadow .2s ease;
}

.theme-toggle-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 14px 32px rgba(14, 165, 233, .5);
}

.theme-toggle-fab:focus {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(14, 165, 233, .35), 0 10px 26px rgba(14, 165, 233, .4);
}

/* ---------- Layout general ---------- */
.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

@media (max-width: 991.98px) {
    .login-page {
        grid-template-columns: 1fr;
        /* Sin esto, el grid reparte el alto sobrante de 100vh estirando la
           fila del panel azul (que queda centrado con flex), dejando un
           hueco enorme antes de pasar al panel blanco. */
        align-content: start;
    }
}

/* ---------- Panel izquierdo ---------- */
.login-hero {
    background:
        radial-gradient(circle at 12% 0%, var(--up-panel-dot), transparent 45%),
        radial-gradient(circle at 100% 100%, var(--up-panel-dot2), transparent 45%),
        var(--up-panel-bg);
    color: var(--up-panel-text);
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-width: 0;
    transition: background .2s ease, color .2s ease;
}

.login-hero::before,
.login-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.login-hero::before {
    width: 420px;
    height: 420px;
    top: -160px;
    left: -140px;
}

.login-hero::after {
    width: 320px;
    height: 320px;
    bottom: -140px;
    right: -100px;
    background: rgba(217, 164, 6, 0.08);
}

@media (max-width: 991.98px) {
    .login-hero {
        padding: 48px 32px 32px;
    }
}

.hero-logos {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 48px;
    position: relative;
    z-index: 1;
}

.hero-logos img.seal-logo {
    height: 112px;
    width: auto;
}

.hero-logos .logo-divider {
    width: 1px;
    height: 68px;
    background: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.hero-logos img.app-logo {
    height: 78px;
    width: auto;
}

.login-hero h1 {
    font-size: 2.6rem;
    font-weight: 600;
    margin: 0 0 18px;
    color: var(--up-hero-heading);
    position: relative;
    z-index: 1;
}

.login-hero p {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--up-panel-text-muted);
    max-width: 460px;
    margin: 0 0 32px;
    position: relative;
    z-index: 1;
}

.secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--up-badge-bg);
    border: 1px solid var(--up-badge-border);
    font-size: .88rem;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

@media (max-width: 991.98px) {
    .login-hero h1 {
        font-size: 2rem;
    }

    .login-hero p {
        font-size: .88rem;
    }

    .secure-badge {
        display: none;
    }
}

/* En modo teléfono el panel izquierdo queda muy comprimido: se quita la
   segunda línea ("Accede con tus credenciales...") y se deja solo la
   presentación del sistema. */
@media (max-width: 575.98px) {
    .hero-sub-break,
    .hero-sub-credentials {
        display: none;
    }

    .hero-logos {
        gap: 14px;
        margin-bottom: 32px;
    }

    .hero-logos img.seal-logo {
        height: 76px;
    }

    .hero-logos .logo-divider {
        height: 48px;
    }

    .hero-logos img.app-logo {
        height: 54px;
    }
}

/* ---------- Panel derecho ---------- */
.login-form-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    min-width: 0;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--up-card-bg);
    border: 1px solid var(--up-card-border);
    border-radius: 22px;
    box-shadow: var(--up-card-shadow);
    padding: 40px 36px;
    transition: background .2s ease, border-color .2s ease;
}

.login-eyebrow {
    display: block;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--up-accent);
    margin-bottom: 8px;
}

.login-card h2 {
    font-size: 1.65rem;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--up-text-primary);
}

.login-card .login-subtitle {
    color: var(--up-text-muted);
    margin: 0 0 30px;
    font-size: .95rem;
}

.field-group {
    margin-bottom: 20px;
}

.field-group label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--up-text-secondary);
    margin-bottom: 8px;
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrap i.field-icon {
    position: absolute;
    left: 14px;
    color: var(--up-text-muted);
    font-size: .95rem;
    pointer-events: none;
}

.input-wrap input {
    width: 100%;
    background: var(--up-input-bg);
    border: 1px solid var(--up-input-border);
    border-radius: 12px;
    padding: 12px 14px 12px 42px;
    font-size: .96rem;
    color: var(--up-text-primary);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.input-wrap input::placeholder {
    color: var(--up-text-muted);
}

.input-wrap input:focus {
    outline: none;
    background: var(--up-input-focus-bg);
    border-color: var(--up-accent);
    box-shadow: 0 0 0 .18rem rgba(14, 165, 233, .18);
}

.input-wrap .toggle-password {
    position: absolute;
    right: 14px;
    color: var(--up-text-muted);
    cursor: pointer;
    font-size: .95rem;
}

.forgot-row {
    text-align: right;
    margin: -8px 0 22px;
}

.forgot-row a {
    font-size: .84rem;
    color: var(--up-accent);
    text-decoration: none;
}

.forgot-row a:hover {
    text-decoration: underline;
}

.btn-submit {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 13px 18px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    box-shadow: 0 12px 26px rgba(14, 165, 233, .32);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(14, 165, 233, .4);
}

.btn-submit:active {
    transform: translateY(0);
}

.login-footer {
    text-align: center;
    margin-top: 28px;
    color: var(--up-footer-text);
    font-size: .82rem;
    line-height: 1.6;
}

/* ---------- Modal "¿Cuál es mi contraseña?" ---------- */
.login-info-modal .modal-content {
    background: var(--up-card-bg);
    border: 1px solid var(--up-card-border);
    border-radius: 20px;
    box-shadow: var(--up-card-shadow);
    color: var(--up-text-primary);
    overflow: hidden;
}

.login-info-modal .modal-header {
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--up-card-border);
    padding: 22px 24px;
}

.login-info-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #ffffff;
    font-size: 1.05rem;
    box-shadow: 0 8px 18px rgba(14, 165, 233, .32);
}

.login-info-modal .modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--up-text-primary);
}

.login-info-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--up-text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.login-info-close:hover {
    background: var(--up-input-bg);
    color: var(--up-text-primary);
}

.login-info-modal .modal-body {
    padding: 24px;
}

.login-info-callout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--up-input-bg);
    border: 1px solid var(--up-input-border);
}

.login-info-callout-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(14, 165, 233, .14);
    color: var(--up-accent);
    font-size: .95rem;
}

.login-info-callout-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--up-accent);
    margin-bottom: 6px;
}

.login-info-callout p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--up-text-secondary);
}

.login-info-callout p a {
    color: var(--up-accent);
    font-weight: 600;
    text-decoration: none;
}

.login-info-callout p a:hover {
    text-decoration: underline;
}

.login-info-modal .modal-footer {
    border-top: 1px solid var(--up-card-border);
    padding: 16px 24px;
}

.login-info-ok {
    border: none;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: .9rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    box-shadow: 0 10px 22px rgba(14, 165, 233, .3);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.login-info-ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(14, 165, 233, .38);
}