@font-face {
    font-family: var(--nombreFuenteLight);
    font-style: normal;
    font-weight: 300;
    src: var(--fuenteLight);
}
@font-face {
    font-family: var(--nombreFuenteRegular);
    font-style: normal;
    font-weight: 400;
    src: var(--fuenteRegular);
}
@font-face {
    font-family: var(--nombreFuenteMedium);
    font-style: normal;
    font-weight: 500;
    src: var(--fuenteMedium);
}

@font-face {
    font-family: var(--nombreFuenteBold);
    font-style: normal;
    font-weight: 700;
    src: var(--fuenteBold);
}

@font-face {
    font-family: var(--nombreFuenteBlack);
    font-style: normal;
    font-weight: 800;
    src: var(--fuenteBlack);
}

@font-face {
    font-family: "Fuente Bold NoScript";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/Roboto/Roboto-Bold.ttf");
}

@font-face {
    font-family: "Fuente NoScript";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/Roboto/Roboto-Regular.ttf");
}

.fuenteLight {
    font-family: var(--nombreFuenteLight) !important;
}
.fuenteBold {
    font-family: var(--nombreFuenteBold) !important;
}

.colorClarito {
    color: var(--colorClarito) !important;
}

/* Estilos para el despegable de autocompletado de direcciones de Google*/

.pac-container {
    border: 2px solid var(--colorPrincipal);
    border-radius: 8px;
    font-family: "fuenteRegular" !important;
}

div.pac-container {
    z-index: 99999999999 !important;
}

.pac-logo:after {
    display: none !important;
}

.pac-icon {
    background: url("images/Iconos/localizacionBlack.svg") no-repeat center !important;
    background-size: 14px;
    margin: 5px 6px 6px 0;
    vertical-align: middle;
}

.pac-item-selected {
    vertical-align: middle;
}

.pac-item {
    padding: 0.6rem;
    display: flex !important;
    align-items: center !important;
}

/*  ESTILOS GENERALES */

:root {
    --grisClaritoMyWaiter: #f7f5f7;
    /* --font-size-sm : 12px;
    --font-size-1 : 14px;
    --font-size-2 : 16px;
    --font-size-3 : 18px;
    --font-size-4 : 20px;
    --font-size-5 : 24px;
    --font-size-lg: 32px; */
    --m-sm: 0.2rem;
    /* --m-05 : 0.5rem;
    --m-1: 1rem; */
    --m-md: 1.5rem;
    --m-lg: 2rem;
    --blackColor: #212121;
    --textoClaro: #727272;
}

.textoClaro {
    color: var(--textoClaro);
}

.f-size-sm {
    font-size: var(--font-size-sm);
}
.f-size-1 {
    font-size: var(--font-size-1);
}
.f-size-2 {
    font-size: var(--font-size-2);
}
.f-size-3 {
    font-size: var(--font-size-3);
}
.f-size-4 {
    font-size: var(--font-size-4);
}
.f-size-5 {
    font-size: var(--font-size-5);
}
.f-size-lg {
    font-size: var(--font-size-lg);
}

.f-extra-lg {
    font-size: 64px;
}

* {
    padding: 0;
    margin: 0;
    color: var(--blackColor);

    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

html {
    background-color: #fff;
    overscroll-behavior-y: contain !important;
}

body {
    overscroll-behavior-y: contain !important;
    width: 100%;
    height: 100%;
    font-family: "fuenteRegular";
    max-width: var(--MWMaxWidth);
    margin: 0 auto;
    background-color: #fff;

    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

a {
    text-decoration: none;
    color: rgb(
        calc(var(--redPrincipal) + 20),
        calc(var(--greenPrincipal) + 20),
        calc(var(--bluePrincipal) + 20)
    ) !important;
    font-size: var(--font-size-sm);
    font-family: "fuenteRegular";
}

img,
canvas,
iframe,
video,
svg,
select,
textarea {
    max-width: 100%;
}

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: var(--fuenteRegular);
    font-size: var(--font-size-1);
}

hr {
    border: 0 none var(--grisClaritoMyWaiter);
    border-top: 1px solid var(--grisClaritoMyWaiter);
    margin: 0.5rem 0 !important;
}

button {
    border: none !important;
    outline: none !important;
    background: none;
}

p {
    margin: 0;
    padding: 0;
}

.Cargando {
    margin: 50px;
    /* align-content: center; */
}

.descBoton {
    font-size: 10px;
    font-weight: bold;
}

.logo {
    display: grid;
    justify-content: center;
    margin-top: var(--m-1);
    align-self: center;
    max-width: 150px;
    height: auto;
}

.titulo {
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 15px;
}

#logoMyWaiter img {
    width: 100%;
    max-width: 200px;
    height: auto;
}

.box-shadow {
    box-shadow: 5px 6px 15px -3px rgb(123 123 123 / 50%);
}

.w-100 {
    width: 100%;
}

.font-weight-bold {
    font-family: "fuenteBold" !important;
}

.font-weight-light {
    font-family: "fuenteLight" !important;
}

.font-weight-regular {
    font-family: "fuenteRegular" !important;
}

.font-weight-medium {
    font-family: "fuenteMedium" !important;
}

.font-weight-black {
    font-family: "fuenteBlack" !important;
}

.font-color-blanco {
    color: white !important;
}

.font-color-negro {
    color: black !important;
}

.mdl-snackbar__text {
    color: var(--colorTextoSecundario) !important;
    font-size: var(--font-size-1) !important;
    font-family: "fuenteMedium" !important;
    justify-self: center !important;
    display: flex;
    align-items: center;
}

.mdl-snackbar__action,
.accionSnackbar {
    color: var(--colorTextoSecundario) !important;
    font-family: "fuenteMedium" !important;
    text-transform: uppercase;
}

#infoArticulos,
.mdl-snackbar {
    z-index: 9999999999 !important;
    background-color: var(--colorSecundario);
    width: 100% !important;
    max-width: var(--MWMaxWidth);
    padding: var(--m-05) !important;
    box-sizing: border-box;
    pointer-events: inherit !important;
}

.border-radius {
    border-radius: 8px;
}

.colorNegativo {
    color: var(--colorNegativo) !important;
}

/*  Estilos para Swiper */

.swiper-container {
    width: 100%;
}

#swiperPromo {
    height: var(--promoContainer);
    z-index: 0 !important;
}

#swiperPromo .swiper-wrapper {
    z-index: 0 !important;
}

.swiper-container {
    z-index: 0 !important;
}

#alergenosFiltro,
#filtro {
    height: 25px;
}

#swiperPromo.swiper-container {
    width: 100%;
    height: var(--promoContainer);
}

#swiperPromo .swiper-slide {
    background-position: center;
    background-size: cover;
    width: var(--promoSlideW);
    height: var(--promoSlideH);
}

#filtro .swiper-slide {
    margin-right: 15px;
    white-space: nowrap;
    max-width: 100%;
    text-align: center;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px !important;
    width: auto;
    color: var(--blackColor);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#filtroAlergenos .swiper-slide {
    text-align: center;
    background: #fff;
    width: auto;
    max-width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px !important;
    padding: 0.3rem 0;
}

.swiper-button-prev {
    grid-column: 1 / 2;
    grid-row: 1;
    position: inherit !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.swiper-button-next {
    grid-column: 12;
    grid-row: 1;
    position: inherit !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px !important;
}

/* COLORES */

.backgroundSecundario {
    background-color: var(--colorSecundario);
    color: var(--colorTextoSecundario) !important;
}
.backgroundSecundario span,
.backgroundSecundario div,
.backgroundSecundario p {
    color: var(--colorTextoSecundario) !important;
}

.backgroundPositivo {
    background-color: var(--colorPositivo);
    color: var(--colorTextoPositivo) !important;
}
.backgroundPositivo span,
.backgroundPositivo div,
.backgroundPositivo p {
    color: var(--colorTextoPositivo) !important;
}

.backgroundNegativo {
    background-color: var(--colorNegativo);
    color: var(--colorTextoNegativo) !important;
}
.backgroundNegativo span,
.backgroundNegativo div,
.backgroundNegativo p {
    color: var(--colorTextoNegativo) !important;
}

.backgroundPrincipal {
    background-color: var(--colorPrincipal);
    color: var(--colorTextoPrincipal) !important;
}
.backgroundPrincipal span,
.backgroundPrincipal div,
.backgroundPrincipal p {
    color: var(--colorTextoPrincipal) !important;
}

.colorNegativo {
    color: var(--colorNegativo);
}

/* HEADINGS */

.h2 {
    font-family: "fuenteMedium";
    font-size: var(--font-size-5);
    color: var(--colorPrincipal);
    text-align: left;
    line-height: 35px;
}

.tituloDialog {
    font-family: "fuenteBold";
    font-size: var(--font-size-2);
    color: var(--colorPrincipal);
    line-height: 35px;
}

.h4 {
    font-family: "fuenteRegular";
    font-size: var(--font-size-4);
    line-height: 35px;
    text-align: left;
}

.h1 {
    font-size: var(--font-size-lg);
    text-transform: uppercase;
    font-family: "fuenteBlack";
    line-height: 35px;
}

.h5 {
    font-size: var(--font-size-2);
    font-family: "fuenteBlack";
    line-height: 35px;
}

/* BOTONES */

.boton {
    color: #fff;
    font-family: "fuenteMedium";
    text-align: center;
    border-radius: var(--borderRadiusBoton);
    padding: var(--m-05) var(--m-1);
    cursor: pointer;
    border: none;
    display: block;
    transition: all 0.3s ease 0s;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    box-sizing: border-box;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    outline: none;
}

.boton i {
    margin-right: 0.5rem;
}

.boton:hover {
    opacity: 0.75;
}

.botonPrincipal {
    background-color: var(--colorPrincipal);
    color: var(--colorTextoPrincipal) !important;
}
.botonPrincipalAndalucia {
    color: rgb(0, 131, 0) !important;
}

.botonPrincipalDeshabilitado {
    background-color: #cccccc;
    color: #666666 !important;
    cursor: not-allowed;
}

.botonPrincipalInvertido {
    background-color: var(--colorTextoPrincipal);
    color: var(--colorPrincipal) !important;
}

.botonPrincipal span,
.botonPrincipal div,
.botonPrincipal p {
    color: var(--colorTextoPrincipal) !important;
}

.botonEnlace {
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    font-family: "fuenteMedium";
    cursor: pointer;
    font-size: var(--font-size-1);
    user-select: none;
}

.botonNuevaDireccion {
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    font-family: "fuenteMedium";
    cursor: pointer;
    font-size: var(--font-size-1);
    color: var(--colorPrincipal) !important;
}

.divbotonNuevaDireccion {
    border-top: 1px solid var(--colorPrincipal);
    border-bottom: 1px solid var(--colorPrincipal);
    border-left: none;
    border-right: none;
    padding: 21px 5px;
}

.botonSecundario {
    background: var(--colorSecundario);
    color: var(--colorTextoSecundario) !important;
}

.botonSecundario span,
.botonSecundario div,
.botonSecundario p {
    color: var(--colorTextoSecundario) !important;
}

.botonPositivo {
    background-color: var(--colorPositivo);
    color: var(--colorTextoPrincipal) !important;
}

.botonPositivo span,
.botonPositivo div,
.botonPositivo p {
    color: var(--colorTextoPositivo) !important;
}

.botonGrande {
    margin-top: 9px;
    font-family: "fuenteMedium";
    text-align: center;
    border-radius: var(--borderRadiusBoton);
    padding: 0.7rem;
    cursor: pointer;
    border: none;
    display: block;
    transition: all 0.3s ease 0s;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.botonGrande:hover {
    opacity: 0.75;
}

.botonNegativo {
    background-color: var(--colorNegativo);
    color: var(--colorTextoNegativo) !important;
}

.botonNegativo span,
.botonNegativo div,
.botonNegativo p {
    color: var(--colorTextoNegativo) !important;
}

.botonHistorialDisabled,
.botonDisabled {
    user-select: none;
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

/* ELEMENTOS DE FORMULARIOS */

.inputGris {
    border: inherit;
    background-color: var(--grisClaritoMyWaiter);
    outline: none;
    padding: 0.8rem;
    box-sizing: border-box;
    width: 100%;
    border-radius: 8px;
    font-family: "fuenteRegular";
    height: 40px;
}

.inputGris:hover {
    border: none;
}

.form-control {
    width: 100%;
    height: 40px !important;
}

.labelMedium {
    font-family: "fuenteMedium";
    color: var(--blackColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.labelMedium svg {
    margin-right: 0.2rem;
}

/* Márgenes y paddings */

.m-0 {
    margin: 0 !important;
}

.mb-05 {
    margin-bottom: var(--m-05);
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-sm {
    margin-bottom: var(--m-sm);
}

.mr-05 {
    margin-right: var(--m-05);
}

.m-1 {
    margin: var(--m-1);
}

.mr-1 {
    margin-right: var(--m-1);
}

.ml-1 {
    margin-left: var(--m-1);
}
.mr-sm {
    margin-right: var(--m-sm);
}
.ml-sm {
    margin-left: var(--m-sm);
}
.ml-05 {
    margin-left: var(--m-05);
}
.mb-1 {
    margin-bottom: var(--m-1);
}
.mb-2 {
    margin-bottom: var(--m-lg);
}
.mt-1 {
    margin-top: var(--m-1);
}
.mt-2 {
    margin-top: var(--m-lg);
}
.mt-05 {
    margin-top: var(--m-05);
}

.mr-2 {
    margin-right: var(--m-lg);
}

.p-0 {
    padding: 0 !important;
}
.p-sm {
    padding: var(--m-sm);
}
.p-05 {
    padding: var(--m-05);
}

.p-1 {
    padding: var(--m-1);
}

.p-2 {
    padding: var(--m-lg);
}

/* Text align */

.text-align-left {
    text-align: left;
}
.text-align-right {
    text-align: right;
}
.text-align-center {
    text-align: center;
}

/* Mensajes de error/success */

.mensajeError,
.mensajeSuccess,
.mensajeWarning,
.mensajeWarningAviso {
    padding: var(--m-1);
    background-color: var(--colorNegativo);
    color: var(--colorTextoNegativo);
    border-radius: 8px;
    align-items: center;
    align-content: center;
    max-width: 800px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem;
}

.mensajeError p,
.mensajeSuccess p,
.mensajeWarning p,
.mensajeWarningAviso p {
    margin: 0 !important;
    font-family: "fuenteLight";
    font-size: var(--font-size-sm);
    grid-column: 2 / -1;
    text-align: left;
}

.mensajeError .iconoSvgMensaje,
.mensajeSuccess .iconoSvgMensaje,
.mensajeWarning .iconoSvgMensaje,
.mensajeWarningAviso .iconoSvgMensaje {
    grid-column: 1 / 2;
    justify-self: center;
}

.mensajeSuccess {
    background-color: var(--colorPositivo);
    color: var(--colorTextoPositivo);
}

.mensajeWarning {
    background-color: var(--colorSecundario);
    color: var(--colorTextoSecundario);
}

.mensajeWarningAviso {
    background-color: white;
    color: var(--colorTextoSecundario);
}

.editar {
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "fuenteRegular";
}

.misDirecciones,
.editarDireccion,
.editar {
    padding: var(--m-1) var(--m-1) 0 var(--m-1);
}

/* Barra de usuario */

.barraUsuario {
    width: 100%;
    height: var(--heightBarra);
    padding: var(--m-1);
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    display: flex;
    justify-content: stretch;
    align-items: center;
    background-color: var(--colorPrincipal);
    max-width: var(--MWMaxWidth);
}

.barraUsuario > .icono {
    flex: 1 1 auto;
    text-align: center;
    cursor: pointer;
}

.barraUsuario .icono img {
    width: 30px;
    height: auto;
}

.barraUsuario > .icono a,
.boton,
.botonGrande {
    text-decoration: none;
}

/* - NUEVO - */
@media only screen and (max-width: 480px) {
    #botonPedirQR {
        height: 6.5%;
        font-size: 21px;
    }
    #btPedirDialog {
        padding-top: 22px;
        padding-bottom: 22px;
        font-size: 20px;
    }
    #botonPrincipal {
        padding-top: 22px;
        padding-bottom: 22px;
        font-size: 20px;
    }
}

/* mensaje comprobar mesa abierta */
.mesaCerrada {
    border-radius: 15px;
    margin-top: 8px;
}

.danger {
    background-color: rgb(230, 141, 163);
    border: solid 1px rgb(189, 78, 106);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 9px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.danger p {
    color: rgb(189, 78, 106) !important;
}

/* cargarhome.php */

.portada {
    font-family: "fuenteRegular";
    background-position: center;
    background-size: cover;
    text-align: left;
    min-height: 200px;
    max-height: 270px;
    display: grid;
    padding: var(--m-md) var(--m-1);
    box-shadow: 5px 6px 15px -3px rgb(148 148 148 / 60%);
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: self-end;
    gap: 0.5rem;
}

.portadaAnimada {
    background-position: 0;
    animation: animatedBackground 7s linear infinite alternate;
    animation-delay: 0.5s;
    background-repeat: repeat-x !important;
}

.portada > .texto,
.portada > .texto p {
    color: #fff;
}

.portada > .texto.conBorde {
    text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
        1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.textoFondo {
    --r: calc(var(--redClarito) * 0.2126);
    --g: calc(var(--greenClarito) * 0.7152);
    --b: calc(var(--blueClarito) * 0.0722);
    --sum: calc(var(--r) + var(--g) + var(--b));
    --perceived-lightness: calc(var(--sum) / 255);
    --threshold: 0.5;
    color: hsl(
        0,
        0%,
        calc((var(--perceived-lightness) - var(--threshold)) * -10000000%)
    ) !important;
}

.portada > .texto > .nombreNegocio {
    font-size: var(--font-size-lg);
}

.direccion {
    color: var(--blackColor);
}

/* Promocion */
.promocion {
    height: 100%;
    width: 100%;
    border-radius: 8px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover !important;
    padding: var(--m-1) 0.6rem;
    display: flex;
    align-items: flex-end;
    margin-right: var(--m-1);
    box-shadow: 5px 6px 15px -3px rgba(148, 148, 148, 0.6);
    justify-content: center;
    cursor: pointer;
}

.detallesPromocion {
    background-color: var(--colorClarito);
    border-radius: 8px;
    padding: var(--m-1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.detallesPromocion img {
    width: 45px;
    height: 45px;
}

.boton-promocion {
    position: absolute;
    bottom: 50px;
    padding: 16px 14px;
    background-color: var(--colorPrincipal);
    color: white;
    border: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.boton-promocion:hover {
    background-color: var(--colorSecundario);
}

.imgPromoGrande {
    width: 100vh;
    height: 100vh;
    object-fit: contain;
    transition: opacity 1s ease;
    opacity: 1;
}

.flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36px;
    color: var(--colorPrincipal) !important;
    background-color: var(--colorClaritoTransparente50);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10000;
    user-select: none;
    transition: background-color 0.3s ease;
}

.flecha:hover {
    background-color: var(--colorClaritoTransparente);
}

.flecha-izquierda {
    left: 7px;
}

.flecha-derecha {
    right: 7px;
}
.botonCerrarPromo {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: var(--colorPrincipal);
    padding: 10px;
    border-radius: 50%;
    cursor: default;
    z-index: 10000;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
}

.spinner i {
    font-size: 36px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* - NUEVO - */
@media only screen and (min-width: 480px) {
    .flecha {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 6rem;
        color: var(--colorPrincipal) !important;
        background-color: var(--colorClaritoTransparente50);
        border-radius: 50%;
        width: 105px;
        height: 105px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 10000;
        user-select: none;
        transition: background-color 0.3s ease;
    }

    .flecha:hover {
        background-color: var(--colorClaritoTransparente);
    }

    .flecha-izquierda {
        left: 20px;
    }

    .flecha-derecha {
        right: 20px;
    }

    .botonCerrarPromo {
        position: absolute;
        top: 23px;
        right: 16px;
        font-size: 4rem;
        color: var(--colorPrincipal);
        padding: 10px;
        border-radius: 50%;
        cursor: default;
        z-index: 10000;
    }

    .boton-promocion {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        padding: 40px 40px;
        background-color: var(--colorPrincipal);
        color: white;
        border: 8px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 56px;
    }

    .boton-promocion:hover {
        background-color: var(--colorSecundario);
    }
}

#dialogPromo,
#dialogTutorial,
#dialogTerminosLocal,
#dialogPedidoMinimo,
#dialogPedidoAutoservicio,
#dialogConfirmarMesa {
    width: 90%;
    max-width: 500px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99999999;
    overflow-y: auto !important;

    height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
    height: fit-content !important;
    max-height: 95vh !important;
}

/* Asegura que el modal se muestre correctamente */
#dialogEnlace {
    width: 90%;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99999999;

    overflow-y: auto !important;
    height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
    height: fit-content !important;
    /* overflow-y: hidden !important; */
}

/* Spinner visible mientras se carga */
#spinnerDialogEnlace {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* El iframe debe ocupar todo el espacio disponible */
#dialogEnlace .contenedorIframe {
    overflow: auto;
    width: 100%;
    height: 80vh;
    /* max-width: 600px;
    height: 600px !important; */
    /* padding: 0 1rem 1rem; */
    overflow-y: hidden !important;
}

iframe {
    border: none;
}

/* Control de visibilidad del modal */
#dialogEnlace[open] {
    display: block;
}

/* Cerrar el modal */
.close {
    cursor: pointer;
}

#dialogPedidoMinimo {
    max-width: 350px;
}
#dialogConfirmarMesa {
    max-width: 320px;
}

#iconoDialogPedidoAutoservicio {
    height: 60px;
    width: 60px;
}
#dialogPedidoAutoservicio {
    max-width: 300px;
}

#dialogTerminosLocal {
    /* min-height: 65vh !important;
    max-height: 70vh !important; */
    max-width: 600px;
    height: 600px !important;
    padding: 0 1rem 1rem;
    overflow-y: hidden !important;
}

#dialogTerminosLocal .contenedorIframe {
    height: 95%;
}

p {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

#dialogTerminosLocal iframe {
    height: 95%;
}
#dialogEnlace iframe {
    height: 100%;
}

#dialogTerminosLocal .contenedorCerrar,
#dialogEnlace .contenedorCerrar {
    position: sticky;
    top: 0;
    left: 0;
    background-color: #fff;
    padding: 1rem 0;
    margin: 0 !important;
}

.contenedorNombreGrupo span {
    color: #fff;
}

.termsCondiciones div {
    cursor: pointer;
}

#dialogTutorial {
    max-width: 300px;
    margin-top: 150px;
}

#imgPromo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 550px;
}

.promo {
    justify-content: center;
    display: flex;
    align-items: center;
}

/* Contenedor botones Home */

.botones {
    display: grid;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 750px) {
    .botones {
        display: block;
    }

    .botonPrincipalInvertido {
        background-color: var(--colorTextoPrincipal);
        color: var(--colorPrincipal) !important;
        margin-top: 16px;
    }
}

/* cargarcuenta.php */

.cuenta {
    background-color: #fafbfc;
}

.botonesCuenta {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

.cuentaTabla {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.cuentaTabla tr.encabezado {
    font-family: "fuenteRegular";
    font-size: var(--font-size-sm);
}

.cuentaTabla tr.encabezado th {
    color: var(--colorTextoPrincipal) !important;
}

.cuentaTabla > thead,
.lineaCuentaTotal {
    color: #fff;
    padding: var(--m-05);
}

.cuentaTabla td {
    padding: var(--m-05);
    font-family: "fuenteBold";
    vertical-align: super;
}

.cuentaTabla th {
    padding: var(--m-05);
}

.cuentaTabla tbody {
    padding: var(--m-05);
}

td.celdaPrecio {
    font-family: "fuenteRegular";
}

span.celdaNombre {
    text-transform: uppercase;
}

tr.lineaCuentaTotal {
    width: 100%;
    color: #fff;
}

tr.lineaCuentaTotal td {
    color: var(--colorTextoPrincipal) !important;
}

.composicion {
    font-family: "fuenteLight";
    color: #6c6d66;
}

tr.lineaTotalDivisa {
    width: 100%;
}

tr.lineaTotalDivisa td,
tr.lineaTotalXComensal td {
    padding: var(--m-05);
    font-family: "fuenteMedium";

    background-color: #fff;
}

#slDivisa,
#tbComensal {
    color: #0a1034;
    font-family: "fuenteMedium";
    outline: none;
    background-color: var(--grisClaritoMyWaiter);
    border: none;
    border-radius: 6px;
    padding: 0.2rem 0.4rem;
    box-sizing: border-box;
}

tr.lineaCuenta td {
    background-color: #fff;
}

.tablaTotal {
    box-sizing: border-box;
    width: 100%;
    border-collapse: collapse;
    font-family: "fuenteBlack";
    font-size: var(--font-size-3);
}

.tablaTotal td {
    padding: var(--m-1);
}

.thPrecio,
.thImporte,
.celdaPrecio,
.celdaImporte,
#totalComensal,
.tdNumComensales,
.verMas,
td.precioTotal,
#tbComensal {
    text-align: right;
}

/* idioma.php*/

#idiomasContenedor {
    background-color: #f2f5f6;
}

.idioma {
    padding: var(--m-lg) var(--m-lg) var(--m-1);
    font-family: "fuenteLight";
}

.idioma ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.idiomaLi {
    background-color: #ffffff35;
    /* max-width: 400px; */
    /*ojo*/
    max-width: var(--MWMaxWidthComponent);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    box-sizing: border-box;
    transition: linear;
    align-items: center;
    text-align: left;
    font-size: var(--font-size-1);
}

.idiomasLista .idiomaLi {
    justify-content: center;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease 0s;
}

.idiomasLista .idiomaLi:hover {
    background-color: #ffffffb3;
}

.idiomaLi img {
    width: auto;
    grid-column: 1 / 3;
    min-width: 35px;
    height: auto;
    max-width: var(--imgIdioma);
}

.iconoSvgAutoservicio {
    height: 32px !important;
    width: 32px !important;
}

/* valorarexperiencia */

.textoExperiencia {
    font-family: "fuenteBold";
    font-size: var(--font-size-2);
}

/* cargarhome.php */

/* Redes sociales */
.modalRedSocial {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.404); /* Fondo semitransparente */
    z-index: 1000; /* Por encima de otros elementos */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modalRedSocial.modal-show {
    visibility: visible;
    opacity: 1;
}

.modal-content-redSocial {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1010;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    background: rgb(154 153 153 / 22%);
    z-index: 1000;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #000;
}

body.modal-open {
    overflow: hidden;
}

.qr-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    text-align: center;
    padding: 15px;
}

#qrCode {
    margin-bottom: 16px;
}

#qrText {
    font-size: 1.2rem;
    color: #333; /* Cambia el color según tu diseño */
}

/* ------------ */

.redesSociales {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra los íconos horizontalmente */
    gap: 12px; /* Espacio entre los íconos */
    padding: 13px 23px 13px 22px;
    background-color: var(--colorClarito);
    border-radius: 8px;
}

.redSocial {
    width: 24px !important; /* Ajusta el tamaño del icono */
    height: 24px !important;
    display: block;
    margin: auto; /* Centra el SVG dentro de su contenedor */
}

.redSocial svg {
    /* width: 100%;
    height: 100%; */
}

.redesSociales a {
    color: #0a1034;
    display: flex; /* Garantiza alineación vertical y horizontal */
    justify-content: center;
    align-items: center;
    width: 40px; /* Contenedor cuadrado */
    height: 40px;
    border-radius: 50%; /* Hace el contenedor circular */
    align-content: center;
    transition: background-color 0.3s ease; /* Suaviza el efecto hover */
    text-decoration: none;
}

.informacion {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#verMasInfo {
    width: 25%;
}
#verMasInfo:hover {
    cursor: pointer;
}

#telefonoHome {
    width: 75%;
}

.info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--blackColor);
    font-family: "fuenteRegular";
    padding: 0.5rem;
}

.infoTelefono {
    width: 75%;
}

.info svg {
    margin-right: 0.5rem;
}

#masInformacionLocal {
    border-radius: 8px;
    font-family: "fuenteRegular";
    max-width: var(--MWMaxWidth);
}

#ocultarInfo {
    cursor: pointer;
}

#terminosCondiciones .termsCondiciones div {
    display: inline;
    color: var(--colorPrincipal);
}

/* cargarmensajes.php */

.box {
    border-color: var(--grisClaritoMyWaiter);
    background-color: var(--grisClaritoMyWaiter);
    color: var(--blackColor) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--m-05);
    font-family: "fuenteRegular";
    border-radius: 10px;
    gap: 0.5rem;
}

.mensaje::after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    top: 100%;
    left: 10px;
    margin-top: -2px;
    border: 10px solid;
    border-color: transparent;
    border-top-color: inherit;
    left: 100%;
    margin-left: -30px;
    cursor: pointer;
}

.imgMensaje {
    width: 35px;
    height: 35px;
}

/* cargardirecciones.php */

.listaDirecciones {
    padding: 0 !important;
    text-align: left;
    list-style-type: none;
}

.listaDirecciones > li {
    border-bottom: 1px solid var(--grisClaritoMyWaiter);
    transition: all 0.3s ease 0s;
}

.liDireccion {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem;
}

.contenidoDireccion {
    grid-column: 1 / 12;
}

.accionDireccion {
    grid-column: 12 / -1;
    justify-self: end;
}

/* cargarcarrito.php */

.carritoCompra {
    overflow-y: auto;
}

.articulo {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    background-color: #fff;
    gap: 0.5rem;
}

.articulo hr {
    grid-column: 1 / -1 !important;
}

.imagenArticulo {
    /* grid-column: 1 / 4;
    display: flex;
    align-items: flex-start;
    justify-content: center; */
    width: var(--imgCardArtsW); /* Ancho del contenedor */
    height: var(--imgCardArtsH); /* Alto del contenedor */
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.imagenArticulo img {
    /* max-width: 115px;
    max-height: 115px; */
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    /* position: relative; */
}

.infoArticulo {
    grid-column: 4 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.composicionCarritoPrincipal {
    color: var(--colorPrincipal);
    text-transform: uppercase;
}

.composicionCarritoSecundario {
    color: var(--colorSecundario);
    text-transform: uppercase;
}

.composicionHijoCarrito {
    font-style: italic;
    margin-left: 10px;
}

.botonArticulo {
    border: none;
    cursor: pointer;
    outline: none;
    background: none;
}

.botonArticuloCant {
    border: none;
    cursor: pointer;
    outline: none;
    background: none;
    text-align: center;
}

#contadorCant {
    width: 100%;
    height: 50px;
    font-size: 18px;
    pointer-events: none;
}

#menosCant {
    width: 100%;
    height: 50px;
}

#masCant {
    width: 100%;
    height: 50px;
}

.cantidadCant {
    height: 50px;
    margin: 0 1rem var(--m-05);
    width: -webkit-fill-available;
}

.cantidad {
    background-color: var(--grisClaritoMyWaiter);
}

.horasDiaProximo,
.horasDiaActual,
.cantidadPack,
.cantidad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.horasDiaProximo,
.horasDiaActual,
.cantidad {
    gap: 1rem;
}

.cantidadPack,
.cantidad {
    align-items: center;
    justify-content: center;
    justify-items: center;
    align-content: center;
}
.cantidadPack {
    background-color: var(--grisClaritoMyWaiter);
    border-radius: 8px;
    padding: 5px;
}

.cantidadPack input {
    width: 20px;
    border: none;
    outline: none;
    text-align: center;
    background-color: var(--grisClaritoMyWaiter);
    color: var(--blackColor);
}
.precioCantidad {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
}

.articulos {
    background-color: #fff;
}

.total {
    font-size: var(--font-size-3);
    user-select: none;
}

.observacion {
    font-family: "Roboto Thin";
    outline: none;
    border: inherit;
    border-bottom: 1px solid var(--grisClaritoMyWaiter);
}

#entregaGratis,
#pedidoMinimo {
    background-color: var(--colorSecundario);
    color: var(--colorTextoSecundario);
    padding: 0.8rem;
    font-family: "fuenteRegular";
    text-align: center;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

#entregaGratis svg,
#pedidoMinimo svg {
    grid-column: 1 / 2;
    height: 25px;
    width: 25px;
    margin-right: var(--m-1);
}

#entregaGratis #contenidoEntregaGratis,
#localesDisponibles #contenidoLocalesDisponibles,
.mensajeAvisoHora .contenido,
#pedidoMinimo #contenidoPedidoMinimo {
    grid-column: 2 / -1;
}

#gastosEnvio,
#horaEntrega,
#detallesGastosEnvio,
#detallesHoraEntrega {
    display: flex;
    align-items: center;
    padding: 0.8rem;
    border-left: 6px solid transparent;
}

#horaEntrega,
#detallesHoraEntrega {
    flex-direction: column;
    align-items: flex-start;
}

#horaEntrega div:first-child,
#detallesHoraEntrega div:first-child {
    display: flex;
}

.mensajeAviso {
    padding: 0.8rem;
    display: flex;
    align-items: center;
}

.iconoMensajeAviso {
    max-width: 45px;
    min-width: 25px;
}
.tarjetaClientePanelUsuario {
    display: flex;
    align-items: flex-start;
    border: 2px solid var(--grisClaritoMyWaiter);
    justify-content: space-between;
    flex-direction: column;
    letter-spacing: 0.5px;
}

.contenedorBotonTarjeta {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    justify-content: flex-end;
    align-items: center;
}

.tarjetaClientePanelUsuario .datosTarjeta {
    display: flex;
    align-items: center;
    padding: 0 var(--m-1);
    box-sizing: border-box;
}

.tarjetaClientePanelUsuario .datosTarjeta p {
    font-size: var(--font-size-sm) !important;
}

#elegirHoraEntrega {
    max-width: 300px;
    margin-left: 34px;
    margin-top: 0.5rem;
}
.borderLeftSecundario {
    border-left: 6px solid var(--colorSecundario);
}
.borderLeftNegativo {
    border-left: 6px solid var(--colorNegativo);
}
.borderLeftPrincipal {
    border-left: 6px solid var(--colorPrincipal);
}
.borderLeftPositivo {
    border-left: 6px solid var(--colorPositivo);
}

.mensajeCerrado,
.mensajeDireccionCentral {
    background-color: var(--colorClarito);
}

.mensajeDireccionCentral {
    display: flex;
    justify-content: space-between;
    margin: 0 var(--m-1) var(--m-1);
}

.mensajeDireccionCentral div:first-child {
    display: flex;
    align-items: center;
}

#dialogCambiarDireccion {
    min-width: 300px !important;
    max-width: 400px !important;
    border-radius: 10px;
    width: 90%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99 !important;
    height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
    height: fit-content !important;
}

/* Instrucciones para el pedido*/

#instPedido {
    background-color: #f1faff;
    color: var(--blackColor);
    text-align: center;
    position: fixed;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 999;
}

/* FICHA DEL ARTICULO */

.tarjetaArticulo {
    width: 100%;
    padding: var(--m-sm) var(--m-1);
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    column-gap: 1rem;
    row-gap: 0.5rem;
    box-sizing: border-box;
    align-items: center;
    cursor: pointer;
}

.tarjetaArticulo .informacionArticulo {
    grid-column: 1 / 10;
    justify-content: center;
    align-self: center;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--gapDescTarjeta);
}

.tarjetaArticulo .imagenArticulo {
    grid-column: 10 / -1;
    justify-self: end;
    align-self: flex-start;
}

.tarjetaArticulo .imagenArticuloCarta img {
    height: auto;
    min-width: 80px;
    max-width: 120px;
    min-height: 80px;
    max-height: 130px;
}

.precioArticulo {
    margin-bottom: 5px;
    grid-column: -1;
}

.precioArticulo {
    font-family: "fuenteBold";
    color: var(--colorPrincipal);
}

.pieArticuloFicha .precioArticulo {
    min-width: 52%;
}

.descripcionArticulo,
.composicion {
    color: #6c6d66;
}

.tarjetaArticulo hr {
    grid-row: 3;
    grid-column: 1 / -1;
}

/* .tarjetaArticulo .articuloNoDisponible{
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
} */

.tarjetaArticuloLista {
    text-align: left;
    padding: var(--m-05) var(--m-1);
    border-radius: 8px;
    margin: 0 !important;
}

.tarjetaArticuloLista .imagenArticulo {
    display: none;
}

.tarjetaArticuloLista hr {
    display: none;
}

#cargarAlergenos i {
    margin-left: 10px;
}

.nombreOpcionFicha {
    font-family: "Roboto Thin Italic";
}

/* Finalizar pedido */

.finalizarPedido {
    font-family: "fuenteBold";
    font-size: var(--font-size-3);
    color: var(--colorTextoSecundario);
    cursor: pointer;
    max-width: 800px !important;
    z-index: 99;
    user-select: none;
}

/* Total pedido */

.totalPedido {
    height: var(--heightBarra);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: var(--posicionFinalizarPedidoNormal);
    z-index: 9999;
    max-width: var(--MWMaxWidth);
}

#btTotalArts,
.botoncitoRedondo {
    color: #fff;
}

.totalPedido .total {
    color: var(--colorTextoSecundario);
}
#btTotalArts,
.botoncitoRedondo {
    border: none;
    outline: none;
    background-color: var(--colorNegativo);
    color: var(--colorTextoNegativo) !important;
}

/* panelusuario.php */

.panelUsuario {
    color: var(--blackColor) !important;

    border-bottom: 1px solid var(--grisClaritoMyWaiter);
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* historialpedidos.php */

.tablaPedidos {
    border-collapse: collapse;
}

.tablaPedidos > thead {
    background-color: var(--grisClaritoMyWaiter);
    color: var(--blackColor);
}

.tablaPedidos thead th {
    padding: 0.8rem;
}

.tablaPedidos td {
    padding: 0.8rem;
}

.tablaPedidos tr {
    border-bottom: 1px solid var(--grisClaritoMyWaiter);
}

#dialogTicket {
    border-radius: 8px !important;
    width: 90%;
    max-width: 350px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99999999;
    overflow-y: auto !important;
    height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
    height: fit-content !important;
    max-height: 90vh !important;
    padding: 0 var(--m-1) 0rem var(--m-1);
}

/* infoalergenos.php */

.alergenosDiv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    grid-template-rows: auto;
    gap: 1.5rem;
}

.alergeno {
    padding: var(--m-05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    min-height: 80px;
    box-shadow: 5px 6px 15px -3px rgb(123 123 123 / 26%);
    font-family: "fuenteMedium";
    border-radius: 10px;
    background: var(--grisClaritoMyWaiter);
}

.alergeno img {
    max-width: 30px;
    height: auto;
}

/* FICHA ARTICULO */
.divContieneAlergeno {
    position: absolute;
    top: 10px;
}

.divPackNoDisponible {
    position: absolute;
    top: -13px;
}

.divArticuloNoDisponible {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.divArticuloNoDisponibleImg {
    position: absolute;
    left: 50%;
    top: 27%;
    transform: translate(-50%, -50%);
}

.articuloNoDisponiblePack {
    background-color: var(--colorNegativo);
    color: var(--colorTextoNegativo);
    font-family: "fuenteLight";
    padding: 0.3rem;
    border-radius: 25px;
    font-size: 9px;
    font-weight: bold;
    max-width: 100%;
    min-width: 85px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 7px;
}

.datosFichaArticulo {
    padding: 0rem var(--m-1) 0rem var(--m-1);
    font-size: var(--font-size-sm);
}
.composicionArticulo,
#composicionArticulo {
    box-sizing: border-box;
    padding: 0 var(--m-1) var(--m-1) var(--m-1) !important;
}

#composicionArticulo {
    display: none;
}

.opcionCarta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
/* .imagenFicha {
    width: 100%;
    height: auto;
    max-height: var(--imagenFicha);
    object-fit: cover;
    border-radius: 8px 8px 0 0;
} */

#dialogFinPedido {
    border-radius: 10px;
    width: 100%;
    max-width: var(--dialogFinPedido);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99999999;
    height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
    height: fit-content !important;
    padding: 0;
}

#dialogFinPedido .datosFichaFP {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
}

#dialogFinPedido .tituloFicha {
    font-size: var(--font-size-2);
}

#dialogFinPedido .infoFicha {
    grid-column: 12 / -11;
}

#dialogFinPedido #cerrarFicha {
    align-self: start;
}
/* Dialog Articulo */

#dialogArticulo,
#dialogArticuloPack {
    border-radius: 10px !important;
    width: 90%;
    max-width: var(--dialogArticulos);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 9;
    height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
    height: fit-content !important;
    padding: 0;
}

.articuloFichaBase {
    position: relative;
}

#dialogArticuloPack {
    z-index: 99999999 !important;
    max-width: 270px !important;
    /* overflow: hidden; */
}

#dialogAlergenos {
    border-radius: 10px;
    width: 90%;
    max-width: 500px !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99999999;
    height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
    height: fit-content !important;
    overflow-y: auto !important;
}

#dialogArticulo .tituloFicha,
.contenedorPrecioNombre .nombreAPack {
    font-size: var(--font-size-2);
    grid-column: 1 / 3;
}

#dialogArticulo .precioFicha,
.contenedorPrecioNombre .precioAPack {
    font-size: var(--font-size-2);
    grid-column: -1;
    justify-self: end;
}

#dialogArticulo .datosFichaArticulo,
.contenedorInfoAPack {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

#dialogArticulo .datosFichaArticulo .infoFicha,
.contenedorInfoAPack .alergenosAPack,
.contenedorInfoAPack .ingredientesAPack,
.contenedorInfoAPack .descripcionAPack {
    /* grid-column: 1 / 10; */
    grid-column: 1 / -1;
}

.alergenosFicha,
.ingredientesFicha,
.descripcionFicha,
.alergenosFicha p {
    font-size: var(--font-size-1) !important;
}

.portadaAPack img {
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.contenedorInfoAPack {
    padding: 0 1rem;
    row-gap: 0.5rem;
}

#dialogArticulo .botones {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 99999;
    background-color: #fff;
    padding: 0 1rem 1rem !important;
}

.pieCarrito {
    position: fixed;
    bottom: var(--posicionFinalizarPedidoNormal);
    background: var(--colorClarito);
    box-sizing: border-box;
    /* height: 140px; */
    max-width: var(--MWMaxWidth);
    z-index: 99;
}

/* cargarhorario.php */

.dia {
    display: grid;
    grid-template-columns: 120px 1fr;
}

.tituloHorarioHome {
    border-bottom: 1px solid var(--grisClaritoMyWaiter);
    margin-bottom: 5px;
}

.hora {
    min-width: 80px;
    font-size: var(--font-size-sm);
}

.horarioGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-content: start;
    box-sizing: border-box;
    gap: 1rem;
}

/* Filtros */

.filtrosPedido {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 9999;
    /* padding: 0 16px 0px; */
    padding: 4px 18px 8px 18px;
    transition: all 0.35s ease-in;
    border-radius: 12px;
}

.portadaBordesRedondeados {
    border-radius: 0 0 20px 20px !important;
}

#buscadorAgrupacion {
    border: none;
    color: var(--colorSecundario);
    outline: none !important;
    font-family: "fuenteRegular";
    font-size: 16px;
}

input#buscadorAgrupacion::placeholder {
    color: var(--colorSecundario) !important;
    font-family: "fuenteRegular";
    opacity: 1;
}

input#buscadorAgrupacion:-ms-input-placeholder {
    color: var(--colorSecundario) !important;
    font-family: "fuenteRegular";
}

input#buscadorAgrupacion::-ms-input-placeholder {
    color: var(--colorSecundario) !important;
    font-family: "fuenteRegular";
}

.contenedor {
    display: grid;
    grid-template-columns: auto repeat(10, 1fr) auto;
    align-items: center;
    grid-column: 1 / -1;
}

#alergenosFiltro {
    grid-column: 1 / -2 !important;
}

/* Filtro Grupos Familias */

#filtro {
    grid-column: 2 / 12;
    grid-row: 1;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.slide-seleccionado {
    font-family: "fuenteBold";
}

.subfamiliaFiltro {
    font-size: var(--font-size-sm) !important;
}

.subfamiliaFiltro.slide-seleccionado,
.familiaFiltro.slide-seleccionado {
    font-family: "fuenteMedium" !important;
}

/* Filtro Alergenos */

#filtroAlergenos {
    grid-column: 2 / 12;
    grid-row: 1;
}

#alergenoFilter {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: 0.5rem;
    height: 50px;
    box-sizing: border-box;
}

#alergenoFilter #alergenosFiltro {
    grid-column: 1 / 12;
}

#alergenoFilter a {
    grid-column: 12 /13;
}

#alergenosFiltro #button-prev-alergenos {
    grid-column: 1 / 2;
}

#alergenosFiltro #button-next-alergenos {
    grid-column: 12 / 13;
}

.opcionesFiltro {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: 0.8rem;
    margin-bottom: 8px;
}

.mensajePedidoLimitado {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: 0.5rem;
    border-radius: 25px;
    justify-content: left;
    align-items: center;
    margin-top: 8px;
    padding: 6px;
    font-size: 11px;
    margin-top: 0px;

    border: 1.5px solid var(--colorNegativo);
    color: var(--colorPrincipalTexto) !important;
}

.opcionFiltroAlergenos {
    /* padding: var(--m-05) var(--m-1);
    border-radius: 15px;
    background-color: var(--colorClarito);
    display: inline-block;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    color: var(--colorTextoClarito); */

    padding: 6px;
    border: 1px solid var(--blackColor);
    box-sizing: border-box;
    border-radius: 25px;
    color: var(--blackColor);
    text-transform: capitalize;
    font-size: 12px;
}

#botonBorrarFiltros {
    display: flex;
    border-radius: 25px;
    justify-content: center;
    align-items: center;
    padding: 6px;
    text-transform: capitalize;
    font-size: 12px;
}

.opcionFiltroAlergenos svg.iconoSm {
    height: 10px;
    width: 10px;
}

.alergenoFiltro img {
    width: 30px;
}

#logotipo {
    display: grid;
    justify-content: center;
    grid-column: 1;
    justify-self: start;
}

#logotipo img {
    max-width: 260px;
    max-height: 62px;
    height: auto;
    width: auto;
}

.d-block {
    display: block;
}

.hidden {
    visibility: hidden;
}

.txt-uppercase {
    text-transform: uppercase !important;
}
#contenedorFiltro {
    display: grid;
    grid-template-columns: 9fr 35px 35px 35px;
    height: 70px;
    align-items: center;
    column-gap: 1rem;
    grid-template-rows: 1fr;
    box-sizing: border-box;
}

#contenedorMesas {
    display: grid;
    grid-template-columns: 9fr 9fr;
    height: 70px;
    align-items: center;
    column-gap: 1rem;
    grid-template-rows: 1fr;
    box-sizing: border-box;
}

#filtroFavoritos {
    text-transform: uppercase;
}

#filtroFavoritos.swiper-seleccionado,
#filtroFavoritos {
    color: var(--colorSecundario) !important;
}

#iconoFiltroAlergenos {
    align-self: center;
    grid-column: 3 / -1;
    justify-self: end;
    cursor: pointer;
}

#iconoFiltroAlergenos img {
    width: 30px;
    height: auto;
}

#contenedorTarjetaElegida {
    display: flex;
    gap: 1rem;
    align-items: center;
}

#tbComensal {
    width: 25px;
}

/* .nombreElementoOpcion {
    font-size: var(--font-size-3);
    text-transform: uppercase;
} */

.inputRadio {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
    background: var(--grisClaritoMyWaiter);
    border: none;
    height: var(--MWcheckbox);
    width: var(--MWcheckbox);
    transition: all 0.15s ease-out 0s;
    color: #fff !important;
    margin-right: 0.5rem;
    outline: 2px solid var(--colorPrincipal);
}
.inputRadio:hover {
    background: #e1dfe1;
}

.inputRadio:checked::before {
    content: " \2713";
    height: var(--MWcheckboxH);
    width: var(--MWcheckbox);
    position: relative;
    display: inline-block;
    font-size: var(--font-size-sm);
    text-align: center;
    background: var(--colorPrincipal);
    color: var(--colorPrincipalTexto);
    top: -2px;
}
.inputRadio:checked::after {
    content: "";
    display: block;
    position: relative;
}

.svgIcon {
    height: 30px;
    width: 25px;
}

.svgIconTablet {
    height: 35px;
    width: 30px;
}

#svgFiltro.destacado {
    border: 2px solid var(--colorPositivo);
    border-radius: 8px;
}

#svgOpcion.destacado {
    border: 2px solid var(--colorPositivo);
    border-radius: 8px;
}

#mensajeDireccion {
    background-color: var(--colorNegativo);
    color: #fff;
}

#iconoFPok {
    color: var(--colorPositivo);
}
#iconoFPerror {
    color: var(--colorNegativo);
}
#iconoFPwarning {
    color: var(--colorSecundario);
}

#iconoFPwarning,
#iconoFPerror,
#iconoFPok {
    height: 35px;
    width: 35px;
}

.contenedorRadio {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    align-content: center;
    white-space: nowrap;
    margin-bottom: var(--m-1);
    align-items: center;
    gap: 0.5rem;
}

.contenedorRadio input {
    margin: 0;
    align-self: center;
}
.contenedorRadio label {
    display: block;
    align-self: center;
}
.contenedorRadio .labelDireccion {
    font-size: var(--font-size-2);
}

.datosDireccion {
    grid-row: 2;
    grid-column: 2;
}

.iconoSvg {
    min-width: 20px;
    max-width: 20px;
    height: 20px;
}

.iconoSvgBig {
    position: absolute;
    top: 0;
    left: 15%;
    right: 0;
    width: 70%;
    height: 100%;
    z-index: 1;
}

.productoNoDisponible {
    position: relative;
    z-index: 0;
    width: 100%;
    height: auto;
    filter: opacity(0.7) grayscale(90%);
}

.svgSinResultados {
    height: 50px;
    width: auto;
}

.iconoSvgMensaje {
    width: 20px;
    height: 20px;
}
.svgBoton {
    width: 20px;
    height: 20px;
}
.svgRedondo {
    background: var(--colorTextoPrincipal);
    border-radius: 50%;
    padding: var(--m-05);
    margin-right: 0.5rem;
}

.svgRedondoSecundario {
    background-color: var(--colorSecundario);
    border-radius: 50%;
    padding: var(--m-05);
    margin-right: 0.5rem;
    height: 35px;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.svgRedondoNegativo {
    background-color: var(--colorNegativo);
    border-radius: 50%;
    padding: var(--m-05);
    margin-right: 0.5rem;
    height: 35px;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.svgSmall {
    width: 14px;
    height: 14px;
}

.svgSmallDireccion {
    width: 16px;
    height: 16px;
    margin-right: 15px;
}

.svgBig {
    width: 20px;
    height: 20px;
}

.familiaTitulo {
    padding: 0.1rem;
    border-radius: 8px;
    background-color: var(--colorClarito);
    color: var(--colorTextoClarito);
    font-size: var(--font-size-4);
    line-height: 35px;
}

.mdl-dialog__actions {
    padding: var(--m-1);
}

.dialog_lista {
    width: 80%;
    max-width: 600px;
    max-height: 91vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: none;
}

/* Para asegurar que el diálogo sea responsivo */
@media (max-width: 480px) {
    .mdl-dialog_lista {
        width: 95%; /* Ancho para pantallas pequeñas */
    }
}

.elemProgreso {
    opacity: 0.6;
}
.elemProgreso {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    font-size: var(--font-size-1);
}

.elemProgreso .iconoSvg {
    margin-right: var(--m-1);
}

.elemProgreso-activo {
    font-family: "fuenteBold";
    opacity: 1;
    text-transform: uppercase;
    font-size: var(--font-size-1);
}

.formaPagoTitulo {
    display: flex;
    align-items: center;
}

.progresoCarrito {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.datosDireccion,
.labelDireccion {
    text-align: left !important;
}
.accionesCarrito,
#botoneraRepartoCentral {
    position: fixed;
    width: 100%;
    bottom: 50px;
    box-sizing: border-box;
    background: var(--colorClarito);
    max-width: 800px;
    padding: 1.5rem var(--m-1) var(--m-1) var(--m-1);
}

.accionesCarrito {
    bottom: var(--posicionFinalizarPedidoNormal);
    max-width: var(--MWMaxWidth);
}

.contenedorForm {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    column-gap: 1rem;
}

.contenedorForm .fechaCaducidad,
.contenedorForm .errFechaCaducidad {
    grid-column: 1 / 6;
}

.contenedorForm .codigoSeguridad,
.contenedorForm .errCodigoSeguridad {
    grid-column: 6 / 11;
}

.contenedorForm .imgCodSeguridad {
    height: 35px;
    grid-column: 11 / 13;
    align-self: center;
    margin-top: 20px;
}

#contenidoDialogVerificarCorreo,
#contenidoDialogDescuento,
#contenidoDialogCambiarPass {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#contenidoDialogVerificarCorreo svg {
    min-height: 180px;
}

#contenidoDialogDescuento svg {
    max-width: 100px;
    height: 100px;
}

.totalComensal,
.tablaDivisas {
    border-collapse: collapse;
}

.sinDatos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#esperaPedido,
#esperaEnvio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info div {
    color: var(--blackColor);
}

.iconoSelectInfo {
    width: 20px;
    height: 20px;
}

.iconoSelect {
    width: 24px;
    height: 24px;
    /* padding: 4px; */
}

.formControlPassword {
    display: flex;
    align-items: center;
    justify-items: center;
    border: inherit;
    background-color: var(--grisClaritoMyWaiter);
    outline: none;
    padding: 0.8rem;
    box-sizing: border-box;
    width: 100%;
    border-radius: 8px;
    font-family: "fuenteRegular";
}

.formControlPassword input {
    border: 0;
    background-color: var(--grisClaritoMyWaiter);
    outline: none;
    width: 100%;
    height: 14px;
}
.formControlPassword svg {
    height: 14px;
}

.nombreDireccion {
    font-size: var(--font-size-2);
}

.iconoSvgBarra {
    width: var(--iconoSvgBarra);
    height: var(--iconoSvgBarra);
}

.cambiarIdioma {
    cursor: pointer;
}

.svgIdioma {
    width: 18px;
    height: 18px;
}

.botonesHistorialPedidos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

#tituloDialog,
#fechaPedido {
    font-size: var(--font-size-2);
}

.alergenosFicha {
    font-size: var(--font-size-2);
}

#buscadorArticulos {
    border: none;
    outline: none;
    grid-column: 2 / -1;
}
#buscador {
    grid-column: 1 / 2;
    justify-self: start;
}

.noMostrarBuscador {
    display: none !important;
}

#buscar svg,
#buscadorPopUp svg {
    width: 30px;
    height: 25px;
}

.acciones {
    position: fixed;
    box-sizing: border-box;
    bottom: 50px;
    background: var(--colorClarito);
    max-width: 800px;
    z-index: 99;
    height: 100px;
    padding-top: 1.5rem;
}

#dialogEliminar,
#dialogEliminarTarjeta,
#dialogDireccionNoEncontrada {
    border-left: 10px solid var(--colorNegativo);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    font-family: "fuenteMedium";
}

#dialogPedidoMinimo .contenedorIcono svg {
    height: 50px;
}

#contenidoDialogEliminar,
#contenidoDialogEliminarTarjeta {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    padding: 0rem;
    gap: 1rem;
    grid-template-rows: 2fr 3fr;
}

#contenidoDialogEliminar .iconoDialog,
#contenidoDialogEliminarTarjeta .iconoDialog {
    grid-column: 1 / -1;
    align-self: center;
    grid-row: 1;
    justify-self: center;
}

#dialogDireccionNoEncontrada .iconoDialog {
    display: flex;
    justify-content: center;
}

#dialogDireccionNoEncontrada .iconoDialog svg {
    width: 50px;
    height: 50px;
}

#contenidoDialogEliminar .iconoDialog svg,
#dialogRepetirPedido .iconoDialog svg,
#contenidoDialogEliminarTarjeta .iconoDialog svg {
    height: 50px;
    /* width: 35px; */
}
#contenidoDialogEliminar .accionesDialog,
#contenidoDialogEliminarTarjeta .accionesDialog {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: stretch;
}

#contenidoDialogEliminar .botonesDialog,
#contenidoDialogEliminarTarjeta .botonesDialog {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

button.verMasInfo {
    border: 2px solid var(--colorPrincipal) !important;
    padding: var(--m-05);
    background: #80808014;
    grid-column: 1 / 9;
    margin-bottom: var(--m-1);
    border-radius: 8px;
}

.noMostrarAlergeno {
    display: none !important;
}

.noMostrar {
    display: none !important;
}

.avisoLegal {
    font-family: "fuenteMedium" !important;
}

.botonCookies {
    background-color: #003c71;
    color: #fff;
    width: 100%;
}
.enlaceCookies {
    font-family: "fuenteMedium";
    color: #003c71;

    display: block;
    text-align: center;
}

#dialogRegistro,
#dialogRegistro,
#dialogVerificarCorreo,
#dialogDescuento,
#dialogQr,
#dialogCambiarTipoPedido,
#dialogCambiarLocal,
#dialogCambiarPass,
#dialogTerminosUso,
#dialogAvisoGastosEntrega {
    border-radius: 10px;
    width: 90%;
    max-width: 300px !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99999999;
    height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
    height: fit-content !important;
}

.infoStock {
    grid-column: 1 / -1;
    color: var(--colorNegativo);
    display: flex;
    align-items: center;
}

#dialogArticulosSinStock {
    border-left: 10px solid var(--colorNegativo);
}

#dialogCambiarTipoPedido,
#dialogCambiarLocal {
    border-left: 10px solid var(--colorSecundario);
    position: fixed;
}

#dialogArticulosSinStock .iconoDialog,
#dialogCambiarTipoPedido .iconoDialog,
#dialogCambiarLocal .iconoDialog {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 2;
    grid-column: 1 / -1;
}
#dialogArticulosSinStock .iconoDialog svg,
#dialogCambiarTipoPedido .iconoDialog svg,
#dialogCambiarLocal .iconoDialog svg {
    height: 50px;
    width: 50px;
}

#contenidoDialogArticulosSinStock {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem;
}
#contenidoDialogArticulosSinStock .textoDialog {
    grid-row: 3;
    grid-column: 1 / -1;
    text-align: center;
}

#contenidoDialogArticulosSinStock .close {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: end;
}

#cestaColorPrincipal {
    --currentColor: var(--colorPrincipal);
}
#cestaColorNegativo {
    --currentColor: var(--colorNegativo);
}
#cestaColorBlanco {
    --currentColor: var(--colorTextoPrincipal);
}

#successColorPositivo {
    --currentColorSuccess: var(--colorPositivo);
}

#successColorPrincipal {
    --currentColorSuccess: var(--colorPrincipal);
}

#motoColorPrincipal {
    --currentColorMoto: var(--colorPrincipal);
}
#motoColorSecundario {
    --currentColorMoto: var(--colorTextoSecundario);
}
#motoColorNegro {
    --currentColorMoto: #000000;
}

.lapizColorPrincipal {
    --currentColorLapiz: var(--colorPrincipal);
}

.lapizColorBlanco {
    --currentColorLapiz: #fff;
}

.ticketColorNegro {
    --currentColorTicket: #000000;
}

.ticketColorPrincipal {
    --currentColorTicket: var(--colorPrincipal);
}

.motoColorNegro {
    --currentColorMoto: #000000;
}

.motoColorPrincipal {
    --currentColorMoto: var(--colorPrincipal);
}

.pedidoColorPrincipal {
    --currentColorPedido: var(--colorPrincipal);
}

.pedidoColorNegro {
    --currentColorPedido: #000000;
}

.tarjetaColorPrincipal {
    --currentColorTarjeta: var(--colorPrincipal);
}

.tarjetaColorNegro {
    --currentColorTarjeta: #000000;
}

.iconoColorPrincipal {
    --currentColor: var(--colorPrincipal);
}

.iconoColorNegativo {
    --currentColor: var(--colorNegativo);
}

.iconoColorTextoPrincipal {
    --currentColor: var(--colorTextoPrincipal);
}

.iconoColorBlanco {
    --currentColor: #fff;
}

.iconoColorPositivo {
    --currentColor: var(--colorPositivo);
}

.iconoColorNegro {
    --currentColor: #000;
}

.iconoColorTextoSecundario {
    --currentColor: var(--colorTextoSecundario);
}

.iconoColorSecundario {
    --currentColor: var(--colorSecundario);
}

#dialogMetodoDePago {
    height: 500px !important;
    max-width: 800px !important;
    border-radius: 10px;
    width: 95%;
    max-width: 500px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99999999;
    height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
    height: fit-content !important;
    padding: 0.4rem !important;
    background-color: #f6fafd;
    box-sizing: border-box;
}

#contenidoDialogoMetodoPago {
    display: flex;
    justify-content: center;
    align-items: center;
}

#iframePago {
    min-height: 400px;
    width: 100%;
    max-width: 800px;
    border: 0;
    padding: 0.3rem;
    box-sizing: border-box;
    height: 85vh;
}

.mensajeError span {
    grid-column: 1 / -1;
}
.idiomaSeleccionar {
    border-radius: 8px;
    box-shadow: 5px 6px 15px -3px rgba(148, 148, 148, 0.6);
    margin-bottom: 1.5rem;
    font-family: "fuenteMedium";
    /* max-width: 400px; */
    /*ojo*/
    max-width: var(--MWMaxWidthComponent);
    font-size: var(--font-size-1);
}
.idiomaSeleccionar svg.iconoIdiomas {
    grid-column: 1 / 2;
}
.idiomaSeleccionar div {
    grid-column: 2 / -2;
}
.idiomaSeleccionar svg {
    grid-column: -1;
}

.idiomasLista {
    /* max-width: 400px; */
    /*ojo*/
    max-width: var(--MWMaxWidthComponent);
    border-radius: 8px;
    box-shadow: 5px 6px 15px -3px rgba(148, 148, 148, 0.6);
}

.idiomasLista li:first-child {
    border-radius: 8px 8px 0 0;
}
.idiomasLista li:last-child {
    border-radius: 0 0 8px 8px;
}

.idiomaSeleccionado svg {
    display: block !important;
    grid-column: -1;
}
.idiomaSeleccionado span {
    grid-column: 3 / -2;
    grid-row: 1;
    justify-self: start;
}
.idiomaSeleccionado {
    background-color: #ffffffb3;
}

#warningBlanco {
    --currentColorWarning: #fff;
}

#warningColorSecundario {
    --currentColorWarning: var(--colorSecundario);
}

.contenedorForm .contenedorNumeroTarjeta {
    grid-column: 1 / -3;
}
.imagenTipoTarjeta img {
    max-height: 35px;
    margin-top: 20px;
    width: auto;
}

.imagenTipoTarjeta {
    grid-column: -3 / -1;
}

.errorTarjeta {
    grid-row: 2;
    grid-column: 1 / -1;
}

.nombreArticuloPack,
#cabeceraDialogHora {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 999999;
    font-size: var(--font-size-5);
    text-align: center;
    color: var(--colorPrincipal);
}

#cabeceraDialogHora {
    padding: var(--m-1) 0 !important;
}

.nombreArticuloPack span,
#cabeceraDialogHora span,
.nombrePack_Pack span {
    display: block;
    line-height: 35px;
}

#fecha_pedido {
    margin-bottom: 10px;
}

#dialogHora {
    width: 400px;
    border: none;
    padding: 20px;
    position: relative;
    z-index: 999;
}
#dialogHora {
    max-width: 350px !important;
    height: 530px !important;
}
#dialogHora {
    width: 93%;
    max-width: 300px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99999;
    overflow-y: auto !important;
    /* height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
    height: fit-content !important; */
    /* max-height: 90vh !important; */
    padding: 0 var(--m-1) 0rem var(--m-1);
    box-sizing: border-box;
}

.hora-disponible {
    display: flex;
    align-items: center;
    margin: 5px 0;
    padding: 10px;
    background-color: var(--colorClarito);
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.hora-disponible:hover {
    background-color: var(--colorSecundario);
}

.flatpickr-wrapper {
    position: relative;
    display: grid !important;
}

.input-group {
    /* position: relative;
    display: inline-block; */
}

.icono-calendario {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    /* cursor: pointer; */
    color: var(--colorPrincipal);
}

.icono-calendario i {
    font-size: 18px;
}

#horasPedido {
    display: flex;
    flex-direction: column; /* Para que los elementos se apilen de arriba hacia abajo */
    gap: 10px; /* Espacio entre los elementos */
    text-align: center;
    /* align-items: center; */
    flex-grow: 1; /* Hace que el contenedor crezca para llenar el espacio disponible */
    max-height: 100%; /* Limita el alto máximo al 100% del contenedor del diálogo */
    overflow-y: auto;
    height: 63%;
    margin-top: 15px;
}

.horasDisponiblesCentrado {
    align-items: center;
}
.hora-disponible input {
    margin-right: 5px;
}

.piePack {
    display: block;
    position: sticky;
    bottom: -17px;
    z-index: 99999;
    background-color: #fff;
    padding: 1rem 1rem 0.5rem !important;
}

#dialogArticulo .botones {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 99999;
    background-color: #fff;
    padding: 0 1rem 1rem !important;
}

#seleccionarHoraEntrega {
    padding-bottom: 10px;
}

.pieDialogHora {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    z-index: 999;
    position: sticky;
    bottom: 0;
    left: 0;
    padding-bottom: 10px;
}

#modificadoresPack {
    margin-top: 20px;
    border: 2px solid var(--colorPrincipal); /* Establece un borde de 2px para todos los lados */
    border-left-width: 10px;
    border-radius: 8px;
}

.lineaCuentaNoConfirmada {
    color: #d3d3d3;
}

#dialogRepetirPedido,
#dialogPackRepetirPedido,
#dialogLocalizacion {
    width: 93%;
    max-width: 300px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99999;
    overflow-y: auto !important;
    height: -moz-fit-content !important;
    height: -webkit-fit-content !important;
    height: fit-content !important;
    max-height: 90vh !important;
    padding: 0 var(--m-1) 0rem var(--m-1);
    box-sizing: border-box;
}

#ConfirmarRepetirPedido,
#FormaDeEntrega,
#FinalizarRepetirPedido,
#SinArticulosDisponibles,
#ArticulosNoDisponibles,
#OpcionesNoDisponibles,
#SeguirRepetirPedido,
#RestauranteCerrado {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}
#ConfirmarRepetirPedido > *,
#FormaDeEntrega > *,
#FinalizarRepetirPedido > *,
#SinArticulosDisponibles > *,
#ArticulosNoDisponibles > *,
#OpcionesNoDisponibles > *,
#SeguirRepetirPedido > *,
#RestauranteCerrado > * {
    grid-column: 1 / -1;
}

#ConfirmarRepetirPedido > .botones {
    justify-self: stretch;
}

#dialogRepetirPedido {
    border-left: 10px solid var(--colorPrincipal);
    box-sizing: border-box;
    padding: var(--m-1);
}

#dialogRepetirPedido .titulo,
#dialogPackRepetirPedido .titulo {
    text-align: center;

    font-family: "fuenteLight";
}

.pagoSeguro {
    display: flex;
    align-items: center;
    align-content: center;
}

.pagoSeguro span {
    display: block;
    line-height: 0;
}

#pagoOnline {
    padding: 0rem var(--m-1) var(--m-1) var(--m-1);
}
#botonesDialogTicket,
#cabeceraDialogTicket {
    position: sticky;
    background-color: #fff;

    z-index: 999999;
}
#botonesDialogTicket {
    bottom: 0;
    padding: var(--m-1) 0 var(--m-1);
}
#cabeceraDialogTicket {
    top: 0;
    padding-top: var(--m-1);
    /* padding-bottom: .5rem; */
    text-align: center;
}

.numeroPedido {
    font-size: var(--font-size-5);
}
.fechaPedido {
    font-family: "fuenteLight";
}

.imagenDialog {
    display: flex;
    justify-content: center;
}
.imagenDialog img {
    height: 80px;
    width: auto;
}

.nombreArticuloRepetir {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: sticky;
    top: 0;
    padding: 1.5rem 0rem;
    background: #fff;
    row-gap: 0.5rem;
    z-index: 999;
}

.nombreArticuloRepetir svg {
    grid-column: 1 / 2;
}

.nombreArticuloRepetir div {
    grid-column: 2 / -1;
    justify-self: center;
    font-size: var(--font-size-4);
    color: var(--colorPrincipal);
}
.nombreArticuloRepetir div.primerElemento {
    grid-column: 1 / -1;
}

.nombreArticuloRepetir hr {
    grid-column: 1 / -1;
}

.lineaDescuento > *,
.lineaDescuento > .composicion {
    color: var(--colorPrincipal) !important;
}

#cabeceraDialogArticulo,
.contenedorPrecioNombre {
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 1rem;
    position: sticky;
    padding: var(--m-1);
    background-color: #fff;
    top: 0;
}

.sinResultados {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sinResultados svg {
    height: 45px;
}

.dialogTitulo {
    text-align: center;

    font-family: "fuenteLight";
    font-weight: bold;
}

#botonesFEntrega {
    display: grid;
    grid-template-columns: 1fr;
    grid-row: auto;
    row-gap: 1rem;
}

#botonesFEntrega div:first-child {
    grid-row: 1;
    grid-column: 1 / -1;
}

#botonesFEntrega div:last-child {
    grid-row: 2;
    grid-column: 1 / -1;
}

.bullet {
    border-radius: 50%;
    background: #a5a5a554;
    display: inline-block;
    height: 8px;
    width: 8px;
    margin-right: 10px;
}
.bullets {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: var(--m-1) 0;
    box-sizing: border-box;
}
.bullet-active {
    background: var(--colorPrincipal) !important;
}

#dialogTutorial::backdrop {
    background: none !important;
    -o-background: none !important;
    -moz-background: none !important;
    -webkit-background: none !important;
}

#popUpAlergenos,
#popUpBuscador {
    display: block;
    position: absolute;
    padding: 0.8rem;
    box-sizing: border-box;
    z-index: 222;
    background-color: var(--colorPrincipal);
    opacity: 95%;
    color: var(--colorTextoPrincipal);
    border-radius: 8px;
    font-size: var(--font-size-sm) !important;
    max-width: 300px !important;
    margin-top: 15px;
}

#filtroPopUp,
#buscadorPopUp {
    height: auto;
    width: auto;
    display: block;
}

#popUpAlergenos {
    right: 10px !important;
}

#popUpBuscador {
    left: 10px !important;
}
.imagenDemo {
    height: 100px;
    width: 100px;
}

.divHora {
    padding: var(--m-1);
    font-family: "fuenteBold";
    text-align: center;
    color: var(--colorPrincipal);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--grisClaritoMyWaiter);
    border-radius: 8px;
}

.horaSeleccionada {
    background-color: var(--colorPrincipal);
    color: var(--colorTextoPrincipal) !important;
    box-shadow: 5px 6px 15px -3px rgba(148, 148, 148, 0.6);
}

.horaSeleccionada span {
    color: var(--colorPrincipal);
}

.avisoCerrado {
    margin-bottom: 10px;
    text-align: center;
    font-size: var(--font-size-2);
    font-family: "fuenteBold";
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avisoCerrado img {
    width: 100px;
    height: auto;
    margin-bottom: 5px;
}

#diasDialogHora {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

#diasDialogHora .diaActual,
#diasDialogHora .diaProximo {
    padding: var(--m-1) var(--m-1) var(--m-05);
    text-align: center;
    border-bottom: 2px solid transparent;
    font-family: "fuenteBold";
    font-size: var(--font-size-2);
    color: var(--blackColor);
}

#diasDialogHora .diaActivo {
    border-bottom: 2px solid var(--colorPrincipal);
    color: var(--colorPrincipal) !important;
}

.tipoTarjeta {
    max-width: 50px;
}

.tarjetaCliente {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.infoLocalCentral {
    display: flex;
    flex-direction: column;
    padding: var(--m-md) var(--m-1);
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100%;
    box-sizing: border-box;
}

.infoLocalCentral span {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--m-1);
    text-align: left;
}
.infoLocalCentral span:last-child {
    margin-bottom: 0;
}
.km {
    padding: var(--m-05) var(--m-1);
    background: var(--colorPrincipal);
    display: inline-block;
    color: var(--colorTextoPrincipal);
    border-radius: 50px;
    box-shadow: 5px 6px 15px -3px rgb(123 123 123 / 50%);
}

.localCentral {
    box-shadow: 5px 6px 15px -3px rgb(124 124 124 / 50%);
    border-radius: 8px;
}

.localCentralDiv,
.localCentralSinImagenDiv {
    display: block;
    border-radius: 8px 8px 0 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: left;
    height: 140px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: var(--m-md) var(--m-1);
    flex-direction: column;
}

.localCentralDiv span {
    font-family: "fuenteRegular";
    font-size: var(--font-size-4);
    color: #fff;
    text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
        1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.localCentralSinImagenDiv span {
    font-family: "fuenteRegular";
    font-size: var(--font-size-4);
    color: var(--colorTextoClarito);
}

#locales {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    padding: 0 var(--m-1) var(--m-1);
}

.contenedorSpanLocal {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.formularioRegistro {
    padding: var(--m-1) var(--m-1) 0;
}

.formControlPassword .inputGris {
    padding: var(--m-1) 0;
}

.horaNoDisponible span {
    text-decoration: line-through;
    color: #6c6d66 !important;
}

.mensajeOpcion.errorPack {
    color: var(--colorNegativo) !important;
    font-family: "fuenteBold";
}

.contenedorOpciones.errorPack {
    border: 2px solid var(--colorNegativo);
    padding: var(--m-05);
    border-radius: 8px;
    margin: 0.5rem 0;
}

.localCerrado {
    filter: grayscale(100%);
}

.subfamiliaFiltro {
    transition: visibility 0.5s ease-in 0.5s, opacity 0.5s ease-in 0.5s;
}

.wrapperFiltro {
    display: flex;
    overflow-x: scroll !important;
}

.wrapperFiltro::-webkit-scrollbar {
    display: none;
}
.wrapperFiltro {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.filtroFamilia {
    padding: var(--m-05);
}

.subfamiliaFiltro {
    display: flex;
}

.familiaSeleccionada,
.grupoSeleccionado {
    font-family: "fuenteBold";
    color: var(--colorPrincipal) !important;
}

.nombreTarjeta {
    padding: var(--m-1);
    width: 100%;
    text-align: left;
    text-transform: capitalize;
    box-sizing: border-box;
    color: #fff;
    border-radius: 8px 8px 0 0;
    margin-bottom: var(--m-1);
    font-family: "fuenteMedium";
}

.tarjetaClientePanelUsuario.sinTipo {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    font-family: "fuenteMedium";
}

.tarjetaClientePanelUsuario.sinTipo img {
    margin-left: var(--m-1);
    max-height: 35px;
    width: auto;
}

.tarjetaClientePanelUsuario.sinTipo .contenedorBotonTarjeta {
    width: inherit !important;
}

.nombreTarjeta {
    background-color: var(--colorPrincipal);
    color: var(--colorTextoPrincipal);
}

.visa .nombreTarjeta {
    background-color: #1a1f71 !important;
}

.mastercard .nombreTarjeta {
    background-color: #eb001b !important;
}

.amex .nombreTarjeta {
    background-color: #0070d1 !important;
}

.d-flex {
    display: flex;
}

.algn-c {
    align-items: center;
}

.jstf-c {
    justify-content: center;
}

.jstf-c-se {
    justify-content: space-evenly;
}

.jstf-c-sb {
    justify-content: space-between;
}

.jstf-e {
    justify-content: flex-end;
}

.flex-d-c {
    flex-direction: column;
}

.algn-end {
    align-items: end;
}

.algn-start {
    align-items: start !important;
}

.algn-slf-s {
    align-self: start;
}

.jstf-slf-strech {
    justify-self: stretch;
}

.jstf-self-e {
    justify-self: end;
}

.flex-wrap {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.iconoPaginacion {
    min-width: 18px;
    max-width: 18px;
    height: 18px;
}

.pieCarrito .total,
.totalPedidoCesta {
    font-family: "fuenteBold";
}

.portadaCartaPDF {
    height: 150px;
    border-radius: 8px 8px 0 0;
}

.nombreCartaPDF {
    padding: 0.7rem;
    background-color: var(--grisClaritoMyWaiter);
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: center;
}

.nombreCartaPDF p {
    font-family: "fuenteMedium";
    font-size: var(--font-size-2);
}

.inactive {
    display: none;
}

.tituloDialogo {
    font-size: var(--font-size-2);
    color: var(--colorPrincipal);
}

#dialogLocalizacion {
    padding: var(--m-1);
}

.pedidoUsuario {
    padding: var(--m-1);
    display: grid;
    grid-template-columns: 60px 1fr;
    border-radius: 8px;
    box-sizing: border-box;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 1.5rem;
}

.noMostrarFiltroFecha {
    display: none !important;
}

.politicaPrivacidad {
    display: inline;
}

.griseado {
    color: #6c6d66 !important;
}

.alergenos img {
    width: var(--alergenoTarjeta);
    height: var(--alergenoTarjeta);
    margin: 0 5px 5px 0;
}
.alergenoFiltro img {
    width: 30px;
}

.contenedorHora {
    display: flex;
    justify-content: start;
    align-items: center;
}
/* 
.redesSociales a{
    margin-right: 10px;
} */

.tarjetaElegida {
    display: grid;
    gap: 1rem;
    align-items: center;
    grid-template-columns: 1fr 3fr;
}

.formDireccion {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.5rem;
}

.imgTermCond {
    width: 100%;
    height: auto;
    max-width: 50px;
    max-height: 50px;
}

.checkBoxTermCond {
    display: grid;
    grid-template-columns: 1fr 11fr;
    align-items: start;
}

.checkBoxTermCond input {
    margin-top: 4px;
}

.gifAnimado {
    height: 120px;
    width: 120px;
}

.formularioDireccion {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.5rem;
}
.contenedorBotonesAcciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}

.contenedorBotonesAcciones .botonEnlace {
    grid-column: 1 / -1;
}
.contendorAlergenosDialog .h2 {
    margin: 0 0 var(--m-1);
}
.contenedorNuevaPass {
    max-width: 700px;
    margin: 0 auto;
}

.dialogArticulo {
    padding: 0;
    width: 90%;
}

#barraBusquedaHistorial {
    padding: var(--m-1) 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

#barraBusquedaHistorial #fechaBusqueda {
    grid-column: 1 / 13;
    justify-self: self-start !important;
}

#barraBusquedaHistorial #iconoFechaPedidos {
    grid-column: -1;
}

.encabezadoPagina {
    padding: var(--m-1) var(--m-1) 0;
}

#dialogErrorLocalizacion svg {
    height: 80px;
}

#dialogCambiarPass svg {
    min-height: 180px;
}

#dialogCookies img {
    height: 50px;
    width: 50px;
}
.alergenoTarjeta {
    height: var(--alergenoTarjeta) !important;
    width: var(--alergenoTarjeta) !important;
    margin: 0 5px 5px 0;
}
.fechaPedido,
.boton,
.botonGrande,
.cuentaTabla td,
tr.lineaTotalDivisa td,
tr.lineaTotalXComensal td,
#slDivisa,
#tbComensal,
.informacion a,
.info,
.box,
.infoArticulo,
.cantidad,
.cantidadCant,
.cantidadPack input,
#gastosEnvio,
#horaEntrega,
#detallesHoraEntrega,
.mensajeCerrado,
.mensajeDireccionCentral,
.nombreArticulo,
.descripcionFicha,
.precioArticulo,
.nombreOpcionFicha,
.totalPedido .total,
#btTotalArts,
.botoncitoRedondo,
.panelUsuario,
.tablaPedidos thead th,
.tablaPedidos td,
.alergeno,
.nombreOpcion,
.tituloOpcionCarta,
.alergenoFiltro,
.mensajeOpcion,
.opciones > .opcionPackLinea,
.detallesDireccion,
.cambiarIdioma,
.resumenPedido,
#buscadorArticulos,
.enlaceCookies,
#dialogRepetirPedido .titulo,
#dialogPackRepetirPedido .titulo,
.dialogTitulo,
#filtro.filtroFamilia .swiper-slide,
.precioPackCarta,
.politicaPrivacidad,
#detallesGastosEnvio,
.enlaceTerminos,
.enlaceDescripcion {
    font-size: var(--font-size-1);
    user-select: none;
}

#btTotalArts {
    width: var(--fabTotalPedido);
    height: var(--fabTotalPedido);
}

.diaSemana {
    font-size: var(--font-size-sm);
}

.opciones > .opcionPackLinea {
    margin: 16px 0 !important;
}

.enlaceDescripcion {
    cursor: pointer;
    text-decoration: none;
    font-family: "fuenteMedium";
    display: inline-block;
    color: var(--colorEnlace) !important;
    border: none !important;
    outline: none !important;
}

.cantidadLineaPedido {
    width: 20px;
    height: 20px;
    padding: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorPrincipal);
    border-radius: 50%;
    font-size: 12px;
}

.cantidadLineaPedido span {
    color: var(--colorTextoPrincipal);
}

.lineaPedidoHistorial {
    display: grid;
    grid-template-columns: 2fr 10fr;
    gap: 0.5rem;
    align-items: start;
    padding: var(--m-05);
    border-bottom: 1px solid var(--grisClaritoMyWaiter);
}

.divTicket {
    display: grid;
    grid-template-columns: 1fr 80px;
}

.divTicket span:nth-child(2) {
    justify-self: end;
}

#requerimientosPassword {
    border-radius: 8px;
    background: var(--grisClaritoMyWaiter);
    padding: 1rem;
}

.iconoSm {
    min-width: 10px;
    max-width: 10px;
    height: 10px;
}

.requisito span {
    text-decoration: line-through;
    animation: strike 0.8s linear;
}
@keyframes strike {
    from {
        text-decoration-color: transparent;
    }
    to {
        text-decoration-color: auto;
    }
}

.requisito div.bullet {
    display: none;
}

.requisito svg {
    display: block !important;
}

noscript {
    font-family: "Fuente NoScript";
}

#contenedorNoScript {
    padding: 1rem;
}
#contenedorNoScript p {
    font-size: 20px;
}
.pasoJavascript {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    align-items: flex-start;
}
.pasoJavascript img {
    height: 32px;
    width: 32px;
}
.pasoJavascript p {
    text-align: left;
    font-size: 16px !important;
}
.pasoJavascript span {
    font-family: "Fuente Bold NoScript";
}

.contenedorBarraUsuario.redondeada {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: 0px;
    left: 0;
    z-index: 99999999;
}
.barraUsuario.redondeada {
    max-width: var(--MWMaxWidthComponent);
    border-radius: var(--borderRadiusBarra);
    position: static !important;
    box-shadow: 0 7px 30px -10px var(--colorPrincipalTransparente);
    border: 2px solid #fff;
}

#contenedorTotalPedido {
    z-index: 99999;
}

#contenedorTotalPedido.redondeada {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: var(--posicionFinalizarPedidoR) !important;
    left: 0px;
    right: 0px;
}

#finalizarPedido.redondeada {
    position: static !important;
    max-width: var(--MWMaxWidthComponent);
    border-radius: var(--borderRadiusBarra);
    box-shadow: 0 7px 30px -10px var(--colorSecundarioTransparente);
    border: 2px solid #fff;
}

#contenedorPieCarrito.redondeada {
    display: flex;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: var(--posicionFinalizarPedidoR) !important;
    left: 0;
    right: 0;
}

.pieCarrito.redondeada {
    max-width: var(--MWMaxWidthComponent);
    border-radius: 30px;
    position: static;
    height: inherit !important;
    border: 2px solid #fff;
}

.contenedorAccionesCarrito.redondeada,
.contenedorAccionesDireccion.redondeada {
    display: flex;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: var(--posicionFinalizarPedidoR);
    left: 0;
    right: 0;
}

.accionesCarrito.redondeada,
#botoneraRepartoCentral.redondeada {
    /* max-width: 400px; */
    /*ojo*/
    max-width: var(--MWMaxWidthComponent);
    border-radius: 30px;
    position: static;
    border: 2px solid #fff;
}

.contenedorAcciones.redondeada {
    display: flex;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: 65px;
    left: 0;
    right: 0;
}
.contenedorAcciones .acciones.redondeada {
    max-width: var(--MWMaxWidthComponent);
    border-radius: 30px;
    position: static;
    border: 2px solid #fff;
    padding-top: 1rem;
}

@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

/* ANIMACIONES */

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes animatedBackground {
    from {
        background-position: 0;
    }
    to {
        background-position: 100% 100%;
    }
}

#mostrarPack_Pack::backdrop {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo gris semitransparente */
    transition: opacity 0.5s;
}

.nombrePack_Pack {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 999999999 !important;
    font-size: var(--font-size-5);
    text-align: center;
    color: var(--colorPrincipal);
    padding-bottom: 0%;
}

#mostrarPack_Pack {
    max-height: 85%;
    min-width: var(--dialogArticulosModificadores);
    width: 100%;
    border: none;
    border-radius: 10px 10px 0 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0%;
    top: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    z-index: 999999999 !important;
    bottom: -200%; /* Comienza fuera de la pantalla */
    transition: bottom 0.9s ease-out;
    overflow-y: auto; /* Añade desplazamiento vertical si el contenido es demasiado alto */
}

#dialogPack {
    position: fixed;

    max-height: 86%;
    min-width: var(--dialogArticulos);
    width: 100%;

    top: 18%;
    border: none;
    border-radius: 10px 10px 0 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0%;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    z-index: 999999999 !important;
    bottom: -200%; /* Comienza fuera de la pantalla */
    transition: bottom 0.7s ease-out;
    overflow-y: auto; /* Añade desplazamiento vertical si el contenido es demasiado alto */
}

@media screen and (min-width: 700px) {
    #dialogPack {
        max-height: 86%;
        max-width: 650px;
        top: 14%;
    }

    #mostrarPack_Pack {
        max-height: 86%;
        max-width: 650px;
        top: 18%;
    }

    .imagenFichaArticulo {
        margin-top: 8px;
        height: 95px;
        border-radius: 8px;
        object-fit: cover;
    }

    .articuloNoDisponible {
        background-color: var(--colorNegativo);
        color: var(--colorTextoNegativo);
        font-family: "fuenteLight";
        padding: 0.8rem;
        border-radius: 25px;
        font-size: 21px;
        font-weight: bold;
        max-width: 100%;
        min-width: 100px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0px 7px;
    }
    .articuloNoDisponiblePack {
        background-color: var(--colorNegativo);
        color: var(--colorTextoNegativo);
        font-family: "fuenteLight";
        padding: 0.8rem;
        border-radius: 25px;
        font-size: 21px;
        font-weight: bold;
        max-width: 100%;
        min-width: 100px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0px 7px;
    }
}

#mostrarPack_Pack.show,
#dialogPack.showPack {
    bottom: 0; /* Desliza hacia arriba */
    z-index: 999;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

#contenidoPack_Pack {
    height: auto;
    margin-top: 5%;
    margin-left: 7px;
    margin-right: 7px;
}

#contenidoPack {
    text-align: center;
    min-height: 90%;
    margin: 5px;
}

/* --------------------- */

.imagenPack_Pack {
    width: auto; /* El contenedor ocupa el 100% del ancho del padre */
    overflow: hidden; /* Oculta la parte de la imagen que se sale del contenedor */
    max-height: 170px; /* Define la altura máxima del contenedor */
    border-radius: 10px;
    margin-left: 25px;
    margin-right: 25px;
}

.imagenPack_Pack img {
    width: 100%; /* La imagen ocupa el 100% del ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.contenedorOpciones {
    max-width: 1000px;

    padding-top: var(--m-05);
    padding-bottom: var(--m-05);
    margin-top: 12px;
    margin-left: 4px;
    margin-right: 4px;
}
/* Estilos para aplicar cuando hay un error */
.error-contenedor {
    border-radius: 9px;
    padding: 0px 3px 9px 3px;
    border: 3px solid var(--colorNegativo);
}

.error-texto {
    color: var(--colorNegativo) !important;
}

.nombreElementoOpcion {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 7px;
    color: #333;
    font-size: var(--font-size-3);
    text-transform: uppercase;
}

.sinImagen {
    padding: 10%;
}

.opciones {
    display: grid;
    grid-gap: 0.5rem;
    row-gap: 1.5rem;
    /* grid-template-columns: 45% 45% 45%; */
    /* grid-template-columns: auto auto auto; */
    grid-template-columns: repeat(3, minmax(30%, 1fr));
    grid-template-rows: auto auto;
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 0px;
    /* display: flex; */
    flex-wrap: wrap;
    /* justify-content: center; */
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    column-gap: 1rem;
}

.articuloFicha {
    text-align: center;
    background-color: #ffffffce;
    border-radius: 8px;
    min-height: 45px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    height: 100%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    /* padding-left: 5px;
      padding-right: 5px;
      padding-top: 5px; */
}

.articulo_seleccionado {
    background-color: #f2efe5ad;
    border-radius: 8px;
    margin-right: 2px;
    margin-left: 2px;
    margin-top: 3px;
    margin-bottom: 1px;
    margin-bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 100%;
    min-height: 100%;
}

.imagenFicha {
    border-radius: 8px;
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.imagenFichaArticulo {
    width: 100%;
    height: 85px;
    margin: 0px;
    border-radius: 8px 8px 0px 0px;
    object-fit: cover;
}

.opcionPackLinea .price {
    margin-top: 10px;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.titleNombreArticulo {
    font-size: 18px;
    font-weight: bold;
    text-align: center;

    -webkit-user-select: none; /* Safari, Chrome, iOS */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

#nameContainerWithImage {
    width: 100%;
    margin-left: 7px;
    margin-right: 7px;
    margin-top: 8px;
    height: 40px;
}

#nameContainerWhitoutImage {
    width: 100%;
    margin-left: 7px;
    margin-right: 7px;
    margin-top: 25%;
    height: 35px;
}

.opcionPackLinea {
    position: relative;
    top: 14%;
}

.articleInfoButton {
    float: right;
    z-index: 10000 !important;
    pointer-events: none;
}

.addOptionInfoButton {
    position: relative;
    text-align: center;
    padding: 0px;
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
    margin-top: 0px;
    z-index: 1000;
}

.selectBtnContainer {
    border-radius: 50%;
    background: white;
    position: absolute;
    top: -8px;
    left: -4px;
    display: none;
}
.showBtnContainer {
    position: relative;
    margin-right: 6px;
    margin-bottom: 4px;
    width: 200px;
}
.showTarjetaContainer {
    position: absolute;
    right: 19px;
    border-radius: 50%;
    z-index: 999;
    background-color: white;
    padding: 3px;
}

.pieArticuloFicha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 4px;
    gap: 20px;
}

/* CONTADOR DE LA FICHA DEL ARTICULO */
.contadorArticuloFicha {
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    text-align: center;
    width: 100%;

    -webkit-user-select: none; /* Safari, Chrome, iOS */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.botonArticuloFicha {
    /* estilos para los botones */
    background-color: var(--colorSecundario);
    color: #fff;
    width: 100%;
    max-width: 27%;
    height: auto;
    font-size: 24px;
    border-radius: 6px 6px 6px 6px;
    cursor: pointer;
}

.botonArticuloFicha::backdrop {
    background-color: var(--colorClarito);
}

.valorArticuloFicha {
    background-color: #fff;
    display: inline-block;
    font-size: 20px; /*ancho del viewport */
    width: calc(34% - 2 * 6%);
    text-align: center;
}

.contadorArticuloFicha button {
    vertical-align: middle;
}

.footer-sticky,
.footer-agregar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.contadorOculto {
    display: none;
}
/* 
.footer-sticky {
    text-align: center;
} */
/* ---------------------------------------- */

#dialogPack::backdrop,
#dialogArticuloPack::backdrop,
#dialogEnlace::backdrop {
    background: rgba(0, 0, 0, 0.1) !important;
}
#mensajeInfoTarjeta {
    background-color: var(--grisClaritoMyWaiter);
    width: 350px;
    box-sizing: border-box;
    opacity: 0.95;
    z-index: 999999999;
}
#mensajeInfoTarjeta #contenedorMensajeInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#mensajeInfoTarjeta #contenedorMensajeInfo img {
    max-height: 50px;
}
#mensajeInfoTarjeta #contenedorMensajeInfo span {
    font-size: var(--font-size-sm);
    /* max-width: 250px; */
}

.boton.destacado,
.botonGrande.destacado {
    position: relative;
    overflow: hidden;
    transition: all 0.8s ease;
}

.botonGoogle:after {
    content: "";
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    transform: skewX(-20deg);
    background-image: linear-gradient(
        to right,
        transparent,
        transparent,
        #4285f420,
        #ea443520,
        #fbbd0520,
        #34a85320,
        transparent,
        transparent
    );
}

.botonComenzarPedido:after,
.botonComenzarPedido:after,
.botonEscanearPedido:after {
    content: "";
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    transform: skewX(-20deg);
    background-image: linear-gradient(
        to right,
        transparent,
        transparent,
        #f8f8f836,
        transparent,
        transparent
    );
}

.boton.destacado:after,
.botonGrande.destacado:after {
    animation: shine 4.2s ease infinite;
}

.botonGoogle {
    background-color: #fdfbfb;
    color: var(--blackColor);
    border: 1px solid #dadce0;
    height: 34px;
}

.botonGoogle:hover {
    background-color: #f3f2f2;
}

.botonGoogle img {
    height: 20px;
    margin-right: 8px;
}

.articulosPedido.dosArtsLinea {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--columnArts), 1fr));
    gap: 5px;
    justify-content: space-between;
}

.divAlergenosArticulo {
    font-size: var(--font-size-1);
}

.articulosPedido.dosArtsLinea .tarjetaArticulo .informacionArticulo {
    align-self: start;
    grid-row: 2;
    grid-column: 1 / -1;
}
.articulosPedido.dosArtsLinea .tarjetaArticulo .informacionArticulo p {
    text-align: center;
    margin-bottom: 0.5rem;
}
.articulosPedido.dosArtsLinea .tarjetaArticulo .informacionArticulo .alergenos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.articulosPedido.dosArtsLinea .tarjetaArticulo .imagenArticulo img {
    max-width: var(--imgCardArtsW);
    max-height: var(--imgCardArtsH);
}

.articulosPedido.dosArtsLinea .tarjetaArticulo .imagenArticulo {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
    align-self: center;
}

.articulosPedido.dosArtsLinea .tarjetaArticulo {
    width: 100%;
    /* padding: var(--m-sm) var(--m-1); */
    display: grid;
    cursor: pointer;
    grid-template-rows: var(--imgCardArtsH) 1fr auto auto;
    row-gap: 1rem;
    justify-content: center !important;
    align-items: center;
    grid-template-columns: 1fr;
    padding: 0.5rem;
}

.articulosPedido.dosArtsLinea .tarjetaArticulo .descripcionArticulo {
    display: none;
}

/* .articulosPedido.dosArtsLinea .tarjetaArticulo .articuloNoDisponible {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-self: center;
} */

.articulosPedido.dosArtsLinea .tarjetaArticulo hr {
    grid-row: 4;
}

.articulosPedido.modoLista .tarjetaArticulo {
    margin: 0 !important;
    row-gap: 2px;
}

.articulosPedido.modoLista .tarjetaArticulo .imagenArticulo {
    display: none;
}

.articulosPedido.modoLista .tarjetaArticulo .informacionArticulo {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.articulosPedido.modoLista
    .tarjetaArticulo
    .informacionArticulo
    .contenedorNombrePrecio {
    display: flex;
    justify-content: space-between;
    width: 90%;
}
.articulosPedido.modoLista
    .tarjetaArticulo
    .informacionArticulo
    .contenedorNombrePrecioCarta {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.articulosPedido.modoLista
    .tarjetaArticulo
    .informacionArticulo
    .contenedorNombrePrecio
    .precioArticulo {
    margin: 0;
}

#estrellas {
    max-width: 350px;
    display: grid;
    grid-template-columns: repeat(5, 30px);
    align-items: center;
    justify-items: center;
    padding: 0.5rem;
    background-color: var(--grisClaritoMyWaiter);
    border-radius: 20px;
    box-sizing: border-box;
    justify-content: center;
    gap: 10px;
    height: 50px;
}

.estrella {
    width: 20px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.estrella.sinSeleccionar {
    opacity: 0.3;
}

#obsValoracion {
    max-width: 350px;
    height: 250px;
}

#botonValorar {
    max-width: 350px;
}

#dialogAvisoGastosEntrega svg {
    height: 50px;
}

#detallesEntrega {
    padding: 1rem;
}

.code-input {
    border: none;
    outline: none;
    border-radius: 0px !important;
    border-bottom: 2px solid #b5b4b5;
    max-width: 30px;
    padding: 0.5rem;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    font-family: "fuenteBold" !important;
}

.number-code {
    max-width: 200px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

#gorritoNavidad,
#cupido,
#sombreroBruja {
    height: 25px;
    position: relative;
    transform: rotate(40deg);
    top: -12px;
    left: -4px;
}

#decoracionTema {
    position: relative;
    width: auto; /* Ancho del contenedor */
    height: 0%; /* Altura del contenedor */
}

#contenedorNombreLocal {
    display: flex;
}
.enlaceTerminos {
    display: block;
    color: var(--blackColor) !important;
    text-align: center;
}

.flatpickr-calendar {
    z-index: 1001 !important; /* Ajusta este valor según sea necesario */
}

.terminoscondiciones {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    border-radius: 8px;
    background-color: var(--colorClarito);
}
.terminoscondiciones svg {
    height: 55px;
}

.termsCondiciones a {
    font-size: var(--font-size-1);
}
.termsCondiciones {
    padding: 0 1rem;
}
.progress {
    /* position: relative; */
    height: 3px;
    background-color: var(--colorPrincipal);
    transition: all linear 0.1s;
    min-width: 1%;
    border-radius: 10px;
    width: 1%;
}

#progress {
    box-sizing: border-box !important;
    padding: 0;
    top: 0;
    left: 0;
}

.contenedorBarraProgreso.portadaBordesRedondeados {
    padding: 0 12px;
}

#pedidoRealizadoAutoservicio {
    border-radius: var(--borderRadiusBoton);
    border: 2px solid #fff;
}

.contenedorBotonFab {
    display: flex;
    padding: 1rem;
    justify-content: end;
    position: fixed;
    width: 100%;
    right: 0;
    left: 0;
    box-sizing: border-box;
    align-items: center;
}

.contenedorBotonFabTablet {
    display: flex;
    padding: 1rem;
    justify-content: end;
    position: fixed;
    width: 100%;
    right: 0;
    left: 0;
    box-sizing: border-box;
    /* height: 113px; */
    align-items: center;
}

.wrapperBotonFab {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 45px;
    gap: 0.5rem;
    align-items: center;
    justify-content: end;
    justify-items: end;
}

.wrapperBotonFabTablet {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 45px;
    gap: 0.5rem;
    align-items: center;
    justify-content: end;
    justify-items: end;
}

.botonFab {
    padding: 1rem;
    border-radius: 50%;
    background-color: var(--colorSecundario);
    border: 2px solid #fff;
    height: 45px;
    width: 45px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 2 / -1;
    box-shadow: 0 7px 30px -10px var(--colorSecundarioTransparente);
}

.mensajeBotonFab {
    padding: 0.5rem;
    background-color: var(--colorSecundario);
    border-radius: 10px;
    border: 2px solid #fff;
    color: var(--colorTextoSecundario);
    grid-column: 1 / 2;
}

.botonFab {
    animation: pulsate-fwd 0.5s ease-in-out 2 both;
}

.slide-in-right {
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

#iconoSuccessConfirmarMesa svg,
#iconoErrorConfirmarMesa svg,
#iconoWarningConfirmarMesa svg {
    height: 50px;
    width: 50px;
}

#aMismaTarifaConfirmarMesa,
#aDifTarifaConfirmarMesa {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 2fr 1fr;
    align-items: center;
}

.imagen-inactiva {
    height: auto;
    width: 100%;
}
/* Ocultar el contenido original */
.oculto {
    display: none;
}

.botonFabMesa {
    padding: 1rem;
    border-radius: 10px;
    background-color: var(--colorSecundario);
    border: 2px solid #fff;
    min-height: 45px;
    min-width: 60px;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 2 / -1;
    box-shadow: 0 7px 30px -10px var(--colorSecundarioTransparente);
    font-size: var(--font-size-sm);
}

.botonFabMesaTablet {
    padding: 1rem;
    border-radius: 100%;
    background-color: var(--colorSecundario);
    border: 2px solid #fff;
    min-height: 90px;
    min-width: 90px;
    max-width: 100%;
    box-sizing: border-box;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 2 / -1;
    box-shadow: 0 7px 30px -10px var(--colorSecundarioTransparente);
    font-size: 24px;
}

#mensajeNoPedirQR {
    background-color: var(--colorSecundarioTransparente50);
    border: 2px solid var(--colorSecundario);
    color: var(--blackColor);
}

.textoPortada.textoMesa {
    margin-top: 5px;
}

.contenedorImagenAgrupacion {
    max-width: 250px;
}

.contenedorImagenAgrupacion img {
    width: 100%;
}

.grupoAgrupacion,
.familiaAgrupacion,
.subfamiliaAgrupacion {
    clear: both;
    height: var(--contenedorAgrupacionH);
    position: relative;
    width: 100%;
    border-radius: 8px;
    transition: all 0.5s ease;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--colorPrincipal);
}

.favoritosAgrupacion {
    background-color: var(--colorSecundario);
}

.grupoAgrupacionSeleccionado {
    border-radius: 0px !important;
    box-shadow: 0px 4px 8px -3px rgb(0 0 0 / 20%);
}

.grupoAgrupacionSeleccionado .capa1 {
    border-radius: 0 !important;
}

.contenedorAgrupacionSeleccionado .familiaAgrupacion {
    border-radius: 0 !important;
}

.botonAgrupacion {
    height: 32px;
    width: 32px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 1px 1px rgb(0 0 0 / 65%);
}

.botonAgrupacion svg {
    height: 14px;
    width: 14px;
    transition: all 0.5s ease;
}
.contenedorAgrupacion {
    padding: 0 1rem;
    transition: all 0.5s ease;
}

.contenedorAgrupacionSeleccionado {
    padding: 0 !important;
}

.contenedorNombreGrupo {
    font-size: 20px;
    color: #fff;
    font-family: "fuenteBold";
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.65);
    font-size: 22px;
    line-height: 130%;
    text-align: left;
}

.accionFamiliaMenu svg,
.accionSubfamiliaMenu svg {
    height: 14px;
    width: 14px;
}

.accionFamiliaMenu svg.iconoMasMenu {
    height: 24px;
    width: 24px;
}

.subfamiliaMenu {
    align-items: center;
    grid-template-columns: 1fr 18px;
    display: grid;
    justify-content: space-between;
    height: 62px;
    padding: 16px 20px;
    box-sizing: border-box;
}

.imagenFamiliaMenu {
    height: 66px;
    width: 66px;
    border-radius: 8px;
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
}

.familiaMenu,
.subfamiliaMenuNivel2 {
    display: grid;
    grid-template-columns: 66px 1fr 24px;
    padding: 10px 16px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 86px;
    box-sizing: border-box;
    transition: background-color 0.5s ease;
}

#despegableSubfamilias {
    position: absolute;
    width: 100%;
    background-color: #fff;
    z-index: 99999999;
    max-width: 800px;
    margin: 0 auto;
    overflow-y: scroll !important;
    left: 0;
    box-sizing: border-box;
}

.accionFamiliaMenu,
.accionSubfamiliaMenu,
#botonSubfamiliasNavegacion,
#nombreAgrupacion .iconoFlechaMenu {
    cursor: pointer;
}

.accionFamiliaMenu svg {
    transition: all 0.5s ease;
}

.familiaMenu .nombreFamiliaMenu,
.subfamiliaMenuNivel2 .nombreFamiliaMenu {
    font-size: 20px;
    justify-self: start;
    line-height: 30px;
    font-family: "fuenteBold";
    text-align: left !important;
    width: 100%;
}

.subfamiliaMenu .nombreSubfamiliaMenu {
    justify-self: start;
    font-family: "fuenteMedium";
    font-size: 16px;
}

.shadowCajaSm {
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
}

hr.separadorMenu {
    border: 0 none #c4c4c4;
    border-top: 1px solid #c4c4c4;
    margin: 0 !important;
}

hr.separadorSubmenu {
    border: 0 none #c4c4c4;
    border-top: 1px solid #c4c4c4;
    margin: 0 16px !important;
}

#despegableSubfamilias hr.separadorSubmenu {
    margin: 0 !important;
}

.familiaMenuSeleccionada,
.subfamiliaMenuSeleccionada {
    background-color: #f8f8f8;
    box-shadow: 0px 4px 6px -3px rgb(0 0 0 / 7%);
    border-bottom: 0.5px solid #c4c4c4;
}

.contenedorElemAgrupacionFamilia {
    /*padding: 16px 20px;*/
    box-sizing: border-box;
}

#nombreAgrupacion .iconoFlechaMenu {
    height: 24px;
    width: 24px;
}

#nombreAgrupacion .iconoFlechaMenu use {
    width: 24px; /* Ajusta el valor según el tamaño deseado */
    height: 24px;
}

.iconoMasMenu {
    height: 25px;
    width: 25px;
}

#nombreAgrupacion {
    padding: 18px 23px;
    display: grid;
    gap: 4px;
    justify-content: start;
    align-items: center;
    grid-template-columns: 36px 1fr;
    height: 80px;
    box-sizing: border-box;

    border-bottom: 0.5px solid #c4c4c4;
}

#nombreAgrupacion.conBorde {
    border-top: 0.5px solid #c4c4c4;
}

#nombreAgrupacion.seleccionado {
    background-color: #f8f8f8;
    box-shadow: 0px 7px 8px -3px rgb(0 0 0 / 8%);
    transition: all 0.5s ease;
}

#nombreAgrupacion.nombreAgrupacionSubfamilia {
    grid-template-columns: 36px 1fr 24px;
}

#nombreAgrupacion span {
    font-size: 28px;
    font-family: "fuenteBold";
    justify-self: start;
}

.capaMesa {
    position: relative;
    width: 100%;
    padding: 24px 24px 24px 32px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.capa1 {
    position: absolute;
    width: 100%;
    padding: 24px 24px 24px 32px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.capa0 {
    width: 90px;
    height: 80px;
    position: absolute;
    right: 0;
    /* left: 236px; */
    z-index: 0;
}

/* Comprobar */
#contenedor {
    clear: both;
    height: 80px;
    position: relative;
    width: 100%;
}

.imagenSubfamiliaMenu {
    height: 66px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px;
}

.noMostrarAlergenoAgrupacion .informacionArticulo,
.noMostrarAlergenoAgrupacion .imagenArticulo,
.noMostrarAlergenoAgrupacion .imagenFichaArticulo,
.noMostrarAlergenoAgrupacion .nameContainerWithImage,
.noMostrarAlergenoAgrupacion .pieArticuloFicha,
.noMostrarArticuloAgotado .informacionArticulo,
.noMostrarArticuloAgotado .imagenArticulo,
.noMostrarArticuloAgotado .imagenFichaArticulo,
.noMostrarArticuloAgotado .nameContainerWithImage,
.noMostrarArticuloAgotado .pieArticuloFicha {
    filter: grayscale(100%);
}

#contenedorBuscadorAgrupacion {
    border-radius: 8px;
    border: 1px solid var(--colorSecundario);
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 20px;
    text-align: left;
    gap: 10px;
    transition: all 0.5s;
    overflow: hidden;
}

#contenedorBuscadorAgrupacion.oculto {
    height: 0;
    padding: 0;
    transition: all 0.9s;
    border: 1px solid transparent;
}

.ocultaBuscador {
    display: none;
    transition: all 0.1s;
    border: 1px solid transparent;
}

.muestraBuscador {
    display: block;
    transition: all 0.1s;
    border: 1px solid transparent;
}

#contenedorBuscadorAgrupacion svg {
    height: 20px;
    width: 25px;
}

#contenedorBuscadorAgrupacion.destacado {
    border: 2px solid var(--colorPositivo);
    /*transition: all 1.5s; */
    border-width: 2px;
    animation: border-color 1.5s linear 1 both;
}

#contenedorCabecera {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 9999;
}

.iconoCerrarBig {
    height: 35px;
    width: 35px;
}

.iconoCerrar {
    height: 28px;
    width: 28px;
}

.iconoCerrarSm {
    width: 22px;
    height: 22px;
}

.alergenoAgrupacion,
.contieneAlergeno,
.articuloNoDisponible {
    background-color: var(--colorNegativo);
    color: var(--colorTextoNegativo);
    font-family: "fuenteLight";
    padding: 0.5rem;
    border-radius: 25px;
    font-size: 12px;
    font-weight: bold;
    max-width: 100%;
    min-width: 100px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 7px;
}

.divPedidoLimitado {
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.puntoPedidoLimitado {
    width: 10px;
    height: 10px;
    border-radius: 50%; /* Hace que el borde sea un círculo */
    background-color: var(--colorNegativo);
    display: inline-block;
    margin-right: 6px;
}

.puntoPedidoLimitadoMensaje {
    width: 10px;
    height: 10px;
    border-radius: 50%; /* Hace que el borde sea un círculo */
    background-color: var(--colorNegativo);
    display: inline-block;
    margin-right: 5px;
    margin-left: 8px;
}

/* .numeroMaximoPlatos { 
    background-color: var(--colorNegativo);
    color: var(--colorTextoNegativo);
    font-family: "fuenteLight";
    padding: 0.5rem;
    border-radius: 25px;
    font-size: 12px;
    max-width: 100%;
    min-width: 130px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

} */

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

.no-scroll {
    overflow: hidden; /* Esto desactiva el scroll */
}

#dialogMostrarFichaConfirmar {
    padding: 1em 1em 0em 1em !important;
}

/* TABLAS DE LISTA DE CONFIRMACION */
/* Título fijo */
.tituloCesta {
    font-size: 26px;
    padding-top: 20px;
    padding-bottom: 16px;
    text-align: center;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 20;
    border-bottom: 1px solid var(--colorPrincipal);
}

.header {
    position: sticky;
    top: 60px; /* Ajustar según la altura del título */
    background-color: white;
    z-index: 10;
    font-weight: bold;
    padding: 10px 0;
    border-bottom: 1px solid var(--colorPrincipal);
    display: flex;
}

/* Lista de artículos con scroll oculto */
.tableArticulos {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.tableArticulos::-webkit-scrollbar {
    display: none;
}

#btnConfirmarPedido {
    padding: 0px;
    width: 100%;
    border-top: 1px solid var(--colorPrincipal);
    background: white;
    position: sticky;
    bottom: 0;
    left: 0;
}

.contenidoConfirmarPedido {
    height: 100%;
}

/* Ajustar el tamaño de las columnas */
.cantidadCesta {
    flex: 0.5;
    text-align: center;
}

.nombreCesta {
    flex: 3; /* Más espacio para la columna de nombre */
    text-align: left;
}

.precioCesta {
    flex: 1; /* Espacio moderado para la columna de precio */
    text-align: right; /* Alinear el precio a la derecha */
}

/* Encabezado fijo mientras se hace scroll */
.header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
    font-weight: bold;
    padding: 10px 0;
    border-bottom: 1px solid var(--colorPrincipal);
    display: flex;
}

/* Artículos */
.articuloConfirmar {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--colorClarito);
    padding: 10px 0;
}

/* Composiciones */
.composicionesCesta {
    padding-left: 10px;
    font-size: 0.9em;
}

/* Total del pedido */
.totalPedidoCesta {
    font-weight: bold;
    font-size: 1.5rem;
    padding: 5px 0;
    text-align: right;
    background-color: white;
    position: sticky;
    bottom: 60px;
    z-index: 5;
}

.contenedorPrincipalPedido {
    display: flex;
    flex-direction: row-reverse;
    width: 500px;
    height: 300px;
    border: 1px solid black;
}

.divAlergenosAgrupacion {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.divAlergenosAgrupacion.lista,
.divAlergenosAgrupacion.unArtLinea {
    justify-self: start;
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: row;
    justify-content: start;
}

.tarjetaArticulo hr {
    grid-row: 4;
}

#contenedorFiltrosAlergenos {
    padding: 0px 20px 20px;
    height: 100%;
    overflow-y: scroll;
    z-index: 99999999;
    /* z-index: 99999999999999999; */
    position: absolute;
    background: #fff;
    width: 100%;
    max-width: var(--MWMaxWidth);
    box-sizing: border-box;
    top: 0;
    left: 0;
}

.alergenoSvg {
    height: 34px;
    width: 34px;
}

.contenedorAlergeno {
    display: flex;
    justify-content: start;
    align-items: center;
}

.checkboxAlergeno {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
    height: 24px;
    width: 24px;
    border: 1.5px solid #424242;
    border-radius: 4px;
    pointer-events: none;
}

.checkboxAlergeno:checked::before {
    content: " \2713";
    height: 22.5px;
    width: 22.5px;
    position: relative;
    display: inline-block;
    font-size: 15px;
    text-align: center;
    background: #424242;
    color: #fff;
    top: -1px;
    font-weight: 600;
    left: -1px;
}

.checkboxAlergeno:checked::after {
    content: "";
    display: block;
    position: relative;
}

.checkboxAlergeno.checked::before {
    content: " \2713";
    height: 22.5px;
    width: 22.5px;
    position: relative;
    display: inline-block;
    font-size: 15px;
    text-align: center;
    background: #424242;
    color: #fff;
    top: -1px;
    font-weight: 600;
    left: -1px;
}

.checkboxAlergeno.checked::after {
    content: "";
    display: block;
    position: relative;
}

.svgCerrarSm {
    width: 24px;
    height: 24px;
}

.noScroll {
    position: fixed;
    right: 0px;
    top: 0px;
    bottom: 0px;
    max-width: 800px;
}

#despegableSubfamilias::-webkit-scrollbar,
#contenedorFiltrosAlergenos::-webkit-scrollbar {
    display: none;
}

.contenedorIconoSoloPedir {
    height: 34px !important;
    width: 40px !important;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(
        var(--redSecundario),
        var(--greenSecundario),
        var(--blueSecundario),
        15%
    );
}

.contenedorIconoSoloPedir svg {
    height: 20px;
    width: 25px;
}

#soloPedirFiltro.destacado {
    border: 2px solid var(--colorPositivo);
    border-radius: 8px;
    padding: 10px;
}

.slide-left {
    -webkit-animation: slide-left 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-left 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-left-articulos {
    -webkit-animation: slide-left-articulos 6s
        cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-left-articulos 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.height {
    animation: height 0.3s ease-in both;
}

.heightUp {
    animation: heightUp 0.3s ease-in both;
}
.slide-right {
    -webkit-animation: slide-right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: slide-right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.filterBlur {
    filter: blur(5px) grayscale(1);
    transition: all 1.5s;
}

#filtrosPedido.filterBlur {
    filter: none !important;
    box-shadow: none !important;
}

#articulos {
    z-index: -1;
}

.contenedorAgrupacionSeleccionado .familiaAgrupacion .capa1 {
    border-radius: 0;
}

.contenedorQR {
    max-width: 100%;
    padding: 1rem 1rem 0;
    box-sizing: border-box;
}

#reader {
    margin: 0 auto;
    border: none !important;
    border-radius: 10px !important;
    width: 100%;
}
#contenedorReader {
    box-sizing: border-box;
    max-width: var(--MWMaxWidthComponent);
    margin: 0 auto;
}

.enlaceModoBoton {
    padding: 4px 8px;
    border-radius: 10px;
    background-color: var(--colorEnlace) !important;
    color: var(--colorTextoEnlace) !important;
}

.contIcoIdioma {
    border: 2px solid #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
}

label {
    font-size: var(--font-size-label) !important;
}
#contenedorNombreLocal p {
    line-height: 32px;
}

#dialogPromo,
#dialogDescuento,
#dialogPedidoAutoservicio {
    max-width: var(--maxWidthDialogPromo) !important;
}

#dialogPedidoAutoservicio {
    height: 480px !important;
    overflow-y: hidden !important;
}

#numeroPedidoAutoservicioDialog {
    min-height: 106px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 150px;
}

.slide-top {
    -webkit-animation: slide-top 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) normal
        forwards;
    animation: slide-top 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) normal forwards;
    animation-fill-mode: forwards;
    left: 0;
}

.slide-bottom {
    -webkit-animation: slide-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        normal forwards;
    animation: slide-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) normal
        forwards;
    animation-fill-mode: forwards;
    left: 0;
}

.separador {
    padding-left: 50px;
}

@keyframes height {
    0% {
        height: 0;
    }

    100% {
        height: var(--heightDespegableSubfamilias);
    }
}

@keyframes heightUp {
    0% {
        height: var(--heightDespegableSubfamilias);
    }

    100% {
        height: 0;
    }
}

@keyframes pulsate-fwd {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes mostrar {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes ocultar {
    from,
    to {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    75% {
        opacity: 0.75;
    }
    100% {
        opacity: 0;
    }
}

@keyframes ocultar {
    100% {
        opacity: 0;
    }
}

@keyframes mostrar {
    100% {
        opacity: 1;
    }
}

@-moz-keyframes shine {
    100% {
        left: 200%;
    }
}

@-webkit-keyframes shine {
    100% {
        left: 200%;
    }
}

@-o-keyframes shine {
    100% {
        left: 200%;
    }
}

@keyframes shine {
    100% {
        left: 200%;
    }
}

@keyframes border-color {
    0% {
        border-color: var(--colorSecundario);
    }
    100% {
        border-color: var(--colorPositivo);
    }
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1200px);
        transform: translateX(1200px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1200px);
        transform: translateX(1200px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(var(--slideLeftArticulos));
        transform: translateX(var(--slideLeftArticulos));
    }
}

@keyframes slide-left-articulos {
    0% {
        -webkit-transform: translateX(-100);
        transform: translateX(-100);
    }

    100% {
        -webkit-transform: translateX(var(--slideLeftArticulos));
        transform: translateX(var(--slideLeftArticulos));
        display: block;
    }
}

@keyframes slide-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 0;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(800px);
        transform: translateX(800px);
    }
}

.scale-in-ver-top {
    -webkit-animation: scale-in-ver-top 0.7s linear both;
    animation: scale-in-ver-top 0.7s linear both;
}

@-webkit-keyframes scale-in-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}
@keyframes scale-in-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-var(--snackbarH));
        transform: translateY(-var(--snackbarH));
    }
}
@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(var(--snackbarB));
        transform: translateY(var(--snackbarB));
    }
}

@-webkit-keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(var(--snackbarH));
        transform: translateY(var(--snackbarH));
    }
}
@keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(var(--snackbarH));
        transform: translateY(var(--snackbarH));
    }
}