/* ==========================================================================
   selling_menu-desktop.css — Desktop overrides (min-width breakpoints)
   Pareja de selling_menu.css, siguiendo el patron mobile-first del proyecto
   (igual que agenda.css + agenda-desktop.css).
   ========================================================================== */

@media (min-width: 992px) {

  /* ------------------------------------------------------------------------
     1. AVISO DE ALERGENOS (#menu_toast): de hoja inferior a ventana
     ------------------------------------------------------------------------ */

  /* Ya se comporta como un modal: pinta un fondo oscuro a pantalla completa con
     blur y bloquea la interaccion. Lo que no encajaba en escritorio era su
     tarjeta, pegada abajo y a todo el ancho, heredado de .notification-box
     (left:0, right:0, width:100%) mas el w-100 del marcado. Cruzaba incluso por
     debajo del sidebar.
     Aqui la tarjeta recibe un ancho maximo y se mantiene anclada abajo, centrada
     horizontalmente. En movil sigue siendo la hoja inferior a todo el ancho. */
  div#menu_toast.show {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    /* El borde superior solo tenia sentido cuando la tarjeta iba pegada abajo y
       a todo el ancho: sobre un fondo a pantalla completa es una linea suelta. */
    border-top: none;
  }

  div#menu_toast.show .notification-dialog.android-style {
    position: relative;
    bottom: auto;
    width: 100%;
    max-width: 480px;
    margin-bottom: 24px;
    border-radius: var(--radius-lg);
  }

  /* El footer es el ultimo hijo y desbordaba el radio de la tarjeta, dejando las
     esquinas de abajo cuadradas. Se redondean en el footer y en su boton, en vez
     de recortar con overflow:hidden en la tarjeta: el logo de la cabecera
     sobresale por arriba a proposito (top:-25px) y quedaria cortado. */
  div#menu_toast.show .notification-footer,
  div#menu_toast.show .notification-footer .notification-button {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }

  /* ------------------------------------------------------------------------
     2. BOTON DE ALERGIAS: devuelto al flujo de la columna
     ------------------------------------------------------------------------ */

  /* Iba en position:absolute con bottom:20px y right:0 respecto a
     .ht-menu-sidebar, que es sticky y mide calc(100vh - 104px). Resultado: se
     quedaba flotando solo en el fondo de una columna casi vacia, sin ninguna
     relacion visual con el resto y fuera del flujo.
     Se devuelve al flujo. En el marcado es el ultimo hijo del bloque de acciones,
     que va ANTES de los filtros, asi que queda arriba de la columna y por encima
     de la linea que separa acciones de filtros. Para un aviso de alergias es la
     mejor posicion: se ve sin necesidad de hacer scroll.
     La sombra baja a --shadow-sm: la de origen (0 12px 24px rgba(0,0,0,0.15))
     estaba pensada para un boton flotante y en flujo resultaba excesiva.
     Se ataca por ID para ganar al !important de .btn-floating-allergens. */
  #btn_open_allergens {
    /* Hay que resetear las cuatro: en shared.css lleva left:50% (que con
       position:absolute se compensaba con translateX(-50%)). En relative ese
       left:50% desplaza el boton media columna a la derecha. */
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    /* shared.css le pone min-width:140px; con box-sizing y una columna estrecha
       eso podria volver a desbordar, asi que manda el ancho de la columna. */
    box-sizing: border-box !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    margin-bottom: 4px !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* En shared.css el boton es absolute con left:50%, y se centra con
     transform: translateX(-50%) translateY(-15px). Sus estados mueven ese
     translate (hover -18px, active -12px), un rebote pensado para un boton
     flotante. En flujo y a ancho completo ese transform lo desplaza de sitio y el
     rebote se ve como un salto raro al pulsarlo.
     Se anula el transform en los tres estados y la respuesta pasa a ser solo de
     sombra, que no mueve el boton. */
  #btn_open_allergens,
  #btn_open_allergens:hover,
  #btn_open_allergens:active,
  #btn_open_allergens:focus {
    transform: none !important;
  }

  #btn_open_allergens:hover {
    box-shadow: var(--shadow-md) !important;
  }

  #btn_open_allergens:active {
    box-shadow: var(--shadow-sm) !important;
  }

  /* ------------------------------------------------------------------------
     3. FILTROS DE CATEGORIA: que no desborden la columna
     ------------------------------------------------------------------------ */

  /* .menu-category es display:inline-table (selling_menu.css), que se ajusta a su
     contenido y no lo envuelve: con etiquetas largas ("PIATTO PRINCIPALE / PLATO
     PRINCIPAL") el texto se salia de la pildora y de la propia columna.
     En movil ese inline-table tiene sentido, porque los filtros son una fila
     horizontal con scroll. En la columna vertical de escritorio, no.
     Se pasa a block acotado al ancho de la columna y se permite que el texto
     envuelva a varias lineas, en vez de truncarlo: son nombres de categoria y
     recortarlos perderia informacion util para el huesped. */
  .ht-menu-sidebar .menu-category,
  #footer_filters .menu-category {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* ------------------------------------------------------------------------
     4. INDICE DE CARTAS (#selling_items_modal): pantalla completa
     ------------------------------------------------------------------------ */

  /* Es un .ht-modal-full, asi que en escritorio recibe dos tratamientos que en
     esta pantalla no encajan:
       - el bloque 1 de ht-modals-desktop.css lo convierte en ventana flotante
         (max-width:650px, max-height:90vh, margin:5vh auto),
       - y su regla .ht-modal-full .vh-100.proh pone height:auto, matando el
         vh-100 del fondo coloreado del hotel.
     Juntos dejaban el fondo como una banda horizontal centrada, con hueco gris
     arriba y abajo, en vez de cubrir la pantalla.
     No es un dialogo: es una pantalla de eleccion, con su propio boton de volver
     y su selector de idioma. Aqui se le devuelve el comportamiento a pantalla
     completa; la tarjeta interior sigue centrandose por su align-self-center.
     Se ataca por ID para ganar a esas reglas, que son de clases. */
  #selling_items_modal .modal-dialog {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
  }

  #selling_items_modal .modal-content {
    height: 100% !important;
    max-height: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #selling_items_modal .vh-100.proh {
    width: 100% !important;
    height: 100vh !important;
    padding: 50px !important;
  }

  /* La imagen de fondo. selling_menu.css:603 ya intenta ponerla a 100vw/100vh con
     object-fit:cover, pero no resetea lo que hereda, y entre las tres reglas la
     imagen quedaba desplazada y recortada:
       - shared.css le pone right:50% y transform:translateX(50%) (pensados para
         centrarla cuando iba en otra posicion). Con left:0 y width:100vw, ese
         translate la empuja 50vw a la derecha, casi fuera de pantalla.
       - selling_menu.css:115 le pone max-height:25vh !important, que no queda
         anulado por el height:100vh de la regla de escritorio y la recortaba a un
         cuarto del alto.
     Aqui se resetean las tres. Con object-fit:cover y object-position por defecto
     (50% 50%) el recorte queda centrado, que es el comportamiento buscado. */
  #selling_items_modal .splash-image {
    right: auto !important;
    bottom: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }
}

/* --- DESKTOP CON SIDEBAR (>=1280px) --------------------------------------- */
@media screen and (min-width: 1280px) {

  /* Mismo criterio que los modales (shared-desktop.css): la tarjeta se centra en
     el area visible descontando el sidebar, mientras el fondo oscuro sigue
     cubriendo toda la pantalla, sidebar incluido.
     Con justify-content:center, este margen entra en el reparto del espacio
     libre, asi que el resultado es un centrado exacto en el hueco restante. */
  body.sidemenu-open div#menu_toast.show .notification-dialog.android-style {
    margin-left: 290px;
  }

  /* El indice de cartas queda fuera del desplazamiento por sidebar que
     shared-desktop.css aplica al resto de modales: no es un dialogo sobre la
     pagina, es una pantalla de eleccion con su propio boton de volver, y debe
     cubrir tambien el sidebar. */
  body.sidemenu-open #selling_items_modal {
    left: 0 !important;
    width: 100% !important;
  }
}