/* ========= Responsive automático (tablas + formularios) ========= */

/* Tipos y colores compatibles con tu tema actual */
:root{
  --ink:#dce3ef;
  --ink-dim:#a2b1c7;
  --accent:#4aa2ff;
}

/* Texto fluido y resets suaves */
html{font-size:16px}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
table{width:100%; border-collapse:collapse; font-size:clamp(13px,1.2vw,15px)}
th,td{padding:.65rem .75rem; border-bottom:1px solid rgba(255,255,255,.06); text-align:left}
thead th{color:var(--ink-dim); font-weight:600}

/* 1) Scroll horizontal automático sin tocar HTML */
.card .body, .container{overflow-x:auto}

/* 2) Apilado en móvil: lo activamos con .stack (la pondrá el JS) */
@media (max-width: 680px){
  table.stack{border:0}
  table.stack thead{display:none}
  table.stack tr{display:block; background:rgba(255,255,255,.02); border-radius:12px; margin:.5rem 0; padding:.35rem .25rem}
  table.stack td{display:flex; gap:.6rem; border:0; padding:.5rem .75rem}
  table.stack td::before{
    content: attr(data-label);
    min-width: 42%;
    color: var(--ink-dim);
  }
}

/* 3) Formularios: que todo ocupe ancho, alineado y sin desbordes */
form input, form select, form textarea{
  width:100%; max-width:100%;
  background:#0b111a; color:var(--ink);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:.6rem .75rem; outline:none;
}
form input:focus, form select:focus, form textarea:focus{
  border-color:rgba(74,162,255,.6);
  box-shadow:0 0 0 3px rgba(74,162,255,.2);
}
form textarea{min-height:120px; resize:vertical}

/* 4) Grilla automática para formularios (el JS añade .auto-grid) */
form.auto-grid{display:grid; gap:16px; grid-template-columns: repeat(12,minmax(0,1fr))}
form.auto-grid > *{min-width:0}
@media (min-width: 981px){
  /* heurística: los elementos simples van “de 6 en 6” */
  form.auto-grid > *:not(.full){grid-column: span 6}
}
@media (max-width: 980px){
  form.auto-grid{grid-template-columns:1fr}
}

/* helper por si el JS marca bloques de ancho completo */
.full{grid-column:1 / -1}
