/* ============================================================================
   Fuel Control Dynamics — Login corporativo 2026
   Degradado azul→petróleo→claro con formas geométricas sutiles, card glass
   centrada (420px, radius 18, blur 12), acción primaria naranja #F28C28.
   ========================================================================== */

html, body { height: 100%; }

body {
    margin: 0;
    background: linear-gradient(135deg, #0E2B3D 0%, #12344A 45%, #F5F7FA 100%) fixed !important;
    color: #1F2937;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.preloadArea {
    left: -1000px;/* spinner precargado fuera de pantalla */
    position: absolute;
}

/* ----------------------- viewport + formas de fondo ---------------------- */

.login-viewport {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 24px;
}

.login-shape { position: absolute; pointer-events: none; }
.login-shape-1 {
    width: 520px; height: 520px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
    top: -160px; left: -120px;
}
.login-shape-2 {
    width: 340px; height: 340px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    bottom: -100px; left: 18%;
}
.login-shape-3 {
    width: 420px; height: 420px;
    border: 1px solid rgba(242, 140, 40, .12);
    border-radius: 32px;
    transform: rotate(28deg);
    top: 12%; right: -140px;
}

/* ------------------------------- card glass ------------------------------ */

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

.login-card {
    width: 420px;
    max-width: 100%;
    padding: 40px;
    margin: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
    animation: fcdLoginIn 0.4s ease both;
    text-align: center;
}

/* ------------------------------ marca / logo ----------------------------- */

/* chip blanco con el swirl transparente dentro */
.login-mark {
    width: 90px;
    height: 90px;
    border-radius: 22px;
    display: block;
    margin: 0 auto;
    padding: 13px;
    background: #FFFFFF;
    box-shadow: 0 6px 16px rgba(14, 43, 61, .18);
}

.login-brand {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 700;
    color: #12344A;
    letter-spacing: -0.2px;
}

.login-sub {
    font-size: 12.5px;
    color: #6B7280;
    margin-top: 2px;
}

/* escudo de seguridad en círculo blanco */
.login-shield {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 8px;
}
.login-shield .fa { color: #F28C28; font-size: 20px; }

.login-title {
    font-size: 22px;
    font-weight: 700;
    color: #12344A;
}

.login-hint {
    font-size: 13px;
    color: #6B7280;
    margin: 2px 0 22px;
}

/* -------------------------------- campos --------------------------------- */

.login-field { position: relative; margin-bottom: 14px; text-align: left; }

.field-icon {
    position: absolute;
    left: 17px;
    top: 18px;
    color: #12344A;
    font-size: 15px;
    pointer-events: none;
}

.login-control {
    width: 100%;
    height: 52px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    background: #FFFFFF;
    color: #1F2937;
    font-size: 14px;
    padding: 0 14px 0 44px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.login-control::placeholder { color: #9CA3AF; }
.login-control:focus {
    outline: none;
    border-color: #F28C28;
    box-shadow: 0 0 0 4px rgba(242, 140, 40, .15);
}
.login-control:disabled { background: #F5F7FA; color: #9CA3AF; }
.login-field.has-error .login-control { border-color: #DC2626; }
/* espacio SIEMPRE reservado: los errores no desplazan el layout al aparecer */
.login-field .error-message {
    display: block;
    min-height: 17px;
    line-height: 17px;
    margin-top: 2px;
}
.error-message, .error-message label { color: #DC2626; font-size: 11.5px; font-weight: 500; }

/* ------------------------ recordar / forgot password --------------------- */

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 18px;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 7px;
}
.login-remember input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #F28C28;
    cursor: pointer;
}
.login-remember label {
    color: #6B7280;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    cursor: pointer;
}

.login-row a {
    color: #12344A !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}
.login-row a:hover { color: #F28C28 !important; }

/* --------------------------------- botón --------------------------------- */

#btnLogin {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 10px;
    background: #F28C28;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 20px rgba(242, 140, 40, .35);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#btnLogin:hover:not(:disabled) {
    background: #E67E22;
    box-shadow: 0 10px 24px rgba(242, 140, 40, .40);
    transform: translateY(-1px);
}
#btnLogin:disabled {
    background: #E5E7EB;
    color: #9CA3AF;
    box-shadow: none;
}

#errMessage { display: none; margin: 0 auto 12px; }

/* ------------------------------ pie de página ---------------------------- */

.login-footer {
    margin-top: 22px;
    font-size: 11.5px;
    color: #9CA3AF;
    line-height: 1.7;
}

/* -------------------------- aviso de requisitos --------------------------- */

#requirement-check {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
#requirement-check ul { margin: 0; padding-left: 18px; }
html.js #error-js { display: none; }
html.cookies #error-cookies { display: none; }
html.localstorage #error-localstorage { display: none; }
html.js.cookies.localstorage #requirement-check { display: none; }

/* ------------------------------ animación spinner ------------------------ */

.loading-animate {
    animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ------------------------------- responsive ------------------------------ */

@media (max-width: 480px) {
    .login-card { padding: 28px 22px; }
    .login-mark { width: 72px; height: 72px; border-radius: 18px; }
}