/* Mesa de Compras · AmazingMacros — app.css (MVP agrupado + selección) */

/* =====================
   Design tokens
   ===================== */
:root{
  --bg:#0f1115;
  --surface:#141824;
  --surface2:#0d1017;
  --line:#272f3f;
  --text:#e8ecf3;
  --muted:#aab1c2;
  --accent:#1dd87e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(circle at top, #141a2a 0%, var(--bg) 55%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =====================
   Header
   ===================== */
header{
  background-color:rgba(2,6,23,.6);
  border-bottom:1px solid rgba(39,47,63,.6);
  backdrop-filter:blur(8px);
}

/* =====================
   Cards & Surfaces
   ===================== */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

.kpi{ background:#111523; border:1px solid #222a3d; border-radius:1rem; }

/* =====================
   Buttons & Pills
   ===================== */
.btn{
  border-radius:12px;
  padding:.6rem .9rem;
  border:1px solid var(--line);
  background:#192035;color:var(--text);
  transition:background .15s ease, transform .06s ease;
}
.btn:hover{background:#1e2740}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn-prim{ background:var(--accent); color:#0f1115; border-color:#19c771; }

.pill{ border-radius:999px; padding:.25rem .6rem; border:1px solid #2b3550; display:inline-block; }
.badge{ border:1px solid var(--line); border-radius:999px; padding:.15rem .5rem; font-size:.75rem; color:var(--muted); background:#0e1424; }

/* =====================
   Inputs
   ===================== */
.input{
  background:#0d1323;border:1px solid #232a43;border-radius:12px;padding:.6rem .8rem;color:#e5e7eb;width:100%;
}
.input::placeholder{color:#94a3b8}
.input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.25)}

/* =====================
   Table
   ===================== */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ color:#cbd5e1; font-weight:600; text-align:left; }
.tbl td,.tbl th{ border-bottom:1px solid #1f2636; padding:.5rem .75rem; }

/* Bloques sticky (segunda fila del thead) */
thead.sticky{ position:sticky; z-index:10; }
thead.sticky{ top:64px; } /* compensa la altura del header */

.req-sep td{ border-top:3px solid var(--line); }
.req-row-muted{ opacity:.9; }
.req-id{ font-weight:700; }
.req-badge{ display:inline-block; padding:6px 12px; border-radius:999px; background:rgba(100,149,237,.15); }
.req-item-row td{ padding-top:6px; padding-bottom:6px; }

/* Estados (S/E/O/P) */
.state-S{ background:rgba(56,189,248,.12); color:#7dd3fc; }
.state-E{ background:rgba(245,158,11,.12); color:#fbbf24; }
.state-O{ background:rgba(167,139,250,.12); color:#c4b5fd; }
.state-P{ background:rgba(34,197,94,.12); color:#86efac; }

/* Columnas ocultables: usamos clases para th/td */
.col-fecha.hidden, .col-req.hidden, .col-sol.hidden, .col-finca.hidden, .col-centro.hidden{ display:none; }

/* Modal backdrop */
.modal-backdrop{ background:rgba(0,0,0,.6); }

/* Responsive tweaks */
@media (max-width:640px){
  .modal-full{ width:100vw!important; height:100vh!important; border-radius:0!important; }
}