/*
 * Fichajes de control de presencia (Attendance/index.html.twig, js/fichajes.js). Página independiente con el mismo
 * aspecto que el inicio de sesión: foto de fondo (--pm-fichajes-fondo), cabecera con logo, reloj e idioma y un panel
 * con cuatro estados (data-estado: esperando, procesando, resultado, error).
 */
@font-face { font-family: "Inter"; src: url(../managerpro/assets/images/design/Inter-Regular.e89cb1.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../managerpro/assets/images/design/Inter-Medium.6dcbc9.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../managerpro/assets/images/design/Inter-SemiBold.4d56bb.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../managerpro/assets/images/design/Inter-Bold.88fa7a.ttf) format("truetype"); font-weight: 700; font-display: swap; }

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

.pm-fichajes {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 64px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #f3f3f4;
    background-color: #1f1e1d;
    background-image: linear-gradient(rgba(20, 19, 19, .55), rgba(20, 19, 19, .72)), var(--pm-fichajes-fondo);
    background-size: cover;
    background-position: center;
}

/* Cabecera */
.pm-fichajes__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pm-fichajes__logo { width: 200px; max-width: 40vw; height: auto; display: block; }
.pm-fichajes__derecha { display: flex; align-items: center; gap: 20px; }
.pm-fichajes__reloj { display: flex; flex-direction: column; align-items: flex-end; }
.pm-fichajes__hora { font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pm-fichajes__fecha { font-size: 14px; color: #d8d4ce; }
.pm-fichajes__fecha::first-letter { text-transform: uppercase; }
.pm-fichajes__idioma { height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(31, 30, 29, .6); color: #f3f3f4; font: inherit; font-size: 14px; cursor: pointer; }
.pm-fichajes__idioma option { color: #1f1e1d; }
.pm-fichajes__boton { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(31, 30, 29, .6); color: #f3f3f4; font-size: 14px; font-weight: 600; text-decoration: none; }
.pm-fichajes__boton:hover { background: rgba(255, 255, 255, .1); color: #ffffff; }
.pm-fichajes a:focus-visible, .pm-fichajes select:focus-visible { outline: 2px solid #3EA68B; outline-offset: 2px; }

/* Panel */
.pm-fichajes__centro { flex: 1; display: flex; align-items: center; justify-content: center; }
.pm-fichajes__panel {
    position: relative;
    width: 560px;
    max-width: 100%;
    min-height: 420px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(31, 30, 29, .86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    transition: border-color .2s;
}
.pm-fichajes__titulo { margin: 0; font-size: 28px; font-weight: 700; }
.pm-fichajes__estado { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.pm-fichajes__panel[data-estado="esperando"] .pm-fichajes__estado--esperando,
.pm-fichajes__panel[data-estado="procesando"] .pm-fichajes__estado--procesando,
.pm-fichajes__panel[data-estado="resultado"] .pm-fichajes__estado--resultado,
.pm-fichajes__panel[data-estado="error"] .pm-fichajes__estado--error { display: flex; }
.pm-fichajes__texto { margin: 0; font-size: 18px; color: #d8d4ce; }

/* Esperando: código de barras con una línea de lectura que sube y baja */
.pm-fichajes__lector { position: relative; width: 160px; height: 108px; display: flex; align-items: center; justify-content: center; color: #8fd3c0; }
.pm-fichajes__lector svg { width: 100%; height: 100%; }
.pm-fichajes__linea { position: absolute; left: 10%; right: 10%; top: 20%; height: 2px; border-radius: 2px; background: #D44548; box-shadow: 0 0 10px #D44548; animation: pm-fichajes-lectura 2s ease-in-out infinite alternate; }
@keyframes pm-fichajes-lectura { to { top: 78%; } }

/* Procesando */
.pm-fichajes__girando { width: 56px; height: 56px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .15); border-top-color: #3EA68B; animation: pm-fichajes-giro .8s linear infinite; }
@keyframes pm-fichajes-giro { to { transform: rotate(360deg); } }

/* Resultado */
.pm-fichajes__panel[data-estado="resultado"] { border-color: rgba(62, 166, 139, .7); }
.pm-fichajes__panel--salida[data-estado="resultado"] { border-color: rgba(212, 69, 72, .7); }
.pm-fichajes__avatar { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: #3EA68B; color: #10261f; font-size: 44px; font-weight: 700; box-shadow: 0 0 0 6px rgba(62, 166, 139, .25); }
.pm-fichajes__panel--salida .pm-fichajes__avatar { background: #D44548; color: #ffffff; box-shadow: 0 0 0 6px rgba(212, 69, 72, .25); }
.pm-fichajes__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-fichajes__tipo { padding: 4px 12px; border-radius: 12px; background: rgba(62, 166, 139, .2); color: #8fd3c0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-fichajes__tipo--salida { background: rgba(212, 69, 72, .2); color: #f2a3a5; }
.pm-fichajes__saludo { margin: 0; font-size: 32px; font-weight: 400; line-height: 1.2; }
.pm-fichajes__saludo strong { font-weight: 700; }

/* Error */
.pm-fichajes__panel[data-estado="error"] { border-color: rgba(212, 69, 72, .7); }
.pm-fichajes__icono-error { color: #f2a3a5; }
.pm-fichajes__saludo--error { font-size: 24px; font-weight: 600; color: #f2a3a5; }

/* Campo del lector: invisible pero con foco */
.pm-fichajes__oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; opacity: 0; }

@media (max-width: 760px) {
    .pm-fichajes { padding: 20px 16px; gap: 20px; }
    .pm-fichajes__logo { width: 150px; }
    .pm-fichajes__reloj { display: none; }
    .pm-fichajes__panel { padding: 32px 22px; min-height: 360px; }
    .pm-fichajes__saludo { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .pm-fichajes__linea, .pm-fichajes__girando { animation: none; }
}