:root {
    --back01: #FFE788;
    --back02: #FFF4C1;
    --back03: #FFF;
    --back04: #000;
    --back05: #ece3be;

    --backRGBA01: rgba(255, 244, 193, 0.4);

    --text01: #000;
    --text02: #FFF;
    --text03: #000;

    --border01: #FFE788;
    --border02: #000;
    --border03: #FFF;
}

.navbar-color {
    color: var(--text01);
    background-color: #fcf6e8;
}

.marked {
    border-color: #e7a325;
    background-color: #e7a325;
    border-radius: 10px;
}

.full-border-color {
    border-color: var(--border01);
}

.subtitulo-color {
    color: var(--text03);
}

.btn-primario {
    background-color: var(--back01);
    color: var(--text01);
}

.btn-primario:hover {
    background-color: var(--back01);
    color: var(--text01);
}

.btn-primario-disabled {
    background-color: var(--back05);
    color: var(--text01);
}

.btn-primario-alt {
    background-color: var(--back04);
    color: var(--text02);
}

.btn-primario-alt:hover {
    background-color: var(--back04);
    color: var(--text02);
}

.btn-secundario-fondo {
    color: var(--text01);
    border: 1px solid;
    border-color: var(--border02);
    background-color: unset;
}

.btn-secundario-fondo:hover {
    color: var(--text01);
    border: 1px solid;
    border-color: var(--border02);
    background-color: rgba(255, 255, 255, 0.15);
}

.btn-secundario {
    color: var(--text01);
    border: 1px solid;
    border-color: var(--border02);
    background-color: unset;
}

.btn-cancelar {
    color: var(--text01);
}

/*Con fondo de color*/
.btn-cancelar-fondo {
    color: var(--text01);
}

.btn-cancelar-fondo:hover {
    color: var(--text01);
}

.btn-color {
    border: 1px solid;
    border-color: var(--border02);
    color: var(--text03);
}

.sucursal-seleccion-listado-item:focus {
    border-radius: 2px;
    border: 2px solid;
    border-color: var(--border01);
    background-color: #fff8d9;
    outline: none;
}

#mensaje-wifi-copiado {
    background-color: var(--back01);
    color: var(--text01);
}

.product-shopping-basket-number {
    background-color: var(--back01);
    color: var(--text01);
}

.product-shopping-basket-plus {
    background-color: #ededed;
    color: var(--text01);
}

.mensaje-modal-cuerpo-step-number {
    background-color: var(--back01);
    color: var(--text01);
}

.item-seleccionado {
    background-color: var(--back02);
}

.footer-subtotal-color {
    background-color: var(--back01);
    color: var(--text01);
}

/* Slider */
input:checked+.slider {
    background-color: var(--back04);
}

/* mensaje popup */
.mensaje-aviso {
    background-color: var(--back02);
    color: var(--text03);
}

.mensaje-modal-detalle-producto-imagen-background {
    background: var(--back01);
}

#modal-loader-cargando-pedido-llenado {
    background: var(--back01);
}

/* Fidelizacion inicio */
.body-color {
    background-color: var(--back03);
}

.login-color {
    background-color: var(--backRGBA01);
}

#widget-puntos {
    background-color: var(--back02);
}

.loader {
    background: linear-gradient(to right, var(--text01), rgba(255, 255, 255, 0) 42%);
}

.loader:before {
    background: var(--text01);
}

.loader:after {
    background: var(--back01);
}

.input-password-mostrar {
    color: var(--back04);
}

/* Fidelizacion fin */

/* Imagenes personalizadas */
#modal-onboarding-pedidos .mensaje-modal {
    background: url(../images/lafontedoro-bg-mostrar-onboarding-pedidos.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    max-width: 320px;
    text-align: center;
}

#modal-onboarding-staff .mensaje-modal {
    background: url(../images/lafontedoro-bg-mostrar-onboarding-pedidos.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    max-width: 320px;
}

.popup {
    position: fixed;
    display: flex;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    min-width: 300px;
    min-height: 200px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}

.popup-inner {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popup-inner p {
    text-align: center;
    font-size: 15px;
}

.popup-inner-tittle {
    font-size: 22px !important;
    font-weight: 600;
    color: #818181;
}

.cerrar-popup {
    background-color: transparent;
    color: #779faa;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 15%;
    left: 75%;
    right: 0;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.info-icon {
    color: #4b4b4b;
    padding: 8px;
}