/*--------------------------------------------------------------
# Adaptación a celular y tablet
# Se carga DESPUÉS de style.css (ver template/layout.php).
# Breakpoints de Bootstrap: <768 celular · <992 tablet · <1200 menú lateral oculto.
--------------------------------------------------------------*/

/* Evita que un elemento ancho ensanche toda la página (y arrastre el encabezado fijo). */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
.apexcharts-canvas, .apexcharts-canvas svg { max-width: 100% !important; }

/* ── Tablas: scroll horizontal cuando no caben ───────────────────────────── */
/* style.css fuerza overflow: visible (para no recortar menús desplegables en escritorio). */
@media (max-width: 991.98px) {
  .table-responsive,
  .dataTables_wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate { text-align: left; float: none; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; margin-top: .25rem; }
  .dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: flex-start; }
}

/* ── Tablas como tarjetas en celular ─────────────────────────────────────── */
/* mobile.js copia el texto de cada <th> al atributo data-label de las celdas. */
@media (max-width: 767.98px) {
  table.dataTable, table.tabla-apilable { border: 0 !important; width: 100% !important; }
  table.dataTable thead, table.tabla-apilable thead { display: none; }
  table.dataTable tbody, table.dataTable tbody tr, table.dataTable tbody td,
  table.tabla-apilable tbody, table.tabla-apilable tbody tr, table.tabla-apilable tbody td { display: block; width: 100% !important; box-sizing: border-box; }

  table.dataTable tbody tr, table.tabla-apilable tbody tr {
    margin-bottom: .75rem; background: #fff; border: 1px solid #dee2e6; border-radius: .6rem;
    box-shadow: 0 1px 4px rgba(1, 41, 112, .08); overflow: hidden;
  }
  table.dataTable tbody td, table.tabla-apilable tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    text-align: right; padding: .5rem .8rem; border: 0; border-bottom: 1px solid #f0f2f5;
    word-break: break-word; min-width: 0;
  }
  table.dataTable tbody td:last-child, table.tabla-apilable tbody td:last-child { border-bottom: 0; }
  table.dataTable tbody td::before, table.tabla-apilable tbody td::before {
    content: attr(data-label); flex: 0 0 38%; max-width: 38%; text-align: left;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--bs-primary);
  }
  table.dataTable tbody td[data-label=""]::before, table.tabla-apilable tbody td[data-label=""]::before, table.tabla-apilable tbody td:not([data-label])::before { display: none; }
  table.dataTable tbody td.dataTables_empty { display: block; text-align: center; }
  table.dataTable tbody td.dataTables_empty::before { display: none; }
  table.dataTable tbody td .btn, table.tabla-apilable tbody td .btn { white-space: nowrap; }
  /* Celdas de acciones: etiqueta en su propia fila y botones que saltan de línea si no caben */
  table.dataTable tbody td:has(> .btn), table.tabla-apilable tbody td:has(> .btn) { flex-wrap: wrap; justify-content: flex-start; text-align: left !important; gap: .4rem; }
  table.dataTable tbody td:has(> .btn)::before, table.tabla-apilable tbody td:has(> .btn)::before { flex: 0 0 100%; max-width: 100%; }
  table.dataTable tbody td.text-center, table.tabla-apilable tbody td.text-center { justify-content: space-between; text-align: right !important; }
  /* Las filas inactivas conservan el tono de alerta */
  table.dataTable tbody tr.inactivo { background: #ffd3d3; }

  /* Totales de pie de tabla (tfoot) en una sola línea etiqueta + valor */
  table.tabla-apilable tfoot, table.tabla-apilable tfoot tr { display: block; }
  table.tabla-apilable tfoot tr { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem .2rem; font-weight: 600; }
  table.tabla-apilable tfoot td { display: block; width: auto !important; border: 0; padding: 0; }
  table.tabla-apilable tfoot td:empty { display: none; }

  /* Tablas con campos editables: la etiqueta va arriba del control */
  table.tabla-form tbody td { flex-direction: column; align-items: stretch; text-align: left; gap: .15rem; }
  table.tabla-form tbody td::before { flex: none; max-width: none; }
  table.tabla-form tbody td .select2-container { width: 100% !important; }
  table.tabla-form tbody td .btn-del { width: 100%; }
}

/* ── Menú lateral: fondo oscuro y cierre al tocar fuera ──────────────────── */
@media (max-width: 1199.98px) {
  body.toggle-sidebar::after {
    content: ''; position: fixed; inset: 0; background: rgba(1, 20, 60, .45); z-index: 995;
  }
  .sidebar { width: min(300px, 85vw); left: calc(-1 * min(300px, 85vw)); }
  .toggle-sidebar .sidebar { left: 0; }
  .header .toggle-sidebar-btn { padding: 8px 10px; }
}

/* ── Estructura general ──────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  #main { padding: 12px !important; margin-top: 60px; }
  .card { border-radius: .6rem; }
  .card-header { flex-wrap: wrap; gap: .5rem; padding: .6rem .8rem; }
  .card-header .btn { white-space: normal; }
  .card-body { padding: .8rem; }
  .pagetitle-wrap { padding: 10px 14px; margin-bottom: 14px; }
  h4, .h4 { font-size: 1.15rem; }

  /* Encabezado fijo: logo más pequeño para que quepa el perfil */
  .header { padding-left: 6px; }
  .header .logo-header img { max-height: 34px; width: auto; }
  .header-nav .nav-profile img { width: 34px !important; height: 34px !important; }

  /* Pestañas deslizables en vez de apiladas en varias líneas */
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link { padding: .6rem .9rem; }

  /* Botones y controles cómodos para el dedo; 16 px evita el zoom automático de iOS */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .form-control, .form-select, .select2-container .select2-selection, input, select, textarea { font-size: 16px !important; }
  .form-control, .form-select { min-height: 42px; }
  .input-group { flex-wrap: nowrap; }
  .d-flex.gap-2.flex-wrap > .btn, .btn-toolbar .btn { flex: 1 1 auto; }

  /* Modales a pantalla completa */
  .modal-dialog { margin: 0; max-width: 100%; }
  .modal-dialog:not(.modal-dialog-centered) { min-height: 100%; }
  .modal-content { min-height: 100vh; border-radius: 0; }
  .modal-dialog-scrollable .modal-content { max-height: 100vh; }
  .modal-footer { flex-wrap: wrap; gap: .5rem; }
  .modal-footer .btn { flex: 1 1 45%; }

  /* Avisos de SweetAlert y menús desplegables dentro de la pantalla */
  .swal2-popup { width: 92vw !important; font-size: .95rem; }
  .dropdown-menu { max-width: 92vw; }
  .header-nav .profile { min-width: 220px; }

  /* Tarjetas del panel y gráficos */
  .kpi-num { font-size: 1.6rem !important; }
  .chart-box { min-height: 240px !important; }
  .kpi-icon { font-size: 1.6rem !important; }

  /* Select2 y DataTables a todo el ancho */
  .select2-container { width: 100% !important; }
  .select2-dropdown { max-width: 92vw; }
  .dataTables_wrapper .dataTables_length select { min-height: 34px; }
  .dataTables_wrapper .dataTables_paginate .paginate_button .page-link { padding: .35rem .65rem !important; font-size: .85rem !important; }
}

/* Pantallas muy angostas (≤ 360 px) */
@media (max-width: 380px) {
  #main { padding: 8px !important; }
  .kpi-num { font-size: 1.4rem !important; }
  table.dataTable tbody td::before, table.tabla-apilable tbody td::before { flex-basis: 34%; max-width: 34%; }
}

/* Botón de escritorio que no aporta en celular */
@media (max-width: 767.98px) {
  .d-mobile-none { display: none !important; }
}

/* Barra de depuración de CodeIgniter: no estorba en celular */
@media (max-width: 767.98px) {
  #debug-icon, #debug-bar { max-width: 100vw; }
}

/* Montos del panel: una sola línea, tamaño ajustado al ancho de la tarjeta */
.kpi-money { font-size: 1.6rem; }
@media (max-width: 767.98px) {
  .kpi-money { font-size: clamp(1.05rem, 5.2vw, 1.35rem) !important; white-space: nowrap; letter-spacing: -.01em; }
  /* La barra de depuración (solo en modo desarrollo) tapa botones en el celular */
  #debug-icon { display: none !important; }
}

/* Listado de órdenes: en celular solo Placa y Cliente a la vista; el resto de filtros va plegado.
   En pantallas anchas el contenedor "desaparece" y los campos se alinean con los demás. */
@media (min-width: 768px) {
  .filtros-extra, .filtros-extra > .row { display: contents !important; }
}