/* ============================================================
   Maquetacion responsive (tanda 2 del repaso de interfaz, 2026-10).
   Solo disposicion: ningun color ni tipografia (eso es de identidad/).

   CABECERA EN MOVIL (< 992 px)
   ----------------------------
   El toolbar de pagina (titulo + migas + botones de accion) se pinta DENTRO
   de la cabecera (#kt_app_header_wrapper). En escritorio cabe; en movil la
   cabecera mide 60 px de alto fijos y Metronic oculta el titulo con
   `.app-header .page-title { display:none !important }` (style.bundle.css),
   asi que:
     - el titulo de la pagina desaparecia en el movil, y
     - los botones de accion + el selector de centro + la campana no cabian
       en una fila y empujaban la pagina a 435-609 px de ancho a 400 px
       (scroll horizontal en Dashboard, Bonos, Productos, Servicios, Centro...).
   Solucion: en movil la cabecera crece en alto y el toolbar pasa a una
   SEGUNDA FILA a todo el ancho (titulo visible, botones que envuelven).
   `display: contents` en el wrapper deja al toolbar y a la navbar como hijos
   directos del contenedor flex para poder reordenarlos.
   El id gana en especificidad a los `!important` de .d-flex / .page-title.
   ============================================================ */

@media (max-width: 991.98px) {
  #kt_app_header {
    height: auto;
    min-height: var(--bs-app-header-height);
  }

  #kt_app_header_container {
    flex-wrap: wrap;
  }

  #kt_app_header_wrapper {
    display: contents !important;
  }

  #kt_app_header #kt_app_toolbar {
    order: 10;
    flex: 0 0 100%;
    max-width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0.75rem !important;
  }

  #kt_app_header #kt_app_toolbar_container {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding-left: 0;
    padding-right: 0;
  }

  #kt_app_header .page-title {
    display: flex !important;
    min-width: 0;
  }

  /* Botones de accion del toolbar: envuelven en vez de desbordar. */
  #kt_app_header #kt_app_toolbar_container > .d-flex {
    flex-wrap: wrap;
  }
}

/* Menu «Acciones» dentro de `.table-responsive`: ese contenedor recorta lo
   que sobresale (overflow-x:auto fuerza overflow-y:auto) y el desplegable de
   las ultimas filas quedaria cortado. No se arregla aqui sino en el marcado:
   el boton lleva data-bs-popper-config='{"strategy":"fixed"}' (Bootstrap
   5.3), que posiciona el menu respecto a la ventana y lo saca del recorte. */

/* `.min-w-0` se usaba en el marcado (tarjetas de Servicios, selector de centro) pero ni
   Bootstrap ni el bundle de Metronic la definen, asi que no hacia nada. Sin min-width:0 un
   hijo flex no encoge por debajo de su texto y `text-truncate` nunca llega a recortar:
   por eso los nombres largos de servicio se salian de la tarjeta. */
.min-w-0 {
  min-width: 0 !important;
}