.btn-custom {
            background-color: var(--btn-color);
            color: white;
            border: none;
        }

        .btn-custom:hover {
            background-color: var(--btn-hover-color);
            color: white;
        }

        body {
        background-color: var(--background-color);
        color: var(--text-color) !important;
        font-family: 'Source Sans 3', sans-serif !important;
        font-size: 14px !important;
        padding-top: 0px;
        }

        .navbar {
        background-color: var(--secondary-color);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 10px 20px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        }
        .navbar-brand {
        font-weight: bold;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: left; /* Alineado a la izquierda */
        flex-grow: 0; /* Evita que el logo se expanda innecesariamente */
        margin-right: 10px; /* Da espacio entre el logo y el siguiente elemento */
        }

        .navbar-brand img {
        height: 100px !important; /* Ajusta el tamaño del logo en pantallas normales */
        width: auto; /* Mantén la proporción del logo */
        }


        .filtro-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin-top: 10px;
        }

        .filtro-container form {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        flex-grow: 1; /* Permite que este contenedor ocupe el espacio disponible */
        margin-left: 20px;
        }

        .navbar-nav .nav-link {
        color: var(--text-color);
        font-weight: 500;
        }

        .navbar-nav .dropdown-menu {
        transition: opacity 0.3s ease-in-out;
        }

        .card {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        margin: 20px auto;
        padding: 20px;
        background: #fff;
        }

        .container {
        margin-top: 140px;
        }
        .navbar-nav .nav-link.active {
        border: 2px solid #ff6f00 !important;
        border-radius: 5px !important;
        background-color: #ff6f00 !important;
        color: #F9F9F9 !important;
        font-weight: bold !important;
        }
        .form-group label {
            color: #27282c;
        }
        .card-title {
            color: #27282c;
        }
        .ql-editor {
            color: #000000 !important;
        }
        /* Contenedor para el datepicker */
        .date-picker-container {
            position: relative;
        }
        .ql-editor {
            color: #000000 !important;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #f0f0f0; /* Un color de fondo gris claro para la pastilla */
            color: #333333; /* Color de texto oscuro para que sea legible */
            border: 1px solid #cccccc; /* Un borde sutil para definir la pastilla */
        }

        /* Estilo para el ícono de la 'x' para que sea visible */
        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: #888888; /* Un color gris oscuro para el icono de la 'x' */
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #000000; /* Color negro al pasar el mouse por encima del ícono */
        }

        .input-con-icono {
            position: relative;
            width: 100%;
        }

        /* Oculta el ícono nativo del navegador y lo expande para que sea el área de clic */
        .input-con-icono input[type="date"]::-webkit-calendar-picker-indicator,
        .input-con-icono input[type="datetime-local"]::-webkit-calendar-picker-indicator {
            background: transparent;
            bottom: 0;
            color: transparent;
            position: absolute; /* Evita que el campo de entrada se vea afectado por el espacio del ícono */
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            cursor: pointer;
        }

        /* Agrega un ícono de calendario con un pseudo-elemento */
        .input-con-icono::after { /* Se aplica al contenedor */
            content: '\1F4C5'; /* Unicode para el emoji de calendario */
            font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'EmojiOne', sans-serif; /* Fallback para emojis */
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none; /* Asegura que no interfiera con el clic en el campo */
            color: #6c757d; /* Color del ícono */
        }
        .nav-item .nav-link.active {
        transition: all 0.3s ease-in-out !important; /* Animación suave */
        }

        .responsive-table tbody td {
            border-bottom: 1px solid #6c757d; /* Un color gris más oscuro para la línea divisoria */
            padding: 8px; /* Mantén el padding para que la línea no esté pegada al contenido */
        }

        .responsive-table thead th {  
            border-bottom: 1px solid #6c757d; /* Un color gris más oscuro para la línea divisoria */
            padding: 8px; /* Mantén el padding para que la línea no esté pegada al contenido */
        }


        @media (max-width: 768px) {
        .navbar {
            flex-direction: column;
        }

        .filtro-container {
            justify-content: center;
        }

        .card {
            margin: 10px;
        }
        .navbar-brand img {
        height: 60px !important; /* Logo más pequeño en pantallas pequeñas */
        }
        }
        
       /* Estilos Generales de la Tabla y el Contenedor Responsivo */
        .table-responsive {
            overflow-x: auto; /* Asegura el desplazamiento horizontal en pantallas más grandes si el contenido se desborda */
            width: 100%; /* Asegura que el contenedor responsivo ocupe todo el ancho */
        }

        .responsive-table {
            width: 100%; /* Asegura que la tabla misma intente ocupar todo el ancho */
            min-width: 100%; /* Evita que se encoja demasiado */
            border-collapse: collapse; /* Para bordes limpios */
        }
        

        /* Versión móvil */
        @media (max-width: 767px) {
            .responsive-table {
                /* En móvil, queremos que la tabla se comporte como un bloque,
                pero sus filas internas serán nuestras "tarjetas". */
                width: 100%;
                margin: 0; /* Elimina cualquier margen predeterminado que pueda causar problemas de espacio */
                padding: 0; /* Elimina cualquier relleno predeterminado */
            }

            .responsive-table thead {
                /* Crucial: Ocultar los encabezados de la tabla original en móvil */
                display: none;
            }

            .responsive-table tbody,
            .responsive-table tr {
                display: block; /* Hace que tbody y tr se comporten como elementos a nivel de bloque apilados */
                width: 100%; /* Deben ocupar todo el ancho de su padre */
                box-sizing: border-box; /* Incluye el relleno y el borde en el ancho total del elemento */
            }

            .responsive-table tr {
                /* Estilos para cada "tarjeta" que representa una fila/registro */
                background-color: #ffffff; /* Fondo blanco para la tarjeta */
                border: 1px solid #dee2e6; /* Borde completo alrededor de cada tarjeta */
                border-radius: 0.25rem; /* Esquinas ligeramente redondeadas para la tarjeta */
                margin-bottom: 1rem; /* Espacio entre cada tarjeta de registro */
                padding: 0.75rem 0.5rem; /* Relleno interno para el contenido de la "tarjeta"
                                        0.5rem para el relleno horizontal para controlar el espacio izquierdo/derecho */
                position: relative; /* Útil para posicionar pseudo-elementos si es necesario */
            }

            /* Eliminar el borde inferior y el margen de la última fila (tarjeta) para evitar doble borde al final de la tabla */
            .responsive-table tr:last-of-type {
                border-bottom: 1px solid #dee2e6; /* Mantener el borde completo para la última tarjeta */
                margin-bottom: 0; /* Sin margen después de la última tarjeta */
            }

            /* Opcional: Para colores de fondo alternos de las tarjetas, descomenta esto y comenta el borde sólido de arriba */
            /*
            .responsive-table tr:nth-child(odd) {
                background-color: #f8f9fa;
            }
            .responsive-table tr:nth-child(even) {
                background-color: #ffffff;
            }
            .responsive-table tr {
                border: 1px solid transparent; // Usa un borde transparente si alternas colores
                box-shadow: 0 2px 5px rgba(0,0,0,0.05); // Opcional: sombra sutil para efecto de tarjeta
            }
            */

            .responsive-table td {
                display: grid; /* Cada celda (td) usa cuadrícula para su etiqueta y valor */
                /* La etiqueta ocupa un 40% y el valor el 60% restante */
                grid-template-columns: 40% 60%;
                align-items: center; /* Centra verticalmente la etiqueta y el valor */
                gap: 0.5rem; /* Espacio entre la etiqueta y el valor */
                padding: 0.4rem 0; /* Solo relleno vertical, el relleno horizontal lo maneja el tr */
                width: 100%; /* La celda ocupa todo el ancho dentro de la fila de la cuadrícula */
                box-sizing: border-box;
                /* Añade un borde punteado para separar los campos dentro de la "tarjeta" */
                border-bottom: 1px dashed #e9ecef;
            }

            /* Elimina el borde inferior punteado del último td de cada fila */
            .responsive-table td:last-child {
                border-bottom: none;
            }

            /* Estilo para el data-label (el texto que viene del atributo data-label) */
            .responsive-table td::before {
                content: attr(data-label); /* Muestra el texto del atributo data-label */
                font-weight: 600; /* Negrita para la etiqueta */
                color: #495057; /* Color gris oscuro para la etiqueta */
                padding-right: 0.5rem; /* Espacio a la derecha de la etiqueta */
                word-break: break-word; /* Permite que las palabras largas se rompan */
                hyphens: auto;
                text-align: right; /* Alinea la etiqueta a la derecha, junto al valor */
            }

            /* Estilo general para el contenido dentro de td */
            .responsive-table td > * {
                width: 100%;
                min-width: 0; /* Permite que el contenido se encoja si es necesario */
                word-wrap: break-word; /* Envuelve palabras largas */
                overflow-wrap: anywhere; /* Permite dividir palabras en cualquier punto si es necesario */
                hyphens: auto;
                text-align: left; /* Asegura que el contenido del valor esté alineado a la izquierda */
            }

            /* Estilos específicos para la celda del checkbox */
            .checkbox-cell {
                grid-column: 1 / -1; /* Ocupa todas las columnas de la cuadrícula (área de etiqueta y valor) */
                display: flex !important; /* Fuerza flexbox para alinear el checkbox */
                justify-content: flex-end; /* Alinea el checkbox a la derecha */
                padding-top: 0.5rem !important;
                padding-bottom: 0.5rem !important;
                padding-left: 0 !important; /* Asegura que no haya un relleno izquierdo excesivo */
                padding-right: 0 !important; /* Asegura que no haya un relleno derecho excesivo */
                border-bottom: none; /* Sin borde punteado para la celda del checkbox */
            }

            /* Estilos específicos para la celda de acciones (botones) */
            /* Selecciona el td que contiene las acciones. Según tu PHP, debería ser el último td en el tr. */
            .responsive-table tr td:last-of-type {
                grid-column: 1 / -1; /* Hace que la celda de acciones abarque todas las columnas */
                display: flex; /* Usa flexbox para organizar los botones */
                justify-content: center; /* Centra los botones horizontalmente */
                align-items: center; /* Centra los botones verticalmente */
                padding: 0.75rem 0; /* Relleno vertical */
                border-top: 1px dashed #e9ecef; /* Una línea punteada sutil encima de las acciones */
                margin-top: 0.5rem; /* Espacio encima de la línea punteada */
                border-bottom: none; /* Crucial: Sin borde punteado debajo de las acciones */
            }

            /* Estilos para los botones y el grupo de botones dentro de la celda de acciones */
            .responsive-table td .btn {
                flex-shrink: 0; /* Evita que los botones se encojan */
                white-space: nowrap; /* Mantiene el texto del botón en una sola línea */
                font-size: 0.85rem; /* Tamaño de fuente ligeramente más pequeño para botones en móvil */
                padding: 0.4rem 0.6rem; /* Relleno ajustado para botones */
            }

            .responsive-table td .btn-group {
                width: 100%; /* Asegura que el grupo de botones ocupe el ancho disponible */
                display: flex;
                justify-content: center; /* Centra los botones dentro del grupo */
                gap: 0.5rem; /* Espacio entre los botones */
            }

            /* Estilo para listas desordenadas, como 'Herramientas' si es una lista */
            .responsive-table td ul {
                list-style: none; /* Elimina los puntos predeterminados */
                padding-left: 0; /* Elimina el relleno izquierdo predeterminado para ul */
                margin-bottom: 0; /* Elimina el margen inferior */
            }
            .responsive-table td ul li {
                padding-left: 1em; /* Espacio para una viñeta personalizada */
                position: relative;
            }
            .responsive-table td ul li::before {
                content: "\2022"; /* Carácter unicode para una viñeta */
                color: #6c757d; /* Color de la viñeta */
                display: inline-block;
                width: 1em; /* Ancho del área de la viñeta */
                margin-left: -1em; /* Mueve la viñeta a la izquierda del texto */
            }
        }