@font-face{
    font-family:"qanelas-bold";
    src:url("fonts/Qanelas-Bold.otf") format("woff"),
    url("fonts/Qanelas-Bold.otf") format("opentype"),
    url("fonts/Qanelas-Bold.otf") format("truetype");
}
@font-face{
    font-family:"qanelas-light";
    src:url("fonts/Qanelas-Light.otf") format("woff"),
    url("fonts/Qanelas-Light.otf") format("opentype"),
    url("fonts/Qanelas-Light.otf") format("truetype");
}
@font-face{
    font-family:"qanelas-medium";
    src:url("fonts/Qanelas-Medium.otf") format("woff"),
    url("fonts/Qanelas-Medium.otf") format("opentype"),
    url("fonts/Qanelas-Medium.otf") format("truetype");
}
@font-face{
    font-family:"helvetica-bold";
    src:url("fonts/HelveticaNeueBold.ttf") format("woff"),
    url("fonts/HelveticaNeueBold.ttf") format("opentype"),
    url("fonts/HelveticaNeueBold.ttf") format("truetype");
}
@font-face{
    font-family:"helvetica-light";
    src:url("fonts/HelveticaNeue-Light.otf") format("woff"),
    url("fonts/HelveticaNeue-Light.otf") format("opentype"),
    url("fonts/HelveticaNeue-Light.otf") format("truetype");
}
@font-face{
    font-family:"helvetica-medium";
    src:url("fonts/HelveticaNeue-Medium.otf") format("woff"),
    url("fonts/HelveticaNeue-Medium.otf") format("opentype"),
    url("fonts/HelveticaNeue-Medium.otf") format("truetype");
}

body{
    font-family: 'helvetica-light', sans-serif;
    height: 100vh;
}
:root {
    --color-blanco: #FFFFFF;
    --color-gris-light: #707070;
    --color-gris-dark: #363636;
    --color-salmon: #FE5B67;
    --color-amarillo: #FFE150;
    --color-verde: #95C12B;
}

h2{
    font-family: 'qanelas-medium';
}
.text-right{text-align: right !important;}
.text-left{text-align: left !important;}
.front{grid-template-rows: 186px 40px auto 54px;}
.front-producto{grid-template-rows: 285px 40px auto 54px;}
.front-perfil{grid-template-rows: 186px auto 54px;}
.front, .front-producto, .front-perfil
{
    max-width: 500px;  
    background-color: #FAFAFA; 
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: auto ;
}
.content-cabezal {
    width: 100%;
}
.content-filtro{
    width: 100%;
    background-color: #fff;
}
.content-categorias{
    width: 100%;
    padding:20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    overflow-y: auto;
}
.content-perfil, .content-espera, .content-estado{
    width: 100%;
    padding:20px;
    overflow-y: auto;
}
.content-perfil i{font-size: 1.6em !important;}
.content-perfil form label {
    font-family: 'helvetica-bold';
}
.content-perfil p{
font-size: 1.4em;
}
.h186{height: 186px;}
.h285{height: 285px;}
.cabezal{
    width: 100%;
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}
.cabezal .top {
    top: 0;
    position: absolute;
    width: 100%;
    height: 60px;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
    z-index:1;
}
.cabezal .bottom {
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 60px;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
    z-index:1;
}
.cabezal .nombre {
    position: absolute;
    right: 15px;
    top:15px;
    font-family: 'helvetica-medium', sans-serif;
    color: #fff;
    font-size: 24px;
    z-index: 10;
}
.cabezal .volver {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    z-index: 10;
    font-size: 2.2rem;
}
.cabezal .iso{
    position: absolute;
    right: 15px;
    bottom:15px;
    width: 60px;
    height: 30px;
    z-index: 10;
}
.cabezal .precio{
    position: absolute;
    right: 15px;
    bottom:15px;
    z-index: 10;
    color: #fff;
    font-size: 2rem;
}
.cabezal .mesa{
    color: #fff;
    font-family: 'helvetica-light', sans-serif;
    font-size: 28px;
    position: absolute;
    left: 15px;
    bottom:15px;
    z-index: 10;
}
.cabezal .mesa b{
    font-family: 'helvetica-medium', sans-serif;
}

.categoria{
    min-width: 100%;
}
.categoria .imagen{
    position: relative;
    width: 100%;
    height: 110px;
    border-radius: 14px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}
.categoria h2{
    color: #FE5B67 !important;
    font-size: 18px;
}

.filtro{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: right;
}
.filtro img{
    
    margin: 3px;
    width: 30px;
    height: auto;
}
.filtro button{
    color: #fff;
    font-size: 12px;
    font-family: 'qanelas-bold', sans-serif;
    background-color: #363636;
    border-radius: 40px;
    border: none;
    margin: 3px 20px 3px 10px;
    padding: 6px 15px;
}
.menu-user {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 70px;
   z-index: 100;
}
.menu-user nav
{
    position: relative;
    min-width: 350px;
    min-height: 80px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-radius: 10px;
    padding: 0 15px;
    background: #000;
    box-shadow:
    0 -5px 5.3px rgba(0, 0, 0, 0.12),
    0 22.3px 17.9px rgba(0, 0, 0, 0.08),
    0 100px 80px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    color: #fff;
}
.menu-user nav ul
{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0;
}
.menu-user nav ul li
{
    list-style: none;
}
.menu-user nav ul li a
{
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: 20px;
}

.menu-user nav ul li a i
{
    color: #fff;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    transition: opacity 100ms ease;

}
.menu-user nav ul li a.active i
{
    opacity: 1;
}


.menu-user nav .tubelight
{
    position: absolute;
    left: 0px;
    top: 0px;
    transform: translateX(-50%);
    width: 45px;
    height: 5px;
    border-radius: 5px;
    background: #fff;
    transition: left 400ms ease;
    z-index: 10;
}
.menu-user nav .light-ray
{
    position: absolute;
    left: -30%;
    top: 5px;
    width: 160%;
    height: 80px;
    background: linear-gradient(to bottom,
    rgba(255,255,255,0.3) -50%,
    rgba(255,255,255, 0) 90%);
    clip-path: polygon(5% 100%, 25% 0px, 75% 0px ,95% 100%);
    pointer-events: none;
}
.lni {
    font-size:1.1em !important;
}
.modal-content{
    background-color: #FFE150;
    border: none;
}
.modal-header, .modal-footer{
    border: none;
}
.filtroS{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap:10px;
}
.filtroS h2{
    line-height: 1.1em;
}
.filtroS .descripcion{ font-size: 1.2rem;}
.filtroS .opcion {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.filtroS .opcion .icono img{ width: 45px;}
.filtroS .opcion .contenido{ 
    width: 200px;
    text-align: left; 
    font-size: 1.2rem;
    line-height: 45px;
    margin-left: 10px;
}

.filtroS .opcion .check{ 
    display: flex;
    align-items: center; }

.btn-principal{
    width: 80%;
    padding: 8px;
    border: none;
    border-radius: 50px;
    display: block;
    font-size: 1.2em;
    margin: 30px auto;
    font-family: 'qanelas-bold';
    color: #FAFAFA;
    background-color: #FE5B67;
}
/* la cuenta */
  #lacuenta {
    max-width: 380px;
    margin: auto;
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    transition: transform 1.8s cubic-bezier(.65,0,.35,1);
    transform: translateY(100%);
  }
  #lacuenta::before{
    position: absolute;
    z-index: 100;
    top: -25px;
    left: 0;
    right: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    content: "";
    background-image: url('../img/Iconos/wallet.svg');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    
    background-color: #363636;
    border-radius: 50%;
    border: 2px solid #FE5B67;
  }
  #lacuenta.show {
    transform: translateY(60px);
    bottom: 60px;
  }
  #lacuenta.hide {
    bottom: 60px;
    transform: translateY(100%);
    transition: transform 1.8s cubic-bezier(.65,0,.35,1);
  }
/* step-1 */
  #lacuenta ul{
    width: 100%;
    list-style-type: none;
    padding: 0;
  }
  #lacuenta ul li{  margin-bottom: 4px;}
  #lacuenta i{
    transition: transform 0.3s ease;
  }
  #lacuenta i.lni-chevron-down {
    transform: rotate(360deg);
  }
  #lacuenta .detalle{ padding: 15px;  }
  #lacuenta .items {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #6C6A6A;
    padding-bottom: 3px;
    margin-bottom: 4px;
  }
  #lacuenta .item {font-family: 'helvetica-bold', sans-serif;}
  #lacuenta .cant {font-family: 'helvetica-light', sans-serif; font-size: .8rem; line-height: 1rem;}
  #lacuenta .subTotal, #lacuenta .total {
    display: flex;
    justify-content: space-between;
    font-family: 'helvetica-bold', sans-serif;
    font-size: 1.3rem;
  }
  #lacuenta .total {padding: 0 15px;}
  #lacuenta .pagar {
    display: flex;
    justify-content:right;
  }

#lacuenta .content{
    position: relative;
    border-radius: 10px;
    background-color: #363636;
    color: #fff;
    height: calc(100vh - 70px);
    width: 100%;
  }

#lacuenta .step {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
  #lacuenta .step-1, #lacuenta .step-2, #lacuenta .step-3a,#lacuenta .step-3b{
    padding: 40px 15px 80px 15px;
    overflow-y: auto;
  }
  #lacuenta .step-1 {
    z-index: 94;
    transform: translateX(0);
    opacity: 1;
  }
  
  #lacuenta .step-2 {
 
    z-index: 93;
    transform: translateX(100%);
  }
  
  #lacuenta .step-3a {
    
    z-index: 92;
    transform: translateX(200%);
  }
  
  #lacuenta .step-3b {
   
    z-index: 91;
    transform: translateX(200%);
  }
  .show-step {
    transform: translateX(0);
    opacity: 1;
  }
  
  .hide-step {
    transform: translateX(-100%);
  }

.step-2 .radioSelect{
    display: grid;
    gap:5px;
}
.step-2 .detalle{width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.step-2 .detalle .ftotal{ font-family: 'helvetica-bold', sans-serif; font-size: 1.2rem;}
.radioSelect input[type="radio"]{display: none;}


.radioSelect label{
    display: flex;
    justify-content: space-between;
    font-family: 'qanelas-medium';
    color: #8c8c8c;
    width: 100%;
    background-color: #FFFFFF;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.radioSelect input[type="radio"]:checked + label{
    color:  #FFFFFF;
    background-color:#FE5B67;
}
.radioSelect input[type="radio"]:checked + label:after{
    content: "";
    background-image: url('../img/Iconos/check-mark.svg');
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    height: 24px;
}

#lacuenta .aviso-camarero, #lacuenta .aviso-pago-exitoso{
    width: 90%;
    padding: 20px;
    text-align: center;
    margin: auto;
    border-radius: 10px;
  }
    #lacuenta .aviso-camarero p, #lacuenta .aviso-pago-exitoso p{
        font-family: 'qanelas-light', sans-serif;
        font-size: 1.2rem;
        }
    #lacuenta .aviso-camarero h1, #lacuenta .aviso-pago-exitoso h1{
        font-family: 'qanelas-bold', sans-serif;
        font-size: 2rem;
        }
#lacuenta .aviso-camarero{background-color: #FFE150;  color: #363636;}      
#lacuenta .aviso-pago-exitoso{background-color: #95C128;  color: #FFFFFF;}
/* termina la cuenta */

.content-producto .filtros{
 height: 40px;
}
.content-producto h1{
    font-family: 'qanelas-bold', sans-serif;
    color: #686868;
    font-size: 1.3rem;
}
.content-producto .opciones::before{
    content:"";
    margin-top: 10px;
    margin-bottom: 10px;
    height:24px ;
    width: 100%;
    display: block;
    background-image: linear-gradient(rgb(226, 226, 226), rgba(226, 226, 226, 0));
}
.content-producto .personalizables {
    padding: 0 10px 30px 10px;
}
.personalizables ul{margin: 0; padding: 0;}
.personalizables ul li{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5px;
    line-height: 1rem;
}
.personalizables ul li .nombre{ 
    text-align: left;
    font-family: 'helvetica-bold';
    padding-left: 10px;
}
.personalizables ul li strong{
    font-family: 'helvetica-bold';
    color: #8c8c8c;
}

.falta, .noFalta{
    padding: 5px 10px;
    border-radius: 50px;
    color: #FFFFFF;
    display: block;
    width: 100%;
    text-align: center;
}
.falta{background-color: #FE5B67;}
.noFalta{background-color: #95C929;}

.content-subcategorias, .content-producto{
    width: 100%;
    padding:20px;
    overflow-y: auto;
}
.content-subcategorias h1{
    font-family: 'qanelas-medium', sans-serif;
    color: #FE5B67;
}
.content-subcategorias .subcategorias{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.content-subcategorias nav
{
    position: relative;
    width: 100%;
    overflow: hidden;
}
.content-subcategorias nav ul
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0;
    padding: 0;
}
.content-subcategorias nav ul li {list-style: none;}
.content-subcategorias nav ul li a
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 28px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'qanelas-bold', sans-serif;
    color: #fff;
    background-color: #363636;
    transition: background-color 0.3s ease;
    border-radius: 40px;
    text-decoration: none;
}
.content-subcategorias nav ul li a.active{
    background-color: #FE5B67;
}
.subcategorias {padding: 18px 0;}
.subcategorias .item {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    padding: 8px;
    border-radius: 14px;
    cursor: pointer;
}
.subcategorias .item::after{
    content: '';
    background-image: url('../img/item-mas-icon.png');
    background-repeat: no-repeat;
    background-position: center center;
    height: 33px;
    width: 33px;
    position: absolute;
    display: block;
    bottom:0px;
    right: 0px;
}
.subcategorias .item .imagen{
    position: relative;
    width: 100%;
    height: 86px;
    border-radius: 14px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}
.subcategorias .item h2{
    font-size: 1rem;
    line-height: 1.1rem;
    color:  #686868 ;
}
.subcategorias .item .descripcion{
    display: flex;
    flex-direction: column;
    justify-content: start;
    font-size: .8rem;
    line-height: 1rem;
    height: 38%;
    color:  #7b7b7b ;
}
.subcategorias .item .precio{
    font-size: 1.5rem;
}

.form-check-input:checked {
   background-color: var(--color-verde);
   border-color: var(--color-verde);
}
.form-check-input {
    height: 1.4em;
}
.form-switch .form-check-input {
    width: 2.4em;
}

  .amarillo{color: #FFE150 !important;}
  .gris-dark {color: #363636 !important;}
  .salmon{color: #FE5B67 !important;}

  .input-group-text {
    padding: .75rem;
  }
  /* seguimiento pedido */

.pedido-estado table {
    padding: 0 20px;
}

.pedido-estado {
    font-size: 14px;
    color: #363636;
    font-weight: 400;
    text-align: left;
    padding-top:10px;
}
.pedido-estado p{
    margin: 0;
}

.pedido-estado small {
    font-weight: 400;
}

.pedido-estado .estado {
    display: block;
    width: 34px;
    height: 38px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.pedido-estado .e1 {
    background-image: url("../img/dely_state-1.svg");
}

.pedido-estado .e2 {
    background-image: url("../img/dely_state-2.svg");
}

.pedido-estado .e3 {
    background-image: url("../img/dely_state-3.svg");
}

.pedido-estado .e4 {
    background-image: url("../img/dely_state-4.svg");
}

.pedido-estado .linea {
    margin: 0 20px;
    display: block;
    width: 15px;
    height: 48px;
    background-repeat: no-repeat;
    background-size: 15px;
}

.pedido-estado .posicion1 {
    background-position: top center;
}

.pedido-estado .posicion2, .pedido-estado .posicion3 {
    background-position: center center;
}

.pedido-estado .posicion4 {
    background-position: bottom center;
}

.pedido-estado .lineaPrendida {
    background-image: url("../img/line_state-2.svg");
}

.pedido-estado .lineaApagada {
    background-image: url("../img/line_state-1.svg");
}

.pedido-estado .prendido {
    opacity: 1;
    font-weight: 600;
}

.pedido-estado .apagado {
    opacity: 0.2;
}

.pedido-estado .bg {
    background-color: #fff;
}
.pedido-estado .detalle{
    margin-top: 20px;
    padding: 10px;
    width: 100%;
    border-radius: 30px;
    background-color: #FFFFFF;
}
.ocultar {
    display: none;
}

.mostrar {
    display: block;
}