/* ============================================================
   RESPONSIVE — breakpoints, shell de dialogo y helpers de layout
   ------------------------------------------------------------
   Breakpoints alineados a los de MudBlazor (xs/sm/md/lg), porque
   el marcado ya reparte columnas con spans xs=/sm=/md=. Antes solo
   existia UN breakpoint (900px) pensado para tablet:

     ≤ 599px     teléfono          → una columna
     600–959px   tablet vertical   → 1–2 columnas
     960–1279px  tablet apaisado   → 3 columnas
     ≥ 1280px    escritorio        → idéntico a hoy

   ⚠️ El 900px de antes dejaba una banda muerta real: el POS pide
   420 + 120 + 380 = 920px minimos para sus 3 columnas, pero apilaba
   a los 900 → entre 901 y 919px la columna derecha se recortaba en
   silencio. Por eso el apilado del POS pasa a 959.98px.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   SHELL DE DIALOGO — arregla los ~24 dialogos de una vez
   ------------------------------------------------------------
   El shell anterior estaba mal calculado:
     contenido 78vh + titulo ~64px + acciones ~56-80px  >  92vh
   asi que en un tablet apaisado de 800px de alto los botones de
   Aceptar/Cancelar se cortaban. Y el max-width solo aplicaba por
   debajo de 900px, de modo que un 1280x800 no lo recibia.

   La solucion es estructural, no de numeros: el dialogo es una
   columna flex y el UNICO que crece/scrollea es el contenido, asi
   que el pie siempre queda dentro del viewport sea cual sea la
   altura del titulo o de las acciones.
   ──────────────────────────────────────────────────────────── */

.mud-dialog {
    display: flex;
    flex-direction: column;
    /* dvh sigue a la barra de direcciones del movil; vh se queda con la
       altura maxima y deja el pie debajo del pliegue. */
    max-height: min(92vh, calc(100dvh - 24px));
}

/* 🚫 El `max-width` NO puede declararse aqui sin condicion.
   MudBlazor fija el ancho del dialogo con `.mud-dialog-width-xs|sm|md|...`
   (444/600/960/1280px), que tienen la MISMA especificidad que `.mud-dialog`
   (0,1,0). Esta hoja carga DESPUES de MudBlazor, asi que un `max-width` suelto
   aqui gana por orden y **anula el tamano de TODOS los dialogos**: medido en
   Windows a 1536px, el teclado de "Enter guest amount" (MaxWidth.Small = 600px)
   se renderizaba a **1472px**, con cada tecla de 500px de ancho.
   El tope al viewport solo hace falta donde el ancho de MudBlazor no cabe, que
   es por debajo de 960px (un `sm` de 600px no entra en un telefono de 392px).
   De ahi para arriba manda MudBlazor, que es lo que se ve en escritorio. */
@media (max-width: 959.98px) {
    .mud-dialog {
        max-width: min(96vw, 100%);
    }
}

.mud-dialog .mud-dialog-title,
.mud-dialog .mud-dialog-actions {
    flex: 0 0 auto;
}

.mud-dialog .mud-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Anula el 78vh anterior: ahora la altura la reparte el flex. */
    max-height: none;
}

/* Los diálogos traian su propio max-height (50-80vh) + overflow en un
   contenedor interno. Dentro del shell flex eso solo produce doble barra de
   scroll y espacio muerto: CheckProductPrice se quedaba en 50vh utiles
   dentro de un dialogo que ya podia usar 92vh. El contenedor pasa a
   .ui-dialog-body y quien scrollea es .mud-dialog-content. */
.mud-dialog .ui-dialog-body {
    max-width: 100% !important;
    margin: 0 !important;
}

/* Red de seguridad por si queda algun contenedor sin migrar. */
.mud-dialog .mud-dialog-content .mud-container {
    max-height: none !important;
}

/* Pie: fila que envuelve. Sin esto, tres botones con min-width fijo
   suman mas ancho que el dialogo y el ultimo se sale. */
.mud-dialog .mud-dialog-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.mud-dialog .mud-dialog-actions > * {
    min-width: 0;
}

/* ⚠️ Los pies de dialogo anidan MudStack/MudPaper dentro de las acciones, y
   esos contenedores traen su propio `nowrap`. Medido en la pantalla de pago:
   la fila de billetes ($5..$100 + CLOSE) media 816px dentro de un dialogo de
   329px y simplemente se salia por la derecha.
   ⚠️ El gancho es `.d-flex`, NO `.mud-stack`: en MudBlazor 8 un MudStack
   renderiza `div.d-flex.flex-row...` y no emite ninguna clase `mud-stack`. */
.mud-dialog .mud-dialog-actions .d-flex,
.mud-dialog .mud-dialog-actions .mud-paper {
    flex-wrap: wrap !important;
    min-width: 0;
    max-width: 100%;
}

.mud-dialog .mud-dialog-actions .mud-paper {
    background-color: transparent;
}

/* MudPaper vacio usado como separador: en un pie que envuelve solo estorba */
.mud-dialog .mud-dialog-actions .mud-paper:empty {
    display: none;
}

/* ⚠️ Varios pies meten los botones dentro de un `<div style="text-align:right">`
   con `display: block`, asi que los botones son inline-block y envuelven en
   ESCALERA (CLEAR y CANCEL en una linea, SUBMIT descolgado en una tercera,
   pegado a la derecha). Convertir ese div en una fila flex que envuelve los
   alinea y los deja repartirse el ancho. */
.mud-dialog .mud-dialog-actions .mud-paper > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: flex-end;
    width: 100%;
}

/* Se anula el `width:100%` que traen algunos pies (con wrap dejaria un boton
   por fila). El ancho lo pone el contenido; repartirlo es cosa del telefono. */
.mud-dialog .mud-dialog-actions .mud-button-root {
    width: auto;
}

/* 🚫 Los botones del pie NO deben estirarse fuera del telefono.
   `flex: 1 1 auto` reparte el ancho del dialogo entre las acciones: en
   escritorio eso convirtio el CANCEL de "Lookup Items" en un boton de
   **724px** y las flechas de paginacion en cajas de 365px. En un telefono
   estirar es justo lo que se quiere (rejilla 2x2 alcanzable con el pulgar);
   en escritorio el pie va alineado a la derecha con el ancho del texto, que
   es el comportamiento por defecto de MudBlazor. */
@media (max-width: 599.98px) {
    .mud-dialog .mud-dialog-actions > *,
    .mud-dialog .mud-dialog-actions .mud-paper,
    .mud-dialog .mud-dialog-actions .mud-button-root {
        flex: 1 1 auto;
    }

    .mud-dialog .mud-dialog-actions .mud-button-root {
        min-width: 88px;
    }
}

/* En escritorio los pies con MUCHOS botones si deben repartirse la fila: la
   pantalla de pago pone los billetes ($5..$100) y CLOSE ahi, y con el ancho
   del texto quedaban apinados a la derecha dejando ~700px vacios. Se estiran
   solo los que el propio codigo marca con `.mud-buttons` (los que ya venian
   con `width: 100%`), y con un TOPE: sin el, un pie de un solo boton vuelve a
   producir el CANCEL de 724px de "Lookup Items". */
@media (min-width: 600px) {
    /* Los CONTENEDORES del pie ocupan la fila; un boton suelto NO. Es la
       distincion que faltaba: estirar cualquier hijo dejaba el CANCEL de
       "Lookup Items" en 724px, y no estirar ninguno dejaba los billetes de la
       pantalla de pago apinados a la derecha con ~455px vacios al lado. */
    .mud-dialog .mud-dialog-actions > *:not(.mud-button-root) {
        flex: 1 1 auto;
    }

    /* Y dentro, solo se reparten los que el propio codigo marca con
       `.mud-buttons` (los que ya venian con `width: 100%`), con un tope para
       que un pie de un solo boton no vuelva a estirarse sin freno. */
    .mud-dialog .mud-dialog-actions .mud-buttons {
        flex: 1 1 auto;
        max-width: 220px;
    }

    /* El pie va SIEMPRE alineado a la derecha, tambien cuando los botones vienen
       envueltos en un MudStack.
       ⚠️ El `justify-content: flex-end` que trae MudBlazor en `.mud-dialog-actions`
       deja de servir en cuanto la regla de arriba estira ese envoltorio a toda la
       fila: a partir de ahi manda el `justify-content` del envoltorio, que es
       `normal` (= izquierda). Los pies que anidan `MudStack > MudPaper > div`
       aguantaban solo porque el MudPaper del medio (paginacion) crecia y empujaba
       el bloque; en los que ese paper va VACIO lo borra
       `.mud-dialog-actions .mud-paper:empty { display:none }` y el pie entero se
       pegaba a la izquierda. Medido a 1536px: `ModifiersGroupsDialog` con
       CANCEL/NONE/CLEAR/ACCEPT dejaba **1016px** de hueco a la derecha, y el
       CANCEL de `SelectGuestDialog`, **841px**.
       ⚠️ El gancho es `.d-flex`, NO `.mud-stack`: en MudBlazor 8 un MudStack
       renderiza `div.d-flex.flex-row...` y no emite ninguna clase `mud-stack`.
       No pisa a quien centra a proposito (`Justify.Center` emite `.justify-center`
       con `!important`), asi que la paginacion de LookUp y los billetes de la
       pantalla de pago siguen centrados. */
    .mud-dialog .mud-dialog-actions .d-flex {
        justify-content: flex-end;
    }
}

/* Entrada de dialogo: desde 0.97, NUNCA desde scale(0) — nada en el mundo
   real aparece de la nada, y un elemento que crece desde cero se lee como un
   glitch. La salida va mas rapida que la entrada para no hacer esperar.
   ⚠️ transform-origin queda en `center`: un dialogo no esta anclado a ningun
   disparador (a diferencia de un popover, que si debe crecer desde el suyo). */
.mud-dialog {
    transition: transform var(--dur-enter) var(--ease-out),
                opacity var(--dur-enter) var(--ease-out);
}

@starting-style {
    .mud-dialog {
        opacity: 0;
        transform: scale(0.97);
    }
}

/* El overlay entra y sale mas rapido que el dialogo: si tarda lo mismo, el
   cierre se percibe pesado. */
.mud-overlay {
    transition: opacity var(--dur-exit) var(--ease-out);
}

@media (max-width: 599.98px) {
    /* En telefono el dialogo ocupa el ancho util: los margenes laterales
       de escritorio dejan las etiquetas de los campos en dos lineas. */
    .mud-dialog {
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }
    .mud-dialog .mud-dialog-content {
        padding-left: var(--sp-3) !important;
        padding-right: var(--sp-3) !important;
    }

    /* ⚠️ Las filas de filtros dentro de un dialogo (MudStack Row, que renderiza
       `d-flex flex-row`) no envuelven: en "Recall Invoice" metian buscador +
       dos selectores de fecha + boton en 329px, dejando cada campo en 14px de
       ancho y el boton SEARCH fuera de la pantalla.
       El suelo en los controles es lo que fuerza el salto de linea: sin el, un
       campo de texto encoge hasta su contenido minimo antes de envolver. */
    .mud-dialog .d-flex.flex-row {
        flex-wrap: wrap;
    }

    .mud-dialog .mud-input-control {
        min-width: 150px;
    }

    /* ⚠️ Cuando la barra de filtros de un MudTable envuelve, los campos quedan a
       ancho completo pero el boton de buscar se queda del ancho de su texto: en
       "Invoice History" los campos median 265px y SEARCH solo 97px, alineado a
       la izquierda y colgando suelto. Ademas el bloque de filtros terminaba
       EXACTAMENTE donde empieza la tabla (sin un pixel de separacion), asi que
       el boton parecia pegado a la primera fila de resultados. */
    /* ⚠️ `.mud-toolbar` trae `flex-wrap: nowrap`, asi que sus hijos se aprietan
       en vez de saltar de linea: en "Customers" el campo se quedaba en su
       minimo de 150px y SEARCH se encogia a 49px con la etiqueta RECORTADA
       ("SEARC"), mientras ADD NEW partia en dos lineas. */
    .mud-dialog .mud-toolbar {
        flex-wrap: wrap;
        padding-bottom: var(--sp-3);
        row-gap: var(--sp-2);
    }

    /* El campo de busqueda se lleva su propia fila completa */
    .mud-dialog .mud-toolbar > .mud-input-control,
    .mud-dialog .mud-toolbar .d-flex > .mud-paper {
        flex: 1 1 100%;
    }

    /* ⚠️ Dos casos distintos y hay que separarlos:
       - boton que cuelga DIRECTO de la barra: es un item flex, se reparte la
         fila con sus hermanos (Customers: SEARCH + ADD NEW lado a lado);
       - boton dentro de un MudPaper: no es item flex de la barra, asi que la
         unica forma de que llene su contenedor es `width: 100%`
         (Invoice History / On Hold Invoices). */
    .mud-dialog .mud-toolbar > .mud-button-root:not(.mud-icon-button) {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .mud-dialog .mud-toolbar .mud-paper .mud-button-root:not(.mud-icon-button) {
        width: 100%;
    }

    /* ⚠️ Los pies anidan los botones en dos o tres capas de MudPaper/div, asi que
       cada grupo reclama su propia fila aunque sobre sitio: CANCEL solo en una
       linea y NONE/CLEAR/ACCEPT en otras dos. `display: contents` disuelve esos
       envoltorios y deja que los botones fluyan como una sola rejilla que
       envuelve. Es seguro porque aqui esos MudPaper van sin elevacion ni fondo
       (ver la regla que los pone transparentes mas arriba). */
    .mud-dialog .mud-dialog-actions .d-flex,
    .mud-dialog .mud-dialog-actions .mud-paper,
    .mud-dialog .mud-dialog-actions .mud-paper > div {
        display: contents;
    }
}

/* ────────────────────────────────────────────────────────────
   TECLADOS EN PANTALLA
   Una fila de 13 teclas a 44px son 668px: no caben en un telefono
   de 392px ni respetando el minimo tactil. La unica salida honesta
   es envolver a dos filas; achicar la tecla incumpliria la pauta.
   ──────────────────────────────────────────────────────────── */

.ui-key-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-1);
}

.ui-key {
    flex: 0 0 auto;
    min-width: clamp(var(--touch-min), 8.5vw, 64px);
    min-height: clamp(var(--touch-min), 8.5vw, 64px);
}

.ui-key-wide {
    min-width: clamp(120px, 30vw, 300px);
}

/* ────────────────────────────────────────────────────────────
   HELPERS DE LAYOUT
   Cadena flex de pantalla completa. Es el patron que ya funciona
   en KDS/OrderDetail (.kds-od-*) y en KIOSK/Step1, generalizado.
   Sin `min-height:0` en cada eslabon, el hijo con scroll no encoge
   y el contenido desborda por abajo sin barra.
   ──────────────────────────────────────────────────────────── */

.ui-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ui-fill {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ui-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* En una columna flex la cabecera y el pie no deben encogerse: solo cede el
   cuerpo con scroll. Sin esto, una cabecera de filtros de 4 filas se aplasta. */
.ui-fill > .mud-card-header,
.ui-fill > .mud-card-actions,
.ui-page > .mud-card-header,
.ui-page > .mud-card-actions {
    flex: 0 0 auto;
}

/* Nunca dejar que una imagen o un SVG crudo fuerce scroll horizontal
   (el de NotFoundLayout mide 550px de ancho fijo). */
img, svg, video, canvas {
    max-width: 100%;
}

/* Por debajo de tablet apaisado la pagina scrollea entera y las
   columnas dejan de pelearse por una altura que no hay. */
@media (max-width: 959.98px) {
    .ui-page {
        overflow-y: auto;
        overflow-x: hidden;
    }
    .ui-fill {
        height: auto;
    }
}