/* ============================================================
   Panel movil (M0) — Patrones transversales: aviso de solo ordenador,
   fichas, hojas inferiores y formularios.
   REGLA DURA: todo dentro del @media (ver 01-carcasa.css).
   Spec §4.7
   ============================================================ */

@media (max-width: 991.98px) {
  /* --- Aviso de solo ordenador ------------------------------------------ */
  .vzt-aviso-ordenador {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60vh;
    padding: 1.5rem 0.5rem;
  }

  .vzt-aviso-ordenador__icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 18px;
    background: var(--bs-primary-light);
    color: var(--bs-primary);
    font-size: 28px;
  }

  .vzt-aviso-ordenador__titulo {
    margin: 0 0 0.5rem;
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .vzt-aviso-ordenador__texto {
    margin: 0 0 1.25rem;
    color: var(--bs-text-muted);
    font-size: 15px;
    line-height: 1.5;
  }

  .vzt-aviso-ordenador .btn {
    min-height: 44px;
  }

  /* --- Fichas en lugar de tablas ----------------------------------------
     Solo sobre tablas que fichas.js ya marco (data-vzt-fichas): una tabla sin
     cabecera, con cabecera agrupada o exenta con data-vzt-movil="tabla"
     conserva el scroll lateral. Los marcadores son atributos data-*, no clases:
     Blazor reescribe class al repintar. */
  .table-responsive:has(> table[data-vzt-fichas]) {
    overflow: visible;
  }

  /* Cobro (ModalCobroOrden, desde el calendario, la orden o el bono): su lista de servicios es
     una tabla dentro de un contenedor con `max-height: 15rem; overflow-y: auto`. Con la regla de
     arriba (overflow: visible) las fichas se salian de la caja y pisaban el importe, la fecha y
     el metodo de pago (visto en el panel real, 2026-10-12). Sin altura maxima la lista ocupa lo
     suyo y desplaza el cuerpo de la ventana. Caso en fixture-fichas.html. */
  .modal-cobro-servicios:has(> table[data-vzt-fichas]) {
    max-height: none;
  }

  table[data-vzt-fichas],
  table[data-vzt-fichas] > tbody,
  table[data-vzt-fichas] > tfoot {
    display: block;
    width: 100%;
  }

  table[data-vzt-fichas] > thead {
    display: none;
  }

  /* Relleno y borde con !important: el bundle trae `.table tr:first-child { padding-left: 0 }`,
     `.table tr:last-child { padding-right: 0 }` y `.table.table-row-dashed tr { border-bottom:
     1px dashed }`, con mas especificidad que esta regla. Sin el, la primera ficha salia sin
     relleno a la izquierda y ninguna tenia borde (e2e del 2026-10-11). */
  table[data-vzt-fichas] > :is(tbody, tfoot) > tr {
    /* Columna flex y no block: asi la celda de acciones puede ir al pie con `order`. */
    display: flex;
    flex-direction: column;
    margin-bottom: 0.625rem;
    padding: 12px 14px !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 12px;
    background: var(--bs-body-bg);
  }

  /* La ultima fila: el bundle le quita el borde inferior con
     `.table:not(.table-bordered) tbody tr:last-child { border-bottom: 0 !important }`
     (0,3,2). El :not() de aqui sube esta regla a (0,3,3) para ganarle. */
  table[data-vzt-fichas]:not(.table-bordered) > :is(tbody, tfoot) > tr:last-child {
    border-bottom: 1px solid var(--bs-border-color) !important;
  }

  /* Totales: una ficha de resumen, con borde superior mas marcado. */
  table[data-vzt-fichas] > tfoot > tr {
    border-top: 2px solid var(--bs-gray-500) !important;
    font-weight: 600;
  }

  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.25rem 0.75rem;
    width: auto !important;
    min-width: 0 !important;
    padding: 0.2rem 0 !important;
    border: 0 !important;
    text-align: right;
    overflow-wrap: anywhere;
  }

  /* Columnas que la pagina oculta por ancho (`d-none d-md-table-cell`): por debajo de su
     corte siguen ocultas; por encima, Bootstrap las devuelve con `display: table-cell
     !important`, que dentro de una ficha las dejaba como celdas sueltas. Aqui pasan a ser
     una linea mas. Los cortes lg, xl y xxl quedan por encima del movil: no hacen falta.
     :not(:empty): este !important ganaria a la regla de «celda sin contenido» de abajo y
     una columna vacia dejaria una linea en blanco. */
  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th).d-table-cell:not([data-vzt-titulo]):not(:empty) {
    display: flex !important;
  }

  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th).d-table-cell[data-vzt-titulo]:not(:empty) {
    display: block !important;
  }

  @media (min-width: 576px) {
    table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th).d-sm-table-cell:not([data-vzt-titulo]):not(:empty) {
      display: flex !important;
    }

    table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th).d-sm-table-cell[data-vzt-titulo]:not(:empty) {
      display: block !important;
    }
  }

  @media (min-width: 768px) {
    table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th).d-md-table-cell:not([data-vzt-titulo]):not(:empty) {
      display: flex !important;
    }

    table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th).d-md-table-cell[data-vzt-titulo]:not(:empty) {
      display: block !important;
    }
  }

  /* Celda sin contenido: no se pinta una linea en blanco. !important para ganar tambien al
     `display: table-cell !important` de una columna d-md-table-cell vacia. */
  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th):empty {
    display: none !important;
  }

  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th)::before {
    content: attr(data-etiqueta);
    flex: 0 0 auto;
    max-width: 45%;
    margin-right: auto;
    color: var(--bs-text-muted);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
  }

  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th)[data-etiqueta=""]::before {
    content: none;
  }

  /* El titulo de la ficha es la primera celda con texto (fichas.js la marca
     con data-vzt-titulo): sin etiqueta, a todo el ancho. */
  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th)[data-vzt-titulo] {
    display: block;
    padding-bottom: 0.35rem !important;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
  }

  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th)[data-vzt-titulo]::before {
    content: none;
  }

  /* Acciones: el pie de la ficha (spec §4.7). fichas.js marca la celda con
     data-vzt-acciones. Sin etiqueta, a todo el ancho, controles al final y separada de
     los campos por una linea fina; `order` la baja aunque no sea la ultima columna. */
  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th)[data-vzt-acciones] {
    order: 1;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
    padding-top: 10px !important;
    border-top: 1px solid var(--bs-border-color) !important;
  }

  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th)[data-vzt-acciones]::before {
    content: none;
  }

  /* Dos celdas de acciones seguidas comparten pie: solo la primera lleva la linea. */
  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th)[data-vzt-acciones] ~ [data-vzt-acciones] {
    margin-top: 0;
    padding-top: 0.2rem !important;
    border-top: 0 !important;
  }

  /* Pastillas de estado: una linea, sin estirarse al alto de la ficha
     (fallo visto en el mockup del 2026-10-10; test_fichas_fixture.js). */
  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th) > .badge {
    flex: 0 0 auto;
    align-self: flex-start;
    white-space: nowrap;
  }

  table[data-vzt-fichas] > :is(tbody, tfoot) > tr > :is(td, th) .btn:not(.btn-icon) {
    min-height: 44px;
  }

  /* Fila de «sin resultados»: un mensaje centrado, no una ficha. */
  table[data-vzt-fichas] > tbody > tr[data-vzt-fila="mensaje"] {
    border-style: dashed !important;
    text-align: center;
  }

  table[data-vzt-fichas]:not(.table-bordered) > tbody > tr[data-vzt-fila="mensaje"]:last-child {
    border-bottom-style: dashed !important;
  }

  table[data-vzt-fichas] > tbody > tr[data-vzt-fila="mensaje"] > :is(td, th) {
    display: block;
    font-size: inherit;
    font-weight: 400;
    text-align: center;
    color: var(--bs-text-muted);
  }

  /* --- Hoja inferior en lugar de modal ----------------------------------
     .modal va por encima de la barra inferior (el bundle le da z-index 1055).
     Los modal-fullscreen* quedan FUERA: se pintan como Bootstrap los pinta hoy.
     Especificidad: .modal .modal-dialog.modal-dialog (0,3,0) gana a las variantes
     de Bootstrap (.modal-dialog-centered, .modal-lg/-sm/-xl) y max-width lleva
     !important porque las utilidades de Metronic (.mw-650px) lo traen asi. */
  .modal .modal-dialog.modal-dialog:not([class*="modal-fullscreen"]) {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 100% !important;
    height: auto;
    min-height: 100%;
    margin: 0;
  }

  .modal .modal-dialog.modal-dialog:not([class*="modal-fullscreen"]) > .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border: 0;
    border-radius: 20px 20px 0 0;
    transition: transform 0.2s ease;
  }

  /* Tirador: solo CSS (hojas.js no anade nodos, para no chocar con el diff de Blazor).
     Franja de 24 px con una barra de 38x4 centrada; hojas.js la detecta por geometria. */
  .modal .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content::before {
    content: "";
    display: block;
    flex: 0 0 24px;
    height: 24px;
    background: var(--bs-gray-400);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='4'%3E%3Crect width='38' height='4' rx='2'/%3E%3C/svg%3E") center / 38px 4px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='4'%3E%3Crect width='38' height='4' rx='2'/%3E%3C/svg%3E") center / 38px 4px no-repeat;
  }

  /* Contenido envuelto en un form (un unico hijo que contiene cabecera, cuerpo y pie):
     el form hace de columna para que el cuerpo desplace y el pie quede a la vista. */
  .modal .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .modal .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content > .modal-body,
  .modal .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .modal .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content > .modal-header,
  .modal .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content > form > .modal-header {
    flex: 0 0 auto;
    padding-top: 0.5rem;
  }

  .modal .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content > .modal-footer,
  .modal .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content > form > .modal-footer {
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  /* Botones del pie: son las acciones principales de la hoja, asi que TODOS los que no
     son icono miden 44 px, tambien los .btn-sm. Con tres o mas, el pie salta de linea
     en vez de estrujar las etiquetas. */
  .modal .modal-dialog:not([class*="modal-fullscreen"]) .modal-footer .btn:not(.btn-icon) {
    flex: 1 1 auto;
    min-width: 30%;
    min-height: 44px;
  }

  /* --- Formularios -------------------------------------------------------
     Los -sm TAMBIEN pasan a 44 px y 16 px: es deliberado (por debajo de 16 px iOS hace
     zoom al enfocar y 44 px es el minimo tactil). Los -lg tampoco bajan de 16 px.
     Quedan fuera el selector de color y el input file, que se deformarian. */
  .form-control:not(.form-control-color):not([type="file"]),
  .form-select {
    min-height: 44px;
  }

  /* 16px y no 1rem: Metronic fija el font-size de la raiz por debajo de 16 px, y en el
     fixture 1rem se computaba a 12 px (medido), con lo que iOS hacia zoom al enfocar.
     Los -lg TAMBIEN: su 1.15rem son 13,8 px con la raiz de Metronic, por debajo de 16.
     max(): nunca menos de 16 px, sin encoger al -lg si la raiz fuese mayor. Un tamano
     propio en linea (style) sigue mandando. */
  .form-control:not(.form-control-lg):not(.form-control-color):not([type="file"]),
  .form-select:not(.form-select-lg) {
    font-size: 16px;
  }

  .form-control-lg:not(.form-control-color):not([type="file"]),
  .form-select-lg {
    font-size: max(16px, 1.15rem);
  }

  textarea.form-control {
    min-height: 88px;
  }

  /* Etiqueta flotante: Bootstrap dimensiona la caja en rem (47 px con la raiz de Metronic)
     y con la letra a 16 px el valor quedaba cortado por abajo (filtros de /control-gastos,
     e2e del 2026-10-11). Medidas de Bootstrap con raiz de 16 px, en px. */
  .form-floating > :is(.form-control, .form-select):not(textarea) {
    height: 58px;
    min-height: 58px;
    padding-top: 26px;
    padding-bottom: 8px;
  }

  .input-group > .btn:not(.btn-icon) {
    min-height: 44px;
  }

  #kt_app_content .btn:not(.btn-icon):not(.btn-sm):not(.btn-link):not(.btn-flush) {
    min-height: 44px;
  }

  /* --- Anchos fijos que no caben en un telefono ---------------------------
     Tres patrones de Metronic repetidos en muchas paginas, que sacaban el documento de
     la pantalla (e2e del 2026-10-11, docs/manual/movil/cimientos/desbordamientos.md).
     Se neutralizan aqui, sin tocar las paginas; lo que es propio de UNA pagina no.
     1) Cabecera de tarjeta con buscador y filtros (`.card-title` y `.card-toolbar` no
        saltan de linea y sus hijos no encogen). */
  #kt_app_content .card-header > :is(.card-title, .card-toolbar) {
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
  }

  #kt_app_content .card-header > :is(.card-title, .card-toolbar) > * {
    min-width: 0;
    max-width: 100%;
  }

  /* 2) Campos con ancho fijo (`w-200px`, `w-300px`…): como mucho, el de su contenedor. */
  #kt_app_content :is(.form-control, .form-select) {
    max-width: 100%;
  }

  /* 3) Grupo de botones mas ancho que su contenedor: salta de linea. */
  #kt_app_content .btn-group {
    flex-wrap: wrap;
    max-width: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    .modal .modal-dialog.modal-dialog:not([class*="modal-fullscreen"]) > .modal-content {
      transition: none;
    }
  }
}