/* ============================================================
   ESAAB LabPoint — Login modo CLARO "SmartLab"
   Namespace lp-*  ·  carga DESPUÉS de style2.css y Bootstrap,
   EN LUGAR de login-v3.css cuando el tema activo es claro.
   Reutiliza la estructura/markup del login (mismas clases lp-*)
   y el JS (login-sinapsis.js) sin cambios. Solo cambia la piel.
   Fuentes: Sora (display) + Hanken Grotesk (UI).
   Paleta clara: azul #1b56d6, navy #0b2e63, cian #18b9c9/#4db8e6,
   texto #14263d/#5a6b82, superficies #ffffff/#f4f7fb, borde #d7e0ec.
   ============================================================ */

:root {
    --lp-blue:        #1b56d6;
    --lp-blue-700:    #0b2e63;
    --lp-teal:        #18b9c9;
    --lp-cyan:        #4db8e6;
    --lp-cyan-glow:   #18b9c9;

    --lp-navy:        #14263d;   /* texto principal */
    --lp-text-2:      #4a5d76;   /* texto secundario */
    --lp-muted:       #8395ac;   /* placeholder/label reposo */
    --lp-line:        #e6edf6;

    --lp-surface:     #ffffff;
    --lp-surface-2:   #f4f7fb;
    --lp-border:      #d7e0ec;

    --lp-danger:      #c4342f;

    --lp-font-display:'Sora', 'Segoe UI', system-ui, sans-serif;
    --lp-font-body:   'Hanken Grotesk', 'Segoe UI', Roboto, Arial, sans-serif;

    --lp-card-r:      22px;
}

/* ---- Reset base ---- */
.lp-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--lp-font-body);
    font-size: 16px;
    color: var(--lp-navy);
    background: #eef3f9 !important;
    overflow-x: hidden;
    background-image: none !important;
}

/* ================================================================
   ATMÓSFERA FULL-BLEED (clara)
   ================================================================ */
.lp-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Foto de laboratorio real (Unsplash, libre de uso) como base del fondo */
    background: #eef3f9 url("../img/login/lab-bg.jpg") center center / cover no-repeat;
    pointer-events: none;
}

/* Capa 1: VELO blanco sobre la foto — centro casi blanco (tarjeta y textos
   legibles), bordes translúcidos para que el laboratorio se vea y dé impacto. */
.lp-stage-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 84% at 50% 42%,
            rgba(255,255,255,0.80) 0%,
            rgba(255,255,255,0.64) 26%,
            rgba(255,255,255,0.38) 60%,
            rgba(255,255,255,0.14) 100%),
        linear-gradient(180deg, rgba(238,244,251,0.16) 0%, rgba(228,236,247,0.05) 100%);
}

/* Capa hexagonal molecular (tenue, mitad superior) */
.lp-stage-mesh::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/login/smartlab-hex.svg") repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 45%, transparent 70%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 45%, transparent 70%);
    pointer-events: none;
    /* Deriva lenta de la red hexagonal (un tile = 300x260) — fondo con vida */
    animation: lp-hex-drift 90s linear infinite;
}

/* Grid técnico muy tenue */
.lp-stage-mesh::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(27,86,214,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27,86,214,.04) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 0%, transparent 75%);
    pointer-events: none;
}

/* Canvas molecular animado — visible en claro (login-sinapsis.js recolorea las
   partículas a azul ESAAB según la clase lp-light del body). */
#lp-canvas {
    opacity: 0.45;
}

/* Capa 3: onda azul inferior izquierda + viñeteado claro muy suave */
.lp-stage-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* Onda azul (ancho completo, base inferior) + maquinaria de laboratorio tenue */
    background:
        url("../img/login/smartlab-wave.svg") left bottom / 100% clamp(400px, 48vh, 560px) no-repeat;
}

/* ================================================================
   LAYOUT RAÍZ
   ================================================================ */
/* Columna de página: empuja la barra inferior al fondo del viewport */
.lp-body form {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.lp-root {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: clamp(24px, 5vh, 56px);
    padding-bottom: clamp(16px, 3vh, 40px);
    padding-left: clamp(16px, 4vw, 32px);
    padding-right: clamp(16px, 4vw, 32px);
    box-sizing: border-box;
    overflow-y: auto;
}

/* ================================================================
   BLOQUE DE MARCA SMARTLAB (claro) — logo + Bienvenido
   ================================================================ */
/* ----------------------------------------------------------------
   BARRA DE MARCA — ESAAB izquierda / Siemens derecha (fija arriba).
   Sustituye al logo Siemens que antes se inyectaba por JS con
   position:fixed en px y que en móvil se montaba sobre el de ESAAB.
   pointer-events:none deja pasar el clic al contenido; las imágenes
   lo reactivan para conservar su tooltip.
   ---------------------------------------------------------------- */
.lp-brandbar {
    /* EN FLUJO (no fixed): el <form> ya es una columna de 100vh, así que la barra
       ocupa su fila arriba y .lp-root llena el resto. Con position:fixed había que
       compensar con padding-top en .lp-root y, en pantallas bajas (1366x768), la
       cabecera terminaba metiéndose DEBAJO de la barra. */
    position: relative;
    flex: 0 0 auto;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(10px, 1.4vw, 18px) clamp(14px, 3vw, 28px);
    /* Hueco a la derecha para el conmutador de tema (ese sí es fixed: 52px + margen) */
    padding-right: clamp(78px, 7vw, 100px);
    pointer-events: none;
    animation: lp-reveal 0.6s ease both;
}
.lp-brandbar img { pointer-events: auto; }

.lp-brandbar-esaab {
    /* Contraste para la "ESAAB" BLANCA del logo sobre el fondo claro:
       contorno + sombra oscura tenue (NO se modifica el asset del logo). */
    height: clamp(30px, 4.4vw, 64px);
    width: auto;
    filter:
        drop-shadow(0 0 1px rgba(10,26,54,.85))
        drop-shadow(0 1px 2px rgba(10,26,54,.65))
        drop-shadow(0 3px 12px rgba(10,26,54,.35));
}

.lp-brandbar-siemens {
    height: clamp(18px, 2.4vw, 34px);
    width: auto;
}

.lp-sl-head {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(4px, 0.5vw, 8px);
    /* Sube el bloque en desktop; en móvil queda en 0 (más discreto) */
    margin-top: clamp(-20px, 20px - 2.8vw, 0px);
    margin-bottom: clamp(12px, 1.4vw, 20px);
    animation: lp-reveal 0.6s ease both;
}

.lp-sl-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.lp-sl-brand {
    font-family: var(--lp-font-display);
    font-weight: 700;
    /* Fluido: ~1.35rem móvil → 2.2rem desktop (+5px) */
    font-size: clamp(1.35rem, 2.3vw, 2.2rem);
    line-height: 1.0;
    letter-spacing: -0.01em;
    margin-top: 0;
}
.lp-sl-brand-lab   { color: var(--lp-blue-700); }
.lp-sl-brand-point { color: var(--lp-teal); }

.lp-sl-sub {
    font-family: var(--lp-font-body);
    /* Fluido: ~0.72rem móvil → ~1.05rem desktop (+5px) */
    font-size: clamp(0.72rem, 1.05vw, 1.05rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--lp-text-2);
}

.lp-sl-welcome {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.1;
    color: var(--lp-blue-700);
    margin: clamp(4px, 0.8vw, 10px) 0 0;
}

.lp-sl-welcome-sub {
    font-family: var(--lp-font-body);
    font-size: .95rem;
    color: var(--lp-text-2);
    margin: 2px 0 0;
}

/* ================================================================
   PANEL + TARJETA — VIDRIO CLARO
   ================================================================ */
.lp-panel {
    width: 100%;
    max-width: 460px;
    background: transparent;
    position: relative;
}

.lp-card {
    width: 100%;
    max-width: 440px;
    background-color: rgba(255,255,255,.92);
    border-radius: var(--lp-card-r);
    padding: clamp(24px, 3.5vh, 40px) clamp(22px, 3vw, 34px);
    position: relative;
    z-index: 1;
    border: 1px solid var(--lp-border);
    box-shadow:
        0 20px 50px rgba(20,38,61,.12),
        0 2px 8px rgba(20,38,61,.06);
    animation: lp-card-reveal 0.65s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 200ms;
}

@supports (backdrop-filter: blur(1px)) {
    .lp-card {
        backdrop-filter: blur(14px) saturate(1.2);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        background-color: rgba(255,255,255,.86);
    }
}

/* Sin borde neón animado ni corner-brackets en claro */
.lp-card::before { content: none !important; }
.lp-card::after  { content: none !important; }

/* Encabezado interno de la tarjeta: oculto (el hero "Bienvenido" lo sustituye) */
.lp-card-head { display: none; }

/* ================================================================
   CAMPOS (claro)
   ================================================================ */
.lp-field-wrap {
    position: relative;
    margin-bottom: 16px;
    animation: lp-reveal 0.5s ease both;
    animation-delay: calc(260ms + var(--i, 0) * 60ms);
}

.lp-label {
    position: absolute;
    left: 46px;
    top: 50%;
    transform: translateY(-25%);
    font-family: var(--lp-font-body);
    font-size: .95rem;
    font-weight: 400;
    color: var(--lp-text-2);
    pointer-events: none;
    transition: top .18s ease, transform .18s ease, font-size .18s ease, color .18s ease, letter-spacing .18s ease;
    transform-origin: left top;
    white-space: nowrap;
    z-index: 2;
    line-height: 1;
}

.lp-label-float,
.lp-field-wrap:not(.lp-select-wrap):focus-within .lp-label,
.lp-field-wrap.lp-has-value .lp-label,
input.lp-input:not(:placeholder-shown) ~ .lp-label,
input.lp-input:focus ~ .lp-label,
.lp-select-wrap:focus-within .lp-label,
.lp-select-wrap.lp-has-options .lp-label,
.lp-select-wrap.lp-has-value .lp-label {
    top: 6px;
    transform: translateY(0) scale(.75);
    font-size: .72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-blue);
}

.lp-field {
    position: relative;
    display: flex;
    align-items: flex-end;
    background: var(--lp-surface-2);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    transition: border-color .18s, box-shadow .18s, background .18s;
    overflow: visible;
    padding-top: 20px;
    padding-bottom: 6px;
    min-height: 56px;
}

.lp-field::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1.5px;
    width: 100%;
    background: linear-gradient(90deg, var(--lp-blue), var(--lp-cyan));
    border-radius: 0 0 12px 12px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.lp-field:focus-within {
    border-color: var(--lp-blue);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(27,86,214,.14);
}

.lp-field:focus-within::after {
    transform: scaleX(1);
}

.lp-ico {
    width: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--lp-blue);
    font-size: 1rem;
    padding-bottom: 4px;
    transition: color .18s, filter .18s;
    align-self: flex-end;
}

.lp-field:focus-within .lp-ico {
    color: var(--lp-blue);
    filter: drop-shadow(0 1px 4px rgba(27,86,214,.35));
}

.lp-input,
.lp-field input.lp-input,
.lp-field select.lp-input {
    flex: 1 1 auto;
    width: 100% !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: var(--lp-navy) !important;
    font-family: var(--lp-font-body) !important;
    font-size: .98rem !important;
    font-weight: 400 !important;
    padding: 0 12px 0 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    align-self: flex-end;
    line-height: 1.4;
}

.lp-input::placeholder { color: transparent !important; }

.lp-input::-ms-reveal,
.lp-input::-ms-clear { display: none !important; width: 0; height: 0; }

.lp-field input.lp-input,
.lp-field select.lp-input {
    background-color: transparent !important;
    color: var(--lp-navy) !important;
    border: 0 !important;
}

.lp-field select.lp-input { color-scheme: light; }
.lp-field select.lp-input option {
    background-color: #ffffff;
    color: var(--lp-navy);
}
.lp-field select.lp-input option:checked,
.lp-field select.lp-input option:hover {
    background-color: #eaf1ff;
    color: var(--lp-blue-700);
}

.lp-field input.lp-input:-webkit-autofill,
.lp-field input.lp-input:-webkit-autofill:hover,
.lp-field input.lp-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px #ffffff inset !important;
    -webkit-text-fill-color: var(--lp-navy) !important;
    caret-color: var(--lp-blue);
    transition: background-color 5000s ease-in-out 0s;
}

.lp-field.lp-select::after { content: none; }
.lp-field.lp-select input.lp-input,
.lp-field.lp-select select.lp-input { padding-right: 34px !important; }

/* Select nativo oculto (sigue en el POST) */
.lp-select-native {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- Widget custom select — trigger ---- */
.lp-cs-trigger {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    background: transparent;
    border: 0;
    outline: none;
    padding: 0 34px 0 0;
    margin: 0;
    cursor: pointer;
    color: var(--lp-navy);
    font-family: var(--lp-font-body);
    font-size: .98rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    align-self: flex-end;
    height: auto;
    position: relative;
}

.lp-cs-value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.lp-cs-trigger[data-placeholder="true"] .lp-cs-value { color: transparent; }
.lp-cs-trigger[data-placeholder="false"] .lp-cs-value { color: var(--lp-navy); }

.lp-cs-trigger::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 12px;
    height: 12px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b56d6' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .22s cubic-bezier(0.4,0,0.2,1);
}

.lp-cs-trigger[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); }

.lp-cs-trigger:focus-visible {
    outline: 2px solid var(--lp-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Widget custom select — panel ---- */
.lp-cs-panel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
    list-style: none;
    margin: 4px 0 0 0;
    padding: 6px 0;
    background: #ffffff;
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20,38,61,.16);
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    transform-origin: top center;
    animation: lp-cs-open .16s cubic-bezier(0.22,1,0.36,1) both;
}

.lp-cs-panel::-webkit-scrollbar { width: 6px; }
.lp-cs-panel::-webkit-scrollbar-track { background: #f0f4f9; border-radius: 99px; }
.lp-cs-panel::-webkit-scrollbar-thumb { background: #c2d2e6; border-radius: 99px; }
.lp-cs-panel::-webkit-scrollbar-thumb:hover { background: #1b56d6; }

.lp-cs-panel[hidden] { display: none; }

@keyframes lp-cs-open {
    from { opacity: 0; transform: scaleY(.92) translateY(-4px); }
    to   { opacity: 1; transform: scaleY(1) translateY(0); }
}

.lp-cs-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--lp-navy);
    font-family: var(--lp-font-body);
    font-size: .93rem;
    font-weight: 400;
    line-height: 1.4;
    transition: background .12s, color .12s;
    user-select: none;
    outline: none;
    border-left: 2px solid transparent;
}

.lp-cs-option[data-placeholder="true"] { color: var(--lp-text-2); font-style: italic; }

.lp-cs-option:hover,
.lp-cs-option.lp-cs-active {
    background: #eaf1ff;
    color: var(--lp-blue-700);
    border-left-color: var(--lp-blue);
}

.lp-cs-option[aria-selected="true"] {
    color: var(--lp-blue-700);
    border-left-color: var(--lp-blue);
    background: #f0f5ff;
}

.lp-cs-option[aria-selected="true"] .lp-cs-check {
    display: inline-block;
    color: var(--lp-blue);
    font-size: .85rem;
    flex-shrink: 0;
    margin-left: 8px;
}
.lp-cs-option .lp-cs-check { display: none; }

.lp-cs-option:focus {
    outline: 2px solid var(--lp-blue);
    outline-offset: -2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .lp-cs-trigger::after { transition: none; }
    .lp-cs-panel { animation: none; }
}

/* ---- Campo Laboratorio ---- */
.lp-lab-wrap { transition: opacity .3s ease, max-height .4s ease; overflow: hidden; }
.lp-lab-hint {
    font-family: var(--lp-font-body);
    font-size: .8rem;
    color: var(--lp-text-2);
    padding: 10px 14px 10px 46px;
    display: none;
}
.lp-lab-hint.is-visible { display: block; }

/* ---- Aviso Bloq Mayús ---- */
.lp-caps-warn {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    padding: 4px 10px 4px 12px;
    border-radius: 7px;
    background: #eef5ff;
    border: 1px solid #c9ddf7;
    color: var(--lp-blue-700);
    font-family: var(--lp-font-body);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.4;
}
.lp-caps-warn.is-visible { display: flex; }

/* ---- Botón ojo ---- */
.lp-eye {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--lp-muted);
    font-size: 1.05rem;
    width: 44px;
    flex: 0 0 44px;
    padding: 0 0 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    align-self: flex-end;
    transition: color .18s, filter .18s;
}
.lp-eye:hover,
.lp-eye[aria-pressed="true"] { color: var(--lp-blue); }
.lp-eye:focus,
.lp-eye:focus-visible {
    outline: 2px solid var(--lp-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ================================================================
   BOTÓN INGRESAR — gradiente azul→cian (igual lockup que el mockup)
   ================================================================ */
.lp-btn,
input.lp-btn[type="submit"],
input.lp-btn[type="button"] {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-family: var(--lp-font-body) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    /* Stop final más profundo + sombra: blanco mantiene contraste AA (>=4.5:1)
       en todo el ancho del rótulo (antes el extremo cian daba ~2.25:1). */
    background: linear-gradient(100deg, var(--lp-blue-700) 0%, var(--lp-blue) 52%, #1577b8 100%) !important;
    text-shadow: 0 1px 2px rgba(11,46,99,.50) !important;
    box-shadow: 0 10px 26px rgba(27,86,214,.32) !important;
    cursor: pointer !important;
    transition: filter .18s, transform .06s, box-shadow .18s !important;
    text-align: center !important;
    letter-spacing: 0.03em !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: 8px !important;
    animation: lp-reveal 0.5s ease both;
    animation-delay: calc(260ms + 3 * 60ms);
}

.lp-btn::before,
input.lp-btn::before {
    content: "";
    position: absolute !important;
    top: 0 !important;
    left: -80% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent) !important;
    transform: skewX(-20deg) !important;
    transition: left .38s ease !important;
    pointer-events: none !important;
}
.lp-btn:hover::before,
input.lp-btn:hover::before { left: 130% !important; }

.lp-btn:hover,
input.lp-btn:hover {
    filter: brightness(1.06) !important;
    box-shadow: 0 14px 34px rgba(27,86,214,.40) !important;
    color: #fff !important;
}
.lp-btn:active,
input.lp-btn:active { transform: translateY(1px) !important; }

.lp-btn:focus,
.lp-btn:focus-visible,
input.lp-btn:focus,
input.lp-btn:focus-visible {
    outline: 2px solid var(--lp-blue) !important;
    outline-offset: 3px !important;
}

.lp-btn.is-loading,
input.lp-btn.is-loading { pointer-events: none !important; opacity: .82 !important; }

.lp-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.5);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: lp-spin .65s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* ================================================================
   OLVIDÉ CONTRASEÑA
   ================================================================ */
.lp-forgot {
    text-align: center;
    margin-top: 14px;
    animation: lp-reveal 0.5s ease both;
    animation-delay: calc(260ms + 4 * 60ms);
}
.lp-forgot a {
    font-family: var(--lp-font-body);
    font-size: .88rem;
    font-weight: 600;
    color: var(--lp-blue);
    text-decoration: none;
    transition: color .15s;
}
.lp-forgot a:hover { color: var(--lp-blue-700); text-decoration: underline; }
.lp-forgot a:focus,
.lp-forgot a:focus-visible {
    outline: 2px solid var(--lp-blue);
    outline-offset: 2px;
    border-radius: 3px;
}

.lp-forgot-info {
    display: none;
    margin-top: 12px;
    padding: 12px 14px 12px 12px;
    border-radius: 10px;
    background: #f4f8ff;
    border: 1px solid #cfe0f7;
    align-items: flex-start;
    gap: 10px;
    animation: lp-reveal 0.3s ease both;
}
.lp-forgot-info.is-visible { display: flex; }
.lp-forgot-info-ico { flex: 0 0 auto; color: var(--lp-blue); font-size: 1rem; line-height: 1.5; }
.lp-forgot-info-text { flex: 1 1 auto; font-family: var(--lp-font-body); font-size: .87rem; line-height: 1.5; color: var(--lp-text-2); }
.lp-forgot-info-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 0 2px;
    cursor: pointer;
    color: #93a6bf;
    font-size: 1.1rem;
    line-height: 1;
    transition: color .15s;
    align-self: flex-start;
}
.lp-forgot-info-close:hover { color: var(--lp-blue); }
.lp-forgot-info-close:focus,
.lp-forgot-info-close:focus-visible {
    outline: 2px solid var(--lp-blue);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ================================================================
   ERROR
   ================================================================ */
.lp-error {
    display: none;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    background: #fdecec;
    border: 1px solid #f3c4c2;
    color: var(--lp-danger);
    font-family: var(--lp-font-body);
    font-size: .87rem;
    line-height: 1.45;
    margin-top: 14px;
}
.lp-error.lp-has-error { display: flex; }
.lp-error-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; color: var(--lp-danger); }

/* ================================================================
   ARIA-LIVE + FOOTER INTERNO (oculto en claro)
   ================================================================ */
.lp-live-region {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.lp-panel-footer { display: none; }

/* ================================================================
   ACCESOS DIRECTOS (decorativos) — Consumo / Consulta / Trazabilidad / Inventario
   ================================================================ */
.lp-sl-shortcuts {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: 26px;
    width: 100%;
    max-width: 480px;
    animation: lp-reveal 0.6s ease both;
    animation-delay: 420ms;
}

.lp-sl-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    position: relative;
    color: var(--lp-text-2);
}

.lp-sl-shortcut + .lp-sl-shortcut::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    height: 46px;
    width: 1px;
    background: #d7e0ec;
}

.lp-sl-shortcut i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--lp-border);
    color: var(--lp-blue);
    font-size: 1.35rem;
    box-shadow: 0 4px 12px rgba(20,38,61,.07);
}

.lp-sl-shortcut span {
    font-family: var(--lp-font-body);
    font-size: .82rem;
    font-weight: 500;
    color: var(--lp-text-2);
}

/* ================================================================
   TAGLINE SMARTLAB
   ================================================================ */
.lp-sl-tagline {
    text-align: center;
    margin-top: 26px;
    animation: lp-reveal 0.6s ease both;
    animation-delay: 500ms;
}
.lp-sl-tagline-brand {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -0.01em;
}
.lp-sl-tagline-brand .e { color: var(--lp-blue-700); }
.lp-sl-tagline-brand .s { color: var(--lp-teal); }
.lp-sl-tagline-sub {
    font-family: var(--lp-font-body);
    font-size: .92rem;
    color: var(--lp-text-2);
    margin-top: 2px;
}

/* ================================================================
   BARRA INFERIOR — Desarrollado por ZettaVision
   ================================================================ */
.lp-sl-bottombar {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    margin-top: 0;
    background: #0b1f44;
    color: #cdd9ea;
    font-family: var(--lp-font-body);
    font-size: .82rem;
    letter-spacing: 0.02em;
}
.lp-sl-bottombar img {
    height: 20px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .95;
}

/* (El botón conmutador de tema se estiliza inline en Login.aspx para
   adaptarse a ambos temas sin depender de esta hoja.) */

/* ================================================================
   ANIMACIONES
   ================================================================ */
@keyframes lp-hex-drift {
    from { background-position: 0 0; }
    to   { background-position: 300px 260px; }
}

@keyframes lp-reveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lp-card-reveal {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-sl-head, .lp-field-wrap, .lp-btn, input.lp-btn, .lp-forgot,
    .lp-card, .lp-sl-shortcuts, .lp-sl-tagline {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .lp-btn::before, input.lp-btn::before { transition: none; display: none; }
    .lp-stage-mesh::before { animation: none; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 559px) {
    /* padding-top deja libre la barra de marca fija (.lp-brandbar): en móvil el
       contenido arranca arriba (flex-start), así que sin este hueco el bloque
       "SmartLab" quedaría por debajo de los logos. */
    .lp-root { padding: 14px; justify-content: flex-start; }
    .lp-brandbar { padding: 8px 12px; padding-right: 84px; }
    /* Tamaños de marca ya son fluidos (clamp): en móvil caen al mínimo = discreto.
       Solo afinamos el espaciado del bloque para teléfonos. */
    .lp-sl-head { margin-top: 0; gap: 2px; margin-bottom: 10px; }
    .lp-sl-logo { gap: 2px; margin-bottom: 4px; }
    .lp-panel, .lp-card { max-width: 100%; }
    .lp-card { border-radius: 16px; padding: 22px 18px; }
    /* Ola DISCRETA en móvil: la valle de desktop es demasiado alta en pantallas
       angostas; aquí queda como una banda baja. */
    .lp-stage-grain { background-size: 100% clamp(120px, 18vh, 180px); }
    .lp-sl-shortcuts { flex-wrap: wrap; gap: 14px 0; }
    .lp-sl-shortcut { padding: 0 14px; }
    .lp-sl-shortcut i { width: 48px; height: 48px; font-size: 1.15rem; }
    .lp-btn, input.lp-btn { min-height: 48px !important; }
    .lp-eye { min-height: 48px; min-width: 48px; }
    .lp-forgot a { display: inline-block; min-height: 44px; line-height: 44px; }
}

/* --- Laptops de poca altura (1366x768 y similares) -----------------
   El objetivo es que en PC NUNCA haya scroll: se comprime el ritmo
   vertical para que todo entre. Se aplica solo a pantallas ANCHAS y
   bajas (min-width:560px): en móvil no aplica, porque ahí el espacio
   realmente falta y sí debe poder scrollear.
   padding-top se mantiene alto para no quedar bajo la barra de marca fija.
   ------------------------------------------------------------------ */
@media (min-width: 560px) and (max-height: 900px) {
    .lp-root { padding-top: 10px; padding-bottom: 10px; }
    .lp-sl-head { margin-top: 0; margin-bottom: 4px; }
    .lp-sl-logo { margin-bottom: 2px; gap: 2px; }
    .lp-sl-welcome { margin-top: 2px; }
    .lp-sl-shortcuts { margin-top: 10px; }
    .lp-sl-shortcut { gap: 4px; }
    .lp-sl-shortcut i { width: 44px; height: 44px; font-size: 1.1rem; }
    .lp-sl-tagline { margin-top: 10px; }
    .lp-sl-tagline-brand { font-size: 1.15rem; }
    .lp-sl-tagline-sub { font-size: .8rem; }
}

/* En laptops bajas la propia barra de marca (100px con el logo a 64px) es
   lo que hace desbordar. Se compacta SOLO aqui; en 1920x1080 los logos
   siguen a 64px porque esa pantalla no entra en este media query. */
@media (min-width: 560px) and (max-height: 900px) {
    .lp-brandbar { padding-top: 6px; padding-bottom: 6px; }
    .lp-brandbar-esaab { height: 46px; }
    .lp-brandbar-siemens { height: 26px; }
    .lp-sl-shortcut i { width: 40px; height: 40px; font-size: 1rem; }
}

/* Ajuste fino del tema claro: en 1366x768 se pasaba por 6px. Mismo recorte
   de respiros que ya tenía el tema oscuro. */
@media (min-width: 560px) and (max-height: 900px) {
    .lp-root { padding-bottom: 4px; }
    .lp-sl-tagline { margin-top: 4px; }
}

/* --- iOS Safari: alto de viewport REAL -----------------------------
   En iOS, 100vh NO es el area visible: es el viewport "grande" (el que
   queda con la barra de Safari retraida). Por eso la pagina medía mas
   que lo visible y asomaba el fondo (.lp-stage, que es position:fixed)
   POR DEBAJO del pie. 100dvh usa el viewport dinamico real, que si
   descuenta la barra.
   Se deja 100vh ANTES como fallback: los navegadores sin soporte de dvh
   ignoran la segunda declaracion y se quedan con la primera.
   overscroll-behavior-y:none corta ademas el rebote elastico de iOS,
   que al sobre-desplazar tambien dejaba ver el fondo fijo bajo el pie.
   ------------------------------------------------------------------ */
.lp-body {
    min-height: 100vh;
    min-height: 100dvh;
    overscroll-behavior-y: none;
}
.lp-body form {
    min-height: 100vh;
    min-height: 100dvh;
}

/* ================================================================
   ALTO DE VIEWPORT — 3 niveles (cascada: gana la ultima soportada)
   ----------------------------------------------------------------
   1) 100vh                        -> respaldo universal
   2) calc(var(--lp-vh,1vh) * 100) -> JS mide window.innerHeight (iOS < 15.4)
   3) 100dvh                       -> nativo moderno (iOS 15.4+, Chrome 108+)
   Si el JS no corre, var() cae a 1vh y el nivel 2 equivale al 1: nunca empeora.
   ================================================================ */
.lp-body,
.lp-body form {
    min-height: 100vh;
    min-height: calc(var(--lp-vh, 1vh) * 100);
    min-height: 100dvh;
}

/* --- BLINDAJE: que NUNCA se vea el fondo bajo el pie ---------------
   Independiente de vh/dvh y del navegador. Si por cualquier motivo queda
   area visible bajo el pie (rebote elastico de iOS, barra dinamica,
   redondeo de subpixel), este pseudo-elemento la pinta del color del pie
   en lugar de dejar asomar .lp-stage (que es position:fixed y cubre el
   viewport completo). El pie ya es position:relative, asi que ::after se
   ancla a el; al ser su hijo, pinta por encima de .lp-stage (z-index 0).
   ------------------------------------------------------------------ */
.lp-sl-bottombar {
    /* Blindaje con box-shadow, NO con un ::after posicionado: un pseudo-elemento
       absolute con top:100% APORTA area desplazable y agregaba un viewport entero
       de scroll. box-shadow es solo pintura: no afecta al layout ni al alto del
       documento.
       Offset 100vh + spread 100vh => cubre de forma CONTINUA desde el pie hacia
       abajo (con offset y sin spread quedaria un hueco intermedio).
       Se pinta en el contexto del pie (z-index:1), asi que tapa a .lp-stage (z0). */
    box-shadow: 0 100vh 0 100vh #0b1f44;
}