.custom-table {
    font-size: 12px;
}

.table-header th {
    text-align: left;
}

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

.right-align {
    text-align: right;
}

.text-center {
    text-align: center;
}

.positive {
    color: #008000;
}

.negative {
    color: #ff3d3d;
}

.table-container{
    width: 100%;
    font-size: 18px;
    margin-left: auto;
    margin-right: auto;
}

.table-container-med{
    width: 50%;
    font-size: 18px;
    margin-left: auto;
    margin-right: auto;
}

.centrado {
    margin-left: auto;
    margin-right: auto;
    width: 50%; 
}

.table-auditoria {
    margin-left: auto;
    margin-right: auto;
    width: 70%; 
    font-size: 14px;
}

.tabla-modal th{
    font-size: 11px;
    max-width: 100%;
    width: auto; 
}

.tabla-modal td{
    font-size: 14px;
    height: 30px;

}

.tabla-chica td, .tablachica th{
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 12px;
    padding-right: 12px;
    vertical-align: middle; /* Alinea mejor el contenido */
}

.input-number {

    width: 90%; 
    height: 30px;
    border-radius: 3px;
    border-width: 0cm;
}

.input-celda {
    padding: 0;
    margin: 0;
}

.tabla-modal td {
    padding: 0;
    margin: 0;
}

.status-selector {
    color: black;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    background-color: white; /* Fondo blanco por defecto */
}

/* Colores específicos para cada opción */
.option-white {
    background-color: white;
    color: black;
}

.option-red {
    background-color: red;
    color: white;
}

.option-yellow {
    background-color: yellow;
    color: black;
}

.option-green {
    background-color: green;
    color: white;
}

.status-wrapper {
    display: flex;
    align-items: center;
    gap: 5px; /* Espacio entre el select y el círculo */
}

.status-indicator {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-left: 10px;
    border: 1px solid #333;
    vertical-align: middle;
}

/* Definir los colores de los indicadores */
.status-indicator.white { background-color: white; }
.status-indicator.red { background-color: red; }
.status-indicator.yellow { background-color: yellow; }
.status-indicator.green { background-color: green; }

.input-field {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: left;
    resize: vertical; /* Permite cambiar el tamaño verticalmente */
}

#tablaAuditoriasResumen th {
    min-width: 120px; /* Ajusta según sea necesario */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden;
    text-overflow: ellipsis; /* Si el texto es muy largo, mostrará puntos suspensivos */
}

#tablaAuditoriasResumen thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1020;
}

#tablaAuditoriasResumen {
    border-collapse: collapse;
    width: 80%;
}

#tablaAuditoriasResumen tbody {
    display: block;
    max-height: 600px;
    overflow-y: auto;
    width: 100%;
}

#tablaAuditoriasResumen thead {
    display: table;
    width: 100%;
    table-layout: fixed;  /* Evita desajustes de ancho */
}

#tablaAuditoriasResumen tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;  /* Asegura que las columnas coincidan */
}

.tr-nombre {
    width: 300px;
}


/* 1) El contenedor permite el desplazamiento horizontal */
.tabla-scroll {
    overflow-x: auto;           /* genera la barra de desplazamiento */
    max-width: 100%;            
}

/* 2) La 1.ª columna queda “pegada” a la izquierda */
.tabla-scroll table td:first-child,
.tabla-scroll table th:first-child {
    position: sticky;
    left: 0;
    background: #fff;           /* mismo color que la tabla */
    z-index: 2;                 /* se superpone a las demás celdas */
}

/* 3) Encabezado encima de todo (si lo usas) */
.tabla-scroll table thead th:first-child {
    z-index: 3;                 /* un poco más alto que el cuerpo */
}


/* ───────────────── CONTENEDOR CON SCROLL VERTICAL ───────────────── */
.tabla-scroll-y {
    max-height: 700px;         /* alto deseado */
    overflow-y: auto;
}

/* ───────────────── CABECERAS STICKY ───────────────── */
/* color base de tu cabecera ─ cámbialo si usas otro tono */
:root {
--header-bg: #fff;   /* o #e9ecef si usas table-light, etc. */
}

/* 1ª FILA HEADER ─ todas las columnas */
.tabla-scroll-y thead tr:first-child th {
    position: sticky;
    top: 0;
    background: var(--header-bg);   /* ← fondo sólido */
    z-index: 3;
}

/* 2ª FILA HEADER ─ todas las columnas */
.tabla-scroll-y thead tr:nth-child(2) th {
    position: sticky;
    top: 32px;                      /* igual que antes */
    background: var(--header-bg);
    z-index: 2;
}

/* 1ª COLUMNA HEADER (fila 1 y 2) ─ pegada también horizontalmente */
.tabla-scroll-y thead tr:first-child th:first-child,
.tabla-scroll-y thead tr:nth-child(2) th:first-child {
    left: 0;
    z-index: 5;                     /* encima de todo */
}

/* 1ª COLUMNA DEL TBODY ─ si la dejas sticky en horizontal */
.tabla-scroll-y tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fff;               /* mismo fondo que celdas normales */
    z-index: 1;
}

/* (opcional) finas líneas sombreando el header */
.tabla-scroll-y thead th {
    box-shadow: inset 0 -1px 0 #d0d0d0;
}


.table-container-stiky {
    overflow-x: auto;
    width: 100%;
}

/* Evita que el texto salte de línea */
#tablaResumen th,
#tablaResumen td {
    white-space: nowrap;
}

/* Encabezado sticky vertical con color */
#tablaResumen thead th {
    position: sticky;
    top: 0;
    background-color: #cfe2f3; /* color del encabezado */
    z-index: 5; /* encima del body */
}

/* Primera columna sticky (thead y tbody, excluyendo tfoot) */
#tablaResumen th:nth-child(1):not(tfoot *),
#tablaResumen td:nth-child(1):not(tfoot *) {
    position: sticky;
    left: 0;
    background-color: white; /* fondo blanco del body */
    z-index: 10;
    width: 30px;
}

/* Segunda columna sticky (thead y tbody, excluyendo tfoot) */
#tablaResumen th:nth-child(2):not(tfoot *),
#tablaResumen td:nth-child(2):not(tfoot *) {
    position: sticky;
    left: 30px; /* igual al ancho de la primera columna */
    background-color: white; /* fondo blanco del body */
    z-index: 10;
    width: 120px;
}

/* Mantener fondo blanco en body, pero no sobreescribir clases Bootstrap */
#tablaResumen tbody td {
    background-color: white;
}

/* --------------------------------TABLA INVENTARIO VEHICULOS----------------------- */
/* Evita que el texto salte de línea */
/* #tablaInventarioVehiculos th,
#tablaInventarioVehiculos td {
    white-space: nowrap;
}

#tablaInventarioVehiculos thead th {
    position: sticky;
    top: 0;
    background-color: #004d7d;
    z-index: 5;
}

#tablaInventarioVehiculos th:nth-child(1):not(tfoot *),
#tablaInventarioVehiculos td:nth-child(1):not(tfoot *) {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 10;
    width: 25px;
}

#tablaInventarioVehiculos th:nth-child(2):not(tfoot *),
#tablaInventarioVehiculos td:nth-child(2):not(tfoot *) {
    position: sticky;
    left: 90px;
    background-color: white;
    z-index: 10;
    width: 30px;
}

#tablaInventarioVehiculos th:nth-child(3):not(tfoot *),
#tablaInventarioVehiculos td:nth-child(3):not(tfoot *) {
    position: sticky;
    left: 320px;
    background-color: white;
    z-index: 10;
    width: 30px;
} */

.checkbox-custom {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #28a745;
}