/* =============================================================
   LOGIN INSTITUCIONAL DIF LEÓN — plantilla común para todos los sistemas
   -------------------------------------------------------------
   Para usarlo en otro sistema: copia este archivo y la estructura de
   login.html; solo cambia los textos marcados con "EDITAR" en el HTML.
   Los colores se ajustan aquí, en :root.
   ============================================================= */

:root {
    --dif-azul: #0095ff;          /* azul del logotipo */
    --dif-azul-hover: #0084e3;
    --dif-azul-medio: #0868c4;
    --dif-azul-oscuro: #0a3d7a;
    --dif-azul-noche: #072a55;
    --dif-celeste: #5cc4ff;
    --dif-texto: #1b2540;
    --dif-texto-suave: #6b7490;
    --dif-borde: #e3e7f1;
    --dif-fondo: #f2f4f9;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--dif-fondo);
    font-family: Poppins, Helvetica, Arial, sans-serif;
    color: var(--dif-texto);
    -webkit-font-smoothing: antialiased;
}

.lg-wrap { min-height: 100vh; display: flex; }

/* =================== PANEL INSTITUCIONAL =================== */
.lg-panel {
    flex: 0 0 54%;
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 60px 68px 44px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(155deg, var(--dif-azul-noche) 0%, var(--dif-azul-oscuro) 45%, var(--dif-azul-medio) 100%);
}
/* Círculos decorativos */
.lg-panel::before,
.lg-panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.lg-panel::before {
    width: 720px;
    height: 720px;
    right: -260px;
    bottom: -300px;
    background: rgba(255, 255, 255, .07);
}
.lg-panel::after {
    width: 360px;
    height: 360px;
    right: 120px;
    top: -200px;
    background: rgba(0, 149, 255, .18);
}
.lg-panel > * { position: relative; z-index: 1; }

.lg-logo {
    width: 128px;
    height: 128px;
    border-radius: 26px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5);
}
.lg-logo img { width: 92px; height: auto; }

.lg-contenido { margin-top: auto; margin-bottom: auto; padding: 40px 0; max-width: 640px; }
.lg-contenido h1 {
    font-size: 46px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 18px;
    color: #fff;
}
.lg-contenido .lg-lead {
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 38px;
    max-width: 560px;
}

.lg-puntos { list-style: none; margin: 0; padding: 0; }
.lg-puntos li { display: flex; align-items: center; margin-bottom: 20px; font-size: 16px; color: rgba(255, 255, 255, .95); }
.lg-puntos li:last-child { margin-bottom: 0; }
.lg-puntos .ico {
    flex: 0 0 62px;
    height: 62px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 26px;
    color: #fff;
}

.lg-pie-panel .barras { display: flex; gap: 10px; margin-bottom: 18px; }
.lg-pie-panel .barras span { width: 60px; height: 7px; border-radius: 7px; }
.lg-pie-panel .barras span:nth-child(1) { background: var(--dif-celeste); }
.lg-pie-panel .barras span:nth-child(2) { background: #ffffff; }
.lg-pie-panel .barras span:nth-child(3) { background: var(--dif-azul); }
.lg-pie-panel p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .7); }

/* =================== TARJETA DE ACCESO =================== */
.lg-lado-form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 28px;
}
.lg-tarjeta {
    width: 100%;
    max-width: 660px;
    background: #fff;
    border-radius: 30px;
    border: 1px solid #edf0f6;
    box-shadow: 0 30px 70px -40px rgba(7, 42, 85, .35);
    padding: 52px 50px 40px;
}

.lg-pildora {
    display: inline-block;
    background: #e7f3ff;
    color: var(--dif-azul-oscuro);
    font-size: 14px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.lg-tarjeta h2 { font-size: 36px; font-weight: 700; margin: 0 0 8px; color: var(--dif-texto); letter-spacing: -.01em; }
.lg-tarjeta .lg-sub { font-size: 17px; color: var(--dif-texto-suave); margin: 0 0 38px; }

.lg-campo { margin-bottom: 24px; }
.lg-campo label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--dif-texto); }
.lg-control {
    display: flex;
    align-items: center;
    height: 66px;
    background: #fff;
    border: 1.5px solid var(--dif-borde);
    border-radius: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.lg-control:focus-within { border-color: var(--dif-azul); box-shadow: 0 0 0 4px rgba(0, 149, 255, .12); }
.lg-control.error { border-color: #f1416c; box-shadow: 0 0 0 4px rgba(241, 65, 108, .1); }
.lg-control > i { font-size: 24px; color: #5f6886; margin-left: 22px; }
.lg-control:focus-within > i { color: var(--dif-azul); }
.lg-control input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0 18px;
    font-size: 17px;
    font-family: inherit;
    color: var(--dif-texto);
}
.lg-control input::placeholder { color: #a9b0c4; }
.lg-ojo {
    border: 0;
    background: transparent;
    color: #8a92ab;
    font-size: 24px;
    height: 100%;
    padding: 0 22px;
    cursor: pointer;
}
.lg-ojo:hover, .lg-ojo:focus { color: var(--dif-azul); outline: none; }
.lg-mayus { display: none; margin-top: 8px; font-size: 13px; color: #c46a12; }
.lg-mayus.visible { display: block; }

.lg-boton {
    width: 100%;
    height: 66px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--dif-azul-medio) 0%, var(--dif-azul) 100%);
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    margin-top: 6px;
    box-shadow: 0 14px 28px -14px rgba(0, 149, 255, .85);
    transition: filter .15s, transform .05s, box-shadow .15s;
}
.lg-boton:hover { filter: brightness(1.06); }
.lg-boton:active { transform: translateY(1px); }
.lg-boton:focus { outline: none; box-shadow: 0 0 0 4px rgba(0, 149, 255, .28); }
.lg-boton[disabled] { opacity: .8; cursor: wait; }
.lg-boton .flecha { font-size: 22px; transition: transform .15s; }
.lg-boton:hover .flecha { transform: translateX(3px); }
.lg-boton .girar {
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: lg-girar .7s linear infinite;
}
.lg-boton.cargando .girar { display: inline-block; }
.lg-boton.cargando .flecha { display: none; }
@keyframes lg-girar { to { transform: rotate(360deg); } }

.lg-alerta {
    display: none;
    align-items: flex-start;
    gap: 10px;
    background: #fff4f7;
    border: 1px solid #ffd3df;
    color: #b4174e;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    margin-bottom: 24px;
}
.lg-alerta.visible { display: flex; }
.lg-alerta i { font-size: 20px; line-height: 1.1; }
.lg-alerta.exito { background: #e9fbf3; border-color: #bfeed8; color: #0d8558; }

.lg-nota {
    margin-top: 30px;
    background: #f5f7fb;
    border-radius: 16px;
    padding: 18px 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--dif-texto-suave);
}
.lg-nota i { color: #8a92ab; margin-right: 4px; font-size: 16px; vertical-align: -2px; }

.lg-icono-2fa {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: #e7f3ff;
    color: var(--dif-azul);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 22px;
}
.lg-icono-2fa i { font-size: 36px; }
.lg-control input.codigo { text-align: center; font-size: 26px; font-weight: 600; letter-spacing: .5em; padding-left: calc(18px + .5em); }
.lg-volver { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 14px; font-weight: 500; color: var(--dif-texto-suave); text-decoration: none; }
.lg-volver:hover { color: var(--dif-azul); text-decoration: none; }

.lg-copy { margin-top: 28px; text-align: center; font-size: 14px; color: var(--dif-texto-suave); }
.lg-copy b { color: var(--dif-texto); font-weight: 600; }

.lg-paso { animation: lg-aparecer .25s ease-out; }
@keyframes lg-aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* =================== RESPONSIVO =================== */
@media (max-width: 1399.98px) {
    .lg-panel { padding: 48px 52px 36px; }
    .lg-contenido h1 { font-size: 38px; }
    .lg-contenido .lg-lead { font-size: 17px; }
    .lg-tarjeta { padding: 44px 40px 34px; }
}
@media (max-width: 991.98px) {
    .lg-wrap { flex-direction: column; }
    .lg-panel { flex: none; padding: 26px 22px; flex-direction: row; align-items: center; }
    .lg-logo { width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0; }
    .lg-logo img { width: 46px; }
    .lg-contenido { margin: 0 0 0 16px; padding: 0; }
    .lg-contenido h1 { font-size: 21px; margin: 0; }
    .lg-contenido .lg-lead, .lg-puntos, .lg-pie-panel { display: none; }
    .lg-panel::before { width: 300px; height: 300px; right: -120px; bottom: -200px; }
    .lg-panel::after { display: none; }
    .lg-lado-form { align-items: flex-start; padding: 22px 16px 32px; }
    .lg-tarjeta { padding: 30px 22px 26px; border-radius: 24px; }
    .lg-tarjeta h2 { font-size: 28px; }
    .lg-tarjeta .lg-sub { font-size: 15px; margin-bottom: 28px; }
    .lg-control, .lg-boton { height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-paso, .lg-boton .girar { animation: none; }
}