/* ==========================================================================
   LOGIN · Planta Industrial Belén S.A.
   Escena animada (izquierda) + panel de acceso (derecha).
   Rendimiento: un solo SVG; solo se animan transform y opacity (acelerados
   por GPU); sin video, sin imagenes pesadas, sin filtros ni blur animados.
   Se pausa con la pestaña oculta y queda fija con "reducir movimiento".
   ========================================================================== */

.lg-body {
    --bl-green: #145a35;
    --bl-green-2: #0f4729;
    --bl-leaf: #9bd271;
    margin: 0;
    background: #0d1b2a;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

.lg-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    min-height: 100vh;
}

/* ---------------- Escena ---------------- */
.lg-scene-wrap { position: relative; overflow: hidden; min-height: 100vh; background: #0d1b2a; }
.login-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.lg-caption {
    position: absolute;
    left: clamp(20px, 4vw, 56px);
    top: clamp(20px, 5vh, 52px);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    max-width: 70%;
}
.lg-caption-name { font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; letter-spacing: .3px; }
.lg-caption-sub { font-size: 14px; opacity: .9; margin-top: 4px; }
.lg-status {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: rgba(5, 18, 33, .45); border: 1px solid rgba(255, 255, 255, .18); text-shadow: none;
}
.lg-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }

/* ---------------- Panel de acceso ---------------- */
.lg-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    box-shadow: -18px 0 50px rgba(0, 0, 0, .28);
    padding: 40px 48px 96px;
    z-index: 1;
    animation: lgPanelIn .5s ease-out both;
}
.lg-panel::before {               /* franja corporativa superior */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
    background: linear-gradient(90deg, var(--bl-green) 0 70%, var(--bl-leaf) 70% 100%);
}
.lg-panel-inner { width: 100%; max-width: 360px; margin: 0 auto; }

.lg-brand { text-align: center; margin-bottom: 18px; }
.lg-logo { width: 210px; height: auto; display: inline-block; }
.lg-logo-oscuro { display: none; }

.lg-head { text-align: center; margin-bottom: 26px; padding-top: 18px; border-top: 1px solid #e6ebe8; }
.lg-head h1 { margin: 0; font-size: 21px; font-weight: 700; color: #1e2b25; letter-spacing: .2px; }
.lg-head p { margin: 6px 0 0; font-size: 13px; color: #6b7a72; }

.lg-field { margin-bottom: 16px; }
.lg-field label {
    display: block; font-size: 12px; font-weight: 600; color: #3d4b44;
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px;
}
.lg-input { position: relative; }
.lg-input i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #93a39a; font-size: 14px; pointer-events: none; }
.lg-input .form-control {
    width: 100%; padding: 12px 14px 12px 40px; font-size: 15px;
    border: 1.5px solid #d5ddd8; border-radius: 8px; background: #fbfcfb; margin: 0;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.lg-input .form-control:focus {
    outline: none; border-color: var(--bl-green); background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 90, 53, .14);
}
.lg-input:focus-within i { color: var(--bl-green); }
/* Ojito para ver la contraseña */
#password { padding-right: 46px !important; }
.lg-eye {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; border-radius: 6px; background: transparent;
    color: #93a39a; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lg-eye i { position: static; transform: none; font-size: 16px; color: inherit; }
.lg-eye:hover, .lg-eye[aria-pressed="true"] { color: var(--bl-green); }
.lg-eye:focus-visible { outline: 2px solid var(--bl-green); outline-offset: 1px; }
.lg-input:focus-within .lg-eye i { color: inherit; }
html[data-theme="dark"] .lg-eye:hover, html[data-theme="dark"] .lg-eye[aria-pressed="true"] { color: var(--bl-leaf); }

.lg-btn {
    width: 100%; margin-top: 10px; padding: 13px; font-size: 15px; font-weight: 600;
    background: var(--bl-green) !important; color: #fff !important; border: none; border-radius: 8px;
    justify-content: center; letter-spacing: .3px;
}
.lg-btn:hover { background: var(--bl-green-2) !important; }
.lg-btn:disabled { opacity: .75; }

.lg-error {
    background: #fdecea; color: #b42318; border: 1px solid #f6c7c2;
    padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; font-size: 13px;
}
.lg-legal { margin-top: 22px; text-align: center; font-size: 11px; color: #8a978f; }

/* Credito del desarrollador: discreto, esquina inferior */
.lg-dev {
    position: absolute; right: 20px; bottom: 16px; left: 20px;
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    text-decoration: none; color: #8a948f; font-size: 11px; line-height: 1.35;
    opacity: .8; transition: opacity .2s;
}
.lg-dev:hover { opacity: 1; }
.lg-dev img { width: 22px; height: auto; flex: none; }
.lg-dev > span { display: flex; flex-direction: column; text-align: right; }
.lg-dev b { color: #4b5550; }
.lg-dev-tel { color: #6d7771; }
.lg-dev-tel i { color: #25a35a; }

@keyframes lgPanelIn { from { opacity: 0; transform: translateX(16px); } }

/* ---------------- Celulares y pantallas angostas ---------------- */
@media (max-width: 960px) {
    .lg-shell { grid-template-columns: 1fr; grid-template-rows: 34vh auto; }
    .lg-scene-wrap { min-height: 220px; }
    .lg-caption { top: 14px; left: 16px; }
    .lg-caption-sub { display: none; }
    .lg-status { margin-top: 8px; }
    .lg-panel { box-shadow: 0 -12px 30px rgba(0,0,0,.25); padding: 28px 22px 100px; justify-content: flex-start; }
    .lg-logo { width: 170px; }
}

/* ================== ANIMACIONES DE LA ESCENA ================== */
/* Ciclo dia/noche: 48 s. Camion: 16 s (tres cargas por "dia"). */
.ls-celestial { transform-box: view-box; transform-origin: 600px 800px; animation: lsSky 48s linear infinite; }
@keyframes lsSky { from { transform: rotate(-63deg); } to { transform: rotate(297deg); } }

.ls-night  { opacity: 0; animation: lsNight 48s linear infinite; }
.ls-lights { opacity: 0; animation: lsNight 48s linear infinite; }
.ls-dark   { opacity: 0; animation: lsDark 48s linear infinite; }
.ls-dusk   { opacity: 0; animation: lsDusk 48s linear infinite; }
@keyframes lsNight { 0%, 36% { opacity: 0; } 46%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes lsDark  { 0%, 36% { opacity: 0; } 46%, 86% { opacity: .62; } 96%, 100% { opacity: 0; } }
@keyframes lsDusk  { 0%, 31% { opacity: 0; } 40% { opacity: 1; } 47%, 83% { opacity: 0; } 91% { opacity: .75; } 98%, 100% { opacity: 0; } }

.ls-twinkle { animation: lsTwinkle 3s ease-in-out infinite; }
.ls-twinkle:nth-of-type(2n) { animation-delay: -1.5s; }
@keyframes lsTwinkle { 50% { opacity: .25; } }

/* Camion: entra, se carga sobre la bascula y sale */
.ls-truck { transform: translateX(752px); animation: lsTruck 16s ease-in-out infinite; }
.ls-load  { transform-box: fill-box; transform-origin: 50% 100%; animation: lsLoad 16s linear infinite; }
.ls-wheel { transform-box: fill-box; transform-origin: 50% 50%; animation: lsWheel 16s ease-in-out infinite; }
.ls-stream { animation: lsStream 16s linear infinite; }
@keyframes lsTruck { 0% { transform: translateX(-360px); } 16% { transform: translateX(752px); } 70% { transform: translateX(752px); } 100% { transform: translateX(1260px); } }
@keyframes lsLoad  { 0%, 19% { transform: scaleY(0); } 66%, 100% { transform: scaleY(1); } }
@keyframes lsWheel { 0% { transform: rotate(0); } 16% { transform: rotate(820deg); } 70% { transform: rotate(820deg); } 100% { transform: rotate(1190deg); } }
@keyframes lsStream { 0%, 18% { opacity: 0; } 21%, 64% { opacity: 1; } 67%, 100% { opacity: 0; } }

/* Piedra subiendo por la cinta */
.ls-rock { animation: lsRock 5s linear infinite; }
.ls-rock:nth-child(2) { animation-delay: -.83s; }
.ls-rock:nth-child(3) { animation-delay: -1.66s; }
.ls-rock:nth-child(4) { animation-delay: -2.5s; }
.ls-rock:nth-child(5) { animation-delay: -3.33s; }
.ls-rock:nth-child(6) { animation-delay: -4.16s; }
@keyframes lsRock { 0% { transform: translate(0, 0); opacity: 0; } 6%, 94% { opacity: 1; } 100% { transform: translate(412px, -272px); opacity: 0; } }

.ls-drop { animation: lsDrop .8s linear infinite; }
.ls-drop:nth-child(2) { animation-delay: -.27s; }
.ls-drop:nth-child(3) { animation-delay: -.54s; }
@keyframes lsDrop { 0% { transform: translate(0, 0); } 100% { transform: translate(6px, 74px); } }

.ls-pulley { transform-box: fill-box; transform-origin: 50% 50%; animation: lsSpin 2s linear infinite; }
@keyframes lsSpin { to { transform: rotate(360deg); } }

.ls-loader { animation: lsLoader 9s ease-in-out infinite; }
@keyframes lsLoader { 0%, 8% { transform: translateX(0); } 40%, 55% { transform: translateX(62px); } 88%, 100% { transform: translateX(0); } }

.ls-smoke { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: lsSmoke 7s ease-out infinite; }
.ls-smoke:nth-child(2) { animation-delay: -2.33s; }
.ls-smoke:nth-child(3) { animation-delay: -4.66s; }
@keyframes lsSmoke { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: .6; } 100% { transform: translate(46px, -150px) scale(1.9); opacity: 0; } }

.ls-blink { animation: lsBlink 2.4s steps(1) infinite; }
@keyframes lsBlink { 50% { opacity: .15; } }

/* Pestaña oculta: todo en pausa */
.login-scene.ls-paused, .login-scene.ls-paused * { animation-play-state: paused !important; }

/* Reducir movimiento: imagen fija de dia con el camion cargando */
@media (prefers-reduced-motion: reduce) {
    .login-scene *, .lg-panel { animation: none !important; }
    .ls-celestial { transform: rotate(-20deg); }
    .ls-load { transform: scaleY(.75); }
    .ls-stream { opacity: 1; }
}

/* ---------------- Modo nocturno del sistema ---------------- */
html[data-theme="dark"] .lg-panel { background: #0f1814; box-shadow: -18px 0 50px rgba(0,0,0,.5); }
html[data-theme="dark"] .lg-logo-claro { display: none; }
html[data-theme="dark"] .lg-logo-oscuro { display: inline-block; }
html[data-theme="dark"] .lg-head { border-top-color: #22302a; }
html[data-theme="dark"] .lg-head h1 { color: #e6efe9; }
html[data-theme="dark"] .lg-head p, html[data-theme="dark"] .lg-legal { color: #8fa197; }
html[data-theme="dark"] .lg-field label { color: #b8c6be; }
html[data-theme="dark"] .lg-input .form-control { background: #16221c !important; border-color: #2b3b33 !important; color: #e6efe9 !important; }
html[data-theme="dark"] .lg-input .form-control:focus { border-color: var(--bl-leaf) !important; box-shadow: 0 0 0 3px rgba(155, 210, 113, .18); }
html[data-theme="dark"] .lg-input:focus-within i { color: var(--bl-leaf); }
html[data-theme="dark"] .lg-dev, html[data-theme="dark"] .lg-dev-tel { color: #7f8c85; }
html[data-theme="dark"] .lg-dev b { color: #c9d4ce; }
html[data-theme="dark"] .lg-error { background: rgba(239,68,68,.12); color: #fca5a5; border-color: rgba(239,68,68,.35); }