/* Entrada «Turno»: escena a pantalla completa con el cielo según la hora local.
   Solo se carga en /login cuando config('app.login_style') es 'turno'. */

:root {
    --lt-display: "Core Display", "Outfit", system-ui, sans-serif;
    --lt-sans: "CORE Texto", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --lt-ink: #14161B;
    --lt-ink2: #4B5262;
    --lt-line: #DFE5EC;
    --lt-field: #F6F8FA;
    --lt-blue: #17619E;
    --lt-blue-hover: #12507F;
    --lt-red: #C2362B;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body.lt-body {
    background: #0E2E46;
    color: #fff;
    font: 15px/1.5 var(--lt-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Escena */
.lt-stage {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 28px 64px;
    isolation: isolate;
    overflow: hidden;
}

.lt-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lt-sky { position: absolute; inset: 0; transition: background 1s; }
.lt-ph-night .lt-sky { background: linear-gradient(180deg, #071521 0%, #0E2E46 60%, #16405A 100%); }
.lt-ph-dawn .lt-sky { background: linear-gradient(180deg, #1E4D7A 0%, #E59A6B 70%, #F4C38A 100%); }
.lt-ph-day .lt-sky { background: linear-gradient(180deg, #2B7CC0 0%, #5DB3DE 60%, #9ED9C2 100%); }
.lt-ph-dusk .lt-sky { background: linear-gradient(180deg, #24456E 0%, #C8654A 65%, #F0A15E 100%); }

.lt-sun {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    left: 40%;
    top: 12%;
    filter: blur(2px);
    transition: opacity 1s;
    animation: lt-float 9s ease-in-out infinite alternate;
}
.lt-ph-night .lt-sun { background: radial-gradient(circle, #E8EEF2 0%, transparent 68%); opacity: 0; }
.lt-ph-dawn .lt-sun { background: radial-gradient(circle, #FFD49A 0%, transparent 68%); opacity: .9; }
.lt-ph-day .lt-sun { background: radial-gradient(circle, #FFF3C4 0%, transparent 68%); opacity: 1; }
.lt-ph-dusk .lt-sun { background: radial-gradient(circle, #FFB074 0%, transparent 68%); opacity: .9; }
@keyframes lt-float { to { transform: translateY(-18px); } }

.lt-stars { position: absolute; inset: 0; transition: opacity 1s; opacity: 0; }
.lt-ph-night .lt-stars { opacity: 1; }
.lt-ph-dawn .lt-stars { opacity: .2; }
.lt-ph-dusk .lt-stars { opacity: .15; }
.lt-stars i {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
    animation: lt-twinkle 3s ease-in-out infinite;
}
@keyframes lt-twinkle { 50% { opacity: .2; } }

.lt-hill {
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -40px;
    height: 200px;
    border-radius: 50% 50% 0 0;
    background: rgba(10, 30, 40, .55);
}
.lt-hill2 { bottom: -80px; height: 220px; left: 30%; background: rgba(10, 30, 40, .75); }

.lt-van {
    position: absolute;
    bottom: 34px;
    left: -120px;
    width: 84px;
    height: 34px;
    animation: lt-drive 16s linear infinite;
}
@keyframes lt-drive { to { left: 110%; } }

/* Contenido */
.lt-inner {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: center;
    width: 100%;
    max-width: 1000px;
}

.lt-left { min-width: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, .18); }
.lt-brand { min-height: 40px; display: flex; align-items: center; }
.lt-logo { max-height: 56px; max-width: 220px; object-fit: contain; }
.lt-wordmark { font: 700 28px/1.1 var(--lt-display); letter-spacing: -.01em; color: #fff; }
.lt-clock {
    font: 800 88px/1 var(--lt-display);
    letter-spacing: -.02em;
    margin: 18px 0 6px;
    font-variant-numeric: tabular-nums;
}
.lt-day { font-size: 17px; opacity: .92; margin: 0; }
.lt-hello { font: 600 22px/1.3 var(--lt-display); margin: 26px 0 0; }

.lt-card {
    background: #fff;
    color: var(--lt-ink);
    border-radius: 22px;
    padding: 34px 36px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.lt-card h1 { font: 700 26px/1.2 var(--lt-display); margin: 0 0 4px; color: var(--lt-ink); }
.lt-sub { margin: 0 0 18px; font-size: 14.5px; color: var(--lt-ink2); }

.lt-alert { border-radius: 11px; padding: 10px 14px; font-size: 13.5px; margin: 0 0 12px; }
.lt-alert-danger { background: #FDECEA; color: #8F2219; border: 1px solid #F5C6C1; }
.lt-alert-success { background: #E7F6EE; color: #1D6B45; border: 1px solid #BFE6D1; }
.lt-alert-warning { background: #FFF5E0; color: #7A5200; border: 1px solid #F3DDA8; }
.lt-alert-info { background: #E8F1FA; color: #17507F; border: 1px solid #C5DAEE; }

.lt-field { margin-top: 14px; }
.lt-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lt-label { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 6px; color: var(--lt-ink); }
.lt-forgot { font-weight: 500; font-size: 12.5px; color: var(--lt-ink2); text-decoration: none; }
.lt-forgot:hover { color: var(--lt-blue); text-decoration: underline; }

.lt-input {
    display: block;
    width: 100%;
    height: 46px;
    border-radius: 11px;
    border: 1px solid var(--lt-line);
    background: var(--lt-field);
    color: var(--lt-ink);
    padding: 0 14px;
    font: 14.5px var(--lt-sans);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.lt-input::placeholder { color: #8A94A3; }
.lt-input:focus { outline: none; background: #fff; border-color: var(--lt-blue); box-shadow: 0 0 0 3px rgba(23, 97, 158, .18); }
.lt-input.is-invalid { border-color: var(--lt-red); }
.lt-error { color: var(--lt-red); font-size: 12.5px; margin-top: 5px; }

.lt-pass { position: relative; }
.lt-pass .lt-input { padding-right: 46px; }
.lt-eye {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    color: #8A94A3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0 11px 11px 0;
}
.lt-eye svg { width: 20px; height: 20px; }
.lt-eye[aria-pressed="true"], .lt-eye:hover { color: var(--lt-blue); }
.lt-eye:focus-visible { outline: 2px solid var(--lt-blue); outline-offset: -2px; }

.lt-actions { margin-top: 24px; }

.lt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--lt-blue);
    color: #fff;
    font: 600 15px var(--lt-sans);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background .15s;
}
.lt-btn:hover { background: var(--lt-blue-hover); }
.lt-btn:focus-visible { outline: 3px solid rgba(23, 97, 158, .35); outline-offset: 2px; }
.lt-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: lt-shine 4.5s ease-in-out infinite 1.5s;
}
@keyframes lt-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

.lt-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: 0;
    padding: 0 16px;
    text-align: center;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .78);
}

/* Entrada suave */
.lt-rise { opacity: 0; transform: translateY(14px); animation: lt-rise .8s cubic-bezier(.2, .8, .2, 1) forwards; }
.lt-d1 { animation-delay: .15s; }
.lt-d2 { animation-delay: .3s; }
.lt-d3 { animation-delay: .45s; }
.lt-d4 { animation-delay: .6s; }
@keyframes lt-rise { to { opacity: 1; transform: none; } }

/* Móvil: reloj compacto arriba y tarjeta debajo */
@media (max-width: 860px) {
    .lt-stage { justify-content: flex-start; padding: 28px 16px 56px; }
    .lt-inner { grid-template-columns: 1fr; gap: 18px; max-width: 440px; }
    .lt-left { text-align: center; }
    .lt-brand { justify-content: center; min-height: 32px; }
    .lt-wordmark { font-size: 22px; }
    .lt-logo { max-height: 44px; }
    .lt-clock { font-size: 56px; margin: 10px 0 2px; }
    .lt-day { font-size: 15px; }
    .lt-hello { font-size: 18px; margin-top: 8px; }
    .lt-card { padding: 26px 22px; }
    .lt-sun { width: 130px; height: 130px; }
}

/* Sin animaciones si el equipo las tiene desactivadas */
@media (prefers-reduced-motion: reduce) {
    .lt-stage *, .lt-stage *::before, .lt-stage *::after { animation: none !important; transition: none !important; }
    .lt-rise { opacity: 1; transform: none; }
    .lt-van { left: 12%; }
}