/* Catálogo de componentes base (ligero) */
/* Botones, tarjetas, formularios ya definidos en paleta.css; aquí extendemos variantes si hace falta */
.btn-row{ display:flex; gap: var(--space-3); align-items:center; }
.toolbar{ display:flex; gap:var(--space-3); align-items:center; justify-content:space-between; margin: var(--space-4) 0; }
.table-wrap{ overflow:auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.badge{ padding:2px 8px; border-radius: 999px; border:1px solid var(--color-border); font-size: var(--text-xs); }
/* ===== Responsive helpers para tablas, modales y formularios (mobile) ===== */

/* Tablas horizontales suaves en pantallas chicas (para .tbl que usamos en Consultar) */
.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-row { min-width: 640px; } /* evita que las columnas se amontonen */

/* Modal ficha: ocupar más pantalla en móviles */
@media (max-width: 480px) {
  #fichaModal .themed-card {
    width: 96% !important;
    height: 92vh;
  }
}

/* Formularios y botones: layout en una sola columna y botones cómodos */
@media (max-width: 640px) {
  .grid-2, .grid-3 { 
    display: block; 
  }
  .btn-row { 
    flex-wrap: wrap; 
    gap: 8px; 
  }
  .btn-row .themed-btn { 
    flex: 1 1 100%; 
  }
}

/* (Opcional) mejora de accesibilidad: agranda los toques en inputs y selects en móvil */
@media (max-width: 640px) {
  input, select, textarea {
    min-height: 44px; /* tamaño mínimo recomendado por Apple/Google */
  }
}
/* Botón pequeño (para pantallas y filtros) */
.themed-btn.sm{
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 10px;
  min-height: auto;
  width: auto;
}