/* Estilos complementarios a Tailwind */
* { scrollbar-width: thin; scrollbar-color: #1e2a3f transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #1e2a3f; border-radius: 4px; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.card { background: #0d1320; border: 1px solid #18233a; border-radius: 0.9rem; }
.nav-item { transition: all .15s; }
.nav-item.active { background: linear-gradient(90deg, rgba(26,130,240,.18), transparent); color: #fff; border-left: 3px solid #1a82f0; }
.nav-item:not(.active):hover { background: rgba(255,255,255,.04); }
.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform:none;} }
.spin { animation: sp 1s linear infinite; } @keyframes sp { to { transform: rotate(360deg);} }
table.data th { font-weight: 600; color: #7d8aa3; text-align: left; padding: .6rem .75rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
table.data td { padding: .65rem .75rem; border-top: 1px solid #141e30; font-size: .85rem; }
table.data tr:hover td { background: rgba(255,255,255,.02); }
.pill { font-size: .68rem; padding: .12rem .55rem; border-radius: 999px; font-weight: 600; display:inline-flex; align-items:center; gap:.3rem; }
input, select, textarea { background:#0a0f1a; border:1px solid #1c2941; border-radius:.55rem; padding:.55rem .7rem; color:#e2e8f0; width:100%; outline:none; }
input:focus, select:focus, textarea:focus { border-color:#1a82f0; }
.btn { border-radius:.6rem; padding:.55rem 1rem; font-weight:600; font-size:.85rem; transition:.15s; cursor:pointer; }
.btn-primary { background:#1a82f0; color:#fff; } .btn-primary:hover { background:#0b66cc; }
.btn-ghost { background:#111a2b; color:#cbd5e1; border:1px solid #1c2941;} .btn-ghost:hover{ background:#16223a;}

/* ---------- Responsive / móvil ---------- */
#hamburger { display:none; }
#backdrop { display:none; }
@media (max-width: 820px) {
  #hamburger { display:inline-flex; }
  #sidebar { position:fixed; left:0; top:0; bottom:0; z-index:50; height:100dvh; transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 30px rgba(0,0,0,.6); }
  #sidebar.open { transform:translateX(0); }
  #backdrop.open { display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:40; }
  /* Tablas con scroll horizontal en pantallas chicas */
  table.data { display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  table.data td, table.data th { white-space:nowrap; }
  /* Modales y cards más cómodos */
  .card { border-radius:.75rem; }
  main { padding:0.9rem !important; }
}