/* ================================================================
   UtilBox — Ajustes para móvil y tablet (< 992px)
   Se carga desde estructura/header.php con media="(max-width: 991.98px)"
   y además todo va dentro de la misma media query: en pantallas de
   ordenador (>= 992px) este archivo no aplica ninguna regla.
   ================================================================ */
@media (max-width: 991.98px) {

  /* ── 1. BARRA SUPERIOR: una sola franja de 60px ───────────────── */
  .navbar.default-layout {
    height: 60px !important;
    background: #1E293B !important;
  }
  .navbar.default-layout .navbar-brand-wrapper {
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .navbar.default-layout .navbar-brand-wrapper > div { display: flex; }
  .navbar.default-layout .navbar-brand.brand-logo-mini {
    display: inline-flex !important;
    align-items: center;
    padding: 0 !important;
  }
  .navbar.default-layout .navbar-brand.brand-logo-mini img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain;
  }
  .navbar.default-layout .navbar-menu-wrapper {
    width: calc(100% - 60px) !important;
    height: 60px !important;
    padding: 0 6px 0 12px !important;
    align-items: center !important;
  }
  .navbar.default-layout .navbar-menu-wrapper .navbar-nav { align-items: center; }
  .navbar.default-layout .navbar-menu-wrapper .navbar-nav .nav-item { margin-left: 4px; }
  .navbar.default-layout .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
    margin: 0 !important;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navbar.default-layout .navbar-toggler-right {
    width: 48px;
    height: 48px;
    padding: 0 !important;
    margin-left: 2px;
    font-size: 1.6rem !important;
  }

  /* Perfil (editar perfil / cerrar sesión) también accesible en móvil */
  .navbar.default-layout .user-dropdown.d-none { display: block !important; }
  .navbar.default-layout .user-dropdown img { width: 34px !important; height: 34px !important; object-fit: cover; }

  /* Desplegables de la barra: bajo la franja, sin altura fija de 500px */
  .navbar.default-layout .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
    position: fixed !important;
    top: 64px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto !important;
  }
  .navbar.default-layout .navbar-menu-wrapper .dropdown-item {
    white-space: normal;
    min-height: 44px;
  }

  .page-body-wrapper {
    padding-top: 60px !important;
    min-height: calc(100vh - 60px);
  }

  /* ── 2. MENÚ LATERAL: panel deslizante desde la derecha ──────── */
  body #sidebar.sidebar,
  body.sidebar-icon-only #sidebar.sidebar {
    display: block !important;
    position: fixed !important;
    top: 60px !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 300px !important;
    max-width: 86vw;
    height: calc(100vh - 60px) !important;
    height: calc(100dvh - 60px) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 1032 !important;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 200ms !important;
    padding-bottom: 24px;
  }
  body #sidebar.sidebar.active {
    transform: none;
    visibility: visible;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s !important;
  }
  /* Fondo oscuro detrás del menú abierto; tocarlo cierra el menú */
  .ub-menu-fondo { display: none; }
  body.ub-menu-abierto .ub-menu-fondo {
    display: block;
    position: fixed;
    top: 60px; right: 0; bottom: 0; left: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1031;
    cursor: pointer;
  }
  body.ub-menu-abierto { overflow: hidden; }

  /* Objetivos táctiles más grandes dentro del menú */
  #sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
    padding: 12px 14px !important;
    min-height: 46px;
  }
  #sidebar .nav.sub-menu .nav-item .nav-link {
    font-size: 0.875rem !important;
    padding: 11px 14px 11px 40px !important;
    white-space: normal;
  }
  #sidebar .nav .nav-item .nav-link .menu-title { white-space: normal; }

  /* El tema justifica todo el contenido (.tab-content); en líneas
     estrechas deja huecos enormes entre palabras */
  .content-wrapper .tab-content { text-align: left; }

  /* ── 3. TABLAS: desplazamiento horizontal en vez de recorte ───── */
  .table-responsive {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 4. CABECERAS DE TARJETA: que los controles bajen de línea ── */
  .card-header .navbar,
  .card-header .navbar > div,
  .card-header .d-flex {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }
  .card-header input,
  .card-header select,
  .card-header .btn { max-width: 100%; }

  /* Filtros tipo "chip" (preexpansión, resumen de proceso…): que no se
     salgan de la pantalla, pueden bajar de línea */
  .content-wrapper .filter-chip {
    flex-wrap: wrap;
    height: auto !important;
    max-width: 100%;
  }

  /* ── 5. CAMPOS: 16px evita el zoom automático de iOS al tocarlos ─ */
  .content-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .content-wrapper select,
  .content-wrapper textarea,
  .swal2-popup input,
  .swal2-popup select,
  .swal2-popup textarea {
    font-size: 16px !important;
  }

  /* Campos dentro de tablas (filas de alta en recuentos, órdenes…):
     ancho mínimo para que se vea lo que se escribe; la tabla se desplaza */
  .content-wrapper td input.form-control:not([type="checkbox"]):not([type="radio"]),
  .content-wrapper td select.form-control,
  .content-wrapper td select.form-select {
    min-width: 7rem;
  }

  /* Grupos de botones con ancho fijo en % (flechas de calle, guardar,
     limpiar línea en recuentos/inventario/órdenes): ancho cómodo */
  .content-wrapper .btn-group[style*="width:10%"],
  .content-wrapper .btn-group[style*="width:25%"],
  .content-wrapper .btn-group[style*="width:30%"] {
    width: fit-content !important;
    max-width: 100%;
    display: flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .content-wrapper .btn-group[style*="width:25%"] > .btn,
  .content-wrapper .btn-group[style*="width:30%"] > .btn {
    min-width: 64px;
    min-height: 44px;
  }
  .content-wrapper .btn-group[style*="width:10%"] > .btn {
    min-width: 96px;
    min-height: 44px;
  }
}

/* ── 6. MÓVIL (< 768px): menos relleno para ganar ancho útil ───── */
@media (max-width: 767.98px) {
  .content-wrapper { padding: 0.5rem !important; }
  .content-wrapper .card-body { padding-left: 0.75rem; padding-right: 0.75rem; }
  /* En tarjetas con card-body px-0 el margen negativo de .row (15px)
     hacía que su contenido sobresaliera de la tarjeta */
  .content-wrapper .card-body.px-0 .row { margin-left: 0; margin-right: 0; }
  .content-wrapper .table-responsive.p-5 { padding: 1rem 0.75rem !important; }
  .content-wrapper .table-responsive.p-3 { padding: 0.75rem !important; }
  .content-wrapper h2 { font-size: 1.25rem; }
}