/* ──────────────────────────────────────────────────────────────────────────────
   SCRUM-2382 (fase 5) — Ingreso al sistema, diseño V5.

   Los estilos vienen del mockup aprobado (softopv5.netlify.app, clases .lg-*). La
   pantalla es la misma tarjeta en los dos pasos del ingreso: en loginOptica.php
   se muestra el paso 1 (elegir óptica) y en login.php el paso 2 (usuario y clave).
   El panel de marca es idéntico en ambos pasos (SCRUM-2552): mismo azul, mismo
   logo y la misma lista de características.

   Este archivo es autónomo a propósito: las dos páginas de ingreso no cargan el
   CSS del ERP, así que aquí van también las variables de color.
   ────────────────────────────────────────────────────────────────────────────── */

:root {
    --lg-blue: #009cd8;
    --lg-blue-ink: #0078b4;
    --lg-blue-deep: #00609c;
    --lg-blue-50: #e6f6fc;
    --lg-blue-100: #cceefa;
    --lg-cyan: #00bee6;
    --lg-ink-700: #2b3a4a;
    --lg-ink-500: #5b6b7c;
    --lg-ink-400: #7a8a9a;
    --lg-ink-300: #9fadbb;
    --lg-line: #e5ebf1;
    --lg-line-soft: #eef2f6;
    --lg-red: #e0524d;
    --lg-red-50: #fdecea;
}

/* Sin esto, el min-height de 100vh se suma al relleno del body (content-box es el valor por
   defecto) y la página sale 48px más alta que la ventana: aparece una barra de desplazamiento
   vertical que no lleva a ninguna parte. */
body.lg-body,
body.lg-body * {
    box-sizing: border-box;
}

body.lg-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(150deg, #00456e, #00609c 55%, #0091c9);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--lg-ink-700);
}

/* Variante clara (paso 2, login.php): fondo blanco y partículas azules. El script de partículas
   lee esta clase para elegir su paleta. La sombra de la tarjeta se aclara porque la de arriba
   está pensada para verse sobre el azul oscuro. */
body.lg-body--claro {
    background: #fff;
}

body.lg-body--claro .lg-card {
    box-shadow: 0 24px 60px rgba(0, 96, 156, .16), 0 0 0 1px var(--lg-line-soft);
}

/* Fondo animado: ocupa toda la ventana y se queda detrás de la tarjeta. Es decorativo, así que
   no intercepta el ratón — un clic siempre llega a lo que hay debajo del cursor. */
.lg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}

.lg-card {
    position: relative;
    z-index: 1;
    width: min(940px, 100%);
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(1, 30, 50, .35);
    display: grid;
    grid-template-columns: 42% 58%;
    min-height: 520px;
}

/*
 * Un elemento de rejilla mide como mínimo su contenido (`min-width: auto`), así que en una
 * pantalla estrecha la lista de ópticas ensanchaba la columna más allá de la tarjeta y el
 * `overflow: hidden` recortaba el borde derecho de cada fila. Con `min-width: 0` la columna manda
 * y el contenido se adapta.
 */
.lg-card > * {
    min-width: 0;
}

/* ── Panel de marca ─────────────────────────────────────────────────────────── */

.lg-brand {
    background: linear-gradient(150deg, var(--lg-blue-deep), var(--lg-blue) 62%, var(--lg-cyan));
    color: #fff;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    /* El bloque de marca va centrado verticalmente y pegado a la izquierda: repartido de arriba
       abajo se leía como contenido perdido en el espacio. */
    justify-content: center;
    align-items: flex-start;
    /* Separación entre el logo y el bloque de texto: el logo necesita aire para no leerse
       pegado al título. */
    gap: 42px;
    position: relative;
    overflow: hidden;
}

.lg-brand::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -110px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%);
}

.lg-brand img {
    width: 300px;
    max-width: 100%;
    height: auto;
    align-self: flex-start;
}

.lg-w {
    position: relative;
    z-index: 1;
}

.lg-brand h2 {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
    /* Mismo aire que hay entre el logo y este título (gap de .lg-brand). */
    margin: 0 0 42px;
    color: #fff;
}

.lg-brand p {
    font-size: 13.5px;
    color: #fff;
    opacity: .92;
    line-height: 1.55;
    max-width: 290px;
    margin: 0;
}

/* Las cuatro características que resumen el producto, con su check. */
.lg-feats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.lg-feats li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #fff;
    opacity: .95;
}

.lg-feats .ck {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: grid;
    place-items: center;
}

/* ── Panel de formulario ────────────────────────────────────────────────────── */

.lg-pane {
    padding: 44px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lg-eb {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--lg-blue-ink);
    font-weight: 800;
    margin-bottom: 6px;
}

.lg-pane h1 {
    font-size: 23px;
    color: var(--lg-blue-deep);
    font-weight: 800;
    margin: 0 0 5px;
    letter-spacing: -.01em;
}

.lg-sub {
    color: var(--lg-ink-400);
    font-size: 13px;
    margin-bottom: 22px;
}

/* ── Lista de ópticas guardadas ─────────────────────────────────────────────── */

/* Buscador de óptica: aparece sólo cuando la lista es larga. */
.lg-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .5rem .7rem;
    margin-bottom: 10px;
    border: 1.5px solid var(--lg-line);
    border-radius: 12px;
    background: var(--lg-line-soft);
}

.lg-search:focus-within {
    border-color: var(--lg-blue);
    background: #fff;
    box-shadow: 0 0 0 3px var(--lg-blue-50);
}

.lg-search .ic {
    flex: 0 0 auto;
    color: var(--lg-ink-300);
}

.lg-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--lg-ink-700);
    text-align: center;
}

/*
 * La lista de ópticas guardadas se desplaza en vez de crecer sin límite: con muchas ópticas la
 * tarjeta se estiraba hasta desbordar la pantalla y dejaba el botón de "Agregar nueva óptica"
 * fuera de la vista. El tope deja ver unas cuatro y media, para que se note que hay más abajo.
 */
.lg-list {
    max-height: 268px;
    overflow-y: auto;
    /* Espacio para que el desplazamiento no tape el borde de la opción enfocada. */
    padding-right: 4px;
    margin-right: -4px;
}

/*
 * Cuando la lista se desplaza, el último elemento visible queda cortado a media altura y eso se
 * lee como un fallo de maquetación. El degradado convierte el corte en la señal habitual de "hay
 * más abajo", y separa la lista del botón de agregar.
 */
.lg-listwrap {
    position: relative;
    margin-bottom: 10px;
}

.lg-listwrap.con-scroll::after {
    content: "";
    position: absolute;
    left: 0;
    right: 4px;
    bottom: 0;
    height: 42px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
    border-radius: 0 0 12px 12px;
}

.lg-list::-webkit-scrollbar {
    width: 8px;
}

.lg-list::-webkit-scrollbar-thumb {
    background: #d6dde5;
    border-radius: 999px;
}

.lg-list::-webkit-scrollbar-thumb:hover {
    background: var(--lg-ink-300);
}

.lg-sin {
    margin: 0 0 10px;
    padding: .8rem;
    text-align: center;
    font-size: 12.5px;
    color: var(--lg-ink-400);
}

.lg-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border: 1.5px solid var(--lg-line);
    border-radius: 14px;
    cursor: pointer;
    transition: .16s;
    margin-bottom: 10px;
    background: #fff;
    width: 100%;
    text-align: left;
    text-decoration: none;
}

.lg-opt:hover {
    border-color: var(--lg-blue);
    background: var(--lg-blue-50);
    transform: translateX(2px);
    text-decoration: none;
}

.lg-av {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--lg-blue-deep), var(--lg-blue));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    flex: 0 0 auto;
    overflow: hidden;
    padding: 8px;
}

.lg-opt .i {
    flex: 1;
    min-width: 0;
}

.lg-opt .i b {
    display: block;
    font-size: 14.5px;
    color: var(--lg-ink-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-opt .i span {
    font-size: 12px;
    color: var(--lg-ink-400);
}

.lg-opt .c {
    color: var(--lg-ink-300);
    font-size: 19px;
    transition: .16s;
}

.lg-opt:hover .c {
    color: var(--lg-blue);
    transform: translateX(3px);
}

.lg-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    border: 1.5px dashed var(--lg-line);
    background: #fff;
    color: var(--lg-blue-ink);
    border-radius: 14px;
    padding: 13px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: .16s;
    font-family: inherit;
}

.lg-add:hover {
    border-color: var(--lg-blue);
    background: var(--lg-blue-50);
}

.lg-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lg-blue-ink);
    font-weight: 700;
    font-size: 12.5px;
    background: none;
    border: 0;
    cursor: pointer;
    margin-bottom: 16px;
    padding: 0;
    text-decoration: none;
    font-family: inherit;
}

.lg-back:hover {
    text-decoration: underline;
    color: var(--lg-blue-ink);
}

/* ── Campos ─────────────────────────────────────────────────────────────────── */

.lg-f {
    margin-bottom: 15px;
}

.lg-f label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--lg-ink-500);
    margin-bottom: 6px;
}

.lg-in {
    position: relative;
}

.lg-in input {
    width: 100%;
    border: 1.5px solid var(--lg-line);
    border-radius: 12px;
    padding: 12px 14px 12px 42px;
    font-size: 14px;
    color: var(--lg-ink-700);
    transition: .15s;
    font-family: inherit;
    background: var(--lg-line-soft);
}

.lg-in input:focus {
    outline: 0;
    border-color: var(--lg-blue);
    background: #fff;
    box-shadow: 0 0 0 3px var(--lg-blue-50);
}

.lg-in .ic {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lg-ink-300);
    pointer-events: none;
}

.lg-in .eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--lg-ink-400);
    padding: 6px;
    border-radius: 8px;
}

.lg-in .eye:hover {
    background: var(--lg-line-soft);
}

.lg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 6px;
}

.lg-link {
    color: var(--lg-blue-ink);
    font-weight: 700;
    font-size: 12.5px;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
}

.lg-link:hover {
    text-decoration: underline;
    color: var(--lg-blue-ink);
}

.lg-btn {
    border: 0;
    border-radius: 12px;
    padding: 13px 26px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(120deg, var(--lg-blue), var(--lg-blue-ink));
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 156, 216, .35);
    transition: .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

.lg-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 11px 26px rgba(0, 156, 216, .45);
}

/* ── Avisos y pie ───────────────────────────────────────────────────────────── */

.lg-foot {
    margin-top: 24px;
    font-size: 11px;
    color: var(--lg-ink-300);
    text-align: center;
}

.lg-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 11px;
    border-radius: 12px;
    background: var(--lg-blue-50);
    color: var(--lg-blue-ink);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: .15s;
    border: 0;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
}

.lg-help:hover {
    background: var(--lg-blue-100);
    color: var(--lg-blue-deep);
    text-decoration: none;
}

.lg-tip {
    display: flex;
    gap: 10px;
    background: var(--lg-blue-50);
    border: 1px solid var(--lg-blue-100);
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 20px;
    font-size: 12.5px;
    color: var(--lg-ink-700);
    line-height: 1.5;
}

/* Error de credenciales: se muestra en la propia tarjeta, no sólo en un aviso emergente. */
.lg-error {
    display: flex;
    gap: 10px;
    background: var(--lg-red-50);
    border: 1px solid rgba(224, 82, 77, .25);
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 18px;
    font-size: 12.5px;
    color: #a3352f;
    line-height: 1.5;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
    .lg-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .lg-brand {
        padding: 24px 24px 28px;
    }

    /* En móvil el texto de marca sobra: se deja el logo y el paso. */
    .lg-brand .lg-w {
        display: none;
    }

    .lg-pane {
        padding: 28px 24px 32px;
    }

    .lg-row {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }

    .lg-btn {
        justify-content: center;
    }

    .lg-row .lg-link {
        text-align: center;
    }
}

/*
 * Móvil pequeño (320–430px). El bloque de 820px ya apila la tarjeta; aquí se recuperan los
 * milímetros que faltan en un teléfono estrecho.
 */
@media (max-width: 430px) {
    body.lg-body {
        padding: 12px 10px;
    }

    .lg-card {
        border-radius: 16px;
        box-shadow: 0 14px 34px rgba(1, 30, 50, .28);
    }

    .lg-brand {
        padding: 20px 18px 22px;
        gap: 0;
    }

    .lg-brand img {
        width: 200px;
    }

    .lg-pane {
        padding: 22px 18px 26px;
    }

    .lg-pane h1 {
        font-size: 20px;
    }

    /* Los 268px fijos se comen la pantalla en un 320x568 y dejan "Agregar nueva óptica" fuera
       de la vista. */
    .lg-list {
        max-height: min(268px, 42vh);
    }

    .lg-opt {
        gap: 10px;
        padding: 11px 12px;
    }

    .lg-av {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .lg-opt .i b {
        font-size: 13.5px;
    }

    /* Por debajo de 16px, Safari iOS hace zoom al enfocar el campo: es de ahí de donde sale el
       desplazamiento horizontal en el móvil. */
    .lg-in input {
        padding: 11px 12px 11px 38px;
        font-size: 16px;
    }

    .lg-btn {
        width: 100%;
        justify-content: center;
    }
}