/* ==========================================================================
   CARRITO.CSS - VERSIÓN MODERNIZADA WINDOWS 11 (2025)
   Paleta: Mica gris claro + Azul Microsoft + Sombras suaves + Transiciones
   ========================================================================== */

/* ────────────────────────────────────────────────
   1. Reglas que YA existían → solo mejoradas
   ──────────────────────────────────────────────── */

/* body{
    font-family: "Helvetica Neue",Helvetica,Arial;
    font-size: 1em;
} */  /* ← Comentario original conservado; font-family moderna en body global */

.btnGuardarVenta, .btnGuardarCompra, .btnGuardarNC, .btnGuardarND, .btnGuardarGuia {
    background: linear-gradient(135deg, #0078D4 0%, #005A9E 100%) !important;  /* ← Azul Microsoft en vez de verde */
    color: white !important;  /* ← Cambiado a blanco para mejor contraste */
    font-weight: 600 !important;
    text-align: center;
    border: none;
    padding: 14px 24px !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,120,212,0.2);
}

.btnGuardarVenta:hover, .btnGuardarCompra:hover, .btnGuardarNC:hover, .btnGuardarND:hover, .btnGuardarGuia:hover {
    background: linear-gradient(135deg, #0091FF 0%, #0078D4 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,120,212,0.3);
}

.btnEliminarCarro {
    background: linear-gradient(135deg, #D13438 0%, #A0262B 100%) !important;  /* ← Rojo suave Windows 11 */
    color: white !important;
    font-weight: 600 !important;
    text-align: center;
    border: none;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(209,52,56,0.2);
}

.btnEliminarCarro:hover {
    background: linear-gradient(135deg, #F0474B 0%, #D13438 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(209,52,56,0.3);
}

/*boton de producto manual*/
.btn-AgregaManual {
    background-color: #0078D4 !important;  /* ← Azul personalizado Windows 11 */
    color: white !important;
    border: 1px solid #005A9E !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,120,212,0.2);
}

.btn-AgregaManual:hover {
    background-color: #0062b5 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,120,212,0.3);
}

@media (max-width: 768px) {
    .btn-AgregaManual {
        width: 100%;
        font-size: 16px;
        padding: 15px;
        margin-top: 10px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .btn-AgregaManual {
        font-size: 18px;
        padding: 18px;
    }
}

.items-c {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    background: white !important;
}

.tabla-items {
    table-layout: auto;
    margin: 0;
    border-collapse: collapse;
    background-color: #FFFFFF !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.tabla-items thead tr {
    background: linear-gradient(135deg, #0078D4 0%, #005A9E 100%) !important;
}

.tabla-items thead tr th {
    text-align: center;
    color: #FFFFFF !important;
    text-transform: uppercase;
    font-size: 0.9em !important;
    padding: 12px !important;
}

.tabla-totales {
    table-layout: auto;
    margin: 0;
    border-collapse: collapse;
    margin-top: 15px !important;
}

.tabla-totales tbody tr td:nth-child(1) {
    width: 70% !important;
    text-align: right !important;
    padding-right: 20px !important;
    font-size: 1em !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #E0E0E0 !important;  /* ← Borde gris suave Win11 */
}

.tabla-totales tbody tr td:nth-child(2) {
    width: 30% !important;
    text-align: left !important;
    padding-left: 20px !important;
    font-size: 1.2em !important;
}

.formVenta input, .formCompra input,
.formVenta select, .formCompra select,
#formGuia select, #formGuia input {
    border-radius: 10px !important;
    border: 1px solid rgba(0,120,212,0.5) !important;
    padding: 12px 16px !important;
    transition: all 0.2s ease;
}

.formVenta input:focus, .formCompra input:focus,
.formVenta select:focus, .formCompra select:focus,
#formGuia select:focus, #formGuia input:focus {
    border-color: #0078D4 !important;
    box-shadow: 0 0 0 3px rgba(0,120,212,0.15) !important;
}
/* Fix para selects en la sección de venta (Tipo Comprobante y Tipo Doc) */
.formVenta select,
#tipoComprobanteSelector,
#tipoDoc,                    /* ID más común para el select de tipo de documento */
select[name="tipoComprobante"],
select[name="tipoDocumentoIdentidad"] {
    font-size: 1rem !important;           /* 16px - tamaño estándar y legible */
    padding: 10px 14px !important;        /* Padding cómodo pero no exagerado */
    height: 42px !important;              /* Altura consistente con inputs modernos */
    border-radius: 8px !important;
    border: 1px solid #d0d0d0 !important;
    background-color: #fff !important;
    color: #1f1f1f !important;
    appearance: none;                     /* Quita la flecha fea por defecto en algunos navegadores */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9l-4-4h8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

/* Hover y focus con estilo Windows 11 */
.formVenta select:focus,
#tipoComprobanteSelector:focus,
#tipoDoc:focus {
    border-color: #0078d4 !important;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15) !important;
    outline: none !important;
}

/* Labels más equilibrados */
.formVenta label {
    font-size: 0.95rem !important;        /* Un poco más pequeño que los inputs */
    font-weight: 500 !important;
    color: #444 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.formVenta span, .formCompra span {
    border: 1px solid rgba(0,120,212,0.5) !important;
    border-radius: 10px 0 0 10px !important;
    border-right: none !important;
}

.tabla-items tbody tr {
    /* 2px de grosor, estilo dashed (guiones) y el color que prefieras */
    border-bottom: 2px dashed #BDBDBD !important; 
}

.tabla-items tbody tr:last-child {
    border-bottom: none !important;  /* Mantiene el último sin línea */
}


.formVenta #serie, #fechaDoc, 
.formVenta #fechaVence,
.formVenta #descuentoGlobal,
.formVenta #descuentoGlobalP,
.formVenta #email,
.formVenta select,
.formCompra #serieDoc, .formCompra #fechaDoc,
.formCompra #serieModificar, .formCompra #correlativoModificar, .formCompra #fechaModificar, 
.formCompra #fechaVence,
.formCompra #descuentoGlobal,
.formCompra #descuentoGlobalP,
.formCompra #email,
.formCompra #correlativoDoc,
.formCompra select,
#formGuia #tipocomp,
#formGuia #tipoDoc,
#formGuia #serie,
#formGuia #fechaEmision
{
    border-radius: 0px 5px 5px 0px!important;
    
}
.formVenta select
{
    cursor:  pointer  !important;
    
}
.formVenta select option,
.formCompra select option
{
    padding:  8px !important;
    font-size: 1.2em !important;
    cursor: pointer !important;
}
.formVenta #docIdentidad,
.formVenta #serieNumero,
.formCompra #docIdentidad,
#formGuia #docIdentidad,
#formGuia #docTransporte
{
    border-radius: 5px 0px 0px 5px!important;
}
.formVenta #docIdentidad ~ span,
.formVenta #serieNumero~ span,
.formCompra #docIdentidad ~ span,
#formGuia #docIdentidad ~ span,
#formGuia #docTransporte ~ span,
.formCompra #serieDoc~ span,
.formCompra #serieModificar~ span
{
    background-image: linear-gradient( 105.3deg,  rgb(51, 142, 255 ) 62.2%, rgb(101, 51, 255 ) 62.2% ) !important;
    border-radius: 0px 5px 5px 0px!important;
    border-left: 0px !important;
    color: #fff !important
}
.formVenta #serieNumero, .formCompra #serieDoc,
.formCompra #serieModificar
{
    text-transform: uppercase !important;
}
.formVenta #serie{
    background-color: #fff;
}
.tabla-items button{
    position:  relative !important;
    border-radius: 100% !important;
    padding: 5px !important;
    width: 30px !important;
    height: 30px !important;
    background-color: #D13438 !important;
    border-style: none !important ;
    outline: 0 !important
}
.btn-agregar-carrito {
    position: relative !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #0078D4 0%, #005A9E 100%) !important;
    border-style: none !important;
    outline: none !important;
    margin-bottom: 3px !important;
    padding: 10px !important;
    font-size: 1.1em !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    color: white !important;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,120,212,0.2);
}




/* Ejemplo de nueva regla para textarea (mejorada con focus Win11) */
textarea {
    border-radius: 10px !important;  /* ← Redondeado moderno */
    border: 1px solid #d0d0d0 !important;
    transition: all 0.2s ease;
}

textarea:focus {
    border-color: #0078D4 !important;
    box-shadow: 0 0 0 3px rgba(0,120,212,0.15) !important;
}
#reloadC{
    position: absolute;
    display: none;
    width: 40px;
    height: 40px; 
    left: 50%;
    top:-30px;
    z-index: 100000;
    border-radius:100% !important;
    background-color: rgba(255, 9, 9, 0) !important;
}#reloadC img{
    position: relative;   
    width: 40px;
    height: 40px;
    border-radius:100% !important;
    background-color: rgba(255, 9, 9, 0) !important;
}
#reloadCG{
    position: absolute;
    display: none;
    width: 40px;
    height: 40px; 
    left: 50%;
    top:-30px;
    z-index: 100000;
    border-radius:100% !important;
    background-color: rgba(255, 9, 9, 0) !important;
}#reloadCG img{
    position: relative;   
    width: 40px;
    height: 40px;
    border-radius:100% !important;
    background-color: rgba(255, 9, 9, 0) !important;
}
#rucActivo{
    position: absolute;
    top: 8px;
    right: 40px;
    padding:  3px 6px 3px 6px;
    z-index: 999;
    color: #fff;
    letter-spacing: 1px;
    font-size: 9px;
    border-radius: 3px;
    /* text-transform: uppercase; */
}
.btnsuccess{
    background-color: rgb(37, 190, 44) !important;
    border-radius: 7.5px !important;
    padding-top: 10px  !important;    
    padding-bottom: 10px  !important;    
    color: #fff !important;
    text-transform: uppercase !important;
    font-size: .9em !important;
    margin-bottom: 3px  !important;
}
/* BOTONES CARRO GUARDAR ELIMINAR */
.contenedor-btns-carrito{
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
}
/*.btnGuardarVenta, .btnGuardarCompra, .btnGuardarNC, .btnGuardarND, .btnGuardarGuia{*/
/*  background-image: linear-gradient( 105.3deg, rgb(155, 255, 155) 62.2%, rgb(51, 204, 51) 62.2% );*/
/*}*/






.btnGuardarVenta, .btnGuardarCompra, .btnGuardarNC, .btnGuardarND, .btnGuardarGuia {
    background-image: linear-gradient(105.3deg, rgb(155, 255, 155) 62.2%, rgb(51, 204, 51) 62.2%);
    color: black;
    font-weight: bold;
    text-align: center;
    border: none;
    padding: 15px 25px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btnGuardarVenta:hover, .btnGuardarCompra:hover, .btnGuardarNC:hover, .btnGuardarND:hover, .btnGuardarGuia:hover {
    background-image: linear-gradient(105.3deg, rgb(125, 225, 125) 62.2%, rgb(41, 164, 41) 62.2%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}


.btnEliminarCarro{
    background-image: linear-gradient( 105.3deg,  rgb(224, 56, 56) 21.8%, rgb(252, 156, 156) 100.2% );
}
.btnGuardarVenta, .btnEliminarCarro, .btnGuardarNC, .btnGuardarND, .btnGuardarCompra, .btnGuardarGuia{
    padding: 12px !important;
    border-radius: 5px !important;
    margin:4px !important;
    border-style:  none !important;
}
.btnGuardarVenta i,
.btnGuardarCompra i ,
.btnGuardarNC i,
.btnGuardarND i,
.btnGuardarGuia i,
 .btnEliminarCarro i{
    font-size: 2.2em !important;
    color:rgb(255, 255, 255);
}

/* MODAL PRODUCTOS PARA AGREGAR AL CARRITO
 */
 #modalProductosVenta .modal-content{

    border-radius: 15px !important;
    
 }
 #modalProductosVenta .modal-header{

    border-radius: 15px 15px 0px 0px !important;
    background-image: linear-gradient( 105.3deg,  rgb(103, 117, 224) 21.8%, rgb(118, 156, 253) 100.2% );
    color: white !important;
    padding-top: 0px !important;
    padding-bottom:  0px !important;

 }

 #modalProductosVenta .body-productos-ventas .btn-primary{
    outline: 0 !important;
    border-style: none !important;
    border-radius: 5px !important;
    background-image: linear-gradient( 105.3deg,  rgb(72, 103, 204) 21.8%, rgb(118, 156, 253) 100.2% );
    color: white !important;
    font-size: 1.1em !important;
    letter-spacing: 1px !important;

 } #modalProductosVenta .body-productos-ventas .btn-close{

    background-image: linear-gradient( 105.3deg,  rgb(255, 78, 78) 21.8%, rgb(255, 87, 87) 100.2% ) !important;


 } 

 #modalProductosVenta .modal-header h5{
     font-size: 1.5em !important;
     margin-top: 12px !important;


 }

 /* CSS DESCUENTO S/ %  */
.contenedor-tipo-descuento{
    position: relative;
    width: 70px;
    /* background:rgb(37, 190, 44); */
    height: 29px;

 }
.contenedor-tipo-descuento input{
    display:none;


 }
.contenedor-tipo-descuento label{
   position: absolute;
   width: 30px;
  padding : .2em;
   background-color: rgb(69, 79, 160);
   font-size: 1em;
   border-radius:  2em;
   color: #fff;
   text-align: center;
   cursor: pointer;

 }
 
.contenedor-tipo-descuento #sol{

    background-color: rgb(44, 209, 52);
    border-radius: 2em 0em 0em 2em;
    border-left: 8px solid rgb(28, 155, 3);;
   
 }
.contenedor-tipo-descuento #por{
    left: 30.1px;
    border-radius: 0em 2em 2em 0em;
    background-color: rgb(172, 172, 172);


 }
 .on{
    background-color: rgb(44, 209, 52) !important;
 }
 .on-por{
    background-color: rgb(44, 209, 52) !important;
    border-right: 8px solid rgb(28, 155, 3);
 }
 .off{
    background-color: rgb(172, 172, 172)  !important;
    border-style: none !important;
 }
 .table-condensed .off{
    background-color: rgb(245, 245, 245)  !important;
    border-style: none !important;
 }
 /* FIN CSS DESCUENTO S/ %  */

/* =============================== */
/* FIN BOTÓNES IMPRIMIR */
.contenedor-print{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    
}
.contenedor-print #printA4, .contenedor-print #printT{
    position: relative;
    padding: 5px;
   width: 60px;
   height: 60px;
   border-radius: 100% !important;
   margin: 5px;
   background-color: #fff;
   cursor: pointer;
   outline: 0 !important;
border-style: none !important;
border: 1px solid rgb(255, 255, 255) !important;
box-shadow: 1px 1px 5px rgba(214, 214, 214, 0.7) !important;
}
#a4, #tk{
    display: none;
}
.contenedor-print #printA4{
    background-image: url('../img/svg/pdf_cpe.svg') !important;
    background-size: 2.5em 2.5em !important;
     background-position: center !important;
     background-repeat: no-repeat !important;
}
.contenedor-print #printT{
    background-image: url('../img/svg/ticket_cpe.svg') !important;
    background-size: 2.5em 2.5em !important;
     background-position: center !important;
     background-repeat: no-repeat !important;
}
/* FIN BOTÓNES IMPRIMIR */
/* =============================== */

.tablaVentas thead,
.tablaGuias thead,
.tablaCotizaciones thead{
    background-image: linear-gradient( 105.3deg,  rgb(101, 51, 255) 62.8%, rgb(51, 142, 255 ) 62.2% );
    background-repeat: no-repeat;
}

.tablaVentas thead tr th,
.tablaGuias thead tr th,
.tablaCotizaciones thead tr th{
    text-transform: uppercase !important;
    border: 0 !important;
    text-align: center;
    color: rgb(255, 255, 255);
    font-weight: 600;
    
}


.tablaVentas tbody tr td,
.tablaGuias tbody tr td,
.tablaCotizaciones tbody tr td{
    border-style: none !important;
}
/* RELOAD RESUMENES
 */
/* DIA NOCHE ================== */
.dia{
    padding: 1px !important;
    width: 25px !important;
    height: 25px !important;
    margin-right: 0 !important;
    /* background-color: #fff !important; */
    border-radius: 100% !important;
    background-image: url('../img/svg/sun.svg');
    background-size: 25px 25px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.noche{
    padding: 1px !important;
    width: 25px !important;
    height: 25px !important;
    margin-left: 0 !important;
    background-color: rgb(82, 82, 82) !important;
    border-radius: 100% !important;
    background-image: url('../img/svg/luna.svg');
    background-size: 25px 25px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
textarea{
    border-radius: 0px 15px 15px 0px !important;
}

.modo-contenedor-selva{
    width: 180px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin: 0px;
}

@media (max-width: 430px){
    .contenedor-selva{
        flex-flow: column;
    }
    .modo-contenedor-selva{
        width: 100%;
        
    }
}

.modo-contenedor-selva .btn-success{ 
    border-style: none !important;
}
.modo-contenedor-selva .btn-danger{ 
    border-style: none !important;
}

.toggle-group .btn-success{ 
       background-color: rgb(60, 131, 211) !important;
       text-align: center !important;
   font-size: 1.2em !important;
}
.toggle-group .btn-danger{  
     background-color: rgb(253, 89, 89) !important;
     text-align: center !important;
   font-size: 1.2em !important;
}


.toggle-handle.btn-default{
    border-style: none !important;
    width: 35px !important;
    border-radius: 0% !important;
    background-color: rgb(221, 221, 221) !important;
}

  .morris-hover-point{
      color: rgb(54, 54, 54) !important;
  }
  .btn-stock{
      border-style: none !important;
      outline: none !important;
      width: 100% !important;
      font-size: 15px !important;
      font-weight: bold !important;
  }
  .alert-dangers.text-center{
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      top: 0;
      left: 0;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-content: center;
      text-transform: uppercase;
      align-items: center;
      color: rgb(155, 155, 155);
      padding: 35px;
      text-align: center;
  }
  .alert-dangers .img-restringido{
    padding: 1px;
    width: 250px;
    height: 250px;
    /* background-color: #fff; */
    border-radius: 100%;
    background-image: url('../img/ojos.png');
    background-size: 150px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .alert-dangers h3{
      font-weight: bold;
  }
  @media (max-width: 430px){
    .alert-dangers .img-restringido{
        width: 200px;
        height: 200px;
    }

  }