/* Definición de Variables CSS (copiadas de chat_styles_v2.css para uso en modales) */
:root {
    --sidebar-bg: #f8f9fa;
    /* Light gray (Bootstrap bg-light) */
    --chat-area-bg: #ffffff;
    /* White background */
    --message-sent-bg: #d1eaff;
    /* Light blue (from image) */
    --message-received-bg: #d4edda;
    /* Light green for received messages */
    --text-primary: #212529;
    /* Bootstrap default text */
    --text-secondary: #6c757d;
    /* Bootstrap secondary text */
    --border-color: #dee2e6;
    /* Bootstrap border color */
    --input-bg: #ffffff;
    /* White background for input */
    --button-primary-bg: #0d6efd;
    /* Bootstrap primary blue */
    --button-primary-text: #ffffff;
    /* Añadir otras variables si son necesarias */
    --header-height: 4rem;
    /* Aumentar altura del header */
    /* Añadir otras variables si son necesarias */
}

/* Estilos personalizados existentes (si los hay) */

/* Loading Overlay Styles */
#loading-overlay {
    display: flex;
    /* Use flexbox for centering */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    z-index: 1050;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Animación para desvanecer alertas marcadas como leídas */
.message-item.alert-fading-out {
    opacity: 0;
    transition: opacity 0.5s ease-out, max-height 0.5s ease-out, padding 0.5s ease-out, margin 0.5s ease-out;
    /* Transición suave para opacidad y altura/espaciado */
    max-height: 0;
    /* Animar la altura a 0 */
    padding-top: 0 !important;
    /* Forzar padding a 0 */
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    /* Forzar margen a 0 */
    margin-bottom: 0 !important;
    overflow: hidden;
    /* Ocultar contenido mientras se encoge */
    border: none;
    /* Opcional: quitar bordes durante la animación */
}

/* Asegurarse de que el item tenga una altura inicial para que la transición de max-height funcione */
.message-item {
    /* Puede que necesites ajustar esto basado en tu contenido, pero a menudo no es necesario si los elementos internos definen la altura */
    /* max-height: 100px; */
    /* Ejemplo de altura máxima inicial si fuera necesario */
    transition: max-height 0.5s ease-out;
    /* Añadir transición también al estado normal */
}

/* --- Estilos para Modales de Chat (Tema Claro Adaptado) --- */

.chat-modals-container {
    position: fixed;
    bottom: 0;
    right: 20px;
    /* Espacio desde el borde derecho */
    z-index: 1060;
    /* Encima de modales estándar (Bootstrap ~1055) */
    display: flex;
    flex-direction: row-reverse;
    /* Los nuevos modales aparecen a la izquierda de los existentes */
    align-items: flex-end;
    /* Alinea los modales en la parte inferior */
    gap: 15px;
    /* Espacio entre modales */
    pointer-events: none;
    /* Permite hacer clic a través del contenedor si está vacío */
}

.chat-modal {
    width: 320px;
    /* Ancho similar al de la imagen */
    max-height: 450px;
    /* Altura máxima */
    background-color: var(--chat-area-bg);
    /* Restaurar variable Fondo blanco */
    color: var(--text-primary);
    /* Texto oscuro */
    border: 1px solid var(--border-color);
    /* Borde claro */
    border-bottom: none;
    /* Sin borde inferior ya que está pegado abajo */
    border-radius: 0.375rem 0.375rem 0 0;
    /* Bordes redondeados solo arriba */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    /* Sombra más pronunciada */
    /* Manteniendo la sombra ya aumentada */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Para contener bordes redondeados y scroll */
    pointer-events: auto;
    /* Habilita interacción con el modal */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    /* Animación suave */
    opacity: 1 !important;
    /* Forzar opacidad */
    transform: translateY(0);
}

/* Estado oculto inicial para animación */
.chat-modal.hidden {
    opacity: 0;
    transform: translateY(100%);
}


.chat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--sidebar-bg);
    /* Fondo gris claro */
    border-bottom: 1px solid var(--border-color);
    /* Borde claro */
    cursor: pointer;
    /* Para indicar que se puede interactuar (minimizar/maximizar) */
}

.chat-modal-header .user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    /* Evita que el nombre largo se desborde */
}

.chat-modal-header .user-info img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-modal-header .user-info .user-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    /* Texto oscuro */
}

.chat-modal-header .header-actions button {
    background: none;
    border: none;
    padding: 0.25rem;
    font-size: 1.1rem;
    color: var(--text-secondary);
    /* Color icono gris */
    line-height: 1;
    /* Ajuste para alinear mejor los iconos */
    flex: 0 0 auto;
    /* Evitar que el botón se estire o encoja */
    cursor: pointer;
    /* Indicar que es clickeable */
    position: relative !important; /* Override global absolute positioning */
    top: auto !important;
    right: auto !important;
}

/* Contenedor de acciones también flex para controlar botones y evitar que se estire */
.chat-modal-header .header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    /* Espacio entre botones si hubiera más visibles */
    flex: 0 0 auto;
    /* Evitar que el contenedor de acciones se estire */
}

.chat-modal-header .header-actions button:hover {
    color: var(--text-primary);
    /* Color icono más oscuro al pasar el ratón */
}


.chat-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--chat-area-bg);
    /* Restaurar variable Fondo blanco del cuerpo */
    color: var(--text-primary);
    /* Texto oscuro */
}

/* --- Estilos para Separador de Fecha en Modal --- */
.chat-modal-body .message-date-separator {
    text-align: center;
    margin: 15px 0 10px;
    /* Ajustar espaciado */
    font-size: 0.75em;
    color: var(--text-secondary);
    /* Texto gris */
    text-transform: capitalize;
    position: relative;
    display: flex;
    align-items: center;
}

.chat-modal-body .message-date-separator::before,
.chat-modal-body .message-date-separator::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: var(--border-color);
    /* Línea gris clara */
    margin: 0 10px;
}

/* --- Fin Estilos Separador de Fecha --- */


/* Placeholder text color */
.chat-modal-body .text-muted {
    color: var(--text-secondary) !important;
    /* Color secundario */
}


/* Estilo de mensaje */
.chat-message {
    margin-bottom: 0.75rem;
    /* Espacio normal entre mensajes o grupos */
    display: flex;
}

.chat-message.sent {
    justify-content: flex-end;
}

.chat-message.received {
    justify-content: flex-start;
}

.chat-message .message-bubble {
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    max-width: 100%;
    word-wrap: break-word;
    /* La hora ya está dentro de la burbuja y alineada a la derecha por JS/estilo inline */
}

/* --- Estilos para Mensajes Agrupados en Modal --- */
.chat-modal-body .chat-message-grouped {
    margin-top: 2px !important;
    /* Reducir drásticamente el margen superior */
    margin-bottom: 2px !important;
    /* También reducir el inferior para juntarlos más */
}

/* --- Fin Estilos Mensajes Agrupados --- */

/* Colores de Burbuja como en la interfaz principal */
.chat-message.sent .message-bubble {
    background-color: var(--message-sent-bg);
    /* Azul claro */
    color: var(--text-primary);
    /* Texto oscuro */
    border-bottom-right-radius: 0.25rem;
    /* Estilo burbuja */
}

.chat-message.received .message-bubble {
    background-color: var(--message-received-bg);
    /* Verde claro */
    color: var(--text-primary);
    /* Texto oscuro */
    border-bottom-left-radius: 0.25rem;
    /* Estilo burbuja */
}


.chat-modal-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    /* Borde claro */
    background-color: var(--sidebar-bg);
    /* Fondo gris claro */
}

.chat-modal-footer textarea {
    width: 100%;
    background-color: var(--input-bg);
    /* Fondo blanco para textarea */
    color: var(--text-primary);
    /* Texto oscuro */
    border: 1px solid var(--border-color);
    /* Borde claro */
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    resize: none;
    /* Evitar que el usuario redimensione */
    min-height: 40px;
    /* Altura mínima */
    max-height: 100px;
    /* Altura máxima antes de scroll */
    overflow-y: auto;
    /* Scroll si el texto es muy largo */
    line-height: 1.5;
}

.chat-modal-footer textarea::placeholder {
    color: var(--text-secondary);
    /* Color gris para placeholder */
    opacity: 1;
    /* Asegurar visibilidad */
}

.chat-modal-footer .footer-actions {
    display: flex;
    justify-content: space-between;
    /* Mantiene espacio entre iconos y botón */
    align-items: center;
    /* Alinea verticalmente */
    margin-top: 0.5rem;
}

.chat-modal-footer .footer-actions .action-icons {
    display: flex;
    /* Hace que los iconos se pongan en línea */
    gap: 0.5rem;
    /* Espacio entre iconos */
}

.chat-modal-footer .footer-actions .action-icons button {
    background: none;
    border: none;
    color: var(--text-secondary);
    /* Iconos grises */
    font-size: 1.2rem;
    padding: 0.25rem;
    line-height: 1;
    /* Mejor alineación vertical */
}

.chat-modal-footer .footer-actions .action-icons button:hover {
    color: var(--text-primary);
    /* Iconos más oscuros al pasar el ratón */
}

.chat-modal-footer .footer-actions .send-button {
    /* Usar estilo primario de Bootstrap */
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    /* Añadir padding y border-radius si no los hereda de .btn */
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid var(--button-primary-bg);
}

.chat-modal-footer .footer-actions .send-button:hover {
    opacity: 0.9;
}


/* Estilos para el estado minimizado (como en la imagen) */
.chat-modal.minimized {
    max-height: none;
    /* Anular max-height para que la altura se ajuste solo a la cabecera */
    overflow: hidden;
    /* Mantener por si acaso */
    border-bottom: 1px solid var(--border-color);
    /* Añadir borde inferior claro cuando está minimizado */
    /* Eliminamos width: auto y min-width para heredar el ancho de .chat-modal (320px) */
}

.chat-modal.minimized .chat-modal-body,
.chat-modal.minimized .chat-modal-footer {
    display: none !important;
    /* Ocultar cuerpo y pie (Forzar con !important) */
}

/* Ocultar el botón de cerrar por defecto */
.chat-modal-header .close-btn {
    display: none;
}

/* Mostrar el botón de cerrar SOLO cuando la modal está minimizada */
.chat-modal.minimized .chat-modal-header .close-btn {
    display: inline-block;
    /* O 'block' según el flujo deseado */
}

/* Ocultar el botón de minimizar cuando la modal está minimizada */
.chat-modal.minimized .minimize-btn {
    display: none;
}

/* Rule removed to avoid clashing with global close-btn styles */
/* .close-btn { width: 10%; } */

/* --- Fin Estilos Modales de Chat (Tema Claro Adaptado) --- */

/* Estilos para Avatares con Iniciales */
.avatar-initials {
    display: inline-flex;
    /* Usar flex para centrar contenido fácilmente */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Para hacerlo circular */
    background-color: #007bff;
    /* Color de fondo (azul primario de Bootstrap por defecto) */
    color: white;
    /* Color del texto (iniciales) */
    font-weight: bold;
    font-size: 1em;
    /* Tamaño de fuente para las iniciales */
    text-transform: uppercase;
    /* Asegurar que las iniciales sean mayúsculas */
    overflow: hidden;
    /* Por si el contenido se desborda */
    vertical-align: middle;
    /* Alinear verticalmente con el texto circundante si es necesario */
    margin: 0 auto;
    /* Ensure centering within cell */
}

.avatar-initials::before {
    content: attr(data-initials);
}

/* Estilos para el desplegable del avatar del usuario */
ul[aria-labelledby="dropdownUser1"] {
    padding: 0.5rem;
    /* Añadir padding al desplegable */
}

ul[aria-labelledby="dropdownUser1"] .dropdown-item {
    border-radius: 0.25rem;
    /* Añadir border-radius a las opciones */
    margin-bottom: 2px;
    /* Pequeño margen entre items si se desea */
}

ul[aria-labelledby="dropdownUser1"] .dropdown-item:last-child {
    margin-bottom: 0;
    /* Sin margen para el último item */
}


/* Estilos para el hover del desplegable del avatar del usuario */
ul[aria-labelledby="dropdownUser1"] .dropdown-item:hover,
.header .dropdown-menu .dropdown-item:hover {
    /* Mantengo el general por si acaso */
    background-color: rgba(40, 167, 69, 0.4) !important;
    color: black !important;
}

/* Estilo específico para el hover de "Cerrar sesión" */
ul[aria-labelledby="dropdownUser1"]>li:last-child>a.dropdown-item:hover {
    background-color: red !important;
    color: white !important;
    /* Para asegurar legibilidad sobre fondo rojo */
}

/* Estilo para resaltar la columna de la fecha actual */
.today-column {
    background-color: rgba(40, 167, 69, 0.4) !important;
    /* Verde oscuro para el día actual */
    font-weight: bold;
    /* Opcional: hacer el texto en negrita */
}

/* Estilos para los items del desplegable de alertas */
.alert-dropdown .dropdown-item {
    border-bottom: 1px solid var(--border-color);
    /* Borde inferior */
    padding: 10px 15px;
    /* Espaciado interno */
    display: flex;
    /* Usar flexbox para alinear contenido */
    align-items: center;
    /* Alinear verticalmente */
    gap: 10px;
    /* Espacio entre icono y texto */
}

.alert-dropdown .dropdown-item:last-child {
    border-bottom: none;
    /* Eliminar borde inferior del último item */
}

.alert-dropdown .dropdown-item i {
    font-size: 1.2em;
    /* Tamaño del icono */
    color: var(--text-secondary);
    /* Color del icono */
}

.alert-dropdown .dropdown-item .alert-content {
    flex-grow: 1;
    /* Permitir que el contenido de la alerta ocupe el espacio restante */
}

.alert-dropdown .dropdown-item .alert-time {
    font-size: 0.8em;
    /* Tamaño de fuente para la marca de tiempo */
    color: var(--text-secondary);
    /* Color de la marca de tiempo */
    white-space: nowrap;
    /* Evitar que la marca de tiempo se divida */
    margin-left: auto;
    /* Empujar la marca de tiempo a la derecha */
}

/* Custom orange text color */
.text-orange {
    color: #FFA500 !important;
    /* Naranja */
}

/* Estilos para la modal de perfil de usuario */
.user-profile-gradient {
    background: linear-gradient(to bottom, rgba(40, 167, 69, 0.4), #ffffff);
    /* Degradado de verde claro a oscuro */
    color: #6c757d;
}

.user-profile-details {
    background-color: rgba(40, 167, 69, 0.4);
    /* Gris oscuro */
    color: #6c757d;
}

.user-profile-info-value {
    font-weight: normal;
    /* Para que los valores no sean tan bold */
}

/* Ajuste para alinear el icono del Dashboard */
/* Ajuste para alinear el icono del Dashboard */
.dashboard-link {
    padding-left: 1.5rem !important;
    /* Reducir el padding izquierdo del enlace del dashboard */
}

.dashboard-link .nav_icon {
    margin-left: -5px !important;
    /* Ajuste fino para mover el icono más a la izquierda */
    padding-left: 0 !important;
    /* Asegurar que no haya padding extra en el icono */
}

/* Estilos para la tabla de informes de trabajo diario */
#reportTable {
    table-layout: fixed;
    width: 100%;
}

#reportTable .employee-name {
    width: 350px;
    /* Ancho fijo para la columna de empleado */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#reportTable .data-cell {
    width: 9%;
    /* Ancho fijo para las celdas de datos */
}

.uniweb-brand {
    color: #28a745;
    /* Verde corporativo */
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.admin-brand {
    color: #ffffff;
    /* Blanco */
    font-weight: 300;
    /* Fuente más fina */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Custom scrollbar for table container */
.custom-scroll::-webkit-scrollbar {
    height: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Estilos para el campo de búsqueda de documentos */
.custom-search-input {
    border: 1px solid #28a745;
    border-radius: 0.25rem;
    overflow: hidden;
    /* Para que el border-radius afecte a los hijos */
}

.custom-search-input .input-group-prepend .input-group-text {
    background-color: #ffffff;
    border: none;
    border-right: 1px solid #28a745;
    border-radius: 0;
}

.custom-search-input .form-control {
    border: none;
    box-shadow: none;
    /* Quitar sombra de foco de Bootstrap */
}

.custom-search-input .form-control:focus {
    box-shadow: none;
}

.custom-search-input .input-group-prepend .fa-search {
    color: #6c757d;
    /* Color de icono secundario de Bootstrap */
}

/* Action dropdown styles for document list */
.action-menu-btn {
    background-color: #e0e0e0;
    border-radius: 6px;
    border: none;
    color: #333;
    width: 40px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-menu-btn:hover,
.action-menu-btn:focus,
.action-menu-btn:active {
    background-color: #d0d0d0;
    color: #000;
    box-shadow: none !important;
}

.action-dropdown-menu {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 2px solid #28a745;
    padding: 4px !important;
    background-color: #e0e0e0;
    z-index: 1050 !important;
    /* Ensure dropdown appears above sticky columns */
}

/* Fix for dropdown menus appearing behind sticky columns and action buttons */
.dropdown-menu {
    z-index: 1050 !important;
    /* Higher than sticky columns (z-index: 40) */
}

/* Ensure dropdown container has proper stacking context */
.dropdown {
    position: relative;
    z-index: auto;
}

/* When dropdown is open, increase z-index of parent */
.dropdown.show {
    z-index: 1051 !important;
}

.action-dropdown-menu .d-flex {
    gap: 4px;
}

.action-dropdown-menu .action-btn {
    background-color: #fff;
    border: 1.5px solid;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.action-dropdown-menu .action-btn.btn-outline-success {
    border-color: #28a745;
    color: #28a745;
}

.action-dropdown-menu .action-btn.btn-outline-success:hover {
    background-color: #28a745;
    color: white;
}

.action-dropdown-menu .action-btn.btn-outline-primary {
    border-color: #007bff;
    color: #007bff;
}

.action-dropdown-menu .action-btn.btn-outline-primary:hover {
    background-color: #007bff;
    color: white;
}

.action-dropdown-menu .action-btn.btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
}

.action-dropdown-menu .action-btn.btn-outline-danger:hover {
    background-color: #dc3545;
    color: white;
}

/* Estilo para resaltar la card cuando un input tiene valor */
.shadow-active {
    box-shadow: 0 4px 25px rgba(40, 167, 69, 0.7) !important;
    /* Sombra verde más marcada */
    border-color: #28a745 !important;
    /* Borde verde */
}

/* Aumentar la sombra por defecto de las tarjetas */
.shadow {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

/* Estilo para alinear a la izquierda el contenido de los tooltips del calendario */
.left-align-tooltip .tooltip-inner {
    text-align: left !important;
}

/* Estilos para el encabezado del día en el calendario */
.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px;
    /* Ajusta el padding según sea necesario */
}

.day-number {
    font-weight: bold;
}

.view-day-details-icon {
    cursor: pointer;
    display: none;
    /* Oculto por defecto */
}

/* Mostrar el icono solo al pasar el ratón sobre la celda del día */
.day-cell:hover .view-day-details-icon {
    display: inline-block;
}

/* Estilo para el día seleccionado en el calendario */
.day-cell.selected-day {
    background-color: #e0f7fa !important;
    /* Un color de fondo suave para la selección */
    border: 1px solid #007bff;
    /* Borde para resaltar */
}

/* Estilos para el calendario: contador de tareas y ajuste de espacio */
/* Estilos para el calendario: contador de tareas y ajuste de espacio */
.day-events-wrapper {
    margin-top: 5px;
    /* Reduce el espacio entre el número del día y las tareas */
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    /* Espacio entre tareas */
}

/* --- Smart Tooltip Class --- */
.smart-tooltip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

.day-events-wrapper .event {
    display: inline-block;
    /* Se ajusta al contenido */
    max-width: calc(100% - 2px);
    /* Máximo 2 por fila, considerando el gap */
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.task-counter {
    position: absolute;
    bottom: 2px;
    right: 5px;
    font-size: 0.75em;
    /* Fuente más pequeña */
    font-style: italic;
    /* Fuente en cursiva */
    color: #6c757d;
    /* Color de texto secundario */
}

/* Para que el contador funcione, la celda del día necesita posicionamiento relativo */
.day-cell {
    position: relative;
    padding-bottom: 20px !important;
    /* Espacio para el contador en la parte inferior */
}

/* Estilos para el icono de edición en la modal de tareas */
.edit-task-icon {
    font-size: 1.5rem;
    /* Aumentado para mayor visibilidad */
    color: #6c757d;
    /* Color secundario */
    text-decoration: none;
    transition: color 0.2s;
}

.edit-task-icon:hover {
    color: #0056b3;
    /* Un azul más oscuro al pasar el ratón */
}

.header {
    background-color: #d6d6d6 !important;
    /* Medium Light Gray from image */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    height: var(--header-height);
    transition: all 0.3s ease;
}

/* === Modern Sidebar Redesign === */
.l-navbar {
    background-color: rgba(165, 192, 168, 0.6) !important;
    /* Sage Green with 40% transparency */
    backdrop-filter: blur(10px);
    /* Glassmorphism effect */
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02) !important;
    color: #1f1f1f;
    /* Dark text for contrast against green */
}

.nav_logo {
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 1rem !important;
}

.nav_logo-name {
    color: #1f1f1f !important;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.nav_name_text {
    color: #1f1f1f !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Category Header Styles Removed - Consolidated below */

.nav_link {
    color: #1f1f1f !important;
    /* Dark icons */
    margin-bottom: 0.25rem !important;
    transition: all 0.2s ease-in-out !important;
    border-radius: 8px !important;
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
    padding: 0.6rem 0.75rem !important;
    /* Adjusted padding */
    display: flex !important;
    align-items: center !important;
    grid-gap: 12px;
}

.nav_link:hover {
    color: #000000 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    /* Lighten on hover */
}

.nav_link.active {
    color: #000000 !important;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6)) !important;
    /* Horizontal gradient to white */
    backdrop-filter: blur(5px);
    font-weight: 600;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav_link.active::before {
    display: none;
    /* Remove the vertical bar if present */
}

.nav_icon {
    font-size: 1.25rem !important;
    color: inherit !important;
    transition: color 0.2s;
}

/* Submenus */
.submenu {
    background-color: transparent !important;
    /* Remove dark background */
}

.submenu .nav_link {
    padding-left: 2.5rem !important;
    /* Indent sub-items */
    font-size: 0.9em !important;
}

.submenu-toggle-icon {
    margin-left: auto;
    /* Push chevron to right */
    color: inherit !important;
    font-size: 1.1rem !important;
}

/* Scroll indicators updated colors */
.nav-scroll-indicator {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #333 !important;
}


.nav_category_header {
    padding: 0.6rem 0.75rem;
    /* Match nav_link padding */
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    font-weight: 600;
    color: #1f1f1f !important;
    /* Unified text color */
    background-color: rgba(40, 167, 69, 0.4) !important;
    /* 60% transparency (0.4 opacity) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
    /* Medium shadow */
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    /* Match grid-gap of nav_link */
    transition: all 0.3s ease;
}

.nav_category_icon {
    color: #1f1f1f !important;
    /* Dark icon to match text, or #28a745 if green desired? Let's use dark for consistency */
    font-size: 1.25rem;
    /* Match nav_icon size */
    display: inline-block !important;
    /* Force show */
}

/* Ocultar texto de categoría al colapsar, mostrar solo icono */
.l-navbar:not(.show) .nav_category_header .nav_name_text {
    display: none !important;
}

/* Ajustes para cabecera de categoría colapsada */
.l-navbar:not(.show) .nav_category_header {
    justify-content: center;
    padding: 0.6rem 0;
    /* Centered icon */
    background-color: rgba(40, 167, 69, 0.4) !important;
    /* Consistent transparency */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
    /* Consistent shadow */
}

/* FIX: Ocultar nombre del enlace en modo colapsado para evitar que el wrapping de texto afecte la altura */
.l-navbar:not(.show) .nav_name {
    display: none !important;
}

.nav_name {
    white-space: nowrap;
    /* Prevenir wrapping incluso cuando es visible */
}

/* === Modern Table Design === */
.custom-scroll {
    border-radius: 10px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    /* Ensure corners clip content */
}

/* Ensure tables don't wrap content and force horizontal scroll if needed */
.table {
    border-collapse: separate;
    /* Required for border-radius on rows/cells effectively if we stick to cell radius, but wrapper is better */
    border-spacing: 0;
}

.table td,
.table th {
    white-space: nowrap !important;
    /* Keep data cells single line */
    vertical-align: middle !important;
    padding: 12px 16px !important;
    /* Increased padding for breathing room */
}

/* Header Styling */
/* Header Styling */
.table thead th {
    white-space: normal !important;
    /* Allow wrapping for long headers */
    vertical-align: bottom !important;
    /* Align to bottom for better look with wrapping */
    min-width: 120px !important;
    /* Ensure headers are always readable */
    background-color: rgba(165, 192, 168, 0.6) !important;
    /* Green from sidebar/image */
    color: #000000 !important;
    /* Black text for contrast */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: calc(0.75rem + 1px) !important;
    /* text-xs */
    letter-spacing: 0.05em !important;
    /* tracking-wider */
    border-bottom: 1px solid #e2e8f0 !important;
    /* Slate-200 */
    padding: 1rem 1.5rem !important;
    /* px-6 py-4 */
}

/* Standardized Avatar Cell */
.avatar-cell {
    width: 60px !important;
    /* Slightly wider for the flex layout if needed */
    padding-left: 1.5rem !important;
    /* px-6 */
    padding-right: 1.5rem !important;
    /* px-6 */
    vertical-align: middle !important;
}

/* Ensure avatar-initials are centered and correct size */
.avatar-initials {
    width: 40px !important;
    /* h-10 */
    height: 40px !important;
    /* w-10 */
    border-radius: 9999px !important;
    /* rounded-full */
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 700 !important;
    /* font-bold */
    font-size: 0.875rem !important;
    /* text-sm */
    /* Remove automated centering margin: 0 auto; to allow flex behavior if needed.
       Use .mx-auto utility where centering is required. */
    border: 1px solid #e2e8f0 !important;
    /* border-slate-200 if using image, for initials maybe less */
}

/* Row Styling */
.table tbody td {
    color: #64748b;
    /* Slate-500 for secondary text, can override for primary */
    border-bottom: 1px solid #f1f5f9 !important;
    /* Slate-100 */
    padding: 1rem 1.5rem !important;
    /* px-6 py-4 */
    vertical-align: middle !important;
}

/* Hover Effect */
.table-hover tbody tr:hover td {
    background-color: rgba(248, 250, 252, 0.8) !important;
    /* Slate-50/80 */
    transition: background-color 0.2s duration-200;
}

/* Optional: Remove strict border collapse if interfering, though usually fine */
.table {
    border-collapse: separate !important;
    border-spacing: 0;
}

/* Enforce responsive container */
.table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* --- Shepherd.js Premium Tour Styles --- */
.shepherd-element.shepherd-premium {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(40, 167, 69, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    color: #333 !important;
    max-width: 400px !important;
}

.shepherd-premium .shepherd-content {
    border-radius: 12px !important;
    padding: 0 !important;
}

.shepherd-premium .shepherd-header {
    background: transparent !important;
    padding: 1.5rem 1.5rem 0.5rem !important;
}

.shepherd-premium .shepherd-text {
    padding: 0.5rem 1.5rem 1.5rem !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #444 !important;
}

.shepherd-premium .shepherd-footer {
    background: rgba(40, 167, 69, 0.05) !important;
    padding: 1rem 1.5rem !important;
    border-top: 1px solid rgba(40, 167, 69, 0.1) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    border-radius: 0 0 12px 12px !important;
}

.shepherd-button-premium-primary {
    background: #28a745 !important;
    border: none !important;
    border-radius: 6px !important;
    color: white !important;
    padding: 0.5rem 1.25rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.shepherd-button-premium-primary:hover {
    background: #218838 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.shepherd-button-premium-secondary {
    background: transparent !important;
    border: 1px solid #6c757d !important;
    border-radius: 6px !important;
    color: #6c757d !important;
    padding: 0.5rem 1.25rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.shepherd-button-premium-secondary:hover {
    background: rgba(108, 117, 125, 0.1) !important;
    color: #333 !important;
}

.shepherd-arrow:before {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* --- Global Sticky Table Styles --- */

.sticky-table-container {
    /* max-height: 70vh; */
    min-height: 200px;
    width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    position: relative;
    border: 1px solid var(--border-color);
    display: block;
}

.table-sticky {
    width: fit-content !important;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

/* Sticky Header */
.sticky-header {
    background-color: #e9ecef;
    /* Default grey background */
}

.sticky-header th {
    position: sticky !important;
    top: 0;
    z-index: 10;
    background-color: inherit !important;
    /* Inherit from thead */
    opacity: 1 !important;
    transform: translateZ(0);
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    color: var(--text-primary);
    vertical-align: middle !important;
    padding: 8px 4px !important;
    height: 60px;
    white-space: normal !important;
}

/* Header Text Clamp */
.sticky-header th a,
.sticky-header th span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* Sticky Left Columns */
.sticky-col-left {
    position: sticky !important;
    left: 0;
    z-index: 11;
    background-color: inherit !important;
    /* Inherit header color */
    border-right: 1px solid var(--border-color);
}

/* Sticky column data cells (non-header) should have white background */
tbody .sticky-col-left {
    background-color: #ffffff !important;
}

.sticky-col-left-wide {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
}

.sticky-col-left-narrow {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.sticky-col-left-wide-variable {
    width: auto !important;
    min-width: 200px !important;
    max-width: none !important;
}

/* Text truncation for employee/user names in sticky columns */
.sticky-col-left .text-dark,
.sticky-col-left .fw-bold,
.sticky-col-left-wide .text-dark,
.sticky-col-left-wide .fw-bold,
.sticky-col-left-wide-variable .text-dark,
.sticky-col-left-wide-variable .fw-bold {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Sticky Right Column (Actions) */
.sticky-col-right {
    position: sticky !important;
    right: 0;
    z-index: 30 !important;
    background-color: inherit !important;
    /* Inherit header color */
    box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.2);
    width: 100px;
    min-width: 100px;
    text-align: center;
}

/* Sticky column data cells (non-header) should have white background */
tbody .sticky-col-right {
    background-color: #ffffff !important;
}

/* Intersections (Header + Sticky Column) */
.sticky-header th.sticky-col-left,
.sticky-header th.sticky-col-right {
    z-index: 40 !important;
    /* Top-left/right corners */
    background-color: inherit !important;
    /* Inherit from thead */
    opacity: 1 !important;
    transform: translateZ(0);
}

/* Sticky Footer */
.sticky-footer th,
.sticky-footer td {
    position: sticky !important;
    bottom: 0;
    z-index: 10;
    background-color: #f8f9fa !important;
    /* Bootstrap light bg */
    box-shadow: 0 -2px 2px -1px rgba(0, 0, 0, 0.2);
}

/* Footer / Summary row Intersections */
tr.sticky-footer th.sticky-total-label.sticky-col-left,
tr.sticky-footer th.sticky-total-label.sticky-col-right,
tfoot th.sticky-total-label.sticky-col-left,
tfoot th.sticky-total-label.sticky-col-right,
.sticky-footer th.sticky-total-label.sticky-col-left,
.sticky-footer th.sticky-total-label.sticky-col-right {
    z-index: 60 !important;
    background: rgba(165, 192, 168, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    bottom: 0;
    position: sticky !important;
    transform: translateZ(0);
}

/* Data Cell Formatting */
.data-cell-fixed {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
}

/* Global Table Styles - Consolidated from dailywork/styles.css */

/* --- Sticky Table Implementation --- */
/* Global Table Styles - Consolidated from dailywork/styles.css */

/* --- Sticky Table Implementation --- */
.table-container {
    min-height: 200px;
    width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    position: relative;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07) !important;
    background-color: #ffffff !important;
    display: block;
}

/* Base Table */
.table-standard {
    width: fit-content !important;
    /* Force horizontal scroll when columns exceed container */
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: none !important;
}

.table-standard th,
.table-standard td {
    vertical-align: middle;
}

/* --- Sticky Headers (Vertical Scroll) --- */
.sticky-header,
.table-standard thead th {
    position: sticky !important;
    top: 0;
    z-index: 20;
    background: rgba(165, 192, 168, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 1 !important;
    transform: translateZ(0);
    /* Force layer creation */
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1) !important;
    color: #1e293b !important;
    font-weight: 700;
    white-space: normal !important;
    word-wrap: break-word;
    line-height: 1.3;
    padding: 10px 8px !important;
    height: 60px;
    /* Reduced to make header more compact */
    vertical-align: middle !important;
    text-align: center !important;
    /* Center horizontally */
    font-size: calc(0.66rem + 1px) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.sticky-header a,
.table-standard thead th a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
    height: 100%;
    color: #1e293b !important;
    text-decoration: none;
    line-height: normal;
    font-weight: 700 !important;
    /* Let flex handle vertical alignment */
}


/* --- Table Standard Styling --- */
.table-standard thead th {
    font-size: calc(0.66rem + 1px) !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
    padding: 10px 8px !important;
    color: #1e293b !important;
    text-align: center !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Ensure data cells match alignment if needed */
.table-standard td {
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    border-right: none !important;
    border-left: none !important;
    padding: 0.85rem 1rem !important;
}


/* --- Sticky Columns (Horizontal Scroll) --- */

/* Left Column 1 (e.g., Employee Name) */
.sticky-col-1 {
    position: sticky !important;
    left: 0;
    z-index: 11;
    background-color: #ffffff; /* Base color, overridden for header and body stripes */
    border-right: 1px solid rgba(226, 232, 240, 0.8) !important;
    width: 290px !important;
    min-width: 290px !important;
    max-width: 290px !important;
}

thead th.sticky-col-1,
.sticky-header th.sticky-col-1 {
    z-index: 25 !important;
    /* Higher z-index for corner */
    background: rgba(165, 192, 168, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    top: 0 !important;
}

/* Left Column 2 (e.g., Date when Employee is also sticky) */
.sticky-col-2 {
    position: sticky !important;
    left: 290px;
    /* Must match width of col-1 */
    z-index: 11;
    background-color: #ffffff;
    border-right: 1px solid rgba(226, 232, 240, 0.8) !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    box-shadow: 6px 0 12px -3px rgba(0, 0, 0, 0.15) !important;
}

thead th.sticky-col-2,
.sticky-header th.sticky-col-2 {
    z-index: 25 !important;
    background: rgba(165, 192, 168, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    top: 0 !important;
    box-shadow: 6px 0 12px -3px rgba(0, 0, 0, 0.15) !important;
}

/* Left Column Date-only (e.g., Date as first sticky when Employee filter is active) */
.sticky-col-1-date {
    position: sticky !important;
    left: 0;
    z-index: 11;
    background-color: #ffffff;
    border-right: 1px solid rgba(226, 232, 240, 0.8) !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    box-shadow: 6px 0 12px -3px rgba(0, 0, 0, 0.15) !important;
}

thead th.sticky-col-1-date,
.sticky-header th.sticky-col-1-date {
    z-index: 25 !important;
    background: rgba(165, 192, 168, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    top: 0 !important;
    box-shadow: 6px 0 12px -3px rgba(0, 0, 0, 0.15) !important;
}

/* Actions Column (Right Sticky) */
.actions_column,
.actions-cell,
.sticky-col-right {
    position: sticky !important;
    right: 0;
    z-index: 15 !important;
    box-shadow: -6px 0 12px -3px rgba(0, 0, 0, 0.15) !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    background-color: #ffffff; /* Base color */
    border-left: 1px solid rgba(226, 232, 240, 0.8) !important;
}

thead th.actions_column,
thead th.sticky-col-right {
    background: rgba(165, 192, 168, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 25 !important;
    /* Highest for top-right corner */
    top: 0 !important;
    box-shadow: -6px 0 12px -3px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure dropdowns are always on top */
.table-container .dropdown-menu {
    z-index: 9999 !important;
}

/* body cells for sticky columns should follow stripes and hover */
tbody td.sticky-col-1,
tbody td.sticky-col-2,
tbody td.sticky-col-1-date,
tbody td.actions-cell,
tbody td.sticky-col-right {
    background-color: #ffffff !important;
}

/* Striped rows (even typically in Bootstrap table-striped) */
.table-striped tbody tr:nth-of-type(even) td {
    background-color: #f8fafc !important; /* Soft modern slate-gray tint */
}
.table-striped tbody tr:nth-of-type(even) td.sticky-col-1,
.table-striped tbody tr:nth-of-type(even) td.sticky-col-2,
.table-striped tbody tr:nth-of-type(even) td.sticky-col-1-date,
.table-striped tbody tr:nth-of-type(even) td.actions-cell,
.table-striped tbody tr:nth-of-type(even) td.sticky-col-right {
    background-color: #f8fafc !important;
}

/* Refined Row Hover: Sage Green tint that applies uniformly across standard & sticky cells */
.table-hover tbody tr {
    transition: background-color 0.25s ease;
}
.table-hover tbody tr:hover td {
    background-color: rgba(165, 192, 168, 0.07) !important;
}
.table-hover tbody tr:hover td.sticky-col-1,
.table-hover tbody tr:hover td.sticky-col-2,
.table-hover tbody tr:hover td.sticky-col-1-date,
.table-hover tbody tr:hover td.actions-cell,
.table-hover tbody tr:hover td.sticky-col-right {
    background-color: rgba(165, 192, 168, 0.07) !important;
}


/* --- Sticky Footer / Totals Row --- */
.sticky-footer th,
.sticky-footer td,
.sticky-footer td.data-cell,
.sticky-footer .data-cell {
    position: sticky !important;
    bottom: 0;
    z-index: 20;
    background: rgba(165, 192, 168, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 700 !important;
    color: #1e293b !important;
    font-size: 0.9rem !important;
    border-top: 2px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -6px 16px -3px rgba(0, 0, 0, 0.15) !important;
}

.sticky-total-label {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 22 !important;
    background: rgba(165, 192, 168, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 1 !important;
    transform: translateZ(0);
    color: #1e293b !important;
    font-weight: 700;
}

th.sticky-total-label.sticky-col-1 {
    z-index: 24 !important;
    left: 0 !important;
}

th.sticky-total-label.sticky-col-2 {
    z-index: 24 !important;
    left: 290px !important; /* Base for employee name */
    box-shadow: 6px 0 12px -3px rgba(0, 0, 0, 0.15) !important;
}

th.sticky-total-label.sticky-col-1-date {
    z-index: 24 !important;
    left: 0 !important;
    width: 120px !important;
    min-width: 120px !important;
    box-shadow: 6px 0 12px -3px rgba(0, 0, 0, 0.15) !important;
}

/* Adjustments for specific views if needed */
.employee-selected th.sticky-total-label.sticky-col-1 {
    left: 0 !important;
    width: 120px !important;
}

/* Highlighted cells (observations tooltips) styled as modern badges */
.highlighted-cell {
    border: 1px solid #36b9cc !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    background-color: rgba(54, 185, 204, 0.08) !important;
    color: #2e59d9 !important;
    font-weight: 700 !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    min-width: 28px;
}
.highlighted-cell:hover {
    background-color: rgba(54, 185, 204, 0.16) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(54, 185, 204, 0.15);
}


/* Fix for context menu behind sticky columns */
.dropdown-menu.show {
    z-index: 9999 !important;
    position: fixed !important;
    /* Break out of table stacking context */
    /* Ensure it doesn't span full width if inherited */
    width: auto;
    min-width: 10rem;
}

/* Fix for header dropdowns: they should be absolute relative to the fixed header, not fixed themselves */
.header-dropdown.dropdown-menu.show,
.user-profile-dropdown.dropdown-menu.show {
    position: absolute !important;
    /* Adjust top/right if necessary, but usually bootstrap handles it via popper or simple absolute positioning */
}

/* --- Helpers --- */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

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

.data-cell-header {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* For variable width sticky columns (legacy support or specific cases) */
.sticky-col-left-wide-variable {
    width: 300px !important;
    min-width: 300px !important;
}

/* --- Estilos Globales para Modales (Refined Sage/Glass) --- */
.modal-header:not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not(.bg-light) {
    background-color: rgba(165, 192, 168, 0.6) !important; /* Unified Header Green (#A5C0A8) */
    color: #2c3e50 !important;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 1.5rem;
}

.modal-header .modal-title {
    color: #2c3e50 !important;
    font-weight: 600;
}

.modal-header .btn-close {
    filter: none !important;
    opacity: 0.8;
}

.glass-modal-header {
    background: rgba(165, 192, 168, 0.6) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    color: #2c3e50 !important;
}

.glass-modal-header .modal-title {
    letter-spacing: -0.02em;
    text-shadow: none;
}

.glass-modal-header .bg-white.bg-opacity-25 {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #2c3e50 !important;
}

.glass-modal-header .btn-close {
    filter: none !important;
    opacity: 0.8;
}

.sage-modal-body {
    background-color: #f8faf9; /* Very light sage gray */
}

.premium-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.modern-table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

.modern-table thead th {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    color: #64748b !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: calc(0.7rem + 1px) !important;
    letter-spacing: 0.08em;
    padding: 16px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.modern-table tbody tr {
    background-color: #ffffff;
    border-radius: 12px;
    transition: all 0.2s;
}

.modern-table tbody tr:hover {
    background-color: #f1f5f9;
}

.modern-table tbody td {
    padding: 14px 16px;
    border: none;
}

.modern-table tbody td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.modern-table tbody td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.kpi-card-gradient {
    position: relative;
    overflow: hidden;
}

/* Redesigned KPI Indicators */
.kpi-icon-container {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.premium-card:hover .kpi-icon-container {
    transform: scale(1.1) rotate(5deg);
}

.btn-premium-refresh {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #4a5568;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-premium-refresh:hover {
    background: #ffffff;
    border-color: #28a745;
    color: #28a745;
    transform: rotate(180deg);
}

/* --- Supervisor Premium Badge & Edit Button --- */
.supervisor-premium-badge {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #2d3748;
    display: inline-flex;
    align-items: center;
}

.supervisor-premium-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.supervisor-premium-badge i {
    color: #4a5568;
    font-size: 1.1rem;
}

.supervisor-premium-badge-empty {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #a0aec0;
    display: inline-flex;
    align-items: center;
}

.supervisor-premium-badge-empty:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.supervisor-premium-badge-empty i {
    color: #cbd5e0;
    font-size: 1.1rem;
}

.supervisor-premium-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    color: #4a5568;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    font-size: 0.9rem;
}

.supervisor-premium-btn:hover {
    background: #ffffff;
    border-color: #28a745;
    color: #28a745;
    transform: rotate(180deg);
}

/* --- Premium Action Buttons (card header toolbar) --- */
.btn-premium-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    min-height: 38px;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    width: auto !important;
    flex-shrink: 0;
}

.btn-premium-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.btn-premium-action:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.btn-premium-action-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border-color: transparent;
}

.btn-premium-action-info:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
}

.btn-premium-action-primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    border-color: transparent;
}

.btn-premium-action-primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #fff;
}

.btn-premium-action-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border-color: transparent;
}

.btn-premium-action-success:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
}

.date-filter-pill {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 4px 8px;
    border-radius: 14px;
}

.border-left-custom-danger { border-left: 5px solid #ff6b6b !important; }
.border-left-custom-warning { border-left: 5px solid #ffd93d !important; }
.border-left-custom-success { border-left: 5px solid #6bc11f !important; }

/* Tooltip and Dropdowns Global Fix */
.flatpickr-calendar {
    margin-top: -56px !important;
}
.flatpickr-calendar,
.select2-container--open,
.select2-dropdown,
.apexcharts-tooltip,
.tooltip {
    z-index: 99999 !important;
}

.tooltip-inner {
    background-color: #1e293b !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 8px 12px !important;
    border-radius: 8px !important;
}

/* ==========================================
   PROJECT-WIDE PREMIUM FORM CONTROLS
   ========================================== */

/* --- Universal Base Styling for All Form Fields --- */
.form-control,
.form-select {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.95rem !important;
    background-color: #ffffff !important;
    color: #2c3e50 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    width: 100% !important;
}

.form-control:hover,
.form-select:hover {
    border-color: #94a3b8 !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25) !important;
    outline: none !important;
}

/* Standalone inputs/selects/textareas outside form-control/form-select classes */
input[type="text"]:not(.btn-check),
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="url"],
select:not(.form-select):not(.form-control),
textarea:not(.form-control) {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.95rem !important;
    background-color: #ffffff !important;
    color: #2c3e50 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="text"]:not(.btn-check):hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="url"]:hover,
select:not(.form-select):not(.form-control):hover,
textarea:not(.form-control):hover {
    border-color: #94a3b8 !important;
}

input[type="text"]:not(.btn-check):focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
select:not(.form-select):not(.form-control):focus,
textarea:not(.form-control):focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25) !important;
    outline: none !important;
}

/* --- Input Group Container --- */
.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    margin-bottom: 0 !important;
}

.input-group:hover {
    border-color: #94a3b8 !important;
}

.input-group:focus-within {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25) !important;
}

/* Icon prefix/suffix */
.input-group .input-group-text {
    background-color: #f8fafc !important;
    border: none !important;
    border-right: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    padding: 0.5rem 0.8rem !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 46px !important;
}

.input-group > :last-child.input-group-text {
    border-right: none !important;
    border-left: 1px solid #e2e8f0 !important;
}

/* Fields inside input-group: no own border */
.input-group .form-control,
.input-group .form-select,
.input-group input,
.input-group select,
.input-group textarea {
    flex: 1 1 auto !important;
    width: 1% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.95rem !important;
    background-color: #ffffff !important;
    height: auto !important;
    margin-bottom: 0 !important;
}

.input-group .form-control:focus,
.input-group .form-select:focus,
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* --- Flatpickr alt-input consistency --- */
.flatpickr-input.form-control,
input.flatpickr-input,
.flatpickr-input[readonly] {
    background-color: #ffffff !important;
    cursor: pointer !important;
}

.flatpickr-input.form-control:focus,
input.flatpickr-input:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25) !important;
}

.input-group .flatpickr-input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
}

/* --- Select: custom green dropdown arrow --- */
.form-select,
select.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2328a745' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
}

/* --- Form Labels --- */
.form-label,
label.form-label,
label.custom-selector {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 0.35rem !important;
    letter-spacing: 0.01em;
    display: block;
}

/* --- Placeholders --- */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* --- Compact size variants --- */
.form-control-sm,
.form-select-sm {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.85rem !important;
    border-radius: 6px !important;
}

/* --- Exceptions: special inputs that must NOT receive global styles --- */
input[type="checkbox"],
input[type="radio"],
input[type="color"],
input[type="range"],
input[type="file"],
input[type="hidden"],
.btn-check,
.form-check-input {
    border: initial !important;
    border-radius: initial !important;
    padding: initial !important;
    box-shadow: initial !important;
    background-color: initial !important;
    transition: initial !important;
    color: initial !important;
    width: initial !important;
}

/* Restore form-check-input correctly */
.form-check-input {
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    border-radius: 0.25em !important;
    width: 1em !important;
    height: 1em !important;
    background-color: #fff !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.form-check-input:checked {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.form-check-input:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25) !important;
}

.form-switch .form-check-input {
    border-radius: 2em !important;
    width: 2em !important;
}

/* --- Readonly & Disabled states --- */
.form-control:read-only:not(.flatpickr-input),
input[readonly]:not(.flatpickr-input) {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed;
}

.form-control:disabled,
.form-select:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

/* --- Email List & Badges Layout Adjustments --- */
.input-group .form-control,
.input-group input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

.input-group .btn,
.input-group button {
    border: none !important;
    border-left: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    background-color: #f8fafc !important;
    color: #4a5568 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.input-group .btn:hover,
.input-group button:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}

/* Badge remove button centering */
.remove-email-btn {
    padding: 0 !important;
    margin: 0 !important;
    background-size: 0.5rem !important;
    width: 0.5rem !important;
    height: 0.5rem !important;
    align-self: center !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- Fin Estilos Premium --- */