/* ════════════════════════════════════════════════════════════════════
   DISEÑO 2026 · "estudio"
   Lo que cambia el aspecto del CRM sin tocar la lógica:
     · barra lateral flotante: una píldora negra con íconos
     · tarjetas blancas sin borde, más redondeadas y con sombra suave
     · botones principales en píldora negra (en el tema claro)
     · acentos violeta puro y el Ghost como firma
   Va después de crm.css. Los selectores llevan :root o #id adelante
   para ganarle a las clases de Tailwind (que se inyectan después) sin
   usar !important.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --tinta: 16 14 23;                    /* el negro de la barra y los botones */
  --lavanda: 233 213 255;               /* el círculo del ítem activo */
  --acento: 168 85 247;                 /* violeta del indicador y los brillos */
  --sombra-tarjeta: 0 1px 2px rgba(10,10,10, .04), 0 12px 32px -18px rgba(10,10,10, .16);
  --sombra-flota: 0 24px 60px -24px rgba(16, 14, 23, .55);
}

/* ── Tipografía ─────────────────────────────────────────── */
:root body { font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; letter-spacing: -.005em; }
:root .font-mono { font-family: 'Geist Mono', ui-monospace, monospace; }
:root h1, :root h2 { letter-spacing: -.022em; }

/* ── Radios: todo un poco más redondo ───────────────────── */
:root .rounded-2xl { border-radius: 1.375rem; }
:root .rounded-xl  { border-radius: .875rem; }

/* ════════════════════════════════════════════════════════════
   BARRA LATERAL FLOTANTE
   Adentro de la barra los grises son siempre los del tema oscuro:
   la píldora es negra en los dos temas. Como las clases slate-* leen
   variables, alcanza con redefinirlas acá.
   ════════════════════════════════════════════════════════════ */
#sidebar {
  --slate-50: 250 250 250; --slate-100: 244 244 245; --slate-200: 228 228 231;
  --slate-300: 212 212 216; --slate-400: 161 159 170; --slate-500: 118 115 128;
  --slate-600: 86 83 96;    --slate-700: 64 61 74;    --slate-800: 38 35 47;
  --slate-900: var(--tinta); --slate-950: 9 8 13;
  color: #fff;
  border-right-color: transparent;
}
@media (min-width: 1024px) {
  :root #sidebar {
    top: 14px; bottom: 14px; left: 14px;
    width: 15.5rem;
    border-radius: 30px;
    border: 0;
    background: rgb(var(--tinta));
    box-shadow: var(--sombra-flota);
  }
  :root body.sb-min #sidebar { width: 76px; }
  :root #appMain              { padding-left: calc(15.5rem + 28px); }
  :root body.sb-min #appMain  { padding-left: 104px; }
}
@media (max-width: 1023.98px) {
  :root #sidebar { border-radius: 0 28px 28px 0; background: rgb(var(--tinta)); }
}

/* Encabezado de la barra: el Ghost suelto, sin caja */
:root #sidebar > div:first-child { border-bottom: 0; height: 76px; }
:root #sidebar > div:first-child > div:first-child { background: transparent; border: 0; box-shadow: none; }
:root #sidebar > div:first-child > div:first-child img { width: 34px; filter: drop-shadow(0 0 12px rgba(var(--acento), .55)); }
/* Estado de conexión: una línea, sin tarjeta */
:root #sidebar > div:nth-child(2) { background: rgba(255,255,255,.04); border-color: transparent; }

/* Ítems del menú */
:root #sidebar .nav-item { position: relative; border-radius: 999px; color: rgb(161 159 170); }
:root #sidebar .nav-item:not(.glow-blue):hover { background: rgba(255,255,255,.07); color: #fff; }
:root #sidebar .nav-item.glow-blue {
  background: rgb(var(--lavanda)); color: rgb(var(--tinta));
  border-color: transparent; box-shadow: none; font-weight: 600;
}
/* El toque GhostOps: una rayita violeta que brilla al costado del activo */
:root #sidebar .nav-item.glow-blue::before {
  content: ''; position: absolute; left: -9px; top: 50%;
  width: 4px; height: 18px; margin-top: -9px; border-radius: 99px;
  background: rgb(var(--acento)); box-shadow: 0 0 12px rgb(var(--acento));
}
:root #sidebar .nav-item.glow-blue > span[id^="cnt"] { background: rgba(16,14,23,.12); color: rgb(var(--tinta)); }

/* Barra contraída (la de siempre en escritorio): círculos centrados */
:root body.sb-min #sidebar > div:first-child {
  flex-direction: column; justify-content: center; height: auto; padding: 18px 0 8px; gap: 10px;
}
:root body.sb-min #sidebar > div:first-child #sbToggle { margin: 0; }
:root body.sb-min #sidebar > div:nth-child(2) { margin: 4px 18px 0; background: transparent; }
:root body.sb-min #sidebar nav { padding: 10px 0; }
:root body.sb-min #sidebar .nav-item {
  width: 44px; height: 44px; margin: 6px auto; padding: 0; justify-content: center;
}
:root body.sb-min #sidebar .nav-item.glow-blue::before { left: -16px; }
:root body.sb-min #sidebar nav > p { margin: 12px 22px; background: rgba(255,255,255,.08); }
:root body.sb-min #sidebar > div:last-child { padding: 10px 0 16px; }
:root body.sb-min #sidebar div:has(> #sideAvatar) { background: transparent; border: 0; }

/* Tooltip del menú contraído (lo posiciona 12-sidebar.js) */
#navTip {
  position: fixed; z-index: 120; pointer-events: none;
  padding: 6px 11px; border-radius: 9px;
  background: rgb(var(--tinta)); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease;
}
#navTip.on { opacity: 1; transform: none; }
:root[data-theme="dark"] #navTip { background: #fff; color: rgb(var(--tinta)); }

/* ════════════════════════════════════════════════════════════
   ENCABEZADO
   ════════════════════════════════════════════════════════════ */
:root #appMain > header { border-bottom: 0; height: 76px; }
:root #appMain > header .rounded-xl,
:root #appMain > header .rounded-lg { border-radius: 999px; }
:root #globalSearch { border-radius: 999px; }
/* El panel de la campana no es un botón: no va en píldora */
:root #appMain > header #notifPanel { border-radius: 20px; overflow: hidden; }
:root #appMain > header #notifPanel .rounded-full { border-radius: 999px; }

/* ════════════════════════════════════════════════════════════
   TEMA CLARO: tarjetas blancas sin borde, botones negros
   ════════════════════════════════════════════════════════════ */
:root[data-theme="light"] #appMain > header { background: rgb(var(--slate-950) / .78); }
:root[data-theme="light"] #appMain > header [class*="bg-slate-900"] { border-color: transparent; box-shadow: var(--sombra-tarjeta); }
:root[data-theme="light"] #globalSearch { border-color: transparent; box-shadow: var(--sombra-tarjeta); }

/* El total del pipeline: píldora negra, como el "Add member" de la referencia */
:root[data-theme="light"] #mPipeline {
  background: rgb(var(--tinta)); border-color: transparent; box-shadow: none;
}
:root[data-theme="light"] #mPipeline .text-slate-300 { color: rgba(255,255,255,.62); }
:root[data-theme="light"] #mPipeline svg { color: rgb(205 197 181); }

/* Tarjetas: blancas, sin borde, con sombra suave */
:root[data-theme="light"] #main [class*="bg-slate-900"][class*="border-slate-8"],
:root[data-theme="light"] [id$="ModalBody"],
:root[data-theme="light"] #slideOver,
:root[data-theme="light"] #notifPanel,
:root[data-theme="light"] #leadCtxMenu {
  border-color: transparent;
  box-shadow: var(--sombra-tarjeta);
}
:root[data-theme="light"] [id$="ModalBody"],
:root[data-theme="light"] #notifPanel { box-shadow: 0 30px 80px -30px rgba(10,10,10,.35); }

/* Fondos de modal: un velo lavanda en vez de negro */
:root[data-theme="light"] .bg-black\/70,
:root[data-theme="light"] .bg-black\/60 { background-color: rgba(10,10,10, .28); }

/* Botón principal: píldora negra. En oscuro sigue violeta. */
:root[data-theme="light"] .bg-brand { background-color: rgb(var(--tinta)); }
:root[data-theme="light"] .hover\:bg-brand:hover { background-color: rgb(var(--tinta)); }
:root[data-theme="light"] .hover\:bg-brand-700:hover { background-color: #2B2821; }
:root[data-theme="light"] .bg-brand.rounded-xl,
:root[data-theme="light"] .bg-brand.rounded-lg { border-radius: 999px; }
:root[data-theme="light"] .shadow-brand\/25,
:root[data-theme="light"] .shadow-brand\/20 { --tw-shadow-color: rgb(10 10 10 / .18); }

/* Textos violeta: en blanco necesitan un tono más profundo para leerse */
:root[data-theme="light"] .text-brand-300,
:root[data-theme="light"] .text-brand-400,
:root[data-theme="light"] .text-violet-400 { color: #4B463C; }
:root[data-theme="light"] .text-brand-500 { color: #2B2821; }

/* Chat y detalles */
:root[data-theme="light"] .chat-bg {
  background-color: #F2EDE3;
  background-image: radial-gradient(rgba(16,14,23,.055) 1px, transparent 1px);
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #CDC5B5; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #A79F8F; }
:root[data-theme="light"] input[type=range] { background: #E2DBCD; }
:root[data-theme="light"] input[type=range]::-webkit-slider-thumb { background: rgb(var(--tinta)); border-color: #fff; }
:root[data-theme="light"] .drag-over { outline-color: rgb(var(--acento)); background: rgba(122,115,100,.06); }
:root[data-theme="light"] .glow-blue:not(.nav-item) { box-shadow: 0 0 0 1px rgba(122,115,100,.3), 0 10px 30px -14px rgba(122,115,100,.55); }

/* ════════════════════════════════════════════════════════════
   INICIO (26-inicio.js)
   ════════════════════════════════════════════════════════════ */
.in-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, #E2DBCD 0%, #CDC5B5 46%, #F2EDE3 100%);
  color: rgb(var(--tinta));
}
:root[data-theme="dark"] .in-hero { background: linear-gradient(115deg, #1E1C17 0%, #28251F 50%, #16140F 100%); color: #fff; }
.in-hero .in-ghost {
  position: absolute; right: 2%; top: 50%; width: 210px; height: 196px; margin-top: -98px;
  animation: in-flota 5s ease-in-out infinite;
  filter: drop-shadow(0 18px 30px rgba(63,63,70, .35));
}
.in-hero .in-ghost svg { width: 100%; height: 100%; display: block; }
.in-hero .in-ghost .f-sombra { display: none; }
.in-hero .in-halo {
  position: absolute; right: -40px; top: -60px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0));
}
:root[data-theme="dark"] .in-hero .in-halo { background: radial-gradient(closest-side, rgba(122,115,100,.45), rgba(122,115,100,0)); }
@keyframes in-flota { 0%, 100% { transform: translateY(-6px) rotate(-2deg); } 50% { transform: translateY(8px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .in-hero .in-ghost { animation: none; } }

.in-dia { transition: background .15s ease, color .15s ease; }
.in-dia.hoy { background: rgb(var(--tinta)); color: #fff; }
:root[data-theme="dark"] .in-dia.hoy { background: #fff; color: rgb(var(--tinta)); }
.in-barra { border-radius: 14px; transition: height .6s cubic-bezier(.2,.8,.2,1); }
.in-oscura { background: rgb(var(--tinta)); color: #fff; }
:root[data-theme="dark"] .in-oscura { background: #fff; color: rgb(var(--tinta)); }

/* Textos de estado (tibio, hot) que en blanco quedaban muy claros */
:root[data-theme="light"] .text-amber-400  { color: #8A672A; }
:root[data-theme="light"] .text-orange-400 { color: #8A4A2B; }
:root[data-theme="light"] .text-wa         { color: #264A38; }
:root[data-theme="light"] .text-emerald-400 { color: #2F5A44; }

/* "Se pone blanco al pasar el mouse": en fondo claro desaparecía.
   Solo se mantiene blanco sobre superficies de color o en la barra. */
:root[data-theme="light"] .hover\:text-white:hover { color: rgb(var(--slate-100)); }
:root[data-theme="light"] #sidebar .hover\:text-white:hover,
:root[data-theme="light"] .hover\:text-white[class*="hover:bg-brand"]:hover,
:root[data-theme="light"] .hover\:text-white[class*="hover:bg-red-6"]:hover,
:root[data-theme="light"] .hover\:text-white[class*="hover:bg-rose-6"]:hover,
:root[data-theme="light"] .hover\:text-white[class*="hover:bg-emerald"]:hover,
:root[data-theme="light"] .hover\:text-white[class*="hover:bg-wa"]:hover,
:root[data-theme="light"] .bg-brand.hover\:text-white:hover { color: #fff; }

/* Bandeja: mensajes del Ghost y del asesor en lavanda, los del cliente en blanco */
:root[data-theme="light"] .bg-\[\#0F3D31\] {
  background-color: #E2DBCD; border-color: transparent; color: rgb(var(--slate-100));
}
:root[data-theme="light"] .bg-\[\#0F3D31\] [class*="text-emerald-200"] { color: rgb(var(--slate-500)); }
:root[data-theme="light"] .bg-\[\#0F3D31\] .text-emerald-50 { color: rgb(var(--slate-100)); }
:root[data-theme="light"] .bg-\[\#0F3D31\] .text-violet-300,
:root[data-theme="light"] .bg-\[\#0F3D31\] .text-violet-300\/80 { color: #4B463C; }
:root[data-theme="light"] .chat-bg .bg-slate-800\/90 {
  background-color: #fff; border-color: transparent; box-shadow: var(--sombra-tarjeta);
}

/* Tonos -200 pensados para leerse sobre oscuro (píldoras de la agenda,
   chips de estado): en el tema claro pasan a su versión profunda */
:root[data-theme="light"] .text-violet-200  { color: #2B2821; }
:root[data-theme="light"] .text-emerald-200 { color: #2F5A44; }
:root[data-theme="light"] .text-amber-200   { color: #6E5222; }
:root[data-theme="light"] .text-rose-200    { color: #652622; }
:root[data-theme="light"] .text-red-200     { color: #652622; }
:root[data-theme="light"] .text-sky-200     { color: #283240; }
:root[data-theme="light"] .text-fuchsia-300 { color: #5A5447; }
:root[data-theme="light"] .text-orange-300  { color: #8A4A2B; }
:root[data-theme="light"] .text-brand-200   { color: #2B2821; }

/* Barras "fuertes" de Inicio: negras en claro, blancas en oscuro */
:root { --barra-fuerte: rgb(10 10 10); }
:root[data-theme="dark"] { --barra-fuerte: #F2EDE3; }
/* En oscuro la píldora negra se perdía contra el fondo negro */
:root[data-theme="dark"] #sidebar { background: #15130F; box-shadow: 0 0 0 1px rgba(255,255,255,.07), var(--sombra-flota); }

/* Modo oscuro: el botón secundario del banner y las burbujas del Ghost en violeta */
:root[data-theme="dark"] .in-hero .bg-white\/60 { background: rgba(255,255,255,.12); color: #fff; }
:root[data-theme="dark"] .in-hero .bg-white\/60:hover { background: rgba(255,255,255,.2); }
:root[data-theme="dark"] .bg-\[\#0F3D31\] { background-color: #28251F; border-color: rgba(122,115,100,.28); }
:root[data-theme="dark"] .bg-\[\#0F3D31\] [class*="text-emerald-200"] { color: rgba(237,230,216,.55); }
:root[data-theme="dark"] .bg-\[\#0F3D31\] .text-emerald-50 { color: #F2EDE3; }

/* ════════════════════════════════════════════════════════════
   PULIDO "ESTILO APPLE"
   Menos bordes, menos color compitiendo, todo legible.
   ════════════════════════════════════════════════════════════ */

/* Menú contraído: que entren todos los ítems sin scroll */
:root body.sb-min #sidebar > div:nth-child(2) { display: none; }          /* el punto de conexión */
:root body.sb-min #sidebar > div:first-child { padding: 16px 0 4px; gap: 6px; }
:root body.sb-min #sidebar > div:first-child #sbToggle { width: 26px; height: 26px; opacity: .55; }
:root body.sb-min #sidebar > div:first-child #sbToggle:hover { opacity: 1; }
:root body.sb-min #sidebar nav { padding: 4px 0; }
:root body.sb-min #sidebar .nav-item { width: 42px; height: 42px; margin: 3px auto; }
:root body.sb-min #sidebar nav > p { margin: 8px 24px; }
:root body.sb-min #sidebar > div:last-child { padding: 6px 0 14px; }
:root body.sb-min #sidebar .nav-item svg { width: 19px; height: 19px; }
#sidebar nav { scrollbar-width: none; }
#sidebar nav::-webkit-scrollbar { display: none; }

/* Chips de color (HOT, TIBIO, Sofi IA, estados): sin borde, solo el tinte */
:root[data-theme="light"] [class*="border-wa/"][class*="bg-wa/"],
:root[data-theme="light"] [class*="border-amber-"][class*="bg-amber-"],
:root[data-theme="light"] [class*="border-brand/"][class*="bg-brand/"],
:root[data-theme="light"] [class*="border-violet-"][class*="bg-violet-"],
:root[data-theme="light"] [class*="border-emerald-"][class*="bg-emerald-"],
:root[data-theme="light"] [class*="border-sky-"][class*="bg-sky-"],
:root[data-theme="light"] [class*="border-rose-"][class*="bg-rose-"],
:root[data-theme="light"] [class*="border-slate-6"][class*="bg-slate-5"] { border-color: transparent; }

/* Tintes un poco más suaves y parejos en claro */
:root[data-theme="light"] .bg-wa\/10      { background-color: rgba(22,163,74,.09); }
:root[data-theme="light"] .bg-amber-400\/10 { background-color: rgba(217,119,6,.10); }
:root[data-theme="light"] .bg-brand\/10,
:root[data-theme="light"] .bg-brand\/15   { background-color: rgba(90,84,71,.09); }

/* Botones de peligro (cancelar plan, borrar): texto rojo sobre gris, no un bloque rosado */
:root[data-theme="light"] button:is([class^="bg-red-950"], [class*=" bg-red-950"], [class^="bg-rose-950"], [class*=" bg-rose-950"]),
:root[data-theme="light"] a:is([class^="bg-red-950"], [class*=" bg-red-950"]) { background-color: rgb(var(--slate-800)); border-color: transparent; color: #7A2E28; }
:root[data-theme="light"] button:is([class^="bg-red-950"], [class*=" bg-red-950"], [class^="bg-rose-950"], [class*=" bg-rose-950"]):hover { background-color: rgba(122,46,40,.12); }

/* Canal del equipo: mis mensajes en negro, como el resto de lo "mío" */
:root[data-theme="light"] .bg-brand\/90 { background-color: rgb(var(--tinta)); border-color: transparent; }
:root[data-theme="light"] .bg-brand\/90 .text-violet-100\/70 { color: rgba(255,255,255,.55); }

/* Tarjetas destacadas con degradé violeta: un lavanda limpio, sin borde */
:root[data-theme="light"] [class*="from-brand/"][class*="to-slate-900"] {
  background-image: linear-gradient(135deg, #F2EDE3, #FAF7F0 70%); border-color: transparent; box-shadow: var(--sombra-tarjeta);
}

/* Inputs y selects: grises suaves sin borde, foco violeta fino */
:root[data-theme="light"] #main input:not([type=range]):not([type=checkbox]):not([type=radio]),
:root[data-theme="light"] #main select,
:root[data-theme="light"] #main textarea,
:root[data-theme="light"] [id$="ModalBody"] input:not([type=range]):not([type=checkbox]):not([type=radio]),
:root[data-theme="light"] [id$="ModalBody"] select,
:root[data-theme="light"] [id$="ModalBody"] textarea { border-color: transparent; background-color: rgb(var(--slate-800)); }
:root[data-theme="light"] #main input:focus, :root[data-theme="light"] #main select:focus, :root[data-theme="light"] #main textarea:focus,
:root[data-theme="light"] [id$="ModalBody"] input:focus, :root[data-theme="light"] [id$="ModalBody"] select:focus,
:root[data-theme="light"] [id$="ModalBody"] textarea:focus { background-color: #fff; border-color: rgba(90,84,71,.45); box-shadow: 0 0 0 4px rgba(90,84,71,.10); }

/* Botones secundarios (Filtros, Exportar, Cancelar): píldora blanca sin borde */
:root[data-theme="light"] #main button[class*="border-slate-7"][class*="bg-slate-8"],
:root[data-theme="light"] #main button[class*="border-slate-8"][class*="bg-slate-9"],
:root[data-theme="light"] [id$="ModalBody"] button[class*="border-slate-7"][class*="bg-slate-8"] {
  border-color: transparent; background-color: #fff; box-shadow: 0 1px 2px rgba(10,10,10,.06), 0 0 0 1px rgba(10,10,10,.06);
}

/* Separadores internos más finos */
:root[data-theme="light"] .divide-slate-800 > * + *,
:root[data-theme="light"] .divide-slate-800\/80 > * + *,
:root[data-theme="light"] .divide-slate-800\/60 > * + * { border-color: rgba(10,10,10,.06); }
:root[data-theme="light"] .border-t.border-slate-800,
:root[data-theme="light"] .border-b.border-slate-800,
:root[data-theme="light"] [class*="border-t"][class*="border-slate-800/"],
:root[data-theme="light"] [class*="border-b"][class*="border-slate-800/"] { border-color: rgba(10,10,10,.07); }

/* Textos chicos: nunca más claros que el gris 500 sobre blanco */
:root[data-theme="light"] .text-slate-600 { color: rgb(124 119 138); }
:root[data-theme="light"] .text-slate-700 { color: rgb(146 141 160); }

/* Tipografía más fina en títulos, como en Apple */
:root h1.text-2xl, :root h1.text-\[22px\], :root h2.text-xl { font-weight: 700; letter-spacing: -.025em; }
:root .tabular-nums { font-feature-settings: "tnum" 1; }

:root[data-theme="light"] button:is([class*=" bg-rose-950"]) .text-rose-300, :root[data-theme="light"] button.text-rose-300:is([class*=" bg-rose-950"]) { color: #7A2E28; }
:root[data-theme="dark"] #appMain > header #notifPanel { background: #16140F; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px -20px rgba(0,0,0,.9); }

/* ════════════════════════════════════════════════════════════
   RESULTADOS (29-resultados.js)
   La tarjeta de arriba es oscura en los dos temas: es la "vidriera"
   de lo que hizo el Ghost.
   ════════════════════════════════════════════════════════════ */
.rs-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 100% 0%, #28251F 0%, #16140F 45%, #12110D 100%);
  box-shadow: var(--sombra-flota);
}
.rs-hero .rs-brillo {
  position: absolute; z-index: -1; right: -120px; top: -140px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(122,115,100,.55), rgba(122,115,100,0));
  animation: rs-respira 7s ease-in-out infinite;
}
.rs-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.rs-hero .rs-ghost {
  position: absolute; right: 30px; top: 22px; width: 92px; height: auto; opacity: .95;
  filter: drop-shadow(0 14px 24px rgba(122,115,100,.55)); animation: in-flota 5s ease-in-out infinite;
}
.rs-grad { background: linear-gradient(90deg, #E2DBCD, #A79F8F 45%, #A79F8F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rs-grad-osc { background: linear-gradient(90deg, #5A5447, #5A5447); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .rs-grad-osc { background-image: linear-gradient(90deg, #A79F8F, #A79F8F); }
.rs-pulso { width: 7px; height: 7px; border-radius: 50%; background: #6F9F82; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: rs-pulso 2s infinite; }
.rs-mini { border-radius: 18px; padding: 14px 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); }
.rs-mini-n { font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-mini-t { margin-top: 6px; font-size: 11px; line-height: 1.25; color: rgba(255,255,255,.55); }
@media (max-width: 480px) { .rs-mini { padding: 12px 9px; } .rs-mini-n { font-size: 18px; } }

.rs-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.rs-delta.bien { background: rgba(47,90,68,.14); color: #2F5A44; }
.rs-delta.mal  { background: rgba(122,46,40,.12); color: #7A2E28; }
.rs-delta.igual { background: rgba(120,113,140,.14); color: rgb(var(--slate-500, 118 115 128)); }
.rs-hero .rs-delta.bien { background: rgba(52,211,153,.16); color: #9DBFA8; }
.rs-hero .rs-delta.mal  { background: rgba(251,113,133,.16); color: #C98D84; }
:root[data-theme="dark"] .rs-delta.bien { color: #9DBFA8; }
:root[data-theme="dark"] .rs-delta.mal  { color: #C98D84; }

.rs-tile { box-shadow: var(--sombra-tarjeta); }
.rs-barra { border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #A79F8F, #7A7364); transform-origin: bottom; animation: rs-sube .7s cubic-bezier(.2,.8,.2,1) both; }
.rs-barra:hover { background: linear-gradient(180deg, #CDC5B5, #5A5447); }
.rs-crece { transform-origin: left; animation: rs-ancho .8s cubic-bezier(.2,.8,.2,1) both; }
.rs-celda { height: 18px; border-radius: 4px; background: rgba(120,113,140,.10); }
.rs-celda.fuera { background-image: repeating-linear-gradient(135deg, rgba(120,113,140,.18) 0 2px, transparent 2px 5px); }
.rs-esqueleto { background: linear-gradient(90deg, rgba(120,113,140,.10), rgba(120,113,140,.20), rgba(120,113,140,.10)); background-size: 200% 100%; animation: rs-brilla 1.3s linear infinite; }
.rs-cargando { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: #A79F8F; animation: spin 1s linear infinite; }

@keyframes rs-respira { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes rs-pulso { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
@keyframes rs-sube { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rs-ancho { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rs-brilla { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rs-hero .rs-brillo, .rs-hero .rs-ghost, .rs-barra, .rs-crece, .rs-pulso { animation: none; } }

/* ══════════ BUSCADOR GLOBAL (30-buscador.js) ══════════ */
#bgModal.hidden { display: none; }
#bgModal .bg-fondo { animation: bgFade .15s ease-out; }
#bgModal .bg-caja { animation: bgEntra .18s cubic-bezier(.2,.8,.2,1); }
@keyframes bgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bgEntra { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
#bgModal mark { color: inherit; }
.bg-kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px;
  border: 1px solid rgb(51 65 85 / .9); font: 600 10px/1 ui-sans-serif, system-ui, sans-serif; color: rgb(148 163 184); }
.bg-destacado { animation: bgDestello 1.8s ease-out; }
@keyframes bgDestello {
  0%, 35% { box-shadow: 0 0 0 2px rgb(122 115 100 / .85), 0 0 28px -4px rgb(122 115 100 / .6); }
  100% { box-shadow: 0 0 0 0 rgb(122 115 100 / 0); }
}
#globalSearch[readonly] { caret-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  #bgModal .bg-fondo, #bgModal .bg-caja, .bg-destacado { animation: none; }
}

/* ══════════ SEGURIDAD (31-seguridad.js) ══════════ */
.seg-hero { background: radial-gradient(120% 140% at 0% 0%, #1E1C17 0%, #13120E 45%, #0B0A08 100%); border: 1px solid rgb(122 115 100 / .35); }
.seg-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.seg-anillo { transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.seg-paso { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; background: rgb(122 115 100 / .18); color: #CDC5B5; font-size: 11px; font-weight: 700; }
.act-cambio { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 7px; border-width: 1px; font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-cambio s { text-decoration-color: rgb(100 116 139 / .7); }

/* ══════════ SEGUIMIENTO (34-seguimiento.js) ══════════ */
/* Colores que se leen en claro y en oscuro: el texto toma el tono del
   tema y el fondo es una veladura del color. */
.seg-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; }
.seg-chip-vio   { background: rgb(47 90 68 / .12); color: #2F5A44; border-color: rgb(47 90 68 / .25); }
.seg-chip-ahora { background: rgb(47 90 68 / .18); color: #2F5A44; border-color: rgb(47 90 68 / .45); }
.seg-chip-ambar { background: rgb(138 103 42 / .14); color: #8A672A; border-color: rgb(138 103 42 / .3); }
.seg-chip-rojo  { background: rgb(122 46 40 / .13); color: #7A2E28; border-color: rgb(122 46 40 / .3); }
:root[data-theme="dark"] .seg-chip-vio, :root[data-theme="dark"] .seg-chip-ahora { color: #9DBFA8; }
:root[data-theme="dark"] .seg-chip-ambar { color: #D6B36B; }
:root[data-theme="dark"] .seg-chip-rojo  { color: #C98D84; }
.seg-punto { width: 6px; height: 6px; border-radius: 999px; background: #3F7356; box-shadow: 0 0 0 0 rgb(47 90 68 / .6); animation: segLatido 1.6s ease-out infinite; }
@keyframes segLatido { 0% { box-shadow: 0 0 0 0 rgb(47 90 68 / .55); } 70% { box-shadow: 0 0 0 7px rgb(47 90 68 / 0); } 100% { box-shadow: 0 0 0 0 rgb(47 90 68 / 0); } }
.seg-ahora { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: #2F5A44; background: rgb(47 90 68 / .14); border-radius: 999px; padding: 2px 8px; }
.seg-ahora::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #3F7356; animation: segLatido 1.6s ease-out infinite; }
:root[data-theme="dark"] .seg-ahora { color: #9DBFA8; }
.seg-medidor { --p: 0; position: relative; width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
  background: conic-gradient(#3F7356 calc(var(--p) * 1%), rgb(var(--slate-800)) 0); display: grid; place-items: center; }
.seg-medidor::before { content: ''; position: absolute; inset: 5px; border-radius: 999px; background: rgb(var(--slate-900)); }
.seg-medidor span { position: relative; font-size: 12px; font-weight: 800; color: rgb(var(--slate-100)); font-variant-numeric: tabular-nums; }

/* A quién contactar hoy */
.hoy-card { background: rgb(var(--slate-900)); border: 1px solid rgb(var(--slate-800)); position: relative; overflow: hidden; }
.hoy-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #5A5447, #3F7356 60%, transparent); }
.hoy-icono { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; color: #fff;
  background: linear-gradient(135deg, #5A5447, #7A7364); box-shadow: 0 8px 20px -8px rgb(122 115 100 / .7); }
.hoy-num { width: 20px; flex-shrink: 0; padding-top: 10px; text-align: center; font-size: 12px; font-weight: 800; color: rgb(var(--slate-600)); font-variant-numeric: tabular-nums; }
.hoy-motivo { margin-top: 3px; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 500; color: rgb(var(--slate-300)); line-height: 1.35; }
.hoy-motivo i, .hoy-motivo svg { margin-top: 1px; }
.hoy-verde { color: #2F5A44; } .hoy-rojo { color: #7A2E28; } .hoy-naranja { color: #A4643A; } .hoy-ambar { color: #8A672A; }
:root[data-theme="dark"] .hoy-verde { color: #9DBFA8; } :root[data-theme="dark"] .hoy-rojo { color: #C98D84; }
:root[data-theme="dark"] .hoy-naranja { color: #D9A27E; } :root[data-theme="dark"] .hoy-ambar { color: #D6B36B; }
.hoy-btn { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: rgb(var(--slate-400));
  border: 1px solid rgb(var(--slate-800)); background: rgb(var(--slate-900)); transition: background .15s, color .15s, border-color .15s; }
.hoy-btn:hover { color: rgb(var(--slate-100)); border-color: rgb(var(--slate-700)); }
.hoy-btn-wa { background: #3F7356; border-color: #3F7356; color: #fff; }
.hoy-btn-wa:hover { background: #2F5A44; color: #fff; border-color: #2F5A44; }
.hoy-fila { transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .seg-punto, .seg-ahora::before { animation: none; } }

/* ══════════ NOTAS DE VOZ (35-notas-voz.js) ══════════ */
.nv-mic { position: relative; width: 84px; height: 84px; border-radius: 999px; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 30% 25%, #A79F8F, #5A5447 60%, #2B2821); box-shadow: 0 14px 34px -12px rgb(122 115 100 / .8);
  transition: transform .15s ease, background .2s ease; }
.nv-mic:hover { transform: scale(1.04); }
.nv-mic:active { transform: scale(.97); }
.nv-mic.grabando { background: radial-gradient(circle at 30% 25%, #C98D84, #7A2E28 60%, #652622); box-shadow: 0 14px 34px -12px rgb(225 29 72 / .8); }
.nv-mic.grabando::before, .nv-mic.grabando::after { content: ''; position: absolute; inset: 0; border-radius: 999px; border: 2px solid rgb(225 29 72 / .5); animation: nvOnda 1.8s ease-out infinite; }
.nv-mic.grabando::after { animation-delay: .9s; }
@keyframes nvOnda { from { transform: scale(1); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.nv-pensando { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #5A5447, #7A7364); animation: nvGira 2.4s ease-in-out infinite; box-shadow: 0 12px 30px -10px rgb(122 115 100 / .7); }
@keyframes nvGira { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(8deg) scale(1.06); } }
.nv-chip { display: inline-flex; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; }
.nv-chip-si { background: rgb(47 90 68 / .12); color: #2F5A44; border-color: rgb(47 90 68 / .25); }
.nv-chip-no { background: rgb(122 46 40 / .1); color: #7A2E28; border-color: rgb(122 46 40 / .25); }
:root[data-theme="dark"] .nv-chip-si { color: #9DBFA8; }
:root[data-theme="dark"] .nv-chip-no { color: #C98D84; }
.nv-interes { --i: 5; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; white-space: nowrap;
  background: linear-gradient(90deg, #5A5447 calc(var(--i) * 10%), rgb(122 115 100 / .45) 0); }
.nv-boton { color: #fff; background: linear-gradient(120deg, #5A5447, #5A5447 55%, #7A7364); box-shadow: 0 10px 26px -12px rgb(122 115 100 / .8);
  transition: transform .15s ease, box-shadow .15s ease; }
.nv-boton:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgb(122 115 100 / .9); }
.nv-boton-mic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: rgb(255 255 255 / .18); }
.hoy-btn-mic { background: rgb(122 115 100 / .12); border-color: rgb(122 115 100 / .3); color: #5A5447; }
.hoy-btn-mic:hover { background: #5A5447; color: #fff; border-color: #5A5447; }
@media (prefers-reduced-motion: reduce) { .nv-mic.grabando::before, .nv-mic.grabando::after, .nv-pensando { animation: none; } }

/* ════════════════════════════════════════════════════════════
   TEMA BLANCO Y NEGRO (2026-10-31) · el CRM se ve como la página
   Claro: "blanco y negro" · Oscuro: "negro total".
   El color principal (brand) cambia con el tema: negro en el claro y
   blanco en el oscuro, y los botones con fondo brand cambian el color
   de su texto para que siempre se lea.
   ════════════════════════════════════════════════════════════ */
:root, :root[data-theme="dark"] {
  --tinta: 0 0 0; --lavanda: 250 250 250; --acento: 250 250 250;
  --brand: 250 250 250; --brand-300: 212 212 212; --brand-400: 250 250 250;
  --brand-500: 229 229 229; --brand-600: 250 250 250; --brand-700: 212 212 212;
}
:root[data-theme="light"] {
  --tinta: 10 10 10; --lavanda: 255 255 255; --acento: 10 10 10;
  --brand: 10 10 10; --brand-300: 113 113 122; --brand-400: 24 24 27;
  --brand-500: 39 39 42; --brand-600: 10 10 10; --brand-700: 39 39 42;
}

/* Tipografía de la página: Inter para todo, Space Grotesk en los títulos */
:root body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; letter-spacing: -.003em; }
:root h1, :root h2, :root h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -.025em; }

/* En oscuro el botón principal es blanco: el texto va negro */
:root[data-theme="dark"] :is(.bg-brand, .bg-brand-500, .bg-brand-600, .bg-brand-700, .hover\:bg-brand:hover, .hover\:bg-brand-700:hover),
:root[data-theme="dark"] :is(.bg-brand, .bg-brand-600) :is(.text-white, i, svg, span) { color: #12110D; }
:root[data-theme="light"] .text-brand-300, :root[data-theme="light"] .text-brand-400, :root[data-theme="light"] .text-violet-400 { color: #1C1A15; }
:root[data-theme="light"] .text-brand-500 { color: #2B2821; }
:root[data-theme="light"] .hover\:bg-brand-700:hover { background-color: #2B2821; }

/* Ítem activo del menú: círculo blanco, sin brillo al costado */
:root #sidebar .nav-item.glow-blue::before { box-shadow: none; background: rgb(250 250 250); }
:root #sidebar .nav-item.glow-blue > span[id^="cnt"] { background: rgba(0,0,0,.1); }
:root #sidebar > div:first-child > div:first-child img { filter: none; }
:root .drag-over { background: rgba(122,115,100,.08); }

/* Portada de Inicio: un bloque negro, como la portada de la página */
:root .in-hero, :root[data-theme="dark"] .in-hero { background: radial-gradient(120% 140% at 0% 0%, #1E1C17 0%, #12110D 60%); color: #FAF7F0; }
:root[data-theme="dark"] .in-hero { box-shadow: inset 0 0 0 1px #28251F; }
:root .in-hero .in-halo, :root[data-theme="dark"] .in-hero .in-halo { background: none; }
:root .in-hero .in-ghost { filter: drop-shadow(0 18px 30px rgba(0,0,0,.4)); }

/* "A quién contactar hoy": sin la línea de colores, ícono negro */
:root .hoy-card::before { background: rgb(var(--tinta)); opacity: .9; }
:root[data-theme="dark"] .hoy-card::before { background: #3A362E; }
:root .hoy-icono { background: #12110D; box-shadow: none; }
:root[data-theme="dark"] .hoy-icono { box-shadow: inset 0 0 0 1px #333; }
/* Botones de la portada de Inicio sobre el negro: el principal blanco, los otros transparentes */
:root .in-hero .in-oscura { background: #FAF7F0; color: #12110D; }
:root .in-hero .bg-white\/60 { background: rgba(255,255,255,.1); color: #FAF7F0; }
:root .in-hero .bg-white\/60:hover { background: rgba(255,255,255,.18); }
/* La barra lateral es negra en los dos temas: adentro el color principal es siempre el blanco */
:root #sidebar { --brand: 250 250 250; --brand-300: 212 212 212; --brand-400: 250 250 250; --brand-500: 229 229 229; --brand-600: 250 250 250; --brand-700: 212 212 212; }
/* Color de los gráficos (lo elige cada usuario: grafSelectorHTML en 21-herramientas.js) */
:root { --graf: 161 161 170; }
.graf-barra { background-color: rgb(var(--graf)); }
.group:hover .graf-barra { background-color: rgb(var(--graf) / .8); }
:root .rs-barra { background: linear-gradient(180deg, rgb(var(--graf)), rgb(var(--graf) / .72)); }
:root .rs-barra:hover { background: rgb(var(--graf)); }
:root[data-theme="light"] #sidebar :is(.text-brand-300, .text-brand-400, .text-brand-500) { color: rgb(250 250 250); }
/* El ítem activo del menú es un círculo blanco: su ícono va negro (le gana a la regla de arriba) */
:root #sidebar .nav-item.glow-blue, :root #sidebar .nav-item.glow-blue :is(svg, i, span, .text-brand-300, .text-brand-400, .text-brand-500) { color: #12110D; }