/* ══════════════════════════════════════════════════════════════
   Tag Logic — Capa móvil (jul 2026)
   Solo aplica en pantallas chicas; en desktop no cambia nada.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ── Base: tipografía y toque ── */
  body { font-size: 14px; }
  input, select, textarea, .form-control { font-size: 16px !important; } /* 16px evita el auto-zoom de iOS */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }

  .main-content .container-fluid { padding-left: 10px; padding-right: 10px; }
  .card { border-radius: 10px; }
  .card-body { padding: 14px 12px; }
  .main-content-title { font-size: 24px !important; }
  .breadcrumb { margin-bottom: 6px; }

  /* ── Tabs del editor de caso: torre → cuadrícula 3 columnas ── */
  #tabMenu.nav-pills {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    padding: 0 2px;
  }
  #tabMenu .nav-item { margin: 0 !important; width: auto !important; }
  #tabMenu .nav-link.stepjob {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 4px !important;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    min-height: 64px;
    border-radius: 10px;
    margin: 0 !important;
  }
  #tabMenu .nav-link.stepjob img { width: 24px !important; height: auto !important; margin: 0 !important; }

  /* ── Tablas (listados): celdas compactas + scroll suave ── */
  .table td, .table th { padding: 7px 8px !important; font-size: 12.5px !important; }
  .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* botones de accion de las filas: compactos y pegados */
  .table .btn, .table .btn-sm {
    min-height: 30px !important;
    width: 32px;
    padding: 3px 0 !important;
    margin: 0 2px 2px 0 !important;
    font-size: 12px !important;
    text-align: center;
  }
  .table td:first-child { white-space: nowrap; }
  /* paginacion: dedos, no mouse */
  .dataTables_paginate .paginate_button { padding: 8px 12px !important; font-size: 13px !important; }
  .dataTables_length, .dataTables_filter { font-size: 13px; }
  .dataTables_filter input { min-height: 38px; }

  /* ── Header: buscador global comodo ── */
  .main-header .search, .main-header form input { min-height: 40px; font-size: 16px !important; }

  /* ── Modales a pantalla casi completa ── */
  .modal-dialog { margin: 8px; max-width: none; }
  .modal-body { padding: 14px 12px; }

  /* ── Proyeccion de citas ── */
  .tpc-kpis { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tpc-card { padding: 10px 10px !important; }
  .tpc-acts { flex-wrap: wrap; }
  .tpc-btn { width: 36px !important; height: 36px !important; font-size: 14px !important; }
  .tpc-g { padding: 6px 12px !important; font-size: 12px !important; }

  /* ── Chips y pills tocables en general ── */
  .tlw-g, .tlw-chip { padding: 6px 12px !important; font-size: 12px !important; }

  /* ── Cabecera del caso: botones en fila que envuelven ── */
  .page-header { flex-direction: column; align-items: stretch !important; gap: 8px; }
  .page-header > div { width: 100%; }

  /* ── Galerias de fotos: 3 por fila en celular ── */
  .tl-photo-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── Panel de piezas: acciones grandes ── */
  .tlp-modal { max-width: 100% !important; }

  /* ── Facturacion: totales legibles ── */
  .tlf-kpis { grid-template-columns: 1fr 1fr !important; }

  /* ── Footer: no estorba ── */
  .main-footer { font-size: 11px; }
}

/* ── Teléfonos muy chicos ── */
@media (max-width: 380px) {
  #tabMenu.nav-pills { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  #tabMenu .nav-link.stepjob { font-size: 10px !important; min-height: 58px; }
}