/* Interfaz del fichaje: pensada PRIMERO para el móvil (es donde se ficha) y que se vea bien en
   claro y en oscuro. Sin librerías: son cuatro pantallas y no merece la pena arrastrar nada. */
:root {
  --fondo:#f4f5f7; --papel:#ffffff; --tinta:#101828; --tenue:#667085; --linea:#e4e7ec;
  --acento:#1f6feb; --acento-txt:#ffffff; --ok:#0f7b35; --mal:#b42318; --aviso:#8a4b00;
  --pausa:#8a5a00; --radio:14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo:#0d1117; --papel:#161b22; --tinta:#e6edf3; --tenue:#9198a1; --linea:#2a313c;
    --acento:#3b82f6; --ok:#3fb950; --mal:#f85149; --aviso:#d29922; --pausa:#d29922;
  }
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--fondo); color:var(--tinta); font:16px/1.5 -apple-system, BlinkMacSystemFont,
  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
          env(safe-area-inset-left);
}
.oculto { display:none !important; }
.centro { min-height:80vh; display:flex; align-items:center; justify-content:center; padding:16px; }
main { max-width:720px; margin:0 auto; padding:10px 12px 40px; }

h1 { font-size:20px; margin:0 0 4px; }
h2 { font-size:15px; margin:14px 0 8px; }
.tenue { color:var(--tenue); font-size:13px; }
.error { color:var(--mal); font-size:14px; min-height:1.2em; margin:8px 0 0; }
.aviso { color:var(--aviso); font-size:14px; margin:6px 0 0; }
.exito { color:var(--ok); font-size:14px; }

.tarjeta { background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:16px; margin:0 0 12px; }
.tarjeta.sin-relleno { padding:0; overflow:hidden; }
.estrecha { max-width:420px; width:100%; }

label { display:block; font-size:13px; color:var(--tenue); margin:10px 0; }
input[type=text], input[type=password], input[type=month], input[type=date],
input[type=time], select, textarea {
  display:block; width:100%; margin-top:4px; padding:11px 12px; font:inherit; color:var(--tinta);
  background:var(--fondo); border:1px solid var(--linea); border-radius:10px;
}
input[type=checkbox] { width:18px; height:18px; vertical-align:-3px; margin-right:6px; }

button, .boton { font:inherit; cursor:pointer; border-radius:10px; padding:11px 14px;
  border:1px solid var(--linea); background:var(--papel); color:var(--tinta); text-decoration:none;
  display:inline-block; }
button.principal, .boton.principal { background:var(--acento); border-color:var(--acento);
  color:var(--acento-txt); font-weight:600; }
button.plano { background:transparent; }
button:disabled { opacity:.5; cursor:default; }

.cabecera { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 2px 12px; }
.cabecera .tenue { display:block; }

.pestanas { display:flex; gap:6px; margin-bottom:12px; overflow-x:auto; }
.pestanas button { flex:1 0 auto; padding:9px 12px; font-size:14px; }
.pestanas button.activa { background:var(--acento); border-color:var(--acento);
  color:var(--acento-txt); font-weight:600; }

/* -------- fichaje -------- */
.reloj { text-align:center; }
.estado { font-size:24px; font-weight:700; margin:4px 0 2px; }
.estado.trabajando { color:var(--ok); }
.estado.en_pausa { color:var(--pausa); }
.botones { display:flex; flex-direction:column; gap:10px; margin:16px 0 4px; }
.botones button { padding:18px; font-size:18px; font-weight:600; }
.linea { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:14px;
  color:var(--tinta); }
.linea label { margin:0; }

.cifras { display:flex; gap:10px; text-align:center; }
.cifras > div { flex:1; background:var(--fondo); border-radius:10px; padding:10px 6px; }
.cifras b { display:block; font-size:17px; }
.cifras .tenue { font-size:11px; }

.lista { list-style:none; margin:6px 0 0; padding:0; }
.lista li { display:flex; justify-content:space-between; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--linea); font-size:14px; }
.lista li:last-child { border-bottom:none; }
.lista.pequena li { font-size:12.5px; color:var(--tenue); }
.etiqueta { font-size:11px; padding:2px 6px; border-radius:6px; background:var(--fondo);
  color:var(--tenue); border:1px solid var(--linea); margin-left:5px; white-space:nowrap; }

/* -------- jornadas por confirmar -------- */
.pendientes { border-color:var(--aviso); border-left-width:4px; }
.pendientes h2 { margin-top:0; color:var(--aviso); }
.pendientes .lista li { align-items:center; }
.pendientes label { display:flex; align-items:center; gap:8px; margin:0; color:var(--tinta);
  font-size:14px; cursor:pointer; }
.sin-confirmar { color:var(--aviso); }
.pendientes .lista li { flex-wrap:wrap; }
.editor-horas { flex:1 0 100%; margin-top:8px; padding:10px; background:var(--fondo);
  border-radius:10px; }
.editor-horas .linea { gap:10px; }
.editor-horas input[type=time] { width:auto; min-width:110px; }
.editor-horas button { margin-right:6px; }

/* -------- tabla del mes -------- */
table.dias { width:100%; border-collapse:collapse; font-size:14px; }
table.dias th, table.dias td { padding:9px 10px; border-bottom:1px solid var(--linea);
  text-align:left; }
table.dias th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--tenue); }
table.dias td.num, table.dias th.num { text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
table.dias tr.nolab td { color:var(--tenue); }
table.dias tr.hoy td { background:color-mix(in srgb, var(--acento) 10%, transparent); }
table.dias tr.pulsable { cursor:pointer; }
table.dias tr.pulsable:hover td { background:var(--fondo); }
.marca { font-size:11px; color:var(--aviso); display:block; }
.dif-mas { color:var(--ok); }
.dif-menos { color:var(--mal); }

.pie { text-align:center; font-size:12px; margin-top:18px; }
.traza { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px;
  white-space:pre-wrap; }