@import url('https://fonts.cdnfonts.com/css/jockey-one');


.login-validate{
    background-image: url(../assets/img/login_imagen.jpg);
}

#UserEmail, #UserPass{
    color: burlywood !important;
}
/* MENU DE OPCIONES*/
.navbar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #2c3e50; /* Color de fondo de la barra de menú (ajusta según tu diseño) */
}

.navbar-menu li {
    position: relative; /* Necesario para posicionar el submenú */
}

.navbar-menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #ffffff; /* Color del texto claro para contrastar con el fondo oscuro */
    background-color: #2c3e50; /* Mismo color que la barra de menú para las opciones principales */
}

.navbar-menu a:hover {
    background-color: #34495e; /* Color ligeramente más claro/oscuro al pasar el mouse */
}

.dropdown-menu {
    display: none; /* Oculta el submenú por defecto */
    position: absolute;
    top: 100%; /* Posiciona el submenú justo debajo del elemento padre */
    left: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ffffff; /* Fondo claro para el submenú */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra para mejor apariencia */
    min-width: 200px; /* Ancho mínimo para el submenú */
    z-index: 1000; /* Asegura que el submenú esté por encima de otros elementos */
}

.dropdown:hover .dropdown-menu {
    display: block; /* Muestra el submenú al pasar el mouse */
}

.dropdown-menu li a {
    padding: 8px 15px;
    color: #333; /* Color del texto del submenú */
    background-color: #ffffff; /* Fondo del submenú */
    text-decoration: none;
    display: block;
}

.dropdown-menu li a:hover {
    background-color: #f0f0f0; /* Fondo al pasar el mouse por las subopciones */
    color: #000; /* Color del texto al pasar el mouse */
}
/* fin de menú de opciones*/
.table-margin{
    margin-left: 15px !important;
    margin-right: 15px !important;
}

table{
    border-collapse: collapse; /* Colapsar bordes */
    width: 100%; /* Ancho de la tabla */
    font-size: 11px !important;
}

table tbody td button{
    font-size: 9px !important;
    padding: 0px 12px !important;
    margin: 1px 1px !important;
}

.table-container{
    max-height: 60vh !important;
    overflow-y: auto !important;
}
#tablaBalance .table-dark {
    background-color: #0d6efd !important; /* Azul igual que .btn-primary */
    color: #fff !important; /* Texto blanco para contraste */
}

.modal-header{
    background-color: orangered !important;
    color: white !important;
}

.form-group{
    padding-bottom: 10px !important;
    margin: 1px 0 0 0 !important; 
}

.titulo_modal{
    font-family: 'Jockey One', sans-serif;
    font-size:24px !important;
}

.formato_celda_izquierda{
    text-align: left !important;
}

.contenido-precios{
    height: 60vh;
    overflow-y: auto;
}
.boton-eliminar {
    background-color: red; /* Cambiar el fondo a rojo */
    border-color: darkred; /* Cambiar el borde a rojo oscuro */
    color: red !important; /* Cambiar el texto a blanco */
}

.btn-eliminar{
    color: red;
}

select {
    appearance: none; /* Eliminar el estilo por defecto del select */
    -webkit-appearance: none; /* Para Safari */
    -moz-appearance: none; /* Para Firefox */
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 16px;
    width: 200px; /* Ajusta según tus necesidades */
    cursor: pointer;
}

/* Contenedor para el select */
.select-container {
    position: relative;
    display: inline-block;
}

/* Triángulo del lado derecho */
.select-container::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    transform: translateY(-50%);
    pointer-events: none; /* Asegura que el triángulo no interfiera con el click */
}
.btn-sm {
    font-size: 0.75rem; /* Ajusta el tamaño del texto en los botones */
    padding: 0.25rem 0.5rem; /* Ajusta el padding en los botones */
}
.btn-danger {
    background-color: #dc3545 !important; /* Color de fondo de peligro */
    border-color: #dc3545 !important;     /* Borde rojo */
    color: white !important;              /* Texto blanco */
    margin: 0px 0px;
    padding: 0.25rem 0.5rem; /* Ajusta el padding en los botones */
}
.btn-warning {
    background-color: #dc5 !important; /* Color de fondo de peligro */
    border-color: #d4322245 !important;     /* Borde rojo */
    color: white !important;              /* Texto blanco */
    margin: 0px 0px;
    padding: 0.25rem 0.5rem; /* Ajusta el padding en los botones */
}
.boton-eliminar {
    background-color: transparent; 
    border: none;
    color: #000;
}
.boton-eliminar:hover {
    background-color: rgba(0, 0, 0, 0.1); 
}

.btn-sm {
    padding: 0.25rem 0.5rem; /* Ajusta el padding según sea necesario */
    font-size: 0.75rem; /* Ajusta el tamaño de fuente si es necesario */
}
.custom-card-title {
    font-size: 20px;
}
.custom-card-text {
    font-size: 14px;    
}
.button-group .btn {
    padding: 0.25rem 0.5rem; /* Ajusta el padding según sea necesario */
    font-size: 0.75rem; /* Ajusta el tamaño de fuente si es necesario */
    margin-top: 10px;
}
.card-body.custom-card-body {
    position: relative; /* Asegura que los elementos se posicionen correctamente dentro de la tarjeta */
    padding: 1rem; /* Ajusta el espacio interno si es necesario */
    background-color: #fff; /* Asegúrate de que el fondo sea blanco o el color deseado */
    border-radius: 0.25rem; /* Opcional: Añade bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ajusta el efecto de sombra para simular 3D */
}
.custom-card-width {
    max-width: 400px; /* Ajusta el valor según el tamaño deseado */
    width: 100%; /* Asegura que el card use el ancho disponible */
}
.button-group {
    margin-top: 1rem; /* Espacio entre el contenido y los botones */
}
.img-reducida {
    width: 30%;
}
.input-group {
    display: flex;
    align-items: center;
}
.input-group-append {
    display: flex;
    align-items: center;
}
.text-tight{
    font-size: 9px;
}
.mt-5{
    margin-top: 5vh;
}

.mt-2{
    margin-top: 2vh;
}
input[readonly] {
    background-color: #e0f7fa; /* Color de fondo azul claro */
    color: #0277bd; /* Color de texto azul oscuro */
    cursor: not-allowed; /* Cambia el cursor para indicar que no son editables */
}
.selected {
    background-color: rgba(255, 255, 255, 0.2); /* Blanco con 50% de transparencia */
    color: orange; /* Ajusta el color del texto según el contraste que prefieras */
}
#UserEmail, #UserPass {
    text-transform: uppercase;
}
.texto-rojo {
    color: red;
    font-size: 18px; 
}
.table-row:nth-child(odd) {
    background-color: #3380b0; /* Color para filas impares */
}
.table-row:nth-child(even) {
    background-color: #e7f0f1fa; /* Color para filas pares */
}
.input-text {
    text-align: right; /* Alinear texto a la derecha */
    padding-right: 10px; /* Agregar un espacio a la derecha para que el texto no se recorte */
    width: 100%; /* Asegurarte de que el campo ocupe el ancho completo de su contenedor */
}
.row {
    margin-bottom: 1px; /* Ajusta el espacio entre las filas */
}
.row > div {
    margin-bottom: 1px; /* Ajusta el espacio entre columnas dentro de la fila */
}
.form-group {
    margin-bottom: 0; /* Asegura que no haya margen adicional en el grupo de formulario */
}
.form-group label {
    display: block; /* Asegura que el label ocupe todo el ancho */
    margin-bottom: 2px; /* Espacio entre el label y el input */
    font-size: 14px; /* Ajusta el tamaño de la fuente si es necesario */
}

.form-group input {
    margin-top: 0; /* Asegúrate de que no haya margen arriba */
    padding: 0px; /* Ajusta el padding del input */
    height: 24px; /* Asegura que la altura sea consistente */
}
label {
    margin-right: 5px; /* Puedes ajustar a 0 si es necesario */
    color: #000000; /* Negro puro */
}
input {
    margin-left: 0;
    padding-left: 5px; /* Para un poco de espacio interno */
}

/* KUBIX*/
:root{--alt1:#ffffff;--alt2:#f7fbff;--line1:#e6f2ff;--line2:#f0f7ea}
body{font-family:Arial, Helvetica, sans-serif;margin:0;padding:0}
.container-kubix{padding:20px}
.card{background:#fff;border-radius:10px;padding:15px;border:1px solid #ddd}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.controls select,.controls input{padding:6px 8px;border-radius:6px;border:1px solid #ccc}
.btn{padding:6px 10px;border-radius:6px;border:none;cursor:pointer}
.btn-primary{background:#0d6efd;color: #000 !important;}
.btn-success{background:#198754;color: #000 !important;}
.btn-warning{background:#ffc107;color: #000 !important;}
.btn-danger{background:#dc3545;color: #000 !important;}
.table-wrapper{overflow:auto;max-height:60vh;border:1px solid #e9ecef;margin-top:12px;border-radius:6px}
table.kubix-table{width:100%;border-collapse:collapse;min-width:900px}
table.kubix-table th, table.kubix-table td{padding:8px 10px;border-bottom:1px solid #eee}
table.kubix-table th{position:sticky;top:0;background:#fafafa;z-index:2}
tr.nivel1{background:linear-gradient(90deg,var(--alt1),var(--alt2))}
tr.nivel2{background:linear-gradient(90deg,var(--line2),#ffffff)}
td.numeric{text-align:right;font-variant-numeric:tabular-nums}
.toggle-btn{cursor:pointer;font-weight:bold;padding:4px 8px;border-radius:4px}
.small-muted{font-size:12px;color:#666}

/* responsive */
@media(max-width:600px){.controls{flex-direction:column;align-items:stretch}.controls .right{margin-top:6px}}

/* loader */
.loader-overlay{position:fixed;inset:0;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;display:none}
.loader-box{padding:20px;border-radius:10px;background:#fff;border:1px solid #ccc;box-shadow:0 6px 20px rgba(0,0,0,0.08)}

.footer-info{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px}


#tablaBalance .table-dark,
#tablaBalance .table-dark th {
    background-color: #08be9f !important; /* Azul */
    color: #090909 !important;
    --darkreader-inline-bgcolor: none !important; /* Desactiva el color de Dark Reader */
    --darkreader-inline-background-color: none !important;
}
/* Existing styles for #tablaBalance */
#tablaBalance.table.table-striped.table-bordered .table-dark,
#tablaBalance.table.table-striped.table-bordered .table-dark th {
    background-color: #0d6efd !important;
    color: #fff !important;
    --darkreader-inline-bgcolor: none !important;
    --darkreader-inline-background-color: none !important;
}

/* Styles for #tablaBalanceDetalle */
#tablaBalanceDetalle.table.table-striped.table-bordered .table-dark,
#tablaBalanceDetalle.table.table-striped.table-bordered .table-dark th {
    background-color: #0d6efd !important;
    color: #fff !important;
    --darkreader-inline-bgcolor: none !important;
    --darkreader-inline-background-color: none !important;
}

/* Expand/collapse icon */
td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

/* Right-align numeric columns */
#tablaBalanceDetalle td.text-right {
    text-align: right !important;
}
#tablaBalanceContainer {
    display: none;
}
#seccionPrincipal {
    width: 100%;
    margin: 0;
    padding-top: 80px;
}

#seccionPrincipal > div {
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
}

#tablaBalanceDetalle td,
#tablaBalanceDetalle th {
    font-size: 16px; /* Tamaño de fuente aumentado */
}

.child-table td,
.child-table th {
    font-size: 16px; /* Tamaño de fuente para filas secundarias */
}




/*tabla detalles del balance*/
#tablaBalanceDetalle td.details-control {
    cursor: pointer;
    text-align: center;
    width: 20px;
    background: none !important; /* Anula fondos de DataTables */
    padding: 0;
}
#tablaBalanceDetalle td.details-control::before {
    content: '\f0fe'; /* Font Awesome plus-square */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 16px;
    display: inline-block;
    color: #000; /* Ícono negro */
}
#tablaBalanceDetalle tr.shown td.details-control::before {
    content: '\f146'; /* Font Awesome minus-square */
}
#tablaBalanceDetalle td,
#tablaBalanceDetalle th,
#tablaBalanceDetalle tfoot td,
#tablaBalanceDetalle tfoot th,
.child-table td,
.child-table th {
    font-size: 16px !important; /* Tamaño de fuente para toda la tabla */
}
#tablaBalanceDetalle.dataTable tfoot tr th.text-right,
#tablaBalanceDetalle.dataTable tfoot tr td.text-right {
    font-size: 16px !important; /* Forzar tamaño de fuente para totales */
}

/* Permitir ajuste dinámico de anchos */
#tablaBalanceDetalle {
    width: 100% !important;
}
#tablaBalanceDetalle thead th,
#tablaBalanceDetalle tbody td,
#tablaBalanceDetalle tfoot td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Anchos mínimos para columnas específicas */
#tablaBalanceDetalle th:nth-child(1),
#tablaBalanceDetalle td:nth-child(1) {
    width: 20px !important; /* Columna de detalles */
}
#tablaBalanceDetalle th:nth-child(2),
#tablaBalanceDetalle td:nth-child(2) {
    min-width: 80px; /* Columna Mayor */
}
#tablaBalanceDetalle th:nth-child(3),
#tablaBalanceDetalle td:nth-child(3) {
    min-width: 200px; /* Columna Nombre Cuenta */
}
#tablaBalanceDetalle th:nth-child(4),
#tablaBalanceDetalle td:nth-child(4),
#tablaBalanceDetalle th:nth-child(5),
#tablaBalanceDetalle td:nth-child(5),
#tablaBalanceDetalle th:nth-child(6),
#tablaBalanceDetalle td:nth-child(6),
#tablaBalanceDetalle th:nth-child(7),
#tablaBalanceDetalle td:nth-child(7),
#tablaBalanceDetalle th:nth-child(8),
#tablaBalanceDetalle td:nth-child(8),
#tablaBalanceDetalle th:nth-child(9),
#tablaBalanceDetalle td:nth-child(9) {
    min-width: 100px; /* Columnas numéricas */
}

/* Estilo opcional para el spinner */
#loadingSpinner {
    position: relative;
    z-index: 1000; /* Asegura que esté encima de otros elementos */
}
#loadingSpinner .spinner-border {
    width: 3rem;
    height: 3rem;
}
#loadingSpinner p {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
}