/* Estilos propios del fichador (encima de styles.css, el mismo diseño de Firma HSE) */
.centro{max-width:480px}
.saludo{font-size:28px;font-weight:800;margin:0}
.botones-fichar{display:flex;flex-direction:column;gap:12px}
.btn-fichar{font-size:26px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:28px 18px;border-radius:14px;border:0;color:#fff;width:100%}
.btn-fichar.entrada{background:var(--ok)}
.btn-fichar.salida{background:#b5541c}
.btn-fichar.secundario{font-size:15px;padding:12px 14px;background:transparent;color:var(--ink);border:1px solid var(--line);letter-spacing:0;text-transform:none;font-weight:600}
.btn-fichar:disabled{opacity:.5}
:root[data-theme="dark"] .btn-fichar.entrada,:root[data-theme="dark"] .btn-fichar.salida{color:#0b1513}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-fichar.entrada,:root:not([data-theme="light"]) .btn-fichar.salida{color:#0b1513}}
.hecho{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:20px 0}
.hecho .tic{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:52px;color:#fff;background:var(--ok)}
.hecho.salida .tic{background:#b5541c}
.hecho .que{font-size:26px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.hecho .hora{font-family:var(--mono);font-size:44px;font-weight:600;font-variant-numeric:tabular-nums}
.ultimo{font-size:14px;color:var(--muted)}
.dias{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dias li{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:2px 10px}
.dias .f{font-weight:600}
.dias .h{font-family:var(--mono);font-size:14px;text-align:right}
.dias .t{grid-column:1/-1;font-family:var(--mono);font-size:13px;color:var(--muted)}
.dias .inc{grid-column:1/-1;font-size:13px;color:var(--err)}
.dias .cur{grid-column:1/-1;font-size:13px;color:var(--ok)}

/* Tablet de la entrada */
body.tablet{padding:0;min-height:100vh;display:flex;background:var(--page)}
.tablet-wrap{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;padding:32px max(24px,env(safe-area-inset-right)) 32px max(24px,env(safe-area-inset-left))}
@media (orientation:portrait),(max-width:760px){.tablet-wrap{grid-template-columns:1fr;justify-items:center;text-align:center}}
.tablet-qr{background:#fff;border-radius:16px;padding:14px;width:min(68vh,90vw,560px);justify-self:center;box-shadow:0 4px 24px rgba(0,0,0,.12)}
.tablet-qr svg{display:block;width:100%;height:auto}
.tablet-barra{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:12px}
.tablet-barra i{display:block;height:100%;background:var(--accent);transform-origin:left}
.tablet-info{display:flex;flex-direction:column;gap:18px}
.tablet-reloj{font-family:var(--mono);font-size:clamp(56px,10vw,120px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.tablet-fecha{font-size:22px;color:var(--muted)}
.tablet-fecha::first-letter{text-transform:uppercase}
.tablet-instr{font-size:24px;font-weight:700;line-height:1.25}
.tablet-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:140px}
.tablet-feed li{font-size:22px;font-weight:600;display:flex;gap:12px;align-items:center;animation:entra .3s ease-out}
.tablet-feed li b{font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:999px;color:#fff;background:var(--ok)}
.tablet-feed li.salida b{background:#b5541c}
.tablet-feed li span.h{font-family:var(--mono);color:var(--muted)}
@keyframes entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tablet-pie{font-size:13px;color:var(--muted)}
.tablet-error{max-width:520px;margin:auto}

/* Panel */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.kpi b{display:block;font-size:34px;font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:13px;color:var(--muted)}
@media (max-width:560px){.kpis{grid-template-columns:1fr 1fr}}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filtros label{flex:1 1 140px}
td.tramos{font-family:var(--mono);font-size:12px;white-space:normal;min-width:160px}
td .inc{color:var(--err);font-size:12px;display:block}
td .cur{color:var(--ok);font-size:12px;display:block}
td .man{color:var(--mid-ink);font-size:11px;display:block;white-space:normal}
.dlg form{display:flex;flex-direction:column;gap:12px}
.fichaje-chip{display:inline-flex;gap:6px;align-items:center;font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 10px;margin:2px}
.fichaje-chip.anulado{text-decoration:line-through;color:var(--muted)}
.fichaje-chip button{padding:2px 8px;font-size:11px;border-radius:999px}
/* Passkey */
.pk-ok{font-size:13px;color:var(--ok);font-weight:600;display:flex;align-items:center;gap:6px}
.pk-ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.pk-oferta{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px dashed var(--line);border-radius:10px;padding:12px 14px;font-size:14px}
.pk-oferta .ghost{flex:none}
/* Aviso al pulsar lo contrario de lo que toca */
.aviso-contrario{display:flex;flex-direction:column;gap:12px;border:2px solid var(--hazard);border-radius:12px;padding:14px;background:var(--mid-bg)}
.aviso-contrario p{margin:0;font-weight:600;color:var(--mid-ink);font-size:16px}