* body {
    padding: 0px;
    margin: 0px;

    
}

.estilos_panal1 {
    text-decoration: none;
    color: rgba(255, 255, 255, .8);
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

a {
    font-family: 'Quattrocento Sans', sans-serif;
}

h2 {
    font-family: 'DM Sans', sans-serif;
}

.formulario input {
    display: block;
}

.estilos_admin {
    display: grid;
    grid-template-columns: 20% 80%;
    background-color: whitesmoke;
}

.navar_pro {
    background: #061628;
    box-shadow: 0px 1rem 3rem rgb(0, 0, 0,.175);
   
    
}

.navar_pro h2  {
    
   
    font-size: 15px;
  
    color: aliceblue;
    text-transform: uppercase;

}



.estilos_menu {
    
    background: #f8f9fa;
    height: 69px;
    box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 40%);
    z-index: 200;
 

}

.foto_usuario {
    width: 110%;
    height: 35px;
}

.estilos_menu ul  {
    float: right;
  
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 700;

    z-index: 99999999;
   
}
.estilos_menu ul li {
    display: inline-block;
    letter-spacing: 2px;
    transform: translate(-50px, 6px);
    text-transform: uppercase;
   
    transition: all 1s;
    padding: 6px;


}

.estilos_menu ul li i:hover:nth-child(1){
  
   color: red;

   
}

.estilos_menu ul li a {
    
}

.menu_navegar {
    background: #061628;
    height: 125vh;
  
   
    
  
}

.boton-espacio  {
    margin-top: 13px;
}

.estilos_color {
    background: rgb(0, 123, 255);
    height: 43px;
    border-radius: top 94px;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.activity-card{

    background:#fff;

    border-radius:24px;

    padding:28px;

    box-shadow:0 10px 35px rgba(15,23,42,.08);

    border:1px solid #edf2f7;

}

.activity-header{

    margin-bottom:25px;

}

.activity-header h3{

    font-size:30px;

    font-weight:700;

    color:#0f172a;

}

.activity-list{

    display:flex;

    flex-direction:column;

    gap:22px;

}




   

  
 
 



.botones_enlaces {
  
    transform: translate(-40px, -5px);
    
}

.botones_enlaces li {
    display: inline-block;
    margin-top: 10px;
    padding: 3px;

}

.botones_enlaces2 {
    float: right;
    transform: translate(-15px, -4px);
}

.botones_enlaces2 li {
    display: inline-block;
    margin-top: 10px;   
    padding: 3px;

}

.botones_enlaces2 li ul {
    position: absolute;
}
.botones_enlaces2 li ul li {
    display: block;
    transform: translate(-39px, -8px);
    font-size: 11px;
    font-family: sans-serif;
    color: dodgerblue;

}

.botones_enlaces h2,.botones_enlaces2 h3 {
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 22px;
   
    color: #ffffff;
    margin: 0;
    transform: translate(-30px, 1px);
}


.rota1,.rota2,.rota3,.rota4,.rota5 {
    transition: 0.4s all;
}

 




.estilos_menu_pro {
    background: #22282c;
}

.estilos_menu_pro h3 {
    color: white;
    padding: 10px 14px;
    font-size: 13px;
    font-family: sans-serif;
    font-weight: 600;
    background: #0072a9;
}

.menu_navegar ul li {
    transition: all 0.5s;
}   

.menu_navegar ul li a {
   
	font-size: 10px;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    transition: all 1s;
    letter-spacing: 2px;
    transition: all 0.5s;
    font-weight: 600;   
    
}


.menu_navegar ul li ul li:hover {   
    background: none;
    padding: 10px;
    

}

.sidebar-menu{

    list-style:none;

    padding:15px;

    margin:0;

}

.menu-item{

    margin-bottom:10px;

}

.menu-link{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 18px;

    color:#dbe4ff;

    text-decoration:none;

    border-radius:12px;

    transition:.3s;

    font-weight:500;

}

.menu-link:hover{

    background:#2563eb;

    color:#fff;

}

.menu-icon{

    width:22px;

    margin-right:15px;

    font-size:18px;

}

.menu-link span{

    flex:1;

}

.arrow{

    transition:.3s;

    font-size:13px;

}

.menu-item.active .arrow{

    transform:rotate(90deg);

}

.submenu{

    display:none;

    list-style:none;

    padding-left:20px;

    margin-top:6px;

}

.submenu li{

    margin:6px 0;

}

.submenu a{

    display:block;

    padding:10px 15px;

    color:#cbd5e1;

    text-decoration:none;

    border-radius:8px;

    transition:.3s;

}

.submenu a:hover{

    background:#1e40af;

    color:#fff;

}


.user-profile{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px;

    margin:-5px 15px;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    transition:.3s;

}

.user-profile:hover{

    background:rgba(255,255,255,.08);

}

.user-avatar{

    position:relative;

    width:58px;
    height:58px;

    flex-shrink:0;

}

.user-avatar img{

    width:100%;
    height:100%;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #2563eb;

}

.online{

    position:absolute;

    right:2px;
    bottom:2px;

    width:14px;
    height:14px;

    background:#22c55e;

    border-radius:50%;

    border:2px solid #0f172a;

}

.user-info{

    flex:1;

    margin-left:15px;

}

.user-info h4{

    color:#fff;

    font-size:13px;

    margin:0;

    font-weight:600;

}

.user-info span{

    color:#94a3b8;

    font-size:13px;

}

.user-options{

    color:#94a3b8;

    cursor:pointer;

    transition:.3s;

}

.user-options:hover{

    color:#fff;

    transform:rotate(180deg);

}



    
.input_estilos {
    position: relative;
}

.menu_navegar img {
   
    padding: 0px 0px;
    transform: translate(-15px, 0px);

}

.factura {
    box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 40%);
    background: white;
    margin: 2rem 3rem;
    height: 428px;
    border-radius: 3px;
}

.factura input,
.agregar_productos input {
    width: 43%;
    margin: 16px 22px 4px;
    height: 38px;
    font-size: 13px;
    font-family: sans-serif;
    font-weight: 600;
    /* box-shadow: rgb(0 0 0 / 40%) 0px 0px 4px 0px; */
    border: 0px;
    outline: none;
    border: 1px solid #ced4da;
    border-radius: 3px;
}

#boton {
    width: 8%;
    background: blue;
    color: white;
    font-size: 12px;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    display: block;
    cursor: pointer;
}

#boton:hover {
    opacity: 0.8;
}

.factura h3,
.agregar_productos h3 {
    font-size: 13px;
    padding: 1px 17px;
    color: white;
    font-family: sans-serif;
    font-weight: 600;
    padding: 14px;
}

.agregar_productos {
    box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 40%);
    height: 430px;
    margin: 33px;
}

.inventario table,
td,
th,
tr {
  
    border-collapse: collapse;
    margin: 15px;
}

.estilos_cabeza {
    background: blue;
    color: white;
    text-align: center;
    border-collapse: collapse;
}

.estilos2 {
    background: black;
    color: white;
}

.inventario {
    box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 40%);
    margin: 3rem 1rem;
    height: 90vh;
}

.inventario th,
td {
    padding: 10px;
    padding: 10px;
    font-size: 16px;
    font-family: sans-serif;
}

.inventario a {
    background: yellow;
    border-radius: 4px;
    padding: 10px;
    color: black;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    font-family: sans-serif;
}

.inventario a:hover {
    opacity: 0.8;
}

.oso option:first-child {
    display: none;
}

.inventario img {
    width: 100%;
    height: 125px;
    object-fit: cover;
}

.inventario input {
    width: 67%;
    margin: auto;
    height: 43px;
    margin: 26px 10rem;
    outline: none;
    border: none;
    box-shadow: 0px 0px 4px 0px rgb(0 0 0);
    border-radius: 3px;
    font-size: 17px;
    font-family: ui-serif;
    font-weight: 700;
    
}

.opciones {
    width: 45%;
    height: 42px;
    margin-left: 24px;
}

.inventario {
    overflow-y: auto;
}

.estilos_button {
    background: yellow;
    border: none;
    height: 35px;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}

#boton_t{
    padding: 0px;
    width: 100px;
    margin-top: 12px;
    

}

.datos_admin {
    display: grid;  
    grid-template-columns: 1fr 1fr;
    margin-top: 4rem;
    
    
}   

.datos_admin p {
    color: #c2c7d0;
    font-size: 14px;
    transform: translate(-3rem, -26px);
    text-transform: uppercase;
}

.datos_admin img  {
    width: 30%;
    transform: translate(45px, -17px);
}

.menu_cate {
    transform: translate(17px, 20px);   


}

.menu_pric {
    
}


.logo{

    display:flex;
    align-items:center;
    gap:15px;

    padding:20px 15px;
    margin-bottom:30px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.logo img{

    width:58px;
    height:58px;
    object-fit:contain;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    padding:8px;

    transition:.3s;

}

.logo img:hover{

    transform:rotate(-5deg) scale(1.08);

}

.logo-text{

    display:flex;
    flex-direction:column;

}

.logo h2{

    margin:0;

    font-size:34px;

    font-weight:800;

    color:#ffffff;

    letter-spacing:1px;

    line-height:1;

}

.logo h2 span{

    color:#2563eb;

}

.logo small{    

    margin-top:5px;

    color:#94a3b8;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

}

      
.usuario {
   
   
    position: absolute;
    z-index: 2222;
   
    top: 7rem;
    right: 18%;
    bottom: 0px;
    width: 45%;
    height: 78svh;
    border-radius: 10px;
  
 
  
   

}

.usuario1 {
   
    position: absolute;
  
    
    top: 7rem;
    right: 2%;
    bottom: 0px;
    width: 76%;
    height: 78svh;
    border-radius: 10px 10px 0px 0px;
  

}

.usuario2 {

    position: fixed;
    z-index: 2222;
    box-shadow: 0px 1rem 3rem rgb(0, 0, 0,.175);
    top: 7rem;
    right: 2%;
    bottom: 0px;
    width: 76%;
    height: 73svh;
    border-radius: 10px;
    background: white;
}

.usuario3 {

    position: fixed;
    z-index: 2222;
  
    top: 7rem;
    right: 2%;
    bottom: 0px;
    width: 76%;
    height: 80svh;
    border-radius: 10px;
   
    overflow-y: scroll;
}





.usuario_pro {

    
    position: fixed;
    z-index: 2222;
    box-shadow: 0px 1rem 3rem rgb(0, 0, 0,.175);
    top: 7rem;
    right: 2%;
    bottom: 0px;
    width: 76%;
    height: 79svh;
    border-radius: 10px;
    background: white;
    

}

.usuario_pro input {
    margin-top: 10px;
  
}


.furmulario_pro{
     padding: 15px;
     

}




.usuario input {
    height: 40px; 
    text-transform: uppercase;
    
}

.bus_usuari{
    transform: translate(0px,4px);
}

.form_buscar {
        height: 8rem;
    margin: 12px 3px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .03);
    background: white;
    border-radius: 10px;
    padding: 13px;
}



.usuario label, .usuario1 label {
    font-size: 15px;
    
    color: #007bff;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin-top: 5px;
}

.usuario table {
    
}

.usuario1 table img {
    width: 70%;
    object-fit: cover;
    height: 80px;
    border-radius: 5px;
}

.usuario1 table {
    
   
        
   
}


.configuracion {
position: fixed;
bottom: 0px;


}

.furmulario_pro input {

    height: 47px;
    box-shadow: 0px 1rem 3rem  rgb(0, 0, 0,.175);
   margin-top: 5px;

}




/* estilos foto input*/


.photo {

   
    margin: 10px;
    height: 130px;
    box-shadow: 1px 2rem 5rem  rgb(0, 0, 0,.300);
    border-radius: 10px;
    
}


.prevPhoto label{
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.prevPhoto img  {
    width: 100%;
    height: 100%;
    transform: translate(8px, -18px);
}



.errorArchivo {
    font-size: 16px;
    font-family: arial;
    color: #cc0000;
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
}

.delPhoto {
    color: #FFF;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background: red;
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 10;
    cursor: pointer;
}

#tbl_list_productos img {
    width: 50px;
}

.imgProductoDelete {
    width: 175px;
}

.upimg input{
    display: none !important;
}

.upimg img {
    width: 100%;
    object-fit: cover;
    height: 100px;
}


.texarea {

  width: 100%;
  height: 120px;
  outline: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0px 1rem 3rem  rgb(0, 0, 0,.175);


}

.produc-estilos  {
    padding-top: 20px;
}

.hover_pro {

    overflow-y: scroll;
}


 /* estilos modal inventario*/


  .modal_pro {
    display: none;
  }

 .modal_zombra  {

    box-shadow: 0px 1rem 3rem  rgb(0, 0, 0,.175);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 999;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    background:black;
    opacity: 0.9;
    z-index: 9999;
    
    
   
   
   

 }

 .formulario_pro {
    box-shadow: 0px 1rem 3rem  rgb(0, 0, 0,.175);
   
    width: 50%;
    height: 300px;
   
    border-radius: 5px;
 }

 .modal_pro h4 {
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    color: red;
    margin-top: 10px;

 }

 .formulario_pro input {
   
    margin-top: 10px;
    width: 90%;
    margin: 1rem 3rem;
  

 }

 .formulario_pro form {
    margin-top: 35px;
 }

 .formulario_pro i {
    float: right;
    font-size: 30px;
    cursor: pointer;
    transition: all 0.3s;
    margin: 10px ;

 }

 .formulario_pro i:hover {
    transform: rotate(180deg);
    color: #cc0000;
 }

 


 .foto_agregar {

  width: 15%;
  display: table;
  margin: auto;
  padding-top: 2rem;

 }

 .des { 
    text-align: center;
    margin-top: 3rem;
    font-size: 15px;
     text-transform: uppercase;
 }

 .formulario_pro h3 {
    text-align: center;
    margin-top: 10px;
    color: blue;
    font-size: 30px;
    text-transform: uppercase;
    font-family: 'Courier New', Courier, monospace;
 }

 .alerta {
    text-align: center;
    font-size: 20px;
    color: black;
    margin-top: 1rem;
    text-transform: uppercase;
    font-family: 'Courier New', Courier, monospace;
 }

 .ventas-nuevo {

   box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, 4%);
   height: 320px;
   background: white;
 }

 .factura-pro {
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 36%);
    background: white;
    border-radius: 0px 0px 10px 10px;
    margin-top: 20px;
 }

 .mentor-pro  {
   
 font-size: 12px;
 
 }

 .descrp-factus {
    font-size: 10px;
 }

 .boton-agra {
    background: #0084ff;
    color: white;
 }
 

/* estilos ventas */

.cliente_pro {
  
}

.cliente_pro input {
    height: 35px;
}

.boton_ventas {
    margin: 10px 10px;
}

.estilos_boton_ventas {
    
    height: 100px;
    padding: 26px;

}

.anular_venta {
  
    margin-top: 1rem;
    


}

.anular_venta ul {
    padding: 13px;
    float: inline-end;
    font-size: 10px;
}


.botones-ventas {
    background: #007bff;
    border-radius: 5px;
    color: white;
    padding: 10px;
   
}

.botones-ventas2 {

    background: #09984e ;
    border-radius: 5px;
    color: white;
    padding: 10px;
    
}

.botones-ventas3{

    
    background: white ;
    border-radius: 5px;
    color: black;
    padding: 10px;
    border: solid 1px red;

}

.anular_venta ul li {
    position: relative;
  display: inline-block;
  padding: 5px;
  color: white;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 13px;
}


.anular_venta ul li ul {
    display: none;
    position: absolute;
    top: 100%; /* Posiciona debajo del padre */
    left: 0;
    background-color: white; /* Opcional: mejora visibilidad */
    z-index: 1000;
    padding: 5px;
    border: 1px solid #ccc;
    font-size: 10px;
    color: white;
}

.anular_venta ul li:hover > ul {
    display: block;
    
}

.anular_venta ul li ul li {
    position: relative;
    transform: none; /* Se elimina para evitar desplazamientos innecesarios */
    padding: 3px 5px;
    white-space: nowrap;
    color: black;
}




.table {
 
  
    color: black;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    
    
    
}



.genera_pro li {
        display: inline-block;
    transform: translate(-12px, 7px);
    text-transform: uppercase;
    color: #0d6efd;
    font-size: 14px;
    font-weight: 600;
}

.genera_pro li:nth-child(2) {
    float: right;
    text-transform: uppercase;
    transform: translate(-12px,7px);
   
    font-size: 17px;
    color: black;

}

.estilos_boton_ventas {
    display: grid;
    grid-template-columns: 60% 40%;
    width: 100%;
}

.boton_ventas {
        color: white;
}


.info-factura {
    box-shadow: 8px 7px 14px 4px rgba(0, 0, 0, 36%);
    background: white;
    border-radius: 10px;
    padding: 10px;
}

.info-factura input{
        border: none;
    background: gainsboro;
    border-radius: 5px;
    width: 46%;
    height: 35px;


}

.info-factura p {
   
    text-transform: uppercase;
    color: #0d6efd;
    font-size: 10px;
    font-weight: 600;
    line-height: 27px;
}


.buscar_pro {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    grid-gap: 10px;
}

.norma {
    
}

.boton_venta_pro {
    display: none;
}

#agre_producto {
    display: none;
}


/* estilos lista de ventas */

.buscar_ventas  li  {
    display: inline-block;
    list-style: none;
    margin-top: 15px;
   
}


.table_pro  {
    margin-top: 15px;
}

.buscar_ventas input {
    width: 100px;
}

.anular {
    cursor: default !important;
}

.usuario1 input {
    height: 40px;
    text-transform: uppercase;
}


/* estilos configuracion */


.empresa {

    box-shadow: 0px 1rem 3rem  rgb(0, 0, 0,.175);
    height: 54rem;
    
    margin: 10px 21px;
   
    
}
.empresa input {
    padding: 5px;
    color: black;
  
    border: none;
}

.pro_pro input {
    margin-top: 15px;

}

/* estilos panel */

.pane {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
    transform: translate(13px,10px);
    grid-gap: 7px;
    margin: 10px 10px;
    width: 95%;
   
}


.color1 {
    background: 
    white;
     box-shadow: 0px 1rem 3rem  rgb(0, 0, 0,.175);
  
    border-radius: 5px;

 
}

.cards{

    display:grid;

    grid-template-columns: 1fr 1fr 1fr 1fr ;

    gap:8px;

    margin-top:25px;
    height: 220px;

}

.grafico {
  display: grid;
    grid-template-columns: 40% 1fr;
    gap: 34px;
    margin-top: 3rem;
}
/* =================================
   RESUMEN GENERAL
================================= */

.summary-section{
    width:100%;
    margin-top:120px;
   

    padding: 20px;
    border-radius: 10px;
}

.summary-title{
    margin:0 0 18px;

    color:#0f172a;

    font-size:18px;
    font-weight:700;
}


/* CONTENEDOR */

.summary-grid{
    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:15px;
}


/* TARJETAS */

.summary-card{
    min-height:105px;

    display:flex;
    align-items:center;

    gap:15px;

    padding:18px;

    background:#ffffff;

    border:1px solid #e5e7eb;
    border-radius:14px;

    box-shadow:0 5px 20px rgba(15,23,42,.04);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


/* HOVER */

.summary-card:hover{
    transform:translateY(-4px);

    border-color:#dbeafe;

    box-shadow:0 12px 30px rgba(15,23,42,.08);
}


/* ICONOS */

.summary-icon{
    width:48px;
    height:48px;

    min-width:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#ffffff;

    font-size:18px;

    box-shadow:0 6px 15px rgba(15,23,42,.12);
}


/* COLORES */

.summary-blue{
    background:linear-gradient(135deg,#3b82f6,#0066ff);
}

.summary-green{
    background:linear-gradient(135deg,#34d399,#10b981);
}

.summary-orange{
    background:linear-gradient(135deg,#fb923c,#f97316);
}

.summary-purple{
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);
}


/* INFORMACIÓN */

.summary-info{
    flex:1;
}

.summary-info span{
    display:block;

    color:#334155;

    font-size:12px;
    font-weight:600;

    margin-bottom:4px;
}

.summary-info h3{
    margin:0 0 5px;

    color:#0f172a;

    font-size:19px;
    font-weight:700;

    line-height:1;
}
@media(max-width:1000px){

    .summary-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:600px){

    .summary-grid{
        grid-template-columns:1fr;
    }

    .summary-card{
        min-height:95px;
    }

}

.summary-info p{
    margin:0;

    color:#64748b;

    font-size:11px;
}


* {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;


}

.card{

    background:#fff;

    border-radius:22px;

    padding:22px;

    position:relative;

    overflow:hidden;

    border:1px solid #edf2f7;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(37,99,235,.15);

}

.color2 {
    background: #ffc107;
    border-radius: 5px;
 
}

.color3 {
    background: #dc3545;
    border-radius: 5px;
}

.color4 {
    background: #198754;
        border-radius: 5px;
       
       
}

.color9 {
    background: #198754;
    
    border-radius: 5px;
}

.color5 {
   
   
background: #10b981;
border-radius: 5px;
}

.card-top{

    display:flex;

    align-items:center;

    gap:18px;

}

.icon{

    width:58px;

    height:58px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:24px;

    box-shadow:0 12px 25px rgba(0,0,0,.12);

}

.blue{

    background:linear-gradient(135deg,#3b82f6,#2563eb);

}

.orange{

    background:linear-gradient(135deg,#fbbf24,#f59e0b);

}

.red{

    background:linear-gradient(135deg,#ef4444,#dc2626);
    padding: 10px;

}

.green{

    background:linear-gradient(135deg,#34d399,#10b981);

}

.purple{

    background:linear-gradient(135deg,#8b5cf6,#6d28d9);

}

.cyan{

    background:linear-gradient(135deg,#38bdf8,#0284c7);

}

.info{

    flex:1;

}

.info h4{

    margin:0;

    color:#475569;

    font-size:17px;

    font-weight:600;

}

.info h2{

    margin-top:8px;

    font-size:23px;

    color:#0f172a;
    font-weight: 700;

}

.pane i{
    object-fit: cover;
    width: 30%;
    display: table;
    margin: auto;
    height: 60px;
    transform: translate(0px, 13px);
    font-size: 50px;
    color: lightcyan;
}

.card-bottom{

    margin-top:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#94a3b8;

    font-size:14px;

}

.progress{

    margin-top:18px;

    width:100%;

    height:6px;

    border-radius:20px;

    position:relative;

    overflow:hidden;

    background:#edf2f7;

}

/* ================================
   TARJETA ACTIVIDAD RECIENTE
================================ */

.recent-activity{

    width:100%;
    max-width:430px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:18px;

    padding:25px 20px 20px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.04),
        0 2px 8px rgba(15,23,42,.03);

}


/* TITULO */

.recent-title{

    margin:0 0 22px 0;

    font-size:18px;
    font-weight:700;

    color:#0f172a;

}


/* LISTA */

.recent-list{

    display:flex;

    flex-direction:column;

    gap:22px;

}


/* ACTIVIDAD */

.recent-item{

    display:flex;

    align-items:center;

    width:100%;

    min-height:50px;

}


/* ICONO */

.recent-icon{

    width:42px;
    height:42px;

    min-width:42px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:12px;

    color:#ffffff;

    font-size:17px;

    margin-right:15px;

    box-shadow:0 6px 15px rgba(15,23,42,.12);

}


/* COLORES */

.activity-green{

    background:linear-gradient(
        135deg,
        #6ee7a2,
        #22c55e
    );

}

.activity-blue{

    background:linear-gradient(
        135deg,
        #60a5fa,
        #2563eb
    );

}

.activity-orange{

    background:linear-gradient(
        135deg,
        #fcd34d,
        #f59e0b
    );

}

.activity-red{

    background:linear-gradient(
        135deg,
        #f87171,
        #dc2626
    );

}


/* INFORMACION */

.recent-info{

    flex:1;

    min-width:0;

}

.recent-info h4{

    margin:0 0 4px;

    font-size:14px;

    font-weight:700;

    color:#0f172a;

}

.recent-info p{

    margin:0;

    font-size:13px;

    color:#64748b;

}


/* TIEMPO */

.recent-time{

    margin-left:15px;

    font-size:12px;

    font-weight:400;

    color:#64748b;

    white-space:nowrap;

}


/* FOOTER */

.recent-footer{

    margin-top:22px;

    padding-top:20px;

    border-top:1px solid #e5e7eb;

    text-align:center;

}

.recent-footer a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    color:#1677ff;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.recent-footer a i{

    font-size:15px;

    transition:transform .3s;

}


/* HOVER */

.recent-footer a:hover{

    color:#0056d6;

}

.recent-footer a:hover i{

    transform:translateX(6px);

}

.recent-item{

    transition:transform .25s;

}

.recent-item:hover{

    transform:translateX(4px);

}

.progress::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:65%;

    height:100%;

    border-radius:20px;

}

.progress.blue::before{

    background:linear-gradient(90deg,#60a5fa,#2563eb);

}

.progress.orange::before{

    background:linear-gradient(90deg,#fcd34d,#f59e0b);

}

.progress.red::before{

    background:linear-gradient(90deg,#f87171,#dc2626);

}

.progress.green::before{

    background:linear-gradient(90deg,#6ee7b7,#10b981);

}

.progress.purple::before{

    background:linear-gradient(90deg,#a78bfa,#6d28d9);

}

.progress.cyan::before{

    background:linear-gradient(90deg,#67e8f9,#0284c7);

}

.card-bottom i{

    font-size:40px;

    opacity:.12;

}

.card:hover .icon{

    transform:rotate(-8deg) scale(1.08);

    transition:.35s;

}



.pane h3,.pane p {
    text-align: center;
    
    color: white;
    font-size: 16px;
    font-weight: 700;   
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}

.grafico {
    width: 100%;
    height: 260px;
}

.pane a:hover {
     
    transform: scale(1.1);
    transition: all 0.3s;
    text-decoration: none;


}

.lista_response {
   visibility: hidden;
}

.buscar_ventas_pro li {

    
}

.Configuracion_pro {
    box-shadow: 0px 1rem 3rem  rgb(0, 0, 0,.175);
    background: white;
    position: absolute;
    display: block;
    right: -4px;
    z-index: 303030;
    height: 98px;
    top: 32px;
    display: none;
}

 .Configuracion_pro li {
   
  
      font-size: 10px;
     
 }

 .Configuracion_pro li a {
     
     padding: 10px;
     text-decoration: none;
     font-family: sans-serif;
     font-weight: 700;

}



@media only screen and (max-width: 992px) {

    .lista_response {
        font-size: 40px;
        cursor: pointer;
        display: block;
        transform: translate(-45px, 7px);
        visibility: visible;
    }

    .estilos_admin {
        display: grid;
        grid-template-columns: 100%;
    }

    .menu_navegar {
        display: none;
        z-index: 200000;
    }

    .pane h3, .panel p {
       

        font-size: 14px;
        font-weight: 700;
       
    }

    .usuario1 {
        
        top: 11rem;
        right: 3%;
        bottom: 0px;
        width: 95%;
        overflow-y: scroll;
        height: auto;
     
    }

    .pane {
        display: grid;
        grid-template-columns: 1fr 1fr;
        transform: translate(0px, 0px); 
        grid-gap: 10px;
         margin: 0px 0px; 
        width: 95%;
    }

    .botones_enlaces2 {
        float: right;
        transform: translate(-10px, 0px);
    }

    .usuario {
        

        top: 13rem;
        right: 13%;
       
        width: 76%;
       overflow-y: scroll;
       
    }

    .usuario_pro {
     
        top: 13rem;
        right: 13%;
  
        width: 76%;
     
        
        overflow-y: scroll;
    }

    .estilos_boton_ventas {
     
        height: 179px;
        padding: 39px 0px;
    }

    .cliente_pro input {
        height: 30px;
        width: 147px;
    }

    .usuario3 {
       
        top: 12rem;
        right: 10%;
       
        width: 88%;
    
        overflow-y: scroll;
    }

    .buscar_pro {
       
        grid-template-columns: 1fr 1fr;
        grid-gap: 0px;
    }

    .genera_pro li:nth-child(2) {
      
      
        transform: translate(-10px, 10px);
        font-size: 15px;
        color: white;
    }

    .buscar_ventas_pro li {
        display: block;
    }

    .buscar_ventas_pro input {

        margin-top: 8px;
    }


    .formulario_pro {
       
        width: 71%;
        height: 427px;
      
    }

    .formulario_pro h3 {
       

        font-size: 18px;
       
        font-family: sans-serif;
        font-weight: 700;
    }

    .usuario1 input {
        
        width: 78%;
        margin-top: 10px;
    }

    .modal_pro h4 {
       
        font-size: 15px;
       
    }
    
    

    

}


/*estilos chat con ia */ 

.chat-container {
  position: fixed;
  right: 26px;
  bottom: 20px;
  z-index: 100000;
  cursor: pointer;
}
.chat-box {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 300px;
  height: 400px;
  background: white;
  box-shadow: 0px 1rem 3rem  rgb(0, 0, 0,.175);
  color: black;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  z-index: 100100;
}
.chat-messages {
  flex-grow: 1;
  padding: 10px;
  overflow-y: auto;
  font-size: 14px;
}
textarea {
  width: 100%;
  height: 50px;
  resize: none;
}

/*====================================================
        TITANBYTE - FORMULARIO PRODUCTOS
=====================================================*/

.tbprod-container{

    width:100%;
    max-width:1400px;

    margin:auto;

    padding:10px;
    overflow-y: scroll;
    height: 120vh;
    margin-top: -57px;

}


/*==========================================
            HEADER
==========================================*/

.tbprod-page-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:30px;

}

.tbprod-small-title{

    display:block;

    color:#1677ff;

    font-size:13px;

    font-weight:700;

    margin-bottom:8px;

}

.tbprod-page-header h1{

    margin:0;

    font-size:40px;

    color:#0f172a;

    font-weight:700;

}

.tbprod-breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:15px;

}

.tbprod-breadcrumb a{

    text-decoration:none;

    color:#2563eb;

    font-size:14px;

}

.tbprod-breadcrumb span{

    color:#64748b;

    font-size:14px;

}

.tbprod-breadcrumb i{

    color:#94a3b8;

    font-size:10px;

}


/*==========================================
        BOTON VOLVER
==========================================*/

.tbprod-return{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 22px;

    border-radius:10px;

    background:#fff;

    border:1px solid #dbe2ea;

    color:#0f172a;

    text-decoration:none;

    font-weight:600;

    transition:.30s;

}

.tbprod-return:hover{

    background:#1677ff;

    color:#fff;

    border-color:#1677ff;

}


/*==========================================
            CARD
==========================================*/

.tbprod-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #e5e7eb;

    box-shadow:
        0 10px 35px rgba(15,23,42,.06);

}


/*==========================================
        HEADER CARD
==========================================*/

.tbprod-card-header{

    display:flex;

    align-items:center;

    gap:20px;

    padding:30px;

    border-bottom:1px solid #edf2f7;

}

.tbprod-icon{

    width:60px;

    height:60px;

    min-width:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(135deg,#1677ff,#0059d6);

    color:#fff;

    font-size:25px;

    box-shadow:
        0 8px 18px rgba(22,119,255,.25);

}

.tbprod-card-header h2{

    margin:0;

    color:#0f172a;

    font-size:26px;

}

.tbprod-card-header p{

    margin-top:6px;

    color:#64748b;

    font-size:14px;

}


/*==========================================
            BODY
==========================================*/

.tbprod-card-body{

    padding:35px;

}


/*==========================================
        GRID DOS COLUMNAS
==========================================*/

.tbprod-grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}


/*==========================================
        GRID DESCRIPCION
==========================================*/

.tbprod-grid-price{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

    margin-top:30px;

}


/*==========================================
        FORM GROUP
==========================================*/

.tbprod-group{

    margin-bottom:28px;

}

.tbprod-group label{

    display:block;

    margin-bottom:10px;

    color:#0f172a;

    font-size:14px;

    font-weight:700;

}

.tbprod-group label span{

    color:#ef4444;

}

.tbprod-group small{

    display:block;

    margin-top:8px;

    color:#64748b;

    font-size:12px;

}


/*==========================================
            INPUT
==========================================*/

.tbprod-input{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    border:1px solid #dbe2ea;

    border-radius:10px;

    background:#fff;

    overflow:hidden;

    transition:.30s;

}

.tbprod-input:hover{

    border-color:#1677ff;

}

.tbprod-input:focus-within{

    border-color:#1677ff;

    box-shadow:
        0 0 0 4px rgba(22,119,255,.10);

}

.tbprod-input i{

    width:55px;

    text-align:center;

    color:#94a3b8;

    font-size:16px;

}

.tbprod-input span{

    width:55px;

    text-align:center;

    font-size:18px;

    color:#64748b;

}

.tbprod-input input{

    flex:1;

    height:50px;

    border:none;

    outline:none;

    background:transparent;

    padding:0 15px;

    font-size:14px;

    color:#334155;

}

.tbprod-input input::placeholder{

    color:#94a3b8;

}


/*==========================================
            SELECT
==========================================*/

.tbprod-input select{

    width:100%;

    height:50px;

    border:none;

    outline:none;

    background:transparent;

    padding:0 15px;

    font-size:14px;

    color:#334155;

    cursor:pointer;

}


/*==========================================
            TEXTAREA
==========================================*/

.tbprod-textarea{

    align-items:flex-start;

}

.tbprod-textarea textarea{

    width:100%;

    height:180px;

    border:none;

    resize:none;

    outline:none;

    padding:15px;

    font-size:14px;

    color:#334155;

    font-family:inherit;

}

.tbprod-textarea textarea::placeholder{

    color:#94a3b8;

}


/*==========================================
        SECCION IMAGENES
==========================================*/

.tbprod-image-section{

    margin-top:10px;

    padding-top:30px;

    border-top:1px solid #edf2f7;

}

.tbprod-image-title{

    margin-bottom:20px;

}

.tbprod-image-title h3{

    margin:0 0 6px;

    color:#0f172a;

    font-size:18px;

}

.tbprod-image-title p{

    margin:0;

    color:#64748b;

    font-size:13px;

}


/* GRID */

.tbprod-images-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:20px;

}


/* TARJETA IMAGEN */

.tbprod-image-upload{

    position:relative;

    height:210px;

    border:2px dashed #cbd5e1;

    border-radius:14px;

    overflow:hidden;

    background:#f8fafc;

    transition:.3s;

}

.tbprod-image-upload:hover{

    border-color:#1677ff;

    box-shadow:
        0 8px 25px
        rgba(22,119,255,.10);

}


/* LABEL */

.tbprod-image-label{

    position:relative;

    display:block;

    width:100%;

    height:100%;

    cursor:pointer;

}


/* IMAGEN */

.tbprod-image-label img{

    width:100%;

    height:100%;

    object-fit:contain;

    padding:10px;

}


/* OVERLAY */

.tbprod-image-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    background:
        rgba(15,23,42,.70);

    color:#fff;

    opacity:0;

    transition:.3s;

}

.tbprod-image-upload:hover
.tbprod-image-overlay{

    opacity:1;

}

.tbprod-image-overlay i{

    font-size:28px;

}

.tbprod-image-overlay span{

    font-size:13px;

    font-weight:600;

}


/* BADGE PRINCIPAL */

.tbprod-main-badge{

    position:absolute;

    top:10px;

    left:10px;

    z-index:5;

    padding:6px 12px;

    border-radius:20px;

    background:#1677ff;

    color:#fff;

    font-size:11px;

    font-weight:600;

    box-shadow:
        0 5px 15px
        rgba(22,119,255,.25);

}


/* ALERTA */

.tbprod-alert{

    margin-top:25px;

    padding:15px 20px;

    border-radius:10px;

    background:#eff6ff;

    border:1px solid #bfdbfe;

    color:#1e40af;

}


/* RESPONSIVE */

@media(max-width:768px){

    .tbprod-images-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}


@media(max-width:500px){

    .tbprod-images-grid{

        grid-template-columns:1fr;

    }

}

/* ===============================
   FOOTER FORMULARIO PRODUCTO
================================ */

.tbprod-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 30px;

    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}


/* ===============================
   BOTÓN CANCELAR
================================ */

.tbprod-btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 120px;
    height: 44px;

    padding: 0 22px;

    background: #f1f5f9;
    color: #475569;

    border: 1px solid #e2e8f0;
    border-radius: 9px;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: all 0.25s ease;
}

.tbprod-btn-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;

    border-color: #cbd5e1;

    transform: translateY(-2px);
}


/* ===============================
   BOTÓN GUARDAR
================================ */

.tbprod-btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-width: 180px;
    height: 46px;

    padding: 0 24px;

    background: linear-gradient(
        135deg,
        #2583ff,
        #0869e8
    );

    color: #ffffff;

    border: none;
    border-radius: 9px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 7px 16px rgba(37, 131, 255, 0.22);

    transition: all 0.25s ease;
}


/* ICONO */

.tbprod-btn-save i {
    font-size: 15px;
}


/* HOVER */

.tbprod-btn-save:hover {
    background: linear-gradient(
        135deg,
        #1677ff,
        #005bd6
    );

    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(37, 131, 255, 0.30);
}


/* CLICK */

.tbprod-btn-save:active,
.tbprod-btn-cancel:active {
    transform: translateY(0);
}


/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 600px) {

    .tbprod-card-footer {
        flex-direction: column-reverse;
        gap: 12px;

        padding: 20px;
    }

    .tbprod-btn-cancel,
    .tbprod-btn-save {
        width: 100%;
    }

}

.contenedor {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.furmulario_pro {
    position: absolute;
    /* mantienes tus demás estilos */
}.contenedor {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.furmulario_pro {
    position: absolute; 
    /* mantienes tus demás estilos */

}

.boton-udate {
    background: #228b22;
    padding: 7px;
    border-radius: 5px;
    color: white;
}

.tb-loading{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:20px;

    padding:80px;

}

.tb-loading i{

    font-size:40px;

    color:#1677ff;

}

.tb-loading p{

    color:#64748b;

}

/*=========================================
    MODAL
==========================================*/

.modal_pro{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(15,23,42,.65);

    backdrop-filter:blur(6px);

    z-index:99999;

    padding:30px;

    overflow:auto;

}


.tbinv-modal{

    position:relative;

    width:100%;

    max-width:950px;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:

    0 30px 60px rgba(15,23,42,.25);

    animation:modalShow .35s ease;

}

@keyframes modalShow{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.tbinv-close{

    position:absolute;

    right:25px;

    top:25px;

    width:48px;

    height:48px;

    border-radius:50%;

    background:#fff;

    border:1px solid #e5e7eb;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:22px;

    color:#64748b;

    transition:.25s;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.tbinv-close:hover{

    background:#ef4444;

    color:#fff;

    transform:rotate(90deg);

}

.tbinv-header{

    display:flex;

    align-items:center;

    gap:25px;

    padding:35px;

    border-bottom:1px solid #eef2f7;

}

.tbinv-icon{

    width:75px;

    height:75px;

    border-radius:18px;

    background:linear-gradient(135deg,#2563eb,#1677ff);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:34px;

    box-shadow:0 15px 30px rgba(37,99,235,.20);

}

.tbinv-header h2{

    margin:0;

    font-size:38px;

    color:#0f172a;

}

.tbinv-header p{

    margin-top:8px;

    color:#64748b;

}

.tbinv-producto{

    margin:35px;

    display:flex;

    align-items:center;

    gap:25px;

    padding:25px;

    background:#f8fbff;

    border-radius:18px;

}

.tbinv-producto-img{

    width:130px;

    height:130px;

    border-radius:16px;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#2563eb;

    font-size:55px;

    box-shadow:0 10px 30px rgba(15,23,42,.08);

}

.tbinv-producto small{

    color:#64748b;

    font-weight:600;

}

.tbinv-producto h3{

    margin:10px 0;

    color:#0f172a;

    font-size:30px;

}

.tbinv-producto span{

    display:inline-block;

    padding:8px 18px;

    background:#dbeafe;

    color:#2563eb;

    border-radius:30px;

    font-weight:600;

}

.tbinv-grid{

    display:grid;

    grid-template-columns:repeat(1,1fr);

    gap:25px;

    padding:0 35px;

}

.tbinv-group{

    margin-bottom:25px;

}

.tbinv-group label{

    display:block;

    margin-bottom:10px;

    font-weight:700;

    color:#334155;

}

.tbinv-input{

    display:flex;

    align-items:center;

    border:1px solid #dbe2ea;

    border-radius:12px;

    overflow:hidden;

    transition:.3s;

}

.tbinv-input:hover{

    border-color:#1677ff;

}

.tbinv-input:focus-within{

    border-color:#1677ff;

    box-shadow:0 0 0 4px rgba(22,119,255,.10);

}

.tbinv-input i{

    width:60px;

    text-align:center;

    color:#94a3b8;

    font-size:18px;

}

.tbinv-input input{

    flex:1;

    border:none;

    outline:none;

    height:56px;

    font-size:15px;

    padding:0 15px;

}

#alertar{

    margin:25px 35px;

}

.tbinv-footer{

    display:flex;

    justify-content:flex-end;

    gap:18px;

    padding:35px;

    border-top:1px solid #eef2f7;

    margin-top:20px;

}

.tbinv-cancel{

    padding:16px 35px;

    border:none;

    border-radius:12px;

    background:#f1f5f9;

    color:#475569;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.tbinv-cancel:hover{

    background:#e2e8f0;

}

.tbinv-save{

    padding:16px 38px;

    border:none;

    border-radius:12px;

    background:linear-gradient(135deg,#2563eb,#1677ff);

    color:#fff;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.3s;

    box-shadow:0 12px 25px rgba(37,99,235,.20);

}

.tbinv-save:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(37,99,235,.30);

}

@media(max-width:900px){

    .tbinv-grid{

        grid-template-columns:1fr;

    }

    .tbinv-producto{

        flex-direction:column;

        text-align:center;

    }

    .tbinv-footer{

        flex-direction:column-reverse;

    }

    .tbinv-save,

    .tbinv-cancel{

        width:100%;

        justify-content:center;

    }

}


/*=====================================
        MODAL ELIMINAR
=====================================*/

.tbdelete{

    position:relative;

    width:100%;

    max-width:620px;

    margin:auto;

    background:#fff;

    border-radius:20px;

    padding:40px;

    box-shadow:0 25px 60px rgba(0,0,0,.20);

    text-align:center;

}


/*============================*/

.tbdelete-close{

    position:absolute;

    right:25px;

    top:25px;

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f8fafc;

    cursor:pointer;

    transition:.3s;

    color:#64748b;

}

.tbdelete-close:hover{

    background:#ef4444;

    color:#fff;

    transform:rotate(90deg);

}


/*============================*/

.tbdelete-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#fee2e2;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    color:#ef4444;

}


/*============================*/

.tbdelete h2{

    margin-top:25px;

    color:#0f172a;

    font-size:34px;

}

.tbdelete-text{

    color:#64748b;

    margin-top:10px;

}


/*============================*/

.tbdelete-card{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:30px;

    background:#f8fafc;

    border-radius:15px;

    padding:20px;

}

.tbdelete-image{

    width:90px;

    height:90px;

    border-radius:15px;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    color:#2563eb;

}

.tbdelete-info{

    text-align:left;

}

.tbdelete-info h3{

    margin:0;

    font-size:22px;

    color:#0f172a;

}

.tbdelete-info span{

    color:#2563eb;

}


/*============================*/

.tbdelete-alert{

    margin-top:25px;

    display:flex;

    gap:12px;

    align-items:center;

    padding:18px;

    border-radius:12px;

    background:#fff1f2;

    color:#dc2626;

    border:1px solid #fecaca;

}


/*============================*/

.tbdelete-footer{

    display:flex;

    gap:15px;

    margin-top:35px;

}

.tbdelete-footer button{

    flex:1;

}


/*============================*/

.tbdelete-cancel{

    height:52px;

    border:none;

    border-radius:12px;

    background:#f1f5f9;

    cursor:pointer;

    font-weight:600;

}

.tbdelete-cancel:hover{

    background:#e2e8f0;

}


/*============================*/

.tbdelete-delete{

    height:52px;

    border:none;

    border-radius:12px;

    background:linear-gradient(135deg,#ef4444,#dc2626);

    color:#fff;

    cursor:pointer;

    font-weight:600;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    transition:.3s;

}

.tbdelete-delete:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(220,38,38,.25);

}


/*============================*/

.tbdelete-loading{

    padding:80px;

    text-align:center;

}

.tbdelete-loading i{

    font-size:45px;

    color:#2563eb;

}

.tbdelete-loading p{

    margin-top:20px;

}

/*=================================================
                TITANBYTE POS
==================================================*/

:root{

    --tb-primary:#2563eb;
    --tb-primary-dark:#1d4ed8;
    --tb-success:#10b981;
    --tb-danger:#ef4444;
    --tb-warning:#f59e0b;

    --tb-bg:#f4f7fb;
    --tb-card:#ffffff;

    --tb-text:#111827;
    --tb-text2:#6b7280;

    --tb-border:#e5e7eb;

    --tb-radius:18px;

    --tb-shadow:
    0 8px 25px rgba(0,0,0,.06);

}

/*==============================*/

.tbventa-page{

    padding:35px;

    background:var(--tb-bg);

    height:140vh;
    position: absolute;
    top: 31px;
    left: 255px;
    width: 79%;
        overflow-y: scroll;

}

/*==============================*/

.tbventa-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.tbventa-small{

    color:var(--tb-primary);

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.tbventa-header h1{

    margin-top:6px;

    margin-bottom:6px;

    font-size:34px;

    color:var(--tb-text);

}

.tbventa-header p{

    color:var(--tb-text2);

}

/*==============================*/

.tbventa-top-grid{

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap:25px;

    align-items:start;
  

}

/*==============================*/

.tbventa-card{

    background:#fff;

    border-radius:var(--tb-radius);

    box-shadow:var(--tb-shadow);

    overflow:hidden;

}

/*==============================*/

.tbventa-card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px;

    border-bottom:1px solid var(--tb-border);

}

.tbventa-card-header h3{

    margin:0;

    font-size:19px;

    color:var(--tb-text);

}

.tbventa-card-header p{

    margin-top:5px;

    color:var(--tb-text2);

    font-size:13px;

}

/*==============================*/

.tbventa-card-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:

    linear-gradient(135deg,

    var(--tb-primary),

    #60a5fa);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    margin-right:18px;

}

/*==============================*/

.tbventa-card-body{

    padding:25px;

}

/*==============================*/

.tbventa-grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:20px;

}

/*==============================*/

.tbventa-card label{

    display:block;

    margin-bottom:8px;

    color:#6b7280;

    font-size:13px;

    font-weight:600;

}

/*==============================*/

.tbventa-card input,

.tbventa-card select{

    width:100%;

    height:48px;

    border:1px solid var(--tb-border);

    border-radius:12px;

    padding:0 16px;

    font-size:15px;

    transition:.3s;

    background:#fff;

}

.tbventa-card input:focus,

.tbventa-card select:focus{

    outline:none;

    border-color:var(--tb-primary);

    box-shadow:

    0 0 0 4px

    rgba(37,99,235,.15);

}

/*==============================*/

.tbventa-btn-mini{

    border:none;

    background:var(--tb-primary);

    color:#fff;

    padding:11px 18px;

    border-radius:12px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.tbventa-btn-mini:hover{

    background:var(--tb-primary-dark);

    transform:translateY(-2px);

}

/*==============================*/

.tbventa-tags{

    margin-top:10px;

}

.tbventa-tags span{

    display:inline-flex;

    align-items:center;

    padding:8px 15px;

    background:#ecfdf5;

    color:#047857;

    border-radius:25px;

    font-size:13px;

    font-weight:600;

}

/*==============================*/

.tbventa-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 18px;

    border-radius:30px;

    background:#dcfce7;

    color:#166534;

    font-size:13px;

    font-weight:700;

}

/*==============================
            RESUMEN
==============================*/

.tbventa-summary{

    background:#fff;

    border-radius:18px;

    box-shadow:var(--tb-shadow);

    padding:25px;

    position:sticky;

    top:20px;

}

.tbventa-summary h3{

    margin-bottom:25px;

    font-size:22px;

    color:var(--tb-text);

}

/*==============================*/

.tbventa-total-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

    font-size:15px;

}

.tbventa-total-item strong{

    font-size:18px;

    color:#111827;

}

/*==============================*/

.tbventa-grand-total{

    margin-top:20px;

    margin-bottom:25px;

    background:

    linear-gradient(

    135deg,

    var(--tb-primary),

    #60a5fa);

    color:#fff;

    border-radius:18px;

    padding:22px;

}

.tbventa-grand-total span{

    font-size:14px;

    opacity:.9;

}

.tbventa-grand-total h2{

    margin-top:10px;

    font-size:34px;

}

/*==============================*/

.tbventa-payment{

    margin-bottom:18px;

}

.tbventa-payment label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    color:#6b7280;

}

.tbventa-payment input,

.tbventa-payment select{

    width:100%;

    height:48px;

    border-radius:12px;

    border:1px solid var(--tb-border);

    padding:0 15px;

}

.tbventa-payment input:focus,

.tbventa-payment select:focus{

    outline:none;

    border-color:var(--tb-primary);

}

/*==============================*/

.tbventa-btn-facturar{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:

    linear-gradient(

    135deg,

    var(--tb-primary),

    #3b82f6);

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.tbventa-btn-facturar:hover{

    transform:translateY(-3px);

    box-shadow:

    0 12px 25px

    rgba(37,99,235,.35);

}

/*====================================================
        BUSCADOR DE PRODUCTOS
=====================================================*/

.tbventa-product-section{

    margin-top:30px;

    background:#fff;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    overflow:hidden;

}

.tbventa-product-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 30px;

    border-bottom:1px solid #eef2f7;

}

.tbventa-product-header h2{

    margin-top:5px;

    font-size:24px;

    color:#111827;

}

.tbventa-search{

    display:flex;

    gap:18px;

    padding:30px;

    background:#f8fafc;

}

/*================================*/

.tbventa-search-box{

    flex:1;

    display:flex;

    align-items:center;

    background:#fff;

    border:2px solid #e5e7eb;

    border-radius:15px;

    transition:.3s;

}

.tbventa-search-box:hover{

    border-color:#3b82f6;

}

.tbventa-search-box:focus-within{

    border-color:#2563eb;

    box-shadow:0 0 0 5px rgba(37,99,235,.10);

}

.tbventa-search-box i{

    width:60px;

    text-align:center;

    font-size:22px;

    color:#3b82f6;

}

.tbventa-search-box input{

    width:100%;

    height:58px;

    border:none;

    outline:none;

    background:none;

    font-size:16px;

}

/*================================*/

.tbventa-btn-add{

    width:190px;

    border:none;

    border-radius:15px;

    background:linear-gradient(135deg,#10b981,#059669);

    color:#fff;

    font-weight:700;

    font-size:15px;

    cursor:pointer;

    transition:.35s;

}

.tbventa-btn-add:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(16,185,129,.30);

}

/*====================================================
        PRODUCTO SELECCIONADO
=====================================================*/

.tbventa-selected{

    margin:0 30px 30px;

    border:1px solid #edf2f7;

    border-radius:18px;

    display:grid;

    grid-template-columns:

    90px

    1.8fr

    140px

    160px

    140px;

    align-items:center;

    padding:20px;

    gap:20px;

}

.tbventa-selected-img{

    width:70px;

    height:70px;

    border-radius:15px;

    background:#eff6ff;

    display:flex;

    align-items:center;

    justify-content:center;

}

.tbventa-selected-img i{

    font-size:30px;

    color:#2563eb;

}

.tbventa-selected-info small{

    color:#6b7280;

    letter-spacing:1px;

}

.tbventa-selected-info h3{

    margin-top:6px;

    color:#111827;

    font-size:18px;

}

.tbventa-stock span,

.tbventa-price span{

    display:block;

    color:#9ca3af;

    font-size:13px;

}

.tbventa-stock strong{

    color:#16a34a;

    font-size:22px;

}

.tbventa-price strong{

    color:#2563eb;

    font-size:22px;

}

.tbventa-cantidad input{

    width:100%;

    height:50px;

    border-radius:12px;

    border:1px solid #d1d5db;

    text-align:center;

    font-weight:bold;

}

/*====================================================
                    TABLA
=====================================================*/

.tbventa-table{

    padding:0 30px 30px;

    overflow:auto;

}

.tbventa-table table{

    width:100%;

    border-collapse:collapse;

}

.tbventa-table thead{

    background:#2563eb;

    color:#fff;

}

.tbventa-table th{

    padding:18px;

    font-size:14px;

    font-weight:600;

}

.tbventa-table td{

    padding:18px;

    border-bottom:1px solid #edf2f7;

    vertical-align:middle;

}

.tbventa-table tbody tr{

    transition:.30s;

}

.tbventa-table tbody tr:hover{

    background:#f8fafc;

}

/*================================*/

.tbventa-img{

    width:60px;

    height:60px;

    border-radius:12px;

    overflow:hidden;

    background:#f3f4f6;

}

.tbventa-img img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*================================*/

.tbventa-product-name{

    font-weight:700;

    color:#111827;

}

.tbventa-product-desc{

    margin-top:4px;

    font-size:13px;

    color:#6b7280;

}

/*================================*/

.tb-stock-ok{

    color:#16a34a;

    font-weight:bold;

}

.tb-stock-medium{

    color:#d97706;

    font-weight:bold;

}

.tb-stock-low{

    color:#dc2626;

    font-weight:bold;

}

/*================================*/

.tbventa-delete{

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#fee2e2;

    color:#dc2626;

    cursor:pointer;

    transition:.3s;

}

.tbventa-delete:hover{

    background:#dc2626;

    color:#fff;

}

/*====================================================
                    FOOTER
=====================================================*/

.tbventa-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px;

    border-top:1px solid #edf2f7;

}

.tbventa-actions{

    display:flex;

    gap:15px;

}

/*================================*/

.tbventa-btn-primary,

.tbventa-btn-secondary,

.tbventa-btn-light,

.tbventa-btn-danger{

    border:none;

    border-radius:14px;

    padding:15px 25px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.30s;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:10px;

}

.tbventa-btn-primary{

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff;

}

.tbventa-btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(37,99,235,.30);

}

.tbventa-btn-secondary{

    background:#10b981;

    color:#fff;

}

.tbventa-btn-secondary:hover{

    background:#059669;

}

.tbventa-btn-light{

    background:#f3f4f6;

    color:#374151;

}

.tbventa-btn-light:hover{

    background:#e5e7eb;

}

.tbventa-btn-danger{

    background:#ef4444;

    color:#fff;

}

.tbventa-btn-danger:hover{

    background:#dc2626;

}

/*====================================================
                    RESPONSIVE
=====================================================*/

@media(max-width:1300px){

.tbventa-top-grid{

grid-template-columns:1fr 1fr;

}

.tbventa-summary{

position:relative;

top:0;

}

}

@media(max-width:992px){

.tbventa-grid-2{

grid-template-columns:1fr;

}

.tbventa-search{

flex-direction:column;

}

.tbventa-btn-add{

width:100%;

height:55px;

}

.tbventa-selected{

grid-template-columns:1fr;

text-align:center;

}

.tbventa-selected-img{

margin:auto;

}

.tbventa-footer{

flex-direction:column;

gap:20px;

}

.tbventa-actions{

width:100%;

flex-wrap:wrap;

}

.tbventa-btn-primary{

width:100%;

justify-content:center;

}

}

@media(max-width:768px){

.tbventa-page{

padding:15px;

}

.tbventa-header h1{

font-size:26px;

}

.tbventa-card{

border-radius:15px;

}

.tbventa-product-header{

padding:20px;

}

.tbventa-search{

padding:20px;

}

.tbventa-table{

padding:20px;

}

.tbventa-footer{

padding:20px;
 

}

}

.subtotal,.iva,.total {
    color: black;
    font-weight: 700;
    font-family: sans-serif;
    font-size: 17px;
}


#contenedorGuardarCliente {
    display: none;
    margin-top: 20px;
}

.tbventa-btn-guardar-cliente {
    border: none;
    padding: 13px 22px;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
}

.tbventa-btn-guardar-cliente:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
}

/* =========================================
   TITANBYTE - SOLO LISTA DE VENTAS
========================================= */

.tb-lista-ventas{
    padding: 28px 32px;
    background: #f6f8fc;
    min-height: 100vh;
}

.tb-lista-ventas > h3{
    margin: 0 0 22px;
    font-size: 22px;
    font-weight: 700;
    color: #172033;
}


/* FILTROS */

.tb-lista-ventas .buscar_ventas{
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,.035);
}

.tb-lista-ventas .buscar_ventas_pro{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.tb-lista-ventas .buscar_ventas_pro li{
    margin: 0;
}

.tb-lista-ventas .buscar_ventas_pro form{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

.tb-lista-ventas .buscar_ventas_pro label{
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.tb-lista-ventas .buscar_ventas_pro input[type="text"],
.tb-lista-ventas .buscar_ventas_pro input[type="date"]{
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    outline: none;
    transition: .2s;
}

.tb-lista-ventas .buscar_ventas_pro input:focus{
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

.tb-lista-ventas .buscar_ventas_pro input[type="submit"]{
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

.tb-lista-ventas .buscar_ventas_pro input[type="submit"]:hover{
    background: #1d4ed8;
    transform: translateY(-1px);
}


/* CONTENEDOR */

.tb-lista-ventas .table-promax{
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 5px 20px rgba(15,23,42,.05);
    overflow: hidden;
}


/* TABLA */

.tb-lista-ventas .table_pro{
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.tb-lista-ventas .table_pro thead th{
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 14px 12px;
    border: 0;
    border-bottom: 1px solid #e8edf5;
    white-space: nowrap;
}

.tb-lista-ventas .table_pro tbody td{
    padding: 13px 12px;
    color: #334155;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid #eef2f7;
}

.tb-lista-ventas .table_pro tbody tr{
    transition: background .18s ease;
}

.tb-lista-ventas .table_pro tbody tr:hover{
    background: #f8fbff;
}

.tb-lista-ventas .table_pro tbody tr:last-child td{
    border-bottom: 0;
}

.tb-lista-ventas .table_pro .precio{
    font-weight: 700;
    color: #0f172a;
}


/* BOTONES - SOLO ESTA TABLA */

.tb-lista-ventas .table_pro td button{
    width: 38px !important;
    height: 36px;
    padding: 0 !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    transition: .2s;
}

.tb-lista-ventas .table_pro .imprime{
    background: #fff7e6;
    color: #f59e0b;
}

.tb-lista-ventas .table_pro .imprime:hover{
    background: #f59e0b;
    color: #fff;
    transform: translateY(-2px);
}

.tb-lista-ventas .table_pro .anulada_pro{
    background: #eff6ff;
    color: #2563eb;
}

.tb-lista-ventas .table_pro .anulada_pro:hover{
    background: #2563eb;
    color: #fff;
    transform: translateY(-2px);
}

.tb-lista-ventas .table_pro .anular{
    background: #fef2f2;
    color: #ef4444;
    cursor: not-allowed;
}


/* PAGINACIÓN - SOLO VENTAS */

.tb-lista-ventas .paginador{
    display: flex;
    justify-content: flex-end;
    padding: 20px 12px 12px;
}

.tb-lista-ventas .paginador ul{
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tb-lista-ventas .paginador li{
    min-width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
}

.tb-lista-ventas .paginador li a{
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #fff;
    color: #64748b;
    text-decoration: none;
    transition: .2s;
}

.tb-lista-ventas .paginador li a:hover{
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.tb-lista-ventas .paginador .pagina{
    background: #2563eb;
    color: #fff;
}


/* RESPONSIVE */

@media(max-width:900px){

    .tb-lista-ventas{
        padding: 20px 15px;
    }

    .tb-lista-ventas .buscar_ventas_pro{
        flex-direction: column;
        align-items: stretch;
    }

    .tb-lista-ventas .table-promax{
        overflow-x: auto;
    }

    .tb-lista-ventas .table_pro{
        min-width: 850px;
    }
}


.buscar_ventas{
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;

    box-shadow: 0 4px 15px rgba(0,0,0,.035);
    margin-top: 10px;
}

.buscar_ventas_pro{
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.buscar_ventas_pro li{
    margin: 0;
}

.buscar_ventas_pro form{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

.buscar_ventas_pro label{
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.buscar_ventas_pro input[type="text"],
.buscar_ventas_pro input[type="date"]{
    height: 40px;
    padding: 0 12px;

    border: 1px solid #dfe5ee;
    border-radius: 8px;

    background: #f8fafc;
    color: #334155;

    font-size: 13px;

    outline: none;

    transition: .2s;
}

.buscar_ventas_pro input:focus{
    background: #fff;
    border-color: #2563eb;

    box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

.buscar_ventas_pro input[type="submit"]{
    height: 40px;
    padding: 0 18px;

    border: 0;
    border-radius: 8px;

    background: #2563eb;
    color: white;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition: .2s;
}

.buscar_ventas_pro input[type="submit"]:hover{
    background: #1d4ed8;
    transform: translateY(-1px);
}

.botones_enlaces  li{
    background: white;
   
    color: black;
    padding: 15px;
  box-shadow: 5px 5px 4px 4px rgba(7, 8, 11, 7%);
  border-radius: 10px;
  
  transition: all 0.5s;

   
}

.botones_enlaces  a{
color: black;
font-weight: 700;
text-decoration: none;
list-style: w;
font-size: 17px;


   
}

.botones_enlaces  li:hover{
    background: #0567ed;
   
    

   
}

/* =========================================
   MODAL ANULAR FACTURA
========================================= */

.tbanular-modal{
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: auto;
    padding: 35px;
    background: #ffffff;
    border-radius: 18px;
    font-family: Arial, sans-serif;
}


/* =========================================
   BOTON CERRAR
========================================= */

.tbanular-close{
    position: absolute;
    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 10px;

    background: #f1f5f9;
    color: #64748b;

    font-size: 18px;
    cursor: pointer;

    transition: .2s ease;
}

.tbanular-close:hover{
    background: #e2e8f0;
    color: #0f172a;
}


/* =========================================
   ICONO PRINCIPAL
========================================= */

.tbanular-icon{
    width: 65px;
    height: 65px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff1f2;
    color: #ef4444;

    font-size: 28px;
}


/* =========================================
   ENCABEZADO
========================================= */

.tbanular-header{
    text-align: center;
    margin-bottom: 25px;
}

.tbanular-header h2{
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 24px;
    font-weight: 700;
}

.tbanular-header p{
    margin: 0;
    color: #64748b;
    font-size: 14px;
}


/* =========================================
   ADVERTENCIA
========================================= */

.tbanular-warning{
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 16px;
    margin-bottom: 20px;

    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;

    color: #9a3412;
}

.tbanular-warning i{
    font-size: 20px;
    flex-shrink: 0;
}

.tbanular-warning p{
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}


/* =========================================
   DATOS DE FACTURA
========================================= */

.tbanular-info{
    overflow: hidden;

    margin-bottom: 18px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.tbanular-info-row{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px 18px;

    border-bottom: 1px solid #e2e8f0;
}

.tbanular-info-row:last-child{
    border-bottom: none;
}

.tbanular-info-row span{
    display: flex;
    align-items: center;
    gap: 9px;

    color: #64748b;
    font-size: 13px;
}

.tbanular-info-row span i{
    color: #2563eb;
}

.tbanular-info-row strong{
    color: #0f172a;
    font-size: 14px;
}


/* =========================================
   NOTA
========================================= */

.tbanular-note{
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 13px 15px;
    margin-bottom: 25px;

    background: #eff6ff;
    border-radius: 10px;

    color: #475569;
}

.tbanular-note i{
    margin-top: 2px;
    color: #2563eb;
}

.tbanular-note p{
    margin: 0;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================
   BOTONES
========================================= */

.tbanular-actions{
    display: flex;
    gap: 12px;
}

.tbanular-actions button{
    flex: 1;

    min-height: 45px;

    border: none;
    border-radius: 9px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: .2s ease;
}


/* CANCELAR */

.tbanular-btn-cancel{
    background: #f1f5f9;
    color: #334155;
}

.tbanular-btn-cancel:hover{
    background: #e2e8f0;
}


/* ANULAR */

.tbanular-btn-confirm{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: #ef4444;
    color: white;

    box-shadow: 0 5px 15px rgba(239,68,68,.20);
}

.tbanular-btn-confirm:hover{
    background: #dc2626;

    transform: translateY(-1px);

    box-shadow: 0 7px 18px rgba(239,68,68,.28);
}


/* =========================================
   MENSAJES
========================================= */

.tbanular-alert{
    margin-top: 15px;
}

.tbanular-error{
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 18px;

    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 12px;

    color: #be123c;
}

.tbanular-error i{
    font-size: 24px;
}

.tbanular-error strong{
    display: block;
    margin-bottom: 3px;
}

.tbanular-error p{
    margin: 0;
    font-size: 13px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 550px){

    .tbanular-modal{
        padding: 30px 20px 22px;
        border-radius: 14px;
    }

    .tbanular-actions{
        flex-direction: column-reverse;
    }

    .tbanular-info-row{
        padding: 13px;
    }

}


/*==================================================
    CONTENEDOR GENERAL
==================================================*/

.tbconfig-wrapper{

    width:100%;

    max-width:1450px;

    margin:30px auto;

    padding:0 25px;

    font-family:'Segoe UI',sans-serif;
    position: absolute;
    top: 53px;
    width: 80%;
    left: 253px;

}



/*==================================================
    CABECERA
==================================================*/

.tbconfig-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.tbconfig-header h2{

    margin:0;

    font-size:32px;

    font-weight:700;

    color:#0f172a;

}

.tbconfig-header h2 i{

    color:#2563eb;

    margin-right:8px;

}

.tbconfig-header p{

    margin-top:8px;

    color:#64748b;

    font-size:15px;

}



/*==================================================
    BOTON PANEL
==================================================*/

.tbconfig-btn-panel{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#fff;

    background:#2563eb;

    padding:14px 22px;

    border-radius:12px;

    font-weight:600;

    transition:.30s;

}

.tbconfig-btn-panel:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}



/*==================================================
    GRID
==================================================*/

.tbconfig-grid{

    display:grid;

    grid-template-columns:45% 52%;

    gap:30px;

}



/*==================================================
    TARJETAS
==================================================*/

.tbconfig-card{

    background:#ffffff;

    border-radius:18px;

    padding:30px;

    box-shadow:

    0 8px 25px rgba(15,23,42,.08);

    border:1px solid #e5e7eb;

}



/*==================================================
    TARJETA EMPRESA
==================================================*/

.tbconfig-company{

    text-align:center;

}



/*==================================================
    LOGO
==================================================*/

.tbconfig-logo{

    width:140px;

    height:140px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

    background:#eff6ff;

    border:5px solid #dbeafe;

    display:flex;

    align-items:center;

    justify-content:center;

}

.tbconfig-logo img{

    width:100%;

}



/*==================================================
    NOMBRE
==================================================*/

.tbconfig-company h3{

    margin-top:20px;

    font-size:26px;

    color:#0f172a;

}

.tbconfig-slogan{

    display:block;

    color:#64748b;

    margin-top:6px;

    font-size:14px;

}



/*==================================================
    ESTADO
==================================================*/

.tbconfig-status{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:25px;

    font-weight:600;

    color:#15803d;

}

.tbconfig-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#22c55e;

}



/*==================================================
    DIVISOR
==================================================*/

.tbconfig-divider{

    width:100%;

    height:1px;

    background:#e5e7eb;

    margin:30px 0;

}

/*==================================================
    INFORMACIÓN EMPRESA
==================================================*/

.tbconfig-info{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.tbconfig-info div{

    display:flex;

    align-items:center;

    gap:14px;

    padding:9px 16px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:14px;

    transition:.30s;

}

.tbconfig-info div:hover{

    background:#eff6ff;

    border-color:#93c5fd;

    transform:translateX(4px);

}

.tbconfig-info i{

    width:45px;
    height:45px;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#2563eb;

    color:#fff;

    font-size:18px;

}

.tbconfig-info span{

    display:block;

    color:#64748b;

    font-size:12px;

    margin-bottom:4px;

}

.tbconfig-info strong{

    display:block;

    color:#0f172a;

    font-size:15px;

    font-weight:700;

}



/*==================================================
    TITULO FORMULARIO
==================================================*/

.tbconfig-title{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:24px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:25px;

}

.tbconfig-title i{

    color:#2563eb;

    font-size:26px;

}



/*==================================================
    ALERTA
==================================================*/

.tbconfig-alert{

    margin-bottom:25px;

}

.tbconfig-alert p{

    padding:14px;

    border-radius:10px;

    background:#dcfce7;

    color:#166534;

    border:1px solid #bbf7d0;

    font-weight:600;

}



/*==================================================
    FILAS
==================================================*/

.tbconfig-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;

}



/*==================================================
    GRUPOS
==================================================*/

.tbconfig-group{

    margin-bottom:22px;

}

.tbconfig-group label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:700;

    color:#334155;

    letter-spacing:.4px;

}



/*==================================================
    INPUTS
==================================================*/

.tbconfig-group input{

    width:100%;

    height:54px;

    padding:0 18px;

    border:1px solid #d1d5db;

    border-radius:12px;

    background:#fff;

    color:#0f172a;

    font-size:15px;

    transition:.30s;

    outline:none;

}

.tbconfig-group input:hover{

    border-color:#60a5fa;

}

.tbconfig-group input:focus{

    border-color:#2563eb;

    box-shadow:

    0 0 0 4px rgba(37,99,235,.12);

}



/*==================================================
    PLACEHOLDER
==================================================*/

.tbconfig-group input::placeholder{

    color:#94a3b8;

}



/*==================================================
    INPUT IVA
==================================================*/

.tbconfig-group input[name="iva"]{

    text-align:center;

    font-weight:700;

    color:#2563eb;

    font-size:18px;

}



/*==================================================
    EFECTO TARJETA FORMULARIO
==================================================*/

.tbconfig-card:hover{

    box-shadow:

    0 15px 40px rgba(15,23,42,.10);

    transition:.35s;

}

/*==================================================
    FOOTER FORMULARIO
==================================================*/

.tbconfig-footer{

    margin-top:35px;

    display:flex;

    justify-content:flex-end;

    gap:18px;

    border-top:1px solid #e5e7eb;

    padding-top:25px;

}



/*==================================================
    BOTONES
==================================================*/

.tbconfig-btn-save,
.tbconfig-btn-reset{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:190px;

    height:52px;

    padding:0 28px;

    border:none;

    border-radius:12px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}



/*==================================================
    BOTON GUARDAR
==================================================*/

.tbconfig-btn-save{

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    box-shadow:

    0 12px 25px rgba(37,99,235,.25);

}

.tbconfig-btn-save:hover{

    transform:translateY(-3px);

    box-shadow:

    0 18px 35px rgba(37,99,235,.35);

}

.tbconfig-btn-save:active{

    transform:scale(.98);

}



/*==================================================
    BOTON RESTAURAR
==================================================*/

.tbconfig-btn-reset{

    background:#f8fafc;

    color:#475569;

    border:1px solid #dbe2ea;

}

.tbconfig-btn-reset:hover{

    background:#eef2f7;

    color:#0f172a;

}



/*==================================================
    ICONOS BOTONES
==================================================*/

.tbconfig-btn-save i,
.tbconfig-btn-reset i{

    font-size:16px;

}



/*==================================================
    ANIMACIONES
==================================================*/

.tbconfig-card{

    animation:tbconfigFade .45s ease;

}

@keyframes tbconfigFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*==================================================
    SCROLL BONITO
==================================================*/

.tbconfig-wrapper::-webkit-scrollbar{

    width:8px;

}

.tbconfig-wrapper::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

.tbconfig-wrapper::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}



/*==================================================
    RESPONSIVE TABLET
==================================================*/

@media(max-width:1100px){

    .tbconfig-grid{

        grid-template-columns:1fr;

    }

    .tbconfig-company{

        order:2;

    }

}



/*==================================================
    RESPONSIVE MOVIL
==================================================*/

@media(max-width:600px){

    .tbconfig-wrapper {
  
    top: 150px;   
    
     left: 0px; 
}

    .tbconfig-wrapper{

        padding:15px;

    }

    .tbconfig-header{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .tbconfig-header h2{

        font-size:26px;

    }

    .tbconfig-row{

        grid-template-columns:1fr;

        gap:0;

    }

    .tbconfig-footer{

        flex-direction:column-reverse;

    }

    .tbconfig-btn-save,
    .tbconfig-btn-reset{

        width:100%;

    }

    .tbconfig-logo{

        width:110px;

        height:110px;

    }

}



/*==================================================
    EFECTOS INPUTS
==================================================*/

.tbconfig-group{

    position:relative;

}

.tbconfig-group input{

    transition:

    border-color .3s,

    box-shadow .3s,

    transform .3s;

}

.tbconfig-group input:focus{

    transform:translateY(-2px);

}



/*==================================================
    SOMBRA GENERAL
==================================================*/

.tbconfig-card{

    transition:

    transform .35s,

    box-shadow .35s;

}

.tbconfig-card:hover{

    transform:translateY(-4px);

}



/*==================================================
    BOTON PANEL
==================================================*/

.tbconfig-btn-panel{

    box-shadow:

    0 10px 25px rgba(37,99,235,.18);

}

.tbconfig-btn-panel:hover{

    box-shadow:

    0 16px 35px rgba(37,99,235,.30);

}


/*==================================================
                CONTENEDOR
==================================================*/

.tbcompra-contenedor{

    max-width:1700px;

    margin:auto;

    padding:30px;

}


/*==================================================
                HEADER
==================================================*/

.tbcompra-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.tbcompra-etiqueta{

    background:#dbeafe;

    color:#2563eb;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}

.tbcompra-header h2{

    margin-top:12px;

    font-size:36px;

    color:#0f172a;

    font-weight:700;

}

.tbcompra-header p{

    margin-top:8px;

    color:#64748b;

    font-size:15px;

}



/*==================================================
            GRID SUPERIOR
==================================================*/

.tbcompra-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    margin-bottom:25px;

}



/*==================================================
                CARD
==================================================*/

.tbcompra-card{

    background:#fff;

    border-radius:18px;

    padding:28px;

    box-shadow:

        0 12px 35px rgba(15,23,42,.06);

    border:1px solid #eef2f7;

}



/*==================================================
            HEADER CARD
==================================================*/

.tbcompra-card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:25px;

}

.tbcompra-card-header>div:nth-child(2){

    flex:1;

    margin-left:18px;

}

.tbcompra-card-header h3{

    color:#0f172a;

    font-size:22px;

    margin:0;

}

.tbcompra-card-header p{

    margin-top:5px;

    color:#94a3b8;

}



/*==================================================
                ICONO
==================================================*/

.tbcompra-icon{

    width:55px;

    height:55px;

    border-radius:16px;

    background:#eff6ff;

    display:flex;

    justify-content:center;

    align-items:center;

}

.tbcompra-icon i{

    font-size:22px;

    color:#2563eb;

}



/*==================================================
            BOTÓN NUEVO
==================================================*/

.tbcompra-btn-nuevo{

    border:none;

    background:#2563eb;

    color:#fff;

    padding:11px 18px;

    border-radius:10px;

    cursor:pointer;

    font-weight:600;

    transition:.30s;

}

.tbcompra-btn-nuevo:hover{

    background:#1d4ed8;

}



/*==================================================
            GRID INPUTS
==================================================*/

.tbcompra-grid2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:20px;

}



/*==================================================
            LABEL
==================================================*/

.tbcompra-card label{

    display:block;

    margin-bottom:8px;

    color:#475569;

    font-size:14px;

    font-weight:600;

}



/*==================================================
            INPUTS
==================================================*/

.tbcompra-card input,

.tbcompra-card select{

    width:100%;

    height:50px;

    border:1px solid #dbe2ea;

    border-radius:12px;

    padding:0 16px;

    font-size:15px;

    outline:none;

    transition:.30s;

    background:#fff;

}

.tbcompra-card input:focus,

.tbcompra-card select:focus{

    border-color:#2563eb;

    box-shadow:

    0 0 0 4px rgba(37,99,235,.12);

}



/*==================================================
            ESTADO
==================================================*/

.tbcompra-estado{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#dcfce7;

    color:#16a34a;

    padding:10px 16px;

    border-radius:30px;

    font-weight:700;

}


/*==================================================
            BUSCADOR
==================================================*/

.tbcompra-buscador{

    display:flex;

    align-items:center;

    gap:15px;

    background:#fff;

    border:2px solid #e5e7eb;

    border-radius:15px;

    padding:15px 20px;

    transition:.30s;

}

.tbcompra-buscador:hover{

    border-color:#93c5fd;

}

.tbcompra-buscador:focus-within{

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.tbcompra-buscador i{

    color:#64748b;

    font-size:22px;

}

.tbcompra-buscador input{

    flex:1;

    border:none !important;

    box-shadow:none !important;

    height:45px;

    font-size:16px;

    background:none;

}

.tbcompra-btn-buscar{

    background:#2563eb;

    color:#fff;

    border:none;

    border-radius:12px;

    padding:14px 25px;

    cursor:pointer;

    font-weight:600;

    transition:.30s;

}

.tbcompra-btn-buscar:hover{

    background:#1d4ed8;

}



/*==================================================
        PRODUCTO SELECCIONADO
==================================================*/

.tbcompra-producto{

    display:grid;

    grid-template-columns:160px 1fr repeat(4,180px);

    gap:20px;

    align-items:center;

}

.tbcompra-producto-img{

    width:150px;

    height:150px;

    border-radius:18px;

    background:#f8fafc;

    border:1px solid #e5e7eb;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.tbcompra-producto-img img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.tbcompra-producto-info h2{

    font-size:26px;

    color:#0f172a;

    margin-bottom:8px;

}

.tbcompra-producto-info p{

    color:#64748b;

    line-height:1.6;

}

.tbcompra-dato{

    background:#f8fafc;

    border-radius:15px;

    padding:18px;

    text-align:center;

    border:1px solid #e5e7eb;

}

.tbcompra-dato label{

    display:block;

    color:#64748b;

    margin-bottom:10px;

}

.tbcompra-dato strong{

    color:#2563eb;

    font-size:23px;

}

.tbcompra-input{

    display:flex;

    flex-direction:column;

}

.tbcompra-input input{

    text-align:center;

    font-size:18px;

    font-weight:700;

}

.tbcompra-utilidad{

    background:#dcfce7;

    border-radius:15px;

    text-align:center;

    padding:18px;

}

.tbcompra-utilidad span{

    color:#15803d;

}

.tbcompra-utilidad h2{

    color:#166534;

    font-size:34px;

    margin-top:8px;

}

.tbcompra-acciones{

    display:flex;

    justify-content:center;

}

.tbcompra-btn-agregar{

    width:100%;

    height:55px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.30s;

}

.tbcompra-btn-agregar:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(37,99,235,.25);

}



/*==================================================
            CONTENIDO
==================================================*/

.tbcompra-contenido{

    display:grid;

    grid-template-columns:1fr 380px;

    gap:25px;

    margin-top:25px;

}



/*==================================================
                TABLA
==================================================*/

.tbcompra-tabla-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 10px 30px rgba(15,23,42,.06);

}

.tbcompra-table{

    width:100%;

    border-collapse:collapse;

}

.tbcompra-table thead{

    background:#2563eb;

    color:#fff;

}

.tbcompra-table th{

    padding:18px;

    font-size:14px;

}

.tbcompra-table td{

    padding:16px;

    border-bottom:1px solid #edf2f7;

    vertical-align:middle;

}

.tbcompra-table tbody tr{

    transition:.25s;

}

.tbcompra-table tbody tr:hover{

    background:#f8fafc;

}

.tbcompra-table img{

    width:55px;

    border-radius:10px;

}



/*==================================================
            RESUMEN
==================================================*/

.tbcompra-resumen{

    position:sticky;

    top:20px;

    background:#fff;

    border-radius:18px;

    padding:25px;

    height:max-content;

    box-shadow:0 10px 30px rgba(15,23,42,.06);

}

.tbcompra-total-item{

    display:flex;

    justify-content:space-between;

    margin:18px 0;

    font-size:15px;

}

.tbcompra-total-final{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:25px 0;

    padding:20px;

    border-radius:15px;

    background:#eff6ff;

}

.tbcompra-total-final h2{

    color:#2563eb;

    font-size:32px;

}

.tbcompra-forma{

    margin-top:20px;

}

.tbcompra-footer{

    margin-top:30px;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.tbcompra-btn-guardar{

    height:55px;

    border:none;

    border-radius:14px;

    background:#16a34a;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.30s;

}

.tbcompra-btn-guardar:hover{

    background:#15803d;

}

.tbcompra-btn-cancelar{

    height:55px;

    border:none;

    border-radius:14px;

    background:#ef4444;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.30s;

}

.tbcompra-btn-cancelar:hover{

    background:#dc2626;

}



/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1400px){

.tbcompra-producto{

grid-template-columns:1fr;

}

.tbcompra-contenido{

grid-template-columns:1fr;

}

.tbcompra-grid{

grid-template-columns:1fr;

}

.tbcompra-grid2{

grid-template-columns:1fr;

}

.tbcompra-resumen{

position:relative;

top:0;

}

}

.tbcomp-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.tbcomp-badge{

background:#2563eb;

color:white;

padding:8px 16px;

border-radius:30px;

font-size:12px;

font-weight:600;

display:inline-block;

margin-bottom:12px;

}

.tbcomp-badge{

background:#2563eb;

color:white;

padding:8px 16px;

border-radius:30px;

font-size:12px;

font-weight:600;

display:inline-block;

margin-bottom:12px;

}

.tbcomp-btn-primary{

background:#2563eb;

color:white;

padding:16px 28px;

border-radius:14px;

text-decoration:none;

font-weight:600;

}

.tbcomp-toolbar{

display:flex;

gap:20px;

margin:25px 0;

}

.tbcomp-search{

flex:1;

position:relative;

}
.tbcomp-search i{

position:absolute;

left:18px;

top:18px;

color:#777;

}

.tbcomp-search input{

padding:16px 18px 16px 48px;

border-radius:14px;

border:1px solid #ddd;

}

.tbcomp-listado{

display:flex;

flex-direction:column;

gap:18px;

}

.tbcomp-card{

display:grid;

grid-template-columns:

90px

1fr

120px

170px

160px;

gap:20px;

align-items:center;

background:white;

border-radius:18px;

padding:22px;

box-shadow:

0 8px 25px rgba(0,0,0,.05);

transition:.3s;

}

.tbcomp-card:hover{

transform:translateY(-4px);

box-shadow:

0 18px 35px rgba(37,99,235,.15);

}

.tbcomp-img img{

width:75px;

height:75px;

object-fit:cover;

border-radius:14px;

}

.tbcomp-add{

background:#16a34a;

padding:14px 20px;

color:white;

border-radius:12px;

text-decoration:none;

font-weight:600;

display:inline-flex;

gap:10px;

align-items:center;

justify-content:center;

}

.tbcomp-dashboard{

display:grid;

grid-template-columns:

1fr

1fr

350px;

gap:25px;

margin-bottom:30px;

}

.tbcomp-card{

background:white;

border-radius:18px;

padding:25px;

box-shadow:

0 15px 35px rgba(0,0,0,.05);

}

.tbcomp-title{

font-size:20px;

font-weight:700;

margin-bottom:20px;

color:#1e293b;

display:flex;

gap:12px;

align-items:center;

}

.tbcomp-body{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}

.tb-info label{

font-size:12px;

font-weight:600;

margin-bottom:8px;

display:block;

color:#64748b;

}

.tb-info input{

height:48px;

border-radius:12px;

border:1px solid #dbe4ee;

padding:12px;

}

.tbcomp-body-vendedor{

display:flex;

gap:20px;

align-items:center;

}

.tbcomp-body-vendedor img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

border:4px solid #2563eb;

}

.tbResumen div{

display:flex;

justify-content:space-between;

margin-bottom:16px;

font-size:15px;

}

.tbTotal{

margin-top:25px;

padding-top:20px;

border-top:2px dashed #ddd;

font-size:22px;

font-weight:700;

color:#2563eb;

}

.tbcompras-container{

background:#fff;

border-radius:18px;

padding:25px;

box-shadow:0 15px 40px rgba(0,0,0,.05);

margin-top:25px;

}


.tbcompras-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}


.tbcompras-header h2{

font-size:28px;

color:#1e293b;

margin-bottom:5px;

}


.tbcompras-header span{

color:#64748b;

font-size:14px;

}


.tbcompras-tools{

display:flex;

gap:15px;

align-items:center;

}


.tbcompras-tools input{

width:260px;

height:45px;

padding:12px;

border-radius:10px;

border:1px solid #dbe4ee;

}


.tbbtnNueva{

background:#2563eb;

color:#fff;

padding:12px 22px;

border-radius:10px;

text-decoration:none;

font-weight:600;

transition:.3s;

}


.tbbtnNueva:hover{

background:#1d4ed8;

color:#fff;

}


.tbcompras{

width:100%;

border-collapse:collapse;

}


.tbcompras thead{

background:#2563eb;

color:white;

}


.tbcompras th{

padding:9px;

font-size:14px;

font-weight:600;

}


.tbcompras td{

padding:18px;

border-bottom:1px solid #edf2f7;

font-size:14px;

}


.tbcompras tbody tr{

transition:.25s;

}


.tbcompras tbody tr:hover{

background:#f8fbff;

}


.badge-success{

background:#dcfce7;

color:#15803d;

padding:7px 14px;

border-radius:30px;

font-size:12px;

font-weight:700;

}


.badge-warning{

background:#fff7d6;

color:#d97706;

padding:7px 14px;

border-radius:30px;

font-size:12px;

font-weight:700;

}


.badge-ok{

background:#dbeafe;

color:#1d4ed8;

padding:7px 14px;

border-radius:30px;

font-size:12px;

font-weight:700;

}


.badge-danger{

background:#fee2e2;

color:#dc2626;

padding:7px 14px;

border-radius:30px;

font-size:12px;

font-weight:700;

}


.tbacciones{

display:flex;

gap:12px;

justify-content:center;

}


.tbacciones a{

width:38px;

height:38px;

display:flex;

justify-content:center;

align-items:center;

border-radius:10px;

background:#f1f5f9;

color:#334155;

transition:.3s;

text-decoration:none;

}


.tbacciones a:hover{

background:#2563eb;

color:white;

transform:translateY(-2px);

}


/* ==========================================
   TOPBAR TITANBYTE
========================================== */

.tb-topbar{

    height:68px;

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 25px;

    background:#ffffff;

    border-bottom:1px solid #e8edf3;

    position:relative;

    z-index:1000;

}


/* ==========================================
   LEFT
========================================== */

.tb-topbar-left{

    display:flex;

    align-items:center;

}


.tb-topbar-date{

    display:flex;

    align-items:center;

    gap:10px;

}


.tb-topbar-date > i{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:#eff6ff;

    color:#2563eb;

    font-size:15px;

}


.tb-topbar-date div{

    display:flex;

    flex-direction:column;

    line-height:1.2;

}


.tb-topbar-date span{

    color:#94a3b8;

    font-size:9px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.7px;

}


.tb-topbar-date strong{

    margin-top:3px;

    color:#334155;

    font-size:12px;

    font-weight:700;

}


/* ==========================================
   RIGHT
========================================== */

.tb-topbar-right{

    display:flex;

    align-items:center;

    gap:10px;

}


/* ==========================================
   CONFIG BUTTON
========================================== */

.tb-topbar-menu{

    position:relative;

}


.tb-topbar-menu-btn{

    height:40px;

    display:flex;

    align-items:center;

    gap:9px;

    padding:0 13px;

    border:1px solid #e5eaf1;

    border-radius:10px;

    background:#fff;

    color:#475569;

    cursor:pointer;

    font-size:12px;

    font-weight:600;

    transition:.2s ease;

}


.tb-topbar-menu-btn:hover{

    border-color:#bfdbfe;

    background:#f8fbff;

    color:#2563eb;

}


.tb-topbar-menu-btn > i:first-child{

    color:#64748b;

    font-size:14px;

}


.tb-topbar-menu-btn:hover > i:first-child{

    color:#2563eb;

}


.tb-chevron{

    margin-left:2px;

    color:#94a3b8 !important;

    font-size:9px !important;

    transition:.2s;

}


.tb-topbar-menu-btn.active .tb-chevron{

    transform:rotate(180deg);

}


/* ==========================================
   DROPDOWN
========================================== */

.tb-topbar-dropdown{

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    width:245px;

    padding:7px;

    background:#fff;

    border:1px solid #e5eaf1;

    border-radius:13px;

    box-shadow:
        0 15px 40px
        rgba(15,23,42,.12);

    opacity:0;

    visibility:hidden;

    transform:
        translateY(-7px);

    transition:
        .2s ease;

}


.tb-topbar-dropdown.active{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0);

}


.tb-topbar-dropdown a{

    display:flex;

    align-items:center;

    gap:11px;

    padding:10px;

    border-radius:9px;

    text-decoration:none;

    color:#334155;

    transition:.2s;

}


.tb-topbar-dropdown a:hover{

    background:#f8fafc;

}


.tb-dropdown-icon{

    width:36px;

    height:36px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    background:#eff6ff;

    color:#2563eb;

}


.tb-topbar-dropdown a > span:last-child{

    display:flex;

    flex-direction:column;

}


.tb-topbar-dropdown strong{

    font-size:12px;

    font-weight:700;

    color:#334155;

}


.tb-topbar-dropdown small{

    margin-top:3px;

    color:#94a3b8;

    font-size:9px;

}


.tb-dropdown-divider{

    height:1px;

    margin:5px 8px;

    background:#edf1f5;

}


/* ==========================================
   CERRAR SESIÓN
========================================== */

.tb-topbar-dropdown .tb-logout:hover{

    background:#fff5f5;

}


.tb-topbar-dropdown .tb-logout .tb-dropdown-icon{

    background:#fef2f2;

    color:#dc2626;

}


/* ==========================================
   RESPONSIVE
========================================== */

.tb-topbar-responsive{

    display:none;

    width:40px;

    height:40px;

    border:1px solid #e5eaf1;

    border-radius:10px;

    background:#fff;

    color:#475569;

    cursor:pointer;

}


@media(max-width:700px){

    .tb-topbar{

        height:62px;

        padding:0 15px;

    }


    .tb-topbar-date strong{

        font-size:11px;

    }


    .tb-topbar-menu-btn span{

        display:none;

    }


    .tb-topbar-menu-btn{

        width:40px;

        justify-content:center;

        padding:0;

    }


    .tb-topbar-menu-btn .tb-chevron{

        display:none;

    }


    .tb-topbar-responsive{

        display:flex;

        align-items:center;

        justify-content:center;

    }

}


/* =========================================================
   RESPONSIVE - CARDS DASHBOARD
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .card {
        width: 100%;
        min-width: 0;
    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 700px) {

    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .card {
        padding: 16px;
    }

    .card-top {
        gap: 12px;
    }

    .icon {
        width: 42px;
        height: 42px;

        min-width: 42px;
    }

    .icon i {
        font-size: 17px;
    }

    .info h4 {
        font-size: 13px;
    }

    .info h2 {
        font-size: 22px;
    }

    .card-bottom {
        font-size: 11px;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 500px) {

    .cards {
        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        width: 100%;
        height: auto;
        margin-top: 67px;
    }

    .card {
        width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }

    .card-top {
        display: flex;
        align-items: center;

        gap: 13px;
    }

    .icon {
        width: 44px;
        height: 44px;

        min-width: 44px;
    }

    .icon i {
        font-size: 17px;
    }

    .info {
        min-width: 0;
    }

    .info h4 {
        margin: 0;

        font-size: 13px;
        line-height: 1.2;
    }

    .info h2 {
        margin: 4px 0 0;

        font-size: 22px;
        line-height: 1.1;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;

        margin-top: 14px;

        font-size: 11px;
    }

    .card-bottom i {
        font-size: 15px;
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 360px) {

    .cards {
        gap: 10px;
    }

    .card {
        padding: 14px;
    }

    .icon {
        width: 40px;
        height: 40px;

        min-width: 40px;
    }

    .info h4 {
        font-size: 12px;
    }

    .info h2 {
        font-size: 20px;
    }

    .card-bottom {
        font-size: 10px;
    }

}


/* =========================================================
   RESPONSIVE - GRÁFICO + ACTIVIDAD RECIENTE
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .grafico {

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 1fr);

        gap: 20px;

        width: 100%;

        box-sizing: border-box;
    }


    .grafico > div {

        min-width: 0;
    }


    .grafico canvas {

        display: block;

        width: 100% !important;

        max-width: 100%;

        height: auto !important;
    }


    .recent-activity {

        width: 100%;

        box-sizing: border-box;
    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 750px) {

    .grafico {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .grafico > div {

        width: 100%;

        min-width: 0;
    }


    .grafico canvas {

        width: 100% !important;

        max-width: 600px;

        height: auto !important;

        margin: 0 auto;
    }


    .recent-activity {

        width: 100%;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 500px) {

    .grafico {

        display: flex;

        flex-direction: column;

        width: 100%;

        gap: 18px;
    }


    /* =========================
       GRÁFICO
    ========================== */

    .grafico > div:first-child {

        width: 100%;

        display: flex;

        justify-content: center;

        overflow: hidden;
    }


    .grafico canvas {

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;
    }


    /* =========================
       ACTIVIDAD
    ========================== */

    .recent-activity {

        width: 100%;

        padding: 16px;

        box-sizing: border-box;
    }


    .recent-title {

        font-size: 17px;

        margin-bottom: 14px;
    }


    .recent-list {

        width: 100%;
    }


    .recent-item {

        width: 100%;

        min-width: 0;

        display: flex;

        align-items: center;

        gap: 10px;

        box-sizing: border-box;
    }


    .recent-icon {

        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    .recent-icon i {

        font-size: 14px;
    }


    .recent-info {

        flex: 1;

        min-width: 0;
    }


    .recent-info h4 {

        margin: 0;

        font-size: 12px;

        line-height: 1.3;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .recent-info p {

        margin: 3px 0 0;

        font-size: 11px;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .recent-time {

        flex-shrink: 0;

        font-size: 10px;

        white-space: nowrap;
    }

}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width: 360px) {

    .grafico {

        gap: 15px;
    }


    .recent-activity {

        padding: 13px;
    }


    .recent-title {

        font-size: 16px;
    }


    .recent-item {

        gap: 8px;
    }


    .recent-icon {

        flex-basis: 34px;

        width: 34px;
        height: 34px;
    }


    .recent-icon i {

        font-size: 12px;
    }


    .recent-info h4 {

        font-size: 11px;
    }


    .recent-info p {

        font-size: 10px;
    }


    .recent-time {

        font-size: 9px;
    }

}

/* =========================================================
   MENU LATERAL ADMIN - MOBILE
========================================================= */

@media screen and (max-width: 768px) {

    /* =========================================
       MENU
    ========================================= */

    .menu_navegar {

        display: block !important;

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 300px !important;
        max-width: 85vw !important;

        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;


        z-index: 999999 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        visibility: visible !important;
        opacity: 1 !important;

        transform: translateX(-110%) !important;

        transition:
            transform .35s ease !important;

        box-shadow:
            8px 0 30px rgba(0,0,0,.25) !important;

    }


    /* =========================================
       MENU ABIERTO
    ========================================= */

    .menu_navegar.menu-abierto {

        transform: translateX(0) !important;

    }


    /* =========================================
       BOTÓN
    ========================================= */

    .tb-topbar-responsive {

        display: flex !important;

        align-items: center;
        justify-content: center;

        width: 42px !important;
        height: 42px !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 8px !important;

        background: #ff5a00 !important;

        color: #ffffff !important;

        cursor: pointer;

        position: relative !important;

        z-index: 1000000 !important;

    }


    .tb-topbar-responsive i {

        font-size: 17px;

    }


    /* =========================================
       ASEGURAR QUE EL PADRE NO LO CORTE
    ========================================= */

    .estilos_admin {

        overflow: visible !important;

    }

}


/* =========================================================
   RESPONSIVE - LISTA DE CLIENTES
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

    .usuario1 {
        width: 100%;
        max-width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }


    /* =========================
       TÍTULO
    ========================== */

    .titulos-admi {
        width: 100%;
    }

    .titulos-admi ul {
        margin: 0;
        padding: 0;
    }


    /* =========================
       BUSCADOR
    ========================== */

    .form_buscar {
        width: 100%;

        display: flex;
        align-items: center;

        gap: 10px;

        margin-top: 15px;
    }

    .form_buscar .buscar {
        flex: 1;
        min-width: 0;
    }

    .form_buscar .bus_usuari {
        flex-shrink: 0;
    }


    /* =========================
       BOTONES
    ========================== */

    .botones_enlaces2 {
        display: flex;

        align-items: center;

        gap: 7px;

        margin: 0;
        padding: 0;

        flex-shrink: 0;

        list-style: none;
    }


    /* =========================
       TABLA
    ========================== */

    .table-promax {
        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        margin-top: 20px;

        -webkit-overflow-scrolling: touch;
    }

    .tbcompras {
        min-width: 760px;
    }


    /* =========================
       PAGINACIÓN
    ========================== */

    .paginador {
        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .paginador ul {
        width: max-content;
        min-width: 100%;

        display: flex;
        justify-content: center;
        align-items: center;

        gap: 5px;

        margin: 0;
        padding: 5px;

        box-sizing: border-box;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media screen and (max-width: 600px) {

    .usuario1 {
        width: 100%;

        padding: 12px;

        box-sizing: border-box;
                margin-top: 33px;
    }


    /* =========================
       TÍTULOS
    ========================== */

    .titulos-admi {
        margin-bottom: 15px;
    }

    .titulos-admi ul {
        margin: 0;
        padding: 0;

        list-style: none;
    }

    .titulos-admi p {
        margin: 0 0 4px;

        font-size: 11px;
    }

    .titulos-admi h3 {
        margin: 0;

        font-size: 20px;
        line-height: 1.2;
    }


    /* =========================
       FORMULARIO
    ========================== */

    .form_buscar {
        width: 100%;

        display: grid;

        grid-template-columns: minmax(0, 1fr) auto;

        gap: 8px;

        margin: 0 0 15px;

        box-sizing: border-box;
    }


    .form_buscar .buscar {
        width: 100% !important;
        min-width: 0;

        height: 42px;

        padding: 0 12px;

        box-sizing: border-box;

        font-size: 13px;
    }


    .form_buscar .bus_usuari {
        height: 42px;

        min-width: 70px;

        padding: 0 13px;

        box-sizing: border-box;

        font-size: 12px;
    }


    /* =========================
       BOTONES
    ========================== */

    .form_buscar .botones_enlaces2 {

        grid-column: 1 / -1;

        display: flex;

        align-items: center;

        gap: 8px;

        margin: 0;
        padding: 0;

        list-style: none;
    }


    .form_buscar .botones_enlaces2 .btn {

        width: 42px;
        height: 42px;

        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;
    }


    /* =========================    
       CONTENEDOR TABLA
    ========================== */

    .table-promax {

        width: 100%;
        max-width: 100%;

        margin-top: 68px;

        overflow-x: auto !important;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }


    /* =========================
       CABECERA TABLA
    ========================== */

    .tbcompras-header {

        width: 100%;

        padding: 14px;

        box-sizing: border-box;
    }


    .tbcompras-header h2 {

        margin: 0;

        font-size: 18px;
    }


    .tbcompras-header span {

        display: block;

        margin-top: 4px;

        font-size: 11px;
    }


    /* =========================
       TABLA
    ========================== */

    .tbcompras {

        width: 100%;

        min-width: 760px;

        border-collapse: collapse;
    }


    .tbcompras th,
    .tbcompras td {

        padding: 10px 9px;

        font-size: 11px;

        white-space: nowrap;
    }


    /* =========================
       BOTONES DE ACCIÓN
    ========================== */

    .tbcompras .botonos-panel-a,
    .tbcompras .botonos-panel {

        width: 32px;
        height: 32px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        padding: 0;
    }


    .tbcompras .botonos-panel-a i,
    .tbcompras .botonos-panel i {

        font-size: 12px;
    }


    /* =========================
       PAGINADOR
    ========================== */

    .paginador {

        width: 100%;
        max-width: 100%;

        margin-top: 15px;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    .paginador ul {

        width: max-content;
        min-width: 100%;

        display: flex;

        align-items: center;
        justify-content: flex-start;

        gap: 5px;

        margin: 0;
        padding: 6px 2px;

        list-style: none;

        box-sizing: border-box;
    }


    .paginador li {

        flex-shrink: 0;
    }


    .paginador li a,
    .paginador .pagina {

        min-width: 32px;
        height: 32px;

        padding: 0 8px;

        display: flex;

        align-items: center;
        justify-content: center;

        box-sizing: border-box;

        font-size: 11px;

        white-space: nowrap;
    }

}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media screen and (max-width: 380px) {

    .usuario1 {
        padding: 10px;
    }


    .titulos-admi h3 {
        font-size: 18px;
    }


    /* Buscador ocupa toda la fila */

    .form_buscar {

        grid-template-columns: 1fr;
    }


    .form_buscar .buscar {
        grid-column: 1;
    }


    .form_buscar .bus_usuari {

        grid-column: 1;

        width: 100% !important;
    }


    .form_buscar .botones_enlaces2 {

        grid-column: 1;

        justify-content: flex-start;
    }


    .tbcompras-header {
        padding: 12px;
    }


    .tbcompras-header h2 {
        font-size: 16px;
    }


    .tbcompras {
        min-width: 700px;
    }

}


/* =========================================================
   RESPONSIVE - SISTEMA DE VENTAS
   NO AFECTA ESCRITORIO
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

    .tbventa-page {
        width: 100%;
        max-width: 100%;
        padding: 18px;
        box-sizing: border-box;
    }


    /* =========================
       GRID CLIENTE / FACTURA
    ========================== */

    .tbventa-top-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }


    /* =========================
       GRID DE CAMPOS
    ========================== */

    .tbventa-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }


    /* =========================
       BUSCADOR
    ========================== */

    .tbventa-search {
        gap: 10px;
    }

    .tbventa-search-box {
        flex: 1;
        min-width: 0;
    }


    /* =========================
       PRODUCTO SELECCIONADO
    ========================== */

    .tbventa-selected {
        display: grid;

        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto
            auto
            auto;

        gap: 12px;

        align-items: center;
    }


    /* =========================
       TABLA
    ========================== */

    .tbventa-table {
        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }

    .tbventa-table table {
        min-width: 760px;
    }


    /* =========================
       FOOTER
    ========================== */

    .tbventa-footer {
        gap: 15px;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media screen and (max-width: 600px) {

    /* =========================
       PÁGINA
    ========================== */

    .tbventa-page {

        width: 100%;

        max-width: 100%;

        padding: 12px;

        margin: 0;

        box-sizing: border-box;

        overflow: visible;
        top: 172px;
     left: 0px;
    }




    /* =========================
       TÍTULO
    ========================== */

    .tbventa-header {
        margin-bottom: 16px;
    }

    .tbventa-header h3 {
        font-size: 22px;
        line-height: 1.2;
    }


    /* =========================
       GRID PRINCIPAL
    ========================== */

    .tbventa-top-grid {

        display: grid;

        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* =========================
       TARJETAS
    ========================== */

    .tbventa-card {

        width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }


    .tbventa-card-header {

        padding: 14px;
    }


    .tbventa-card-body {

        padding: 14px;
    }


    .tbventa-card-header h3 {

        font-size: 15px;
    }


    .tbventa-card-header p {

        font-size: 11px;
    }


    /* =========================
       ICONOS HEADER
    ========================== */

    .tbventa-card-icon {

        width: 38px;
        height: 38px;

        flex-shrink: 0;
    }


    /* =========================
       BOTÓN NUEVO
    ========================== */

    .tbventa-btn-mini {

        padding: 8px 10px;

        font-size: 11px;

        white-space: nowrap;
    }


    /* =========================
       CAMPOS
    ========================== */

    .tbventa-grid-2 {

        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .tbventa-grid-2 input {

        width: 100%;

        box-sizing: border-box;
    }


    /* =========================
       GUARDAR CLIENTE
    ========================== */

    .boton_venta_pro {

        width: 100%;

        margin-top: 12px;
    }


    .tbventa-btn-guardar-cliente {

        width: 100%;

        min-height: 42px;
    }


    /* =========================
       BUSCADOR PRODUCTOS
    ========================== */

    .tbventa-product-section {

        width: 100%;

        box-sizing: border-box;
    }


    .tbventa-product-header {

        padding: 14px;
    }


    .tbventa-product-header h2 {

        font-size: 18px;

        line-height: 1.25;
    }


    .tbventa-search {

        display: grid;

        grid-template-columns: 1fr auto;

        gap: 8px;

        width: 100%;
    }


    .tbventa-search-box {

        width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }


    .tbventa-search-box input {

        width: 100%;

        min-width: 0;

        box-sizing: border-box;

        font-size: 12px;
    }


    .tbventa-btn-add {

        min-width: 82px;

        white-space: nowrap;

        padding: 0 12px;

        font-size: 12px;
    }


    /* =========================
       PRODUCTO SELECCIONADO
    ========================== */

    .tbventa-selected {

        display: grid;

        grid-template-columns:
            auto
            minmax(0, 1fr);

        gap: 12px;

        align-items: center;

        padding: 14px;
    }


    .tbventa-selected-img {

        width: 45px;
        height: 45px;

        flex-shrink: 0;
    }


    .tbventa-selected-info {

        min-width: 0;
    }


    .tbventa-selected-info h3 {

        margin: 3px 0 0;

        font-size: 13px;

        line-height: 1.3;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    /* =========================
       STOCK / PRECIO / CANTIDAD
    ========================== */

    .tbventa-stock,
    .tbventa-price,
    .tbventa-cantidad {

        width: 100%;

        box-sizing: border-box;
    }


    .tbventa-stock {

        grid-column: 1 / 2;
    }


    .tbventa-price {

        grid-column: 2 / 3;
    }


    .tbventa-cantidad {

        grid-column: 1 / -1;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;
    }


    .tbventa-cantidad input {

        width: 90px;

        min-height: 40px;

        box-sizing: border-box;
    }


    /* =========================
       TABLA DE PRODUCTOS
    ========================== */

    .tbventa-table {

        width: 100%;

        max-width: 100%;

        overflow-x: auto !important;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        box-sizing: border-box;
    }


    .tbventa-table table {

        width: 100%;

        min-width: 760px;

        border-collapse: collapse;
    }


    .tbventa-table th,
    .tbventa-table td {

        padding: 9px 8px;

        font-size: 11px;

        white-space: nowrap;
    }


    /* =========================
       FOOTER
    ========================== */

    .tbventa-footer {

        display: flex;

        flex-direction: column;

        gap: 10px;

        width: 100%;

        padding: 14px;

        box-sizing: border-box;
    }


    .tbventa-actions {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 8px;

        width: 100%;
    }


    .tbventa-actions > * {

        width: 100%;

        min-height: 42px;

        box-sizing: border-box;
    }


    .tbventa-btn-primary {

        width: 100%;

        min-height: 46px;

        box-sizing: border-box;
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media screen and (max-width: 380px) {

    .tbventa-page {

        padding: 9px;
    }


    .tbventa-header h3 {

        font-size: 20px;
    }


    /* BUSCADOR */

    .tbventa-search {

        grid-template-columns: 1fr;
    }


    .tbventa-btn-add {

        width: 100%;

        min-height: 42px;
    }


    /* BOTONES */

    .tbventa-actions {

        grid-template-columns: 1fr;
    }


    /* PRODUCTO */

    .tbventa-selected {

        grid-template-columns: 1fr 1fr;
    }


    .tbventa-selected-img {

        grid-column: 1 / -1;

        justify-self: center;
    }


    .tbventa-selected-info {

        grid-column: 1 / -1;

        text-align: center;
    }


    .tbventa-stock {

        grid-column: 1;
    }


    .tbventa-price {

        grid-column: 2;
    }


    .tbventa-cantidad {

        grid-column: 1 / -1;
    }


    .tbventa-cantidad input {

        width: 80px;
    }

}

/* =========================================================
   RESPONSIVE - BUSCADOR DE VENTAS
========================================================= */

@media screen and (max-width: 768px) {

    .buscar_ventas {
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
    }

    .buscar_ventas_pro {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 15px;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    .buscar_ventas_pro > li {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .buscar_ventas_pro > li > div {
        width: 100%;
    }


    /* =========================
       FORMULARIOS
    ========================== */

    .buscar_ventas_pro form {
        width: 100%;

        display: flex;
        align-items: center;

        gap: 8px;

        margin: 0 !important;
        padding: 0;

        box-sizing: border-box;
    }


    /* =========================
       BUSCAR POR FACTURA
    ========================== */

    .buscar_ventas_pro form input[type="text"] {

        width: 100% !important;

        flex: 1;

        min-width: 0;

        height: 42px;

        box-sizing: border-box;
    }


    /* =========================
       FECHAS
    ========================== */

    .buscar_ventas_pro form input[type="date"] {

        flex: 1;

        min-width: 0;

        height: 42px;

        box-sizing: border-box;

        margin: 0 !important;
    }


    /* =========================
       LABEL DE / A
    ========================== */

    .buscar_ventas_pro form label {

        flex-shrink: 0;

        margin: 0;

        font-size: 13px;

        font-weight: 600;
    }


    /* =========================
       BOTONES
    ========================== */

    .buscar_ventas_pro form input[type="submit"] {

        height: 42px;

        flex-shrink: 0;

        padding: 0 15px;

        margin: 0 !important;

        box-sizing: border-box;
    }

}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media screen and (max-width: 480px) {

    .buscar_ventas {
        padding: 10px;
    }


    /* =========================
       BUSCAR FACTURA
    ========================== */

    .buscar_ventas_pro form {

        display: grid;

       

        gap: 8px;
    }


    .buscar_ventas_pro form input[type="text"] {

        grid-column: 1;

        width: 100% !important;
    }


    .buscar_ventas_pro form input[type="submit"] {

        grid-column: 2;
    }


    /* =========================
       BÚSQUEDA POR FECHA
    ========================== */

    .buscar_ventas_pro > li:nth-child(2) form {

        display: grid;

        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        gap: 8px;
    }


    .buscar_ventas_pro > li:nth-child(2) form label {

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .buscar_ventas_pro > li:nth-child(2) form input[type="date"] {

        width: 100%;

        min-width: 0;
    }


    .buscar_ventas_pro > li:nth-child(2) form input[type="submit"] {

        grid-column: 1 / -1;

        width: 100%;
    }

}

/* =========================================================
   RESPONSIVE - NUEVA COMPRA / PRODUCTO
   SOLO TABLET Y MOVIL
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

    .tbprod-container {
        width: 100%;
        max-width: 100%;
        padding: 18px;
        box-sizing: border-box;
    }


    .tbprod-card {
        width: 100%;
        box-sizing: border-box;
    }


    /* PROVEEDOR / CATEGORIA */

    .tbprod-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }


    /* DESCRIPCION / PRECIOS */

    .tbprod-grid-price {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    /* PRECIOS */

    .tbprod-grid-price > .tbprod-grid-2 {
        grid-template-columns: 1fr 1fr;
    }


    /* IMAGENES */

    .tbprod-images-grid {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 12px;
    }


    /* FOOTER */

    .tbprod-card-footer {
        gap: 12px;
    }

}


/* =========================================================
   MOVIL
========================================================= */

@media screen and (max-width: 600px) {

    /* =====================================================
       CONTENEDOR
    ===================================================== */

    .tbprod-container {

        width: 100%;

        max-width: 100%;

        padding: 10px;

        margin: 0;

        box-sizing: border-box;
    }


    .tbprod-card {

        width: 100%;

        min-width: 0;

        box-sizing: border-box;

        border-radius: 10px;
    }


    /* =====================================================
       ENCABEZADO
    ===================================================== */

    .tbprod-page-header {

        width: 100%;

        margin-bottom: 12px;
    }


    .tbprod-return {

        font-size: 11px;

        white-space: nowrap;
    }


    .tbprod-card-header {

        padding: 15px;

        gap: 10px;
    }


    .tbprod-card-header h2 {

        font-size: 17px;

        line-height: 1.25;

        margin: 0;
    }


    .tbprod-card-header p {

        font-size: 11px;

        line-height: 1.4;

        margin: 4px 0 0;
    }


    .tbprod-icon {

        width: 40px;

        height: 40px;

        flex-shrink: 0;
    }


    /* =====================================================
       BODY
    ===================================================== */

    .tbprod-card-body {

        padding: 14px;
    }


    /* =====================================================
       PROVEEDOR / CATEGORIA
    ===================================================== */

    .tbprod-grid-2 {

        display: grid;

        grid-template-columns: 1fr;

        gap: 13px;
    }


    /* =====================================================
       GRUPOS
    ===================================================== */

    .tbprod-group {

        width: 100%;

        min-width: 0;
    }


    .tbprod-group label {

        font-size: 12px;
    }


    /* =====================================================
       INPUTS
    ===================================================== */

    .tbprod-input {

        width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }


    .tbprod-input input,
    .tbprod-input select,
    .tbprod-input textarea {

        width: 100%;

        max-width: 100%;

        box-sizing: border-box;

        font-size: 12px;
    }


    .tbprod-input select {

        min-width: 0;
    }


    /* =====================================================
       TITULO
    ===================================================== */

    #titulo {

        width: 100%;

        box-sizing: border-box;
    }


    /* =====================================================
       DESCRIPCION Y PRECIOS
    ===================================================== */

    .tbprod-grid-price {

        display: grid;

        grid-template-columns: 1fr;

        gap: 15px;
    }


    .tbprod-grid-price > .tbprod-grid-2 {

        display: grid;

        grid-template-columns: 1fr;

        gap: 13px;
    }


    .tbprod-textarea {

        width: 100%;
    }


    .tbprod-textarea textarea {

        width: 100%;

        min-height: 130px;

        resize: vertical;

        box-sizing: border-box;
    }


    .tbprod-group small {

        font-size: 10px;
    }


    /* =====================================================
       IMAGENES
    ===================================================== */

    .tbprod-image-section {

        width: 100%;

        margin-top: 20px;
    }


    .tbprod-image-title h3 {

        font-size: 16px;

        margin-bottom: 4px;
    }


    .tbprod-image-title p {

        font-size: 10px;

        line-height: 1.4;
    }


    .tbprod-images-grid {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 10px;

        width: 100%;
    }


    .tbprod-image-upload {

        width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }


    .tbprod-image-label {

        width: 100%;

        aspect-ratio: 1 / 1;

        display: block;

        box-sizing: border-box;

        overflow: hidden;
    }


    .tbprod-image-label img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        display: block;
    }


    .tbprod-image-overlay {

        font-size: 10px;

        padding: 8px;

        box-sizing: border-box;
    }


    .tbprod-image-overlay i {

        font-size: 16px;
    }


    .tbprod-main-badge {

        font-size: 9px;

        padding: 4px 7px;
    }


    /* =====================================================
       ALERTA
    ===================================================== */

    .tbprod-alert {

        width: 100%;

        box-sizing: border-box;

        font-size: 11px;

        margin-top: 15px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .tbprod-card-footer {

        width: 100%;

        padding: 14px;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 8px;

        box-sizing: border-box;
    }


    .tbprod-btn-cancel,
    .tbprod-btn-save {

        width: 100%;

        min-height: 42px;

        display: flex;

        align-items: center;

        justify-content: center;

        box-sizing: border-box;

        font-size: 11px;
    }

}


/* =========================================================
   MOVIL PEQUEÑO
========================================================= */

@media screen and (max-width: 380px) {

    .tbprod-container {

        padding: 8px;
    }


    .tbprod-card-header {

        padding: 12px;
    }


    .tbprod-card-body {

        padding: 12px;
    }


    .tbprod-card-header h2 {

        font-size: 16px;
    }


    /* IMAGENES UNA POR UNA */

    .tbprod-images-grid {

        grid-template-columns: 1fr 1fr;
    }


    /* BOTONES */

    .tbprod-card-footer {

        grid-template-columns: 1fr;

        gap: 8px;
    }


    .tbprod-btn-cancel,
    .tbprod-btn-save {

        width: 100%;
    }

}



/* =========================================================
   RESPONSIVE - HEADER HISTORIAL DE COMPRAS
========================================================= */

@media screen and (max-width: 768px) {

    .tbcompras-header {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 15px;

        box-sizing: border-box;
    }


    /* =========================
       TÍTULO
    ========================== */

    .tbcompras-header > div:first-child {

        width: 100%;
    }


    .tbcompras-header h2 {

        margin: 0;

        font-size: 20px;

        line-height: 1.3;
    }


    .tbcompras-header h2 i {

        font-size: 17px;
    }


    .tbcompras-header span {

        display: block;

        margin-top: 5px;

        font-size: 11px;

        line-height: 1.4;
    }


    /* =========================
       BUSCADOR + NUEVA COMPRA
    ========================== */

    .tbcompras-tools {

        width: 100%;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 8px;

        box-sizing: border-box;
    }


    .tbcompras-tools input {

        width: 100%;

        min-width: 0;

        height: 42px;

        padding: 0 12px;

        box-sizing: border-box;

        font-size: 12px;
    }


    .tbcompras-tools .tbbtnNueva {

        height: 42px;

        min-width: 125px;

        padding: 0 12px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 6px;

        box-sizing: border-box;

        white-space: nowrap;

        font-size: 11px;
    }

}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media screen and (max-width: 480px) {

    .tbcompras-header {

        gap: 12px;
    }


    .tbcompras-header h2 {

        font-size: 18px;
    }


    .tbcompras-header h2 i {

        font-size: 15px;
    }


    .tbcompras-header span {

        font-size: 10px;
    }


    .tbcompras-tools {

        grid-template-columns: 1fr;

        gap: 8px;
    }


    .tbcompras-tools input {

        height: 42px;
    }


    .tbcompras-tools .tbbtnNueva {

        width: 100%;

        height: 42px;
    }

}