:root {
  --fondo: #f6f7f9;
  --papel: #ffffff;
  --tinta: #1c2024;
  --suave: #6b7280;
  --linea: #e3e6ea;
  --acento: #1f6feb;
  --rojo: #d1242f;
  --rojo-fondo: #ffebe9;
  --ambar: #9a6700;
  --ambar-fondo: #fff8c5;
  --verde: #1a7f37;
  --verde-fondo: #dafbe1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}

header.principal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.principal h1 { font-size: 17px; margin: 0; font-weight: 600; }
header.principal .periodo { color: var(--suave); font-size: 14px; }
header.principal .relleno { flex: 1; }
.vista-toggle {
  display: inline-flex;
  border: 1px solid var(--linea);
  border-radius: 8px;
  overflow: hidden;
}
.vista-toggle button {
  border: none;
  border-radius: 0;
  min-height: 36px;
  padding: 6px 12px;
  background: var(--papel);
}
.vista-toggle button + button { border-left: 1px solid var(--linea); }
.vista-toggle button.activo {
  background: var(--acento);
  color: #fff;
}
body.vista-mes td.celda .horas { font-size: 12px; padding: 4px 5px; }
body.vista-mes th.dia { font-size: 12px; min-width: 72px; }

button {
  font: inherit;
  padding: 6px 12px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--papel);
  cursor: pointer;
}
button:hover { border-color: var(--suave); }
button.primario { background: var(--acento); color: #fff; border-color: var(--acento); }
button.primario:hover { filter: brightness(1.08); }

main { padding: 20px; max-width: 1400px; margin: 0 auto; }

.aviso-modo {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ambar-fondo);
  border: 1px solid #d4a72c66;
  color: var(--ambar);
  font-size: 14px;
}

/* ------------------------------------------------------------ cuadrante */

.marco { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; }

table.cuadrante { border-collapse: collapse; width: 100%; font-size: 14px; }

table.cuadrante th, table.cuadrante td {
  border: 1px solid var(--linea);
  padding: 0;
  text-align: center;
}

table.cuadrante thead th {
  background: #fbfcfd;
  padding: 8px 10px;
  font-weight: 600;
  position: sticky;
  top: 0;
  white-space: nowrap;
}

table.cuadrante thead th .contrato { display: block; font-weight: 400; color: var(--suave); font-size: 12px; }

th.dia, th.franja { text-align: left; padding: 6px 10px; white-space: nowrap; background: #fbfcfd; font-weight: 500; }
th.dia { border-right: none; }
th.franja { color: var(--suave); font-size: 13px; font-weight: 400; }
tr.inicio-dia > th.dia, tr.inicio-dia > td { border-top: 2px solid #d6dbe1; }

td.celda { min-width: 118px; height: 38px; cursor: pointer; position: relative; }
td.celda:hover { background: #f0f6ff; }
td.celda .horas { display: block; padding: 8px 6px; }
td.celda.vacia .horas { color: #c3c8ce; }
td.celda.rojo { background: var(--rojo-fondo); }
td.celda.rojo .horas { color: var(--rojo); font-weight: 600; }
td.celda.ambar { background: var(--ambar-fondo); }
td.celda.ambar .horas { color: var(--ambar); }

/* Ausencias: paleta aparte del semáforo (rojo/ámbar = avisos legales).
   Franja lateral + tonos fríos para no confundir con ámbar. */
td.celda.ausente {
  box-shadow: inset 4px 0 0 #0f766e;
}
td.celda.ausente .horas {
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
td.celda.ausente.vacaciones { background: #ccfbf1; }
td.celda.ausente.vacaciones .horas { color: #0f766e; }
td.celda.ausente.baja { background: #fce7f3; }
td.celda.ausente.baja .horas { color: #9d174d; }
td.celda.ausente.permiso { background: #e0e7ff; }
td.celda.ausente.permiso .horas { color: #3730a3; }
td.celda.ausente.libranza { background: #e6f6eb; }
td.celda.ausente.libranza .horas { color: #1a7f37; }
td.celda.ausente.festivo { background: #f0e7ff; }
td.celda.ausente.festivo .horas { color: #5a32a3; }
td.celda.ausente:hover { filter: brightness(0.97); }

/* Turno planificado en día de ausencia: aviso fuerte */
td.celda.choque {
  background: repeating-linear-gradient(
    -45deg,
    var(--rojo-fondo),
    var(--rojo-fondo) 6px,
    #fff 6px,
    #fff 12px
  );
}
td.celda.choque .horas { color: var(--rojo); font-weight: 700; }

tfoot td, tfoot th { background: #fbfcfd; padding: 8px 10px; font-weight: 600; }
tfoot .desvio { font-weight: 400; font-size: 12px; display: block; }
tfoot .desvio.mas { color: var(--rojo); }
tfoot .desvio.menos { color: var(--suave); }
tfoot .desvio.igual { color: var(--verde); }

/* -------------------------------------------------------------- avisos */

.paneles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
@media (max-width: 900px) { .paneles { grid-template-columns: 1fr; } }

section.panel { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 14px 16px; }
section.panel h2 { font-size: 15px; margin: 0 0 10px; }
section.panel .vacio { color: var(--suave); font-size: 14px; }

ul.lista { list-style: none; margin: 0; padding: 0; }
ul.lista > li { padding: 9px 0; border-top: 1px solid var(--linea); font-size: 14px; }
ul.lista > li:first-child { border-top: none; }

.etiqueta {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-right: 6px;
  vertical-align: 1px;
}
.etiqueta.rojo { background: var(--rojo-fondo); color: var(--rojo); }
.etiqueta.ambar { background: var(--ambar-fondo); color: var(--ambar); }
.etiqueta.info { background: #eaeef2; color: var(--suave); }

.quien { font-weight: 600; }

.propuestas { list-style: none; margin: 8px 0 0; padding: 0 0 0 2px; }
.propuestas li {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; font-size: 13.5px; color: #30363d;
}
.propuestas .coste { color: var(--suave); font-size: 12px; white-space: nowrap; }
.propuestas .coste.gratis { color: var(--verde); }
.propuestas .texto { flex: 1; }
.propuestas button { padding: 3px 10px; font-size: 13px; }

/* -------------------------------------------------------------- diálogo */

dialog {
  border: none; border-radius: 12px; padding: 20px;
  box-shadow: 0 12px 40px #0003; min-width: 300px;
}
dialog::backdrop { background: #0006; }
dialog h3 { margin: 0 0 4px; font-size: 16px; }
dialog .sub { color: var(--suave); font-size: 13px; margin: 0 0 16px; }
dialog label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 4px; }
dialog .fila { display: flex; gap: 12px; margin-bottom: 16px; }
dialog input[type=time] { font: inherit; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 6px; }
dialog .acciones { display: flex; gap: 8px; justify-content: flex-end; }
dialog .acciones .borrar { margin-right: auto; color: var(--rojo); border-color: #d1242f44; }

/* ------------------------------------------------------- vista personal */

body.yo {
  background: var(--fondo);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
body.yo > #pantalla-entrar,
body.yo > #pantalla-horario { flex: 1 0 auto; }
.movil { max-width: 560px; margin: 0 auto; padding: 16px; width: 100%; box-sizing: border-box; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.tarjeta h2 { margin: 0 0 2px; font-size: 16px; }
.tarjeta .sub { color: var(--suave); font-size: 13px; margin: 0 0 12px; }
.nav-yo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.nav-yo #salir { margin-left: auto; }
@media (max-width: 380px) {
  .nav-yo #salir { margin-left: 0; width: 100%; }
  .nav-yo button { flex: 1 1 auto; min-height: 44px; }
}

.dia-fila { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); }
.dia-fila:first-of-type { border-top: none; }
.dia-fila .fecha { width: 108px; flex-shrink: 0; }
.dia-fila .fecha strong { display: block; text-transform: capitalize; }
.dia-fila .fecha span { color: var(--suave); font-size: 12px; }
.dia-fila .turnos { flex: 1; }
.dia-fila .turno { display: block; }
.dia-fila .libre { color: var(--suave); }
.dia-fila.hoy { background: #f0f6ff; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.ausente-movil {
  display: inline-block;
  font-weight: 600;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 6px;
}
.dia-fila.ausente-vacaciones { background: #f0fdfa; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.dia-fila.ausente-vacaciones .ausente-movil { background: #ccfbf1; color: #0f766e; }
.dia-fila.ausente-baja { background: #fdf2f8; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.dia-fila.ausente-baja .ausente-movil { background: #fce7f3; color: #9d174d; }
.dia-fila.ausente-permiso { background: #eef2ff; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.dia-fila.ausente-permiso .ausente-movil { background: #e0e7ff; color: #3730a3; }
.dia-fila.ausente-libranza { background: #dafbe1; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.dia-fila.ausente-libranza .ausente-movil { background: #e6f6eb; color: #1a7f37; }
.dia-fila.ausente-festivo { background: #f5f0ff; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.dia-fila.ausente-festivo .ausente-movil { background: #f0e7ff; color: #5a32a3; }

.resumen-horas { display: flex; gap: 20px; }
.resumen-horas div { flex: 1; }
.resumen-horas .cifra { font-size: 24px; font-weight: 600; display: block; }
.resumen-horas .pie { color: var(--suave); font-size: 12px; }

form.entrar { max-width: 320px; margin: 60px auto; }
form.entrar input {
  font: inherit; width: 100%; padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--linea); border-radius: 8px;
}
form.entrar button { width: 100%; padding: 12px; min-height: 44px; }
form.entrar .error { color: var(--rojo); font-size: 14px; min-height: 20px; }

/* Pie: enlace discreto a admin, siempre abajo, usable con el dedo */
.pie-yo {
  flex: 0 0 auto;
  text-align: center;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0));
}
.pie-yo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  color: var(--suave);
  font-size: 13px;
  text-decoration: none;
}
.pie-yo a:hover,
.pie-yo a:active { color: var(--tinta); text-decoration: underline; }

/* Tipos de ausencia: botones grandes, fáciles de pulsar en móvil */
.tipos-ausencia {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
button.tipo-ausencia {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--papel);
}
button.tipo-ausencia.activo {
  background: var(--acento);
  color: #fff;
  border-color: var(--acento);
}
button.enlace-celda {
  background: transparent;
  border: none;
  padding: 4px 0;
  text-align: left;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 36px;
}
button.enlace-celda:hover { color: var(--acento); }

/* Personas: menos columnas, acceso (id+PIN) agrupado, acciones en una fila */
table.personas th.acciones { text-align: right; }
table.personas td, table.personas th.dia { vertical-align: top; padding: 12px 14px; }
table.personas .persona-nombre .nombre-linea { font-weight: 600; }
table.personas .persona-nombre .badges { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
table.personas .pista { display: block; margin-top: 2px; }
table.personas .suave { color: var(--suave); display: block; margin-bottom: 2px; }
table.personas .celda-acceso { min-width: 140px; }
table.personas .acceso-id {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
table.personas .acceso-pin {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--suave);
}
table.personas .celda-contrato strong { font-weight: 600; }
td.acciones-fila {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}
td.acciones-fila button {
  margin: 0;
  min-height: 34px;
  padding: 5px 10px;
  font-size: 13px;
}
@media (max-width: 800px) {
  td.acciones-fila { flex-wrap: wrap; justify-content: flex-start; }
}

/* ------------------------------------------------------- alta de personas */

dialog input[type=text], dialog input[type=date], dialog input[type=number], dialog input:not([type]) {
  font: inherit; padding: 6px 8px; width: 100%;
  border: 1px solid var(--linea); border-radius: 6px;
}
dialog .fila > div { flex: 1; }

.pin-grande {
  font: 600 34px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-align: center;
  margin: 4px 0 12px;
  padding: 14px;
  background: var(--verde-fondo);
  color: var(--verde);
  border-radius: 8px;
}
code.pin-lista {
  font: 600 14px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  background: var(--verde-fondo);
  color: var(--verde);
  padding: 3px 7px;
  border-radius: 5px;
}

header.principal a { text-decoration: none; }
table.cuadrante td button { margin: 4px 2px; }

/* ---------------------------------------------------------- cobertura */

th.col-cobertura, td.cobertura { background: #fbfcfd; border-left: 2px solid #d6dbe1; }
td.cobertura { min-width: 56px; padding: 4px 8px; text-align: center; vertical-align: middle; }
td.cobertura .n { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
td.cobertura.vacia .n { color: #c3c8ce; font-weight: 400; }

/* --------------------------------------------------------- impresión */

.solo-impresion { display: none; }

@media print {
  @page { size: A4 landscape; margin: 10mm; }

  body { background: #fff; font-size: 11px; }

  /* Fuera todo lo que es de trabajo, no de pared: botones, avisos y sugerencias. */
  header.principal, .paneles, .aviso-modo, dialog { display: none !important; }

  main { padding: 0; max-width: none; }

  .solo-impresion { display: block; margin-bottom: 8px; }
  .solo-impresion strong { display: block; font-size: 13px; }
  .solo-impresion span { color: #444; }

  .marco { border: none; border-radius: 0; overflow: visible; }

  table.cuadrante { font-size: 10px; }
  table.cuadrante thead th { position: static; }
  table.cuadrante th, table.cuadrante td { border: 1px solid #999; }
  td.celda { min-width: 0; height: auto; }
  td.celda .horas { padding: 3px 4px; }

  /* En papel el semáforo se pierde; las ausencias sí se dejan con fondo claro. */
  td.celda.rojo, td.celda.ambar { background: #fff !important; }
  td.celda.rojo .horas { font-weight: 700; text-decoration: underline; }
  td.celda.ausente.vacaciones { background: #ccfbf1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  td.celda.ausente.baja { background: #fce7f3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  td.celda.ausente.permiso { background: #e0e7ff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  td.celda.ausente.libranza { background: #e6f6eb !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  td.celda.ausente.festivo { background: #f0e7ff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  td.celda.choque { background: #ffebe9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  th.col-cobertura, td.cobertura { background: #fff !important; }
  tr { break-inside: avoid; }
}