/* Login del cliente (login.html). Usa las variables y botones de css/landing.css. */
.lg { background: var(--lp-fondo); }
.lg-pantalla { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.lg-marca { position: relative; overflow: hidden; color: #fff; padding: 2.4rem 3rem; display: flex; flex-direction: column;
    background: radial-gradient(900px 500px at 90% -10%, #2a5bd7 0%, transparent 60%), linear-gradient(160deg, var(--lp-azul) 0%, var(--lp-azul-2) 60%, #0e2a63 100%); }
.lg-marca > * { position: relative; }
.lg-marca .lp-logo { align-self: flex-start; }
.lg-marca-txt { margin: auto 0; max-width: 520px; }
.lg-marca h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; margin-bottom: 1.6rem; }
.lg-marca ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.lg-marca li { display: flex; gap: .8rem; align-items: center; color: rgba(255,255,255,.85); }
.lg-marca li i { flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: var(--lp-naranja-2); }
.lg-estado { display: flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 1rem 1.2rem; max-width: 460px; }
.lg-estado div { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .78rem; color: rgba(255,255,255,.7); }
.lg-estado div i { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.lg-estado div.on i { background: #22c55e; color: #fff; box-shadow: 0 0 0 6px rgba(34,197,94,.18); }
.lg-estado b { flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.6)); margin-bottom: 1.3rem; position: relative; overflow: hidden; }
.lg-estado b::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffb26b, transparent); animation: lg-luz 2.2s linear infinite; }
@keyframes lg-luz { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.lg-form-lado { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.2rem; position: relative; }
.lg-volver { position: absolute; top: 1.6rem; left: 1.8rem; color: var(--lp-gris); font-weight: 600; font-size: .9rem; }
.lg-volver:hover { color: var(--lp-texto); }
.lg-card { width: 100%; max-width: 420px; background: #fff; border-radius: 24px; padding: 2.2rem 2rem; box-shadow: 0 30px 60px -40px rgba(11,31,74,.55); border: 1px solid var(--lp-borde); }
.lg-logo-movil { display: none; margin-bottom: 1.4rem; }
.lg-card h2 { font-size: 1.6rem; margin-bottom: .3rem; }
.lg-sub { color: var(--lp-gris); margin-bottom: 1.4rem; }
.lg-card label { display: block; font-size: .8rem; font-weight: 700; color: #475569; margin: .9rem 0 .35rem; }
.lg-campo { position: relative; display: flex; align-items: center; border: 1.5px solid var(--lp-borde); border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.lg-campo:focus-within { border-color: var(--lp-primario); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.lg-campo > i { width: 44px; text-align: center; color: #94a3b8; }
.lg-campo input { flex: 1; border: 0; outline: 0; background: transparent; padding: .8rem .9rem .8rem 0; font-size: 1rem; color: var(--lp-texto); min-width: 0; }
.lg-ojo { border: 0; background: none; width: 44px; color: #94a3b8; }
.lg-ojo:hover { color: var(--lp-texto); }
.lg-fila { display: flex; align-items: center; gap: .5rem; margin: .7rem 0 1.3rem; }
.lg-mayus { font-size: .78rem; color: #b45309; font-weight: 600; }
.lg-link { border: 0; background: none; padding: 0; color: var(--lp-primario); font-weight: 700; font-size: .88rem; }
.lg-link:hover { text-decoration: underline; }
.lg-pie { text-align: center; color: var(--lp-gris); margin: 1.2rem 0 0; font-size: .92rem; }
.lg-pie a { color: var(--lp-primario); font-weight: 700; }
.lg-msj { border-radius: 12px; padding: .7rem .9rem; font-size: .9rem; font-weight: 600; margin-bottom: .4rem; }
.lg-msj.error { background: #fef2f2; color: #b91c1c; }
.lg-msj.ok { background: #f0fdf4; color: #15803d; }
.lg-msj.info { background: #eff6ff; color: #1d4ed8; }
.lg-card button[disabled] { opacity: .75; cursor: progress; }
.lg-gira { width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: lg-gira .7s linear infinite; }
@keyframes lg-gira { to { transform: rotate(360deg); } }
.lg-legal { margin-top: 1.4rem; font-size: .82rem; color: var(--lp-gris); }
.lg-legal a { color: var(--lp-gris); }
.lg-sacude { animation: lg-sacude .35s; }
@keyframes lg-sacude { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

@media (max-width: 991px) {
    .lg-pantalla { grid-template-columns: 1fr; }
    .lg-marca { display: none; }
    .lg-logo-movil { display: inline-flex; }
    .lg-volver { position: static; align-self: flex-start; margin-bottom: 1rem; }
    .lg-form-lado { justify-content: flex-start; padding-top: 1.4rem; }
    .lg-card { padding: 1.8rem 1.3rem; }
}
.lg-recordar { display: flex !important; align-items: center; gap: .55rem; font-weight: 600 !important; font-size: .88rem !important; color: var(--lp-texto) !important; margin: -.4rem 0 1.2rem !important; cursor: pointer; }
.lg-recordar[hidden] { display: none !important; }
.lg-recordar input { width: 18px; height: 18px; accent-color: var(--lp-primario); }
#cdCodigo { letter-spacing: .5em; font-size: 1.4rem; font-weight: 700; font-family: ui-monospace, Menlo, monospace; }

/* Aviso legal (abre el modal de js/terminos.js) */
.lg-legal-nota { display: flex; gap: .5rem; align-items: flex-start; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--lp-borde); font-size: .8rem; color: var(--lp-gris); line-height: 1.5; }
.lg-legal-nota > i { color: #94a3b8; margin-top: .15rem; }
.lg-legal-nota .tc-link { font-size: inherit; font-weight: 700; text-decoration: none; }
.lg-legal-nota .tc-link:hover { text-decoration: underline; }
.lg-legal a:hover { color: var(--lp-texto); }
.lg-cbg { display: block; margin-top: .45rem; font-size: .76rem; opacity: .85; }
#lgIr i { margin-right: .3rem; }

/* Celular: franja de marca arriba y la tarjeta encima */
.lg-movil-cab { display: none; }
@media (max-width: 991px) {
    .lg-form-lado { position: relative; overflow: hidden; }
    .lg-movil-cab { display: block; position: absolute; inset: 0 0 auto 0; height: 230px; overflow: hidden;
        background: radial-gradient(500px 260px at 90% -20%, #2a5bd7 0%, transparent 60%), linear-gradient(160deg, var(--lp-azul) 0%, var(--lp-azul-2) 70%); }
    .lg-movil-cab .lp-hero-fondo { position: absolute; inset: 0; }
    .lg-movil-cab .lp-hero-fondo span { opacity: .3; }
    .lg-volver { position: relative; top: auto; left: auto; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.2rem; color: rgba(255,255,255,.85); }
    .lg-volver:hover { color: #fff; }
    .lg-card { position: relative; box-shadow: 0 30px 60px -30px rgba(11,31,74,.45); }
    .lg-legal { position: relative; }
}