/* Fichajes por establecimiento (Operaciones). Una columna en el celular, grilla en la PC. */
:root{
  --bg:#f6f4f7; --surface:#ffffff; --sunk:#efebf1; --line:#e2dbe6; --fg:#1f1a24; --muted:#6c6275; --faint:#9a90a3;
  --menta:#25976f; --menta-soft:#ddf3ea; --rosa:#d4567e; --rosa-soft:#fde6ee; --durazno:#d9793f; --durazno-soft:#fdeee3;
  --lila:#7d63c9; --lila-soft:#efe9fc; --gris-soft:#ece8ef;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --f-body:"Public Sans","Segoe UI",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141116; --surface:#1d1920; --sunk:#26212a; --line:#352e3a; --fg:#efe9f2; --muted:#a99fb1; --faint:#7a7082;
  --menta:#5fd0a8; --menta-soft:#163a2e; --rosa:#f08aab; --rosa-soft:#3b1e2a; --durazno:#f2a676; --durazno-soft:#3b2a1e;
  --lila:#b8a3f2; --lila-soft:#2a2342; --gris-soft:#2a2530; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#141116; --surface:#1d1920; --sunk:#26212a; --line:#352e3a; --fg:#efe9f2; --muted:#a99fb1; --faint:#7a7082;
  --menta:#5fd0a8; --menta-soft:#163a2e; --rosa:#f08aab; --rosa-soft:#3b1e2a; --durazno:#f2a676; --durazno-soft:#3b2a1e;
  --lila:#b8a3f2; --lila-soft:#2a2342; --gris-soft:#2a2530; color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.45}
[hidden]{display:none!important}
.wrap{max-width:1400px;margin:0 auto;padding-inline:16px;padding-block:calc(18px + env(safe-area-inset-top,0px)) 60px;display:grid;gap:18px}
h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(1.5rem,4vw,2rem)}
p{margin:0}
.muted,.sub{color:var(--muted)}
.eyebrow{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.top{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap}
.acc{display:flex;gap:8px}
.btn{font:inherit;font-weight:600;font-size:.9rem;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:12px;padding:9px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--fg)}
.btn.sm{padding:7px 12px;font-size:.85rem}
.btn.primary{background:var(--menta);border-color:var(--menta);color:#fff}
:focus-visible{outline:2px solid var(--lila);outline-offset:2px}
/* Ingreso */
.login{max-width:380px;width:100%;margin:30px auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;display:grid;gap:14px}
.field{display:grid;gap:5px;font-size:.82rem;font-weight:600;color:var(--muted)}
.field input{font:inherit;font-size:1rem;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.error{color:var(--rosa);font-size:.88rem}
/* Encabezado del día */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px 24px}
@media (max-width:720px){.hero{grid-template-columns:1fr}}
.fecha{display:inline-block;background:var(--lila-soft);color:var(--lila);font-weight:700;font-size:.8rem;border-radius:999px;padding:4px 12px}
.hero h2{font-size:clamp(1.4rem,3.4vw,2rem);margin-top:8px}
.sub{margin-top:4px;font-size:.9rem}
.envivo{display:inline-flex;align-items:center;gap:6px;background:var(--rosa-soft);color:var(--rosa);font-weight:700;font-size:.72rem;border-radius:999px;padding:2px 10px;text-transform:uppercase;letter-spacing:.06em}
.envivo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rosa);animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.envivo::before{animation:none}}
.prog{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden;margin-top:12px;max-width:420px}
.prog i{display:block;height:100%;width:3%;background:var(--lila);transition:width .4s}
.resumen{display:grid;grid-template-columns:repeat(4,minmax(78px,1fr));gap:10px}
@media (max-width:720px){.resumen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.num{border-radius:16px;padding:12px 14px;display:grid;gap:2px}
.num b{font-family:var(--f-display);font-size:1.8rem;line-height:1}
.num span{font-size:.78rem;font-weight:600}
.num.ok{background:var(--menta-soft);color:var(--menta)} .num.tarde{background:var(--durazno-soft);color:var(--durazno)}
.num.falta{background:var(--rosa-soft);color:var(--rosa)} .num.luego{background:var(--gris-soft);color:var(--muted)}
/* Herramientas */
.herramientas{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.herramientas input{font:inherit;flex:1 1 240px;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--fg)}
.filtros{display:flex;gap:6px}
.filtros button{font:inherit;font-size:.86rem;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:7px 14px;cursor:pointer}
.filtros button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* Tarjetas de establecimientos */
.estab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1050px){.estab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.estab-grid{grid-template-columns:1fr}}
.estab{font:inherit;color:inherit;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:12px;transition:border-color .15s,transform .15s}
.estab:hover{border-color:var(--lila);transform:translateY(-1px)}
.estab.mal{border-left:5px solid var(--rosa)}
.estab h3{font-size:1rem;line-height:1.25}
.barra{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--sunk);gap:2px}
.barra i{display:block;height:100%}
.barra .ok{background:var(--menta)} .barra .tarde{background:var(--durazno)} .barra .falta{background:var(--rosa)} .barra .luego{background:var(--gris-soft)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:.78rem;font-weight:700;border-radius:999px;padding:3px 10px}
.chip.ok{background:var(--menta-soft);color:var(--menta)} .chip.tarde{background:var(--durazno-soft);color:var(--durazno)}
.chip.falta{background:var(--rosa-soft);color:var(--rosa)} .chip.luego{background:var(--gris-soft);color:var(--muted)}
.vacio{text-align:center;padding:30px;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:18px}
/* Grupos */
.migas{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.migas h2{font-size:1.4rem}
.estab .cuantos{font-size:.8rem;color:var(--muted)}
/* Detalle de un establecimiento */
.det-cab{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.det-cab h2{font-size:1.4rem}
.leyenda{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin:14px 0}
.leyenda span{display:inline-flex;gap:6px;align-items:center}
.leyenda i{width:12px;height:12px;border-radius:50%;display:inline-block}
.leyenda i.ok{background:var(--menta)} .leyenda i.tarde{background:var(--durazno)} .leyenda i.falta{background:var(--rosa)} .leyenda i.luego{background:var(--faint)}
.personas{display:grid;gap:4px}
.p{display:grid;grid-template-columns:104px 26px minmax(0,1.2fr) minmax(0,1.6fr) 200px;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 12px;min-height:40px}
@media (max-width:760px){.p{grid-template-columns:26px minmax(0,1fr) auto}.p .turno{grid-column:1/-1;font-size:.76rem}.p .info{grid-column:2/-1}}
.p .turno{font-family:var(--f-mono);font-weight:500;color:var(--muted);font-size:.86rem;white-space:nowrap}
.p .icono{width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.p .icono svg{width:14px;height:14px}
.p.ok .icono{background:var(--menta-soft);color:var(--menta)} .p.tarde .icono{background:var(--durazno-soft);color:var(--durazno)}
.p.falta .icono{background:var(--rosa-soft);color:var(--rosa)} .p.luego .icono{background:var(--gris-soft);color:var(--faint)}
.p .nm{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p .sb{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p .info{min-width:0}
.p .por{font-size:.76rem;border-radius:7px;padding:2px 8px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.p .por.foto{background:var(--lila-soft);color:var(--lila)} .p .por.rech{background:var(--durazno-soft);color:var(--durazno)} .p .por.nada{background:var(--sunk);color:var(--muted)}
.p .est{font-size:.76rem;font-weight:700;border-radius:999px;padding:2px 10px;white-space:nowrap;justify-self:end}
.p.ok .est{background:var(--menta-soft);color:var(--menta)} .p.tarde .est{background:var(--durazno-soft);color:var(--durazno)}
.p.falta .est{background:var(--rosa-soft);color:var(--rosa)} .p.luego .est{background:var(--gris-soft);color:var(--muted)}

/* Notas sobre personas (compartido entre RRHH y Operaciones) */
.nota-btn{font:inherit;font-size:.72rem;font-weight:700;border:1px dashed var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:1px 9px;cursor:pointer;white-space:nowrap}
.nota-btn:hover{border-color:var(--lila);color:var(--lila)}
.nota-chip{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:1px 9px;background:var(--lila-soft);color:var(--lila);white-space:nowrap;margin-right:4px}
.nota-chip.just{background:var(--menta-soft);color:var(--menta)}
dialog#dlgNota{width:min(560px,94vw);border:0;border-radius:20px;padding:20px 22px;background:var(--surface);color:var(--fg);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog#dlgNota::backdrop{background:rgba(10,10,15,.55)}
.nota-form{display:grid;gap:12px}
.nota-form h3{font-size:1rem;margin:4px 0 0}
.nota-cab{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.nota-cab h2{font-size:1.2rem}
.nota-sub{color:var(--muted);font-size:.82rem;margin:0}
.nota-lista{display:grid;gap:8px}
.nota-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;background:var(--lila-soft);border-radius:12px;padding:10px 12px;font-size:.88rem}
.nota-item small{color:var(--muted)}
.nota-campo{display:grid;gap:4px;font-size:.8rem;font-weight:600;color:var(--muted)}
.nota-campo select,.nota-campo input,.nota-campo textarea{font:inherit;font-size:.92rem;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.nota-error{color:var(--rosa);font-size:.86rem;margin:0}
.nota-acc{display:flex;justify-content:flex-end}

/* Justificados por una nota */
.p.just .icono{background:var(--menta-soft);color:var(--menta)} .p.just .est{background:var(--menta-soft);color:var(--menta)}
.chip.just{background:var(--lila-soft);color:var(--lila)} .barra .just{background:var(--lila)}
.leyenda i.just{background:var(--lila)}
.p .nm-fila{display:flex;gap:6px;align-items:center;min-width:0}

/* Vincular la app de autenticación */
dialog#dlgVincular{width:min(460px,94vw);border:0;border-radius:20px;padding:20px 22px;background:var(--surface);color:var(--fg);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog#dlgVincular::backdrop{background:rgba(10,10,15,.6)}
.vin{display:grid;gap:12px}
.vin-cab{display:flex;justify-content:space-between;gap:12px;align-items:center}
.vin-cab h2{font-size:1.2rem;margin:0}
.vin-sub{color:var(--muted);font-size:.85rem;margin:0}
.vin-sub code{font-family:var(--f-mono);color:var(--fg);word-break:break-all}
.vin-pasos{margin:0;padding-left:20px;display:grid;gap:4px;font-size:.9rem}
.vin-qr{display:grid;place-items:center;background:#fff;border-radius:14px;padding:12px;justify-self:center}
.vin-campo{display:grid;gap:4px;font-size:.8rem;font-weight:600;color:var(--muted)}
.vin-campo input{font:inherit;font-size:1.2rem;letter-spacing:.2em;text-align:center;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px}
.vin-acc{display:flex;justify-content:flex-end}
.vin-error{color:var(--rosa);font-size:.88rem;margin:0}

/* Franja horaria de entrada */
.franja{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.franja input{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 8px}