/* ══════════════════════════════════════════════════════════════
   S-Work Pro — CSS Panel IA + Dark Mode (extraído L2676-2833)
══════════════════════════════════════════════════════════════ */

#ai-btn{position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#4285f4,#34a853);color:#fff;border:none;font-size:26px;cursor:pointer;box-shadow:0 4px 15px rgba(66,133,244,.4);z-index:2000;transition:transform .2s}
#ai-btn:hover{transform:scale(1.1)}
#ai-btn.has-panel{background:linear-gradient(135deg,#1e3a5f,#2d5a87)}
#ai-panel{display:none;position:fixed;bottom:86px;right:20px;width:400px;max-width:calc(100vw - 40px);height:520px;max-height:calc(100vh - 120px);background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.2);z-index:2000;flex-direction:column;overflow:hidden}
#ai-panel.open{display:flex}
#ai-header{background:linear-gradient(135deg,#4285f4,#34a853);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
#ai-header h3{margin:0;font-size:15px}
#ai-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#f9fafb}
.ai-msg{max-width:85%;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}
.ai-msg.user{align-self:flex-end;background:#4285f4;color:#fff;border-bottom-right-radius:4px}
.ai-msg.bot{align-self:flex-start;background:#fff;color:#1f2937;border:1px solid #e5e7eb;border-bottom-left-radius:4px}
.ai-msg.bot b{color:#4285f4}
.ai-msg.system{align-self:center;background:#f5f5f4;color:#92400e;font-size:11px;border-radius:8px;text-align:center;max-width:95%}
#ai-input-area{padding:10px;border-top:1px solid #e5e7eb;display:flex;gap:8px;background:#fff}
#ai-input{flex:1;padding:10px 14px;border:1px solid #d1d5db;border-radius:20px;font-size:13px;outline:none;resize:none;max-height:80px;font-family:inherit}
#ai-input:focus{border-color:#4285f4;box-shadow:0 0 0 2px rgba(66,133,244,.2)}
#ai-send{width:38px;height:38px;border-radius:50%;background:#4285f4;color:#fff;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
#ai-send:disabled{opacity:.5;cursor:not-allowed}
.ai-typing{display:flex;gap:4px;padding:8px 14px}.ai-typing span{width:7px;height:7px;background:#9ca3af;border-radius:50%;animation:bounce .6s infinite alternate}.ai-typing span:nth-child(2){animation-delay:.2s}.ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes bounce{to{transform:translateY(-6px);background:#4285f4}}
#ai-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px}
.ai-sug{font-size:11px;padding:6px 10px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:12px;cursor:pointer;transition:background .15s}
.ai-sug:hover{background:#dbeafe}


/* ── Barra de filtro temporal ──────────────────────────────── */
.filtro-bar{display:flex;align-items:center;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.filtro-bar span{font-size:11px;color:#6b7280;font-weight:500;margin-right:2px}
.filtro-btn{font-size:11px;padding:4px 12px;border-radius:20px;border:1px solid #d1d5db;background:#f9fafb;color:#374151;cursor:pointer;transition:all 0.15s;font-weight:500}
.filtro-btn:hover{background:#e5e7eb}
.filtro-btn.activo{background:#1e3a5f;color:#fff;border-color:#1e3a5f}
body.dark-mode .filtro-btn{background:#3a3a3c;color:#f2f2f7;border-color:#48484a}
body.dark-mode .filtro-btn.activo{background:#2d5a87;border-color:#2d5a87}
body.dark-mode .filtro-btn:hover{background:#48484a}

/* Colapsado de grupos */
.colapso-mas-row td{background:#fafafa;border-bottom:1px solid #f3f4f6}
body.dark-mode .colapso-mas-row td{background:#252525}
.grp-hdr{cursor:pointer}
/* ── MODO OSCURO ────────────────────────────── */
body.dark-mode{background:#1c1c1e;color:#f2f2f7}
body.dark-mode nav{background:#2c2c2e!important;border-bottom-color:#3a3a3c!important}
body.dark-mode .bg-white{background:#2c2c2e!important}
body.dark-mode .bg-gray-50{background:#1c1c1e!important}
body.dark-mode .bg-gray-100{background:#3a3a3c!important}
body.dark-mode .text-gray-900,.dark-mode .text-gray-800,.dark-mode .text-gray-700{color:#f2f2f7!important}
body.dark-mode .text-gray-600,.dark-mode .text-gray-500{color:#aeaeb2!important}
body.dark-mode .border,.dark-mode .border-b,.dark-mode border-gray-200{border-color:#3a3a3c!important}
body.dark-mode input,.dark-mode textarea,.dark-mode select{background:#3a3a3c!important;color:#f2f2f7!important;border-color:#48484a!important}
body.dark-mode .rounded-lg,.dark-mode .shadow-lg{background:#2c2c2e!important}
body.dark-mode .hover\:bg-gray-50:hover{background:#3a3a3c!important}
body.dark-mode table thead{background:#3a3a3c!important}
body.dark-mode .tab-content{background:#1c1c1e!important}
body.dark-mode .shadow-lg{box-shadow:0 4px 20px rgba(0,0,0,.5)!important}
body.dark-mode .demo-mode-banner{background:#1a3a6b!important}
body.dark-mode #ai-panel{background:#1c1c1e!important;border-color:#3a3a3c!important;box-shadow:0 8px 30px rgba(0,0,0,.6)!important}
body.dark-mode #ai-messages{background:#1c1c1e!important}
body.dark-mode #ai-input-area{background:#2c2c2e!important;border-top-color:#3a3a3c!important}
body.dark-mode #ai-input{background:#3a3a3c!important;color:#f2f2f7!important;border-color:#48484a!important}
body.dark-mode .ai-msg.bot{background:#2c2c2e!important;color:#f2f2f7!important;border-color:#3a3a3c!important}
body.dark-mode .ai-msg.bot b{color:#60a5fa!important}
body.dark-mode .ai-msg.user{background:#0a84ff!important}
body.dark-mode .ai-msg.system{background:#2a2a2a!important;color:#fde68a!important}
body.dark-mode #ai-suggestions{background:#1c1c1e!important}
body.dark-mode .ai-sug{background:#2c2c2e!important;color:#93c5fd!important;border-color:#3a3a3c!important}
body.dark-mode .ai-sug:hover{background:#3a3a3c!important}
body.dark-mode #ai-cat-sel{background:#2c2c2e!important;color:#93c5fd!important;border-color:#3a3a3c!important}
body.dark-mode #panel-config{background:#2c2c2e!important}
/* Calendario dark mode */
body.dark-mode #calendario-grid{background:#1c1c1e!important}
body.dark-mode table{background:#1c1c1e!important}
body.dark-mode table td{background:#2c2c2e!important;border-color:#3a3a3c!important;color:#f2f2f7!important}
body.dark-mode table tr:hover td{background:#3a3a3c!important}
body.dark-mode .completado{opacity:.6}
/* Dash panel oscuro */
body.dark-mode .dash-panel{background:#2c2c2e!important}
/* Tarjetas de color en modo oscuro */
body.dark-mode .bg-green-50{background:#14291a!important}
body.dark-mode .bg-orange-50{background:#291a0a!important}
body.dark-mode .bg-blue-50{background:#0a1829!important}
body.dark-mode .bg-purple-50{background:#1a0a29!important}
body.dark-mode .bg-yellow-50{background:#2a2a2a!important}
body.dark-mode .bg-red-50{background:#290a0a!important}
body.dark-mode .bg-pink-50{background:#290a1a!important}
body.dark-mode .bg-gray-50{background:#1c1c1e!important}
/* Tarjetas amarillas/tareas en dark mode */
body.dark-mode .tar-card-dk{background:#2a2a2a!important}
body.dark-mode .tar-card-dk:hover{background:#3d350d!important}
body.dark-mode .tar-sml-dk{background:#2a2a2a!important}
body.dark-mode .tar-sml-dk:hover{background:#3d350d!important}
/* Texto en tarjetas oscuras */
body.dark-mode .bg-green-50 .text-gray-600,
body.dark-mode .bg-green-50 .text-gray-500,
body.dark-mode .bg-orange-50 .text-gray-600,
body.dark-mode .bg-orange-50 .text-gray-500{color:#9ca3af!important}

/* ── TARJETAS COLORED PANELS DARK MODE ───────────── */
body.dark-mode .cp-card{background:#1e1229!important}
body.dark-mode .cp-card:hover{background:#2a1740!important}
body.dark-mode .alb-card{background:#082030!important}
body.dark-mode .alb-card:hover{background:#0a1a20!important}
body.dark-mode .vis-card{background:#291509!important}
body.dark-mode .vis-card:hover{background:#3d1f0a!important}
body.dark-mode .tar-ok-card{background:#0f2918!important}
body.dark-mode .tar-ok-card:hover{background:#163824!important}
body.dark-mode .ll-card{background:#29091a!important}
body.dark-mode .ll-card:hover{background:#3d0a24!important}
body.dark-mode .ot-card-dk{background:#190a29!important}
body.dark-mode .ot-card-dk:hover{background:#241040!important}
body.dark-mode .ped-card{background:#080f2a!important}
body.dark-mode .ped-card:hover{background:#0d153d!important}
body.dark-mode .gcal-card{background:#080f20!important}
body.dark-mode .gcal-card:hover{background:#0d1530!important}
body.dark-mode .urgente{background:#290a0a!important;border-left-color:#dc2626!important}
body.dark-mode .urgente .text-gray-600{color:#fca5a5!important}
body.dark-mode .completado{opacity:.55}
/* Dropdown y modal dark mode */
body.dark-mode .dropdown-content{background:#2c2c2e!important;border-color:#3a3a3c!important;box-shadow:0 4px 20px rgba(0,0,0,.6)!important}
body.dark-mode .dropdown-content a,body.dark-mode .dropdown-content button,body.dark-mode .dropdown-content div{color:#f2f2f7!important}
body.dark-mode .dropdown-content a:hover,body.dark-mode .dropdown-content button:hover{background:#3a3a3c!important}
/* Modal interior */
body.dark-mode .modal .bg-white,body.dark-mode .modal>div{background:#2c2c2e!important}
body.dark-mode #modal .bg-white{background:#2c2c2e!important;color:#f2f2f7!important}
body.dark-mode #modalVencido .bg-white,body.dark-mode #modalVencido>div{background:#2c2c2e!important}
/* Panel config dark */
body.dark-mode #modal h3,body.dark-mode #modal label{color:#f2f2f7!important}
/* Sección tareas - fondo hover filas tabla */
body.dark-mode tr.tar-day-hdr{background:#2c2c2e!important;color:#f2f2f7!important}
body.dark-mode tr.tar-day-hdr td{background:#2c2c2e!important}
/* Fichas cliente/proveedor */
body.dark-mode .ficha-panel{background:#2c2c2e!important;border-color:#3a3a3c!important}
/* Planificador */
body.dark-mode #plan-content .bg-white{background:#2c2c2e!important}
body.dark-mode #plan-content .bg-blue-50{background:#0f1e2e!important}
body.dark-mode #plan-content .bg-gray-100{background:#3a3a3c!important}
/* Badge estados */
body.dark-mode .bg-gray-100.text-gray-800{background:#3a3a3c!important;color:#f2f2f7!important}
body.dark-mode .bg-blue-100.text-blue-800{background:#0a1829!important;color:#93c5fd!important}
body.dark-mode .bg-green-100.text-green-800{background:#0f2918!important;color:#86efac!important}
body.dark-mode .bg-red-100.text-red-800{background:#290a0a!important;color:#fca5a5!important}
body.dark-mode .bg-yellow-100.text-yellow-800{background:#2a2a2a!important;color:#fde047!important}
body.dark-mode .bg-purple-100.text-purple-800{background:#190a29!important;color:#c4b5fd!important}
body.dark-mode .bg-orange-100{background:#291a0a!important}
/* Scrollbar dark */
body.dark-mode ::-webkit-scrollbar{width:6px;height:6px}
body.dark-mode ::-webkit-scrollbar-track{background:#1c1c1e}
body.dark-mode ::-webkit-scrollbar-thumb{background:#48484a;border-radius:3px}
body.dark-mode ::-webkit-scrollbar-thumb:hover{background:#636366}
/* Panel Alertas dark mode */
body.dark-mode [data-panel="alertas-sistema"] .text-gray-400{color:#6b7280!important}
/* Cabecera % comisiones */
.com-th-pct{background:#d1fae5;color:#065f46}
body.dark-mode .com-th-pct{background:#064e3b!important;color:#6ee7b7!important}
/* Logo nav dark mode */
body.dark-mode #app-navbar{background:transparent!important;border:none!important;box-shadow:none!important;padding-left:0!important}
body.dark-mode #app-navbar img{filter:invert(1) hue-rotate(180deg);border-radius:8px}