    /* Colores para los estados de asistencia */
    .vacio {
        background-color:rgb(255, 255, 255); /* Verde (Presente) */
        color: black;
        text-align: center;
    }

    .presente {
        background-color:rgb(219, 250, 219); /* Verde (Presente) */
        color: black;
        text-align: center;
    }
    
    .retraso {
        background-color:rgb(255, 235, 204); /* Naranja (Retraso) */
        color: black;
        text-align: center;
    }
    
    .ausente {
        background-color:rgb(245, 186, 181); /* Rojo (Ausente) */
        color: black;
        text-align: center;
    }

    .licencia {
        background-color:rgb(179, 226, 248); /* Rojo (Ausente) */
        color: black;
        text-align: center;
    }
    
    .desconocido {
        background-color: #9E9E9E; /* Gris (Desconocido o sin valor) */
        color: black;
        text-align: center;
    }
    
    
    
    
    /* Hacer que el contenedor de la tabla sea desplazable horizontalmente */
    /* div {
        overflow-x: auto;
    } */
    
    /* Fijar la columna "Nombre Completo" */
    .nombre-columna {
        position: sticky;
        left: 0;
        background-color:rgb(255, 255, 255); /* Fondo para la columna fija */
        z-index: 1; /* Asegura que la columna se mantenga encima */
    }
    

    
    /* para ancho col */
    /* Ajustar el ancho de la columna "Nombre Completo" al contenido */
    .nombre-col {
        width: auto; /* Ajusta el tamaño al contenido */
        white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    }
    
    /* Aplica la rotación solo a las cabeceras de las fechas */
    th.fecha {
        /* writing-mode: vertical-rl; */
        /* transform: rotate(180deg); */
        white-space: nowrap;
        text-align: center; /* Alineación centrada */
        padding: 2px 2px;
        height: max-content !important;;
        position: relative; /* Asegura que los elementos internos se posicionen correctamente */
        overflow: visible; /* Permite que los elementos internos se expandan más allá del th */
    }
    
    th.fecha .btn-group {
        position: absolute; /* Permite que el dropdown se muestre correctamente */
        bottom: 5px; /* Ajusta la posición del botón */
        left: 50%; /* Centra el botón horizontalmente */
        transform: translateX(-50%);
    }

    
    /* aqui abajo estilo para nombre completo fija */
    /* Estilo para las columnas */
    table {
        width: 100%;
        border-collapse: collapse;
    }
    
    /* Ajustar la altura de las filas */
    table th {
        border: 1px dashed white; /* Bordes internos segmentados */
        padding: 2px 2px; /* Reduce el padding */
        line-height: 25px; /* Controla la altura del texto */
        text-align: left; /* Alineación del texto */
    }
    
    table td {
        border: 1px dashed hsl(177, 76.60%, 51.40%); /* Bordes internos segmentados */
        padding: 2px 2px; /* Reduce el padding */
        line-height: 25px; /* Controla la altura del texto */
        text-align: left; /* Alineación del texto */
    }
    
    
    
    /* Eliminar borde exterior de la tabla */
    table {
        border: none;
    }
    
    /* para los botones de asistencia */
    .asistencia-btn {
            height: 23px; /* Ajusta la altura según lo necesites */
            font-size: 12px; /* Opcional: Ajusta el tamaño del texto */
            padding: 2px 5px; /* Reduce el relleno interno */
        }

    .asistencia1-btn {
        height: 23px; /* Ajusta la altura según lo necesites */
        font-size: 12px; /* Opcional: Ajusta el tamaño del texto */
        padding: 2px 5px; /* Reduce el relleno interno */
    }

        .notificar-btn {
            background-color: #25D366; /* Color verde de WhatsApp */
            color: white; /* Texto en color blanco */
            border: none; /* Sin bordes */
            height: 25px; /* Ajusta la altura */
            font-size: 12px; /* Tamaño del texto */
            padding: 2px 8px; /* Ajusta el relleno interno */
            border-radius: 5px; /* Bordes redondeados */
            display: flex; /* Flexbox para alinear icono y texto */
            align-items: center; /* Centrar verticalmente */
            justify-content: center; /* Centrar horizontalmente */
            gap: 5px; /* Espacio entre el icono y el texto */
            font-weight: bold; /* Texto en negrita */
            cursor: pointer; /* Cursor tipo puntero */
            transition: background-color 0.3s ease;
        }
        
        .notificar-btn svg {
            width: 14px; /* Ajusta el tamaño del icono */
            height: 14px;
            vertical-align: middle; /* Asegura que no desajuste el texto */
        }
        
        .notificar-btn:hover {
            background-color: #1EBE5F; /* Un tono más oscuro al pasar el mouse */
        }
    
        #hora, #fecha {
        height: 30px;  /* Reducir la altura */
        font-size: 14px;  /* Ajustar el tamaño del texto */
        padding: 2px 5px;  /* Ajustar el relleno interno */
        border: 1px solid #ccc;  /* Agregar un borde sutil */
        border-radius: 5px;  /* Esquinas redondeadas */
        width: 130px;  /* Ajustar el ancho */
    }


    .dropdown-menu {
        min-width: auto !important; /* Evita que el dropdown tenga un ancho mínimo forzado */
        width: max-content !important; /* Hace que el ancho sea solo lo necesario para el contenido */
        padding: 0.2rem !important; /* Reduce el padding interno */
    }
    .dropdown-item {
        white-space: nowrap; /* Evita que el texto se divida en varias líneas */
        padding: 0.2rem 0.5rem !important; /* Ajusta el espacio interno para hacerlo más compacto */
        font-size: 0.85rem; /* Reduce el tamaño del texto si es necesario */
    }

    @media (max-width: 576px) { 
        #fecha {
            width: 100px; 
            font-size: 12px; 
        }
        #hora {
            width: 80px; 
            font-size: 12px; 
        }
    }
    