.sidebar-item-active { background-color: #1e40af; border-left: 4px solid #fbbf24; }
.card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.animate-fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Animación de vibración para el chat flotante */
@keyframes vibrate {
    0% { transform: translate(0) scale(1); }
    20% { transform: translate(-2px, 2px) scale(1.1); }
    40% { transform: translate(-2px, -2px) scale(1.1); }
    60% { transform: translate(2px, 2px) scale(1.1); }
    80% { transform: translate(2px, -2px) scale(1.1); }
    100% { transform: translate(0) scale(1); }
}
.animate-vibrate { animation: vibrate 0.3s linear infinite; }

.role-badge { font-size: 10px; padding: 2px 8px; border-radius: 9999px; font-weight: 800; text-transform: uppercase; }
.log-container::-webkit-scrollbar { width: 4px; }
.log-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.equipment-row:hover { background-color: #e2e8f0; }
input:disabled, select:disabled, textarea:disabled, input[readonly] { background-color: #f1f5f9 !important; color: #64748b !important; cursor: not-allowed; opacity: 0.8; }

.pipeline-step { position: relative; padding: 0.5rem 1rem 0.5rem 2rem; background: #f1f5f9; color: #64748b; font-weight: 800; font-size: 0.65rem; text-transform: uppercase; clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%); min-width: 120px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all 0.3s;}
.pipeline-step.active { background: #3b82f6; color: white; }
.pipeline-step.completed { background: #10b981; color: white; }
.pipeline-count { font-size: 1.1rem; font-black; line-height: 1; margin-top: 2px;}

@media print {
    body { background: white !important; }
    #main-app, #modal-gantt, #modal-form, #modal-export, #modal-chat, #login-screen, #custom-toast, #modal-password, #toast-notif, #fab-chat { display: none !important; }
    #print-view { display: block !important; position: static !important; }
}

body.dark-ui {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    color-scheme: dark;
}

.dark-ui #main-app,
.dark-ui main,
.dark-ui #content-area,
.dark-ui #view-dashboard,
.dark-ui #view-proyectos,
.dark-ui #view-rfi,
.dark-ui #view-config,
.dark-ui #view-users,
.dark-ui #view-audit,
.dark-ui #view-brand,
.dark-ui .bg-slate-50,
.dark-ui .bg-slate-100 {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

.dark-ui header.h-16 {
    background-color: #111827 !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

.dark-ui header,
.dark-ui .bg-white,
.dark-ui .card-shadow,
.dark-ui [class*="bg-white"],
.dark-ui #proyectos-list-container,
.dark-ui #filtro-operativo-container,
.dark-ui #dashboard-filters,
.dark-ui #dashboard-pipeline-card,
.dark-ui #dashboard-alerts-rankings > div,
.dark-ui #kpi-container > div,
.dark-ui #dashboard-item-monitoring,
.dark-ui #bi-charts-grid > div,
.dark-ui #modal-form > div,
.dark-ui #modal-password > div,
.dark-ui #modal-export > div,
.dark-ui #modal-gantt > div,
.dark-ui #chat-dock .bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

.dark-ui canvas {
    background-color: transparent !important;
}

.dark-ui .bg-blue-50,
.dark-ui .bg-blue-50\/50,
.dark-ui .bg-indigo-50,
.dark-ui .bg-purple-50,
.dark-ui .bg-emerald-50,
.dark-ui .bg-teal-50,
.dark-ui .bg-amber-50,
.dark-ui .bg-red-50 {
    background-color: #172033 !important;
}

.dark-ui .text-slate-900,
.dark-ui .text-slate-800,
.dark-ui .text-slate-700,
.dark-ui .text-slate-600,
.dark-ui .text-blue-800,
.dark-ui .text-purple-800 {
    color: #e2e8f0 !important;
}

.dark-ui .text-slate-500,
.dark-ui .text-slate-400 {
    color: #94a3b8 !important;
}

.dark-ui .border,
.dark-ui .border-slate-100,
.dark-ui .border-slate-200,
.dark-ui .border-blue-100,
.dark-ui .border-blue-200,
.dark-ui .border-indigo-200,
.dark-ui .border-emerald-100,
.dark-ui .border-emerald-200,
.dark-ui .border-teal-200 {
    border-color: #334155 !important;
}

.dark-ui input,
.dark-ui select,
.dark-ui textarea {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

.dark-ui input::placeholder,
.dark-ui textarea::placeholder {
    color: #64748b !important;
}

.dark-ui input:disabled,
.dark-ui select:disabled,
.dark-ui textarea:disabled,
.dark-ui input[readonly] {
    background-color: #111827 !important;
    color: #94a3b8 !important;
}

.dark-ui table thead,
.dark-ui .bg-slate-900 {
    background-color: #111827 !important;
}

.dark-ui tbody tr:hover,
.dark-ui .hover\:bg-slate-200:hover {
    background-color: #334155 !important;
}

.dark-ui .pipeline-step {
    background: #1e293b;
    color: #cbd5e1;
}

.dark-ui .log-container::-webkit-scrollbar-thumb {
    background: #475569;
}

.dark-ui #chat-roster-panel,
.dark-ui #chat-windows .bg-slate-100 {
    background-color: #0f172a !important;
}

/* Premium KPI Dashboard Colors matching the infographic */
.kpi-section-costo {
    border-top: 4px solid #0f4c5c !important;
}
.kpi-section-costo .kpi-icon {
    color: #0f4c5c !important;
}
.kpi-section-costo .kpi-header {
    color: #0f4c5c !important;
}
.kpi-section-costo .kpi-card-bg {
    background-color: #f0f7f8 !important;
    border-left: 3px solid #0f4c5c !important;
}

.kpi-section-eficiencia {
    border-top: 4px solid #e36414 !important;
}
.kpi-section-eficiencia .kpi-icon {
    color: #e36414 !important;
}
.kpi-section-eficiencia .kpi-header {
    color: #e36414 !important;
}
.kpi-section-eficiencia .kpi-card-bg {
    background-color: #fef8f3 !important;
    border-left: 3px solid #e36414 !important;
}

.kpi-section-riesgo {
    border-top: 4px solid #0f2b46 !important;
}
.kpi-section-riesgo .kpi-icon {
    color: #0f2b46 !important;
}
.kpi-section-riesgo .kpi-header {
    color: #0f2b46 !important;
}
.kpi-section-riesgo .kpi-card-bg {
    background-color: #f2f5f8 !important;
    border-left: 3px solid #0f2b46 !important;
}

/* Dark mode overrides for custom KPIs */
.dark-ui .kpi-card-bg {
    background-color: #1e293b !important;
}
.dark-ui .kpi-section-costo .kpi-header,
.dark-ui .kpi-section-costo .kpi-icon,
.dark-ui .kpi-section-costo h3 {
    color: #38bdf8 !important; /* Sky color for better contrast in dark mode */
}
.dark-ui .kpi-section-eficiencia .kpi-header,
.dark-ui .kpi-section-eficiencia .kpi-icon,
.dark-ui .kpi-section-eficiencia h3 {
    color: #fb923c !important; /* Orange color for better contrast in dark mode */
}
.dark-ui .kpi-section-riesgo .kpi-header,
.dark-ui .kpi-section-riesgo .kpi-icon,
.dark-ui .kpi-section-riesgo h3 {
    color: #818cf8 !important; /* Indigo color for better contrast in dark mode */
}