/* ═══════════════════════════════════════════════════
       VARIABLES DEL SISTEMA — Paleta reforzada WCAG AA
       ratio mínimo 4.5:1 en texto normal, 3:1 en grande
    ═══════════════════════════════════════════════════ */
    :root {
      /* ── Design System v1 (6 colores, 3 fuentes) ── */
      --surface: #ffffff;
      --bg-page: #f8fafc;
      --bg-subtle: #f1f5f9;
      --line: #e2e8f0;
      --line-strong: #cbd5e1;
      --faint: #94a3b8;
      --muted: #64748b;
      --body: #334155;
      --ink: #1e293b;
      --primary: #2563eb;
      --primary-hover: #1d4ed8;
      --primary-active: #1e40af;
      --primary-soft: #eff6ff;
      --primary-border: #bfdbfe;
      --success: #059669;
      --success-soft: #ecfdf5;
      --success-border: #a7f3d0;
      --success-text: #065f46;
      --warning: #d97706;
      --warning-soft: #fffbeb;
      --warning-border: #fde68a;
      --warning-text: #92400e;
      --danger: #dc2626;
      --danger-soft: #fef2f2;
      --danger-border: #fecaca;
      --danger-text: #991b1b;
      --info: #0e7490;
      --info-soft: #ecfeff;
      --info-border: #a5f3fc;
      --font-display: 'Montserrat', system-ui, sans-serif;
      --font-ui: 'Poppins', system-ui, sans-serif;
      --font-body: 'Roboto', system-ui, sans-serif;
      /* ── Alias retro-compatibles (uso existente en la app) ── */
      --tx-primary: var(--ink); --tx-body: var(--body); --tx-secondary: var(--muted);
      --tx-muted: var(--muted); --tx-disabled: var(--faint);
      --bg-card: var(--surface); --bg-row-alt: var(--bg-subtle); --bg-row-hover: var(--primary-soft);
      --bdr: var(--line); --bdr-focus: var(--primary);
      --clr-success: var(--success-text); --bg-success: var(--success-border);
      --clr-danger: var(--danger-text); --bg-danger: var(--danger-soft);
      --clr-warn: var(--warning-text); --bg-warn: var(--warning-soft);
      --clr-info: var(--info); --bg-info: var(--info-soft);
      --clr-neutral: var(--body); --bg-neutral: var(--bg-subtle);
      --clr-accent: var(--primary); --bg-accent: var(--primary-soft);
    }

    /* ═══════════════════════════════════════════════════
       TIPOGRAFÍA GLOBAL — mínimos de legibilidad
    ═══════════════════════════════════════════════════ */
    body { font-size: 14px; color: var(--tx-body); }

    /* Todos los párrafos de contenido: mínimo 13px y color legible */
    p, .description, [class*="desc"], [class*="subtitle"] {
      font-size: 13px;
      color: var(--tx-secondary);
    }

    /* Labels de formularios — siempre legibles */
    .form-label { color: var(--tx-secondary) !important; font-size: 11.5px !important; }

    /* Encabezados de sección */
    h1, h2, h3 { color: var(--tx-primary); }
    h4, h5, h6 { color: var(--tx-body); }

    /* Números financieros — tabular, alineados a derecha */
    .kpi-value, [class*="monto"], [class*="valor"], [class*="precio"],
    .enterprise-table td:last-child { font-variant-numeric: tabular-nums; }

    /* ═══════════════════════════════════════════════════
       CORRECCIÓN GLOBAL: .kpi-delta en fondos claros
       var(--muted) = ratio ~4.6:1 sobre blanco — OK WCAG AA
    ═══════════════════════════════════════════════════ */
    .kpi-card .kpi-delta { color: var(--muted) !important; }
    /* Pero en fondos oscuros se mantiene el override existente */
    #view-dashboard-bi .kpi-card .kpi-delta,
    #bi-ba-section .kpi-card .kpi-delta,
    #view-agent .kpi-card .kpi-delta { color: var(--faint) !important; }

    /* ═══════════════════════════════════════════════════
       TABLAS — contraste y legibilidad
    ═══════════════════════════════════════════════════ */
    .enterprise-table th {
      color: var(--ink) !important;          /* era var(--body) — mejorado */
      background: var(--bg-subtle) !important;
      font-size: 11px;
      letter-spacing: .06em;
    }
    .enterprise-table td {
      color: var(--tx-body) !important;
      font-size: 13px;
    }
    .enterprise-table tbody tr:nth-child(even) td {
      background: var(--bg-page);
    }
    .enterprise-table tbody tr:hover td {
      background: var(--bg-row-hover) !important;
    }
    /* Celdas vacías / estado sin datos */
    .enterprise-table td[colspan] {
      color: var(--tx-muted) !important;
      font-size: 13px;
    }

    /* ═══════════════════════════════════════════════════
       STATUS PILLS — contraste forzado (WCAG AA)
    ═══════════════════════════════════════════════════ */
    .status-pill               { font-size: 11px !important; font-weight: 700 !important; }
    .status-active             { background: var(--success-border) !important; color: var(--success-text) !important; }
    .status-paused             { background: var(--warning-border) !important; color: var(--warning-text) !important; }
    .status-closed             { background: var(--bg-subtle) !important; color: var(--body) !important; }

    /* Badges genéricos inline */
    [class*="badge"]:not(.nav-badge):not(.nav-badge-blue):not(.ia-badge-ok):not(.ia-badge-warn) {
      font-weight: 700;
    }

    /* ═══════════════════════════════════════════════════
       MÓDULO: VISIÓN GLOBAL
    ═══════════════════════════════════════════════════ */
    #view-global p,
    #view-global .description { color: var(--tx-secondary) !important; }
    #view-global .kpi-label   { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: META ADS — textos auxiliares sobre blanco
    ═══════════════════════════════════════════════════ */
    #view-meta p                          { color: var(--tx-secondary) !important; }
    #view-meta .chart-card p              { color: var(--tx-secondary) !important; }
    /* Subtítulos de sección en gris claro → reforzados */
    #view-meta [style*="color:var(--faint)"]   { color: var(--tx-muted) !important; }
    #view-meta [style*="color:var(--muted)"]   { color: var(--tx-muted) !important; }
    /* Encabezados de tabla pequeños */
    #view-meta th[style*="color:var(--muted)"] { color: var(--tx-secondary) !important; }
    /* Texto "últimos 14 días", labels de botones inline */
    #view-meta span[style*="color:var(--faint)"],
    #view-meta span[style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: GOOGLE ADS
    ═══════════════════════════════════════════════════ */
    #view-google p,
    #view-google [style*="color:var(--faint)"],
    #view-google [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: TIKTOK ADS
    ═══════════════════════════════════════════════════ */
    #view-tiktok p,
    #view-tiktok [style*="color:var(--faint)"],
    #view-tiktok [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: PIPELINE / KANBAN CRM
    ═══════════════════════════════════════════════════ */
    #view-crm .lead-card { border: 1px solid var(--line); }
    /* Texto de descripción en tarjetas kanban */
    #view-crm .lead-card p,
    #view-crm .lead-card span { color: var(--tx-secondary); }
    /* Contadores de columna */
    .col-count { color: var(--body) !important; background: var(--line) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: CALENDARIO
    ═══════════════════════════════════════════════════ */
    #view-calendar p { color: var(--tx-secondary) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: CONTACTOS
    ═══════════════════════════════════════════════════ */
    #view-contacts p,
    #view-contacts [style*="color:var(--faint)"],
    #view-contacts [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: ACTIVIDADES
    ═══════════════════════════════════════════════════ */
    #view-activities p,
    #view-activities [style*="color:var(--faint)"] { color: var(--tx-muted) !important; }
    .activity-item span { color: var(--tx-secondary); }

    /* ═══════════════════════════════════════════════════
       MÓDULO: PRONÓSTICO (FORECAST)
    ═══════════════════════════════════════════════════ */
    #view-forecast .fc-kpi-label  { color: var(--tx-muted) !important; }
    #view-forecast .fc-kpi-sub    { color: var(--tx-muted) !important; }
    #view-forecast .fc-mes-label  { color: var(--tx-muted) !important; }
    #view-forecast .fc-stage-val  { color: var(--tx-muted) !important; }
    #view-forecast .fc-stage-pct  { color: var(--tx-secondary) !important; }
    #view-forecast p               { color: var(--tx-secondary) !important; }
    #view-forecast [style*="color:var(--faint)"] { color: var(--tx-muted) !important; }
    #view-forecast [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: VENDEDORES
    ═══════════════════════════════════════════════════ */
    #view-vendedores p,
    #view-vendedores [style*="color:var(--faint)"],
    #view-vendedores [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }
    #view-vendedores .kpi-delta { color: var(--muted) !important; }

    /* ── WORKSPACE VENDEDOR ───────────────────────────────────────── */
    #view-workspace-vendedor { padding: 0 !important; background: var(--bg-page); }
    .wsv-header { padding: 18px 22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
    .wsv-bento { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:14px; padding:14px 22px 22px; }
    @media(max-width:900px){ .wsv-bento { grid-template-columns:1fr; } }
    .wsv-zone { background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; min-height:420px; }
    .wsv-zone-header { padding:14px 18px 10px; border-bottom:1px solid var(--bg-subtle); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
    .wsv-zone-title { font-family:var(--font-ui); font-size:13px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:8px; margin:0; }
    .wsv-zone-body { flex:1; overflow-y:auto; padding:12px 14px; }
    /* Inbox zone */
    .wsv-msg { display:flex; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; transition:background .15s; border-bottom:1px solid var(--bg-page); }
    .wsv-msg:hover { background:var(--bg-page); }
    .wsv-msg.unread { background:var(--primary-soft); border-left:3px solid var(--primary); }
    .wsv-msg-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--surface); flex-shrink:0; font-family:var(--font-ui); }
    .wsv-msg-body { flex:1; min-width:0; }
    .wsv-msg-name { font-size:12px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:5px; }
    .wsv-msg-preview { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
    .wsv-msg-time { font-size:10px; color:var(--faint); flex-shrink:0; }
    /* Canal badge */
    .wsv-canal-wa { color:var(--success); } .wsv-canal-ig { color:var(--danger); } .wsv-canal-mail { color:var(--primary); }
    /* Catálogo */
    .wsv-prod-card { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--bg-subtle); align-items:center; }
    .wsv-prod-img { width:40px; height:40px; border-radius:8px; background:var(--bg-subtle); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; }
    .wsv-prod-info { flex:1; min-width:0; }
    .wsv-prod-name { font-size:12px; font-weight:700; color:var(--ink); }
    .wsv-prod-sku { font-size:10px; color:var(--faint); }
    .wsv-prod-price { font-size:12px; font-weight:800; color:var(--primary); }
    .wsv-prod-stock { font-size:10px; padding:2px 7px; border-radius:20px; }
    .wsv-prod-stock.ok { background:var(--success-soft); color:var(--success); } .wsv-prod-stock.low { background:var(--warning-border); color:var(--warning); } .wsv-prod-stock.out { background:var(--danger-soft); color:var(--danger); }
    /* Pipeline */
    .wsv-lead-row { display:flex; gap:8px; padding:8px 0; border-bottom:1px solid var(--bg-subtle); align-items:center; cursor:pointer; }
    .wsv-lead-row:hover { background:var(--bg-page); border-radius:8px; padding:8px 6px; }
    .wsv-etapa-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    /* Cotización carrito */
    .wsv-cart-item { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--bg-subtle); font-size:12px; }
    .wsv-cart-empty { text-align:center; padding:28px 0; color:var(--faint); }
    /* Despachos */
    .wsv-desp-row { padding:9px 0; border-bottom:1px solid var(--bg-subtle); }
    .wsv-desp-estado { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:2px 9px; border-radius:20px; }
    /* KPI strip */
    .wsv-kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 22px 14px; }
    .wsv-kpi { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; border-top:3px solid var(--wsv-c,var(--primary)); }
    .wsv-kpi-label { font-size:10px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
    .wsv-kpi-val { font-family:var(--font-ui); font-size:20px; font-weight:800; color:var(--wsv-c,var(--primary)); margin:3px 0 1px; }
    .wsv-kpi-sub { font-size:10px; color:var(--faint); }
    @media(max-width:700px){ .wsv-kpi-strip { grid-template-columns:repeat(2,1fr); } }
    /* Punto 5: mobile mejoras */
    @media(max-width:768px){
      .wsv-bento { grid-template-columns:1fr !important; gap:10px !important; padding:8px 12px 16px !important; }
      .wsv-zone { min-height:300px !important; }
      .wsv-kpi-strip { padding:0 12px 10px !important; }
      .wsv-header { padding:12px 12px 0 !important; }
      .wsv-ai-strip { margin:0 12px 10px !important; }
      #wsv-inbox-ficha { width:160px !important; }
    }
    /* Punto 11: Modo en campo */
    #wsv-campo-overlay { display:none; position:fixed; inset:0; background:#f8fafc; z-index:9999; flex-direction:column; font-family:var(--font-body); }
    #wsv-campo-overlay.active { display:flex; }
    .wsv-campo-header { background:#ffffff; border-bottom:1px solid #e2e8f0; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
    .wsv-campo-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
    .wsv-campo-lead-card { background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
    .wsv-campo-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
    .wsv-campo-btn { border:none; border-radius:12px; padding:14px; font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
    /* IA Chat strip */
    .wsv-ai-strip { margin:0 22px 14px; background:linear-gradient(135deg,#1E1B4B,#312E81); border-radius:14px; padding:14px 18px; display:flex; gap:12px; align-items:flex-start; }
    .wsv-ai-input-row { display:flex; gap:8px; margin-top:8px; }
    .wsv-ai-input { flex:1; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:7px 12px; font-size:12px; color:var(--surface); font-family:var(--font-body); outline:none; }
    .wsv-ai-input::placeholder { color:rgba(255,255,255,.4); }
    .wsv-ai-send { background:var(--primary); border:none; border-radius:8px; padding:7px 14px; color:var(--surface); font-size:12px; font-weight:700; cursor:pointer; }
    .wsv-ai-response { font-size:12px; color:rgba(255,255,255,.85); line-height:1.6; margin-top:6px; min-height:18px; font-family:var(--font-body); }
    /* Garantías */
    .wsv-gar-row { display:flex; gap:8px; padding:8px 0; border-bottom:1px solid var(--bg-subtle); align-items:center; font-size:12px; }

    /* ── P1 Kanban propio del vendedor ─────────────────────────── */
    .wsv-kanban-wrap { display:flex; gap:8px; padding:10px 14px; overflow-x:auto; min-height:280px; }
    .wsv-kanban-col { flex:0 0 160px; display:flex; flex-direction:column; gap:6px; }
    .wsv-kanban-col-header { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:5px 8px; border-radius:7px; display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; }
    .wsv-kanban-card { background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:9px 10px; cursor:grab; transition:box-shadow .15s, transform .15s; font-size:11px; border-left:3px solid var(--ec,var(--faint)); }
    .wsv-kanban-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.08); transform:translateY(-1px); }
    .wsv-kanban-card.dragging { opacity:.5; cursor:grabbing; }
    .wsv-kanban-col.drag-over { background:rgba(139,92,246,.06); border-radius:10px; }
    /* P2 Notificaciones push */
    .wsv-notif-dot { width:10px; height:10px; background:var(--danger); border-radius:50%; position:absolute; top:6px; right:6px; animation:wsv-pulse 1.5s infinite; }
    @keyframes wsv-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.6} }
    /* P3 Historial cliente */
    .wsv-hist-row { display:flex; gap:8px; padding:7px 0; border-bottom:1px solid var(--bg-subtle); align-items:center; font-size:11px; }
    /* P8 Búsqueda global workspace */
    #wsv-search-bar { position:relative; }
    #wsv-search-results { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:200; max-height:320px; overflow-y:auto; display:none; }
    #wsv-search-results.open { display:block; }
    .wsv-sr-item { display:flex; gap:10px; padding:10px 14px; cursor:pointer; align-items:center; border-bottom:1px solid var(--bg-page); }
    .wsv-sr-item:hover { background:var(--bg-page); }
    .wsv-sr-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
    .wsv-sr-label { font-size:12px; font-weight:700; color:var(--ink); }
    .wsv-sr-sub { font-size:10px; color:var(--faint); }
    /* P5 Vista Mi Día */
    .wsv-midia-item { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--bg-subtle); align-items:flex-start; }
    .wsv-midia-icon { width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
    /* P6 Calendario citas */
    .wsv-cal-slot { padding:7px 10px; border-radius:8px; margin-bottom:5px; display:flex; gap:8px; align-items:center; font-size:11px; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: VENTAS & FACTURACIÓN
    ═══════════════════════════════════════════════════ */
    #view-ventas p,
    #view-ventas [style*="color:var(--faint)"],
    #view-ventas [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: CARTERA & COBROS
    ═══════════════════════════════════════════════════ */
    #view-cartera p,
    #view-cartera [style*="color:var(--faint)"],
    #view-cartera [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: CLIENTES
    ═══════════════════════════════════════════════════ */
    #view-clientes p,
    #view-clientes [style*="color:var(--faint)"],
    #view-clientes [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* Clientes lista — filas generadas dinámicamente con colores de fondo oscuro */
    #cl-lista-body [style*="color:var(--bg-subtle)"]  { color: var(--ink) !important; }
    #cl-lista-body [style*="color:var(--line-strong)"]  { color: var(--body) !important; }
    #cl-lista-body [style*="color:var(--muted)"]  { color: var(--tx-muted) !important; }
    #cl-lista-body [style*="color:var(--body)"]  { color: var(--tx-secondary) !important; }
    /* Badges recurrente y fuente — legibles en fondo claro */
    #cl-lista-body [style*="color:var(--warning)"]  { color: var(--warning) !important; background: rgba(251,191,36,.15) !important; }
    #cl-lista-body [style*="color:var(--primary)"]  { color: var(--primary) !important; }
    #cl-lista-body [style*="color:var(--primary)"]  { color: var(--primary-active) !important; }
    /* Hover de fila — tono claro */
    #cl-lista-body > div:hover { background: var(--primary-soft) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: COSTEO & RENTABILIDAD (fondo mixto)
       Las sub-secciones oscuras mantienen colores claros
    ═══════════════════════════════════════════════════ */
    /* Secciones claras dentro de costeo */
    #view-costeo .kpi-label      { color: var(--tx-muted) !important; }
    #view-costeo .kpi-delta      { color: var(--muted) !important; }
    /* Override para chart-cards que tienen fondo oscuro dentro de costeo */
    #view-costeo .chart-card .kpi-label { color: var(--faint) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: INVENTARIO
    ═══════════════════════════════════════════════════ */
    #view-inventory p,
    #view-inventory [style*="color:var(--faint)"],
    #view-inventory [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: GASTOS & EGRESOS
    ═══════════════════════════════════════════════════ */
    #view-gastos p,
    #view-gastos [style*="color:var(--faint)"],
    #view-gastos [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: DOCUMENTOS & FORMATOS
    ═══════════════════════════════════════════════════ */
    #view-documentos p,
    #view-documentos [style*="color:var(--faint)"],
    #view-documentos [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: INFORMES
    ═══════════════════════════════════════════════════ */
    #view-informes p,
    #view-informes [style*="color:var(--faint)"],
    #view-informes [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* Botones catálogo informes empresariales */
    .inf-emp-btn {
        padding: 7px 13px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        border: 1.5px solid var(--line);
        background: var(--bg-page);
        color: var(--body);
        cursor: pointer;
        font-family:var(--font-body);
        transition: all .18s;
        white-space: nowrap;
    }
    .inf-emp-btn:hover {
        border-color: var(--primary);
        background: var(--primary-soft);
        color: var(--primary);
    }
    .inf-emp-btn.activo {
        background: linear-gradient(135deg, var(--primary), var(--primary));
        color: var(--surface);
        border-color: transparent;
        box-shadow: 0 2px 8px rgba(99,102,241,.3);
    }

    /* KPI cards del informe empresarial */
    .emp-kpi-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .emp-kpi-card.estado-bueno    { border-top: 3px solid var(--success); }
    .emp-kpi-card.estado-normal   { border-top: 3px solid var(--primary); }
    .emp-kpi-card.estado-alerta   { border-top: 3px solid var(--warning); }
    .emp-kpi-card.estado-critico  { border-top: 3px solid var(--danger); }

    /* Secciones del informe empresarial */
    .emp-seccion {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 18px 20px;
    }
    .emp-tabla-row:nth-child(even) { background: var(--bg-page); }
    .emp-tabla-row { border-radius: 6px; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: EXÓGENA DIAN
    ═══════════════════════════════════════════════════ */
    #view-exogena p,
    #view-exogena [style*="color:var(--faint)"],
    #view-exogena [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }
    #view-exogena label { color: var(--tx-secondary) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: EMAIL MARKETING
    ═══════════════════════════════════════════════════ */
    #view-email-marketing p,
    #view-email-marketing [style*="color:var(--faint)"],
    #view-email-marketing [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: PROYECTOS & COTIZACIONES
    ═══════════════════════════════════════════════════ */
    #view-proyectos p,
    #view-proyectos [style*="color:var(--faint)"],
    #view-proyectos [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: TESORERÍA — fondo claro, textos oscuros
    ═══════════════════════════════════════════════════ */
    #view-tesoreria h1  { color: var(--tx-primary) !important; font-size: 22px; }
    #view-tesoreria h3:not(#fiscal-dark-panel h3)  { color: var(--tx-primary) !important; }
    #view-tesoreria p:not(#fiscal-dark-panel p)   { color: var(--tx-muted) !important; }
    /* KPI labels en tesorería clara */
    .tes-kpi-card [style*="color:var(--faint)"] { color: var(--tx-muted) !important; }
    .tes-kpi-hint { color: var(--tx-muted) !important; opacity: 1 !important; }
    /* Mantener colores de valor en tesorería (son de color semántico) */
    .tes-kpi-card [style*="color:var(--danger)"],
    .tes-kpi-card [style*="color:var(--warning)"],
    .tes-kpi-card [style*="color:var(--primary)"],
    .tes-kpi-card [style*="color:var(--success)"] { /* mantener */ }

    /* ═══════════════════════════════════════════════════
       MÓDULO: CUENTAS POR PAGAR
    ═══════════════════════════════════════════════════ */
    #view-cuentas-pagar p,
    #view-cuentas-pagar [style*="color:var(--faint)"],
    #view-cuentas-pagar [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: NÓMINA & RRHH
    ═══════════════════════════════════════════════════ */
    #view-nomina p,
    #view-nomina label             { color: var(--tx-secondary) !important; }
    #view-nomina [style*="color:var(--faint)"],
    #view-nomina [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }
    /* Tabs de nómina — texto activo más visible */
    .active-nomina-tab { color: var(--info) !important; font-weight: 700 !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: BANDEJA INBOX
    ═══════════════════════════════════════════════════ */
    #view-inbox p,
    #view-inbox [style*="color:var(--faint)"],
    #view-inbox [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }
    .inbox-item .text-xs,
    .inbox-item span:not(.status-pill) { color: var(--tx-secondary); }
    /* Burbujas de chat — contraste mejorado */
    .chat-bubble.incoming { color: var(--tx-body) !important; }
    .chat-bubble.outgoing { color: #1A3A2B !important; }
    .chat-bubble-user     { background: var(--primary) !important; color: var(--surface) !important; }
    .chat-bubble-bot      { background: var(--bg-subtle) !important; color: var(--tx-body) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: COMPETENCIA
    ═══════════════════════════════════════════════════ */
    #view-competencia p,
    #view-competencia [style*="color:var(--faint)"],
    #view-competencia [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: PROGRAMAR PUBLICACIÓN
    ═══════════════════════════════════════════════════ */
    #view-programador p,
    #view-programador [style*="color:var(--faint)"],
    #view-programador [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* Calendario drag & drop */
    #pub-cal-container [draggable="true"]:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); transform: scale(1.02); transition: all .15s; }
    #pub-cal-container [draggable="true"]:active { cursor: grabbing !important; opacity: .8; }
    #pub-cal-container td[data-cal-drop], #pub-cal-container div[data-cal-drop] { background: var(--primary-soft) !important; outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: 4px; }
    #pub-detail-modal { backdrop-filter: blur(4px); }

    /* ═══════════════════════════════════════════════════
       MÓDULO: CONFIGURACIÓN
    ═══════════════════════════════════════════════════ */
    #view-settings p,
    #view-settings [style*="color:var(--faint)"],
    #view-settings [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }
    #view-settings label { color: var(--tx-secondary) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: GESTIÓN USUARIOS
    ═══════════════════════════════════════════════════ */
    #view-usuarios p,
    #view-usuarios [style*="color:var(--faint)"],
    #view-usuarios [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: PERFIL DE EMPRESA
    ═══════════════════════════════════════════════════ */
    #view-perfil-empresa p { color: var(--tx-secondary) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: IMPORTAR DATOS
    ═══════════════════════════════════════════════════ */
    #view-importar p,
    #view-importar [style*="color:var(--faint)"],
    #view-importar [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: BACKUP
    ═══════════════════════════════════════════════════ */
    #view-backup p,
    #view-backup [style*="color:var(--faint)"],
    #view-backup [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: COMPRAS, BODEGAS, INSUMOS, OC
    ═══════════════════════════════════════════════════ */
    #view-compras-bodegas p,
    #view-compras-bodegas [style*="color:var(--faint)"],
    #view-compras-bodegas [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: IMPORTACIONES
    ═══════════════════════════════════════════════════ */
    #view-importaciones .imp-field-label { color: var(--tx-secondary) !important; }
    #view-importaciones .imp-field-val   { color: var(--tx-body) !important; }
    #view-importaciones p,
    #view-importaciones [style*="color:var(--faint)"],
    #view-importaciones [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: AGENTE IA — fondo oscuro (mantener)
       Solo se corrigen textos que quedan ilegibles
    ═══════════════════════════════════════════════════ */
    #view-agent { background: linear-gradient(180deg,#0D1117 0%,var(--ink) 100%); border-radius: 16px; }
    /* Panel de estado de agentes — refuerzo de legibilidad */
    #view-agent h1, #view-agent h2, #view-agent h3 { color: var(--bg-page) !important; }
    #view-agent p   { color: var(--faint) !important; }
    #view-agent label { color: var(--line-strong) !important; }
    /* Botones de acción del agente — visibilidad */
    #view-agent button:not([style*="background"]) {
      color: var(--bg-subtle);
    }
    /* Log de actividad — texto visible */
    #view-agent .enterprise-table th { color: var(--faint) !important; background: rgba(255,255,255,.05) !important; }
    #view-agent .enterprise-table td { color: var(--line) !important; border-color: rgba(255,255,255,.06) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: ANALYTICS & BI — fondo oscuro
       Los overrides existentes se mantienen, solo refuerzos
    ═══════════════════════════════════════════════════ */
    /* Ya cubierto por reglas existentes #view-dashboard-bi */

    /* ═══════════════════════════════════════════════════
       MODALES — consistencia visual
    ═══════════════════════════════════════════════════ */
    .modal-box { max-height: 90vh; overflow-y: auto; }
    .modal-body { padding: 24px; }
    .modal-header { background: var(--primary) !important; }
    .modal-header h3 { color: var(--surface) !important; font-size: 14px; }
    /* Botón de cierre en modal */
    .modal-header button { color: rgba(255,255,255,.85) !important; }
    .modal-header button:hover { color: var(--surface) !important; }

    /* ═══════════════════════════════════════════════════
       FORMULARIOS — inputs, selects, labels
    ═══════════════════════════════════════════════════ */
    .form-input {
      color: var(--tx-body) !important;
      background: var(--surface) !important;
      border-color: var(--bdr) !important;
      font-size: 13px;
    }
    .form-input:focus { border-color: var(--bdr-focus) !important; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
    .form-input::placeholder { color: var(--faint) !important; }
    .form-select { color: var(--tx-body) !important; }
    /* Campos requeridos — asterisco rojo */
    [required] + .form-label::after,
    .form-label[data-required]::after { content: " *"; color: var(--danger); }

    /* ═══════════════════════════════════════════════════
       TOASTS — visibilidad y contraste
    ═══════════════════════════════════════════════════ */
    .toast { font-size: 13px !important; font-weight: 600 !important; }
    .toast.success { background: var(--success-text) !important; color: var(--success-soft) !important; }
    .toast.error   { background: var(--danger) !important; color: var(--danger-soft) !important; }
    .toast.warn    { background: var(--warning-text) !important; color: var(--warning-soft) !important; }
    .toast.info    { background: #1E3A5F !important; color: var(--primary-soft) !important; }

    /* ═══════════════════════════════════════════════════
       FEEDBACK — spinners y estados de carga
    ═══════════════════════════════════════════════════ */
    .loading-data { opacity: .55; pointer-events: none; }
    /* Spinner visible mientras carga */
    .spinner-overlay {
      display: flex; align-items: center; justify-content: center;
      min-height: 100px; color: var(--primary); font-size: 24px;
    }

    /* ═══════════════════════════════════════════════════
       ACCIONES DESTRUCTIVAS — botones de eliminar/anular
    ═══════════════════════════════════════════════════ */
    button[onclick*="eliminar"], button[onclick*="delete"],
    button[onclick*="anular"], button[onclick*="borrar"] {
      /* Se mantienen los colores del diseño original */
    }

    /* ═══════════════════════════════════════════════════
       FILTROS Y BÚSQUEDA — consistencia
    ═══════════════════════════════════════════════════ */
    /* Buscadores — texto legible */
    input[type="search"], input[placeholder*="Buscar"], input[placeholder*="buscar"],
    input[placeholder*="Filtrar"], input[placeholder*="filtrar"] {
      color: var(--tx-body) !important;
      background: var(--surface) !important;
    }
    input[type="search"]::placeholder { color: var(--faint) !important; }

    /* Botones de filtro activos */
    .inbox-filter-btn.active-filter,
    .imp-filtro-btn.active,
    .imp-filtro-btn:hover { color: var(--primary) !important; background: var(--primary-soft) !important; }

    /* ═══════════════════════════════════════════════════
       NAVEGACIÓN — sidebar y topbar
    ═══════════════════════════════════════════════════ */
    /* Grupo labels en sidebar — en estado colapsado eran invisibles (scoped a #sidebar, oculto en Phase 2) */
    #sidebar .nav-group-label { color: var(--muted) !important; }
    #sidebar .nav-group-label:hover { color: var(--faint) !important; }
    /* Botón activo en sidebar — texto más brillante */
    .nav-btn.active-nav-btn { color: var(--primary-border) !important; }

    /* ═══════════════════════════════════════════════════
       SECCIÓN: COMPARE / DELTA LABELS
    ═══════════════════════════════════════════════════ */
    .compare-vs  { color: var(--muted) !important; }
    .section-divider span { color: var(--muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: PROVEEDORES
    ═══════════════════════════════════════════════════ */
    [id*="proveed"] p,
    [id*="proveed"] [style*="color:var(--faint)"],
    [id*="proveed"] [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: INSUMOS
    ═══════════════════════════════════════════════════ */
    [id*="insumo"] p,
    [id*="insumo"] [style*="color:var(--faint)"],
    [id*="insumo"] [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       MÓDULO: DESPACHOS & ENVÍOS
    ═══════════════════════════════════════════════════ */
    [id*="despach"] p,
    [id*="despach"] [style*="color:var(--faint)"],
    [id*="despach"] [style*="color:var(--muted)"] { color: var(--tx-muted) !important; }

    /* ═══════════════════════════════════════════════════
       FORMATO DE FECHAS Y MONEDAS — consistencia
       Nota: ya existen helpers JS — estas reglas son estéticas
    ═══════════════════════════════════════════════════ */
    /* Valores monetarios — siempre peso oscuro, tabular */
    [class*="cop"], [class*="valor-cop"], td[data-type="money"] {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      color: var(--tx-body);
    }

    /* ═══════════════════════════════════════════════════
       INSIGHT PANELS — texto legible
    ═══════════════════════════════════════════════════ */
    .insight-col p { color: var(--ink) !important; }
    .insight-col.success h4 { color: var(--success-text) !important; }
    .insight-col.danger  h4 { color: var(--danger) !important; }
    .insight-col.warning h4 { color: var(--warning) !important; }
    .insight-col.action  h4 { color: var(--primary) !important; }

    /* ═══════════════════════════════════════════════════
       QUICK ACTIONS — visibilidad del texto
    ═══════════════════════════════════════════════════ */
    .quick-action { color: var(--tx-secondary) !important; }
    .quick-action:hover { color: var(--primary) !important; }

    /* ═══════════════════════════════════════════════════
       RESPONSIVO — ajustes de contraste en mobile
    ═══════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .enterprise-table th,
      .enterprise-table td { font-size: 12px !important; padding: 10px 12px !important; }
      .kpi-value { font-size: 18px !important; }
      .modal-body { padding: 16px !important; }
    }

    /* ═══════════════════════════════════════════════════
       CORRECCIÓN CRÍTICA: duplicado view-tesoreria
       El segundo bloque tiene id duplicado — ocultar via CSS
       (la corrección estructural requiere edición del HTML)
    ═══════════════════════════════════════════════════ */
    /* El JS de navegación usará el primer elemento, el segundo queda oculto */
    /* Manejado en el script de corrección abajo */

    /* ═══════════════════════════════════════════════════
       EMPTY STATES — mensajes cuando no hay datos
    ═══════════════════════════════════════════════════ */
    .empty-state {
      text-align: center; padding: 48px 24px; color: var(--tx-muted);
    }
    .empty-state i { font-size: 40px; color: var(--line); margin-bottom: 12px; display: block; }
    .empty-state p { font-size: 14px; color: var(--tx-muted); margin: 0; }

    /* ═══════════════════════════════════════════════════
       CONFIRMACIÓN ACCIONES DESTRUCTIVAS — estilo
    ═══════════════════════════════════════════════════ */
    .confirm-modal-body {
      padding: 24px; text-align: center;
    }
    .confirm-modal-icon {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--danger-soft); color: var(--danger);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; margin: 0 auto 16px;
    }
    .confirm-modal-title {
      font-size: 16px; font-weight: 700; color: var(--tx-primary); margin-bottom: 8px;
    }
    .confirm-modal-desc {
      font-size: 13px; color: var(--tx-muted); line-height: 1.6;
    }

    /* ═══════════════════════════════════════════════════
       ACCESIBILIDAD — focus visible para teclado
    ═══════════════════════════════════════════════════ */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    /* ═══════════════════════════════════════════════════
       MÓDULO AGENTE IA — Panel de estado mejorado
       (refuerza el panel existente con mejor contraste)
    ═══════════════════════════════════════════════════ */
    #agent-status-panel {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px; padding: 20px;
    }
    .agent-card {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px; padding: 16px;
      margin-bottom: 10px;
    }
    .agent-card h4 { color: var(--bg-subtle) !important; font-size: 14px; font-weight: 700; }
    .agent-card p  { color: var(--faint) !important; font-size: 12px; margin: 4px 0 0; }
    .agent-status-dot {
      width: 9px; height: 9px; border-radius: 50%;
      display: inline-block; margin-right: 6px;
    }
    .agent-status-dot.active  { background: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
    .agent-status-dot.paused  { background: var(--warning); }
    .agent-status-dot.error   { background: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,.25); }
    .agent-log-entry {
      font-size: 12px; color: var(--faint);
      padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06);
      display: flex; gap: 10px; align-items: flex-start;
    }
    .agent-log-time { color: var(--muted); white-space: nowrap; font-size: 11px; }
    .agent-log-text { color: var(--line-strong); flex: 1; }

    /* ═══════════════════════════════════════════════════
       OVERRIDE ESPECÍFICO: texto gris sobre fondo blanco
       Casos críticos encontrados en el audit
    ═══════════════════════════════════════════════════ */

    /* Topbar — badge de cliente y tipo */
    #topbar-client-badge { color: var(--muted) !important; font-size: 9px; }
    #client-active-type  { color: var(--muted) !important; }

    /* Subtítulos genéricos de módulo (p debajo del h1) */
    .view-section > div:first-child p:first-of-type { color: var(--tx-muted); }

    /* Descripción debajo del h1 en cada módulo */
    .view-section h1 + p { color: var(--tx-muted) !important; }

    /* Textos de labels de 9px en tableheads inline */
    th[style*="color:var(--muted)"] { color: var(--body) !important; }
    th[style*="color:var(--faint)"] { color: var(--body) !important; }

    /* Spans auxiliares en filtros/alertas */
    span[style*="color:var(--muted)"]:not([class]) { color: var(--tx-muted) !important; }
    span[style*="color:var(--faint)"]:not([class]) { color: var(--tx-muted) !important; }

    /* Placeholders de iconos search */
    i[style*="color:var(--faint)"] { color: var(--muted) !important; }
    i[style*="color:var(--muted)"] { color: var(--muted) !important; }

    /* Fuente monoespaciada para valores monetarios en tablas */
    .enterprise-table td[data-cop],
    .enterprise-table td:has(> span[data-cop]) {
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    /* ═══════════════════════════════════════════════════
       BADGES DE ESTADO — semántica consistente
       Garantiza que independientemente del módulo,
       los estados siempre usen los mismos colores
    ═══════════════════════════════════════════════════ */

    /* Colores semánticos globales de estado */
    .badge-activo, .estado-activo, [data-estado="activo"],
    .pill-activo { background:var(--success-border) !important; color:var(--success-text) !important; }

    .badge-inactivo, .estado-inactivo, [data-estado="inactivo"],
    .pill-inactivo { background:var(--bg-subtle) !important; color:var(--body) !important; }

    .badge-pausado, .estado-pausado, [data-estado="pausado"],
    .pill-pausado { background:var(--warning-border) !important; color:var(--warning-text) !important; }

    .badge-pendiente, .estado-pendiente, [data-estado="pendiente"],
    .pill-pendiente { background:var(--warning-border) !important; color:var(--warning-text) !important; }

    .badge-aprobado, .estado-aprobado, [data-estado="aprobado"],
    .pill-aprobado { background:var(--success-border) !important; color:var(--success-text) !important; }

    .badge-rechazado, .estado-rechazado, [data-estado="rechazado"],
    .pill-rechazado { background:var(--danger-soft) !important; color:var(--danger) !important; }

    .badge-completado, .estado-completado, [data-estado="completado"],
    .pill-completado { background:var(--success-border) !important; color:var(--success-text) !important; }

    .badge-cancelado, .estado-cancelado, [data-estado="cancelado"],
    .pill-cancelado { background:var(--danger-soft) !important; color:var(--danger) !important; }

    .badge-vencido, .estado-vencido, [data-estado="vencido"],
    .pill-vencido { background:var(--danger-soft) !important; color:var(--danger) !important; }

    .badge-borrador, .estado-borrador, [data-estado="borrador"],
    .pill-borrador { background:var(--bg-subtle) !important; color:var(--muted) !important; }

    /* Todos los badges de estado — texto siempre legible */
    [class*="badge-"], [class*="estado-"], [class*="pill-"] {
      font-weight: 700 !important;
      font-size: 11px !important;
    }

    /* ═══════════════════════════════════════════════════
       TOAST — botón de cierre
    ═══════════════════════════════════════════════════ */
    .toast { display: flex; align-items: center; }
    .toast button { 
      background: none; border: none; color: inherit;
      font-size: 16px; cursor: pointer; margin-left: 8px;
      opacity: .75; padding: 0 2px; line-height: 1;
      flex-shrink: 0;
    }
    .toast button:hover { opacity: 1; }

    /* ═══════════════════════════════════════════════════
       FORMULARIOS — campos requeridos
    ═══════════════════════════════════════════════════ */
    /* Asterisco rojo en labels de campos requeridos */
    .form-label.required::after,
    label.required::after { 
      content: ' *'; color: var(--danger); font-weight: 700; 
    }
    /* Input inválido */
    .form-input:invalid:not(:placeholder-shown) {
      border-color: var(--danger) !important;
    }
    .form-input.input-error { 
      border-color: var(--danger) !important;
      box-shadow: 0 0 0 3px rgba(239,68,68,.1);
    }
    .input-error-msg {
      font-size: 11px; color: var(--danger); margin-top: 4px;
      display: flex; align-items: center; gap: 4px;
    }
    .input-error-msg::before { content: '⚠ '; }

    /* ═══════════════════════════════════════════════════
       SPINNERS DE CARGA — visibilidad
    ═══════════════════════════════════════════════════ */
    .skeleton {
      background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--line) 50%, var(--bg-subtle) 75%);
      background-size: 200% 100%;
      animation: skeleton-wave 1.4s infinite;
      border-radius: 6px;
    }
    @keyframes skeleton-wave {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .skeleton-text { height: 14px; margin: 6px 0; }
    .skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
    .skeleton-row { height: 44px; margin: 4px 0; }

    /* ═══════════════════════════════════════════════════
       NAVEGACIÓN — breadcrumb / indicador de sección
    ═══════════════════════════════════════════════════ */
    #topbar-title {
      font-size: 15px !important;
      font-weight: 800 !important;
      color: var(--ink) !important;
    }

    /* ═══════════════════════════════════════════════════
       ACCESIBILIDAD — skip link (teclado)
    ═══════════════════════════════════════════════════ */
    .skip-link {
      position: absolute; top: -40px; left: 0;
      background: var(--primary); color: var(--surface);
      padding: 8px 16px; z-index: 10000;
      border-radius: 0 0 8px 0; font-size: 13px;
      transition: top .2s;
    }
    .skip-link:focus { top: 0; }

    /* ═══════════════════════════════════════════════════
       MÓDULO AGENTE IA — estado con animación
    ═══════════════════════════════════════════════════ */
    @keyframes pulse-active {
      0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
      50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
    }
    .agent-dot-active {
      animation: pulse-active 2s infinite;
    }

    /* ═══════════════════════════════════════════════════
       TABLAS — hover mejorado con cursor pointer
       cuando las filas son clicables
    ═══════════════════════════════════════════════════ */
    .enterprise-table tbody tr[onclick],
    .enterprise-table tbody tr[data-href] {
      cursor: pointer;
    }
    .enterprise-table tbody tr[onclick]:hover td,
    .enterprise-table tbody tr[data-href]:hover td {
      background: var(--primary-soft) !important;
    }

    /* ═══════════════════════════════════════════════════
       MODAL — animación de entrada mejorada
    ═══════════════════════════════════════════════════ */
    .modal-overlay.active .modal-box {
      animation: modalIn .25s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes modalIn {
      from { opacity: 0; transform: scale(.94) translateY(8px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* ═══════════════════════════════════════════════════
       INPUTS — mejoras de UX táctil
    ═══════════════════════════════════════════════════ */
    input[type="date"],
    input[type="time"],
    input[type="number"] {
      color: var(--tx-body) !important;
    }
    /* Placeholder de date inputs */
    input[type="date"]:not(:focus):not([value]) {
      color: var(--faint) !important;
    }

  
/* ── RESPONSIVE MÓVIL — fixes quirúrgicos ────────────────────── */
/* Asegurar scroll horizontal en TODAS las tablas enterprise */
.scrollbar-hide, [class*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }

/* Topbar: en pantallas muy pequeñas, reducir padding y gap */
@media(max-width:480px) {
  header { padding: 0 10px !important; }
  #topbar-title { font-size: 13px !important; }
  #active-period { display: none !important; }
}

/* Tablas en móvil — forzar scroll horizontal en el contenedor padre */
@media(max-width:600px) {
  .enterprise-table { min-width: 480px; font-size: 11px; }
  .enterprise-table th, .enterprise-table td { padding: 8px 8px !important; white-space: nowrap; }
  /* Los wrappers de tablas que tienen overflow:hidden deben permitir scroll horizontal */
  div[style*="overflow:hidden"] > .enterprise-table,
  div[style*="overflow:hidden"] > table { min-width: 480px; }
}

/* Modal inner — asegurar que no se salga de pantalla */
@media(max-width:600px) {
  /* Los modales dinámicos creados con _mkModal */
  #modal-bom-items > div > div,
  #modal-bom-rutas > div > div,
  #modal-op-consumo > div,
  #modal-op-horas > div,
  #modal-subproductos > div,
  #modal-costos-est > div > div,
  #modal-abc > div > div,
  #modal-eficiencia > div > div,
  #modal-wbs > div > div,
  #modal-auditoria > div > div,
  #modal-etapas > div > div,
  #modal-compartir-op > div {
    max-width: 100% !important;
    margin: 0 8px;
    border-radius: 12px;
  }
  /* Grids dentro de modales — colapsar a 1 columna en pantallas muy pequeñas */
  #modal-bom-rutas div[style*="grid-template-columns"],
  #modal-op-consumo div[style*="grid-template-columns"],
  #modal-op-horas div[style*="grid-template-columns"],
  #modal-subproductos div[style*="grid-template-columns"],
  #modal-etapas div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* KPI cards — asegurar que siempre quepan al menos 2 por fila */
@media(max-width:480px) {
  .kpi-card { min-width: 140px; }
}

/* Botones de acción en tablas — reducir padding en móvil */
@media(max-width:600px) {
  .enterprise-table td button { padding: 4px 6px !important; font-size: 10px !important; }
}

/* main-scroll — sin padding lateral en móvil muy pequeño */
@media(max-width:380px) {
  #main-scroll { padding: 10px !important; }
}

/* Los paneles de producción — scroll horizontal */
#costeo-panel-produccion { overflow: auto; }
#op-panel-lista, #op-panel-bom, #op-panel-centros, #op-panel-mrp { overflow: auto; }

/* Portal operario — siempre 100% en móvil */
#portal-loading, #portal-form { max-width: 100% !important; }

/* Sidebar en móvil — asegurar que el contenido no desborde */
@media(max-width:768px) {
  .sidebar { max-width: 260px; }
}