/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai+Looped:wght@300;400;500;700&display=swap');

:root {
    --bs-primary: #fe5701;
    --bs-secondary: #5c1a42;
    --bs-orange: #e0af00;
    --bs-yellow: #e6c701;
    --bs-lightorange: #ffad8e;
    --bs-white: #fff;
}

@import "app.css";

/* framework */
.bg-yellow{background-color: var(--bs-yellow) !important;}
.bg-primary{background-color: var(--bs-primary) !important;}
.bg-secondary{background-color: var(--bs-secondary) !important;}
.dt-buttons{padding: 0px;padding-bottom: 4px;}
.dt-buttons .btn{padding: 0.25rem 0.5rem;font-size: .875rem;border-radius: 0.2rem;}
.btn-primary {color: #fff;background-color: var(--bs-primary);border-color: var(--bs-primary);}
.btn-primary:hover {color: #fff;background-color: #bf683a;border-color: #bf683a;}

.nav-tabs .nav-link{color:var(--bs-primary)}
.page-item.active .page-link{    background-color: var(--bs-primary); border-color: var(--bs-primary);}

.table.dataTable{border-collapse:collapse !important;}
table.table-bordered.dataTable th, table.table-bordered.dataTable td{border-left-width: 1px !important;}
table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child, table.table-bordered.dataTable td:last-child{border-right-width: 1px !important;}
.dt-buttons{padding: 4px;}
div.dataTables_wrapper div.dataTables_filter{text-align: right !important;}

/* login */
.home-login{height: auto;background: rgb(254,87,1);background: linear-gradient(0deg, rgba(254,87,1,1) 0%, rgba(253,143,85,1) 100%);}
.bg-mampato{background-image: url("../img/bg-mampato.jpeg");background-size: cover;background-position:bottom center;}

/* Header */
.site-header{height: 50px;}
.navbar-brand {font-size: 1rem;background-color: var(--bs-orange);box-shadow: inset -1px 0 0 rgb(0 0 0 / 25%);}

/* menu */
.btn-menu{width: 50px;height: 50px;position: fixed;bottom: 35px;right: 35px;z-index:9}

#sidebarMenu{position: fixed;top:0;z-index: 10;left: 0;height: 100vh;width: 90%;background: linear-gradient(0deg, rgba(254,87,1,1) 0%, rgba(253,143,85,1) 100%);left: -91%;transition: left .7s cubic-bezier(.535,.005,0,1);padding-right: calc(var(--bs-gutter-x) * .5);padding-left: calc(var(--bs-gutter-x) * .5);overflow: auto;}
#sidebarMenu .nav-link{color: var(--bs-white);}
#sidebarMenu .nav-pills .nav-link:hover { color: var(--bs-primary); background-color: var(--bs-white); }
#sidebarMenu .nav-pills .nav-link.active, #sidebarMenu .nav-pills .show > .nav-link {color: #fff;background-color: rgb(255 255 255 / 10%);}
.open .btn-close-menu{position: fixed;width: 100%;height: 100%;left: 0;top: 0;}
.open .sidebar{position: fixed;width: 100%;height: 100%;background-color: rgb(0 0 0 / 20%);top:0}
.open #sidebarMenu{left: 0;}
.open .btn-menu{z-index:0}

/* layout */
body{font-family: 'IBM Plex Sans Thai Looped', sans-serif;}
.home-layout{background: rgb(254,87,1);background: linear-gradient(0deg, rgba(254,87,1,1) 0%, rgba(253,143,85,1) 100%);}

main{min-height: calc(100vh - 50px);box-shadow: 0px 0rem 3rem rgb(0 0 0 / 18%);}
.open main{z-index: -1;}

/* titulos */
.title-menu{font-size: 10px;color: #fff;background-color: var(--bs-secondary);border-radius: 5px;}
.t-page{color:var(--bs-primary);position: relative;font-size: 20px;padding-bottom: 10px;}
.t-page::before{content:"";height: 2px;width: 100%;position: absolute;left: 0;right: 0; bottom: 1px;background-color: var(--bs-lightorange);}
.t-page::after{content:"";;width: 100%;position: absolute;;border-bottom:solid 1px var(--bs-darkorange);left: 0; bottom: 0px;background-color: var(--bs-lightorange);}

/* datatables */
.dataTables_wrapper{padding: 0px;}


/* otros */
.openNumeros{border:solid 1px #ccc;border-top:0;background-color:#5c636a; color: #fff;border-radius: 0px 0px 8px 8px;display: inline-block;padding: 4px 15px;font-size: 10px;text-decoration: none;font-weight: bold;}
.openNumeros:hover {color: #fff;background-color: #5c636a;border-color: #565e64;}

.openNumeros .openN{display: none;}
.openNumeros .cerrarN{display: block;}
.openNumeros.collapsed .openN{display: block;}
.openNumeros.collapsed .cerrarN{display: none;}

.loading-overlay {
    background: rgba( 26, 26, 26, 0.7 );
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10000;
    top: 0;
}

.loading-overlay-image-container {
    position: fixed;
    z-index: 20000;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
}

.loading-overlay-img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
}




@media (min-width: 768px){
    /* framework */
    .dt-buttons{margin-bottom: -30px;}

    /* login */
    .home-login{height: 100%;}

    /* menu */
    .sidebar{min-height: calc(100vh - 50px);}
    #sidebarMenu{position: sticky;top:50px;background: transparent;padding: 0;width: auto;height: auto;left: 0;}
    .btn-menu{display: none;}
    .btn-close-menu{display: none;}
    /* layout */
    main{border-top-left-radius: 25px;border-bottom-left-radius: 25px;}
}
#rptVentasPorProducto {
    background: url('../img/rptVentasPorProducto.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}
#rptVentasPorCliente {
    background: url('../img/rptVentasPorCliente.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}
#rptVentasPorClienteCategoria {
    background: url('../img/rptVentasPorClienteCategoria.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}
#rptVentasEmpresa {
    background: url('../img/rptVentasEmpresa.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}

#rptVentasCortesia {
    background: url('../img/rptVentasCortesia.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}
#rptValidacion {
    background: url('../img/rptValidacion.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}

#rptVentasEmpresaProducto {
    background: url('../img/rptVentasEmpresaProducto.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}

#rptTicketsEmpresa {
    background: url('../img/rptTicketsEmpresa.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}
#rptTicketsCortesia {
    background: url('../img/rptTicketsCortesia.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}
#rptVentasCumpleano {
    background: url('../img/rptVentasCumpleano.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}
#rptVentasCumpleanoProducto {
    background: url('../img/rptVentasCumpleanoProducto.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}
#rptTicketsCumpleano {
    background: url('../img/rptTicketsCumpleano.png') no-repeat;
    width: 200px;
    height: 202px;
    box-shadow: 0px 8px 15px rgb(243 7 7 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 45px;
}

.upload-area {
    width: 70%;
    height: 200px;
    border: 2px solid lightgray;
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 100px;
    text-align: center;
    overflow: auto;
}

.upload-area-acompanante {
    width: 70%;
    height: 200px;
    border: 2px solid lightgray;
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 100px;
    text-align: center;
    overflow: auto;
}

.upload-area:hover {
    cursor: pointer;
}

.upload-area-acompanante:hover {
    cursor: pointer;
}

.upload-area h1 {
    text-align: center;
    font-weight: normal;
    font-family: sans-serif;
    line-height: 50px;
    color: darkslategray;
}

#file {
    display: none;
}

#file-acompanantes {
    display: none;
}