/* ============================================================
   The Fixing Pro — Ajustes responsive (móvil)
   Se carga en todas las páginas. Optimiza los paneles de
   escritorio (Dueño y Despacho) para teléfono.
   ============================================================ */

@media (max-width: 680px) {

  /* Barra superior */
  nav { height:auto; padding:8px 12px; flex-wrap:wrap; gap:6px; }
  .brand-name { font-size:0.82rem; }
  .user-name { display:none; }
  .btn-logout { padding:5px 9px; font-size:0.72rem; }
  .tfp-lang-toggle.in-nav { order:3; }

  /* Tabs deslizables */
  .tabs-bar { top:auto; position:static; }
  .tab-btn { padding:12px 13px; font-size:0.8rem; }

  /* Contenedores */
  .main { padding:18px 14px 50px; }
  .header-band { padding:18px 14px; }
  .hb-title { font-size:1.25rem; }

  /* Rejillas a 1–2 columnas */
  .kpi-grid { grid-template-columns:1fr 1fr !important; gap:10px; }
  .branch-grid { grid-template-columns:1fr !important; }
  .trade-grid { grid-template-columns:1fr 1fr !important; }
  .tech-grid { grid-template-columns:1fr !important; }
  .opciones-grid { grid-template-columns:1fr 1fr !important; }

  .kpi-num { font-size:1.6rem; }
  .kpi-card { padding:14px 14px; }

  /* Hero más compacto */
  .hero-inicio { min-height:60vh; }
  .hero-name { font-size:2.4rem; }

  /* Tablas: scroll horizontal cómodo */
  .table-wrap { -webkit-overflow-scrolling:touch; }
  table { min-width:560px; }
  th, td { padding:10px 12px; font-size:0.8rem; }

  /* Solicitudes de despacho en columna */
  .req-card { flex-direction:column; align-items:stretch; }
  .req-right { justify-content:flex-end; }
  .btn-assign, .btn-ghost { flex:1; }

  /* Modales: pegados abajo y a pantalla completa de ancho */
  .ceo-modal { max-width:100%; border-radius:18px 18px 0 0; align-self:flex-end; }
  .ceo-modal-bg { align-items:flex-end; padding:0; }

  /* Filtros/búsqueda apilados */
  #jobSearch, #expSearch { width:100% !important; }
}

@media (max-width: 380px) {
  .kpi-grid { grid-template-columns:1fr !important; }
  .trade-grid, .opciones-grid { grid-template-columns:1fr !important; }
}