/* =========================================================
   CASA HOME — ACCESO AL PANEL EN UNA SOLA COLUMNA
   (login.php y registro.php del panel)

   Como las pantallas de acceso de tecomser: la pantalla no se parte
   en dos. Fondo azul oscuro, el logo arriba y el formulario debajo,
   en una sola tarjeta blanca centrada. El panel lateral (distintivo,
   textos, pasos, "©") se oculta: el logo es lo unico que queda.

   Se carga al final de cada pagina, despues de sus <style>, y como
   esas hojas usan !important en muchas reglas, aqui tambien.
========================================================= */

body{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:100vh !important;
    padding:40px 16px !important;
    background:#030e30 !important;
    background-image:none !important;
}

/* ---------- Contenedor: ya no es una rejilla de dos ---------- */
.lg-wrap,
.rg-wrap{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:min(480px,100%) !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
}
/* El registro lleva campos de dos en dos: necesita mas ancho. */
.rg-wrap{ width:min(760px,100%) !important; }

/* ---------- Arriba: solo el logo ---------- */
.lg-left,
.rg-left{
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 0 24px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
}
.lg-left::before,.lg-left::after,
.rg-left::before,.rg-left::after{ display:none !important; }
.lg-left > :not(.lg-left-main),
.lg-left-main > :not(.lg-logo),
.rg-left > :not(.rg-left-main),
.rg-left-main > :not(.rg-logo){ display:none !important; }
.lg-left-main,
.rg-left-main{
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}
.lg-logo,
.rg-logo{
    min-height:0 !important;
    display:flex !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
}
.lg-logo img,
.rg-logo img{
    display:block !important;
    width:220px !important;
    max-width:70vw !important;
    height:auto !important;
    margin:0 !important;
}

/* ---------- La tarjeta ---------- */
.lg-right,
.rg-right{
    min-height:0 !important;
    max-height:none !important;
    display:block !important;
    padding:36px clamp(22px,5vw,40px) 30px !important;
    border:0 !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 30px 80px rgba(0,0,0,.35) !important;
    overflow:visible !important;
}
.lg-right-inner{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
}
.lg-top,
.rg-top{ text-align:center !important; }

@media (max-width:520px){
    body{ padding:28px 12px !important; justify-content:flex-start !important; }
    .lg-right,
    .rg-right{ padding:28px 18px 24px !important; border-radius:18px !important; }
    .lg-logo img,
    .rg-logo img{ width:180px !important; }
}

/* ---------- Registro: buscar DNI con solo el icono, dentro del campo ---------- */
.rg-dni-wrap{ grid-template-columns:minmax(0,1fr) 50px !important; }
.rg-btn-dni{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    margin:auto 5px auto 0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:10px !important;
    background:#030E30 !important;
    background-color:#030E30 !important;
    color:#fff !important;
    align-self:center !important;
}
.rg-btn-dni i{ color:#FFC400 !important; font-size:15px !important; }
.rg-btn-dni:hover{ background:#10204f !important; background-color:#10204f !important; }
/* La pagina tiene reglas viejas que al pasar el mouse pintan la lupa de
   azul oscuro: sobre el boton azul desaparecia. Aqui manda la lupa
   amarilla en todos los estados. */
.rg-btn-dni:hover i,
.rg-btn-dni:focus-visible i{ color:#FFC400 !important; }
.rg-btn-dni:hover,
.rg-btn-dni:focus-visible{ border:0 !important; color:#fff !important; }
.rg-btn-dni:disabled{
    background:#030E30 !important;
    background-color:#030E30 !important;
    opacity:.7 !important;
}
.rg-btn-dni:disabled i{ color:#FFC400 !important; }

/* =========================================================
   LOGIN MAS FINO
   Letra Inter con pesos ligeros, campos y botones mas bajos, bordes
   de 1px suaves y sombras discretas. Solo la pantalla de entrar.
========================================================= */
.lg-wrap,
.lg-wrap input,
.lg-wrap button,
.lg-wrap a{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
    -webkit-font-smoothing:antialiased;
}
.lg-wrap{ width:min(420px,100%) !important; }
.lg-logo img{ width:190px !important; }
.lg-right{
    padding:32px 30px 24px !important;
    border-radius:18px !important;
    box-shadow:0 24px 60px rgba(0,0,0,.28) !important;
}
.lg-top{ margin-bottom:22px !important; }
.lg-top h2{
    font-size:22px !important;
    font-weight:600 !important;
    letter-spacing:-.015em !important;
    color:#0f172a !important;
}
.lg-campo{ margin-bottom:14px !important; }
.lg-campo label{
    margin-bottom:6px !important;
    color:#334155 !important;
    font-size:12.5px !important;
    font-weight:500 !important;
}
.lg-input-wrap .lg-inp,
.lg-inp{
    height:44px !important;
    min-height:44px !important;
    border:1px solid #e2e8f0 !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#0f172a !important;
    font-size:14.5px !important;
    font-weight:400 !important;
    box-shadow:none !important;
}
.lg-inp::placeholder{ color:#94a3b8 !important; font-weight:400 !important; }
.lg-inp:focus{
    border-color:#0f172a !important;
    box-shadow:0 0 0 3px rgba(15,23,42,.08) !important;
}
.lg-input-icon,
.lg-eye{ color:#a3adbd !important; font-size:14px !important; }
.lg-links{ margin:2px 0 16px !important; }
.lg-link{ font-size:12.5px !important; font-weight:500 !important; color:#475569 !important; }
.lg-btn{
    height:44px !important;
    min-height:44px !important;
    border-radius:10px !important;
    background:#0b1535 !important;
    font-size:14px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    box-shadow:none !important;
}
.lg-btn:hover{ background:#16224d !important; }
.lg-btn i{ font-size:13px !important; }
.lg-olvide,
.lg-olvide-datos{
    margin-top:14px !important;
    color:#64748b !important;
    font-size:13px !important;
    font-weight:400 !important;
}
.lg-olvide-datos{ margin-top:8px !important; }
.lg-btn-registro{
    height:42px !important;
    min-height:42px !important;
    margin-top:14px !important;
    border:1px solid #dbe1ea !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#0f172a !important;
    font-size:13.5px !important;
    font-weight:500 !important;
}
.lg-btn-registro:hover{ border-color:#0f172a !important; background:#f8fafc !important; }
.lg-foot-right{ margin-top:16px !important; color:#a3adbd !important; font-size:11.5px !important; font-weight:400 !important; }

/* ---------- Ingresar con huella o rostro ---------- */
.lg-llave-o{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:14px 0 10px;
    color:#94a3b8;
    font-size:12px;
}
.lg-llave-o[hidden],
.lg-llave[hidden],
.lg-llave-aviso[hidden]{ display:none !important; }
.lg-llave{
    width:100%;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:1px solid #dbe1ea;
    border-radius:10px;
    background:#f8fafc;
    color:#0f172a;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:background-color .18s ease, border-color .18s ease;
}
.lg-llave i{ font-size:17px; color:#0b1535; }
.lg-llave:hover{ background:#eef2f7; border-color:#0f172a; }
.lg-llave:disabled{ opacity:.7; cursor:progress; }
.lg-llave-aviso{
    margin:10px 0 0;
    padding:9px 12px;
    border-radius:9px;
    background:#fef2f2;
    color:#b91c1c;
    font-size:12.5px;
    line-height:1.45;
    text-align:center;
}

/* =========================================================
   LOGIN COMPACTO
   Sin etiquetas encima de los campos (el texto de cada campo ya dice
   que va), pasos cortos entre bloques, los dos enlaces de "olvide"
   en una sola linea y "Ir al sitio web" al pie, junto al registro.
========================================================= */
.lg-right{ padding:26px 26px 18px !important; }
.lg-top{ margin-bottom:16px !important; }
.lg-top h2{ font-size:20px !important; }

.lg-form{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    row-gap:0 !important;
    justify-content:center !important;
    column-gap:6px !important;
}
.lg-form > *{ flex:0 0 100%; min-width:0; }

.lg-campo{ margin-bottom:10px !important; }
.lg-campo label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    white-space:nowrap !important;
}
.lg-input-wrap .lg-inp,
.lg-inp{ height:42px !important; min-height:42px !important; font-size:14px !important; }

.lg-btn{ height:42px !important; min-height:42px !important; margin-top:4px !important; }
.lg-llave-o{ margin:8px 0 !important; }
.lg-llave{ height:42px; font-size:13.5px; }
.lg-llave i{ font-size:16px; }

/* Los dos caminos para recuperar la contraseña, en una fila. */
.lg-olvide,
.lg-olvide-datos{
    flex:0 0 auto !important;
    margin-top:12px !important;
    font-size:12.5px !important;
}
.lg-olvide-datos i{ display:none !important; }
.lg-olvide-datos::before{ content:"·"; margin-right:6px; color:#cbd5e1; }

.lg-btn-registro{ height:40px !important; min-height:40px !important; margin-top:12px !important; }

.lg-links{
    order:10;
    display:flex !important;
    justify-content:center !important;
    margin:12px 0 0 !important;
}
.lg-link{ font-size:12px !important; color:#64748b !important; }
.lg-link i{ font-size:11px !important; }
.lg-foot-right{ margin-top:6px !important; font-size:11px !important; }

@media (max-width:520px){
    .lg-right{ padding:22px 18px 16px !important; }
}

/* ---------- Un poco mas alto ----------
   Compacto habia quedado chato: se devuelve algo de aire vertical,
   con campos y botones un poco mas altos y la tarjeta mas angosta.
   Los dos enlaces de recuperar no caben en una linea: cada uno en
   la suya, sin el punto que quedaba suelto. */
.lg-wrap{ width:min(400px,100%) !important; }
.lg-right{ padding:34px 30px 24px !important; }
.lg-top{ margin-bottom:22px !important; }
.lg-campo{ margin-bottom:14px !important; }
.lg-input-wrap .lg-inp,
.lg-inp{ height:48px !important; min-height:48px !important; }
.lg-btn{ height:48px !important; min-height:48px !important; margin-top:8px !important; }
.lg-llave-o{ margin:12px 0 !important; }
.lg-llave{ height:48px; }
.lg-olvide,
.lg-olvide-datos{ flex:0 0 100% !important; text-align:center !important; justify-content:center !important; }
.lg-olvide{ margin-top:18px !important; }
.lg-olvide-datos{ margin-top:8px !important; }
.lg-olvide-datos::before{ content:none; }
.lg-btn-registro{ height:46px !important; min-height:46px !important; margin-top:18px !important; }
.lg-links{ margin:18px 0 0 !important; }
.lg-foot-right{ margin-top:8px !important; }