/* =============================================================================================
   Login de empresa (Account/Login -> LoginPOOS) con el estilo de LoginEmpresaPage de MAUI
   + captcha propio — 18/Oct/2026, Jara. Lienzo "Login de empresa web POOS – como MAUI".
   ============================================================================================= */
body.lg-body {
    margin: 0;
    background: #F4F5F7;
    font-family: 'Figtree', 'Source Sans Pro', system-ui, sans-serif;
    color: #172B4D;
}
.lg { min-height: 100vh; display: flex; flex-wrap: wrap; }
.lg a:focus-visible, .lg button:focus-visible { outline: 2px solid #2296F3; outline-offset: 2px; }

/* ---------- Panel de marca ---------- */
.lg-marca {
    flex: 1 1 420px; min-width: 0; box-sizing: border-box;
    background: #1B2B4B; color: #FFFFFF;
    padding: 56px 56px 40px;
    display: flex; flex-direction: column; gap: 28px;
}
.lg-marca-logo { width: 150px; height: auto; display: block; }
.lg-marca-cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 18px; max-width: 520px; }
.lg-marca h1 { margin: 0; font-size: 44px; line-height: 1.1; font-weight: 800; color: #FFFFFF; }
.lg-marca p { margin: 0; font-size: 17px; line-height: 1.6; color: #D5DCE8; }
.lg-marca-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.lg-boton-pastilla {
    height: 48px; padding: 0 22px; border-radius: 24px; box-sizing: border-box;
    display: inline-flex; align-items: center; font-weight: 700; font-size: 15px; text-decoration: none !important;
}
.lg-boton-pastilla.azul { background: #2296F3; color: #FFFFFF !important; }
.lg-boton-pastilla.azul:hover { background: #1976D2; }
.lg-boton-pastilla.borde { border: 1px solid rgba(255,255,255,.45); color: #FFFFFF !important; }
.lg-boton-pastilla.borde:hover { background: rgba(255,255,255,.1); }
.lg-redes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lg-red {
    width: 44px; height: 44px; border-radius: 22px; background: rgba(255,255,255,.1); color: #FFFFFF !important;
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none !important;
}
.lg-red:hover { background: rgba(255,255,255,.2); }
.lg-redes-espacio { flex: 1 1 auto; }
.lg-redes-firma { font-size: 13px; color: #AEB8CA; }

/* ---------- Formulario (LoginEmpresaPage) ---------- */
.lg-form-zona {
    flex: 999 1 480px; min-width: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; padding: 48px 24px;
}
.lg-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.lg-isotipo {
    width: 110px; height: 110px; border-radius: 26px; background: #FFFFFF; align-self: center;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(27,43,75,.08);
}
.lg-isotipo img { width: 86px; height: 86px; display: block; }
.lg-subtitulo { margin: 6px 0 14px; text-align: center; font-size: 17px; color: #172B4D; }

.lg-aviso {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
    background: #FDECEA; color: #A8281E; font-size: 14px; font-weight: 600;
}
.lg-aviso i { margin-top: 2px; }
.lg-aviso ul { margin: 0; padding: 0; list-style: none; }
.lg-aviso .validation-summary-errors { margin: 0; }

.lg-etiqueta { font-size: 13px; font-weight: 700; color: #3A4458; margin: 0 0 -8px; }
.lg-campo {
    height: 50px; width: 100%; box-sizing: border-box; border: 0; border-radius: 12px;
    background: #EAECF0; padding: 0 16px; font-size: 16px; color: #172B4D; font-family: inherit;
}
.lg-campo::placeholder { color: #6B7280; }
.lg-campo:focus { outline: 2px solid #2296F3; outline-offset: 1px; background: #E4E7EC; }
.lg-password { position: relative; }
.lg-password .lg-campo { padding-right: 52px; }
.lg-ver {
    position: absolute; right: 3px; top: 3px; width: 44px; height: 44px; border: 0; border-radius: 10px;
    background: transparent; color: #5B6475; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.lg-ver:hover { color: #172B4D; }

.lg-captcha { display: flex; gap: 10px; align-items: stretch; }
.lg-captcha-img {
    flex: 0 0 170px; width: 170px; height: 50px; border-radius: 12px; border: 1px solid #DDE2EA; box-sizing: border-box;
    background: #FFFFFF; display: block; object-fit: cover; user-select: none;
}
.lg-captcha-otro {
    flex: 0 0 50px; height: 50px; border: 1px solid #DDE2EA; border-radius: 12px; background: #FFFFFF;
    color: #1B2B4B; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.lg-captcha-otro:hover { border-color: #1B2B4B; }
.lg-captcha .lg-campo { flex: 1 1 auto; min-width: 0; padding: 0 14px; letter-spacing: 2px; text-transform: uppercase; }
.lg-ayuda { font-size: 12px; color: #5B6475; margin-top: -6px; }

.lg-entrar {
    margin-top: 14px; height: 50px; border: 0; border-radius: 12px; background: #2296F3; color: #FFFFFF;
    font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.lg-entrar:hover { background: #1976D2; }
.lg-entrar:disabled { opacity: .7; cursor: wait; }
.lg-pie { display: flex; justify-content: flex-end; margin-top: 6px; font-size: 11px; color: #6B7280; }

/* ---------- Teléfono ---------- */
@media (max-width: 767.98px) {
    .lg { flex-direction: column-reverse; flex-wrap: nowrap; }
    .lg-form-zona { flex: 1 0 auto; padding: 40px 20px 24px; align-items: flex-start; }
    .lg-marca { flex: 0 0 auto; padding: 24px 20px 28px; gap: 16px; }
    .lg-marca-logo, .lg-marca p { display: none; }
    .lg-marca h1 { font-size: 24px; }
    .lg-marca-cuerpo { gap: 10px; }
    .lg-captcha { flex-wrap: wrap; }
    .lg-captcha-img { flex: 1 1 170px; }
    .lg-captcha .lg-campo { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .lg * { transition: none !important; }
}