/*
 * Inicio de sesión (login.jsp) — diseño "puerto nocturno".
 * Fondo a pantalla completa, marca y propuesta a la izquierda, tarjeta de vidrio a la derecha.
 * Fondo: img/login-fondo.webp (puerto al atardecer). Emblema: img/logo-emblema.png.
 */

body.auth-login {
    margin: 0;
    min-height: 100vh;
    background: #04101f;
    color: #e6eefb;
    font-family: 'Inter', system-ui, sans-serif;
    overflow-x: hidden;
}

.lg-escena {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(540px, 39%);
    align-items: center;
    gap: 3vw;
    padding: 4.5rem 2.5vw 3rem 5.4vw;
    box-sizing: border-box;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(3, 12, 26, 0.92) 0%, rgba(3, 12, 26, 0.72) 32%, rgba(3, 12, 26, 0.25) 55%, rgba(3, 12, 26, 0.35) 100%),
        linear-gradient(180deg, rgba(3, 12, 26, 0.35) 0%, rgba(3, 12, 26, 0) 30%, rgba(3, 12, 26, 0.55) 100%),
        url('../img/login-fondo.webp') center / cover no-repeat,
        #04101f;
}


/* ── Barra superior ── */
.lg-barra {
    position: absolute;
    top: 2.2rem;
    right: 2.6vw;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    z-index: 5;
}
.lg-inicio {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
}
.lg-inicio:hover { color: #67e8f9; }
.lg-barra-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.35); }
.lg-tema { display: inline-flex; gap: 6px; }
.lg-tema button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    background: transparent;
    color: #e6eefb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lg-tema button[aria-pressed="true"] {
    border-color: rgba(56, 189, 248, 0.85);
    background: rgba(14, 116, 144, 0.25);
    color: #ffffff;
}
.lg-tema .lg-ico { width: 20px; height: 20px; }

.lg-ico { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Izquierda: marca y propuesta ── */
.lg-izquierda { max-width: 640px; }

.lg-marca {
    display: inline-flex;
    align-items: center;
    gap: 1.1rem;
    color: #ffffff;
    text-decoration: none;
}
.lg-marca-emblema { width: 128px; height: 128px; display: inline-flex; color: #ffffff; }
.lg-marca-emblema .lg-emblema,
.lg-marca-emblema img { width: 100%; height: 100%; object-fit: contain; }
.lg-marca-sep { width: 2px; height: 74px; background: rgba(255, 255, 255, 0.55); }
.lg-marca-texto { display: flex; flex-direction: column; gap: 0.25rem; }
.lg-marca-nombre {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #ffffff;
}
.lg-marca-nombre span { color: #3ec6ff; }
.lg-marca-sub {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    color: #e6eefb;
    padding-left: 0.2rem;
}

.lg-linea {
    width: 110px;
    height: 4px;
    border-radius: 4px;
    margin: 3.6rem 0 1.6rem;
    background: linear-gradient(90deg, #22d3ee, #38bdf8);
}

.lg-titulo {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(2.1rem, 3.2vw, 2.85rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 1.4rem;
}
.lg-titulo span {
    background: linear-gradient(90deg, #22d3ee, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lg-texto {
    font-size: 0.93rem;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.86);
    max-width: 540px;
    margin: 0 0 3.2rem;
}

.lg-rasgos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
}
.lg-rasgos li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.9rem;
    min-width: 150px;
}
.lg-rasgos li:first-child { padding-left: 0; }
.lg-rasgos li + li { border-left: 1.5px solid rgba(255, 255, 255, 0.28); }
.lg-rasgo-ico {
    width: 40px;
    height: 40px;
    color: #38bdf8;
    margin-bottom: 0.7rem;
}
.lg-rasgos strong { font-size: 0.92rem; font-weight: 700; color: #ffffff; margin-bottom: 0.3rem; }
.lg-rasgos span { font-size: 0.79rem; color: rgba(203, 213, 225, 0.85); line-height: 1.35; max-width: 160px; }

/* ── Derecha: tarjeta de vidrio ── */
.lg-derecha {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding-top: 2rem;
}

.lg-tarjeta {
    width: 100%;
    max-width: 610px;
    box-sizing: border-box;
    padding: 1.6rem 2rem 1.3rem;
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(14, 33, 62, 0.72), rgba(6, 18, 38, 0.66));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    text-align: center;
}

.lg-tarjeta-logo {
    width: 92px;
    height: 92px;
    margin: 0 auto 0.85rem;
    border-radius: 18px;
    background: rgba(6, 18, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}
.lg-tarjeta-logo .lg-emblema,
.lg-tarjeta-logo img { width: 72px; height: 72px; object-fit: contain; }

.lg-tarjeta-titulo {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
}
.lg-tarjeta-titulo span { color: #3ec6ff; }
.lg-tarjeta-lema { font-size: 1rem; font-weight: 600; color: #ffffff; margin: 0.45rem 0 0; }
.lg-tarjeta-sub { font-size: 0.84rem; color: rgba(226, 232, 240, 0.9); margin: 0.35rem 0 1.3rem; }

.lg-form { text-align: left; }
.lg-campo { margin-bottom: 0.95rem; }

.lg-etiqueta-fila { display: flex; align-items: center; justify-content: space-between; }
.lg-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.45rem 0.2rem;
}
.lg-etiqueta .lg-ico { width: 22px; height: 22px; color: #ffffff; }
.lg-enlace { color: #3ec6ff; font-weight: 600; font-size: 0.86rem; text-decoration: none; margin-bottom: 0.6rem; }
.lg-enlace:hover { text-decoration: underline; }

.lg-entrada {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    border-radius: 12px;
    background: rgba(6, 18, 38, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.38);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lg-entrada:focus-within { border-color: #38bdf8; }
.lg-entrada-ico { width: 20px; height: 20px; color: #7dd3fc; margin-left: 0.95rem; }
.lg-entrada input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 0.86rem;
    padding: 0 0.8rem 0 0.75rem;
}
.lg-entrada :is(input, select, .lg-select-boton):is(:focus, :focus-visible, :hover) {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* Autocompletado del navegador: sin fondo celeste */
.lg-entrada input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    transition: background-color 9999s ease 0s;
}
.lg-entrada input::placeholder { color: rgba(203, 213, 225, 0.65); }
.lg-ver-clave {
    border: 0;
    background: transparent;
    color: #cbd5e1;
    padding: 0 1.1rem;
    height: 100%;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.lg-ver-clave .lg-ico { width: 22px; height: 22px; }
.lg-ver-clave:hover { color: #67e8f9; }

.lg-captcha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; align-items: center; }
.lg-captcha-img { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.lg-captcha-img img {
    display: block;
    flex: 1;
    min-width: 0;
    height: 50px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.38);
    background: #04101f;
}
.lg-captcha-refrescar {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.38);
    padding: 0;
    background: rgba(6, 18, 38, 0.55);
    color: #7dd3fc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lg-captcha-refrescar:hover { border-color: #38bdf8; color: #ffffff; }
.lg-captcha-refrescar .lg-ico { width: 20px; height: 20px; }
.lg-entrada--captcha { height: 50px; }
.lg-entrada--captcha input { padding-left: 1.1rem; text-transform: uppercase; }
.lg-entrada--captcha input::placeholder { text-transform: none; }


.lg-boton {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    font: inherit;
    font-size: 0.97rem;
    font-weight: 700;
    color: #0b1b30;
    background: linear-gradient(90deg, #22d3ee 0%, #38bdf8 50%, #3b82f6 100%);
    box-shadow: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}
.lg-boton:hover { filter: brightness(0.95); }
.lg-boton:active { transform: translateY(1px); }
.lg-boton .lg-ico { width: 22px; height: 22px; }

.lg-pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    font-size: 0.72rem;
    color: #e2e8f0;
}
.lg-pie .lg-ico { width: 18px; height: 18px; color: #38bdf8; }
.lg-pie-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.35); margin: 0 0.6rem; }

.lg-registro { margin: 0; font-size: 0.88rem; color: #e2e8f0; }
.lg-registro a { color: #3ec6ff; font-weight: 600; text-decoration: none; margin-left: 0.3rem; }
.lg-registro a:hover { text-decoration: underline; }

/* ── Registro de empresa en la misma página (js/login-registro.js) ── */
.lg-derecha [hidden] { display: none !important; }
.lg-pila { display: grid; width: 100%; max-width: 610px; }
.lg-pila > .lg-tarjeta { grid-area: 1 / 1; display: flex; flex-direction: column; }
.lg-pila > .lg-tarjeta[hidden] { display: flex !important; visibility: hidden; animation: none; }
.lg-pila .lg-form { flex: 1; display: flex; flex-direction: column; }
.lg-pila .lg-hueco { flex: none; }
.lg-pila .lg-form > :is(.lg-campo, .lg-fila-2):not(:has(+ .lg-hueco)) { flex-grow: 1; }
.lg-tarjeta { animation: lg-aparecer 0.25s ease; }
@keyframes lg-aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lg-ver-clave svg { width: 22px; height: 22px; }
.lg-ver-clave.activo { color: #67e8f9; }

.lg-fila-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }
.lg-entrada-accion {
    flex-shrink: 0;
    height: calc(100% - 12px);
    margin-right: 6px;
    padding: 0 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.38);
    border-radius: 9px;
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.lg-entrada-accion:hover { border-color: #38bdf8; color: #ffffff; }
.lg-entrada-accion:focus-visible { outline: 2px solid #38bdf8; outline-offset: 1px; }
.lg-entrada-accion:disabled { opacity: 0.6; cursor: wait; }
.lg-entrada input[readonly] { color: #a5f3fc; }

.lg-select-nativo { display: none; }
.lg-select-boton {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 0.86rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2.4rem 0 0.9rem;
    cursor: pointer;
}
.lg-entrada--select.abierta::after { transform: translateY(2px) rotate(225deg); }
.lg-select-lista {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 12px;
    background: rgba(8, 22, 44, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.lg-select-lista li {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.86rem;
    color: #e2e8f0;
    cursor: pointer;
}
.lg-select-lista li.activo { background: rgba(56, 189, 248, 0.16); color: #ffffff; }
.lg-select-lista li[aria-selected="true"] { color: #7dd3fc; font-weight: 600; }
.lg-entrada--select::after {
    content: "";
    position: absolute;
    right: 1rem;
    width: 8px;
    height: 8px;
    border-right: 2px solid #7dd3fc;
    border-bottom: 2px solid #7dd3fc;
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
}

.lg-ayuda { margin: 0.35rem 0 0 0.2rem; font-size: 0.72rem; color: rgba(203, 213, 225, 0.8); }
#regRucAyuda { margin: -0.55rem 0 0.85rem 0.2rem; }
@media (min-width: 601px) {
    /* RUC (con botón Validar) un poco más ancho que la razón social */
    #registroLoginForm > .lg-fila-2:first-child { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.lg-ayuda--ok { color: #34d399; }
.lg-ayuda--aviso { color: #fbbf24; }
.lg-ayuda--error { color: #f87171; }

.lg-hueco { height: 1.9rem; margin: -0.2rem 0 0.35rem; }
.lg-fuerza { visibility: hidden; }
/* Solo se ve con la tarjeta de registro a la vista (la tarjeta oculta usa visibility: hidden) */
.lg-tarjeta:not([hidden]) .lg-fuerza.visible { visibility: visible; }
.lg-fuerza-barra { height: 5px; border-radius: 999px; background: rgba(148, 163, 184, 0.25); overflow: hidden; }
.lg-fuerza-barra span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.2s ease; }
.lg-fuerza-barra span.debil { background: #f87171; }
.lg-fuerza-barra span.media { background: #fbbf24; }
.lg-fuerza-barra span.fuerte { background: #34d399; }

/* Validación: borde rojo y texto bajo el campo, sin mover nada */
.lg-error {
    position: absolute;
    left: 0.2rem;
    right: 0;
    top: calc(100% + 3px);
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.1;
    color: #f87171;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.lg-error:empty { display: none; }
.lg-entrada.lg-invalido,
.lg-entrada.lg-invalido:focus-within { border-color: #f87171; }
.lg-entrada.lg-invalido .lg-entrada-ico { color: #f87171; }
/* La fuerza de la clave va bajo la columna de la clave; bajo el email queda su mensaje de error */
@media (min-width: 601px) {
    .lg-fuerza > * { margin-left: calc(50% + 0.375rem); }
}

/* ── Recuperar contraseña (misma página) ── */
.lg-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.lg-pasos li { display: flex; align-items: center; gap: 1rem; }
.lg-paso-ico {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.45);
    background: rgba(14, 116, 144, 0.18);
    color: #38bdf8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lg-paso-ico .lg-ico { width: 22px; height: 22px; }
.lg-pasos strong { display: block; font-size: 0.95rem; font-weight: 700; color: #ffffff; }
.lg-pasos small { display: block; font-size: 0.8rem; color: rgba(203, 213, 225, 0.85); margin-top: 0.15rem; }

.lg-tarjeta-titulo--accion { font-size: 1.7rem; }
/* El espacio sobrante se reparte arriba y abajo del email: queda centrado */
.lg-pila .lg-espaciador { flex: 1 1 0; }
.lg-aviso { margin: 0.2rem 0 0; font-size: 0.76rem; line-height: 1.35; color: rgba(203, 213, 225, 0.85); }
.lg-aviso--ok { color: #34d399; }
.lg-aviso--error { color: #f87171; }

.lg-seguro {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 0.9rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: rgba(6, 18, 38, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.32);
    text-align: left;
}
.lg-seguro-ico { width: 34px; height: 34px; color: #38bdf8; flex-shrink: 0; }
.lg-seguro div { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.lg-seguro strong { font-size: 0.8rem; font-weight: 700; color: #ffffff; }
.lg-seguro span { font-size: 0.72rem; color: rgba(203, 213, 225, 0.85); line-height: 1.35; }
.lg-seguro-candado { width: 20px; height: 20px; color: #e2e8f0; flex-shrink: 0; }

/* ── Modo claro: misma escena; la tarjeta pasa a vidrio claro ── */
:root:not(.dark) .lg-tarjeta {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(236, 243, 255, 0.86));
    border-color: rgba(56, 189, 248, 0.7);
}
:root:not(.dark) .lg-tarjeta :is(.lg-tarjeta-titulo, .lg-etiqueta, .lg-etiqueta .lg-ico) { color: #001a3d; }
:root:not(.dark) .lg-tarjeta :is(.lg-tarjeta-sub, .lg-pie) { color: #43474d; }
:root:not(.dark) .lg-tarjeta .lg-tarjeta-lema { color: #001a3d; }
:root:not(.dark) .lg-tarjeta .lg-error { color: #dc2626; }
:root:not(.dark) .lg-tarjeta .lg-seguro { background: #ffffff; border-color: #c4e1ff; }
:root:not(.dark) .lg-tarjeta .lg-seguro strong { color: #001a3d; }
:root:not(.dark) .lg-tarjeta :is(.lg-seguro span, .lg-aviso:not([class*="--"])) { color: #43474d; }
:root:not(.dark) .lg-tarjeta .lg-seguro-ico { color: #0072c6; }
:root:not(.dark) .lg-tarjeta .lg-seguro-candado { color: #64748b; }
:root:not(.dark) .lg-tarjeta .lg-aviso--ok { color: #059669; }
:root:not(.dark) .lg-tarjeta .lg-aviso--error { color: #dc2626; }
:root:not(.dark) .lg-tarjeta .lg-entrada.lg-invalido { border-color: #ef4444; }
:root:not(.dark) .lg-tarjeta-titulo span,
:root:not(.dark) .lg-tarjeta .lg-enlace { color: #0072c6; }
:root:not(.dark) .lg-tarjeta :is(.lg-entrada, .lg-captcha-refrescar, .lg-captcha-img img) { background: #ffffff; border-color: #c4e1ff; }
:root:not(.dark) .lg-tarjeta .lg-captcha-refrescar { color: #0072c6; }
:root:not(.dark) .lg-tarjeta .lg-entrada input:-webkit-autofill { -webkit-text-fill-color: #001a3d; caret-color: #001a3d; }
:root:not(.dark) .lg-tarjeta :is(.lg-entrada input, .lg-select-boton) { color: #001a3d; }
:root:not(.dark) .lg-tarjeta .lg-entrada input[readonly] { color: #0b3566; }
:root:not(.dark) .lg-tarjeta .lg-select-lista { background: #ffffff; border-color: #c4e1ff; box-shadow: 0 18px 40px rgba(0, 26, 61, 0.15); }
:root:not(.dark) .lg-tarjeta .lg-select-lista li { color: #001a3d; }
:root:not(.dark) .lg-tarjeta .lg-select-lista li.activo { background: #e8f3ff; }
:root:not(.dark) .lg-tarjeta .lg-select-lista li[aria-selected="true"] { color: #0072c6; }
:root:not(.dark) .lg-tarjeta .lg-entrada-accion { background: #e8f3ff; border-color: #c4e1ff; color: #0072c6; }
:root:not(.dark) .lg-tarjeta .lg-ayuda:not([class*="--"]) { color: #43474d; }
:root:not(.dark) .lg-tarjeta .lg-entrada input::placeholder { color: #74777e; }
:root:not(.dark) .lg-tarjeta :is(.lg-entrada-ico, .lg-pie .lg-ico) { color: #0072c6; }
:root:not(.dark) .lg-tarjeta :is(.lg-ver-clave) { color: #64748b; }
:root:not(.dark) .lg-tarjeta-logo { background: #001a3d; border-color: transparent; }

/* Escritorio: todo en una pantalla, sin desplazamiento */
@media (min-width: 1101px) {
    body.auth-login { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
    .lg-escena { height: auto; min-height: 100vh; }
}

/* Laptops angostas: la tarjeta conserva su ancho y la columna izquierda se ajusta */
@media (min-width: 1101px) and (max-width: 1400px) {
    .lg-escena { gap: 2vw; padding-left: 3.5vw; }
    .lg-rasgos li { padding: 0 1rem; min-width: 0; flex: 1 1 0; }
    .lg-rasgos li:first-child { padding-left: 0; }
}

/* Pantallas bajas: escala compacta */
@media (min-width: 1101px) and (max-height: 860px) {
    .lg-escena { padding-top: 3.4rem; padding-bottom: 1.2rem; }
    .lg-marca-emblema { width: 104px; height: 104px; }
    .lg-marca-nombre { font-size: 2.15rem; }
    .lg-linea { margin: 2.2rem 0 1.1rem; }
    .lg-titulo { font-size: clamp(1.8rem, 2.8vw, 2.35rem); margin-bottom: 1rem; }
    .lg-texto { margin-bottom: 2rem; font-size: 0.85rem; }
    .lg-tarjeta { padding: 1.1rem 1.8rem 0.9rem; }
    .lg-tarjeta-logo { width: 70px; height: 70px; margin-bottom: 0.65rem; }
    .lg-tarjeta-logo img { width: 56px; height: 56px; }
    .lg-tarjeta-titulo { font-size: 1.95rem; }
    .lg-tarjeta-titulo--accion { font-size: 1.5rem; }
    .lg-seguro { margin-bottom: 0.7rem; padding: 0.5rem 0.9rem; }
    .lg-pasos { gap: 0.8rem; }
    .lg-tarjeta-sub { margin-bottom: 1rem; }
    .lg-campo { margin-bottom: 0.65rem; }
    .lg-etiqueta { margin-bottom: 0.35rem; }
    .lg-entrada, .lg-entrada--captcha, .lg-captcha-img img, .lg-captcha-refrescar { height: 44px; }
    .lg-captcha-refrescar { width: 44px; }
    .lg-boton { height: 46px; }
    .lg-pie { margin-top: 0.6rem; }
    .lg-derecha { gap: 0.8rem; padding-top: 2.6rem; }
}


/* Pantallas de 720 px o menos: menos margen inferior para que la tarjeta entre sin scroll */
@media (min-width: 1101px) and (max-height: 720px) {
    .lg-escena { padding-bottom: 0.4rem; }
}

/* Laptops con poca altura útil (p. ej. 1366x768 con la barra del navegador): elementos algo menores, mismas separaciones */
@media (min-width: 1101px) and (max-height: 680px) {
    .lg-escena { padding-top: 3rem; }
    .lg-derecha { padding-top: 2.2rem; }
    .lg-tarjeta { padding-top: 0.9rem; }
    .lg-tarjeta-logo { width: 56px; height: 56px; }
    .lg-tarjeta-logo img { width: 44px; height: 44px; }
    .lg-tarjeta-titulo { font-size: 1.7rem; }
    .lg-tarjeta-titulo--accion { font-size: 1.35rem; }
    .lg-entrada, .lg-entrada--captcha, .lg-captcha-img img, .lg-captcha-refrescar { height: 40px; }
    .lg-captcha-refrescar { width: 40px; }
    .lg-boton { height: 42px; }
    .lg-marca-emblema { width: 92px; height: 92px; }
    .lg-marca-nombre { font-size: 1.95rem; }
    .lg-linea { margin: 1.6rem 0 1rem; }
}

/* Tablet y celular: una sola columna */
@media (max-width: 1100px) {
    .lg-escena {
        grid-template-columns: 1fr;
        padding: 5.5rem 1.25rem 2.5rem;
        gap: 2.5rem;
        justify-items: center;
        background-position: center, center, 65% center, center, center;
    }
    .lg-izquierda { text-align: center; }
    .lg-marca { justify-content: center; }
    .lg-linea, .lg-texto { margin-left: auto; margin-right: auto; }
    .lg-rasgos { justify-content: center; flex-wrap: wrap; row-gap: 1.2rem; }
    .lg-rasgos li:first-child { padding-left: 1.9rem; }
    .lg-derecha { width: 100%; padding-top: 0; }
    .lg-barra { top: 1.2rem; right: 1.25rem; }
}

@media (max-width: 600px) {
    .lg-marca-emblema { width: 72px; height: 72px; }
    .lg-marca-sep { height: 44px; }
    .lg-marca-nombre { font-size: 1.58rem; }
    .lg-titulo { font-size: 1.85rem; }
    .lg-rasgos li { padding: 0 0.9rem; min-width: 0; flex: 1 1 30%; }
    .lg-rasgos li:first-child { padding-left: 0.9rem; }
    .lg-tarjeta { padding: 1.5rem 1.25rem 1.2rem; border-radius: 22px; }
    .lg-tarjeta-titulo { font-size: 1.36rem; }
    .lg-entrada-ico { margin-left: 1rem; }
    .lg-fila-2 { grid-template-columns: 1fr; gap: 0; }
}

/* auth.css pone el body del acceso en flex: la escena ocupa todo el ancho */
body.auth-login > .lg-escena { flex: 1 1 auto; width: 100%; }