/* ============================================================================
   LA CASA DE PORCELANA, ADENTRO DEL CRM (28-sep → 30-sep-2026)

   La capa que lleva adentro la línea de la entrada. Primero fue «la casa de cristal» del sitio
   (28-sep: arena, el dibujo de la casa, campos del sitio, títulos con su tramo menta). El 30-sep,
   al ver la entrada nueva —blanca, limpia, con las líneas del circuito—, el usuario pidió «ese
   mismo estilo y líneas en la UI del CRM» y decidió (ver la nota del proyecto):
     · TODO el CRM de una vez, con esta capa común;
     · de fondo, LAS LÍNEAS DEL CIRCUITO, quietas y tenues, en lugar del dibujo de la casa;
     · ETAPAS SOBRIAS (tinta y verdes, ámbar NO RESPONDE, coral PERDIDO) y «CLIENTE» en verde,
       sin dorado.

   LA LÍNEA: papel y arena, tinta y grafito, filetes de 1 px y sombras suaves; el verde del
   logotipo SOLO de acento —lo activo del menú, el botón principal, los datos que suben, lo
   nuevo—. Las fichas de ícono son de porcelana (como el sello de la entrada), no cuadros de
   colores. Lo seleccionado (pestañas, período, segmentos) va en tinta.

     1 · EL FONDO  2 · LOS CAMPOS  3 · LOS TÍTULOS  4 · LAS VENTANAS  5 · EL SALUDO Y EL LOGOTIPO
     6 · LA PORCELANA: tarjetas, fichas, menú, barra, botones, selección, tablas, etapas, avisos.
     7 · LA PORCELANA DE NOCHE: lo mismo en modo oscuro (30-sep: «en la versión oscura no cambió
         nada… corrige con la nueva interfaz»; la regla «el oscuro no se toca» del 2-sep quedó atrás).

   Sin dorado. Nada se mueve al cargar ni se alza al pasar. Con «equipo liviano» (body.sfv-lite)
   no va la trama.
   Reversible: quitar el <link>.
   ============================================================================ */

/* ── 1 · EL FONDO ──────────────────────────────────────────────────────────── */
body:not(.sfv-dark) {
  /* Sin halo de color en las tarjetas: la porcelana se asienta con sombra, no con resplandor. */
  --sect-glow: transparent;
  --sect-glow-hov: transparent;
  --sect-marco: #e6e7e3;
  /* Lo seleccionado (pestañas, período, segmentos, días): de turquesa a verde, con letra blanca
     (30-sep: «métele más color y vida»; antes fue tinta). */
  --sfv-activo: linear-gradient(135deg, #0f766e, #15803d);
  --sfv-activo-hover: linear-gradient(135deg, #0d6b63, #136f35);
}
body:not(.sfv-dark)::before {
  /* Arena con tres luces de color muy abiertas —menta arriba a la derecha, turquesa abajo a la
     izquierda, un celeste al fondo—: color y vida sin tapar nada (30-sep). */
  background:
    radial-gradient(900px 640px at 100% -6%, rgba(51, 210, 105, .13), rgba(51, 210, 105, 0) 62%),
    radial-gradient(900px 700px at -4% 104%, rgba(45, 212, 191, .14), rgba(45, 212, 191, 0) 60%),
    radial-gradient(800px 600px at 60% 110%, rgba(14, 165, 233, .07), rgba(14, 165, 233, 0) 60%),
    radial-gradient(1400px 1000px at 50% -10%, #ffffff, rgba(255, 255, 255, 0) 70%), #f6f7f5;
  filter: none; transform: none; opacity: 1;
}
/* Las líneas del circuito de la entrada (assets/img/circuito-fondo.svg, un mosaico que empalma
   por los cuatro lados; lo genera remotion-sfv/scripts/circuito-fondo.mjs). Fijas: no se mueven
   con la página. Tenues: textura, no dibujo; las tarjetas blancas las tapan. */
body:not(.sfv-dark)::after {
  content: ""; display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/circuito-fondo.svg?v=b63abfcdb0") 0 0 / 1200px 816px repeat;
  opacity: .075;
}
body.sfv-lite::after { display: none !important; }

/* ── 2 · LOS CAMPOS ────────────────────────────────────────────────────────── */
/* `background-color` y no `background`: los <select> dibujan su flecha con una imagen de fondo. */
body:not(.sfv-dark) .sfv-input,
body:not(.sfv-dark) .sfv-select,
body:not(.sfv-dark) .sfv-textarea,
body:not(.sfv-dark) .sfv-search,
body:not(.sfv-dark) .cl-search,
body:not(.sfv-dark) .sfv-topsearch {
  background-color: #f6f7f5; border-color: #e6e7e3; border-radius: 6px;
}
body:not(.sfv-dark) .sfv-input:hover, body:not(.sfv-dark) .sfv-select:hover, body:not(.sfv-dark) .sfv-textarea:hover,
body:not(.sfv-dark) .sfv-search:hover, body:not(.sfv-dark) .cl-search:hover, body:not(.sfv-dark) .sfv-topsearch:hover {
  border-color: #cfd6d0;
}
body:not(.sfv-dark) .sfv-input:focus, body:not(.sfv-dark) .sfv-select:focus, body:not(.sfv-dark) .sfv-textarea:focus,
body:not(.sfv-dark) .sfv-search:focus-within, body:not(.sfv-dark) .cl-search:focus-within, body:not(.sfv-dark) .sfv-topsearch:focus-within {
  background-color: #fff; border-color: #33d269; box-shadow: 0 0 0 1px #33d269;
}

/* ── 3 · LOS TÍTULOS ───────────────────────────────────────────────────────── */
/* Cabecera de tarjeta (ícono + título + bajada): un filete, y encima su tramo menta. */
body:not(.sfv-dark) .sfv-sec-head,
body:not(.sfv-dark) .dash-panel-head {
  position: relative; padding-bottom: 11px; border-bottom: 1px solid rgba(29, 29, 27, .08); margin-bottom: 14px;
}
body:not(.sfv-dark) .sfv-sec-head::after,
body:not(.sfv-dark) .dash-panel-head::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 32px; height: 2px; border-radius: 2px; background: #33d269;
}
/* Rótulos en mayúsculas: la raya menta delante, sin la franja ni el borde de antes. */
body:not(.sfv-dark) .sfv-card-title {
  display: flex; align-items: center; gap: 10px;
  background: none; border-left: 0; border-bottom: 1px solid rgba(29, 29, 27, .08);
  color: #3c3c3b; letter-spacing: .16em; font-size: 11.5px;
}
body:not(.sfv-dark) .sfv-mini-title { display: flex; align-items: center; gap: 10px; color: #3c3c3b; letter-spacing: .16em; }
body:not(.sfv-dark) .sfv-card-title::before,
body:not(.sfv-dark) .sfv-mini-title::before { content: ""; flex: 0 0 24px; height: 1px; background: #33d269; }

/* ── 4 · LAS VENTANAS ──────────────────────────────────────────────────────── */
body:not(.sfv-dark) .sfv-overlay { background: rgba(13, 43, 24, .30); }
body:not(.sfv-dark) .sfv-modal {
  background: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .90));
  border: 1px solid rgba(255, 255, 255, .95); border-radius: 16px;
  box-shadow: 0 40px 90px -30px rgba(13, 43, 24, .55), 0 18px 40px -24px rgba(7, 97, 44, .40), inset 0 1px 0 #fff;
}
body:not(.sfv-dark) .sfv-modal-title {
  position: relative; background: transparent; color: #1d1d1b; font-size: 16px; letter-spacing: -.005em;
  padding: 16px 22px 15px; border-bottom: 1px solid #e6e7e3;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body:not(.sfv-dark) .sfv-modal-title::after {
  content: ""; position: absolute; left: 22px; bottom: -1px; width: 40px; height: 2px; border-radius: 2px; background: #33d269;
}
body:not(.sfv-dark) .sfv-modal-title .fa { color: #07612c; }
body:not(.sfv-dark) .sfv-modal-title .close { color: #3c3c3b; }
body:not(.sfv-dark) .sfv-modal-title .close .fa { color: inherit; }
body:not(.sfv-dark) .sfv-modal-title .close:hover { background: rgba(7, 97, 44, .08); color: #07612c; }
body:not(.sfv-dark) .sfv-modal-footer { background: rgba(246, 247, 245, .75); border-top: 1px solid #e6e7e3; }

/* ── 5 · EL SALUDO DEL INICIO, como el titular del sitio ───────────────────── */
.dash-hola { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dash-hola-fecha {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #6b7068;
}
.dash-hola-fecha::before { content: ""; flex: 0 0 28px; height: 1px; background: #33d269; }
.dash-hola-fecha:empty { display: none; }
.dash-hello h1 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
/* El nombre en el verde del logotipo, liso: el único color del saludo. */
body:not(.sfv-dark) .dash-hola-nombre { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #07612c; }
body.sfv-dark .dash-hola-fecha { color: rgba(255, 255, 255, .72); }

/* ── Y EL LOGOTIPO DE LA BARRA, que se ilumina al pasar el cursor ──────────────
   El barrido del logotipo del sitio (Navbar.tsx), pero solo cuando se lo pide: una pasada al
   poner el cursor encima, nunca solo. */
/* La capa mide lo que mide el LOGOTIPO, no la marca: en el teléfono la marca se estira más ancha
   que el logotipo (flex: 1 1 auto) y la luz quedaba corrida. Alto de la marca (= el del <svg>) y
   la proporción del logotipo; el <svg> va pegado a la izquierda de la marca. */
.sfv-brand { position: relative; }
.sfv-brand-luz {
  position: absolute; left: 0; top: 0; bottom: 0; height: 100%; width: auto; aspect-ratio: 354.31 / 104.01;
  overflow: hidden; pointer-events: none;
  -webkit-mask: url("../img/sfv-logotipo-mascara.svg?v=b9357ab2cf") center / 100% 100% no-repeat;
  mask: url("../img/sfv-logotipo-mascara.svg?v=b9357ab2cf") center / 100% 100% no-repeat;
}
.sfv-brand-luz > span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: rgba(255, 255, 255, .92); filter: blur(2px);
  transform: translateX(-160%) skewX(-12deg);
}
body:not(.sfv-dark) .sfv-brand:hover .sfv-brand-luz > span { animation: sfvBarridoMarca 1.15s cubic-bezier(.33, 0, .2, 1) 1; }
@keyframes sfvBarridoMarca { from { transform: translateX(-160%) skewX(-12deg); } to { transform: translateX(400%) skewX(-12deg); } }
body.sfv-dark .sfv-brand-luz { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sfv-brand-luz { display: none; }
}

/* ── 6 · LA PORCELANA (30-sep-2026) ────────────────────────────────────────────
   Lo que en la entrada es el núcleo y las tarjetas, adentro es cada superficie del CRM. */

/* 6.1 · TARJETAS Y PANELES: papel, filete de 1 px y una sombra suave. Sin vidrio ni halo. */
body:not(.sfv-dark) .sfv-card, body:not(.sfv-dark) .sfv-mini-card,
body:not(.sfv-dark) .dash-kpi, body:not(.sfv-dark) .dash-panel,
body:not(.sfv-dark) .calc-card2, body:not(.sfv-dark) .cfg-role-card, body:not(.sfv-dark) .cfg-theme,
body:not(.sfv-dark) .dls-card, body:not(.sfv-dark) .av-cat {
  background: #ffffff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: #e6e7e3;   /* solo el color: quien lleva un filo propio (la ventana de WhatsApp) lo conserva */
  box-shadow: 0 1px 2px rgba(29, 29, 27, .04), 0 16px 36px -24px rgba(13, 43, 24, .30);
}
body:not(.sfv-dark) .sfv-sec-head h4, body:not(.sfv-dark) .dash-panel-head h4 { color: #1d1d1b; }

/* 6.2 · LAS FICHAS DE ÍCONO, A COLOR (30-sep: «a los íconos colócales color; métele más color y
   vida a todo»). Cada una conserva su degradado propio —el que traen en `style=` desde el JS—,
   con el glifo blanco, un brillo arriba y una sombra suave. Hubo un día en porcelana: se veía
   «genérico y simple». */
body:not(.sfv-dark) .sfv-pico,
body:not(.sfv-dark) .sfv-kpi-icon {
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -12px rgba(13, 43, 24, .6);
}
body:not(.sfv-dark) .sfv-pico i, body:not(.sfv-dark) .sfv-kpi-icon i { color: #ffffff; }
body:not(.sfv-dark) .dash-kpi-val { color: #1d1d1b; }

/* 6.3 · EL MENÚ: papel con su filete; lo activo, un tinte verde con su tramo menta (el verde es
   acento, no bloque). Los rótulos de grupo, en gris. */
body:not(.sfv-dark) .sfv-sidebar { background: rgba(255, 255, 255, .94); border-right: 1px solid #e6e7e3; box-shadow: none; }
body:not(.sfv-dark) .sfv-nav-group { color: #6b7068; }
body:not(.sfv-dark) .sfv-nav a { background: transparent; color: #3c3c3b; }
body:not(.sfv-dark) .sfv-nav a:hover { background: #f6f7f5; color: #1d1d1b; }
body:not(.sfv-dark) .sfv-nav a.active {
  background: linear-gradient(90deg, rgba(15, 118, 110, .12), rgba(21, 128, 61, .04)); color: #0b4f3a; font-weight: 800;
  box-shadow: inset 3px 0 0 #14b8a6;
}

/* 6.4 · LA BARRA DE ARRIBA: papel con su filete. */
body:not(.sfv-dark) .sfv-topbar {
  background: rgba(255, 255, 255, .9); border-bottom: 1px solid #e6e7e3; box-shadow: none;
}

/* 6.5 · LOS BOTONES DE ACCIÓN, COMO LOS DEL SITIO (30-sep-2026: «en botones de acción sí quiero
   unos verdes con efectos y animaciones; mira como está la web»). El `.boton-verde` de Website
   Next (globals.css), traído entero salvo una cosa:
     · PASTILLA, con el degradado de la casa que FLUYE de lado a lado (6 s, los verdes #1e4a30 →
       #3f8352 → #2a6a3f; todos dan más de 4,5:1 con el blanco);
     · al pasar el cursor, el BARRIDO de luz (sfv-web.css), más brillo, la sombra que crece y un
       halo menta; el ícono hace su gesto sobrio (sfv-motion.css);
     · al pulsar, se HUNDE apenas (escala .97): responde al dedo;
     · lo que NO se trae: que el botón SUBA 2 px al pasar. Es la regla del usuario «nada se alza
       al pasar el cursor» (la auditoría del 29-sep se lo quitó a este mismo botón).
   Los secundarios son el `.boton-contorno` del sitio: papel con filo verde y el barrido en menta.
   Con «reducir movimiento», el degradado queda quieto. */
@keyframes sfvFlujoBoton { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
body:not(.sfv-dark) .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success),
body:not(.sfv-dark) .sfv-semana-btn {
  background-image: linear-gradient(110deg, #1e4a30 0%, #3f8352 25%, #2a6a3f 50%, #3f8352 75%, #1e4a30 100%);
  background-size: 250% 100%; background-position: 0% 50%;
  animation: sfvFlujoBoton 6s ease-in-out infinite;
  border-color: transparent; border-radius: 999px; color: #ffffff;
  box-shadow: 0 12px 30px -14px rgba(63, 131, 82, .75), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), filter .3s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
body:not(.sfv-dark) .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success):hover,
body:not(.sfv-dark) .sfv-semana-btn:hover {
  background-image: linear-gradient(110deg, #1e4a30 0%, #3f8352 25%, #2a6a3f 50%, #3f8352 75%, #1e4a30 100%);
  border-color: transparent; filter: brightness(1.1);
  box-shadow: 0 14px 38px -10px rgba(63, 131, 82, .85), 0 0 0 3px rgba(51, 210, 105, .16), inset 0 1px 0 rgba(255, 255, 255, .18);
}
body:not(.sfv-dark) .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success):active,
body:not(.sfv-dark) .sfv-semana-btn:active,
body:not(.sfv-dark) .sfv-btn.secondary:active, body:not(.sfv-dark) .sfv-btn.ghost:active { transform: scale(.97); }
body:not(.sfv-dark) .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success):disabled {
  animation: none; filter: saturate(.6); box-shadow: none;
}
body:not(.sfv-dark) .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success) > i.fa { color: #ffffff; }
/* Los secundarios: el contorno del sitio. */
body:not(.sfv-dark) .sfv-btn.secondary, body:not(.sfv-dark) .sfv-btn.ghost {
  position: relative; background: #ffffff; border-color: transparent; border-radius: 999px; color: #1e4a30;
  box-shadow: 0 0 0 1px rgba(63, 131, 82, .55), 0 10px 30px -18px rgba(30, 74, 48, .35);
  transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), background-color .3s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
body:not(.sfv-dark) .sfv-btn.secondary:hover, body:not(.sfv-dark) .sfv-btn.ghost:hover {
  background: #f3fbf5; border-color: transparent; color: #1e4a30;
  box-shadow: 0 0 0 1px #3f8352, 0 14px 38px -12px rgba(63, 131, 82, .45);
}
body:not(.sfv-dark) .sfv-btn.secondary::after, body:not(.sfv-dark) .sfv-btn.ghost::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(51, 210, 105, .22) 50%, transparent 58%) 100% 0 / 300% 100% no-repeat;
  transition: background-position .7s ease-out;
}
body:not(.sfv-dark) .sfv-btn.secondary:hover::after, body:not(.sfv-dark) .sfv-btn.ghost:hover::after { background-position: 0% 0; }
body:not(.sfv-dark) .sfv-btn.secondary .fa, body:not(.sfv-dark) .sfv-btn.ghost .fa { color: #3f8352; }
/* Sin dorado (regla de la casa): el botón de advertencia pasa a ámbar sobrio. */
body:not(.sfv-dark) .sfv-btn.warning { background: #fff7e8; border-color: #f0dcb4; color: #7a4a00; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  body:not(.sfv-dark) .sfv-btn, body:not(.sfv-dark) .sfv-semana-btn { animation: none !important; }
  body:not(.sfv-dark) .sfv-btn:active, body:not(.sfv-dark) .sfv-semana-btn:active { transform: none; }
}

/* 6.6 · LOS TÍTULOS DE PANTALLA: de verde profundo a turquesa profundo (los dos dan más de 4,5:1
   sobre arena), con su tramo de turquesa a verde. */
body:not(.sfv-dark) .sfv-screen-title {
  background: linear-gradient(90deg, #065f46, #0f766e); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body:not(.sfv-dark) .sfv-screen-title::after { width: 48px; height: 2px; background: linear-gradient(90deg, #14b8a6, #22c55e); box-shadow: none; }

/* 6.7 · EL MENSAJE DEL DÍA: la banda de color de vuelta, de turquesa a verde (tonos hondos: la
   letra blanca da más de 4,5:1), con las líneas del circuito encima, muy tenues. */
body:not(.sfv-dark) .dash-verso, body.sfv-dark .dash-verso {
  background:
    url("../img/circuito-fondo.svg?v=b63abfcdb0") 0 0 / 900px 612px repeat,
    linear-gradient(115deg, #0f766e 0%, #0e7a5a 45%, #15803d 100%);
  background-blend-mode: soft-light, normal;
  color: #ffffff; border: 0;
  box-shadow: 0 16px 36px -20px rgba(15, 118, 110, .6), inset 0 1px 0 rgba(255, 255, 255, .18);
}
body:not(.sfv-dark) .dash-verso::before, body.sfv-dark .dash-verso::before { display: none; }
body:not(.sfv-dark) .dash-verso .vico, body.sfv-dark .dash-verso .vico {
  background: rgba(255, 255, 255, .16) !important; color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28) !important;
}
body:not(.sfv-dark) .dash-verso .vico i, body.sfv-dark .dash-verso .vico i { color: #ffffff; }
body:not(.sfv-dark) .dash-verso .vtxt span, body.sfv-dark .dash-verso .vtxt span { color: rgba(255, 255, 255, .86); }
body:not(.sfv-dark) .dash-verso .vtxt b, body.sfv-dark .dash-verso .vtxt b { color: #ffffff; }

/* 6.8 · LAS TABLAS: cabecera arena lisa con su filete, cebra casi blanca y, al pasar, arena.
   El color de las filas se pinta en las CELDAS (sfv-components.css), así que se cambia ahí. */
body:not(.sfv-dark) .sfv-table thead th {
  background: #f6f7f5; color: #6b7068; border-top-color: #eceee9; border-bottom: 1px solid #e0e3df;
}
body:not(.sfv-dark) .sfv-table thead th + th, body:not(.sfv-dark) .sfv-table tbody td + td { border-left-color: #eceee9; }
body:not(.sfv-dark) .sfv-table tbody td { border-color: #eceee9; }
body:not(.sfv-dark) .sfv-table tbody tr:nth-child(even) > td { background: #fafbfa; }
body:not(.sfv-dark) .sfv-table tbody tr:hover > td { background: #f3f5f3; }

/* 6.9 · EL TABLERO: columnas arena y tarjetas de papel, por sus variables —sin tocar los filos
   que dicen algo: seleccionada, por atender, arrastrando encima, cliente—. */
body:not(.sfv-dark) { --kb-col-bg: rgba(246, 247, 245, .88); --kb-card-bg: #ffffff; }
body:not(.sfv-dark) .kb-amt { color: #1d1d1b; }

/* 6.10 · AL PASAR EL CURSOR sobre una tarjeta: el filete se oscurece un punto y la sombra crece;
   nada verde, nada se alza. El foco que sigue al cursor, en luz blanca. */
body:not(.sfv-dark) .sfv-card:hover, body:not(.sfv-dark) .sfv-mini-card:hover, body:not(.sfv-dark) .dash-kpi:hover,
body:not(.sfv-dark) .sfv-kpi:hover, body:not(.sfv-dark) .dash-panel:hover {
  border-color: #d3d8d3;
  box-shadow: 0 1px 2px rgba(29, 29, 27, .05), 0 22px 44px -26px rgba(13, 43, 24, .36);
}
body:not(.sfv-dark) .sfv-spot { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(29, 29, 27, .025), transparent 62%); }

/* 6.11 · LAS FICHAS DEL MENÚ: cada pantalla con su color (ver §9, común a los dos modos), el
   glifo blanco. Los íconos animados (vídeos Remotion) son blancos de origen: van tal cual. */
body:not(.sfv-dark) .sfv-nav a > i.fa, body:not(.sfv-dark) .sfv-mod > i.sfv-mod-ico { color: #ffffff; }
body:not(.sfv-dark) .sfv-nav a > i.fa.sfv-anim-lista > video.sfv-ico-anim { filter: none; opacity: 1; }
/* Los módulos (CRM, Sistema): papel con filete; el de la pantalla actual, su tramo menta. */
body:not(.sfv-dark) .sfv-mod { background: #ffffff; border: 1px solid #e6e7e3; box-shadow: 0 1px 2px rgba(29, 29, 27, .04); }
body:not(.sfv-dark) .sfv-mod:hover { background: #fafbfa; }
body:not(.sfv-dark) .sfv-mod.aqui { background: #ffffff; box-shadow: inset 3px 0 0 #33d269, 0 1px 2px rgba(29, 29, 27, .04); }
body:not(.sfv-dark) .sfv-mod-txt b { color: #1d1d1b; }
body:not(.sfv-dark) .sfv-mod-txt i { color: #6b7068; }
body:not(.sfv-dark) .sfv-mod-caret { color: #6b7068; }

/* 6.12 · LOS NOMBRES DE LOS LEADS, en tinta (el verde, al pasar); LOS MONTOS, en tinta: sin
   dorado (regla de la casa). */
body:not(.sfv-dark) .lead-open { color: #1d1d1b; }
body:not(.sfv-dark) .lead-open:hover { color: #07612c; }
body:not(.sfv-dark) .sfv-money, body:not(.sfv-dark) .crm-gold,
body:not(.sfv-dark) .sfv-table tfoot.sfv-totales td .crm-gold { color: #1d1d1b; }

/* 6.13 · «TU SEMANA EN MEDIO MINUTO» es un botón de acción: va con el verde que fluye (§6.5). */

/* 6.14 · LOS AVISOS: sus fichas conservan su color de alarma (ámbar lo que espera, rojo lo que ya
   escaló) con el glifo blanco, como todas. */
/* La ventana de WhatsApp conserva su filo ámbar. */
body:not(.sfv-dark) .v24-card { border-left: 3px solid #d9962b; }

/* 6.16 · LO SELECCIONADO: de turquesa a verde, con su sombra del mismo tono. */
body:not(.sfv-dark) .dash-period button.on,
body:not(.sfv-dark) .leads-view-seg button.on { box-shadow: 0 6px 14px -6px rgba(15, 118, 110, .55); }
body:not(.sfv-dark) .tk-toolbar .seg button.on { background: var(--sfv-activo); }
body:not(.sfv-dark) .dash-week-hoy { border-color: #d9dcd8; background: #ffffff; color: #1d1d1b; }
/* El segundo rango del calendario (comparar) era morado: pasa a verde, el acento de la casa. */
body:not(.sfv-dark) .dc-rango-btn.alt { background: rgba(7, 97, 44, .07); border-color: rgba(7, 97, 44, .3); color: #07612c; }
body:not(.sfv-dark) .dc-rango-btn.alt.on { background: linear-gradient(135deg, #3f8352, #1e4a30); color: #ffffff; }

/* 6.17 · EL MENSAJE DEL DÍA sin la sombra del texto de cuando iba sobre verde. */
body:not(.sfv-dark) .dash-verso .vtxt b { text-shadow: none; }

/* 6.18 · SIN DORADO: lo que quedaba en dorado pasa a tinta o a verde. */
body:not(.sfv-dark) .sfv-kpi-sub { color: #6b7068; }
body:not(.sfv-dark) .sfv-toast.warn { border-left-color: #d9962b; }
body:not(.sfv-dark) .sfv-toast.warn .tico { color: #b45309; }
body:not(.sfv-dark) .sfv-toast { box-shadow: 0 24px 50px -26px rgba(13, 43, 24, .35), 0 2px 8px rgba(29, 29, 27, .06); }

/* 6.19 · SUPERVISIÓN: las bandas de la tabla (resultados, gestión, comportamiento) eran teal,
   morado y azul; pasan a tinta, grafito y el verde de la casa. */
body:not(.sfv-dark) .sfv-table .sup-bandas th.sup-banda { text-shadow: none; }
body:not(.sfv-dark) .sfv-table .sup-bandas th.sup-banda-res { background: linear-gradient(135deg, #0f766e, #0b5750); }
body:not(.sfv-dark) .sfv-table .sup-bandas th.sup-banda-ges { background: linear-gradient(135deg, #1a7a45, #125a33); }
body:not(.sfv-dark) .sfv-table .sup-bandas th.sup-banda-com { background: linear-gradient(135deg, #1f5561, #173f48); }
/* La columna del líder del tablero: ya no en dorado, con el filo verde. */
body:not(.sfv-dark) .kb-col-lider { border-color: rgba(7, 97, 44, .35); box-shadow: 0 0 0 1.5px rgba(7, 97, 44, .3); }
body:not(.sfv-dark) .kb-col-lider .kb-col-h { background: linear-gradient(180deg, rgba(7, 97, 44, .06), rgba(7, 97, 44, 0)); border-bottom-color: rgba(7, 97, 44, .2); }
body:not(.sfv-dark) .kb-col-lider .kb-col-name { color: #07612c; }

/* ── 7 · LA PORCELANA DE NOCHE, EN TURQUESA: el modo oscuro con la misma línea (30-sep-2026) ──
   Pedido del usuario al ver Supervisión en oscuro: «en la versión oscura no cambió nada, revisa
   por favor y corrige con la nueva interfaz». Hasta hoy la regla era «el oscuro no se toca»
   (2-sep); esta petición la deja atrás. La primera versión fue grafito verdoso, y al verla: «el
   nuevo tono verde olivo se ve muerto; mira un turquesa como el que estaba anteriormente…
   combina algo chévere y genial visualmente».
   LA LÍNEA, DE NOCHE: el azul turquesa profundo del oscuro de antes como fondo, y la ESTRUCTURA
   nueva encima —superficies que se separan por su filete de 1 px, fichas de ícono de porcelana
   (no cuadros de colores), lo seleccionado en una pastilla clara—. El acento COMBINA el turquesa
   (#5eead4, glifos y filetes) con el verde de la casa: los tramos de los títulos, la barra de lo
   activo y el botón principal van de turquesa a verde. Al pasar el cursor, un halo turquesa
   suave (nada se alza). Las líneas del circuito, en turquesa y casi invisibles.
   Y la regla del 18-sep sigue en pie: en oscuro, NADA DE TEXTO GRIS (sfv-web.css). */
body.sfv-dark {
  --noche-fondo: #051619;
  --noche-sup: #0c2427;         /* tarjetas, paneles, ventanas */
  --noche-sup2: #102c30;        /* lo que va encima: cabeceras de tabla, tarjetas del tablero */
  --noche-campo: #081c1f;
  --noche-filo: #19393c;
  --noche-filo-fuerte: #28585a;
  --noche-verde: #5eead4;       /* el acento turquesa: glifos y textos de acento */
  --noche-tramo: linear-gradient(90deg, #2dd4bf, #33d269);   /* turquesa → verde de la casa */
  /* Los tokens de siempre, al turquesa de noche: todo lo que pinta con ellos cambia solo. */
  --sfv-white: #0c2427;
  --sfv-sand: #051619;
  --sfv-line: #19393c;
  --sfv-line-soft: #12302f;
  --sfv-mint-dark: #5eead4;
  --glass-dark: #0c2427;
  --glass-dark-bd: #19393c;
  --sect-glow: transparent;
  --sect-glow-hov: transparent;
  --sect-marco: rgba(94, 234, 212, .16);
  /* Lo seleccionado: la pastilla clara, con un punto de turquesa (ver 7.8). */
  --sfv-activo: linear-gradient(135deg, #effffc, #c6f3ea);
  --sfv-activo-hover: linear-gradient(135deg, #ffffff, #d5f7f0);
  --kb-col-bg: rgba(94, 234, 212, .03);
  --kb-card-bg: #102c30;
  --cl-soft: rgba(255, 255, 255, .04);
  --cl-gold: #ffffff;
}

/* 7.1 · EL FONDO: turquesa profundo, dos luces muy abiertas (turquesa arriba, un eco verde
   abajo) y las líneas del circuito en turquesa. */
body.sfv-dark::before {
  background:
    radial-gradient(1300px 900px at 72% -12%, rgba(20, 184, 166, .20), rgba(20, 184, 166, 0) 62%),
    radial-gradient(1100px 800px at 8% 112%, rgba(51, 210, 105, .08), rgba(51, 210, 105, 0) 60%),
    linear-gradient(180deg, #06191c, #041215);
  background-color: #051619; filter: none; transform: none; opacity: 1;
}
body.sfv-dark::after {
  content: ""; display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/circuito-fondo.svg?v=b63abfcdb0") 0 0 / 1200px 816px repeat;
  filter: brightness(0) invert(79%) sepia(45%) saturate(686%) hue-rotate(112deg) brightness(87%) contrast(91%); opacity: .1;
}

/* 7.2 · TARJETAS Y PANELES: grafito con su filete y una sombra honda. Sin vidrio ni halo. */
body.sfv-dark .sfv-card, body.sfv-dark .sfv-mini-card,
body.sfv-dark .dash-kpi, body.sfv-dark .dash-panel,
body.sfv-dark .calc-card2, body.sfv-dark .cfg-role-card, body.sfv-dark .cfg-theme,
body.sfv-dark .dls-card, body.sfv-dark .av-cat {
  /* Un brillo turquesa apenas insinuado arriba de cada superficie: le da hondura sin halo. */
  background: linear-gradient(180deg, rgba(94, 234, 212, .045), rgba(94, 234, 212, 0) 160px), var(--noche-sup);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: var(--noche-filo);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 18px 40px -26px rgba(0, 0, 0, .85);
}
body.sfv-dark .sfv-card:hover, body.sfv-dark .sfv-mini-card:hover, body.sfv-dark .dash-kpi:hover,
body.sfv-dark .sfv-kpi:hover, body.sfv-dark .dash-panel:hover, body.sfv-dark .calc-card2:hover,
body.sfv-dark .cfg-role-card:hover, body.sfv-dark .dls-card:hover, body.sfv-dark .av-cat:hover {
  border-color: rgba(94, 234, 212, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 48px -26px rgba(0, 0, 0, .9), 0 0 34px -12px rgba(45, 212, 191, .45);
}
body.sfv-dark .sfv-spot { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(94, 234, 212, .06), transparent 62%); }
body.sfv-dark .dash-kpi-val { color: #ffffff; text-shadow: none; }
body.sfv-dark .highcharts-graph, body.sfv-dark .highcharts-markers .highcharts-point { filter: none; }

/* 7.3 · LAS FICHAS DE ÍCONO, A COLOR (30-sep: «a los íconos colócales color»): cada una con su
   degradado propio (el de `style=`), el glifo blanco, un brillo arriba y, en oscuro, un leve
   resplandor que las despega del fondo. */
body.sfv-dark .sfv-pico,
body.sfv-dark .sfv-kpi-icon {
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 22px -10px rgba(0, 0, 0, .9);
}
body.sfv-dark .sfv-pico i, body.sfv-dark .sfv-kpi-icon i { color: #ffffff; }
body.sfv-dark .v24-card { border-left: 3px solid #d9962b; }

/* 7.4 · EL MENÚ Y LA BARRA: grafito con su filete. Lo activo, un tinte verde con su tramo
   menta —el verde es acento, no bloque—; la placa del ícono, porcelana oscura. Va con la
   especificidad de sfv-web.css (`body.sfv-dark.sidebar-claro .sfv-sidebar …`). */
body.sfv-dark .sfv-sidebar, body.sfv-dark.sidebar-claro .sfv-sidebar {
  background: rgba(6, 26, 29, .96); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-right: 1px solid var(--noche-filo); box-shadow: none;
}
body.sfv-dark .sfv-topbar, body.sfv-dark.sidebar-claro .sfv-topbar {
  background: rgba(5, 22, 25, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--noche-filo); box-shadow: none;
}
body.sfv-dark .sfv-sidebar .sfv-nav-group, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-nav-group { color: #ffffff; letter-spacing: .16em; }
body.sfv-dark .sfv-sidebar .sfv-nav a, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-nav a { background: transparent; color: #ffffff; }
body.sfv-dark .sfv-sidebar .sfv-nav a:hover, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-nav a:hover { background: rgba(94, 234, 212, .06); color: #ffffff; }
body.sfv-dark .sfv-sidebar .sfv-nav a.active, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-nav a.active {
  background: linear-gradient(90deg, rgba(45, 212, 191, .16), rgba(51, 210, 105, .05)); color: #ffffff; font-weight: 800;
  box-shadow: inset 3px 0 0 #2dd4bf;
}
/* Las fichas del menú, cada pantalla con su color (§9), glifo blanco. */
body.sfv-dark .sfv-sidebar .sfv-nav a > i.fa,
body.sfv-dark .sfv-sidebar .sfv-mod > i.sfv-mod-ico { color: #ffffff; opacity: 1; }
body.sfv-dark .sfv-sidebar .sfv-nav a > i.fa.sfv-anim-lista > video.sfv-ico-anim { filter: none; opacity: 1; }
body.sfv-dark .sfv-sidebar .sfv-mod, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-mod {
  background: var(--noche-sup); border: 1px solid var(--noche-filo); color: #ffffff; box-shadow: none;
}
body.sfv-dark .sfv-sidebar .sfv-mod:hover, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-mod:hover { background: #0f2b2e; }
body.sfv-dark .sfv-sidebar .sfv-mod.aqui, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-mod.aqui { background: var(--noche-sup); box-shadow: inset 3px 0 0 #2dd4bf; }
body.sfv-dark .sfv-sidebar .sfv-mod-cuerpo .sfv-nav::before { background: var(--noche-filo); }
/* El botón del tema, encendido: porcelana oscura con el sol en verde claro (no un bloque verde). */
body.sfv-dark .sfv-topbar .sfv-tbtn.on { background: linear-gradient(160deg, #15393d, #0b2427); box-shadow: 0 0 0 1px rgba(94, 234, 212, .4); }
body.sfv-dark .sfv-topbar .sfv-tbtn.on i { color: var(--noche-verde); }
body.sfv-dark .sfv-topbar .sfv-tbtn:hover, body.sfv-dark.sidebar-claro .sfv-topbar .sfv-tbtn:hover,
body.sfv-dark .sfv-topbar .sfv-menu-toggle:hover, body.sfv-dark.sidebar-claro .sfv-topbar .sfv-menu-toggle:hover { background: rgba(94, 234, 212, .08); }

/* 7.5 · LOS CAMPOS: un punto más hondos que la tarjeta, con su filete; el foco, menta. */
body.sfv-dark .sfv-input, body.sfv-dark .sfv-select, body.sfv-dark .sfv-textarea,
body.sfv-dark .sfv-search, body.sfv-dark .cl-search, body.sfv-dark .sfv-topsearch {
  background-color: var(--noche-campo); border-color: var(--noche-filo); border-radius: 6px;
}
body.sfv-dark .sfv-input:hover, body.sfv-dark .sfv-select:hover, body.sfv-dark .sfv-textarea:hover,
body.sfv-dark .sfv-search:hover, body.sfv-dark .cl-search:hover, body.sfv-dark .sfv-topsearch:hover { border-color: var(--noche-filo-fuerte); }
body.sfv-dark .sfv-input:focus, body.sfv-dark .sfv-select:focus, body.sfv-dark .sfv-textarea:focus,
body.sfv-dark .sfv-search:focus-within, body.sfv-dark .cl-search:focus-within, body.sfv-dark .sfv-topsearch:focus-within {
  background-color: #0a2225; border-color: #2dd4bf; box-shadow: 0 0 0 1px #2dd4bf, 0 0 18px -6px rgba(45, 212, 191, .5);
}

/* 7.6 · LOS TÍTULOS: blanco liso (sin el degradado verde) y su tramo menta; las cabeceras de
   tarjeta, un filete con su tramo; los rótulos en mayúsculas, la raya menta delante. */
body.sfv-dark .sfv-screen-title {
  background: linear-gradient(90deg, #ffffff 0%, #b6f5ea 55%, #7ee8b0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.sfv-dark .sfv-screen-title::after { width: 48px; height: 2px; background: var(--noche-tramo); box-shadow: 0 0 12px rgba(45, 212, 191, .45); }
body.sfv-dark .sfv-sec-head, body.sfv-dark .dash-panel-head {
  position: relative; padding-bottom: 11px; border-bottom: 1px solid rgba(255, 255, 255, .07); margin-bottom: 14px;
}
body.sfv-dark .sfv-sec-head::after, body.sfv-dark .dash-panel-head::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 32px; height: 2px; border-radius: 2px; background: var(--noche-tramo);
}
body.sfv-dark .sfv-card-title {
  display: flex; align-items: center; gap: 10px;
  background: none; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: #ffffff; letter-spacing: .16em; font-size: 11.5px;
}
body.sfv-dark .sfv-mini-title { display: flex; align-items: center; gap: 10px; color: #ffffff; letter-spacing: .16em; }
body.sfv-dark .sfv-card-title::before,
body.sfv-dark .sfv-mini-title::before { content: ""; flex: 0 0 24px; height: 1px; background: var(--noche-tramo); }
/* El nombre del saludo, de turquesa a verde: el único degradado de texto del oscuro. */
body.sfv-dark .dash-hola-nombre {
  background: linear-gradient(90deg, #5eead4, #4ade80); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 7.7 · EL MENSAJE DEL DÍA: la banda de color de 6.7, igual en los dos modos. */
body.sfv-dark .dash-verso::after { display: none; }
body.sfv-dark .dash-verso .vtxt b { text-shadow: none; }

/* 7.8 · LO SELECCIONADO: la pastilla clara con la letra en tinta —el negativo de la tinta del
   modo claro—. Los segmentos traían `color: #fff` (algunos con !important); acá se dan vuelta
   todos los que pintan con --sfv-activo. */
body.sfv-dark .dash-period button.on, body.sfv-dark .dash-period > button.on,
body.sfv-dark .leads-view-seg button.on, body.sfv-dark .dash-alcance button.on,
body.sfv-dark .calc-page-tabs button.on, body.sfv-dark .calc-seg-on,
body.sfv-dark .tar-seg button.on, body.sfv-dark .bulk-tab.on, body.sfv-dark .cfg-tab.on, body.sfv-dark .aud-tabm.on,
body.sfv-dark .sfv-pager-tam button.on, body.sfv-dark .tk-toolbar .seg button.on, body.sfv-dark .crm-pill-on,
body.sfv-dark .dc-d.sel, body.sfv-dark .dc-mo.sel, body.sfv-dark .cw-dayhead.hoy b,
body.sfv-dark .abb-badge, body.sfv-dark .bulk-op .cnt, body.sfv-dark .ii-ord-n {
  background: var(--sfv-activo); color: #042f2e !important; border-color: transparent;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .7), 0 0 16px -6px rgba(94, 234, 212, .55);
}
body.sfv-dark .dash-period button.on .fa, body.sfv-dark .leads-view-seg button.on .fa, body.sfv-dark .dash-alcance button.on .fa,
body.sfv-dark .calc-page-tabs button.on .fa, body.sfv-dark .tar-seg button.on .fa, body.sfv-dark .bulk-tab.on .fa,
body.sfv-dark .cfg-tab.on .fa, body.sfv-dark .aud-tabm.on .fa, body.sfv-dark .tk-toolbar .seg button.on .fa { color: #042f2e !important; }
body.sfv-dark .dash-week-hoy { border-color: var(--noche-filo-fuerte); background: var(--noche-sup); color: #ffffff; }
/* El segundo rango del calendario (comparar): verde claro, el acento de la casa. */
body.sfv-dark .dc-rango-btn.alt { background: rgba(94, 234, 212, .08); border-color: rgba(94, 234, 212, .3); color: var(--noche-verde); }
body.sfv-dark .dc-rango-btn.alt.on { background: linear-gradient(135deg, #0f7a68, #166b44); color: #ffffff; }

/* 7.9 · LAS TABLAS: cabecera grafito con su filete, cebra apenas marcada y, al pasar, un punto
   más clara. Se pinta en las CELDAS (sfv-components.css). */
body.sfv-dark .sfv-table thead th {
  background: var(--noche-sup2); color: #ffffff; border-top-color: var(--noche-filo); border-bottom: 1px solid var(--noche-filo-fuerte);
}
body.sfv-dark .sfv-table thead th + th, body.sfv-dark .sfv-table tbody td + td,
body.sfv-dark .sfv-table th + th, body.sfv-dark .sfv-table td + td { border-left-color: rgba(94, 234, 212, .07); }
body.sfv-dark .sfv-table tbody td { border-color: rgba(94, 234, 212, .07); }
body.sfv-dark .sfv-table tbody tr:nth-child(even) > td { background: rgba(94, 234, 212, .022); }
body.sfv-dark .sfv-table tbody tr:hover > td { background: rgba(94, 234, 212, .06); }
/* Supervisión: las bandas combinan turquesa, verde y azul petróleo (sin el morado ni el azul de
   antes). Todas dan más de 4,5:1 con el blanco. */
body.sfv-dark .sfv-table .sup-bandas th.sup-banda { text-shadow: none; color: #ffffff; }
body.sfv-dark .sfv-table .sup-bandas th.sup-banda-res { background: linear-gradient(135deg, #0f766e, #0b5750); }
body.sfv-dark .sfv-table .sup-bandas th.sup-banda-ges { background: linear-gradient(135deg, #1a7a45, #125a33); }
body.sfv-dark .sfv-table .sup-bandas th.sup-banda-com { background: linear-gradient(135deg, #1f5561, #173f48); }

/* 7.10 · EL TABLERO: la columna del líder sin dorado, con el filo verde. */
body.sfv-dark .kb-col-lider { border-color: rgba(94, 234, 212, .3); box-shadow: 0 0 0 1.5px rgba(94, 234, 212, .22); }
body.sfv-dark .kb-col-lider .kb-col-h { background: linear-gradient(180deg, rgba(94, 234, 212, .08), rgba(94, 234, 212, 0)); border-bottom-color: rgba(94, 234, 212, .18); }
body.sfv-dark .kb-col-lider .kb-col-name { color: var(--noche-verde); }
body.sfv-dark .kb-amt { color: #ffffff; }

/* 7.11 · LAS ETAPAS: el mismo círculo de color, sobre un tinte hondo de su tono y la letra en
   blanco (nada de gris en oscuro). */
body.sfv-dark .etapa-NUEVO       { background: rgba(125, 134, 127, .16); border-color: rgba(125, 134, 127, .42); color: #ffffff; }
body.sfv-dark .etapa-CONTACTADO  { background: rgba(140, 201, 163, .12); border-color: rgba(140, 201, 163, .38); color: #ffffff; }
body.sfv-dark .etapa-NEGOCIACION { background: rgba(63, 154, 95, .16); border-color: rgba(63, 154, 95, .45); color: #ffffff; }
body.sfv-dark .etapa-NO_RESPONDE { background: rgba(217, 150, 43, .14); border-color: rgba(217, 150, 43, .42); color: #ffffff; }
body.sfv-dark .etapa-GANADO      { background: rgba(31, 122, 68, .22); border-color: rgba(51, 210, 105, .40); color: #ffffff; }
body.sfv-dark .etapa-PERDIDO     { background: rgba(217, 87, 62, .14); border-color: rgba(217, 87, 62, .42); color: #ffffff; }

/* 7.12 · LOS NOMBRES DE LOS LEADS en blanco (el verde claro, al pasar); LOS MONTOS en blanco:
   sin dorado. */
body.sfv-dark .lead-open { color: #ffffff; }
body.sfv-dark .lead-open:hover { color: var(--noche-verde); }
body.sfv-dark .sfv-money, body.sfv-dark .crm-gold,
body.sfv-dark .sfv-table tfoot.sfv-totales td .crm-gold, body.sfv-dark .al-com-tag { color: #ffffff; }

/* 7.13 · LAS VENTANAS: grafito con su filete, el título con su tramo menta. */
body.sfv-dark .sfv-overlay { background: rgba(2, 12, 14, .66); }
body.sfv-dark .sfv-modal {
  background: var(--noche-sup); border: 1px solid var(--noche-filo); border-radius: 16px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
}
body.sfv-dark .sfv-modal-title {
  position: relative; background: transparent; color: #ffffff; font-size: 16px;
  padding: 16px 22px 15px; border-bottom: 1px solid var(--noche-filo);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.sfv-dark .sfv-modal-title::after {
  content: ""; position: absolute; left: 22px; bottom: -1px; width: 40px; height: 2px; border-radius: 2px; background: var(--noche-tramo);
}
body.sfv-dark .sfv-modal-title .fa { color: var(--noche-verde); }
body.sfv-dark .sfv-modal-title .close, body.sfv-dark .sfv-modal-title .close .fa { color: #ffffff; }
body.sfv-dark .sfv-modal-title .close:hover { background: rgba(94, 234, 212, .08); }
body.sfv-dark .sfv-modal-footer { background: rgba(0, 0, 0, .16); border-top: 1px solid var(--noche-filo); }
body.sfv-dark .sfv-drawer { background: #071d20; }
body.sfv-dark .sfv-toast { background: var(--noche-sup); border-color: var(--noche-filo); box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .9); }
body.sfv-dark .sfv-toast.warn { border-left-color: #d9962b; }
body.sfv-dark .sfv-toast.warn .tico { color: #f0b35a; }

/* 7.14 · LOS BOTONES DE ACCIÓN: la misma pastilla que fluye (§6.5), pero su degradado va del
   turquesa profundo al verde de la casa y vuelve; los secundarios, el contorno en turquesa.
   Los tonos del degradado dan más de 4,5:1 con el blanco. */
body.sfv-dark .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success),
body.sfv-dark .sfv-semana-btn {
  background-image: linear-gradient(110deg, #0b5c52 0%, #0f7a68 25%, #166b44 50%, #0f7a68 75%, #0b5c52 100%);
  background-size: 250% 100%; background-position: 0% 50%;
  animation: sfvFlujoBoton 6s ease-in-out infinite;
  border-color: transparent; border-radius: 999px; color: #ffffff;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), filter .3s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
body.sfv-dark .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success):hover,
body.sfv-dark .sfv-semana-btn:hover {
  background-image: linear-gradient(110deg, #0b5c52 0%, #0f7a68 25%, #166b44 50%, #0f7a68 75%, #0b5c52 100%);
  border-color: transparent; filter: brightness(1.12);
  box-shadow: 0 14px 38px -12px rgba(0, 0, 0, .85), 0 0 0 3px rgba(45, 212, 191, .22), 0 0 26px -6px rgba(45, 212, 191, .55), inset 0 1px 0 rgba(255, 255, 255, .16);
}
body.sfv-dark .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success):active,
body.sfv-dark .sfv-semana-btn:active,
body.sfv-dark .sfv-btn.secondary:active, body.sfv-dark .sfv-btn.ghost:active { transform: scale(.97); }
body.sfv-dark .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success):disabled {
  animation: none; filter: saturate(.6); box-shadow: none;
}
body.sfv-dark .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success) > i.fa { color: #ffffff; }
body.sfv-dark .sfv-btn.secondary, body.sfv-dark .sfv-btn.ghost {
  position: relative; background: transparent; border-color: transparent; border-radius: 999px; color: #ffffff;
  box-shadow: 0 0 0 1px rgba(94, 234, 212, .45);
  transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), background-color .3s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
body.sfv-dark .sfv-btn.secondary:hover, body.sfv-dark .sfv-btn.ghost:hover {
  background: rgba(94, 234, 212, .08); border-color: transparent; color: #ffffff;
  box-shadow: 0 0 0 1px var(--noche-verde), 0 14px 38px -14px rgba(0, 0, 0, .8);
}
body.sfv-dark .sfv-btn.secondary::after, body.sfv-dark .sfv-btn.ghost::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(94, 234, 212, .2) 50%, transparent 58%) 100% 0 / 300% 100% no-repeat;
  transition: background-position .7s ease-out;
}
body.sfv-dark .sfv-btn.secondary:hover::after, body.sfv-dark .sfv-btn.ghost:hover::after { background-position: 0% 0; }
body.sfv-dark .sfv-btn.secondary .fa, body.sfv-dark .sfv-btn.ghost .fa { color: var(--noche-verde); }
body.sfv-dark .sfv-btn.warning { background: rgba(217, 150, 43, .12); border-color: rgba(217, 150, 43, .4); color: #ffffff; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  body.sfv-dark .sfv-btn, body.sfv-dark .sfv-semana-btn { animation: none !important; }
  body.sfv-dark .sfv-btn:active, body.sfv-dark .sfv-semana-btn:active { transform: none; }
}

/* 7.15 · SIN DORADO NI TEAL: lo que quedaba en esos tonos pasa a blanco o a verde claro. */
body.sfv-dark .sfv-kpi-sub { color: #ffffff; }
body.sfv-dark .dash-hola-fecha::before { background: var(--noche-tramo); }

/* 7.16 · CON «EQUIPO LIVIANO» Y EN EL TELÉFONO: el mismo grafito. Esas reglas (sfv-skin.css,
   sfv-base.css) pintaban el teal-medianoche con más especificidad o con !important. */
body.sfv-lite.sfv-dark .sfv-card, body.sfv-lite.sfv-dark .sfv-mini-card, body.sfv-lite.sfv-dark .dash-kpi,
body.sfv-lite.sfv-dark .dash-panel, body.sfv-lite.sfv-dark .calc-card2, body.sfv-lite.sfv-dark .cfg-role-card,
body.sfv-lite.sfv-dark .cfg-theme, body.sfv-lite.sfv-dark .dls-card, body.sfv-lite.sfv-dark .av-cat { background: var(--noche-sup); }
body.sfv-lite.sfv-dark .sfv-topbar { background: #051619; }
body.sfv-lite.sfv-dark .sfv-sidebar { background: #061a1d; }
body.sfv-lite.sfv-dark .aur-win { background: var(--noche-sup); }
@media (max-width: 900px) {
  body.sfv-dark .sfv-sidebar { background: #061a1d !important; }
}

/* 7.17 · LA CALCULADORA (en claro y en oscuro): cada ficha conserva su color (cian, verde
   azulado, verde, violeta) con el glifo blanco; la elegida se marca con su filo, no con un
   bloque. */
body:not(.sfv-dark) .calc-mode { background: #ffffff; border-color: #e6e7e3; color: #3c3c3b; }
body:not(.sfv-dark) .calc-mode:hover { border-color: #cfd6d0; }
body:not(.sfv-dark) .calc-mode i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -12px rgba(13, 43, 24, .6); }
body:not(.sfv-dark) .calc-mode.on {
  background: #ffffff; border-color: rgba(7, 97, 44, .5); color: #07612c;
  box-shadow: 0 0 0 1px rgba(7, 97, 44, .22), 0 16px 36px -24px rgba(13, 43, 24, .35);
}
body.sfv-dark .calc-mode { background: var(--noche-sup); border-color: var(--noche-filo); color: #ffffff; }
body.sfv-dark .calc-mode:hover { border-color: var(--noche-filo-fuerte); }
body.sfv-dark .calc-mode i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -10px rgba(0, 0, 0, .9); }
body.sfv-dark .calc-mode.on {
  background: var(--noche-sup); border-color: rgba(94, 234, 212, .55); color: #ffffff;
  box-shadow: 0 0 0 1px rgba(94, 234, 212, .25), 0 18px 40px -26px rgba(0, 0, 0, .85), 0 0 30px -10px rgba(45, 212, 191, .45);
}

/* 7.18 · PRIORIDADES Y AVISOS DEL PERÍODO en oscuro: las píldoras pastel encendían la tabla;
   pasan a un tinte hondo de su tono con la letra en blanco. La nota del período, sin dorado. */
body.sfv-dark .prio-ALTA  { background: rgba(242, 168, 162, .14); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(242, 168, 162, .38); }
body.sfv-dark .prio-MEDIA { background: rgba(246, 194, 147, .13); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(246, 194, 147, .36); }
body.sfv-dark .prio-BAJA  { background: rgba(168, 201, 238, .12); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(168, 201, 238, .34); }
body.sfv-dark .prio-sin   { background: rgba(255, 255, 255, .06); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
body.sfv-dark .dash-periodo-nota { color: #ffffff; background: rgba(217, 150, 43, .10); border-color: rgba(217, 150, 43, .36); }
body.sfv-dark .dash-periodo-nota > .fa { color: #f0b35a; }
body.sfv-dark .dash-periodo-vertodo { color: #ffffff; background: rgba(217, 150, 43, .24); }
body.sfv-dark .dash-periodo-vertodo:hover { background: rgba(217, 150, 43, .34); }
/* Llamar y WhatsApp (ficha del lead): el verde liso del claro, con la letra en blanco —en
   oscuro eran un menta pastel con letra oscura—. */
body.sfv-dark .sfv-btn.success { background: #1f7a44; border-color: transparent; color: #ffffff; box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .8); }
body.sfv-dark .sfv-btn.success:hover { background: #248a4d; }
body.sfv-dark .sfv-btn.success .fa { color: #ffffff; }

/* 7.19 · EL OSCURO DESDE EL PRIMER CUADRO: mientras la página carga y todavía no tiene la clase
   del modo oscuro, la marca temprana del <head> (html.sfv-oscuro-pre) ya pinta el grafito, para
   que no se vea un fondo claro de paso (ver app.js, antes de sfvBootstrapSesionSync). */
html.sfv-oscuro-pre, html.sfv-oscuro-pre body { background-color: #051619; }
html.sfv-oscuro-pre body:not(.sfv-dark)::before { background: #051619; filter: none; transform: none; opacity: 1; }
html.sfv-oscuro-pre body:not(.sfv-dark)::after { display: none; }

/* ── 8 · EL ÚLTIMO PULIDO (30-sep-2026: «mejóralas un poco más») ──────────────────────────── */

/* 8.1 · LOS INDICADORES SIN HUÉRFANOS: la rejilla del Inicio llenaba de a cuatro y el quinto
   indicador quedaba solo en una fila (Efectividad). En pantalla ancha, cinco van en una fila y
   seis en dos de tres. Vale para los dos modos. */
@media (min-width: 1200px) {
  .dash-kpis:has(> .dash-kpi:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dash-kpis:has(> .dash-kpi:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 8.2 · SIN DORADO EN EL TABLERO POR OPERADOR (los dos modos): la columna del líder traía su
   estrella, su contador y su marca en dorado desde el JS (screens.js pinta `--kb-c` y el fondo
   en línea: de ahí el !important), y la suma de cada columna en dorado. La del líder pasa al
   verde de la casa en claro y al turquesa en oscuro; las sumas, a tinta y a blanco. */
body:not(.sfv-dark) .kb-col-lider { --kb-c: #1f7a44 !important; }
body:not(.sfv-dark) .kb-col-lider .kb-chip, body:not(.sfv-dark) .kb-col-lider .kb-count { background: linear-gradient(135deg, #3f8352, #1e4a30) !important; }
body:not(.sfv-dark) .kb-lider-badge { background: linear-gradient(135deg, #3f8352, #1e4a30); }
body:not(.sfv-dark) .kb-col-sub b { color: #1d1d1b !important; }
body.sfv-dark .kb-col-lider { --kb-c: #2dd4bf !important; }
body.sfv-dark .kb-col-lider .kb-chip, body.sfv-dark .kb-col-lider .kb-count { background: linear-gradient(135deg, #0f766e, #166b44) !important; }
body.sfv-dark .kb-lider-badge { background: linear-gradient(135deg, #0f766e, #166b44); }
body.sfv-dark .kb-col-sub b { color: #ffffff !important; }

/* 8.3 · LO QUE AVISA, EN ÁMBAR Y NO EN DORADO (oscuro): leads sin operador, una sesión abierta
   en dos equipos. */
/* El tinte ámbar sobre el turquesa se mezclaba en un oliva apagado: las notas de aviso van sobre
   la superficie, con el filo y el ícono en ámbar. */
body.sfv-dark .adm-huerfanos { background: var(--noche-campo); border-color: rgba(240, 179, 90, .45); }
body.sfv-dark .dash-periodo-nota { background: var(--noche-campo); border-color: rgba(240, 179, 90, .45); }
body.sfv-dark .dash-periodo-vertodo { background: rgba(240, 179, 90, .18); }
body.sfv-dark .dash-periodo-vertodo:hover { background: rgba(240, 179, 90, .28); }
body.sfv-dark .adm-huerfanos i.fa-user-plus { color: #f0b35a; }
body.sfv-dark .qt-aviso { background: rgba(217, 150, 43, .14); border-color: rgba(217, 150, 43, .38); color: #ffffff; }

/* 8.4 · LA FICHA DEL LEAD en oscuro: la cabecera pasa del verde bosque al turquesa profundo,
   con su tramo de turquesa a verde abajo. */
body.sfv-dark .sfv-drawer-head {
  position: relative; background: linear-gradient(180deg, #0c3538, #07262a);
  box-shadow: inset 0 -1px 0 rgba(94, 234, 212, .14);
}
body.sfv-dark .sfv-drawer-head::after {
  content: ""; position: absolute; left: 18px; bottom: -1px; width: 48px; height: 2px; border-radius: 2px; background: var(--noche-tramo);
}

/* 8.5 · LA BARRA DE HERRAMIENTAS DE LAS TABLAS (Agrupar, Filtro, Columnas…): el botón abierto o
   con filtro puesto, en turquesa (era un bloque verde). Sus menús, superficie con filete. */
body.sfv-dark .sfvtb-btn:hover { background: rgba(94, 234, 212, .08); border-color: rgba(94, 234, 212, .3); color: #ffffff; }
body.sfv-dark .sfvtb-btn.on, body.sfv-dark .sfvtb-btn.open-on { background: rgba(94, 234, 212, .12); border-color: rgba(94, 234, 212, .45); color: #ffffff; }
body.sfv-dark .sfvtb-btn:hover > .fa:first-child, body.sfv-dark .sfvtb-btn.on > .fa:first-child { color: var(--noche-verde); }
body.sfv-dark .sfvtb-pop, body.sfv-dark .sfv-notif {
  background: linear-gradient(180deg, rgba(94, 234, 212, .05), rgba(94, 234, 212, 0) 120px), var(--noche-sup);
  border: 1px solid var(--noche-filo);
  box-shadow: 0 28px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(94, 234, 212, .06);
}
body.sfv-dark .sfvtb-item:hover { background: rgba(94, 234, 212, .07); }
body.sfv-dark .sfvtb-item.sel, body.sfv-dark .sfvtb-item.sel > .fa:first-child, body.sfv-dark .sfvtb-item .chk { color: var(--noche-verde); }
body.sfv-dark .sfv-notif-item.unread { background: rgba(94, 234, 212, .06); }

/* 8.6 · «AYUDA Y NOVEDADES» en oscuro: lo no visto con su filo de turquesa a verde y la marca
   NUEVO en turquesa. */
body.sfv-dark .ayuda-nov { background: var(--noche-campo); border-color: var(--noche-filo); }
body.sfv-dark .ayuda-nov-new {
  border-left: 1px solid var(--noche-filo);
  background: linear-gradient(180deg, #2dd4bf, #33d269) left top / 3px 100% no-repeat, var(--noche-sup);
}
body.sfv-dark .sfv-chip-nuevo { background: rgba(94, 234, 212, .12); color: var(--noche-verde); border-color: rgba(94, 234, 212, .4); }

/* 8.7 · LA BARRA DE ARRIBA en oscuro: debajo, en lugar del filete liso, una línea de luz que va
   del turquesa al verde y se apaga en los extremos. */
body.sfv-dark .sfv-topbar, body.sfv-dark.sidebar-claro .sfv-topbar { border-bottom-color: transparent; }
body.sfv-dark .sfv-topbar::after {
  content: ""; display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(45, 212, 191, 0), rgba(45, 212, 191, .55) 30%, rgba(51, 210, 105, .45) 70%, rgba(51, 210, 105, 0));
}

/* 8.8 · LOS DETALLES QUE SE NOTAN SIN VERLOS (oscuro): el texto seleccionado y las barras de
   desplazamiento, en turquesa. */
body.sfv-dark ::selection { background: rgba(45, 212, 191, .35); color: #ffffff; }
body.sfv-dark { scrollbar-color: #1f4f52 transparent; }
body.sfv-dark ::-webkit-scrollbar-thumb { background: #1f4f52; border-radius: 99px; }
body.sfv-dark ::-webkit-scrollbar-thumb:hover { background: #2a6a6c; }
body.sfv-dark ::-webkit-scrollbar-track { background: transparent; }

/* 8.9 · LOS NÚMEROS GRANDES en oscuro: blancos, con cifras alineadas y un leve brillo turquesa
   (sin el resplandor lima de antes). */
body.sfv-dark .dash-kpi-val, body.sfv-dark .sfv-kpi-value {
  font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(45, 212, 191, .22);
}

/* ── 9 · EL COLOR DE VUELTA (30-sep-2026) ─────────────────────────────────────────────────────
   «En versión light y dark a los íconos colócales color; métele más color y vida a todo, se ve
   muy genérico y simple; me gustaba un poco más en ese aspecto colorido la versión anterior.»
   La estructura limpia se queda (tarjetas con filete, circuito, turquesa de noche); vuelve el
   COLOR: cada pantalla del menú con su ficha de color, las fichas de los indicadores con el suyo,
   la banda del mensaje del día, los títulos en degradado. Sin dorado: lo que era dorado pasa a
   ámbar. Nada se alza al pasar el cursor ni se mueve al cargar. */

/* 9.1 · UNA FICHA DE COLOR POR PANTALLA (los dos modos). Degradados de un mismo tono, del claro
   al hondo, con el glifo blanco encima.

   SOBRE EL CONTRASTE. Acá decía «todos con el glifo blanco a más de 3:1» y no era cierto: el
   extremo claro de Inicio da 2,28:1, el de Agenda 2,26:1 y el de la Ayuda 1,86:1. Lo que
   sostiene la legibilidad es que el glifo cae sobre un degradado a 135° y el extremo hondo —que
   es el que queda debajo del trazo— sí pasa de sobra. Se deja dicho como es: una regla que se
   afirma y no se cumple es peor que no tenerla, porque el próximo que agregue una ficha va a
   creer que ya está comprobada. Quien quiera comprobarlo de verdad, que mida sobre el píxel del
   glifo y no sobre el primer color del degradado.

   TODA PANTALLA DEL MENÚ NECESITA SU FICHA. Sin `background` el glifo es blanco sobre blanco.
   Lo vigila `pruebas/comprobar-fichas-menu.js`. */
.sfv-nav a[data-nav] > i.fa, .sfv-nav a.sfv-nav-ayuda > i.fa, .sfv-mod > i.sfv-mod-ico {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 14px -8px rgba(13, 43, 24, .55) !important;
  color: #ffffff !important;
}
.sfv-nav a[data-nav="inicio"] > i.fa           { background: linear-gradient(135deg, #22c55e, #15803d) !important; }
.sfv-nav a[data-nav="leads"] > i.fa            { background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; }
.sfv-nav a[data-nav="clientes"] > i.fa         { background: linear-gradient(135deg, #10b981, #047857) !important; }
.sfv-nav a[data-nav="agenda"] > i.fa           { background: linear-gradient(135deg, #fb923c, #c2410c) !important; }
.sfv-nav a[data-nav="calc"] > i.fa             { background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; }
.sfv-nav a[data-nav="admin-leads"] > i.fa      { background: linear-gradient(135deg, #14b8a6, #0f766e) !important; }
.sfv-nav a[data-nav="supervision"] > i.fa      { background: linear-gradient(135deg, #6366f1, #4338ca) !important; }
.sfv-nav a[data-nav="leads-importados"] > i.fa { background: linear-gradient(135deg, #06b6d4, #0e7490) !important; }
.sfv-nav a[data-nav="aliados"] > i.fa          { background: linear-gradient(135deg, #ec4899, #be185d) !important; }
.sfv-nav a[data-nav="agentes"] > i.fa          { background: linear-gradient(135deg, #d946ef, #a21caf) !important; }
.sfv-nav a[data-nav="catalogos"] > i.fa        { background: linear-gradient(135deg, #0ea5e9, #0369a1) !important; }
.sfv-nav a[data-nav="config"] > i.fa           { background: linear-gradient(135deg, #64748b, #334155) !important; }
.sfv-nav a[data-nav="sistema"] > i.fa          { background: linear-gradient(135deg, #f43f5e, #be123c) !important; }
/* ENVÍOS MASIVOS: ámbar hondo. Faltaba —se agregó la pantalla el 16-oct y nadie le puso ficha—,
   y sin `background` el glifo quedaba BLANCO SOBRE BLANCO: una placa vacía con su aro. Ámbar
   porque es el único tono que no estaba en uso y porque §9 ya dice que lo que era dorado pasa a
   ámbar; hondo (600→800) y no claro, para no confundirlo con el naranja de la Agenda. */
.sfv-nav a[data-nav="envios"] > i.fa           { background: linear-gradient(135deg, #d97706, #92400e) !important; }
.sfv-nav a.sfv-nav-ayuda > i.fa                { background: linear-gradient(135deg, #2dd4bf, #0d9488) !important; }
/* Los MÓDULOS (CRM, Sistema) son encabezados de grupo, no pantallas: van en pizarra. Con el menú
   comprimido, el de Sistema y «Estado del sistema» eran el mismo corazón rojo y parecían repetidos. */
.sfv-mod > i.sfv-mod-ico.fa-line-chart,
.sfv-mod > i.sfv-mod-ico.fa-heartbeat          { background: linear-gradient(135deg, #475569, #1e293b) !important; }
body.sfv-dark .sfv-mod > i.sfv-mod-ico.fa-line-chart,
body.sfv-dark .sfv-mod > i.sfv-mod-ico.fa-heartbeat { background: linear-gradient(135deg, #3b5561, #16303a) !important; }
/* Al pasar y en lo activo, la ficha se enciende un punto y lleva un aro fino (no se alza). */
.sfv-nav a:hover > i.fa { filter: brightness(1.08) saturate(1.1); }
body:not(.sfv-dark) .sfv-nav a.active > i.fa { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 2px #ffffff, 0 0 0 3.5px rgba(20, 184, 166, .55) !important; }
body.sfv-dark .sfv-sidebar .sfv-nav a.active > i.fa { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 2px #061a1d, 0 0 0 3.5px rgba(94, 234, 212, .6), 0 0 18px -4px rgba(45, 212, 191, .6) !important; }

/* 9.2 · SIN DORADO en las fichas que lo traían por clase. */
.sfv-ic-gold { background: linear-gradient(135deg, #f59e0b, #b45309); }

/* 9.3 · LOS AVISOS DE «POR ATENDER» en oscuro: el tinte ámbar o rojo sobre el turquesa se volvía
   un marrón apagado; ahora el color entra por la izquierda y se funde con la superficie. */
body.sfv-dark .atender-aviso { background: linear-gradient(90deg, rgba(245, 158, 11, .16), rgba(245, 158, 11, 0) 65%), var(--noche-campo); border-color: rgba(245, 158, 11, .4); }
body.sfv-dark .atender-aviso.nivel-escala { background: linear-gradient(90deg, rgba(239, 68, 68, .18), rgba(239, 68, 68, 0) 65%), var(--noche-campo); border-color: rgba(239, 68, 68, .45); }
body.sfv-dark .atender-aviso-txt b { color: #fbbf24; }
body.sfv-dark .atender-aviso.nivel-escala .atender-aviso-txt b { color: #fca5a5; }

/* ── 10 · LO QUE ENCONTRÓ EL BARRIDO RESPONSIVE (30-sep-2026, pruebas/barrido-responsive.mjs) ── */

/* 10.1 · LA BARRA DE ACCIONES MASIVAS (Mis Leads, Leads de Equipo): va anclada al centro con
   `left: 50%`, y así solo podía usar la MITAD del ancho de la pantalla: los botones se
   apretujaban en dos renglones y «Limpiar» quedaba cortado. Ahora mide lo que su contenido
   (hasta el ancho de la pantalla menos un margen) y los botones no se parten; si no caben, bajan
   de renglón enteros. En el teléfono sigue de borde a borde. */
.adm-bulk-bar { width: max-content; max-width: calc(100vw - 32px); }
.adm-bulk-bar .sfv-btn { white-space: nowrap; flex-shrink: 0; }
.abb-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .adm-bulk-bar { width: auto; max-width: none; } .abb-actions { justify-content: center; } }
/* Y con color: un paño hondo de turquesa a verde (era un gris verdoso apagado), los botones
   secundarios translúcidos —como pedía su regla original, que la capa de botones pisaba— y el
   de eliminar, en rojo translúcido. */
body:not(.sfv-dark) .adm-bulk-bar {
  background: linear-gradient(135deg, #0c3a36, #0f3323 60%, #123b27);
  box-shadow: 0 18px 44px -12px rgba(8, 40, 30, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
body.sfv-dark .adm-bulk-bar {
  background: linear-gradient(135deg, #0f3437, #0a2629); border: 1px solid rgba(94, 234, 212, .3);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .8), 0 0 30px -10px rgba(45, 212, 191, .45);
}
body .adm-bulk-bar .sfv-btn.secondary { background: rgba(255, 255, 255, .12); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
body .adm-bulk-bar .sfv-btn.secondary:hover { background: rgba(255, 255, 255, .2); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
body .adm-bulk-bar .sfv-btn.secondary .fa { color: #ffffff; }
body .adm-bulk-bar .sfv-btn.danger-ghost { background: rgba(239, 68, 68, .16); border-color: rgba(252, 165, 165, .5); color: #fee2e2; }
body .adm-bulk-bar .sfv-btn.danger-ghost:hover { background: rgba(239, 68, 68, .28); }

/* 10.2 · LA TABLA DE ALIADOS: con 1024 px de ancho, «Clientes» y «Ganados» no cabían en su
   columna y se cortaban. Columnas repartidas de nuevo (screens.js) y menos relleno a los lados de
   las cifras. */
.aliados-tabla th.num, .aliados-tabla td.num { padding-left: 6px; padding-right: 6px; }

/* 10.3 · MIENTRAS LA BARRA DE ACCIONES ESTÁ ABIERTA, nada se le pone encima: en tableta y en el
   teléfono el botón de Aurelion tapaba «Eliminar seleccionados», y los avisos (toasts) caían
   sobre la barra. Aurelion se aparta hasta que se suelta la selección, y los avisos suben por
   encima de la barra (en el teléfono, arriba de la pantalla). */
body:has(.adm-bulk-bar.show) .sfv-mascota { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s; }
body:has(.adm-bulk-bar.show) .sfv-toasts { bottom: 160px; }
@media (max-width: 640px) {
  body:has(.adm-bulk-bar.show) .sfv-toasts { top: 70px; bottom: auto; }
}

/* 10.4 · EL MENÚ COMPRIMIDO (solo íconos): «Ayuda y novedades» dejaba su rótulo a la vista,
   partido en dos renglones y empujando el ícono fuera de la tira —su <span> no llevaba la clase
   `sfv-nav-lbl` que esconden los demás (app.js, corregido)—. Y el punto verde de «hay novedades»,
   que en el menú abierto va al final del renglón, pasa a la esquina de la ficha. */
@media (min-width: 901px) {
  .sfv-app.menu-collapsed .sfv-nav-punto { top: 5px; right: 5px; transform: none; width: 9px; height: 9px; box-shadow: 0 0 0 2px #ffffff; }
  body.sfv-dark .sfv-app.menu-collapsed .sfv-nav-punto { box-shadow: 0 0 0 2px #061a1d; }
}

/* 10.5 · SUPERVISIÓN: la marca de un operador pausado que todavía tiene leads a su nombre. */
.sup-pausado { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; background: rgba(217, 87, 62, .12); color: #a8412c; box-shadow: inset 0 0 0 1px rgba(217, 87, 62, .35); }
body.sfv-dark .sup-pausado { background: rgba(240, 138, 120, .14); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(240, 138, 120, .45); }

/* ── 11 · LOS INDICADORES ECONÓMICOS (1-oct-2026, dashboard.js → dashEconomiaHTML) ──
   La misma tarjeta del sistema (.dash-kpi) con dos renglones más: QUÉ MIDE (la descripción, en
   tenue) y el dato que lo pone en contexto (abajo, tras un filete, alineado en todas las placas
   de la fila aunque las descripciones tengan distinto largo). Nada se mueve al cargar. */
.dash-eco-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 10px; }
.dash-eco-sub { font-size: 12px; color: var(--sfv-muted); }
#dashEconomia:not(:empty) { margin-top: 20px; }
.dash-eco-grid { margin-bottom: 18px; }
.dash-eco { display: flex; flex-direction: column; min-width: 0; }
.dash-eco .dash-kpi-val { margin-top: 10px; }
.dash-eco .dash-kpi-label { font-weight: 800; color: var(--sfv-ink); }
.dash-eco-desc { font-size: 11.5px; line-height: 1.45; color: var(--sfv-muted); margin: 4px 0 12px; text-wrap: pretty; }
.dash-eco-dato { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--sfv-line); font-size: 12px; line-height: 1.5; color: var(--sfv-graphite); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-eco-dato b { color: var(--sfv-ink); font-weight: 800; }
/* La pérdida en el rojo de la casa, apagado: se lee como alerta sin gritar. */
.dash-eco[data-eco="perdido"] .dash-kpi-val { color: #b42318; }
body.sfv-dark .dash-eco .dash-kpi-label, body.sfv-dark .dash-eco-dato b { color: #ffffff; }
body.sfv-dark .dash-eco-desc, body.sfv-dark .dash-eco-sub { color: rgba(255, 255, 255, .7); }
body.sfv-dark .dash-eco-dato { color: rgba(255, 255, 255, .86); border-top-color: rgba(255, 255, 255, .12); }
body.sfv-dark .dash-eco[data-eco="perdido"] .dash-kpi-val { color: #ffb4a8; text-shadow: none; }   /* el brillo turquesa ensucia el salmón */

/* ── 12 · LOS AVISOS DE ACTUALIZACIÓN (1-oct-2026, sfv-coach.js → sfvAvisoActualizacion) ──
   La lista de lo que cambia, dentro del aviso flotante: cada cambio en su renglón con una
   viñeta verde, y la nota de «termine primero» aparte, en tenue. Son <span> en bloque porque
   el aviso pinta su texto dentro de un <p>, que no admite listas. */
.sfv-act-lista { display: flex; flex-direction: column; gap: 5px; margin: 7px 0 2px; }
.sfv-act-item { display: block; position: relative; padding-left: 14px; line-height: 1.4; color: var(--sfv-ink); }
.sfv-act-item::before { content: ''; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #3f8352; }
.sfv-act-mas, .sfv-act-nota { display: block; margin-top: 6px; font-size: 12px; color: var(--sfv-muted); line-height: 1.4; }
body.sfv-dark .sfv-act-item { color: #ffffff; }
body.sfv-dark .sfv-act-item::before { background: #2dd4bf; }
body.sfv-dark .sfv-act-mas, body.sfv-dark .sfv-act-nota { color: rgba(255, 255, 255, .72); }

/* ── 13 · PERSONA NATURAL O EMPRESA (02-oct-2026, leads.js → leadPersona, data.js → sfvChipEmpresa) ──
   La marca «EMPRESA» junto al nombre (listas, tablero, ficha) y la pista bajo el RUC cuando no
   corresponde a una empresa. La marca es sobria: pizarra con filete, sin color de alarma. */
.sfv-chip-empresa { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; vertical-align: middle; white-space: nowrap;
  color: #1f5561; background: rgba(31, 85, 97, .08); box-shadow: inset 0 0 0 1px rgba(31, 85, 97, .28); }
.sfv-chip-empresa .fa { font-size: 10px; }
body.sfv-dark .sfv-chip-empresa { color: #cfeff0; background: rgba(94, 234, 212, .10); box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .32); }
.sfv-hint.sfv-hint-mal { color: #b42318; font-weight: 600; }
body.sfv-dark .sfv-hint.sfv-hint-mal { color: #ffb4a8; }
.lead-persona-seg { flex-wrap: wrap; }
.lead-contacto { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--sfv-muted); }
body.sfv-dark .lead-contacto { color: rgba(255, 255, 255, .7); }
/* En la cabecera verde de la ficha, la marca y el contacto en claro (sobre el verde hondo, el
   pizarra y el gris no se leían). */
.fic-hero .sfv-chip-empresa, body.sfv-dark .fic-hero .sfv-chip-empresa { color: #ffffff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); }
.fic-hero .lead-contacto, body.sfv-dark .fic-hero .lead-contacto { color: rgba(255, 255, 255, .86); }
/* Los campos que se escriben en MAYÚSCULAS no gritan su texto de ayuda: «Con quién se habla
   (opcional)», no «CON QUIÉN SE HABLA (OPCIONAL)». */
.sfv-mayus::placeholder { text-transform: none; }