.dataTables_length{
      width: 33%;
      display: inline-block;
      text-align:left;
    }
    .dataTables_filter{
      width: 33%;
      display: inline-block;
      text-align:right;
    }
    /*.toolbar{
      width: 15%;
      display: inline-block;
      text-align:center;
    }
    .toolbar1{
      width: 15%;
      display: inline-block;
      text-align:center;
    }*/
    .dt-buttons{
      width: 33%;
      display: inline-block;
      text-align:center;
    }

/*Estilo para el bloqueo de pagina */
#cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(255,255,255,0.7);
    z-index:9999;
    display:none;
}

@-webkit-keyframes spin {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
/*Fin Estilo para el bloqueo de pagina */

/*Estilo para el bloqueo de pagina */
#cover-spin1, #cover-spin-auth {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(255,255,255,0.7);
    z-index:9999;
    display:none;
}

@-webkit-keyframes spin {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

#cover-spin1::after, #cover-spin-auth::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
/*Fin Estilo para el bloqueo de pagina */

/*Estilo para el bloqueo de pagina */
#cover-spin2 {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(255,255,255,0.7);
    z-index:9999;
    display:none;
}

@-webkit-keyframes spin {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

#cover-spin2::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
/*Fin Estilo para el bloqueo de pagina */

#DataTables_Table_0_wrapper > div > div:nth-child(2) {
  text-align: right;
}

/* Estilos para la página de carga */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.loader {
    border: 16px solid #f3f3f3; /* Color de fondo del círculo */
    border-top: 16px solid #3498db; /* Color del borde superior */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

/* Animación de giro */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loading-text {
    margin-top: 20px;
    font-size: 1.5rem;
    font-family: Arial, sans-serif;
}

#dots {
    display: inline-block;
    font-size: 1.5rem;
    animation: dots-blink 1.5s infinite;
}

@keyframes dots-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.swal2-popup{
    height: auto !important;
}

.clickable-box {
    cursor: pointer; /* Cambia el cursor a pointer para indicar que es clickeable */
    transition: background-color 0.3s ease; /* Transición suave para el cambio de color al pasar el mouse */
}

.btn-search{
    margin-top: 24px;
}

.clientHacienda{
    height: 32px !important;
}

#pause-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;  
}

/*SPINER ANIMATION*/
.spinner{ width: 30px; height: 30px; position: relative; }
.spinner-container{ width: 100%; height: 100%; position: relative; }
.spinner-line{ width: 6px; height: 12px; background: #000; border-radius: 20%; position: absolute; top: 50%; left: 50%; transform-origin: center -6px; transform: translate(-50%, -50%); opacity: 0.1; animation: spin-line 1.2s linear infinite; }
.spinner-line:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; }
.spinner-line:nth-child(2) { transform: rotate(45deg); animation-delay: -1s; }
.spinner-line:nth-child(3) { transform: rotate(90deg); animation-delay: -0.9s; }
.spinner-line:nth-child(4) { transform: rotate(135deg); animation-delay: -0.8s; }
.spinner-line:nth-child(5) { transform: rotate(180deg); animation-delay: -0.7s; }
.spinner-line:nth-child(6) { transform: rotate(225deg); animation-delay: -0.6s; }
.spinner-line:nth-child(7) { transform: rotate(270deg); animation-delay: -0.5s; }
.spinner-line:nth-child(8) { transform: rotate(315deg); animation-delay: -0.4s; }
@keyframes spin-line{ 0% { opacity: 0.1; } 50% { opacity: 1; } 100% { opacity: 0.1; } }

.btn-secondary {
    color: #f8f9fa;
    background-color: #848689;
    border-color: #848689;
}

.btn-secondary:hover {
    background-color: #5A6268;
    border-color: #1d2124;
    color: #f8f9fa;
}

.btn-secondary:focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.btn-secondary:active {
    background-color: #1d2124;
    border-color: #171a1d;
}

.form-tp{
    background-color: transparent !important;
}

.form-no-border{
    border: 0;
    background-color: transparent !important;
}

input.pw {
    -webkit-text-security: disc;
}
.div-1 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 10px;
}
.textarea-resize{
    width: 100% !important;
    height: 60px !important;
    resize: none !important;
}
.input-align{
    height: 36px;
}
.only-text, .nuevaDescripcionProducto, .nuevoPrecioProducto {
    background-color: transparent !important; 
}
.nuevaCantidadProducto{
    text-align: center !important;
}
.container-productos{
    height: 45vh !important;
    max-height: 45vh !important;
    overflow-y: auto;
    overflow-x: hidden;
}
.info-total{
    font-weight: bold;
    font-size: 18px;
}
.container-inputs{
    margin-bottom: -10px !important;
}
.ico-size{
    font-size: 13px;
    padding: 4px;
}
.container-table{
    height: 73vh !important;
    max-height: 73vh !important;
    overflow-y: auto;
    overflow-x: hidden;
}
.tooltip {
    position: fixed;
}
body{
    padding-right: 0px !important;
}
.modal-body {
    max-height: 73vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.container-mediopagos{
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.container-mediopagos p{
    font-weight: bold;
}
.container-mediopagos:hover{
    cursor: pointer;
    transform: scale(.9);
}
.container-mediopagos .thumbnail img {
    width: 100%;
    height: 88px;
    object-fit: cover;
}
.input-pagar{
    border: none;
    background-color: transparent !important;
    font-size: 44px;
    font-weight: bold;
}
.clientHacienda{
    height: 32px !important;
}

.text-title{
    font-weight: bold;
    font-size: 1.8rem;
}

.btn-menu{
    display: block;
    width: 100%;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 0px;
}

.btn-pago {
    display: flex; /* Alinear el contenido internamente */
    flex-direction: column; /* Imagen arriba, texto abajo */
    justify-content: center; /* Centrar verticalmente */
    align-items: center; /* Centrar horizontalmente */
    width: 100%;
    height: 12.5rem;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word; /* Mantener soporte para saltos de palabra */
    padding: 0;
    border: 2px solid var(--bs-primary); /* Mejor visibilidad del borde */
    border-radius: 8px; /* Bordes redondeados para estética */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animación al interactuar */
    background-color: #fff; /* Fondo blanco limpio */
}

.btn-press{
    cursor: pointer;
}

.btn-pago:hover, .btn-menu:hover, .btn-lateral:hover, .btn-top:hover, .btn-tactil:hover, .btn-press:hover{
    transform: scale(1.05);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-pago img {
    max-width: 80%; /* Ajuste del tamaño de la imagen */
    max-height: 60%; /* Limitar altura */
    object-fit: contain; /* Asegurar proporciones correctas */
    margin-bottom: 0.5rem; /* Separación entre imagen y texto */
}

.pdv-facturacion{
    height: 75vh !important;
    max-height: 75vh !important;
    min-height: 75vh !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.container-zonas{
    height: 30vh !important;
    max-height: 30vh !important;
    min-height: 30vh !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.container-admin{
    height: 35rem !important;
    max-height: 35rem !important;
    min-height: 35rem !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.container-zonas-cdm{
    height: 45rem !important;
    max-height: 45rem !important;
    min-height: 45rem !important;
    overflow-y: auto;
    overflow-x: hidden;
    border: 2px solid rgba(0, 0, 0, 0.36);
    border-radius: 4px;
    background: transparent;
    box-shadow: 0 2px 8px rgb(106 125 177);
    padding: 2px;
}

.pdv-pagos, .pdv-formas-pagos{
    height: 41rem !important;
    max-height: 41rem !important;
    min-height: 41rem !important;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ddd;
    padding: 3px;
    background-color: #f9f9f9;
}

.pdv-pagos .encabezados {
    font-weight: bold;
    margin-bottom: 1rem;
}

.pdv-pagos .fila {
    margin-bottom: 0.5rem;
    padding: 4px;
}

.pdv-pagos .fila .form-control {
    width: 100%;
}

.pdv-category{
    height: 30vh !important;
    max-height: 30vh !important;
    min-height: 30vh !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.pdv-food{
    height: 43vh !important;
    max-height: 43vh !important;
    min-height: 43vh !important;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 15px;
    border: 2px solid rgba(0, 0, 0, 0.36);
    border-radius: 4px;
    background: transparent;
    box-shadow: 0 2px 8px rgb(106 125 177);
    padding: 2px;
}

.pdv-mesas-abiertas{
    height: 43vh !important;
    max-height: 43vh !important;
    min-height: 43vh !important;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 15px;
    border: 2px solid rgba(0, 0, 0, 0.36);
    border-radius: 4px;
    background: transparent;
    box-shadow: 0 2px 8px rgb(106 125 177);
    padding: 2px;
}

.pdv-admin-productos{
    height: 35rem !important;
    max-height: 35rem !important;
    min-height: 35rem !important;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 15px;
    border: 2px solid rgba(0, 0, 0, 0.36);
    border-radius: 4px;
    background: transparent;
    box-shadow: 0 2px 8px rgb(106 125 177);
    padding: 2px;
}

.container-cambiomesa, .container-mesabutton{
    height: 45rem !important;
    max-height: 45rem !important;
    min-height: 45rem !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.container-unircuenta, .container-mesasselect{
    height: 45rem !important;
    max-height: 45rem !important;
    min-height: 45rem !important;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 15px;
    border: 2px solid rgba(0, 0, 0, 0.36);
    border-radius: 4px;
    background: transparent;
    box-shadow: 0 2px 8px rgb(106 125 177);
    padding: 2px;
}

.cobro-container{
    padding-left: 0px;
    padding-right: 0px;
}

.space-btn{
    padding: 0px 2px 0px 2px;
}

.btn-lateral {
    width: 100%;
    white-space: normal;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.info-lateral{
    height: 29px;
}

#table_factura_wrapper .dataTables_scrollBody {
    min-height: 50vh;
    max-height: 50vh;
    overflow-y: auto;
}

#table_admin_wrapper .dataTables_scrollBody {
    min-height: 28rem;
    max-height: 28rem;
    overflow-y: auto;
}

#table_original_wrapper .dataTables_scrollBody, #table_cambio_wrapper .dataTables_scrollBody{
    min-height: 30rem;
    max-height: 30rem;
    overflow-y: auto;
}

.foot-blue{
    background-color: #75A9F9;
}

.foot-blue tr th{ border-color: #75A9F9 !important; }

.thead-border{
    background-color: #f2f2f2;
}

#table_factura_info, 
#table_factura_infoEmpty, 
#table_factura_infoFiltered, 
#table_factura_zeroRecords,
#table_factura .dataTables_empty,
#table_admin_info, 
#table_admin_infoEmpty, 
#table_admin_infoFiltered, 
#table_admin_zeroRecords,
#table_admin .dataTables_empty,
#table_original_info, 
#table_original_infoEmpty, 
#table_original_infoFiltered, 
#table_original_zeroRecords,
#table_original .dataTables_empty,
#table_cambio_info, 
#table_cambio_infoEmpty, 
#table_cambio_infoFiltered, 
#table_cambio_zeroRecords,
#table_cambio .dataTables_empty{
    display: none;
}

.info-factura {
    background-color: #3C8DBC;
    color: white;
    padding: 15px;
    border-radius: 20px;
    padding: 11px 26px 2px 20px;
}

.col-info{
    margin-bottom: -3px;
    margin-top: -4px;
}

.table-row-selected {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
}

.table-select tbody tr{
    cursor: pointer;
}

.col-left{
    padding-left: 8px;
    padding-right: 0px;
}

.col-right{
    padding-right: 8px;
    padding-left: 8px;
}

/*-------------------------------*/
/*ESTILOS FACTURACION*/
.btn-tipo-guardar{
    height: 5rem;
    background-color: #3C8DBC;
    color: white;
    font-weight: 600;
    font-size: large;
    border-color: #3C8DBC;
}

.dt-buttons{
    text-align: left;
}

.form-hidden input{
    display: none;
}

.alert-pdv-info{
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.td-adicional::before, .td-modificacion::before {
    font-family: "FontAwesome";
    font-weight: normal;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding-right: 5px;
    padding-left: 2rem;
    position: relative;
}

.td-adicional::before {
    content: "\f0fe";
}

.td-modificacion::before {
    content: "\f146";
}

.infoAdmin, .infoPDV{
    font-size: 2rem;
    font-weight: bold;
    color: #454367;
    display: block;
}

.infoAdmin{
    display: block;
}

.modal-content{
    border-radius: 7px;
    overflow: hidden;
}

.change-table{
    margin-top: 18rem;
    cursor: pointer;
    color: #3C8DBC;
}

.admin-btn{
    font-size: 4rem;
    cursor: pointer;
}

.change-table:hover, .admin-btn:hover{
    transform: scale(1.05);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

.cdm-arrow{
    font-size: 3rem;
    margin-top: 1rem;
}

.container-seleccion{
    border: 1px solid #0000008c;
    border-radius: 5px;
    width: 100%;
    height: 13rem;
    background-color: #b7e5dbb8;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
}

.container-seleccion span{
    flex-grow: 1;
}

.container-seleccion:hover{
    background-color: #b7e5db;
}

.form-area{
    width: 100%;
    height: 13rem !important;
    resize: none;
}

.letter-lg{
    font-size: 3rem !important;
}

.btn-tactil{
    font-size: 1.9rem;   
}

.form-total{
    text-align: right;
    border: 0;
    background-color: transparent !important;
    font-weight: bold;
    font-size: 4rem;
}

.cobro-pendiente input, .cobro-pendiente span{
    color: #006aa7 !important;
}

.cobro-vuelto input, .cobro-vuelto span{
    color: #2b6f30 !important;
}

.cobro-pendiente span, .cobro-vuelto span{
    padding-top: 0px !important;
}

.modal-header{
    background:#3c8dbc; 
    color: white;
}

.modal-header .close {
    margin: 0;
    padding: 0;
    line-height: 0;
    margin-top: -1.5rem;
}