@import url('https://rsms.me/inter/inter.css');

html { font-family: 'Inter', sans-serif, system-ui; }

/* --- Estilos Generales MODO CLARO (Default) --- */
.sidebar-link.active {
    background-color: #eef2ff; /* indigo-100 */
    color: #4338ca; /* indigo-700 */
    font-weight: 600;
    border-left: 4px solid #4f46e5; /* indigo-600 */
    padding-left: calc(2rem - 4px); /* Ajustar padding */
}

.tab-link.active {
    border-bottom-color: #3b82f6; /* blue-500 */
    color: #3b82f6;
    font-weight: 600;
}

#mobile-sidebar {
    transition: transform 0.3s ease-in-out;
}

/* Animación de pulso */
.live-dot {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* --- Estilos Tabla Empleados MODO CLARO --- */
.view#view-employees .overflow-x-auto {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb; /* gray-200 */
    padding: 0.5rem;
}

.view#view-employees th.th-cell { /* Más específico */
    background-color: #f9fafb; /* gray-50 */
    color: #6b7280; /* gray-500 */
    text-transform: none; /* Quitamos uppercase */
    font-weight: 500;
    font-size: 0.875rem;
    border-bottom: 2px solid #e5e7eb; /* gray-200 */
}

#employee-table-body tr {
    background-color: #ffffff;
}
#employee-table-body tr:hover {
    background-color: #f3f4f6; /* gray-100 suave */
    transition: background-color 0.2s ease;
}

/* Alternancia fila (opcional) */
#employee-table-body tr:nth-child(even) {
    background-color: #f9fafb; /* gray-50 */
}

/* Avatar circular */
.employee-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    background-color: #6366f1; /* Indigo-500 */
}

/* Botón de acción */
.action-btn {
    background-color: #4f46e5; /* indigo-600 */
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.action-btn:hover {
    background-color: #4338ca; /* indigo-700 */
}

/* Estilos TH globales (si los usas fuera de la tabla de empleados) */
.th-cell {
     padding: 0.75rem 1.5rem;
     text-align: left;
     font-size: 0.75rem;
     font-weight: 600;
     color: #4b5563; /* text-gray-600 */
     text-transform: uppercase;
     letter-spacing: 0.05em;
}

/* Estilos Pestañas Activas */
.tab-link.active {
    border-color: #4f46e5; /* indigo-600 */
    color: #4f46e5;
    font-weight: 600;
}
.settings-tab.active {
    border-color: #4f46e5; /* indigo-600 */
    color: #4f46e5;
    font-weight: 600;
}

/* Estilos Filtro Fecha */
.calendar-day { transition: background-color 0.2s ease, color 0.2s ease; }
.calendar-day:not(.disabled):hover { background-color: #f0f9ff; cursor: pointer; }
.calendar-day.selected-start, .calendar-day.selected-end { background-color: #4f46e5; color: white; border-radius: 50%; }
.calendar-day.in-range { background-color: #e0e7ff; border-radius: 0; }
.calendar-day.selected-start.selected-end { border-radius: 50%; }
.calendar-day.selected-start:not(.selected-end) { border-top-left-radius: 50%; border-bottom-left-radius: 50%; }
.calendar-day.selected-end:not(.selected-start) { border-top-right-radius: 50%; border-bottom-right-radius: 50%; }
.preset-filter-list li.active { background-color: #e0e7ff; font-weight: 600; color: #4338ca; }