:root{
    --color-fondo-pagina: #ffffff;
    --color-fondo-card: #caccd1;
    --color-fondo-titulo-card: #474849;
    --color-texto-titulo-card: #ffffff;
    --color-barra-horizontal: #38475f;
    --color-barra-vertical: #e0e0e0;
    --color-barra-pestanas: #7c7575;
}

/*
 * Contenedor principal para el layout con flexbox.
*/
.report-container-enhanced {
    display: flex;
    flex-direction: column;
    /* Ocupa el espacio vertical disponible (ej. 80% del alto de la ventana menos 50px para el título) */
    height: calc(90vh - 50px);
}

/*
* contenedor principal para el layout que se encuentra dentro de un tab
*/
.report-container-enhanced-in-tab {
    display: flex;
    flex-direction: column;
    /* Ocupa el espacio vertical disponible (ej. 80% del alto de la ventana menos 50px para el título) */
    height: calc(67vh - 40px);
}

/*
* contenedor principal para el layout que se encuentra en un tab dentro de otro
*/
.report-container-enhanced-in-tab-in {
    display: flex;
    flex-direction: column;
    /* Ocupa el espacio vertical disponible (ej. 80% del alto de la ventana menos 50px para el título) */
    height: calc(53vh - 40px);
}

/*
 * Contenedor que permite el scroll y ocupa todo el espacio vertical.
*/
.report-table-container {
    flex-grow: 1;
    overflow: auto; /* Habilita ambos scrolls */
    /*border: 1px solid #dee2e6;*/
    scrollbar-gutter: stable; /* le dice al navegador que reserve espacio para la barra vertical eviando la superposición con el contenido*/
    padding-right: 10px; /* este padding ayuda a empujar el contenido del reporte alejandolo del borde*/
    
    width: 100%;
}

/*
 * Clase principal para la tabla compacta.
*/
.table-report-compact {
    font-size: 0.71rem;   /* FUENTE MÁS PEQUEÑA */
    text-align: right;    /* ALINEA TODO A LA DERECHA (ideal para números) */
    margin-bottom: 0;
    border-collapse: collapse; /* Bordes más compactos */
    margin-bottom: 1rem;
    font-family: Arial, Helvetica, sans-serif;
}

/*
 * Estilos para el encabezado (thead).
*/
.table-report-compact thead th {
    background-color:#525252;  /* ENCABEZADO MÁS OSCURO */
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: normal;      /* PERMITE que los títulos se partan en varias líneas */
    text-align: center;       /* Centra los títulos de las columnas */
    vertical-align: middle;
}

/*
 * Estilos para TODAS las celdas, haciéndolas más angostas.
*/
.table-report-compact th,
.table-report-compact td {
    padding: 0.1rem 0.1rem; /* PADDING MÁS ESTRECHO */
    vertical-align: middle;
    border: 1px solid #e9ecef;
}

/*
 * Estilos para las celdas de datos del cuerpo de la tabla.
*/
.table-report-compact tbody td {
    white-space: nowrap; /* Mantiene los datos en una sola línea para no partir los números. */
}

/*
 * Nueva clase para resaltar los números negativos en rojo.
*/
.table-report-compact .text-negative {
    color: #dc3545;       /* ROJO PARA NEGATIVOS */
}

.table-report-compact .text-total{
    font-weight: bold;
}

caption{
    text-align: center;
}

/*
 * estilos para los browsers de barra lateral
*/
.browser-table-lateral {
    font-size: 0.66rem;   /* FUENTE MÁS PEQUEÑA */
    margin-bottom: 0;
    border-collapse: collapse; /* Bordes más compactos */
    margin-bottom: 1rem;
    font-family: Arial, Helvetica, sans-serif;
}
/*Estilos para el encabezado (thead).*/
.browser-table-lateral thead th {
    background-color:#525252;  /* ENCABEZADO MÁS OSCURO */
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: normal;      /* PERMITE que los títulos se partan en varias líneas */
    text-align: center;       /* Centra los títulos de las columnas */
    vertical-align: middle;
}
/* Estilos para TODAS las celdas, haciéndolas más angostas.*/
.browser-table-lateral th,
.browser-table-lateral td {
    padding: 0.1rem 0.1rem; /* PADDING MÁS ESTRECHO */
    vertical-align: middle;
    /*border: 1px solid #e9ecef;*/
}
/* Estilos para las celdas de datos del cuerpo de la tabla.*/
.browser-table-lateral tbody td {
    white-space: nowrap; /* Mantiene los datos en una sola línea para no partir los números. */
}

/*
* contenedor principal para el layout que se encuentra en la barra lateral
*/
.report-container-enhanced-aside {
    display: flex;
    flex-direction: column;
    /* Ocupa el espacio vertical disponible (ej. 80% del alto de la ventana menos 50px para el título) */
    height: calc(68vh - 50px);
}

/* seleccion de tr de tablas */
tr.highlighted td{
    color: white !important;
    background-color: #b9d6f2 !important;
}

/*
* estilos para el contenedor de pestañas
* usamos flexbox para evitar que las pestañas se envvuelvan a una nueva línea
* si no hay suficiente espacio horizontal
*/
#tabContainer{
    flex-wrap: nowrap;
    overflow-x: auto; /* permite scroll horizontal si hay demasiada pestañas */
}

/*
 * Estilos para el enlace (<a>) dentro de cada pestaña (<li>).
*/
#tabContainer .nav-link {
    /* Establecemos un ancho máximo para la pestaña. */
    max-width: 280px !important;
    /* Evitamos que el texto se divida en varias líneas. */
    white-space: nowrap;
    /* Ocultamos el texto que se desborda. */
    overflow: hidden;
    /* Añadimos puntos suspensivos (...) al final del texto cortado. */
    text-overflow: ellipsis;
    /* Usamos flexbox para alinear el título y el botón de cerrar. */
    display: flex;
    align-items: center;
    /* Colocamos el título a la izquierda y el botón a la derecha */
    justify-content: space-between;
}

/*
 * Estilos para el título dentro del enlace.
 * Le damos un poco de espacio para que no se pegue al botón de cerrar.
*/
#tabContainer .nav-link .tab-title {
    padding-right: 8px; /* Espacio entre el título y el botón de cerrar */
    /* Estas propiedades aseguran que el título también se corte si es necesario */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Estilos para el botón de cerrar.
 * 'flex-shrink: 0' evita que el botón se encoja o desaparezca.
*/
#tabContainer .nav-link .cerrar-tab {
    flex-shrink: 0;
}

/*
 * estilos para los browsers generales
*/
.browser-table {
    font-size: 0.71rem;   /* FUENTE MÁS PEQUEÑA */
    margin-bottom: 0;
    border-collapse: collapse; /* Bordes más compactos */
    margin-bottom: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    table-layout: auto;
}

/*Estilos para el encabezado (thead).*/
.browser-table thead th {
    /*background-color:#696767;
    color: white;*/
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;      /* PERMITE que los títulos se partan en varias líneas */
    text-align: center;       /* Centra los títulos de las columnas */
    vertical-align: middle;
    font-weight: normal;
}
/* Estilos para TODAS las celdas, haciéndolas más angostas.*/
.browser-table th,
.browser-table td {
    white-space: nowrap;
}
/* Estilos para las celdas de datos del cuerpo de la tabla.*/
.browser-table tbody td {
    white-space: nowrap; /* Mantiene los datos en una sola línea para no partir los números. */
    color: #333 !important;
}

/* estilos para los botones de acción en las tablas */
.btn-icon-xs{
    padding: 0.2rem 0.3rem;
    font-size: 0.85rem !important;
    line-height: 1.0;
}

.btn-sm, .page-link {
    font-size: 0.7rem !important;
}

.modal-header{
    color:white;
    background-color:var(--color-barra-horizontal);
    padding: 5px !important;
}

.modal-header h6{
    font-size: small;
}

.modal-header .btn-close{
    color: white;
}

/*
 * --- INICIO DE LA SOLUCIÓN ---
 * Regla específica para las columnas que SÍ deben partir el texto.
 * Al ser más específica, esta regla anula el 'white-space: nowrap' anterior.
*/
.browser-table .col-wrap-text {
    white-space: normal;      /* Permite que el texto se divida en varias líneas */
    overflow-wrap: break-word;/* Ayuda a partir palabras largas si es necesario */
    text-overflow: clip;      /* Quita los '...' para el texto que se parte */
    text-align: left;
    min-width: 30%;
}

/* Para columnas que NO deben partirse (ej. Serie, Modelo, Id) */
.browser-table .col-no-wrap {
    white-space: nowrap;
}

/* Para columnas anchas que SÍ pueden partirse (ej. Descripción) */
.browser-table .col-descripcion {
    min-width: 300px; /* Ancho mínimo generoso. ¡Ajusta este valor a tu gusto! */
    white-space: normal;
    word-break: break-word;
}

/* Para otras columnas que también pueden necesitar más espacio */
.browser-table .col-marca-propietario {
    min-width: 100px;
    white-space: normal;
    word-break: break-word;
}