@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --p:#0f766e;--p2:#0d9488;--p3:#ccfbf1;--p4:#f0fdfa;
  --ink:#0f172a;--ink2:#334155;--ink3:#64748b;--ink4:#94a3b8;
  --bg:#f0f4f8;--white:#fff;--border:#e2e8f0;
  --red:#ef4444;--redbg:#fef2f2;--redbd:#fecaca;
  --amber:#f59e0b;--amberbg:#fffbeb;--amberbd:#fde68a;
  --green:#10b981;--greenbg:#f0fdf4;--greenbd:#a7f3d0;
  --blue:#3b82f6;--bluebg:#eff6ff;--bluebd:#bfdbfe;
  --purple:#8b5cf6;--purplebg:#f5f3ff;
  --font:'Space Grotesk',sans-serif;--mono:'JetBrains Mono',monospace;
  --r:10px;--r2:14px;--sh:0 1px 3px rgba(0,0,0,.08);--sh2:0 6px 20px rgba(0,0,0,.13);
}
/* html/body nunca deben desplazarse: login y welcome-banner son overlays
   fixed con su propio scroll, y dentro de #app el scroll lo maneja SOLO
   .main. Si el body pudiera desplazarse, arrastraba la sidebar con él. */
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:13px}
/* Antes eran tintes casi blancos (ej. #f0f7ff) — apenas se notaba dónde
   terminaba un día y empezaba el siguiente en la tabla. Se oscurecieron a
   un tono medio (nivel "200" de la paleta), manteniendo un color fijo por
   día de la semana, pero ahora con contraste real entre filas consecutivas. */
.day-lun{background:#bfdbfe}.day-mar{background:#bbf7d0}.day-mie{background:#e9d5ff}
.day-jue{background:#fed7aa}.day-vie{background:#fecaca}.day-sab{background:#cbd5e1}.day-dom{background:#fde68a}
.sync-dot{width:7px;height:7px;border-radius:50%;background:#94a3b8;display:inline-block;margin-right:4px;transition:.3s}
.sync-dot.ok{background:#10b981}.sync-dot.err{background:#ef4444}.sync-dot.syncing{background:#f59e0b;animation:pulse .8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:white;padding:10px 18px;border-radius:10px;font-size:12px;font-weight:500;display:none;z-index:999;box-shadow:var(--sh2);animation:tin .2s}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.empty-state{text-align:center;padding:28px;color:var(--ink3);font-size:12px}
.loading-row{text-align:center;padding:20px;color:var(--ink3);font-size:12px}

@media(max-width:600px){.report-grid{grid-template-columns:1fr}.fg4,.fg3{grid-template-columns:repeat(2,1fr)}.tb-title{display:none}.sync-status{display:none}}
/* En celulares angostos, 2 columnas de formulario ya quedan muy apretadas
   (campo + etiqueta en ~140px) — se bajan todas a 1 sola columna. */
@media(max-width:420px){.fg4,.fg3{grid-template-columns:1fr}}
@media print{
  @page{size:landscape;margin:12mm}
  html,body{overflow:visible!important;height:auto!important}
  #app{overflow:visible!important;height:auto!important}
  #app>.topbar,#app>.app-body>.sidebar,#datos-filter-bar,#tbl-footer,#tbl-pagination,.tbl-wrap .btn-danger,#del-col-h,#edit-col-h,#dup-col-h{display:none!important}
  .tbl-wrap{border:none;box-shadow:none;border-radius:0}
  /* Solo se imprime "Datos" — sin importar cuántas secciones nuevas se
     agreguen a la app en el futuro, todas quedan ocultas por defecto y
     únicamente #sec-datos se fuerza a visible. */
  .section{display:none!important}
  #sec-datos{display:block!important}
  #sec-datos .sec-hdr{display:none!important}
  #datos-print-header{display:block!important;margin-bottom:10px}
  #datos-print-header h1{font-size:19px;font-weight:700;color:#000}
  #datos-print-header p{font-size:11px;color:#444;margin-top:2px}
  table{font-size:10px}
  th,td{padding:4px 6px!important}
  .main{padding:0}
  .app-body{height:auto;overflow:visible!important}
  .main{overflow:visible!important}
}