:root { --azul:#1e40af; --verde:#15803d; --rojo:#b91c1c; --ambar:#b45309; --gris:#475569; --fondo:#f1f5f9; --tarjeta:#fff; --borde:#e2e8f0; --texto:#0f172a; }
@media (prefers-color-scheme: dark) { :root { --fondo:#0f172a; --tarjeta:#1e293b; --borde:#334155; --texto:#f1f5f9; --gris:#cbd5e1; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--fondo); color:var(--texto); font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
main { max-width:480px; margin:0 auto; padding:16px 0 32px; }
[hidden] { display:none !important; }
.titulo { font-size:1.1rem; margin:0 0 12px; color:var(--gris); font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
h2 { font-size:1.3rem; margin:.2rem 0 .6rem; }
.pantalla { background:var(--tarjeta); border:1px solid var(--borde); border-radius:16px; padding:20px; }
.centro { text-align:center; margin:12px 0; }
.nota { font-size:.85rem; color:var(--gris); }
.aviso { border-radius:12px; padding:12px 14px; margin:0 0 12px; font-weight:500; border:1px solid var(--borde); background:var(--tarjeta); }
.aviso.error { border-color:var(--rojo); color:var(--rojo); }
.aviso.ok { border-color:var(--verde); color:var(--verde); }
.aviso.espera { border-color:var(--ambar); color:var(--ambar); }
.persona { margin-bottom:8px; }
.nombre { font-size:1.25rem; font-weight:700; }
.empresa { color:var(--gris); font-size:.9rem; }
.reloj { text-align:center; padding:8px 0 4px; }
.hora { font-size:2.6rem; font-weight:700; font-variant-numeric:tabular-nums; }
.fecha { color:var(--gris); text-transform:capitalize; }
.estado { text-align:center; font-weight:600; margin:6px 0 14px; padding:8px; border-radius:12px; background:var(--fondo); }
.estado.trabajando { color:var(--verde); } .estado.en_descanso { color:var(--ambar); } .estado.fuera { color:var(--gris); }
.acciones { display:grid; gap:12px; }
.fila { display:grid; gap:10px; }
button { font:inherit; cursor:pointer; }
button:focus-visible { outline:3px solid #f59e0b; outline-offset:2px; }
button.grande { width:100%; min-height:64px; border:0; border-radius:16px; font-size:1.2rem; font-weight:700; color:#fff; padding:12px; }
button.grande:disabled { opacity:.55; cursor:default; }
.primario, .entrada { background:var(--azul); } .entrada { background:var(--verde); }
.salida { background:var(--rojo); } .descanso { background:var(--ambar); } .neutro { background:var(--gris); }
.confirmar { margin-top:14px; padding:14px; border:2px solid var(--rojo); border-radius:16px; }
.comprobante { margin-top:16px; padding:14px; border:2px solid var(--verde); border-radius:16px; text-align:center; }
.comp-titulo { color:var(--verde); font-weight:700; }
.comp-tipo { font-size:1.4rem; font-weight:700; margin-top:4px; }
.comp-hora { font-variant-numeric:tabular-nums; margin-top:2px; }
.comp-folio { color:var(--gris); font-size:.9rem; margin-top:2px; }
.comp-anomalia { margin-top:8px; color:var(--ambar); font-weight:600; font-size:.9rem; }
.enlace { display:block; margin:18px auto 0; background:none; border:0; color:var(--azul); text-decoration:underline; padding:10px; }
@media (prefers-color-scheme: dark) { .enlace { color:#93c5fd; } }
.dia { margin:14px 0 4px; font-weight:700; text-transform:capitalize; }
.mov { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--borde); font-variant-numeric:tabular-nums; }
.mov .aviso-mini { color:var(--ambar); font-size:.8rem; }
#btn-volver { margin-top:16px; }

.comida { background:#7c3aed; }
.estado.en_comida { color:#7c3aed; }
.alerta { margin:0 0 12px; padding:14px; border-radius:16px; border:3px solid var(--ambar); background:var(--tarjeta); }
.alerta.grave { border-color:var(--rojo); }
.alerta-texto { font-weight:700; font-size:1.05rem; margin-bottom:10px; }
.alerta-cerrar { width:100%; min-height:48px; border:0; border-radius:12px; background:var(--gris); color:#fff; font-weight:600; }
.cuenta { text-align:center; font-size:1.5rem; font-weight:700; margin:0 0 12px; padding:10px; border-radius:12px; background:var(--fondo); font-variant-numeric:tabular-nums; }
.cuenta.por-terminar { color:var(--ambar); }
.cuenta.excedida { color:#fff; background:var(--rojo); }
.plan { margin-top:18px; border-top:1px solid var(--borde); padding-top:12px; }
.plan-titulo { font-weight:700; }
.pausa { display:flex; justify-content:space-between; gap:8px; padding:8px 10px; margin-top:6px; border-radius:10px; background:var(--fondo); font-variant-numeric:tabular-nums; }
.pausa.toca { background:#fef3c7; color:#92400e; font-weight:700; }
.pausa.en_curso { background:#dbeafe; color:#1e3a8a; font-weight:700; }
.pausa.tomada { opacity:.8; }
.pausa.omitida .pausa-estado { color:var(--rojo); }
@media (prefers-color-scheme: dark) { .pausa.toca { background:#78350f; color:#fde68a; } .pausa.en_curso { background:#1e3a8a; color:#dbeafe; } }

.ico { width:1.35em; height:1.35em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
button.grande, .alerta-cerrar, .enlace { display:flex; align-items:center; justify-content:center; gap:.6em; }
.enlace { width:100%; }
button.grande .ico { width:1.6em; height:1.6em; }
.alerta-cerrar { display:flex; width:100%; }

.ubic { margin:0 0 14px; padding:12px; border-radius:14px; border:2px solid var(--borde); background:var(--fondo); text-align:center; }
.ubic.ok { border-color:var(--verde); } .ubic.fuera, .ubic.sin_ubicacion { border-color:var(--rojo); } .ubic.imprecisa { border-color:var(--ambar); }
.ubic-area { font-weight:700; }
.ubic-texto { margin:4px 0; }
.ubic .enlace { margin:6px auto 4px; padding:6px; }