/* Centro de Trabajo — FIXMOBILE.
   Pensado para una computadora de mostrador: objetivos grandes, alto
   contraste bajo luz de tienda, y nada que obligue a leer letra chica. */

:root{
  --ground:#F3F3F6; --surface:#FFFFFF; --surface-2:#EAEAF0;
  --ink:#1B1C26; --ink-2:#4B4D5E; --ink-3:#7B7D91; --rule:#D8D8E2;
  --accent:#4A45B8; --accent-2:#EDECF8;
  --ok:#2F6B4F; --ok-soft:#E2EFE8;
  --warn:#8A5A0B; --warn-soft:#F7EEDC;
  --bad:#A8342A; --bad-soft:#F7E4E1;
  --shadow:0 1px 2px rgba(27,28,38,.07), 0 12px 32px -20px rgba(27,28,38,.4);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#111219; --surface:#1A1B25; --surface-2:#23242F;
    --ink:#E9E9F0; --ink-2:#ADAEBE; --ink-3:#7E8092; --rule:#2E3040;
    --accent:#9490F0; --accent-2:#232242;
    --ok:#79C39B; --ok-soft:#1B2C24;
    --warn:#DFB264; --warn-soft:#2E2617;
    --bad:#E28A7E; --bad-soft:#33201D;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -20px rgba(0,0,0,.9);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:"Familjen Grotesk",Manrope,sans-serif;margin:0}
.mono{font-family:"JetBrains Mono",monospace}
.chico{font-size:.75rem}
button{font:inherit;cursor:pointer}
input,select{font:inherit;color:inherit}

/* ---------------- login ---------------- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(400px,100%);display:flex;flex-direction:column;gap:14px;text-align:center}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:28px;box-shadow:var(--shadow)}
.logo-grande{
  font-family:"Familjen Grotesk",sans-serif;font-weight:700;font-size:1.3rem;
  background:var(--accent);color:#fff;padding:10px 0;border-radius:6px;letter-spacing:.05em;
}
.login h1{font-size:1.5rem;font-weight:700}
.login .sub{color:var(--ink-3);font-size:.9rem;margin:0}
.login label{display:flex;flex-direction:column;gap:5px;text-align:left;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.login input{
  border:1px solid var(--rule);border-radius:5px;padding:12px;background:var(--ground);
  min-height:46px;
}

/* ---------------- estructura ---------------- */
.topbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.brandline{display:flex;align-items:center;gap:12px}
.logo{
  font-family:"Familjen Grotesk",sans-serif;font-weight:700;font-size:.95rem;
  background:var(--accent);color:#fff;padding:5px 9px;border-radius:4px;
}
.suc{font-family:"JetBrains Mono",monospace;font-size:.88rem;font-weight:500}
.topright{display:flex;align-items:center;gap:16px}
.fecha{font-size:.82rem;color:var(--ink-3)}
.link{background:none;border:none;color:var(--accent);font-weight:600;font-size:.85rem;padding:4px}

.offline{
  background:var(--warn-soft);border-bottom:1px solid var(--rule);
  padding:10px 20px;display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--warn);
}
.offline .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);flex-shrink:0}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);padding:0 20px;background:var(--surface-2)}
.tab{
  background:none;border:none;padding:11px 16px;font-size:.9rem;font-weight:600;
  color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab.activo{color:var(--accent);border-bottom-color:var(--accent)}
.badge{
  background:var(--bad);color:#fff;border-radius:10px;padding:1px 7px;
  font-size:.72rem;font-weight:700;margin-left:5px;
}

.vista{max-width:1000px;margin:0 auto;padding:22px 20px 60px;display:flex;flex-direction:column;gap:18px}
.nota-vista{color:var(--ink-3);font-size:.86rem;margin:0}

/* ---------------- tiles ---------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.tile{
  border:1px solid var(--rule);border-left:3px solid var(--sv,var(--rule));
  border-radius:4px;padding:12px 14px;background:var(--surface);display:flex;flex-direction:column;
}
.tile .n{font-family:"Familjen Grotesk",sans-serif;font-size:1.75rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.tile .l{font-size:.79rem;color:var(--ink-3);line-height:1.35}
.tile.bad{--sv:var(--bad)} .tile.bad .n{color:var(--bad)}
.tile.warn{--sv:var(--warn)} .tile.warn .n{color:var(--warn)}
.tile.ok{--sv:var(--ok)} .tile.ok .n{color:var(--ok)}

.cta{
  background:var(--accent);color:#fff;border:none;border-radius:6px;padding:18px 22px;
  font-family:"Familjen Grotesk",sans-serif;font-size:1.1rem;font-weight:600;text-align:left;
  display:flex;justify-content:space-between;align-items:center;width:100%;
}
.cta span{font-size:.82rem;font-weight:500;opacity:.85;font-family:Manrope,sans-serif}

.listahead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--rule);padding-bottom:6px}
.listahead .t{font-family:"Familjen Grotesk",sans-serif;font-weight:600;font-size:.95rem}
.listahead .v{font-size:.8rem;color:var(--ink-3)}

.lista{display:flex;flex-direction:column}
.fila{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:5px 14px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--rule);
}
.fila:last-child{border-bottom:none}
.fila .folio{font-family:"JetBrains Mono",monospace;font-size:.85rem;font-weight:500}
.fila .folio.falta{color:var(--bad)}
.fila .quien{font-size:.88rem;color:var(--ink-2);min-width:0}
.fila .quien b{color:var(--ink);font-weight:600}
.est{
  font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.06em;
  padding:3px 8px;border-radius:2px;white-space:nowrap;background:var(--surface-2);color:var(--ink-3);
}
.est.ok{background:var(--ok-soft);color:var(--ok)}
.est.warn{background:var(--warn-soft);color:var(--warn)}
.est.bad{background:var(--bad-soft);color:var(--bad)}

/* ---------------- pendientes ---------------- */
.pend{display:flex;flex-direction:column;gap:7px}
.pl{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:6px 14px;align-items:center;
  border:1px solid var(--rule);border-left:3px solid var(--sv,var(--rule));border-radius:4px;
  padding:12px 15px;background:var(--surface);
}
.pl.ROJO{--sv:var(--bad)} .pl.AMBAR{--sv:var(--warn)} .pl.GRIS{--sv:var(--ink-3)}
.pl .dias{font-family:"JetBrains Mono",monospace;font-size:.8rem;font-weight:700;min-width:2.7rem;text-align:right}
.pl.ROJO .dias{color:var(--bad)} .pl.AMBAR .dias{color:var(--warn)} .pl.GRIS .dias{color:var(--ink-3)}
.pl .q{display:flex;flex-direction:column;gap:1px;min-width:0}
.pl .q b{font-size:.93rem;font-weight:600}
.pl .q span{font-size:.81rem;color:var(--ink-3)}
.pl .ir{background:none;border:none;font-size:.82rem;font-weight:600;color:var(--accent);white-space:nowrap}

.vacio{
  border:1px dashed var(--rule);border-radius:6px;padding:34px 20px;text-align:center;
  color:var(--ink-3);font-size:.9rem;
}

/* ---------------- panel ---------------- */
.panel-fondo{position:fixed;inset:0;background:rgba(20,20,30,.45);z-index:40}
.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(720px,100%);z-index:50;
  background:var(--surface);border-left:1px solid var(--rule);overflow-y:auto;
  box-shadow:-8px 0 40px -20px rgba(0,0,0,.5);
}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 22px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--surface);z-index:1;
}
.panel-head h2{font-size:1.15rem;font-weight:600}

.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo.full,.firma.full,.error.full{grid-column:1/-1}
.campo label{font-size:.75rem;font-weight:600;color:var(--ink-2);display:flex;gap:6px;align-items:center}
.req{font-family:"JetBrains Mono",monospace;font-size:.6rem;background:var(--bad-soft);color:var(--bad);padding:1px 5px;border-radius:2px}
.opt{font-family:"JetBrains Mono",monospace;font-size:.6rem;background:var(--surface-2);color:var(--ink-3);padding:1px 5px;border-radius:2px}
.campo input,.campo select{
  border:1px solid var(--rule);border-radius:5px;padding:11px 12px;background:var(--ground);
  min-height:46px;width:100%;
}
.campo input:focus-visible,.campo select:focus-visible,.login input:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;
}
.segs{display:flex;border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.segs div{
  flex:1;text-align:center;padding:12px 8px;font-size:.85rem;font-weight:600;
  color:var(--ink-2);border-right:1px solid var(--rule);cursor:pointer;user-select:none;
}
.segs div:last-child{border-right:none}
.segs div.on{background:var(--accent);color:#fff}

.aviso{
  grid-column:1/-1;background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn);
  border-radius:5px;padding:12px 14px;font-size:.87rem;
}
.aviso button{
  display:block;margin-top:8px;background:var(--warn);color:#fff;border:none;
  border-radius:4px;padding:8px 14px;font-size:.82rem;font-weight:600;
}

.firma{
  grid-column:1/-1;border-top:1px solid var(--rule);padding-top:16px;
  display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
}
.firma label{display:block;font-size:.75rem;font-weight:600;color:var(--ink-2);margin-bottom:5px}
input.nip{
  width:150px;letter-spacing:.5em;font-size:1.3rem;text-align:center;
  border:1px solid var(--rule);border-radius:5px;padding:9px;background:var(--ground);min-height:50px;
}
.btn-primario{
  background:var(--accent);color:#fff;border:none;border-radius:6px;padding:15px 28px;
  font-family:"Familjen Grotesk",sans-serif;font-weight:600;font-size:1rem;
}
.btn-primario[disabled]{opacity:.55}
.btn-secundario{
  background:none;border:1px solid var(--accent);color:var(--accent);border-radius:6px;
  padding:11px 20px;font-weight:600;font-size:.9rem;margin-top:10px;
}
.error{color:var(--bad);font-size:.87rem;font-weight:600;margin:0}

.qr-zona{
  margin:0 22px 30px;border:1px dashed var(--accent);background:var(--accent-2);border-radius:6px;
  padding:18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;
}
.qr-zona img{width:190px;height:190px;border-radius:6px;background:#fff;padding:8px}
.qr-txt{flex:1;min-width:220px}
.qr-txt b{font-family:"Familjen Grotesk",sans-serif;font-size:1rem;display:block;margin-bottom:4px}
.qr-txt p{font-size:.86rem;color:var(--ink-2);margin:0 0 6px}

@media (max-width:700px){
  .form{grid-template-columns:1fr}
  .fila{grid-template-columns:1fr auto}
  .pl{grid-template-columns:auto 1fr}
  .pl .ir{grid-column:2;justify-self:start}
}

/* El atributo hidden tiene que ganarle a cualquier display de las clases.
   Sin esto, la pantalla de login seguia ocupando el alto completo aun
   estando oculta, y la aplicacion quedaba empujada abajo del pliegue.
   Encontrado en la primera instalacion real, 27-ago-2026. */
[hidden] { display: none !important; }