/* ============================================================
   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;
    /* Alto de la fila 1 de la cabecera movil a medida (M6 T13). Lo usan los paneles que caen de ella. */
    --vzt-cab-alto: 56px;
  }

  /* --- 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: calc(var(--vzt-cab-alto) + env(safe-area-inset-top, 0px));
  }

  #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: la cabecera, 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;
  }

  /* --- Cabecera movil a medida (M6 T13; propuesta y mockups cab-2..cab-6) ------------------
     Fila 1 de 56 px (+ la muesca): logo vozenter360 a la izquierda (a /inicio), y a la derecha la
     pastilla del centro, la campana y el avatar, todos con objetivo de 44 px. La lupa sale en el
     telefono (sigue en tableta) y la cuota de Doctoralia en todo el movil. La cabecera NO se fija al
     desplazar: las barras compactas de los detalles y la cabecera pegajosa del calendario cuentan
     con top: 0. Sustituye al logo oculto de M0 (spec M0 §4.2, nota del 2026-10-18) y a los 10 px de
     aire que necesitaba la insignia cuando asomaba por encima del boton (ahora va dentro). */
  /* La muesca: arriba (app de inicio) y a los lados. El inset lateral solo vale > 0 en horizontal, y un iPhone en
     horizontal mide 667 px o mas: por eso va aqui y no solo en el bloque de < 576 px (revision T13). En tableta el
     minimo es el relleno de Metronic (20 px, que lleva !important); por debajo de 576, 12 px (mas abajo). */
  #kt_app_header_container {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
  }

  /* Sin borde inferior (propuesta §2): la cabecera mide justo 56 px + la muesca cuando la pagina oculta
     el toolbar, y las vistas a pantalla completa (06, 07, 08, 09) restan ese alto. */
  #kt_app_header {
    border-bottom: 0 !important;
  }

  /* El hueco del logo crece (empuja los iconos a la derecha) pero no encoge por debajo del logo. */
  #kt_app_header_container > div:has(> .vzt-cab-logo) {
    flex: 1 0 auto !important;
    min-height: var(--vzt-cab-alto);
    padding-right: 4px;
  }

  .vzt-cab-logo {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* !important: h-30px de Bootstrap lo lleva. */
  .vzt-cab-logo img {
    height: 28px !important;
    width: auto;
  }

  .vzt-cab-logo:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* La fila de iconos puede encoger: a 360 px la pastilla corta su texto antes que desbordar. El
     contenedor hace flex-wrap (el toolbar va en la fila 2), y un hijo que no cabe SALTA de linea en vez
     de encoger: el tope de ancho (todo menos el logo de 116 px y su aire de 4) lo deja en la fila 1. */
  #kt_app_header .app-navbar {
    flex: 0 1 auto !important;
    min-width: 0;
    max-width: calc(100% - 120px);
    min-height: var(--vzt-cab-alto);
    align-items: center;
    gap: 2px;
  }

  #kt_app_header .app-navbar-item {
    margin-left: 0 !important;
  }

  #kt_app_header [data-testid="doctoralia-cuota-widget-wrapper"] {
    display: none !important;
  }

  @media (max-width: 575.98px) {
    #kt_app_header .app-navbar-item:has(> #vzt_busqueda_global) {
      display: none !important;
    }
  }

  #vzt_busqueda_global .btn-icon {
    width: 44px !important;
    height: 44px !important;
  }

  /* Pastilla del centro: el boton es el objetivo de 44 px; la pildora visible (36 px) es su ::before
     y la flecha su ::after. Texto de CenterSelectorPresenter.TextoCorto, con puntos suspensivos. */
  #kt_app_header .app-navbar-item:has(> .center-selector),
  #kt_app_header .center-selector {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 0 !important;
  }

  #kt_app_header .center-selector__trigger {
    isolation: isolate;
    justify-content: flex-start;
    gap: 5px;
    width: auto !important;
    min-width: 44px;
    max-width: 168px;
    height: 44px !important;
    padding: 0 24px 0 11px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--bs-primary);
  }

  #kt_app_header .center-selector__trigger::before {
    content: "";
    position: absolute;
    inset: 4px 2px;
    z-index: -1;
    border: 1px solid var(--bs-border-color);
    border-radius: 18px;
    background: var(--bs-body-bg);
  }

  #kt_app_header .center-selector__trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid var(--bs-gray-500);
    border-bottom: 2px solid var(--bs-gray-500);
    transform: rotate(45deg);
  }

  #kt_app_header .center-selector__trigger--filtrado::before {
    border-color: rgba(var(--bs-primary-rgb), 0.34);
    background: rgba(var(--bs-primary-rgb), 0.07);
  }

  #kt_app_header .center-selector__trigger[aria-expanded="true"]::before {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
  }

  [data-bs-theme="dark"] #kt_app_header .center-selector__trigger--filtrado::before {
    border-color: rgba(var(--bs-primary-rgb), 0.6);
    background: rgba(var(--bs-primary-rgb), 0.16);
  }

  /* Con filtro el icono lleva el azul antiguo (#009ef7) EN LINEA y con !important: en el <i> no se
     le gana, pero sus dos trazos son <span> que heredan el color; se les da a ellos. */
  #kt_app_header .center-selector__trigger .ki-geolocation {
    flex: none;
    font-size: 16px !important;
  }

  #kt_app_header .center-selector__trigger .ki-geolocation > span {
    color: var(--bs-primary);
  }

  #kt_app_header .center-selector__texto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: var(--bs-primary);
  }

  [data-bs-theme="dark"] #kt_app_header .center-selector__texto {
    color: var(--bs-gray-900);
  }

  /* Campana: 44 px, icono de 22 px en gris oscuro; la insignia, en pildora DENTRO del boton (arriba a
     la derecha) con un aro del color de fondo: «99+» cabe entero. Pisa el width/height en linea. */
  #kt_app_header #kt_menu_item_wow {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px;
  }

  #kt_app_header #kt_menu_item_wow > i,
  #kt_app_header #kt_menu_item_wow > i > span {
    font-size: 22px !important;
    color: var(--bs-gray-700) !important;
  }

  #kt_app_header [data-testid="notif-bell-badge"] {
    top: 3px !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 18px;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--bs-body-bg);
  }

  /* Avatar: objetivo de 44 px; foto o iniciales de 34 px con radio 10. Menu de usuario: filas de 44. */
  #kt_header_user_menu_toggle > .symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  #kt_header_user_menu_toggle > .symbol > .symbol-label,
  #kt_header_user_menu_toggle > .symbol > img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  #kt_header_user_menu_toggle .menu-link {
    min-height: 44px;
  }

  /* Panel de centros: cae de la cabecera a todo el ancho, como la campana (M5): bajo la fila de 56 px,
     esquinas de abajo redondeadas, velo y pagina bloqueada. El id gana al CSS aislado y a las variables
     en linea que pone center-selector.js (ninguno de los dos se toca). Ids y textos de los E2E, iguales. */
  #center-selector-panel.center-selector__panel--abierto {
    --vzt-cab-panel-barra: calc(var(--vzt-barra-alto, 64px) + env(safe-area-inset-bottom, 0px));
    top: calc(var(--vzt-cab-alto) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--vzt-cab-alto) - env(safe-area-inset-top, 0px) - var(--vzt-cab-panel-barra) - 8px) !important;
    border: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.25), 0 0 0 100vmax rgba(15, 23, 42, 0.45);
  }

  body:not(:has(.vzt-barra)) #center-selector-panel.center-selector__panel--abierto {
    --vzt-cab-panel-barra: 0px;
  }

  html:has(#center-selector-panel.center-selector__panel--abierto),
  body:has(#center-selector-panel.center-selector__panel--abierto) {
    overflow: hidden;
  }

  #center-selector-panel .center-selector__header {
    padding: 8px 16px 10px;
  }

  #center-selector-panel #center-selector-titulo {
    font-size: 18px !important;
    line-height: 23px;
  }

  #center-selector-panel .center-selector__cerrar {
    width: 44px !important;
    height: 44px !important;
    margin-right: -10px;
  }

  #center-selector-panel .center-selector__cerrar > i {
    font-size: 20px !important;
    color: var(--bs-gray-700);
  }

  #center-selector-panel .center-selector__search > input {
    height: 44px;
    min-height: 44px;
    font-size: 16px !important;
    border-radius: 12px;
  }

  #center-selector-panel .btn-group {
    gap: 6px;
  }

  #center-selector-panel [data-testid="center-selector-todos"],
  #center-selector-panel [data-testid="center-selector-ninguno"] {
    min-height: 44px;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
  }

  #center-selector-panel .center-selector__list {
    padding: 6px 8px 4px;
  }

  #center-selector-panel .center-selector__option {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0;
    padding: 0 10px;
    border-radius: 10px;
  }

  #center-selector-panel .center-selector__option:has(.form-check-input:checked) {
    background: rgba(var(--bs-primary-rgb), 0.05);
  }

  #center-selector-panel .center-selector__option .form-check-input {
    flex: none;
    width: 22px;
    height: 22px;
  }

  /* La etiqueta llena la fila (toda la fila marca). En bloque para que «TODOS LOS CENTROS» se lea como
     en el mockup («Todos los centros») sin cambiar el texto, que usan los E2E. */
  #center-selector-panel .center-selector__option .form-check-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 0 14px 12px !important;
    font-size: 15px;
    line-height: 20px;
  }

  #center-selector-panel label[for="chkAll"] {
    text-transform: lowercase;
    color: var(--bs-gray-900);
  }

  #center-selector-panel label[for="chkAll"]::first-letter {
    text-transform: uppercase;
  }

  #center-selector-panel .center-selector__footer {
    padding: 10px 16px 14px;
  }

  #center-selector-panel [data-testid="center-selector-apply"] {
    min-height: 46px;
    font-size: 15px !important;
    border-radius: 12px;
  }

  /* --- 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 {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    /* La cabecera, con el mismo minimo de 12 px, sin meterse bajo la muesca (ver «Cabecera movil a medida»). */
    #kt_app_header_container {
      padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
      padding-right: max(12px, env(safe-area-inset-right, 0px)) !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-gray-700);
    /* 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;
  }

  /* M8 T5: fondo propio oscuro; evitar el gris intermedio de la transicion global de <a>. */
  [data-bs-theme="dark"] .vzt-barra__item:not(.vzt-barra__item--activo) {
    color: var(--bs-gray-800);
    transition: none;
  }

  .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;
  }
}