/* NextShift · Fondo 3D de las pantallas de acceso (views/partials/fondo-turnos.php). Colores: tema.css */
.login-screen { position: relative; overflow: hidden; isolation: isolate; }
.login-screen > form, .login-screen > .login-card { position: relative; z-index: 2; }

.login-fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; perspective: 1400px; perspective-origin: 50% 35%; }
.login-fondo::after { /* velo para que la tarjeta y el texto se lean siempre */
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 420px 520px at 50% 50%, var(--bg-grouped) 0%, transparent 100%);
    opacity: .55;
}
.lf-escena { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 50% 35%; transform: rotateY(var(--mx, 0deg)) rotateX(var(--my, 0deg)); transition: transform .6s ease-out; }

/* Calendario inclinado */
.lf-plano {
    position: absolute; left: 50%; top: 50%; width: 980px;
    display: flex; flex-direction: column; gap: 14px;
    transform-style: preserve-3d;
    transform: translate(-50%, -46%) rotateX(58deg) rotateZ(-24deg);
    animation: lf-deriva 38s ease-in-out infinite alternate;
    opacity: .9;
}
.lf-fila { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; transform-style: preserve-3d; }
.lf-cab span { text-align: center; font: 700 22px var(--font-display); color: var(--label-3); letter-spacing: .04em; }
.lf-c {
    position: relative; height: 92px; border-radius: 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font: 700 22px var(--font-mono); color: var(--label-2);
    box-shadow: 0 0 0 1px var(--separator), 0 18px 30px rgba(0, 0, 0, .08);
    transform: translateZ(calc(var(--z) * 7px));
    animation: lf-flota 7s ease-in-out infinite; animation-delay: calc(var(--z) * -1.3s - var(--i) * .4s);
}
.lf-c svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: .8; }
.lf-dia { background: var(--f-dia); color: var(--dsp-dia); }
.lf-tarde { background: var(--f-tarde); color: var(--dsp-tarde); }
.lf-noche { background: var(--f-noche); color: var(--dsp-noche); }
.lf-saliente { background: var(--f-saliente); }
.lf-libre { background: var(--f-libre); color: var(--f-libre-text); }

/* Tarjetas flotantes (más cerca de la cámara) */
.lf-tarjeta {
    position: absolute; z-index: 1; display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 16px;
    background: var(--chrome); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    box-shadow: var(--shadow-pop); color: var(--label);
    animation: lf-flota 9s ease-in-out infinite;
}
.lf-tarjeta b { display: block; font-size: 14px; font-weight: 600; }
.lf-tarjeta small { display: block; font-size: 12px; color: var(--label-2); }
.lf-tarjeta svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex-shrink: 0; }
.lf-t1 { left: 7%; top: 16%; transform: rotateZ(-4deg); color: var(--sys-indigo); }
.lf-t2 { right: 8%; top: 22%; transform: rotateZ(3deg); color: var(--sys-orange); animation-delay: -3s; }
.lf-t3 { right: 10%; bottom: 12%; transform: rotateZ(-2deg); animation-delay: -6s; }
.lf-t1 b, .lf-t2 b { color: var(--label); }
.lf-ok { width: 28px; height: 28px; border-radius: 50%; background: var(--sys-green); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }

@keyframes lf-deriva {
    from { transform: translate(-50%, -46%) rotateX(58deg) rotateZ(-24deg); }
    to   { transform: translate(-52%, -50%) rotateX(54deg) rotateZ(-18deg); }
}
@keyframes lf-flota {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

/* Modo oscuro: celdas un poco más tenues para no competir con la tarjeta */
@media (prefers-color-scheme: dark) {
    .lf-plano { opacity: .75; }
    .lf-c { box-shadow: 0 0 0 1px var(--separator), 0 18px 30px rgba(0, 0, 0, .5); }
}

/* Celular: menos elementos y sin tarjetas flotantes (más liviano) */
@media (max-width: 700px) {
    .lf-plano { width: 760px; gap: 10px; opacity: .55; }
    .lf-fila { gap: 10px; }
    .lf-c { height: 70px; border-radius: 14px; font-size: 17px; }
    .lf-fila:nth-child(n+7) { display: none; }
    .lf-tarjeta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lf-plano, .lf-c, .lf-tarjeta { animation: none !important; }
    .lf-escena { transition: none; }
}
@media print { .login-fondo { display: none; } }