/* ============================================================
   Panel movil (M0) — Carcasa: cabecera, margenes y «Mas».
   REGLA DURA: todo este fichero vive dentro del @media. El lint
   scripts/test/e2e/movil/test_lint_capa_movil.js falla si no.
   Spec: docs/superpowers/specs/2026-10-10-movil-m0-cimientos-design.md §4.2-4.3
   ============================================================ */

@media (max-width: 991.98px) {
  body {
    --vzt-barra-alto: 64px;
  }

  /* --- Cabecera: la de escritorio, reestilizada (spec D8) ---------------
     Trasladado de maquetacion-responsive.css (2026-10). El toolbar de pagina
     se pinta DENTRO de la cabecera; en movil pasa a una segunda fila a todo
     el ancho. `display: contents` en el wrapper deja al toolbar y a la navbar
     como hijos directos del contenedor flex. El id gana en especificidad a los
     `!important` de .d-flex / .page-title del bundle. */
  #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;
  }

  /* !important: `.app-container` trae su relleno lateral con !important, y sin el el
     titulo quedaba 20 px mas adentro que el resto de la cabecera. */
  #kt_app_header #kt_app_toolbar_container {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

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

  #kt_app_header #kt_app_toolbar_container > .d-flex {
    flex-wrap: wrap;
  }

  /* La hamburguesa desaparece SOLO si existe la barra inferior: el menu se abre desde «Mas».
     La barra la pinta Blazor y puede no estar (el interop fallo y se pinto como escritorio);
     con este CSS a secas el usuario se quedaba sin hamburguesa y sin barra, es decir, sin menu.
     El boton sigue en el DOM porque BarraInferior lo pulsa por codigo.
     Por lo mismo llevan esta condicion «Mas» a pantalla completa y el boton de plegar el menu
     (mas abajo): a 100vw el velo del drawer queda entero debajo y, sin barra ni «Mas», el menu
     abierto con la hamburguesa no se podia cerrar con el dedo.
     Las demas reglas de este fichero NO la llevan, a proposito: el logo oculto, el hueco al
     final del contenido, el hueco al pie del drawer y el z-index de los desplegables no dejan a
     nadie sin salida si la barra falta (como mucho sobra un hueco), y condicionarlas las quitaria
     en un navegador sin :has(), donde la barra SI existe y taparia la ultima fila. */
  body:has(.vzt-barra) #kt_app_header_container > div:has(> #kt_app_sidebar_mobile_toggle) {
    display: none !important;
  }

  /* El segundo icono de menu de la cabecera (#kt_app_header_menu_toggle, de _Navbar.razor) abre
     el drawer «app-header-menu», que este layout no pinta: se enciende y no abre nada (visto en
     el panel el 2026-10-11). En movil se oculta; en escritorio ya lo oculta su `d-lg-none`. */
  #kt_app_header .app-navbar-item:has(> #kt_app_header_menu_toggle) {
    display: none !important;
  }

  /* El logo movil tambien desaparece (spec §4.2). Se oculta el enlace, no su contenedor:
     ese div es el que crece (flex-grow-1) y empuja los iconos a la derecha. */
  #kt_app_header_container a.d-lg-none:has(> img[alt="Logo"]) {
    display: none !important;
  }

  /* --- Insignia de avisos: que no salga por arriba de la pantalla ---------
     La campana va pegada al borde superior de la cabecera y su insignia se coloca con
     top-0 + translate-middle, o sea 9 px POR ENCIMA del boton: en movil quedaba cortada
     (visto en Safari de iPhone contra dev, 2026-10-12). 10 px de aire arriba la dejan entera. */
  #kt_app_header_container {
    padding-top: 10px;
  }

  /* --- Contenido: margenes laterales ---------------------------------------
     Las paginas del panel anidan su propio .app-content > .app-container dentro del
     #kt_app_content_container del layout, asi que el margen lateral se aplicaba dos veces
     (20 + 20 px) y la tarjeta anadia otros 27: en 390 px quedaban 254 px utiles. El
     contenedor anidado deja de sumar margen a cualquier ancho movil. !important porque
     .app-container trae su relleno lateral con !important en el bundle. */
  #kt_app_content_container .app-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* En telefono (menos de 576 px) el aire lateral baja a 12 px y el relleno de las
     tarjetas a 16: con 390 px quedan 332 utiles. La cabecera usa el mismo margen para
     que el titulo quede alineado con el contenido. En tableta se conserva el de Metronic. */
  @media (max-width: 575.98px) {
    #kt_app_content_container,
    #kt_app_header_container {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    #kt_app_content .card {
      --bs-card-spacer-x: 16px;
      --bs-card-cap-padding-x: 16px;
    }

    #kt_app_content .card > .card-header,
    #kt_app_content .card > .card-body,
    #kt_app_content .card > .card-footer {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  /* --- Contenido: que la barra inferior nunca tape la ultima fila -------- */
  #kt_app_main {
    padding-bottom: calc(var(--vzt-barra-alto) + env(safe-area-inset-bottom, 0px) + 28px);
  }

  /* --- «Mas»: el drawer del menu lateral a pantalla completa (spec D9) ---
     Metronic fija el ancho en linea por JS (data-kt-drawer-width="225px") y lo hace
     con `width: 225px !important`: un width de hoja de estilos NO lo gana, ni con
     !important (visto en el e2e del 2026-10-11: el menu seguia midiendo 225 px).
     min-width si: se aplica por encima de width venga de donde venga.
     SOLO si existe la barra: a pantalla completa el velo del drawer queda debajo y el menu se
     cierra desde la barra («Mas» u otro destino). Sin barra (la primera consulta del ancho fallo
     en un telefono, o se perdio el aviso de un cruce del corte) el menu es el drawer original de
     225 px, con su velo a la derecha para cerrarlo tocando fuera (test_carcasa_fixture.js). */
  body:has(.vzt-barra) #kt_app_sidebar.drawer {
    min-width: 100vw !important;
    max-width: 100vw !important;
  }

  /* El hueco para la barra no lleva la condicion: sin barra solo sobra, y en un navegador sin
     :has() (drawer de 225 px con la barra a la vista) evita que la barra tape el pie del menu. */
  #kt_app_sidebar.drawer {
    padding-bottom: calc(var(--vzt-barra-alto) + env(safe-area-inset-bottom, 0px));
  }

  #kt_app_sidebar .menu-link {
    min-height: 46px;
  }

  /* A pantalla completa el boton de plegar el menu (medio fuera del borde derecho) no pinta nada. */
  body:has(.vzt-barra) #kt_app_sidebar #kt_app_sidebar_toggle {
    display: none !important;
  }

  /* El alto de la lista del menu lo calcula Metronic por JS (KTScroll: alto de la ventana menos
     el logo y el pie) y lo pone en linea: no sabe que el drawer reserva abajo el alto de la
     barra, asi que el pie («¿Necesitas ayuda?») se salia 64 px y asomaba por encima de la barra
     como una franja clara (captura mas.png del 2026-10-11). En el drawer la lista pasa a ser un
     hijo flexible que desplaza por si mismo y el alto en linea deja de mandar. */
  #kt_app_sidebar.drawer > .app-sidebar-menu {
    flex: 1 1 0 !important;
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  #kt_app_sidebar.drawer #kt_app_sidebar_menu_scroll {
    height: auto !important;
    overflow-y: visible;
  }

  /* --- Barra inferior ----------------------------------------------------
     z-index por encima del contenido Y del drawer (.drawer usa 110 y su
     overlay 109 en el bundle): con «Mas» abierto la barra sigue a la vista y
     se puede tocar. Tocar un destino cierra «Mas» (lo hace BarraInferior con
     vztDispositivo.cerrarMas(): Metronic no cierra su drawer al navegar), y
     tocar «Mas» otra vez tambien. El boton central nunca queda recortado por
     un contenido posicionado (fallo visto en el mockup del 2026-10-10;
     test_barra_fixture.js).
     1039 y no 120: hay paginas con celdas fijas a z-index 1000-1001 (la tabla de
     /configuracion/permisos) y Bootstrap usa 1020 y 1030 para sticky y fixed; con 120
     pintaban encima de la barra (e2e del 2026-10-11). Queda por debajo del fondo de un
     offcanvas (1040) y de los modales (1050-1055), que si deben cubrirla.
     Un menu desplegable abierto (Bootstrap: 1000) SI debe quedar encima: ver mas abajo. */
  .vzt-barra {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1039;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: calc(var(--vzt-barra-alto) + env(safe-area-inset-bottom, 0px));
    padding: 6px 4px env(safe-area-inset-bottom, 0px);
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
  }

  .vzt-barra__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-text-muted);
    /* Tamanos de letra de la capa en px, no en rem: la raiz de Metronic son 12 px en
       movil, y 0.6875rem salia a 8,25 px (e2e del 2026-10-11). */
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
  }

  .vzt-barra__item i {
    font-size: 19px;
    color: inherit;
  }

  .vzt-barra__item--activo {
    color: var(--bs-primary);
    font-weight: 600;
  }

  .vzt-barra__item:focus-visible,
  .vzt-barra__nueva:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
  }

  .vzt-barra__nueva {
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: -22px 6px 0;
    border-radius: 16px;
    background: var(--bs-success);
    color: var(--bs-dark);
    box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), 0.2);
    text-decoration: none;
  }

  .vzt-barra__nueva i {
    font-size: 22px;
    line-height: 1;
    color: inherit;
  }

  /* Menu desplegable abierto (el «Acciones» de una ficha): Popper lo encaja contra la
     ventana, no contra la barra, asi que abierto desde una ficha pegada al borde inferior
     cae sobre ella. Con la barra a 1039 y el menu a 1000 sus ultimas opciones quedaban
     detras, sin poder tocarse. 1041: encima de la barra, debajo de offcanvas (1045) y
     modales (1055). Las celdas fijas a 1000-1001 no cambian: siguen bajo la barra. */
  .dropdown-menu.show {
    z-index: 1041;
  }
}