/* ============================================================================
SFV CRM · SKIN "glass + glow" (rediseño 2026-06)
Se carga DESPUÉS de crm.css → gana en cascada. Reversible (quitar el ).
- Modo claro = glassmorphism (vidrio esmerilado) sobre bruma de marca.
- Modo oscuro = glow (datos esmeralda + halo lima) sobre verde profundo.
- Rendimiento: blur moderado + degradación (body.sfv-lite / @supports /
prefers-reduced-transparency) para equipos antiguos.
============================================================================ */
:root {
--glass-blur: 16px;
--glass-light: rgba(255,255,255,.85); /* +opacidad: el texto secundario se asienta y no se pierde con el fondo */
--glass-light-bd: rgba(255,255,255,.92);
--glass-dark: rgba(18,42,46,.52);
--glass-dark-bd: rgba(40,210,190,.16);
--glow-lima: #a3f24b; /* halo / brillo */
--glow-emerald: #33d269; /* datos / línea (marca) */
/* Glow de secciones — sobrio: apenas un susurro de marca (antes turquesa vivo) */
--sect-glow: rgba(16,200,176,.16);
--sect-glow-hov: rgba(16,200,176,.30);
--sect-marco: rgba(60,225,200,1);
}
/* Glow de secciones — OSCURO = teal (combina con la base teal-medianoche) */
body.sfv-dark {
--sect-glow: rgba(24,200,180,.45);
--sect-glow-hov: rgba(24,200,180,.62);
--sect-marco: rgba(70,225,205,.92);
}
/* ---------------------------------------------------------------------------
1 · FONDO VIVO "aurora tecnológica" (animado) — el glass lo refracta
.sfv-main transparente → el mesh (body::before) + grid (body::after) se ven
detrás y las tarjetas glass los difuminan.
--------------------------------------------------------------------------- */
.sfv-main { background: transparent; }
/* FONDO SOBRIO: el degradado verde→cian→azul de la referencia, recreado en CSS,
ORIENTADO EN HORIZONTAL (cian a la izq · verde a la der · mint arriba · azul abajo),
difuminado (blur) y a OPACIDAD .5 → queda como un lavado suave, institucional. */
body::before {
content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
background:
radial-gradient(1300px 1000px at 2% 74%, #26c8d2, transparent 54%), /* cian/teal · izquierda */
radial-gradient(1250px 920px at 104% 44%, #42c676, transparent 54%), /* verde · derecha */
radial-gradient(1050px 840px at 34% -14%, #c4f2d8, transparent 56%), /* mint claro · arriba */
radial-gradient(980px 1180px at 74% 118%, #56cae6, transparent 56%), /* azul suave · abajo */
linear-gradient(105deg, #d6efe0, #ffffff 64%);
filter: blur(2px); transform: scale(1.05);
opacity: .5;
}
body::after { display: none; } /* ya no hace falta el velo */
/* ---------------------------------------------------------------------------
2 · TARJETAS GLASS (modo claro)
Solo superficies grandes (no chips/inputs) para no sobrecargar la GPU.
--------------------------------------------------------------------------- */
.sfv-card, .sfv-mini-card,
.dash-kpi, .dash-panel,
.calc-card2, .cfg-role-card, .cfg-theme,
.dls-card, .av-cat {
background: var(--glass-light);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
backdrop-filter: blur(var(--glass-blur)) saturate(145%);
border: 1px solid var(--glass-light-bd);
box-shadow: 0 14px 40px -22px rgba(15,74,51,.34), 0 0 38px -6px var(--sect-glow), inset 0 1px 0 rgba(255,255,255,.6);
transition: box-shadow .55s ease, transform .25s ease;
animation: sfvIn .55s cubic-bezier(.22,.61,.36,1);
}
/* aparición suave (fade in + baja) de las secciones — no "de golpe" */
@keyframes sfvIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
/* respiración del aura (Apple Intelligence): se expande y se desvanece */
@keyframes aurBreathe { from { opacity: .4; transform: scale(.97); } to { opacity: .82; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
.sfv-card, .sfv-mini-card, .dash-kpi, .dash-panel, .calc-card2, .cfg-role-card, .cfg-theme, .dls-card, .av-cat { animation: none; }
}
/* tablas dentro de glass: filas translúcidas para que el vidrio "respire" */
.sfv-card .sfv-table tbody tr, .dash-panel .sfv-table tbody tr { background: transparent; }
/* ---------------------------------------------------------------------------
3 · MODO OSCURO · fondo verde profundo con glow
--------------------------------------------------------------------------- */
body.sfv-dark .sfv-main { background: transparent; }
body.sfv-dark::before {
background: radial-gradient(120% 90% at 75% -5%, #0c2a28, #061417 60%);
background-color: #06161a;
}
body.sfv-dark::after {
background: radial-gradient(120% 90% at 50% -10%, rgba(51,210,105,.10), transparent 55%);
}
/* tarjetas glass oscuras */
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 {
background: var(--glass-dark);
border: 1px solid var(--glass-dark-bd);
box-shadow: 0 26px 60px -32px rgba(0,0,0,.7), 0 0 38px -6px var(--sect-glow), inset 0 1px 0 rgba(255,255,255,.06);
}
/* ---------------------------------------------------------------------------
4 · GLOW EN CHARTS (modo oscuro) — línea esmeralda + halo lima
--------------------------------------------------------------------------- */
body.sfv-dark .highcharts-graph { filter: drop-shadow(0 0 6px rgba(163,242,75,.7)) drop-shadow(0 0 2px rgba(163,242,75,.5)); }
body.sfv-dark .highcharts-area { fill-opacity: .22; }
body.sfv-dark .highcharts-markers .highcharts-point { filter: drop-shadow(0 0 3px rgba(163,242,75,.6)); }
/* sparkline KPI: el wrapper recortaba el tooltip/marcador "3" → liberar desborde */
.dash-kpi-spark { overflow: visible !important; }
/* KPIs y números grandes: leve resplandor */
body.sfv-dark .dash-kpi-val { color: #d8f3c6; text-shadow: 0 0 18px rgba(163,242,75,.35); }
/* ---------------------------------------------------------------------------
4b · CHROME GLASS (topbar + sidebar)
Claro = vidrio claro (texto oscuro, logo original). Oscuro = vidrio verde
profundo (texto/logo claros). Sustituye el verde sólido en ambos modos.
--------------------------------------------------------------------------- */
/* ---- claro ---- */
body:not(.sfv-dark) .sfv-topbar {
background: rgba(255,255,255,.55);
-webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
border-bottom: 1px solid rgba(15,74,51,.10); box-shadow: 0 6px 22px -14px rgba(15,74,51,.28);
}
body:not(.sfv-dark) .sfv-topbar::after { display: none; }
body:not(.sfv-dark) .sfv-sidebar {
background: rgba(255,255,255,.80);
-webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
border-right: 1px solid rgba(15,74,51,.1); box-shadow: 4px 0 24px -18px rgba(8,40,26,.5);
}
body:not(.sfv-dark) .sfv-brand img { filter: none !important; }
body:not(.sfv-dark) .sfv-brand .name { color: var(--sfv-ink); }
body:not(.sfv-dark) .sfv-brand .name small { color: var(--sfv-graphite); }
body:not(.sfv-dark) .sfv-user .meta b { color: var(--sfv-ink); }
body:not(.sfv-dark) .sfv-user .meta span { color: var(--sfv-graphite); }
body:not(.sfv-dark) .sfv-nav-group { color: var(--sfv-mint-dark); font-weight: 900; }
body:not(.sfv-dark) .sfv-nav a { color: var(--sfv-ink); background: rgba(15,74,51,.045); }
body:not(.sfv-dark) .sfv-nav a:hover { background: rgba(51,210,105,.18); color: var(--sfv-mint-dark); }
body:not(.sfv-dark) .sfv-nav a.active { background: linear-gradient(135deg, #1fb058, #0e8043); color: #fff; box-shadow: 0 5px 14px rgba(31,176,88,.32); }
body:not(.sfv-dark) .sfv-nav a.active .fa { color: #fff; }
body:not(.sfv-dark) .sfv-menu-toggle, body:not(.sfv-dark) .sfv-tbtn { color: var(--sfv-graphite); }
body:not(.sfv-dark) .sfv-menu-toggle:hover, body:not(.sfv-dark) .sfv-tbtn:hover { background: rgba(51,210,105,.12); color: var(--sfv-mint-dark); }
body:not(.sfv-dark) .sfv-topsearch { background: rgba(255,255,255,.6); border-color: rgba(15,74,51,.12); color: var(--sfv-graphite); }
body:not(.sfv-dark) .sfv-topsearch input { color: var(--sfv-ink); }
body:not(.sfv-dark) .sfv-topsearch input::placeholder { color: var(--sfv-muted); }
body:not(.sfv-dark) .sfv-role-sel { background: rgba(0,0,0,.04); color: var(--sfv-ink); border-color: var(--sfv-line); }
body:not(.sfv-dark) .sfv-tbtn .badge { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
/* ---- oscuro ---- */
body.sfv-dark .sfv-topbar {
background: rgba(10,34,38,.64);
-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid rgba(40,210,190,.14); box-shadow: 0 6px 24px -14px rgba(0,0,0,.6);
}
body.sfv-dark .sfv-topbar::after { display: none; }
body.sfv-dark .sfv-sidebar {
background: rgba(9,32,36,.72);
-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
border-right: 1px solid rgba(40,210,190,.14);
}
body.sfv-dark .sfv-brand img { filter: brightness(0) invert(1) !important; }
body.sfv-dark .sfv-brand .name, body.sfv-dark .sfv-user .meta b { color: #eaf6e6; }
body.sfv-dark .sfv-nav-group { color: #7ee0a3; font-weight: 900; }
body.sfv-dark .sfv-nav a { color: var(--sfv-on-forest); background: rgba(255,255,255,.04); }
body.sfv-dark .sfv-nav a:hover { background: rgba(51,210,105,.2); }
body.sfv-dark .sfv-nav a.active { background: linear-gradient(135deg, #1fb058, #0e7a43); color: #fff; box-shadow: 0 5px 14px rgba(0,0,0,.4); }
body.sfv-dark .sfv-nav a.active .fa { color: #fff; }
body.sfv-dark .sfv-menu-toggle, body.sfv-dark .sfv-tbtn { color: var(--sfv-on-forest); }
/* ---------------------------------------------------------------------------
4c · BANNER "Mensaje del día" — verde más claro/vivo que resalte
--------------------------------------------------------------------------- */
.dash-verso { background: linear-gradient(120deg, #138a4e 0%, #2bb863 100%); box-shadow: 0 12px 30px -12px rgba(51,210,105,.45); }
.dash-verso .vtxt b { text-shadow: 0 1px 3px rgba(0,0,0,.22); }
.dash-verso .vtxt span { color: rgba(255,255,255,.82); }
.dash-verso .vico { background: rgba(255,255,255,.18); color: #fff; }
body.sfv-dark .dash-verso { background: linear-gradient(120deg, #1aa45b 0%, #36d471 100%); box-shadow: 0 14px 36px -12px rgba(51,210,105,.55); }
/* ---------------------------------------------------------------------------
4d · CHAT AURELION — efecto glass + verde nuevo (mezcla esmeralda)
--------------------------------------------------------------------------- */
.aur-win { background: rgba(255,255,255,.38); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid var(--glass-light-bd); }
.aur-head { background: linear-gradient(135deg, rgba(16,112,68,.5), rgba(33,160,92,.42)); text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.aur-thread { background: transparent; }
.aur-chips { background: transparent; }
.aur-msg.bot .aur-bubble { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.55); }
.aur-input { background: rgba(255,255,255,.3); border-top-color: rgba(255,255,255,.45); }
.aur-input input { background: rgba(255,255,255,.72); }
/* oscuro */
body.sfv-dark .aur-win { background: rgba(24,38,30,.40); border-color: var(--glass-dark-bd); }
body.sfv-dark .aur-head { background: linear-gradient(135deg, rgba(20,120,72,.46), rgba(40,180,100,.36)); }
body.sfv-dark .aur-msg.bot .aur-bubble { background: rgba(255,255,255,.08); color: var(--sfv-ink); border-color: rgba(255,255,255,.12); }
body.sfv-dark .aur-chip { background: rgba(255,255,255,.07); color: var(--sfv-mint-dark); }
body.sfv-dark .aur-input { background: rgba(255,255,255,.04); border-top-color: rgba(255,255,255,.08); }
body.sfv-dark .aur-input input { background: rgba(255,255,255,.06); color: var(--sfv-ink); border-color: rgba(255,255,255,.12); }
/* degradación lite/sin soporte para el chat */
body.sfv-lite .aur-win { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,.96); }
body.sfv-lite.sfv-dark .aur-win { background: #142a2d; }
/* ---------------------------------------------------------------------------
5 · DEGRADACIÓN para equipos antiguos / accesibilidad
(sin blur → tarjeta translúcida casi sólida, igual de elegante y veloz)
--------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.sfv-card, .sfv-mini-card, .dash-kpi, .dash-panel, .calc-card2, .cfg-role-card, .cfg-theme, .dls-card, .av-cat { background: rgba(255,255,255,.93); }
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 { background: #142a2d; }
body:not(.sfv-dark) .sfv-topbar, body:not(.sfv-dark) .sfv-sidebar { background: rgba(255,255,255,.95); }
body.sfv-dark .sfv-topbar, body.sfv-dark .sfv-sidebar { background: #0a2226; }
}
body.sfv-lite .sfv-card, body.sfv-lite .sfv-mini-card, body.sfv-lite .dash-kpi, body.sfv-lite .dash-panel, body.sfv-lite .calc-card2, body.sfv-lite .cfg-role-card, body.sfv-lite .cfg-theme, body.sfv-lite .dls-card, body.sfv-lite .av-cat {
-webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,.95);
}
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: #142a2d; }
body.sfv-lite .sfv-topbar, body.sfv-lite .sfv-sidebar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.sfv-lite:not(.sfv-dark) .sfv-topbar, body.sfv-lite:not(.sfv-dark) .sfv-sidebar { background: rgba(255,255,255,.96); }
body.sfv-lite.sfv-dark .sfv-topbar, body.sfv-lite.sfv-dark .sfv-sidebar { background: #0a2226; }
body.sfv-lite .sfv-main, body.sfv-lite.sfv-dark .sfv-main { background-attachment: scroll; }
@media (prefers-reduced-transparency: reduce) {
.sfv-card, .sfv-mini-card, .dash-kpi, .dash-panel, .calc-card2, .cfg-role-card, .cfg-theme, .dls-card, .av-cat { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.95); }
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 { background: #142a2d; }
.sfv-topbar, .sfv-sidebar { -webkit-backdrop-filter: none; backdrop-filter: none; }
body:not(.sfv-dark) .sfv-topbar, body:not(.sfv-dark) .sfv-sidebar { background: rgba(255,255,255,.96); }
body.sfv-dark .sfv-topbar, body.sfv-dark .sfv-sidebar { background: #0a2226; }
}
/* ---------------------------------------------------------------------------
6 · RESPLANDORES (glow) — selectivo y "por partes" (no perímetro completo).
Claro = halo BLANCO. Oscuro = borde en gradiente que brilla en las esquinas.
Ventana de Aurelion = arcoíris tipo Siri.
--------------------------------------------------------------------------- */
@property --aurAng { syntax: ''; inherits: false; initial-value: 0deg; }
.dash-kpi, .sfv-card, .sfv-mini-card, .dash-panel, .calc-card2, .cfg-role-card, .dls-card, .av-cat, .dash-verso { position: relative; }
/* ---- Glow de secciones: exterior + marco "por partes". Color por variable (claro=dorado / oscuro=verde) ---- */
.dash-verso { box-shadow: 0 12px 30px -12px rgba(51,210,105,.45), 0 0 24px -7px var(--sect-glow); }
body.sfv-dark .dash-verso { box-shadow: 0 14px 34px -14px rgba(0,0,0,.55), 0 0 24px -7px var(--sect-glow); }
/* marco "por partes": SIEMPRE presente (opacity 0) → fade IN/OUT coordinado con el glow exterior */
.dash-kpi::after, .sfv-card::after, .sfv-mini-card::after, .dash-panel::after,
.calc-card2::after, .cfg-role-card::after, .dls-card::after, .av-cat::after, .dash-verso::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none;
background: linear-gradient(125deg, var(--sect-marco), transparent 30%, transparent 67%, var(--sect-marco));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; transition: opacity .55s ease;
}
.dash-verso::after { opacity: 1; } /* banner: marco siempre visible */
.dash-kpi:hover::after, .sfv-card:hover::after, .sfv-mini-card:hover::after, .dash-panel:hover::after,
.calc-card2:hover::after, .cfg-role-card:hover::after, .dls-card:hover::after, .av-cat:hover::after { opacity: 1; }
/* hover: glow exterior intensificado — TODAS las secciones (profundidad por tema) */
.dash-kpi:hover, .sfv-card:hover, .sfv-mini-card:hover, .dash-panel:hover, .calc-card2:hover, .cfg-role-card:hover, .dls-card:hover, .av-cat:hover { box-shadow: 0 22px 50px -24px rgba(15,74,51,.42), 0 0 54px -2px var(--sect-glow-hov); }
body.sfv-dark .dash-kpi:hover, body.sfv-dark .sfv-card:hover, body.sfv-dark .sfv-mini-card: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 { box-shadow: 0 22px 50px -24px rgba(0,0,0,.6), 0 0 56px 0 var(--sect-glow-hov); }
/* ---- VENTANA DE AURELION: resplandor ARCOÍRIS tipo Siri (en .sfv-aurelion-pop, que desborda) ---- */
.aur-win { position: relative; z-index: 1; box-shadow: var(--sfv-shadow-overlay); }
/* MARCO del chat = mismo efecto del círculo: glow ring (respira) + rim arcoíris nítido (gira) */
.sfv-aurelion-pop::before {
content: ""; position: absolute; inset: -7px; border-radius: 27px; z-index: 0; pointer-events: none; padding: 7px;
background: conic-gradient(from var(--aurAng), #ff4d8d, #ffcf5e, #4dff8f, #33d2ff, #b06bff, #ff4d8d);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
filter: blur(11px);
animation: aurSiri 6s linear infinite;
}
.sfv-aurelion-pop::after {
content: ""; position: absolute; inset: 0; border-radius: 20px; z-index: 4; padding: 2.6px; pointer-events: none;
background: conic-gradient(from var(--aurAng), #ff4d8d, #ffcf5e, #4dff8f, #33d2ff, #b06bff, #ff4d8d);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: aurSiri 6s linear infinite;
}
@keyframes aurSiri { to { --aurAng: 360deg; } }
@media (prefers-reduced-motion: reduce) { .sfv-aurelion-pop::before { animation: none; opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .sfv-aurelion-pop::before, .sfv-aurelion-pop::after { animation: none; } }
/* ---- CÍRCULO de Aurelion: marco ARCOÍRIS Apple Intelligence (glow + rim girando) ---- */
.aur-stage { overflow: visible; border-color: transparent !important; }
.aur-stage .aur-v { border-radius: 50%; }
.aur-stage::before {
content: ""; position: absolute; inset: -7px; border-radius: 50%; z-index: -1; pointer-events: none;
background: conic-gradient(from var(--aurAng), #ff4d8d, #ffcf5e, #4dff8f, #33d2ff, #b06bff, #ff4d8d);
filter: blur(9px); animation: aurSiri 6s linear infinite;
}
.aur-stage::after {
content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2.4px; z-index: 1; pointer-events: none;
background: conic-gradient(from var(--aurAng), #ff4d8d, #ffcf5e, #4dff8f, #33d2ff, #b06bff, #ff4d8d);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; animation: aurSiri 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .aur-stage::before, .aur-stage::after { animation: none; } }
/* ---- CÍRCULO CERRADO (FAB): mismo marco arcoíris Apple Intelligence ---- */
.aur-fab-face { overflow: visible; position: relative; }
.aur-fab-face video, .aur-fab-face img { border-radius: 50%; }
.aur-fab-face .aur-fab-dot, #aurFabDot { z-index: 2; }
.aur-fab-face::before {
content: ""; position: absolute; inset: -6px; border-radius: 50%; z-index: -1; pointer-events: none;
background: conic-gradient(from var(--aurAng), #ff4d8d, #ffcf5e, #4dff8f, #33d2ff, #b06bff, #ff4d8d);
filter: blur(8px); animation: aurSiri 6s linear infinite;
}
.aur-fab-face::after {
content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2.2px; z-index: 1; pointer-events: none;
background: conic-gradient(from var(--aurAng), #ff4d8d, #ffcf5e, #4dff8f, #33d2ff, #b06bff, #ff4d8d);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; animation: aurSiri 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .aur-fab-face::before, .aur-fab-face::after { animation: none; } }
/* utilidad .sfv-glow (manual) */
.sfv-glow { box-shadow: var(--sfv-shadow-card), 0 0 22px -6px rgba(51,210,105,.42) !important; }
body.sfv-dark .sfv-glow { box-shadow: 0 18px 44px -22px rgba(0,0,0,.7), 0 0 28px -4px rgba(51,210,105,.5) !important; }
/* ---------------------------------------------------------------------------
BARRA DE HERRAMIENTAS (.sfvtb) — modo oscuro (glass teal-medianoche)
Los tokens claros (--sfv-white/--sfv-sand/--sfv-graphite) no se re-tintan en
oscuro, así que aquí se re-visten botones, popovers y filas de grupo.
--------------------------------------------------------------------------- */
body.sfv-dark .sfvtb-btn { color: var(--sfv-on-forest); }
body.sfv-dark .sfvtb-btn > .fa:first-child { color: var(--sfv-on-forest-muted); }
body.sfv-dark .sfvtb-btn:hover { background: rgba(51,210,105,.16); border-color: rgba(51,210,105,.34); color: #eafff0; }
body.sfv-dark .sfvtb-btn:hover > .fa:first-child,
body.sfv-dark .sfvtb-btn.on > .fa:first-child { color: var(--glow-emerald); }
body.sfv-dark .sfvtb-btn.on { background: rgba(51,210,105,.18); border-color: rgba(51,210,105,.42); color: #eafff0; }
body.sfv-dark .sfvtb-btn.open-on { background: rgba(51,210,105,.22); }
body.sfv-dark .sfvtb-sep { background: var(--glass-dark-bd); }
body.sfv-dark .sfvtb-pop {
background: rgba(12,34,35,.97);
-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
border-color: var(--glass-dark-bd);
box-shadow: 0 26px 60px -28px rgba(0,0,0,.75), 0 0 30px -8px var(--sect-glow);
}
body.sfv-dark .sfvtb-pop-h { color: var(--sfv-on-forest-muted); }
body.sfv-dark .sfvtb-pop hr { border-top-color: rgba(255,255,255,.08); }
body.sfv-dark .sfvtb-item { color: var(--sfv-on-forest); }
body.sfv-dark .sfvtb-item > .fa:first-child { color: var(--sfv-on-forest-muted); }
body.sfv-dark .sfvtb-item:hover { background: rgba(255,255,255,.06); }
body.sfv-dark .sfvtb-item.sel { color: var(--sfv-mint-light); }
body.sfv-dark .sfvtb-item.sel > .fa:first-child,
body.sfv-dark .sfvtb-item .chk { color: var(--sfv-mint-light); }
body.sfv-dark .sfv-table tr.sfvtb-grp td {
background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0));
color: var(--sfv-on-forest); border-top-color: var(--glass-dark-bd);
}
body.sfv-dark .sfv-table tr.sfvtb-grp:hover td { background: linear-gradient(90deg, rgba(51,210,105,.12), rgba(255,255,255,0)); }
body.sfv-dark .sfv-table tr.sfvtb-grp .caret,
body.sfv-dark .sfv-table tr.sfvtb-grp .sfvtb-grp-count { color: var(--sfv-on-forest-muted); }
/* ---------------------------------------------------------------------------
FICHA SLIDE-OVER (.sfv-drawer) — modo oscuro
--------------------------------------------------------------------------- */
body.sfv-dark .sfv-drawer { background: #08181b; }
body.sfv-dark .fic-chk-item, body.sfv-dark .fic-adj-item { background: rgba(255,255,255,.03); border-color: var(--glass-dark-bd); }
body.sfv-dark .fic-chk-txt, body.sfv-dark .fic-adj-name, body.sfv-dark .fic-data > div > b { color: var(--sfv-on-forest); }
body.sfv-dark .fic-chk-box { border-color: rgba(255,255,255,.25); }
body.sfv-dark .sfv-drawer .bit-item { background: rgba(255,255,255,.03); border-color: var(--glass-dark-bd); }
body.sfv-dark .sfv-drawer .bit-txt { color: var(--sfv-on-forest); }
body.sfv-dark .sfv-drawer .bit-meta { color: var(--sfv-on-forest-muted); }
/* ---------------------------------------------------------------------------
AGENTES (#6) — modo oscuro
--------------------------------------------------------------------------- */
body.sfv-dark .ag-rule, body.sfv-dark .ag-conex-card { background: rgba(255,255,255,.03); border-color: var(--glass-dark-bd); }
body.sfv-dark .ag-rule-name, body.sfv-dark .ag-conex-name { color: var(--sfv-on-forest); }
body.sfv-dark .ag-rule-flow .ag-pill { background: rgba(255,255,255,.06); color: var(--sfv-on-forest); }
body.sfv-dark .ag-pill.trigger { color: #d3a6ef; }
body.sfv-dark .ag-pill.action { color: var(--sfv-mint-light); }
body.sfv-dark .ag-switch { background: rgba(255,255,255,.22); }
body.sfv-dark .ag-empty b { color: var(--sfv-on-forest); }
body.sfv-dark .ag-conex-desc { color: var(--sfv-on-forest-muted); }
body.sfv-dark .ag-conex-form { border-color: var(--glass-dark-bd); }
body.sfv-dark .ag-conex-field { color: var(--sfv-on-forest-muted); }
body.sfv-dark .ag-conex-nota { background: rgba(41,128,185,.16); color: var(--sfv-on-forest-muted); }
/* Estado vacío (.sfv-empty) — modo oscuro */
body.sfv-dark .sfv-empty-title { color: var(--sfv-on-forest); }
body.sfv-dark .sfv-empty-sub { color: var(--sfv-on-forest-muted); }