* {
    transition: all ease-in 0.15s;
}

.quitarPantalla {
    left: -100%;
}

.devolverPantalla {
    left: 0px;
}

body {
    padding: 0px;
    margin: 0px;
    font-family: 'Montserrat';
    color: var(--fuente1);
    background: #f7f7f7;
    background: linear-gradient(1deg, rgba(247, 247, 247, 1) 1%, rgba(232, 232, 232, 1) 65%, rgba(255, 255, 255, 1) 100%);
}

#numerito {

    background-color: yellow;

    color: var(--fuente1);

    padding: 3px;

    text-align: center;

    min-width: 24px;

    border-radius: 15px;

}

a {

    text-decoration: none;

}

.superCenter {

    justify-content: center;

    align-items: center;

    align-content: center;

}

.center {

    justify-content: center;

}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

#portada {
    width: calc(100%);
    aspect-ratio: 16/9;
    display: flex;
    justify-content: center;
    align-content: center;
    background: rgba(0, 0, 0, 0.25);
    background-position: 10% 12%;
    flex-wrap: wrap;
    row-gap: 10px;
    position: relative;
}

.foto-resto {
    position: absolute;
    width: 25%;
    object-fit: contain;
    left: calc(50%);
    top: calc(50%);
    transform: translate(-50%, -50%);
}

#portada .banner {
    width: 100%;
    height: 100%;
}

#main {

    width: calc(100%);
    position: absolute;
    height: auto;
    display: flex;
    justify-content: center;
    padding: 5px;
    column-gap: 10px;
    row-gap: 10px;

}

:root {

    --fuente1: black;
    --fuente2: white;
    --fuente3: #333;
    --fondoItem: #fafafa;
    --fondoBotones: #af1c1c;
    --fondoPrincipal: rgb(41, 41, 41);
    --fondoSuccess: #46df8b;

}

.boton {

    width: 180px;

    padding: 10px;

    text-align: center;

    font-weight: bold;

    font-size: 10pt;

    border: none;

    border-radius: 4px;

}

.accion {
    background: var(--fondoBotones);
    color: var(--fuente2);
}

.accion:hover {

    background-color: orange;

}

.navFast.activo {
    background-color: #198754;
    color: white;
    font-weight: bold;
}

.navFast {
    background-color: var(--fondoBotones);
    color: var(--fuente2);
}

.botonImagen {
    width: 180px;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 10pt;
    border: none;
    border-radius: 4px;
    display: flex;
    column-gap: 10px;
    align-content: center;
    align-items: center;
}

.botonImagen:disabled {
    background-color: grey;
}

.botonImagenS {

    width: 120px;

    padding: 10px;

    text-align: center;

    font-weight: bold;

    font-size: 10pt;

    border: none;

    border-radius: 4px;

    display: flex;

    column-gap: 10px;

    align-content: center;

    align-items: center;

}

.botonIcon {

    padding: 10px;

    text-align: center;

    font-weight: bold;

    font-size: 10pt;

    border: none;

    border-radius: 4px;

    display: flex;

    flex-wrap: wrap;

    column-gap: 10px;

    align-content: center;

    align-items: center;

}

.selector-monedas {
    position: fixed;
    left: max(10px, env(safe-area-inset-left));
    bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 3px;
}
.selector-moneda {
    background: var(--fondoBotones, #b91c1c);
    color: white;
    border: 2px solid transparent;
    border-radius: 8px;
    min-width: 44px;
    min-height: 38px;
    padding: 6px 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 2px 6px #0003;
    cursor: pointer;
}
.selector-moneda.seleccionada { border-color: #d4af37; }
.selector-moneda:hover { filter: brightness(1.1); }
.selector-moneda:focus-visible { outline: 2px solid #d4af37; outline-offset: 2px; }
.selector-moneda:disabled { opacity: .65; cursor: wait; }

h4 {

    font-size: 12pt;

}

h2 {

    font-size: 16pt;

}

.botonImagenXS {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 10pt;
    border: none;
    border-radius: 4px;
    display: flex;
    column-gap: 10px;
    align-content: center;
    align-items: center;

}

.icon {

    width: 32px;

}

.invertIcon .icon {

    filter: invert(100%);

}

.flotante {

    position: fixed;

    top: 100%;

    left: 50%;

    transform: translate(-50%, calc(-100% - 10px));

    z-index: 3000;

}

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}

input[type=number] {

    -moz-appearance: textfield;

}

.inputNumber {

    display: flex;

    width: 90px;

    height: 32px;

}

.inputNumber input {

    width: 38% !important;

    padding: 0px !important;

}

.inputNumber .more,

.inputNumber .less {
    width: 30%;
    text-align: center;
    background-color: var(--fondoBotones);
    border: none;
    color: white;
}

.modal-title {
    color: white;
}

.cartel {
    max-width: 100%;
    left: 0px;
    top: 0px;
    padding: 10px;
    color: white;
    background-color: var(--fondoPrincipal);
}

@media only screen and (min-width: 1080px) {
    body {

        background-size: cover;
        background-attachment: local;
    }
}