/* INICIO bloques */

/*.box {
    background-color: #FFFFFF;
    color: #4CC2F1;
    border-radius: 10px;
    padding: 20px 20px 10px 20px;
    font-family: 'Roboto', MS Verdana, sans-serif;
    font-weight: normal;
    font-size: 110%;
    margin-bottom: 1px;
}

.boxcenter {
    display:flex; 
    justify-content:space-evenly; 
    align-items:center
}
*/
/* Home 1 col */
/*.wrapperH {
    width: 95%;
    margin: 0px 20px 0px 20px;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: [col] 95%;
    grid-template-rows: [row] auto;
    background-color: #03A9F5;
    color: #FFFFFF;
    justify-content: center;
    display: inline-block;
    text-align: center;
}*/
/*.boxhome {*/
/*    background-color: #FFFFFF;*/
    /*margin: 0px 35px 0px 35px;
    color: #03A9F5;
    border-radius: 10px;
    padding: 5px 5px 5px 5px;
    font-family: 'Roboto', MS Verdana, sans-serif;
    font-weight: normal;
    font-size: 110%;
    margin-bottom: 1px;
    justify-content: center;
    display: inline-block;
    text-align: center;
}*/
/*.home {
    grid-column: col;
    grid-row: row;*/
/*}*/


/* 3 columnas  ManProductos, Default*/
/*.wrapper3C {
    width: 95%;
    margin: 0px 20px 0px 20px;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: [col] 33% [col] 33% [col] 33%;
    grid-template-rows: [row] auto [row] auto [row] auto;
    background-color: #03A9F5;
    color: #FFFFFF;
    justify-content: center;
}*/

/* INICIO Devolver */
/*.deva {
    grid-column: col ;
    grid-row: row ;
}

.devb {
    grid-column: col 2 ;
    grid-row: row;
}

.devc {
    grid-column: col 3;
    grid-row: row  ;
}

.devd {
    grid-column: col / span 2;
    grid-row: row 2 ;
}

.deve {
    grid-column: col 3 ;
    grid-row: row 2;
}

.devf {
    grid-column: col / span 3;
    grid-row: row 3 ;
}

.devg {
    grid-column: col ;
    grid-row: row 4;
}

.devh {
    grid-column: col 2 / span 2 ;
    grid-row: row 4;
}*/
/* FIN */

/* INICIO Default */
/*.defa {
    grid-column: col / span 2;
    grid-row: row;
}

.defb {
    grid-column: col 3;
    grid-row: row / span 2;
}

.defc {
    grid-column: col / span 2;
    grid-row: row 2;
}*/
/* FIN */

/* INICIO ManClientes, ManProveedores, ManUsuarios, */
/*.mana {
    grid-column: col;
    grid-row: row;
}

.manb {
    grid-column: col 2;
    grid-row: row;
}

.manc {
    grid-column: col 3;
    grid-row: row / span 2;
}

.mand {
    grid-column: col / span 2;
    grid-row: row 2;
}*/
/* FIN */

/* INICIO CambiaClave, */
/*.mane {
    grid-column: col 2;
    grid-row: row 2;
}*/
/* FIN */

/* INICIO Pagar */
/*.paga {
    grid-column: col;
    grid-row: row;
}

.pagb {
    grid-column: col 2;
    grid-row: row;
}

.pagc {
    grid-column: col 3;
    grid-row: row / span 2;
}

.pagd {
    grid-column: col / span 2;
    grid-row: row 2;
}

.page {
    grid-column: col / span 3;
    grid-row: row 3;
}*/
/* FIN */

/* 4 columnas */
/*.wrapper4C {
    width: 95%;
    margin: auto;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;
    grid-template-rows: [row] auto [row] auto [row] auto [row] auto;
    background-color: #03A9F5;
    color: #FFFFFF;
    justify-content: center;
}*/

/* INICIO PAGAR 4 COL */
/*.pagara {
    grid-column: col ;
    grid-row: row;
}
.pagarb {
    grid-column: col 2;
    grid-row: row;
}
.pagarc {
    grid-column: col 3;
    grid-row: row;
}
.pagard {
    grid-column: col 4;
    grid-row: row / span 2;
}
.pagare {
    grid-column: col / span 3;
    grid-row: row 2;
}
.pagarf {
    grid-column: col / span 4;
    grid-row: row 3;
}*/

/* INICIO ManProductos */
/*.a1 {
    grid-column: col / span 2;
    grid-row: row ;
}

.b1 {
    grid-column: col 3 / span 2;
    grid-row: row;
}

.c1 {
    grid-column: col;
    grid-row: row 2;
}

.d1 {
    grid-column: col 2;
    grid-row: row 2;
}
.e1 {
    grid-column: col 3;
    grid-row: row 2;
}
.f1 {
    grid-column: col 4;
    grid-row: row 2;
}*//* FIN */

/* INICIO Reportes */
/*.repa {
    grid-column: col / span 2;
    grid-row: row ;
}
.repb {
    grid-column: col 3 / span 2;
    grid-row: row;
}
.repc {
    grid-column: col / span 2;
    grid-row: row 2;
}
.repd {
    grid-column: col 3 / span 2;
    grid-row: row 2;
}
.repe {
    grid-column: col / span 2;
    grid-row: row 3;
}
.repf {
    grid-column: col 3/ span 2;
    grid-row: row 3;
}
.repg {
    grid-column: col / span 2;
    grid-row: row 4;
}
.reph {
    grid-column: col 3/ span 2;
    grid-row: row 4;
}

.repc1 {
    grid-column: col / span 2;
    grid-row: row 2 / end;
}*/

    /* INICIO Apertura, ManCategoría */
/*.a2 {
    grid-column: col 2 ;
    grid-row: row;
}

.b2 {
    grid-column: col 3 ;
    grid-row: row ;
}

.c2 {
    grid-column: col 2 / span 2;
    grid-row: row 2;
}*/
/* FIN */

/* INICIO Productos, Clientes, Categorías, Proveedores, Usuarios, ConsultaDevolucion, Logs */
/*.lista2 {
    grid-column: col / span 2;
    grid-row: row;
}

.listb2 {
    grid-column: col 3 / span 2;
    grid-row: row;
}

.listc2 {
    grid-column: col / span 4;
    grid-row: row 2;
}*/
/* FIN */

/* INICIO Pedidos, EstadoComprobantes, Devolucion */
/*.lista {
    grid-column: col / span 2;
    grid-row: row;
}

.Listb {
    grid-column: col 3;
    grid-row: row;
}

.listc {
    grid-column: col 4;
    grid-row: row ;
}

.listd {
    grid-column: col / span 4;
    grid-row: row 2;
}*/

/* INICIO Vender -------------------------- */
/*.vendera {
    grid-column: col ;
    grid-row: row;
}

.venderb {
    grid-column: col 2;
    grid-row: row;
}

.venderc {
    grid-column: col 3;
    grid-row: row;
}
.venderd {
    grid-column: col 4;
    grid-row: row;
}
.venderg {
    grid-column: col 3/ span 2;
    grid-row: row 3;
}*/
/* FIN */
/* 5 columnas */
/*.wrapper5C {
    width: 95%;
    margin: auto;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: [col] 20% [col] 20% [col] 20% [col] 20% [col] 20%;
    grid-template-rows: [row] auto [row] auto [row] auto;
    background-color: #03A9F5;
    color: #FFFFFF;
    justify-content: center;
}*/

/* INICIO Ventas, Estadocomprobantes */
/*.vena {
    grid-column: col / span 2;
    grid-row: row;
}

.venb {
    grid-column: col 3 / span 2;
    grid-row: row;
}

.venc {
    grid-column: col 5;
    grid-row: row;
}

.vend {
    grid-column: col / span 2;
    grid-row: row 2 / end ;
}

.vene {
    grid-column: col 3 / span 3;
    grid-row: row 2;
}

.venf {
    grid-column: col 3 / span 3;
    grid-row: row 3;
}
 
.veng {
    grid-column: col / span 5;
    grid-row: row 2;
}*/
/* FIN */

/*.venth {
    grid-column: col 3 / span 3;
    grid-row: row 3;
}*/

/* Personalización */
.textbox {
    width: 100%;
    height: 40px;
    padding: 7px 10px 7px 10px;
    margin:  0px 0px 5px 0px;
    border-radius: 10px;
    border: 0;
    background-color: #EEEEEE;
    font-family: 'Roboto', sans-serif;
    font-size: 100%;
    font-weight: normal;
    color: #808080;
}

    .textbox.total {
        font-size: 100%;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #03A9F5;
    }

.titulo {
    margin-top: -25px;
    font-family: 'Roboto', MS Verdana, sans-serif;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 140%;
    text-align: center
}

/*.subtitulo {
    font-family: 'Roboto', MS Verdana, sans-serif;
    color: #808080;
    font-weight: bold;
    font-size: 130%;
    text-align: center
}

.uptexto {
    font-family: 'Roboto', MS Verdana, sans-serif;
    color: #0000FF;
    font-weight: bold;
    font-size: 110%;
    text-align: center
}*/

/*.etiqueta {
    font-family: 'Roboto', MS Verdana, sans-serif;
    color: #03A9F5;
    font-weight: normal;
    font-size: 105%;
    margin-bottom: 1px;
}*/

.retiqueta {
    font-family: 'Roboto', MS Verdana, sans-serif;
    color: #03A9F5;
    font-weight: normal;
    font-size: 100%;
    margin-bottom: 1px;
    text-align:left;
}

/*TxtDerecha {
    text-align:right;
}*/

.alerta {
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fcf8e3;
    border: 1px solid #ff0031;
    border-radius: 4px;
    font-family: 'Roboto', MS Verdana, sans-serif;
    color: #ff0031;
    font-weight: normal;
    font-size: 110%;
    width: 100%;
    text-align:center;
    vertical-align:central;
    align-items:center;
}

.grid {
    Width: 100%;
    align-content: center;
    border-color: #E5E5E5;
    border-style: none;
    border-width: 3px;
    border-radius: 10px;
    border-spacing: 2px;
    font-family: 'Roboto', MS Verdana, sans-serif;
    color: #808080;
    font-size: 100%;
}

.headgrid {
    border-radius: 10px;
    background-color: #EFEFEF;
    Height: 30px;
    vertical-align: central;
    text-align: center;
    font-family: 'Roboto', MS Verdana, sans-serif;
    color: #03A9F5;
    font-size: 105%;
    font-weight: bold;
}

.tabla {
    margin-left: auto;
    margin-right: auto;
    font-family: 'Roboto', MS Verdana, sans-serif;
    font-size: 105%;
}

/*-------------------------*/
/*Estilos generales botones*/
/*-------------------------*/

.boton {
    background: linear-gradient(#FF6B09,#FF5733); /*(#170D56,#0E0CB2); /*#23C0EB,#2396FF);*/
    color: #FFFFFF;
    display: inline-block;
    font-size: 110%;
    font-weight: bold;
    font-family: 'Roboto', MS Verdana, sans-serif;
    margin: 0px;
    padding: 10px 0px;
    text-align: center;
    vertical-align: central;
    width: 130px;
    height: 50px;
    text-decoration: none;
    box-shadow: 0px 3px 0px rgba(0,0,0,0.7);
    box-shadow: 0 5px 5px #BDBDBD, 0 7px 0 #848484, 0px 7px 7px rgba(0,0,0,0.6), inset 0px 2px 7px rgba(255,255,255,0.2), inset 0 -2px 7px rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border: none;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
}

.boton span {
    margin-right: 10px;
    color: blue;
}

    /*Colores*/
    /*.boton.blue {
        background: #3498db;
        box-shadow: 0px 3px 0px #266792;
    }
    .boton.orange {
        background: #e67e22;
        box-shadow: 0px 3px 0px #b55704;
    }*/

/*Tamaños*/
/*boton.medium {
    width: 300px;
}*/

/*Efectos*/
    .boton:hover {
        box-shadow: 0 5px 5px #BDBDBD, 0 9px 0 #848484, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
        box-shadow: 0px 0px 0px;
        padding-top: 8px;
    }
    .boton:active {
        top: 7px;
        box-shadow: 0 2px 0 #848484, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
        color: #FFFFFF !important;
    }


/*Boton redondo con Font Icons*/
.botonr {
    background: linear-gradient(#23C0EB,#2396FF);
    color: #FFFFFF;
    display: inline-block;
    font-size: 250%;
    font-weight: bold;
    font-family: 'Roboto', MS Verdana, sans-serif;
    margin: 0px;
    padding: 10px 0px;
    text-align: center;
    vertical-align: central;
    width: 80px;
    height: 80px;
    box-shadow: 0px 3px 0px rgba(0,0,0,0.7);
    box-shadow: 0 5px 5px #BDBDBD, 0 7px 0 #848484, 0px 7px 7px rgba(0,0,0,0.6), inset 0px 2px 7px rgba(255,255,255,0.2), inset 0 -2px 7px rgba(0,0,0,0.2);
    border-radius: 50%;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border: none;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
}

    .botonr:hover {
        box-shadow: 0px 0px 0px;
        padding-top: 10px;
        box-shadow: 0 5px 5px #BDBDBD, 0 9px 0 #848484, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
        color: #FFFFFF !important;
    }
    .botonr:active {
        top: 7px;
        box-shadow: 0 2px 0 #848484, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
        color: #FFFFFF !important;
    }

/*Boton home hover*/

.botonh {
    background: linear-gradient(#23C0EB,#2396FF);
    color: #FFFFFF;
    display: inline-block;
    font-size: 250%;
    font-weight: bold;
    font-family: 'Roboto', MS Verdana, sans-serif;
    margin: 5px;
    padding: 15px 0px;
    text-align: center;
    align-items:center;
    vertical-align: central;
    width: 200px; 
    height: 135px; 
    text-decoration: none;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.6);
    border-radius: 30px;
}

    .botonh:hover {
        box-shadow: 0px 0px 0px;
        padding-top: 15px;
    }

/*Progress bar*/

/*#Background {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #F0F0F0;
    filter: alpha(opacity=80);
    opacity: 0.8;
    z-index: 100000;
}

#Progress {
    position: fixed;
    top: 40%;
    left: 40%;
    height: 20%;
    width: 20%;
    z-index: 100001;*/
    /*background-color: #FFFFFF;*/
    /*border: 1px solid gray;*/
    /*background-repeat: no-repeat;
    background-position: center;
}
.listview {
    font-family: 'Roboto', MS Verdana, sans-serif;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    font-size: 100%;
    width: 100px;
    height: 125px;
    text-align: center;
    background-color: #FFFFFF;
    color: #03A9F5;
    border-radius: 10px;
    padding: 5px 5px 5px 5px;
    margin: 2px 2px 2px 2px;
    float: left;
}*/

/*Prueba boton 3d*/

.botonnew {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    padding: 15px 0px;
    font-size: 250%;
    border-radius: 30px;
    background: linear-gradient(#23C0EB,#2396FF); /*linear-gradient(#FF6B09,#FF5733); /*(#170D56,#0E0CB2);*/
    box-shadow: 0 5px 5px #BDBDBD, 0 7px 0 #848484, 0px 7px 7px rgba(0,0,0,0.6), inset 0px 2px 7px rgba(255,255,255,0.2), inset 0 -2px 7px rgba(0,0,0,0.2);
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    display: inline-block;
    font-family: 'Roboto', MS Verdana, sans-serif;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
    width: 200px;
    height: 135px;
    margin: 10px;
    text-align: center;
    align-items: center;
    vertical-align: central;
}

    .botonnew:hover {
        box-shadow: 0 5px 5px #BDBDBD, 0 9px 0 #848484, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
        color: #FFFFFF !important;
    }

    .botonnew:active {
        top: 7px;
        box-shadow: 0 2px 0 #848484, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
        color: #FFFFFF !important;
    }

.formaBotonnew {
    border-radius: 5px;
    padding-left: 25px;
    padding-right: 25px;
}

/* 2 columnas */
/*.wrapper2C {
    width: 95%;
    margin: auto;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: [col] 50% [col] 50% ;
    grid-template-rows: [row] auto [row] auto;
    background-color: #03A9F5;
    color: #FFFFFF;
    justify-content: center;
}*/
/* INICIO CITAS 2 COL */
/*.pagarx {
    grid-column: col;
    grid-row: row;
}

.pagary {
    grid-column: col 2;
    grid-row: row;
}*/

/* INICIO RESERVAS RESPOPONSIVE */
/*             DESKTOP         */

:root{
    --main-radius:5px;
    --main-padding:5px;
}


.marco {
    display: grid;
    background-color: aquamarine;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: /*0.2fr*/ 0.5fr 0.5fr;
    grid-template-areas: /*"reslogo reslogo reslogo"*/ "servicio horario cliente" ;
    grid-gap: 2rem;
    font-family: "Inter",sans-serif;
    font-weight: 800;
    /*    text-transform: uppercase;*/
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: top;
}


#reslogo {
    background: #FFFFFF; /*#a7ffeb;*/
    grid-area: reslogo;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

#servicio {
    background: #FFFFFF; /*#84ffff;*/
    grid-area: servicio;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#horario {
    background: #FFFFFF; /*#84ffff;*/
    grid-area: horario;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
/*#resumen {
    background: #FFFFFF;*/ /*#6fffd2;*/
    /*grid-area: resumen;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}*/
#cliente {
    background: #FFFFFF; /*#64ffda;*/
    grid-area: cliente;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#captcha {
/*    background: #73ffba;*/
    grid-area: captcha;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#reserva {
/*    background: #1de9b6;*/
    grid-area: reserva;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

.caja {
    background-color: #FFFFFF;
    color: #03A9F5;
    border-radius: 10px;
    padding: 20px 20px 10px 20px;
    font-family: 'Roboto', MS Verdana, sans-serif;
    font-weight: normal;
    font-size: 110%;
    margin-bottom: 1px;
    vertical-align: middle;
    text-align: left;
}

.caja1 {
    background-color: #03A9F5; /*#FFFFFF;*/
 /*   background-image: url('../Imagenes/fondo.png');*/
    color: #03A9F5;
    border-radius: 10px;
    padding: 20px 20px 10px 20px;
    font-family: 'Roboto', MS Verdana, sans-serif;
    font-weight: normal;
    font-size: 110%;
    margin-bottom: 1px;
    vertical-align: middle;
    text-align: left;
}

.cajacenter {
    display: flex;
    justify-content: space-evenly;
    align-items: center
}

.cajahome {
    /*    background-color: #FFFFFF;*/
/*    margin: 0px 35px 0px 35px;*/
    color: #03A9F5;
/*    border-radius: 10px;
    padding: 5px 5px 5px 5px;*/
    font-family: 'Roboto', MS Verdana, sans-serif;
    font-weight: normal;
    font-size: 110%;
    margin-bottom: 1px;
    justify-content: center;
    display: inline-block;
    text-align: center;
}

.login {
    display: grid;
    /*    background-color: aquamarine;*/
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 0.2fr;
    grid-template-areas: "logo kot" "cia kot";
    grid-gap: 1rem;
    font-family: "Inter",sans-serif;
    font-weight: 800;
/*    text-transform: uppercase;*/
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: top;
}
#logo {
    grid-area: logo;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#cia {
    grid-area: cia;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
    vertical-align:central;
}
#kot {
    grid-area: kot;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

.panel {
    display: grid;
    background-color: #03A9F5;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.1fr 1fr 0.1fr;
    grid-template-areas: "fecha hora" "res res" "aftot aftot";
    grid-gap: 1rem;
    font-family: "Inter",sans-serif;
    font-weight: 800;
    /*    text-transform: uppercase;*/
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 10px;
    text-align: center;
    vertical-align: top;
}
#fecha {
    text-align:left;
    grid-area: fecha;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#hora {
    text-align: right;
    grid-area: hora;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#aftot {
    grid-area: aftot;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#afact {
    grid-area: afact;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#res {
/*    background: #84ffff;*/
    grid-area: res;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#proceso {
    grid-area: proceso;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

.cambiaest {
    display: grid;
    background-color: #03A9F5;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.1fr 1fr 0.1fr;
    grid-template-areas: "cecomp cecli" "ceresu ceresu" "ceboton ceboton";
    grid-gap: 1rem;
    font-family: "Inter",sans-serif;
    font-weight: 800;
    /*    text-transform: uppercase;*/
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 10px;
    text-align: center;
    vertical-align: top;
}
#cecomp {
    text-align: left;
    grid-area: cecomp;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#cecli {
    text-align: left;
    grid-area: cecli;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#ceresu {
    text-align: left;
    grid-area: ceresu;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#ceboton {
    text-align: left;
    grid-area: ceboton;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

.pedido {
    display: grid;
    background-color: #03A9F5;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.1fr 1fr 0.1fr;
    grid-template-areas: "buscarp estadop salirp" "resumenp resumenp resumenp" "pagp pagp pagp";
    grid-gap: 1rem;
    font-family: "Inter",sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: top;
}
#buscarp {
    grid-area: buscarp;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#estadop {
    grid-area: estadop;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#salirp {
    grid-area: salirp;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#resumenp {
    grid-area: resumenp;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#pagp {
    grid-area: pagp;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

.categoria {
    display: grid;
    background-color: #03A9F5;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.1fr 1fr 0.1fr;
    grid-template-areas: "buscarc salirc" "resumenc resumenc" "pagc pagc";
    grid-gap: 1rem;
    font-family: "Inter",sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: top;
}
#buscarc {
    grid-area: buscarc;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#salirc {
    grid-area: salirc;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#resumenc {
    grid-area: resumenc;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#pagc {
    grid-area: pagc;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

.cat {
    display: grid;
    background-color: #03A9F5;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.1fr 1fr;
    grid-template-areas: "nomcat estadocat" "salircat salircat";
    grid-gap: 1rem;
    font-family: "Inter",sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: top;
}
#nomcat {
    grid-area: nomcat;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#estadocat {
    grid-area: estadocat;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#salircat {
    grid-area: salircat;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

.prod {
    display: grid;
    background-color: #03A9F5;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.1fr 1fr;
    grid-template-areas: "imagenprod botonprod" "datos1 datos2";
    grid-gap: 1rem;
    font-family: "Inter",sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: top;
}
#imagenprod {
    grid-area: imagenprod;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#botonprod {
    grid-area: botonprod;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#datos1 {
    grid-area: datos1;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#datos2 {
    grid-area: datos2;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

.colab {
    display: grid;
    background-color: #03A9F5;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.1fr 1fr 0.1fr;
    grid-template-areas: "buscarcol salircol" "resumencol resumencol" "pagcol pagcol";
    grid-gap: 1rem;
    font-family: "Inter",sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: top;
}
#buscarcol {
    grid-area: buscarcol;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#salircol {
    grid-area: salircol;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#resumencol {
    grid-area: resumencol;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#pagcol {
    grid-area: pagcol;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

.mancol {
    display: grid;
    background-color: #03A9F5;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.9fr 0.9fr 0.2fr;
    grid-template-areas: "datoscol horarioscol" "datoscol servcol" "datoscol botoncol";
    grid-gap: 1rem;
    font-family: "Inter",sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: top;
}
#datoscol {
    grid-area: datoscol;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#horarioscol {
    grid-area: horarioscol;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#servcol {
    grid-area: servcol;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#botoncol {
    grid-area: botoncol;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

.productos {
    display: grid;
    background-color: #03A9F5;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.1fr 1fr 0.1fr;
    grid-template-areas: "buscarpro salirpro" "resumenpro resumenpro" "pagpro pagpro";
    grid-gap: 1rem;
    font-family: "Inter",sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: top;
}
#buscarpro {
    grid-area: buscarpro;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#salirpro {
    grid-area: salirpro;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#resumenpro {
    grid-area: resumenpro;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}
#pagpro {
    grid-area: pagpro;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

@media only screen and (max-width:600px) {
    .marco {
        vertical-align: top;
        grid-template-columns: 1fr;
        grid-template-rows: /*0.3fr*/ 0.5fr 0.5fr 0.5fr 0.3fr;
        grid-template-areas:
        /*            "titu"  "reslogo"*/ "servicio" "horario" "cliente";
    }
    .login {
        vertical-align: top;
        grid-template-columns: 1fr;
        grid-template-rows: 0.15fr 1fr 0.7fr;
        grid-template-areas: "cia" "kot" "logo";
    }
    .panel {
        align-content:center;
        vertical-align: top;
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 0.1fr 1fr 0.1fr;
        grid-template-areas: "fecha" "hora" "res" "aftot";
    }
    .pedido {
        vertical-align: top;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.1fr 0.1fr 1fr 0.1fr;
        grid-template-areas: "buscarp buscarp" "estadop salirp" "resumenp resumenp" "pagp pagp";
    }
    .categoria {
        vertical-align: top;
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 0.1fr 1fr 0.1fr;
        grid-template-areas: "buscarc" "salirc" "resumenc" "pagc";
    }
    .cat {
        vertical-align: top;
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 0.1fr 0.1fr;
        grid-template-areas: "nomcat" "estadocat" "salircat";
    }
    .cambiaest {
        vertical-align: top;
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 0.1fr 1fr 0.1fr;
        grid-template-areas: "cecomp" "cecli" "ceresu" "ceboton";
    }
    .prod {
        vertical-align: top;
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 0.1fr 1fr 1fr;
        grid-template-areas: "imagenprod" "botonprod" "datos1" "datos2";
    }
    .mancol {
        vertical-align: top;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.3fr 0.3fr 0.1fr;
        grid-template-areas: "datoscol" "horarioscol" "servcol" "botoncol";
    }

    .colab {
        vertical-align: top;
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 0.1fr 1fr 0.1fr;
        grid-template-areas: "buscarcol" "salircol" "resumencol" "pagcol";
    }
    .productos {
        vertical-align: top;
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 0.1fr 1fr 0.1fr;
        grid-template-areas: "buscarpro" "salirpro" "resumenpro" "pagpro";
    }
}