/*
 * Archivo: tabla-dinamica.css
 * Descripción: Estilos para la librería de tablas HTML dinámicas con Bootstrap.
 * Incluye estilos para búsqueda rápida y responsividad.
 * Autor: Mario Ernesto Basurto Medrano (adaptado y factorizado)
 * Versión: 1.3.0
 */


/* Estilos generales del cuerpo y contenedor */


/* Estilos específicos de la tabla */

.dynamic-table {
    width: 100%;
    /* La tabla ocupa todo el ancho disponible de su contenedor */
    margin-bottom: 1rem;
    border-spacing: 0 !important;
    border-collapse: collapse;
    /* Elimina el espacio entre bordes de celda */
}

.dynamic-table th,
.dynamic-table td {
    padding: 0.75rem;
    /* Espaciado interno de las celdas */
    vertical-align: top;
    /* Alineación vertical superior para el contenido de la celda */
    border-top: 1px solid #dee2e6;
    /* Borde superior para las celdas */
    text-align: left;
    /* Alineación de texto por defecto */
}

.dynamic-table thead th {
    vertical-align: bottom;
    /* Alineación inferior para las cabeceras */
    border-bottom: 2px solid #dee2e6;
    /* Borde inferior más grueso para el thead */
    background-color: #e9ecef;
    /* Fondo ligeramente gris para las cabeceras */
}

.dynamic-table thead {
    background-color: var(--institutional-color) !important;
}

.table-title-row th {
    font-size: 1.25rem;
    font-weight: bold;
    background-color: var(--institutional-color) !important;
    /* Color primario de Bootstrap para el título */
    color: white;
    /* Texto blanco en el título */
    border-bottom: none;
    padding: 1rem;
}

.action-toggle-cell {
    width: 50px;
    /* Ancho fijo para la columna de acciones */
    text-align: center;
    /* Centrar el icono de acción */
}


/* Estilos para el botón de dropdown de acciones */

.dropdown-toggle-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: #6c757d;
    /* Color gris para el icono */
}

.dropdown-toggle-icon:hover {
    color: var(--institutional-color) !important;
    /* Cambiar a color primario al pasar el ratón */
}


/* Estilos para el icono de colapsar/expandir fila */

.collapse-icon-only {
    cursor: pointer;
    font-size: 1.2rem;
    color: #6c757d;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    /* Animación de rotación */
}

.collapse-icon-only.expanded {
    transform: rotate(90deg);
    /* Rota el icono cuando la fila está expandida */
}

.action-detail-row {
    background-color: #f2f2f2;
    /* Fondo para la fila de detalles de acción */
}

.action-detail-cell {
    padding: 10px;
    text-align: center;
}

.action-button {
    margin: 5px;
    min-width: 80px;
}

.action-button:hover {
    background-color: transparent !important;
    color: var(--institutional-color) !important;
    text-decoration: underline;
}

.hidden-column {
    display: none !important;
    /* Oculta las columnas cuando se deseleccionan */
}


/* Estilos para los controles superiores (búsqueda, paginación, columnas) */

.pagination-top-controls {
    display: flex;
    justify-content: space-between;
    /* Espacio entre el dropdown de columnas y los controles de paginación */
    align-items: center;
    /* Alineación vertical central */
    margin-bottom: 15px;
    /* Margen inferior para separar de la tabla */
    flex-wrap: wrap;
    /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

.records-per-page-wrapper {
    display: flex;
    align-items: center;
}

.records-per-page-select {
    width: auto;
    /* Ancho automático para el selector de registros por página */
}

.pagination-controls {
    display: flex;
    align-items: center;
}

.page-info {
    white-space: nowrap;
    /* Evita que el texto de la página se rompa en varias líneas */
}

.column-toggle-dropdown .dropdown-menu {
    min-width: 320px;
    /* Ancho mínimo para el menú de alternancia de columnas */
    padding: 1rem;
    /* Padding dentro del menú */
}


/* ESTILOS ESPECÍFICOS PARA EL CAMPO DE BÚSQUEDA RÁPIDA */

.quick-search-input.form-control {
    /* Aplicar estilos solo si es un form-control */
    border-radius: .5rem !important;
    /* Bordes más redondeados (completamente redondeado por `rounded-pill` en HTML) */
    border-color: #ced4da;
    /* Color de borde predeterminado */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    /* Sombra ligera */
    transition: all 0.2s ease-in-out;
    /* Transición suave */
    padding-left: 1rem;
    /* Asegurar padding izquierdo */
    /* Icono de lupa como fondo, se ha eliminado para dejar el campo limpio */
    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.447 3.448a1 1 0 0 0 1.414-1.414l-3.448-3.447ZM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    */
}

.quick-search-input.form-control:focus {
    border-color: #80bdff;
    /* Borde azul al enfocar */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    /* Sombra de enfoque */
    outline: 0;
}


/* No necesitamos reglas específicas para `input-group .quick-search-input:first-child` ni `input-group-text`
   ya que el input ya es rounded-pill y no tiene un addon. */


/* FIN ESTILOS BÚSQUEDA RÁPIDA */


/* Media queries para responsividad en dispositivos pequeños */

@media (max-width: 767.98px) {
    .pagination-top-controls {
        flex-direction: column;
        /* Apila los elementos en pantallas pequeñas */
        align-items: flex-start;
    }
    .records-per-page-wrapper,
    .pagination-controls,
    .column-toggle-dropdown,
    .input-group {
        margin-bottom: 10px;
        /* Espacio entre elementos apilados */
        width: 100%;
        /* Ocupa todo el ancho */
        justify-content: center;
        /* Centra los elementos */
    }
    .records-per-page-wrapper label {
        margin-right: 5px !important;
    }
    .pagination-controls .btn {
        flex-grow: 1;
        /* Hace que los botones de paginación se expandan */
    }
    /* Ajustes para los bordes redondeados del input-group en móvil */
    .input-group .form-control {
        border-radius: .5rem !important;
        /* Asegura bordes redondeados completos */
    }
    .input-group {
        /* Asegura el margen inferior en móvil */
        margin-bottom: 10px !important;
    }
}


/** tbody max-height */

.request-table {
    max-height: 65vh !important;
    overflow: auto;
}

table.scroll tbody.wrapper {
    max-height: 400px !important;
    overflow-y: scroll !important;
}

.dynamic-table .nowrap-cell {
    white-space: nowrap !important;
}