/* ══════════════════════════════════════════════════════════════
   S-Work Pro — CSS Principal (extraído de CRM_Pro_V2_vf2_VR56.html L20-239)
══════════════════════════════════════════════════════════════ */

html,body{overflow-x:hidden}body{font-family:sans-serif;background:#f9fafb;margin:0;padding:0}
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;overflow-y:auto}
.modal.active{display:flex;align-items:center;justify-content:center;padding:1rem}
.modal.modal-wide>div{max-width:720px!important}
.linea-doc{display:grid;grid-template-columns:3fr 70px 90px 60px 90px 28px;gap:3px;align-items:center;padding:4px 6px;border-bottom:1px solid #f0f0f0}
.linea-doc:last-child{border-bottom:none}
.linea-doc input{padding:3px 5px;border:1px solid #d1d5db;border-radius:4px;font-size:12px;width:100%}
.linea-doc input:focus{outline:none;border-color:#0891b2}
.cl-buscador-wrap{position:relative}
.cl-drop{display:none;position:absolute;z-index:9999;width:100%;background:#fff;border:1px solid #ddd;border-radius:6px;max-height:160px;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,.15);top:100%;left:0}
.cl-drop-item{padding:8px 10px;cursor:pointer;font-size:13px;border-bottom:1px solid #f3f4f6}
.cl-drop-item:hover{background:#eff6ff}
.doc-totales{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:8px;margin-bottom:8px;font-size:13px}
@media print{.no-print{display:none!important}.ficha-print{font-family:Arial,sans-serif;color:#111}}
.tp-linea-drop{position:absolute;z-index:9999;background:#fff;border:1px solid #bae6fd;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-height:160px;overflow-y:auto;min-width:280px}
.tp-linea-item{padding:6px 10px;cursor:pointer;font-size:12px;border-bottom:1px solid #f0f9ff}
.tp-linea-item:hover{background:#e0f2fe}
.tab-content{display:none}.tab-content.active{display:block}
.completado{text-decoration:line-through;opacity:.6;border-left:3px solid #10b981}
.urgente{border-left:3px solid #dc2626;background:#fee2e2}
.dropdown{position:relative;display:inline-block}
.dropdown-content{display:none;position:fixed;background:#fff;min-width:140px;box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:9999;border-radius:8px;padding:4px 0}
.dropdown-content.show{display:block}
.dropdown-content a{color:#374151;padding:10px 14px;text-decoration:none;display:block;font-size:13px}
.dropdown-content a:hover{background:#f3f4f6}
#mcont .mb-2:first-child{display:flex;flex-wrap:wrap;gap:8px 16px;padding:10px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:12px}
#mcont .mb-2:first-child label{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:13px;white-space:nowrap}
@media print{body *{visibility:hidden}.printarea,.printarea *{visibility:visible}.printarea{position:absolute;left:0;top:0}}
button{transition:all .2s ease}
button:hover{filter:brightness(1.15);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.15)}
button:active{transform:translateY(0);filter:brightness(0.95)}
.tab-btn{transition:all .2s ease}
.tab-btn:hover{filter:brightness(1.15);transform:translateY(-1px)}
a.text-blue-600{transition:all .15s ease}
a.text-blue-600:hover{transform:scale(1.3);display:inline-block}
@keyframes pulse-mic{0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}70%{box-shadow:0 0 0 8px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
.dash-panel{transition:transform .2s ease,box-shadow .2s ease}
.dash-panel.dragging{opacity:.4;transform:scale(0.95)}
.dash-panel.drag-over{box-shadow:0 0 0 3px #3b82f6;transform:scale(1.02)}
.dash-handle:hover{color:#3b82f6 !important}
.dash-handle{user-select:none}
#sidebar-nav a[data-sec]{transition:border-top 0.15s}
#sidebar-nav a[data-sec]:hover .drag-handle{opacity:0.8 !important}
@keyframes slideIn{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ═══════════════════════════════════════════════════════
   SIDEBAR FIJO IZQUIERDO — S-WORK PRO
   ══════════════════════════════════════════════════════ */

/* Navbar fija en la parte superior */
#app-navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:200;
}

/* Espacio para que el contenido no quede tapado por el navbar */
#crm-app > #crm-sidebar,
#crm-app > div:not(#app-navbar){
  margin-top:56px;
}

/* Sidebar fijo a la izquierda debajo del navbar */
#crm-sidebar{
  position:fixed;
  top:56px;           /* altura navbar 1 fila ~56px */
  left:0;
  width:210px;
  height:calc(100vh - 56px);
  background:#f1f3f5;
  border-right:1px solid #dee2e6;
  z-index:100;
  overflow:hidden;
  transition:width 0.25s ease,opacity 0.2s ease;
  display:flex;
  flex-direction:column;
}
#crm-sidebar.collapsed{
  width:0 !important;
  opacity:0;
  pointer-events:none;
}
#sidebar-inner{
  width:210px;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}
#sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px 8px;
  border-bottom:1px solid #dee2e6;
  font-weight:700;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#6c757d;
  flex-shrink:0;
}
#sidebar-toggle{
  background:none;border:none;cursor:pointer;
  color:#adb5bd;font-size:14px;padding:3px 5px;
  border-radius:4px;line-height:1;
  transition:background 0.15s,color 0.15s;
}
#sidebar-toggle:hover{background:#dee2e6;color:#495057}
#sidebar-nav{flex:1;padding-bottom:20px}
#sidebar-nav a{
  display:block !important;
  padding:9px 14px 9px 12px;
  font-size:12.5px;
  color:#495057;
  text-decoration:none;
  border-left:3px solid transparent;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background 0.12s,color 0.12s,border-color 0.12s;
}
#sidebar-nav a:hover{
  background:#e9ecef !important;
  color:#374151;
  border-left-color:#9ca3af;
}
#sidebar-nav a.active{
  background:#e8e8e8 !important;
  color:#374151;
  font-weight:600;
  border-left-color:#9ca3af;
}
#sidebar-nav .drag-handle{
  display:inline-block;
  opacity:0.25;
  font-size:10px;
  margin-right:5px;
  cursor:grab;
}

/* Contenido desplazado a la derecha del sidebar fijo */
#content-dashboard,
#content-estadisticas,#content-clientes,#content-prospectos,
#content-ofertas,#content-ots,#content-visitas,#content-llamadas,
#content-proveedores,#content-pedidos,#content-comisiones,
#content-albaranes,#content-tareas,#content-planificador,
#content-recursos{
  margin-left:210px;
  width:calc(100vw - 210px);
  max-width:calc(100vw - 210px);
  box-sizing:border-box;
  overflow:hidden;
  transition:margin-left 0.25s ease, width 0.25s ease;
}
body.sidebar-collapsed #content-dashboard,
body.sidebar-collapsed #content-estadisticas,
body.sidebar-collapsed #content-clientes,
body.sidebar-collapsed #content-prospectos,
body.sidebar-collapsed #content-ofertas,
body.sidebar-collapsed #content-ots,
body.sidebar-collapsed #content-visitas,
body.sidebar-collapsed #content-llamadas,
body.sidebar-collapsed #content-proveedores,
body.sidebar-collapsed #content-pedidos,
body.sidebar-collapsed #content-comisiones,
body.sidebar-collapsed #content-albaranes,
body.sidebar-collapsed #content-tareas,
body.sidebar-collapsed #content-planificador,
body.sidebar-collapsed #content-recursos{
  margin-left:0;
  width:100vw;
  max-width:100vw;
}

/* Botón mostrar sidebar */
#btn-show-sidebar{
  display:none !important;
  align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  font-size:16px;color:#6b7280;
  padding:4px 6px;border-radius:6px;
  transition:all 0.15s;
}
#btn-show-sidebar.visible{display:inline-flex !important}
#btn-show-sidebar:hover{background:#e9ecef;color:#374151}

/* Dark mode */
body.dark-mode #crm-sidebar{background:#1c1c1e;border-right-color:#3a3a3c}
body.dark-mode #sidebar-header{border-bottom-color:#3a3a3c;color:#6b7280}
body.dark-mode #sidebar-toggle{color:#6b7280}
body.dark-mode #sidebar-toggle:hover{background:#2c2c2e;color:#f2f2f7}
body.dark-mode #sidebar-nav a{color:#aeaeb2}
body.dark-mode #sidebar-nav a:hover{background:#2c2c2e !important;color:#f2f2f7;border-left-color:#60a5fa}
body.dark-mode #sidebar-nav a.active{background:#1e3a5f !important;color:#93c5fd;border-left-color:#3b82f6}
body.dark-mode #btn-show-sidebar{color:#6b7280}
body.dark-mode #btn-show-sidebar:hover{background:#2c2c2e;color:#f2f2f7}

/* ── Panel Alertas — adaptativo claro/oscuro ─────────── */
.alrt-h-venc{color:#dc2626;background:#fee2e2}
.alrt-card-venc{background:#fef2f2;color:#1f2937}
.alrt-h-cruce{color:#d97706;background:#f5f5f4}
.alrt-card-cruce{background:#fffbeb;color:#1f2937}
.alrt-h-com{color:#7c3aed;background:#f3e8ff}
.alrt-card-com{background:#faf5ff;color:#1f2937}
body.dark-mode .alrt-h-venc{color:#f87171;background:#290a0a}
body.dark-mode .alrt-card-venc{background:#1c0a0a;color:#f2f2f7}
body.dark-mode .alrt-h-cruce{color:#fbbf24;background:#291509}
body.dark-mode .alrt-card-cruce{background:#1a1003;color:#f2f2f7}
body.dark-mode .alrt-h-com{color:#c4b5fd;background:#190a29}
body.dark-mode .alrt-card-com{background:#120820;color:#f2f2f7}
/* Panel alertas - mejoras dark mode */
body.dark-mode #alertas-sistema{color:#f2f2f7}
body.dark-mode .alrt-card-venc:hover,body.dark-mode .alrt-card-cruce:hover,body.dark-mode .alrt-card-com:hover{filter:brightness(1.15)}
body.dark-mode .alrt-card-venc{cursor:pointer}
body.dark-mode .alrt-card-cruce span{color:#fbbf24!important}
body.dark-mode .alrt-card-com span{color:#c4b5fd!important}

/* Panel config (Paneles del Dashboard) dark mode */
body.dark-mode #panel-config{background:#1c1c1e !important;border-color:#3a3a3c !important;color:#f2f2f7}
body.dark-mode #panel-config h4{color:#f2f2f7 !important}
body.dark-mode #panel-config label{background:#2c2c2e !important;border-color:#3a3a3c !important;color:#aeaeb2 !important}
body.dark-mode #panel-checkboxes label{background:#2c2c2e !important;border-color:#3a3a3c !important;color:#aeaeb2}
body.dark-mode #panel-checkboxes label[style*="background:#f0fdf4"]{background:#0d2318 !important;border-color:#166534 !important;color:#86efac !important}
body.dark-mode #panel-checkboxes label[style*="background:#fef2f2"]{background:#290a0a !important;border-color:#7f1d1d !important;color:#fca5a5 !important}

/* Planificador: grid ocupa 100% sin padding lateral */
#content-planificador > div{padding:16px !important;box-sizing:border-box;width:100%;overflow:hidden}
#plan-content{width:100%;overflow:hidden}
#plan-content > div[style*="grid"]{width:100% !important;box-sizing:border-box}