/* ============================================================================
   LA LÍNEA DEL SITIO WEB EN EL CRM (18-sep-2026)

   Pedido del usuario: «esta barra en degradado de los titulares: no me gusta el dorado,
   que solo sea verde como el proyecto del website; copia los css y estilos de ese
   proyecto». Lo que sigue está copiado del estándar del sitio (Website Next,
   app/globals.css, «ESTÁNDAR DEL SITIO, 16 sep 2026»), adaptado a las clases del CRM:

     · el degradado verde de la casa: #3f8352 → #1e4a30 (botón «Aprende a invertir»,
       palabra clave de los titulares, barra baja de las placas);
     · el subrayado: #33d269 → #07612c con halo (enlaces del menú del sitio);
     · el barrido de luz blanca que cruza titulares (cada 9 s) y botones (al pasar);
     · las placas claras: borde menta y sombra verde profunda al pasar (sin alzarse y sin la
       barra baja: el usuario retiró las dos);
     · el foco que sigue al cursor (spotlight) en las tarjetas;
     · la curva de la casa: cubic-bezier(.4, 0, .2, 1).

   Solo en modo claro donde cambia un color (el modo oscuro no se toca, decisión del
   usuario). Ni una gota de dorado. Con «reducir movimiento» nada barre ni se mueve.
   ============================================================================ */
:root {
  --web-verde-a: #3f8352;
  --web-verde-b: #1e4a30;
  --web-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- TITULARES ---------- */
/* La barra bajo el título: solo verde, con el halo del subrayado del sitio. */
.sfv-screen-title::after {
  background: linear-gradient(90deg, #33d269, #07612c);
  box-shadow: 0 0 8px rgba(51, 210, 105, .6);
}
/* El título con el degradado del sitio. SIN el barrido de luz en bucle del sitio: en el CRM
   el usuario lo vio como una animación «bugeada, con delay» (18-sep-2026); el degradado va
   fijo y la banda de luz queda aparcada fuera del texto. Solo en claro: sobre el fondo
   oscuro ese degradado no se lee (abajo va el claro). */
body:not(.sfv-dark) .sfv-screen-title {
  background-image: linear-gradient(110deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 62%), linear-gradient(90deg, var(--web-verde-a), var(--web-verde-b));
  background-size: 250% 100%, 100% 100%;
  background-position: 250% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Los títulos de sección (h4 de las tarjetas) y los de tarjeta: tinta verde profunda. */
body:not(.sfv-dark) .sfv-sec-head h4 { color: var(--web-verde-b); }

/* ---------- EL BOTÓN VERDE, uno para todo ---------- */
body:not(.sfv-dark) .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success) {
  background: linear-gradient(90deg, var(--web-verde-a), var(--web-verde-b));
  border-color: #2f6b42;
  box-shadow: 0 14px 38px -14px rgba(63, 131, 82, .7);
  transition: transform .3s var(--web-ease), box-shadow .3s var(--web-ease), filter .3s var(--web-ease);
}
body:not(.sfv-dark) .sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):not(.warning):not(.success):hover {
  background: linear-gradient(90deg, var(--web-verde-a), var(--web-verde-b));
  border-color: #2f6b42;
  filter: brightness(1.1);   /* sin translateY: el botón no se alza (fase 0, U-02) */
  box-shadow: 0 14px 38px -10px rgba(63, 131, 82, .85);
}
/* El barrido del sitio: un degradado que se desplaza por un pseudo del tamaño del botón. */
.sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.25) 50%, transparent 58%);
  background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat;
  transition: background-position .7s ease-out;
}
.sfv-btn:not(.secondary):not(.ghost):not(.danger):not(.danger-ghost):hover::after { background-position: 0% 0; }
.sfv-btn > *:not(.sfv-ripple) { position: relative; z-index: 1; }

/* ---------- PLACAS Y TARJETAS ---------- */
/* Se levantan, el borde se tiñe de menta, la sombra es verde profunda, y una barra de 2 px
   crece desde la izquierda por abajo (la «placa-clara» del sitio). */
.sfv-card, .sfv-mini-card, .dash-kpi, .sfv-kpi, .dash-panel { transition: transform .3s var(--web-ease), border-color .3s var(--web-ease), box-shadow .3s var(--web-ease), background-color .3s var(--web-ease); }
/* SIN ALZARSE (18-sep-2026: «a lo que paso el mouse sobre un módulo se mueve o hace el efecto
   de alzarse, medio raro; retíralo de todos los módulos»). La tarjeta responde con el borde,
   la sombra y el foco; nada se desplaza. */
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 {
  transform: none;
  border-color: rgba(51, 210, 105, .5);
  box-shadow: 0 24px 48px -24px rgba(7, 97, 44, .38);
}
.sfv-card:hover, .sfv-mini-card:hover, .dash-kpi:hover, .sfv-kpi:hover, .dash-panel:hover, .calc-mode:hover, .kb-card:hover, .cfg-theme:hover, .aud-hstat:hover, .ie-exp-btn:hover { transform: none !important; }
/* (La barra baja de 2 px que crecía al pasar el puntero se retiró: «no queda bien esa
   animación», 18-sep-2026. Ni en claro ni en oscuro.) */

/* El foco que sigue al cursor (spotlight-card del sitio): un resplandor menta suave en el
   punto donde está el puntero. --mx/--my los pone sfvWebSpotlight (app.js), que también crea
   el <span class="sfv-spot"> la primera vez. Va con z-index -1 dentro del contexto de la
   tarjeta (isolation): encima del fondo, debajo del contenido, sin tocar a los hijos. */
body:not(.sfv-dark) .sfv-card, body:not(.sfv-dark) .sfv-mini-card, body:not(.sfv-dark) .dash-panel { position: relative; isolation: isolate; }
.sfv-spot {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; z-index: -1;
  transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(51, 210, 105, .16), transparent 62%);
}
body:not(.sfv-dark) .sfv-card:hover > .sfv-spot, body:not(.sfv-dark) .sfv-mini-card:hover > .sfv-spot, body:not(.sfv-dark) .dash-panel:hover > .sfv-spot { opacity: 1; }

/* ---------- MENÚ LATERAL (pedido del 18-sep-2026: «mejorar el menú», «acá también animar iconos») ----------
   Cada entrada lleva su icono en una placa pequeña (30 px, esquinas de 9): en reposo, tinta
   sobre un verde casi transparente; al pasar el puntero, la placa se pinta con el degradado
   menta del CRM y el icono se vuelve blanco; en la pantalla activa (píldora verde) la placa es
   un blanco translúcido. Los módulos (CRM, Sistema) llevan la placa grande con el degradado.
   Los iconos son los mismos vídeos Remotion de las placas: en reposo se tiñen de tinta con
   `filter: brightness(0)` (conserva el alfa) y al pasar o en el activo quedan blancos. */
.sfv-nav a > i.fa, .sfv-mod > i.sfv-mod-ico {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; font-size: 14px;
  transition: background .3s var(--web-ease), color .3s var(--web-ease), box-shadow .3s var(--web-ease);
}
.sfv-app.menu-collapsed .sfv-nav a > i.fa { width: 30px; }
.sfv-mod > i.sfv-mod-ico { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; font-size: 15px; }
body:not(.sfv-dark) .sfv-nav a > i.fa { background: rgba(7, 97, 44, .08); color: var(--sfv-ink); opacity: 1; }
/* El verde de las placas del menú es el degradado menta que el CRM ya tenía (#1fb058 → #0e8043),
   el mismo de la píldora activa y de los botones de antes: el verde oscuro del sitio, en un
   icono, al usuario no le gustó (18-sep-2026). */
body:not(.sfv-dark) .sfv-nav a:hover > i.fa { background: linear-gradient(135deg, #1fb058, #0e8043); color: #fff; box-shadow: 0 6px 14px -6px rgba(31, 176, 88, .55); }
body:not(.sfv-dark) .sfv-nav a.active > i.fa { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }
body:not(.sfv-dark) .sfv-mod > i.sfv-mod-ico { background: linear-gradient(135deg, #1fb058, #0e8043); color: #fff; box-shadow: 0 6px 14px -7px rgba(31, 176, 88, .5); }
body:not(.sfv-dark) .sfv-nav a { transition: background-color .3s var(--web-ease), color .3s var(--web-ease); }
/* El vídeo del icono: tinta en reposo, blanco al pasar y en el activo (claro); en oscuro el
   icono ya es claro y el vídeo blanco va tal cual, apenas atenuado en reposo. */
.sfv-nav a > i.fa > video.sfv-ico-anim, .sfv-mod > i.sfv-mod-ico > video.sfv-ico-anim { transition: opacity .25s, filter .3s var(--web-ease); }
body:not(.sfv-dark) .sfv-nav a > i.fa.sfv-anim-lista > video.sfv-ico-anim { filter: brightness(0); opacity: .82; }
body:not(.sfv-dark) .sfv-nav a:hover > i.fa.sfv-anim-lista > video.sfv-ico-anim,
body:not(.sfv-dark) .sfv-nav a.active > i.fa.sfv-anim-lista > video.sfv-ico-anim { filter: none; opacity: 1; }
body.sfv-dark .sfv-nav a > i.fa.sfv-anim-lista > video.sfv-ico-anim { opacity: .85; }
body.sfv-dark .sfv-nav a:hover > i.fa.sfv-anim-lista > video.sfv-ico-anim, body.sfv-dark .sfv-nav a.active > i.fa.sfv-anim-lista > video.sfv-ico-anim { opacity: 1; }

/* ---------- MENÚ EN MODO OSCURO (18-sep-2026: «en modo oscuro no se aprecian bien los colores
   en el menú») ---------- La misma estructura que en claro, con los tonos del tema oscuro:
   entradas en gris-verde translúcido con texto claro, placa gris translúcida con el icono
   claro; al pasar, la placa con el degradado menta e icono blanco; la activa, píldora menta
   con la placa en blanco translúcido; módulos con la placa menta. Va con la especificidad de
   `body.sfv-dark.sidebar-claro …` de crm.css, que es la combinación que se ve en la captura. */
body.sfv-dark .sfv-sidebar .sfv-nav a, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-nav a { background: rgba(255, 255, 255, .05); color: #dfeee4; }
body.sfv-dark .sfv-sidebar .sfv-nav a:hover, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-nav a:hover { background: rgba(51, 210, 105, .14); color: #fff; }
body.sfv-dark .sfv-sidebar .sfv-nav a.active, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-nav a.active { background: var(--sfv-activo); color: #fff; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
body.sfv-dark .sfv-sidebar .sfv-nav a > i.fa { background: rgba(255, 255, 255, .09); color: #e4f9ed; opacity: 1; }
body.sfv-dark .sfv-sidebar .sfv-nav a:hover > i.fa { background: linear-gradient(135deg, #1fb058, #0e8043); color: #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
body.sfv-dark .sfv-sidebar .sfv-nav a.active > i.fa { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }
body.sfv-dark .sfv-sidebar .sfv-mod, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-mod { background: rgba(255, 255, 255, .06); color: #eaf6e6; }
body.sfv-dark .sfv-sidebar .sfv-mod:hover, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-mod:hover { background: rgba(255, 255, 255, .10); }
body.sfv-dark .sfv-sidebar .sfv-mod.aqui, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-mod.aqui { background: rgba(51, 210, 105, .16); box-shadow: inset 3px 0 0 var(--sfv-mint); }
body.sfv-dark .sfv-sidebar .sfv-mod-txt b, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-mod-txt b { color: #fff; }
body.sfv-dark .sfv-sidebar .sfv-mod-txt i, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-mod-txt i { color: rgba(255, 255, 255, .72); }
body.sfv-dark .sfv-sidebar .sfv-mod-caret, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-mod-caret { color: rgba(255, 255, 255, .7); }
body.sfv-dark .sfv-sidebar .sfv-mod > i.sfv-mod-ico { background: linear-gradient(135deg, #1fb058, #0e8043); color: #fff; box-shadow: 0 6px 14px -7px rgba(0, 0, 0, .5); }
body.sfv-dark .sfv-sidebar .sfv-nav-group, body.sfv-dark.sidebar-claro .sfv-sidebar .sfv-nav-group { color: #7ee0a3; }
body.sfv-dark .sfv-sidebar .sfv-mod-cuerpo .sfv-nav::before { background: rgba(255, 255, 255, .14); }
body.sfv-dark .sfv-sidebar .sfv-nav a > i.fa.sfv-anim-lista > video.sfv-ico-anim { opacity: .92; }
body.sfv-dark .sfv-sidebar .sfv-nav a:hover > i.fa.sfv-anim-lista > video.sfv-ico-anim, body.sfv-dark .sfv-sidebar .sfv-nav a.active > i.fa.sfv-anim-lista > video.sfv-ico-anim { opacity: 1; }
/* Tarjetas en oscuro: el mismo lenguaje (borde menta, barra baja, foco), en los tonos del tema. */
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 { border-color: rgba(51, 210, 105, .45); }
body.sfv-dark .sfv-card, body.sfv-dark .sfv-mini-card, body.sfv-dark .dash-panel { position: relative; isolation: isolate; }
body.sfv-dark .sfv-card:hover > .sfv-spot, body.sfv-dark .sfv-mini-card:hover > .sfv-spot, body.sfv-dark .dash-panel:hover > .sfv-spot { opacity: 1; }
body.sfv-dark .sfv-spot { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(51, 210, 105, .12), transparent 62%); }
/* Títulos en oscuro: el degradado claro del sitio (#33d269 → #1a8f45), que sobre fondo oscuro sí se lee. */
body.sfv-dark .sfv-screen-title {
  background-image: linear-gradient(110deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 62%), linear-gradient(90deg, #33d269, #1a8f45);
  background-size: 250% 100%, 100% 100%; background-position: 250% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- BARRA SUPERIOR EN MODO OSCURO (18-sep-2026: «en los botones, sus íconos en modo
   oscuro no se aprecian en ese gris; que todos los íconos sean blancos») ---------- */
body.sfv-dark .sfv-topbar .sfv-tbtn, body.sfv-dark.sidebar-claro .sfv-topbar .sfv-tbtn,
body.sfv-dark .sfv-topbar .sfv-menu-toggle, body.sfv-dark.sidebar-claro .sfv-topbar .sfv-menu-toggle,
body.sfv-dark .sfv-topbar .sfv-tbtn i, body.sfv-dark .sfv-topbar .sfv-menu-toggle i { color: #fff; }
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(51, 210, 105, .18); color: #fff; }
/* El botón del tema, encendido: placa menta con el sol en blanco (era verde sobre verde). */
body.sfv-dark .sfv-topbar .sfv-tbtn.on { background: linear-gradient(135deg, #1fb058, #0e8043); color: #fff; }
body.sfv-dark .sfv-topbar .sfv-tbtn.on i { color: #fff; }
/* La campana con avisos: el icono en blanco, el fondo coral tenue se queda como señal. */
body.sfv-dark .sfv-topbar .sfv-tbtn#sfvBell.has-unread, body.sfv-dark .sfv-topbar .sfv-tbtn#sfvBell.has-unread i { color: #fff; }
/* El buscador y el nombre de quien entra: blanco y blanco atenuado, no gris. */
body.sfv-dark .sfv-topsearch, body.sfv-dark .sfv-topsearch i, body.sfv-dark .sfv-topsearch input { color: #fff; }
body.sfv-dark .sfv-topsearch input::placeholder { color: rgba(255, 255, 255, .6); }
body.sfv-dark .sfv-user .meta b, body.sfv-dark.sidebar-claro .sfv-user .meta b { color: #fff; }
body.sfv-dark .sfv-user .meta span, body.sfv-dark.sidebar-claro .sfv-user .meta span { color: rgba(255, 255, 255, .72); }
body.sfv-dark .sfv-brand .name, body.sfv-dark.sidebar-claro .sfv-brand .name { color: #fff; }
body.sfv-dark .sfv-brand .name small, body.sfv-dark.sidebar-claro .sfv-brand .name small { color: rgba(255, 255, 255, .72); }
/* Iconos de acción neutros en tablas, botones secundarios y pestañas: blancos, no grises. Los
   de color con significado (rojo borrar, azul ver, ámbar avisar, verde éxito) conservan su color. */
body.sfv-dark .sfv-icon-btn:not(.danger):not(.info):not(.warn):not(.success) { color: #fff; }
body.sfv-dark .sfv-btn.secondary, body.sfv-dark .sfv-btn.ghost, body.sfv-dark .cfg-tab { color: #fff; }

/* ---------- MODO OSCURO: NADA DE TEXTO GRIS (18-sep-2026: «NO textos en color gris, TODO
   BLANCO, no se lee bien en oscuro; globalmente») ----------
   Los tres niveles de texto del tema oscuro (tinta / secundario / terciario) se vuelven
   blanco y blanco apenas atenuado, y con ellos todo lo que los usa por variable: rótulos,
   subtítulos, notas, cabeceras de tabla, botones de período, segmentos. Lo que llevaba un
   gris a mano se cubre debajo. Este bloque va al final de la cascada a propósito. */
body.sfv-dark {
  --sfv-ink: #ffffff;
  --sfv-graphite: #ffffff;
  --sfv-muted: #e9f1ec;
  --sfv-on-forest: #ffffff;
  --sfv-on-forest-muted: #e9f1ec;
}
body.sfv-dark .dash-period > button, body.sfv-dark .dash-period-label, body.sfv-dark .dash-period .lbl, body.sfv-dark .sfv-periodo-bar button,
body.sfv-dark .leads-view-seg button, body.sfv-dark .dash-alcance button, body.sfv-dark .sfv-seg button, body.sfv-dark .sfv-select, body.sfv-dark .sfv-input,
body.sfv-dark .sub, body.sfv-dark .sfv-kpi-label, body.sfv-dark .dash-kpi-label, body.sfv-dark .sfv-kpi-sub, body.sfv-dark .dash-kpi-sub,
body.sfv-dark .sfv-sec-head .sub, body.sfv-dark .sfv-sec-head h4, body.sfv-dark .sfv-card-title, body.sfv-dark .sfv-mini-title, body.sfv-dark .sfv-section-title,
body.sfv-dark .sfv-table thead th, body.sfv-dark .hc-tabla th, body.sfv-dark .hc-tabla td, body.sfv-dark .hc-tabla td.num:last-child,
body.sfv-dark .qt-rol, body.sfv-dark .qt-fecha, body.sfv-dark .qt-nada, body.sfv-dark .sfv-nav-group, body.sfv-dark .sfv-mod-txt i, body.sfv-dark .sfv-mod-caret,
body.sfv-dark .rio-int-intro, body.sfv-dark .sis-nota, body.sfv-dark .sis-auto, body.sfv-dark .sis-cab-txt span, body.sfv-dark .dash-periodo-nota, body.sfv-dark .dash-periodo-nota-txt,
body.sfv-dark .sfv-paginator, body.sfv-dark .sfv-paginator button, body.sfv-dark .sfv-empty-t, body.sfv-dark .sfv-empty-ico, body.sfv-dark label, body.sfv-dark .sfv-label,
body.sfv-dark .hc-tabla tr.extra td, body.sfv-dark .adm-tot-cifra, body.sfv-dark .sup-nota, body.sfv-dark .crm-hint, body.sfv-dark .casc-hint, body.sfv-dark small, body.sfv-dark em {
  color: #fff;
}
body.sfv-dark .dash-period > button.on, body.sfv-dark .leads-view-seg button.on, body.sfv-dark .dash-alcance button.on { color: #fff; }
/* Los ejes y rótulos de los gráficos también (Highcharts pinta con su propio color). */
body.sfv-dark .highcharts-axis-labels text, body.sfv-dark .highcharts-data-label text, body.sfv-dark .highcharts-legend-item text { fill: #fff !important; color: #fff !important; }

/* El logotipo en oscuro: BLANCO 100 %, monograma y texto (pedido del usuario, 18-sep-2026). */
body.sfv-dark .sfv-logo .sfv-logo-mono, body.sfv-dark .sfv-logo .sfv-logo-txt { fill: #ffffff; }
/* La campana con avisos: en claro, coral oscuro (el melocotón claro se perdía sobre la barra
   blanca); en oscuro, blanco como todos los iconos. */
body:not(.sfv-dark) .sfv-topbar .sfv-tbtn#sfvBell.has-unread, body:not(.sfv-dark) .sfv-topbar .sfv-tbtn#sfvBell.has-unread i { color: #b23b27; }
body.sfv-dark .sfv-brand .sfv-logo { filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); }

body.sfv-dark .sfv-clearable > .sfv-clear { background: rgba(255,255,255,.16); color: #fff; }
/* Las píldoras de rol llevan el color del rol en línea; en oscuro el texto va blanco y el
   tinte del fondo se aviva para que el color del rol siga distinguiéndose. */
body.sfv-dark .rol-badge { color: #fff !important; filter: saturate(1.4) brightness(1.35); }
body.sfv-dark .rio-pill.nada, body.sfv-dark .cl-estado-pill.fin { background: rgba(255,255,255,.10); color: #fff; }

/* ---------- REDUCIR MOVIMIENTO ---------- */
@media (prefers-reduced-motion: reduce) {
  .sfv-btn::after, .sfv-spot { display: none !important; }
  .sfv-card:hover, .sfv-mini-card:hover, .dash-kpi:hover, .sfv-kpi:hover, .dash-panel:hover, .sfv-nav a:hover { transform: none; }
}