/* ===================================================================
 * Duplátano — Optimizaciones móvil (<576px)
 * Pensado para operarios en campo con guantes: tap targets ≥ 44px,
 * texto legible al sol, formularios cortos y acciones siempre visibles.
 * Sin tocar HTML; todo se aplica vía cascada sobre Bootstrap 5.
 * =================================================================== */

@media (max-width: 575.98px) {

  /* --- Tipografía y aire general --- */
  body { font-size: 15px; }
  h1.h3, h1.h4 { font-size: 1.25rem; }

  .container { padding-left: 12px; padding-right: 12px; }

  /* --- Cards --- */
  .card-header { padding: .75rem 1rem; }
  .card-body   { padding: 1rem; }

  /* --- Topbar: email no rompe layout --- */
  .topbar .text-muted.small { display: none; }
  .topbar .navbar-brand img { height: 42px; }

  /* --- Touch targets: botones cómodos --- */
  .btn-sm {
    padding: .5rem .75rem;     /* 44px aprox altura */
    font-size: .9rem;
  }
  .btn  { min-height: 44px; }

  /* --- Inputs cómodos en móvil --- */
  .form-control-sm,
  .form-select-sm {
    padding: .5rem .75rem;
    font-size: 1rem;            /* evita zoom de iOS al enfocar */
    min-height: 44px;
  }

  /* iOS hace zoom si el input tiene <16px. Forzamos 16px en focusables. */
  input, select, textarea { font-size: 16px !important; }

  /* --- Listados CRUD: legibilidad + acciones apiladas --- */
  table.js-sort-table th,
  table.js-sort-table td {
    padding: .5rem .5rem;
    font-size: 13px;
  }
  table.js-sort-table th { white-space: nowrap; }

  /* Acciones por fila: apilar verticalmente para evitar overflow */
  table.js-sort-table td .btn-sm + .btn-sm,
  table.js-sort-table td form.d-inline {
    display: block;
    margin-top: 4px;
  }
  table.js-sort-table td .btn-sm {
    width: 100%;
    text-align: center;
  }

  /* Buscador full-width en cabecera */
  .js-table-search { min-width: 0 !important; width: 100%; }
  .card-header .ms-auto { width: 100%; margin-top: .5rem; }

  /* --- Formulario + listado: más respiro entre cards apiladas --- */
  .row.g-3 > .col-lg-4,
  .row.g-3 > .col-lg-5,
  .row.g-3 > .col-lg-6,
  .row.g-3 > .col-lg-7,
  .row.g-3 > .col-lg-8 { margin-bottom: 1rem; }

  /* --- Botones del form: el primario ocupa toda la línea --- */
  form .col-12.d-flex.gap-2 { flex-wrap: wrap; }
  form .col-12.d-flex.gap-2 > .btn { flex: 1 1 100%; }

  /* --- Dashboard: KPIs en 2 columnas en lugar de 4 --- */
  .k-card .k-value { font-size: 1.5rem; }

  /* --- Accesos rápidos del dashboard: stack vertical sin gap interno --- */
  .d-grid.gap-2 .btn-outline-success { padding: .75rem .5rem; }

  /* --- Tabla del libro de inventario en móvil: texto pequeño tabular --- */
  .libro-tabla, .libro-tabla th, .libro-tabla td { font-size: 12.5px; padding: .4rem .5rem; }
  .libro-tabla td.num { font-size: 13px; }

  /* --- Chat IA: ocupa pantalla completa útil --- */
  .ai-chat { height: calc(100vh - 130px) !important; }
  .ai-msg__bubble { max-width: 92%; }
  .ai-chat__textarea { min-height: 60px; }

  /* --- Alertas oficiales (dashboard + novedades): texto más compacto --- */
  .tbl-alertas td, .tbl-novedades td { font-size: 12.5px; }
}

/* ===================================================================
 * Tap targets generales (TODO el ancho, no solo móvil) — mejora UX y a11y.
 * Bootstrap por defecto deja btn-close en 24px que es demasiado pequeño.
 * =================================================================== */
.btn-close { padding: .5rem; }

/* Buscadores: que el cursor se vea de texto en cualquier tamaño */
.js-table-search { cursor: text; }