/* ── Tema (Ajustes → Integraciones) ─────────────────────────
     Los números son "R G B" sin comas, el formato que pide rgb(var(..)
     / <alpha-value>). El set de abajo (:root, sin atributo) reproduce
     exactamente la escala slate de Tailwind más el 950 propio del
     proyecto (#0F0E0B) — es decir, el oscuro de siempre, intacto.
     El de [data-theme="light"] la invierte: los fondos oscuros pasan a
     ser blancos/grises clarísimos y el texto claro pasa a ser oscuro. */
  :root, :root[data-theme="dark"] {
    /* Valores de ZINC, salvo los dos fondos: 950 es el negro de la app
       y 900 el casi-negro de sidebar, navbar y tarjetas. */
    /* "Negro total" (2026-10-31): grises neutros, sin tinte */
    --slate-50:  255 255 255;
    --slate-100: 250 250 250;
    --slate-200: 232 232 232;
    --slate-300: 212 212 212;
    --slate-400: 180 180 180;
    --slate-500: 150 150 150;
    --slate-600: 115 115 115;
    --slate-700: 52 52 52;
    --slate-800: 38 38 38;
    --slate-900: 22 22 22;      /* tarjetas */
    --slate-950: 10 10 10;      /* fondo */
  }
  :root[data-theme="light"] {
    /* "Blanco y negro" (2026-10-31), como la página: fondo casi blanco, tarjetas blancas, tinta negra */
    --slate-950: 250 250 250;   /* fondo general de la app */
    --slate-900: 255 255 255;   /* tarjetas y paneles */
    --slate-800: 244 244 245;   /* superficies secundarias, inputs, bordes suaves */
    --slate-700: 228 228 231;   /* bordes marcados y anillos de avatar */
    --slate-600: 161 161 170;   /* texto muy apagado / placeholders */
    --slate-500: 113 113 122;   /* texto apagado */
    --slate-400: 82 82 91;      /* texto secundario */
    --slate-300: 63 63 70;      /* texto de cuerpo */
    --slate-200: 39 39 42;      /* texto fuerte */
    --slate-100: 10 10 10;      /* títulos */
    --slate-50:  0 0 0;
  }
  html,body{ background: rgb(var(--slate-950)); }

  /* Los chips de estado (Aprobado/Pendiente/Rechazado, el kill switch de
     pago, las alertas de límite, etc.) usan un texto "claro" de la
     escala de cada color — pensado para leerse sobre su propio fondo
     traslúcido en un panel OSCURO. La variable de slate no los toca
     (son amber/red/violet/rose/sky/emerald, no slate), así que en claro
     quedan un tono pastel sobre un fondo casi blanco: ilegibles. Estos
     seis son los que de verdad se usan así en el archivo. */
  :root[data-theme="light"] .text-amber-300   { color: #8A672A; }
  :root[data-theme="light"] .text-red-300     { color: #7A2E28; }
  :root[data-theme="light"] .text-violet-300  { color: #4B463C; }
  :root[data-theme="light"] .text-rose-300    { color: #7A2E28; }
  :root[data-theme="light"] .text-sky-300     { color: #354355; }
  :root[data-theme="light"] .text-emerald-300 { color: #2F5A44; }

  /* La "Zona de riesgo" y los modales de borrado definitivo apilan
     capas de rojo muy oscuro a baja opacidad (tarjeta, ícono, botón)
     para que se note la jerarquía entre ellas sobre un fondo OSCURO.
     Sobre blanco, esas mismas capas se ven todas igual de un rosado
     turbio y pierden la separación. Se mantienen dos niveles —
     tarjeta/borde más clara, ícono/botón más marcado — para no perder
     esa jerarquía, con texto rojo bien oscuro para que se lea. */
  :root[data-theme="light"] .bg-red-950\/10,
  :root[data-theme="light"] .bg-red-950\/20,
  :root[data-theme="light"] .bg-red-950\/25,
  :root[data-theme="light"] .bg-red-950\/30 { background-color: rgba(122,46,40,.07); }
  :root[data-theme="light"] .bg-red-950\/40,
  :root[data-theme="light"] .bg-red-950\/50,
  :root[data-theme="light"] .bg-red-900\/40 { background-color: rgba(122,46,40,.14); }
  :root[data-theme="light"] .border-red-900\/30,
  :root[data-theme="light"] .border-red-900\/40,
  :root[data-theme="light"] .border-red-900\/50,
  :root[data-theme="light"] .border-red-900\/60,
  :root[data-theme="light"] .border-red-800\/60 { border-color: rgba(220,38,38,.35); }
  :root[data-theme="light"] .text-red-300\/80 { color: rgba(185,28,28,.85); }
  /* ── Etiquetas del menú en una sola línea ──────────────────
     setView() reescribe la clase del botón en cada render, así que
     esto va por CSS y no como clases de Tailwind en el HTML. */
  #sidebar .nav-item            { gap: .625rem; }
  #sidebar .nav-item > span     { white-space: nowrap; }

  /* ── Barra lateral colapsable ──────────────────────────────
     Los selectores llevan body.sb-min adelante para ganarle en
     especificidad a las clases de Tailwind sin usar !important. */
  #sidebar { transition: width .3s ease, transform .3s ease; }
  #appMain { transition: padding-left .3s ease; }
  @media (min-width: 1024px){
    body.sb-min #sidebar { width: 4.5rem; }
    body.sb-min #appMain { padding-left: 4.5rem; }
  }
  body.sb-min .sb-txt           { display: none; }
  body.sb-min .nav-item         { justify-content: center; gap: 0; padding-left: .5rem; padding-right: .5rem; }
  body.sb-min .nav-item > span  { display: none; }
  body.sb-min #sidebar nav      { padding-left: .5rem; padding-right: .5rem; }
  body.sb-min #dbStatus         { justify-content: center; padding-left: 0; padding-right: 0; }
  body.sb-min #dbStatus > div   { display: none; }
  body.sb-min #usoBox           { display: none; }
  body.sb-min #sideAvatar + div { display: none; }
  /* La tarjeta de sesión se apila para que entre en el ancho reducido */
  body.sb-min #sidebar > div:last-child        { padding-left: .5rem; padding-right: .5rem; }
  body.sb-min #sidebar div:has(> #sideAvatar)  { flex-direction: column; gap: .5rem; padding: .5rem; }
  /* Los rótulos de sección se vuelven una línea divisoria */
  body.sb-min #sidebar nav > p  { height: 1px; padding: 0; margin: .75rem .5rem; overflow: hidden; font-size: 0; background: rgba(148,163,184,.16); }
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#28251F;border-radius:99px}
  ::-webkit-scrollbar-thumb:hover{background:#3A362E}
  .no-sb::-webkit-scrollbar{display:none}
  .chat-bg{
    background-color:#12110D;
    background-image:radial-gradient(rgba(148,163,184,.07) 1px, transparent 1px);
    background-size:22px 22px;
  }
  .drag-over{outline:2px dashed #5A5447; outline-offset:-4px; background:rgba(122,115,100,.06)}
  .dragging{opacity:.35; transform:rotate(1.5deg)}
  /* Un lead descartado sigue a la vista y se puede arrastrar de vuelta,
     pero apagado: no debería competir por la atención del asesor con un
     lead que sigue en juego. Al pasar el mouse recupera el color. */
  [data-stage="perdido"] > article{opacity:.55; filter:saturate(.3); transition:opacity .2s ease, filter .2s ease}
  [data-stage="perdido"] > article:hover{opacity:1; filter:none}
  @keyframes pop{0%{transform:scale(.92) translateY(-10px);opacity:0}60%{transform:scale(1.02)}100%{transform:scale(1) translateY(0);opacity:1}}
  @keyframes glowpulse{0%,100%{box-shadow:0 0 0 1px rgba(63,115,86,.45), 0 0 22px -6px rgba(63,115,86,.55)}50%{box-shadow:0 0 0 1px rgba(63,115,86,.75), 0 0 32px -4px rgba(63,115,86,.85)}}
  .lead-new{animation:pop .45s cubic-bezier(.2,.9,.3,1.4) both, glowpulse 2s ease-in-out 1.5s infinite}
  .glow-blue{box-shadow:0 0 0 1px rgba(122,115,100,.35), 0 8px 30px -12px rgba(122,115,100,.55)} /* el nombre quedo, el color es violeta */
  input[type=range]{-webkit-appearance:none;height:4px;border-radius:99px;background:#28251F}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:99px;background:#5A5447;border:2px solid #12110D;cursor:pointer}