/* ============================================================
Bigvoz — Portal CLIENT · CSS fiel al diseño del diseñador
Traducción del _ds del prototipo a CSS propio autocontenido.
Se carga DESPUÉS de /_bigvoz-ds.css (reusa su gradiente/marca).
============================================================ */
:root {
/* ---- Alias de escala de fondo (diseñador usa bg-900..550) ---- */
--bg-900: #070B16;
--bg-850: #0B1120;
--bg-800: #0F1626;
--bg-700: #131B2E;
--bg-600: #1A2336;
--bg-550: #232E45;
--bg-500: #2E3A54;
/* ---- Texto (alias del diseñador) ---- */
--text-hi: #F4F6FB;
--text-mid: #A4ADBF;
--text-low: #6B7488;
/* ---- Superficies ---- */
--surface-glass: rgba(19,27,46,0.72);
--surface-glass-strong: rgba(11,17,32,0.86);
/* ---- Acentos extra del diseñador ---- */
--accent-magenta: #E879F9;
--magenta-soft: rgba(232,121,249,0.14);
--accent-gold: #F5C451;
--accent-lime: #A3E635;
--accent-blue: #60A5FA;
/* ---- Motion (alias) ---- */
--motion-fast: 120ms;
--motion-base: 220ms;
--motion-slow: 420ms;
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
/* ---- Tipos display del diseñador ---- */
--text-h2: 1.55rem;
/* Gradiente fiel (magenta→cyan, 120°) ya viene de _bigvoz-ds.css:
--bv-gradient, --bv-gradient-soft, --cyan-soft/line, --purple-soft */
}
/* ============================================================
TEMA CLARO — se activa con .
Solo se redefinen tokens semánticos (valores del diseñador).
El gradiente de marca, rellenos y waveform NO cambian.
============================================================ */
:root[data-theme="light"] {
--bg-900: #F4F6FB; --bg-850: #EDF1F7; --bg-800: #FFFFFF; --bg-700: #F5F7FA;
--bg-600: #EBEEF4; --bg-550: #DDE2EC; --bg-500: #D3D9E6;
--surface-2: #FFFFFF; --surface-glass: rgba(255,255,255,.72); --surface-glass-strong: rgba(255,255,255,.88);
--text-hi: #0B1120; --text-body: rgba(11,17,32,.78); --text-mid: rgba(11,17,32,.62); --text-low: rgba(11,17,32,.40);
/* alias heredados del DS (wordmark, clases viejas) */
--text-strong: #0B1120; --text-muted: rgba(11,17,32,.62); --text-faint: rgba(11,17,32,.40);
--border-subtle: rgba(11,17,32,.07); --border-default: rgba(11,17,32,.12); --border-strong: rgba(11,17,32,.20);
/* Legibilidad en claro: como TEXTO/ICONO estos acentos se oscurecen.
El gradiente, cyan-line y rellenos siguen brillantes. */
--bv-cyan: #0E7490; --accent-lime: #4D7C0F; --accent-gold: #A16207;
--cyan-soft: rgba(34,211,238,.20); --purple-soft: rgba(168,85,247,.18); --magenta-soft: rgba(232,121,249,.18);
--success-soft: rgba(52,211,153,.20); --warning-soft: rgba(251,191,36,.22); --danger-soft: rgba(248,113,113,.18);
--bv-gradient-soft: linear-gradient(120deg, rgba(168,85,247,.14), rgba(34,211,238,.14));
--shadow-sm: 0 1px 2px rgba(11,17,32,.08); --shadow-md: 0 4px 12px rgba(11,17,32,.08);
--shadow-lg: 0 10px 24px rgba(11,17,32,.10); --shadow-pop: 0 18px 40px rgba(11,17,32,.16);
--glow-cyan: 0 0 18px rgba(34,211,238,.18); --glow-purple: 0 0 18px rgba(168,85,247,.16); --glow-brand: 0 0 22px rgba(168,85,247,.14);
}
:root[data-theme="light"] .bv-mesh {
background:
radial-gradient(60% 60% at 18% 8%, rgba(168,85,247,.12), transparent 62%),
radial-gradient(55% 55% at 86% 12%, rgba(34,211,238,.12), transparent 62%),
#FFFFFF;
}
/* En claro los radiales de fondo de la app se atenúan sobre el blanco */
:root[data-theme="light"] .bvc-app {
background:
radial-gradient(60% 50% at 15% 0%, rgba(168,85,247,.07), transparent 60%),
radial-gradient(50% 45% at 92% 4%, rgba(34,211,238,.06), transparent 60%),
var(--bg-900);
}
/* ============================================================
Keyframes (del prototipo)
============================================================ */
@keyframes bvPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(251,191,36,.45);} 50%{ box-shadow:0 0 0 8px rgba(251,191,36,0);} }
@keyframes bvSpin { to { transform: rotate(360deg);} }
@keyframes bvLiveDot { 0%,100%{ transform:scale(1);opacity:1;} 50%{ transform:scale(.6);opacity:.5;} }
@keyframes bvSpark { from { stroke-dashoffset: 600;} to { stroke-dashoffset: 0;} }
@keyframes bvToast { from { transform: translateY(24px); opacity:0;} to { transform:none; opacity:1;} }
@keyframes bvGrow { from { transform: scaleX(0);} to { transform: scaleX(1);} }
@keyframes bvSheet { from { transform: translateX(40px); opacity:0;} to { transform:none; opacity:1;} }
@keyframes bvDrop { from { transform: translateY(-10px); opacity:0;} to { transform:none; opacity:1;} }
@keyframes bvRise { from { transform: translateY(14px); opacity:0;} to { transform:none; opacity:1;} }
@keyframes bvWave { 0%,100%{ transform: scaleY(.32);} 50%{ transform: scaleY(1);} }
/* ============================================================
Helpers de interacción
============================================================ */
.bv-rise { animation: bvRise .55s var(--ease-out) both; }
.bv-spark path { stroke-dasharray:600; animation: bvSpark 1.6s var(--ease-out) both; }
.bv-hit {
transition: transform var(--motion-fast) var(--ease-out),
box-shadow var(--motion-base) var(--ease-out),
border-color var(--motion-base) var(--ease-out),
background var(--motion-base) var(--ease-out);
}
.bv-hit:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.bv-hit:active { transform: scale(.985); }
.bv-press { transition: transform var(--motion-fast) var(--ease-spring), filter var(--motion-fast) var(--ease-out); }
.bv-press:hover { filter: brightness(1.08); }
.bv-press:active { transform: scale(.96); }
.bv-nav:focus-visible, .bv-press:focus-visible, .bv-hit:focus-visible {
outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.bv-scroll::-webkit-scrollbar { width:8px; height:8px; }
.bv-scroll::-webkit-scrollbar-thumb { background: var(--bg-550); border-radius:999px; }
.bv-scroll { scrollbar-width: thin; }
.bv-input {
background:var(--bg-700); border:1px solid var(--border-subtle); border-radius:999px;
padding:9px 14px 9px 36px; color:var(--text-hi); font-size:13px; font-family:var(--font-body);
width:100%; outline:none; transition:border-color var(--motion-base);
}
.bv-input::placeholder { color:var(--text-low); }
.bv-input:focus { border-color: var(--cyan-line); }
.bv-kpi {
font-family: var(--font-numeric); font-weight:700; letter-spacing:-.02em;
line-height:1; font-variant-numeric: tabular-nums; color: var(--text-hi);
}
.bv-gradient-text {
background: var(--bv-gradient); -webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
/* Mesh hero: fondo radial animado */
.bv-mesh {
background:
radial-gradient(120% 120% at 8% -10%, rgba(168,85,247,.30), transparent 46%),
radial-gradient(120% 120% at 96% 4%, rgba(34,211,238,.24), transparent 52%),
var(--bg-800);
}
.bv-mesh-animated { background-size: 160% 160%, 160% 160%, auto; animation: bvMesh 14s var(--ease-inout) infinite; }
@keyframes bvMesh { 0%,100%{ background-position: 0% 0%, 100% 0%, 0 0;} 50%{ background-position: 20% 10%, 80% 12%, 0 0;} }
/* Borde con gradiente (plan destacado) */
.bv-gradient-border { position:relative; border:1px solid transparent;
background:
linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
var(--bv-gradient) border-box;
}
.bv-glass { background: var(--surface-glass-strong); backdrop-filter: blur(20px); }
/* ============================================================
VoiceWave — barras animadas (reemplaza el componente del _ds)
Uso: con N
============================================================ */
.bv-wave { display:flex; align-items:center; gap:3px; height:22px; }
.bv-wave i {
display:block; flex:1; min-width:2px; border-radius:999px;
background: var(--bv-gradient); transform-origin:center; transform: scaleY(.4);
}
.bv-wave.animated i { animation: bvWave 1.1s var(--ease-inout) infinite; }
.bv-wave i:nth-child(3n) { animation-delay: .15s; }
.bv-wave i:nth-child(4n) { animation-delay: .30s; }
.bv-wave i:nth-child(5n) { animation-delay: .45s; }
.bv-wave.tall { height:70px; }
.bv-wave.xl { height:96px; }
@media (prefers-reduced-motion: reduce){
.bv-spark path { animation:none; stroke-dashoffset:0; }
.bv-wave i { animation:none !important; transform: scaleY(.6); }
.bv-mesh-animated { animation:none; }
}
/* ============================================================
App shell fiel (sobrescribe el shell base de _bigvoz-ds.css)
============================================================ */
body.bvc { background: var(--bg-900); color: var(--text-mid); }
.bvc-app {
min-height:100vh;
background:
radial-gradient(60% 50% at 15% 0%, rgba(168,85,247,.14), transparent 60%),
radial-gradient(50% 45% at 92% 4%, rgba(34,211,238,.12), transparent 60%),
var(--bg-900);
display:flex;
}
/* Sidebar desktop */
.bvc-side {
width:250px; flex-shrink:0; background:var(--bg-800); border-right:1px solid var(--border-subtle);
display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0; height:100vh;
}
.bvc-side .brand { padding:6px 10px 20px; }
.bvc-side .brand .bv-wordmark { font-size:22px; }
.bvc-nav { display:flex; flex-direction:column; gap:4px; }
.bvc-nav-i {
display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--radius-sm);
border:1px solid transparent; cursor:pointer; width:100%; text-align:left; color:var(--text-mid);
background:transparent; font-family:var(--font-body); font-size:14px; font-weight:600;
transition:all var(--motion-base) var(--ease-out); text-decoration:none;
}
.bvc-nav-i i { font-size:22px; width:24px; text-align:center; }
.bvc-nav-i:hover { background:var(--bg-700); color:var(--text-hi); }
.bvc-nav-i.active {
background:var(--cyan-soft); border-color:var(--cyan-line); color:var(--bv-cyan); box-shadow:var(--glow-cyan);
}
.bvc-nav-i .nav-badge {
margin-left:auto; font:700 11px/1 var(--font-numeric); background:var(--warning-soft);
color:var(--warning); padding:3px 7px; border-radius:999px;
}
.bvc-side-foot { margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.bvc-onb {
cursor:pointer; padding:14px; border-radius:var(--radius-md);
background:var(--bv-gradient-soft); border:1px solid var(--cyan-line); text-decoration:none; display:block;
}
.bvc-onb-t { font:700 13px/1.2 var(--font-display); color:var(--text-hi); display:flex; align-items:center; gap:8px; }
.bvc-onb-t i { font-size:18px; color:var(--bv-cyan); }
.bvc-onb-s { font-size:12px; color:var(--text-mid); margin-top:6px; }
.bvc-user { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-md); color:inherit; text-decoration:none; }
.bvc-user:hover { background:var(--bg-700); }
.bvc-av { width:36px; height:36px; border-radius:999px; background:var(--bv-gradient); color:#05070E; display:grid; place-items:center; font-weight:800; font-size:13px; flex-shrink:0; }
.bvc-user-t { font-size:13px; font-weight:600; color:var(--text-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bvc-user-s { font-size:11px; color:var(--text-low); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bvc-logout {
display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:9px;
border-radius:999px; background:transparent; border:1px solid var(--border-default); color:var(--text-low);
font:600 12.5px/1 var(--font-body); cursor:pointer; transition:all var(--motion-base);
}
.bvc-logout:hover { border-color:rgba(248,113,113,.4); color:var(--danger); background:rgba(248,113,113,.06); }
/* Main column */
.bvc-main { flex:1; display:flex; flex-direction:column; min-width:0; position:relative; }
.bvc-top {
height:64px; flex-shrink:0; border-bottom:1px solid var(--border-subtle); display:flex; align-items:center;
gap:16px; padding:0 24px; background:var(--surface-glass-strong); backdrop-filter:blur(20px);
position:sticky; top:0; z-index:30;
}
.bvc-top-title { font:800 18px/1 var(--font-display); color:var(--text-hi); }
.bvc-agent-pill {
display:flex; align-items:center; gap:6px; padding:5px 11px; background:var(--success-soft); border-radius:999px;
}
.bvc-agent-pill .dot { width:7px; height:7px; border-radius:999px; background:var(--success); animation:bvLiveDot 1.8s var(--ease-inout) infinite; }
.bvc-agent-pill span { font-size:12px; font-weight:600; color:var(--success); }
.bvc-agent-pill.paused { background:var(--cyan-soft); }
.bvc-agent-pill.paused .dot { background:var(--bv-cyan); }
.bvc-agent-pill.paused span { color:var(--bv-cyan); }
.bvc-top-actions { margin-left:auto; display:flex; align-items:center; gap:12px; }
.bvc-icon-btn {
position:relative; width:40px; height:40px; border-radius:999px; background:var(--bg-700);
border:1px solid var(--border-subtle); color:var(--text-mid); cursor:pointer; display:grid; place-items:center; font-size:20px; text-decoration:none;
}
.bvc-icon-btn:hover { color:var(--bv-cyan); border-color:var(--cyan-line); }
.bvc-icon-btn .badge-dot { position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:999px; background:var(--danger); box-shadow:0 0 0 2px var(--bg-700); }
/* Content */
.bvc-content { flex:1; overflow:auto; padding:24px; position:relative; }
.bvc-screen[hidden] { display:none; }
/* El atributo hidden debe ganar aunque la clase fije display (flex/grid). */
.bvc-app [hidden] { display:none !important; }
/* ============================================================
Notificaciones panel
============================================================ */
.bvc-notif {
position:absolute; z-index:80; top:70px; right:20px; width:350px;
background:var(--surface-glass-strong); backdrop-filter:blur(24px); border:1px solid var(--border-default);
border-radius:var(--radius-md); box-shadow:var(--shadow-pop); animation:bvDrop var(--motion-base) var(--ease-out) both; overflow:hidden;
}
.bvc-notif[hidden] { display:none; }
.bvc-notif-h { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border-subtle); }
.bvc-notif-h .t { font:800 14px/1 var(--font-display); color:var(--text-hi); }
.bvc-notif-h button { background:none; border:none; color:var(--bv-cyan); font-size:12px; font-weight:600; cursor:pointer; }
.bvc-notif-row { display:flex; align-items:flex-start; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border-subtle); }
.bvc-notif-ic { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; font-size:19px; }
.bvc-notif-row .rt { font-size:13px; font-weight:600; color:var(--text-hi); }
.bvc-notif-row .rs { font-size:11.5px; color:var(--text-mid); margin-top:2px; }
.bvc-notif-cta { margin-top:8px; display:inline-flex; align-items:center; gap:6px; border:none; border-radius:999px; padding:6px 12px; cursor:pointer; font-size:12px; font-weight:600; }
.bvc-notif-time { font-size:10.5px; color:var(--text-low); white-space:nowrap; }
.bvc-notif-empty { padding:26px 16px; text-align:center; color:var(--text-low); font-size:13px; }
/* ============================================================
Menú de usuario (popover)
============================================================ */
.bvc-usermenu {
position: fixed; z-index: 90; left: 14px; bottom: 74px; width: 258px;
background: var(--surface-glass-strong); backdrop-filter: blur(24px);
border: 1px solid var(--border-default); border-radius: var(--radius-md);
box-shadow: var(--shadow-pop); padding: 6px; animation: bvDrop var(--motion-base) var(--ease-out) both;
}
.bvc-usermenu[hidden] { display: none; }
.bvc-um-item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:transparent; border:none; cursor:pointer; padding:12px 14px; border-radius:var(--radius-sm); color:var(--text-hi); font:600 14px/1 var(--font-body); text-decoration:none; }
.bvc-um-item i { font-size:20px; }
.bvc-um-item:hover { background:var(--bg-700); }
.bvc-um-item.danger { color:var(--danger); }
.bvc-um-item.danger:hover { background:var(--danger-soft); }
.bvc-um-row { display:flex; align-items:center; gap:12px; padding:10px 14px; }
.bvc-um-row > i { font-size:20px; }
.bvc-um-row > span { flex:1; font-size:13.5px; color:var(--text-mid); }
.bvc-um-seg { display:inline-flex; padding:3px; background:var(--bg-700); border:1px solid var(--border-subtle); border-radius:999px; gap:2px; }
.bvc-um-seg button { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; border:none; cursor:pointer; font:600 12px/1 var(--font-body); background:transparent; color:var(--text-mid); }
.bvc-um-seg button.on { background:var(--bv-gradient); color:#05070E; }
.bvc-um-div { height:1px; background:var(--border-subtle); margin:4px 6px; }
/* ============================================================
FICHA del lead (drawer)
============================================================ */
.bvc-ficha-ov { position:absolute; inset:0; z-index:70; display:flex; justify-content:flex-end; background:rgba(5,7,14,.55); backdrop-filter:blur(3px); }
.bvc-ficha-ov[hidden] { display:none; }
.bvc-ficha {
width:380px; max-width:100%; height:100%; background:var(--bg-800); border-left:1px solid var(--border-default);
box-shadow:var(--shadow-pop); padding:20px; display:flex; flex-direction:column; gap:18px; overflow:auto;
animation:bvSheet var(--motion-base) var(--ease-out) both;
}
.bvc-ficha-head { display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--border-subtle); }
.bvc-ficha-name { font:800 17px/1.1 var(--font-display); color:var(--text-hi); }
.bvc-ficha-phone { font-size:12px; color:var(--text-low); margin-top:3px; font-family:var(--font-mono); }
.bvc-lbl { font:600 11px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--text-low); margin-bottom:8px; }
.bvc-stage-chips { display:flex; gap:6px; flex-wrap:wrap; }
.bvc-chip {
padding:7px 13px; border-radius:999px; border:1px solid var(--border-subtle); cursor:pointer;
font-size:12px; font-weight:600; background:var(--bg-700); color:var(--text-mid); transition:all var(--motion-base);
}
.bvc-chip.on { }
.bvc-ficha-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bvc-ficha-field { background:var(--bg-700); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:11px 13px; }
.bvc-ficha-field .k { font-size:10.5px; color:var(--text-low); letter-spacing:.08em; text-transform:uppercase; }
.bvc-ficha-field .v { font-size:13.5px; font-weight:600; color:var(--text-hi); margin-top:4px; display:flex; align-items:center; gap:6px; }
.bvc-ficha-field .v i { color:var(--bv-cyan); }
.bvc-hist { display:flex; flex-direction:column; gap:2px; }
.bvc-hist-row { display:flex; gap:12px; padding:8px 2px; }
.bvc-hist-ic { width:28px; height:28px; border-radius:999px; display:grid; place-items:center; background:var(--bg-600); flex-shrink:0; font-size:15px; color:var(--bv-cyan); }
.bvc-hist-line { width:1px; flex:1; background:var(--border-subtle); margin-top:4px; }
.bvc-hist .ht { font-size:13px; color:var(--text-mid); }
.bvc-hist .htime { font-size:11px; color:var(--text-low); margin-top:2px; }
.bvc-note { background:var(--warning-soft); border:1px solid rgba(251,191,36,.3); border-radius:var(--radius-sm); padding:12px 14px; font-size:13px; color:var(--text-mid); line-height:1.5; }
.bvc-note i { color:var(--warning); }
.bvc-note-add { margin-top:8px; width:100%; background:var(--bg-700); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:11px 14px; color:var(--text-hi); font:inherit; font-size:13px; resize:vertical; min-height:44px; }
.bvc-note-add::placeholder { color:var(--text-low); }
.bvc-ficha-actions { margin-top:auto; display:flex; gap:10px; padding-top:6px; }
/* ============================================================
Botones fieles
============================================================ */
.bvc-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:999px; padding:13px 22px; cursor:pointer; font-size:14px; font-weight:700; text-decoration:none; }
.bvc-btn-grad { background:var(--bv-gradient); color:#05070E; box-shadow:var(--glow-cyan); }
.bvc-btn-ghost { background:var(--bg-600); color:var(--text-hi); border:1px solid var(--border-default); }
.bvc-btn[disabled] { opacity:.55; cursor:not-allowed; }
.bvc-btn-sm { padding:9px 16px; font-size:12.5px; }
/* ============================================================
Cards genéricas
============================================================ */
.bvc-card { background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:20px; }
.bvc-card-h { font:800 16px/1 var(--font-display); color:var(--text-hi); }
/* ============================================================
IMPACTO
============================================================ */
.bvc-hero { position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--border-default); padding:26px; box-shadow:var(--shadow-lg); }
.bvc-hero-row { position:relative; display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between; }
.bvc-hero-eye { font:600 12px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--bv-cyan); display:flex; align-items:center; gap:8px; }
.bvc-hero-val { font-size:3.6rem; line-height:.95; word-break:break-word; margin-top:12px; }
.bvc-delta { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:var(--success-soft); border-radius:999px; color:var(--success); font:700 14px/1 var(--font-numeric); }
.bvc-hero-sub { color:var(--text-mid); font-size:14px; margin-top:8px; }
.bvc-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:14px; }
.bvc-kpi-c { background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:18px; }
.bvc-kpi-top { display:flex; align-items:center; justify-content:space-between; }
.bvc-kpi-ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:22px; }
.bvc-kpi-v { font-family:var(--font-numeric); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text-hi); font-size:40px; margin-top:14px; }
.bvc-kpi-l { font-size:13px; color:var(--text-mid); margin-top:4px; }
.bvc-2col { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.bvc-funnel { display:flex; flex-direction:column; gap:12px; }
.bvc-funnel-row .fr-top { display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; }
.bvc-funnel-row .fr-top .fl { color:var(--text-mid); }
.bvc-funnel-row .fr-top .fv { font-family:var(--font-numeric); font-weight:700; color:var(--text-hi); }
.bvc-funnel-bar { height:10px; border-radius:999px; background:var(--bg-600); overflow:hidden; }
.bvc-funnel-bar > span { display:block; height:100%; border-radius:999px; background:var(--bv-gradient); transform-origin:left; animation:bvGrow .7s var(--ease-out) both; }
.bvc-atten { display:flex; flex-direction:column; gap:8px; }
.bvc-atten-row { text-align:left; cursor:pointer; display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--radius-sm); background:var(--bg-700); border:1px solid var(--border-subtle); width:100%; }
.bvc-atten-row > i { font-size:22px; color:var(--warning); }
.bvc-atten-row .at-t { font-size:14px; font-weight:600; color:var(--text-hi); }
.bvc-atten-row .at-s { font-size:12px; color:var(--text-low); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bvc-atten-row .at-a { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--warning); white-space:nowrap; }
/* ============================================================
CONVERSACIONES
============================================================ */
.bvc-conv { display:flex; gap:16px; height:100%; }
.bvc-conv-list { width:320px; flex-shrink:0; display:flex; flex-direction:column; background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:14px; }
.bvc-search { position:relative; margin-bottom:10px; }
.bvc-search > i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-low); font-size:15px; }
.bvc-conv-filters { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.bvc-filter { padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; background:var(--bg-700); color:var(--text-mid); border:1px solid var(--border-subtle); cursor:pointer; }
.bvc-filter.on { background:var(--cyan-soft); color:var(--bv-cyan); border-color:var(--cyan-line); }
.bvc-conv-rows { display:flex; flex-direction:column; gap:6px; overflow:auto; flex:1; }
.bvc-conv-row { display:flex; align-items:center; gap:12px; padding:10px; border-radius:var(--radius-sm); cursor:pointer; border:1px solid transparent; background:transparent; width:100%; text-align:left; }
.bvc-conv-row:hover { background:var(--bg-700); }
.bvc-conv-row.active { background:var(--bg-700); border-color:var(--border-subtle); }
.bvc-conv-av { width:42px; height:42px; border-radius:999px; background:var(--bv-gradient-soft); color:var(--bv-cyan); display:grid; place-items:center; font-weight:700; font-size:14px; flex-shrink:0; position:relative; }
.bvc-conv-av .st { position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:999px; border:2px solid var(--surface-2); }
.bvc-conv-row .cr-name { font-size:14px; font-weight:600; color:var(--text-hi); }
.bvc-conv-row .cr-time { font-size:11px; color:var(--text-low); white-space:nowrap; }
.bvc-conv-row .cr-prev { font-size:12.5px; color:var(--text-mid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.bvc-conv-row .cr-dot { width:9px; height:9px; border-radius:999px; flex-shrink:0; align-self:flex-start; margin-top:4px; }
/* Indicador de "no leído": badge cian + nombre en negrita hasta que se abre. */
.bvc-conv-row .cr-unread { width:10px; height:10px; border-radius:999px; flex-shrink:0; align-self:flex-start; margin-top:3px; background:var(--bv-cyan); box-shadow:0 0 0 3px var(--cyan-soft); display:none; }
.bvc-conv-row.unread .cr-unread { display:block; }
.bvc-conv-row.unread .cr-name { font-weight:800; color:var(--text-hi); }
.bvc-conv-row.unread .cr-prev { color:var(--text-mid); }
/* Adjuntos del cliente (tarjeta de propiedad, fotos) en el hilo */
.bvc-thread-atts { margin:0 0 12px; padding:12px; border:1px solid var(--cyan-line); border-radius:12px; background:var(--cyan-soft); }
.bvc-thread-atts[hidden] { display:none; }
.bvc-atts-h { display:flex; align-items:center; gap:7px; font:700 12.5px/1 var(--font-display); color:var(--bv-cyan); margin-bottom:10px; }
.bvc-atts-h i { font-size:16px; }
.bvc-atts-grid { display:flex; flex-wrap:wrap; gap:8px; }
.bvc-att-thumb { display:block; width:104px; height:104px; border-radius:10px; overflow:hidden; border:1px solid var(--border-subtle); background:var(--bg-700); }
.bvc-att-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.bvc-att-thumb:hover { border-color:var(--bv-cyan); }
.bvc-conv-noresults { text-align:center; padding:28px 12px; color:var(--text-low); font-size:13px; }
.bvc-thread { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:16px; }
.bvc-thread-head { display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border-subtle); }
.bvc-thread-name { font-size:15px; font-weight:700; color:var(--text-hi); }
.bvc-thread-sub { font-size:12px; color:var(--text-low); }
.bvc-wa { color:var(--whatsapp); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.bvc-wa:hover { text-decoration:underline; }
.bvc-wa i { font-size:14px; }
.bvc-stage-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:600; }
.bvc-stage-badge .d { width:6px; height:6px; border-radius:999px; background:currentColor; }
.bvc-thread-body { flex:1; overflow:auto; display:flex; flex-direction:column; gap:12px; padding:16px 2px; }
.bvc-msg { display:flex; }
/* "out" = nuestro agente (nosotros) → derecha, burbuja de marca.
"in" = el cliente (ellos) → izquierda, burbuja neutra. */
.bvc-msg.out { justify-content:flex-end; }
.bvc-msg.in { justify-content:flex-start; }
.bvc-bub { max-width:78%; padding:12px 14px; }
.bvc-bub.out { background:var(--bv-gradient-soft); border:1px solid var(--cyan-line); border-radius:16px 16px 4px 16px; color:var(--text-hi); }
.bvc-bub.in { background:var(--bg-600); border:1px solid var(--border-subtle); border-radius:16px 16px 16px 4px; color:var(--text-mid); }
.bvc-bub .bx { font-size:14px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.bvc-bub .btime { font-size:10.5px; color:var(--text-low); margin-top:6px; text-align:right; }
.bvc-audio { margin:2px 0 4px; padding:12px 14px; border-radius:14px; background:var(--bg-700); border:1px solid var(--border-subtle); }
.bvc-audio-h { font-size:12.5px; font-weight:600; margin-bottom:8px; color:var(--text-mid); display:flex; align-items:center; gap:8px; }
.bvc-audio audio { width:100%; height:38px; }
.bvc-typing { display:flex; align-items:center; gap:8px; align-self:flex-start; padding:8px 14px; background:var(--bg-600); border-radius:16px; }
.bvc-typing i { color:var(--bv-cyan); }
.bvc-typing span { font-size:12px; color:var(--text-mid); }
.bvc-paused { display:flex; align-items:center; gap:8px; align-self:center; padding:8px 16px; background:var(--cyan-soft); border:1px solid var(--cyan-line); border-radius:999px; }
.bvc-paused i { color:var(--bv-cyan); }
.bvc-paused span { font-size:12px; color:var(--text-hi); font-weight:600; }
.bvc-paused button { background:none; border:none; color:var(--bv-cyan); font-size:12px; font-weight:700; cursor:pointer; }
.bvc-intervene { margin-top:12px; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--warning-soft); border:1px solid rgba(251,191,36,.4); animation:bvDrop var(--motion-base) var(--ease-out) both; }
.bvc-intervene > i { font-size:22px; color:var(--warning); }
.bvc-intervene .iv-t { font-size:13.5px; font-weight:700; color:var(--text-hi); }
.bvc-intervene .iv-s { font-size:12px; color:var(--text-mid); }
.bvc-composer { display:flex; gap:10px; padding-top:12px; border-top:1px solid var(--border-subtle); }
.bvc-composer-in { flex:1; display:flex; align-items:center; background:var(--bg-700); border:1px solid var(--border-subtle); border-radius:999px; padding:11px 16px; color:var(--text-low); font-size:14px; }
.bvc-composer-note { font-size:11px; color:var(--text-low); margin-top:8px; text-align:center; }
/* ============================================================
PIPELINE (kanban con drag & drop)
============================================================ */
.bvc-pipe-top { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.bvc-pipe-search { position:relative; flex:1; min-width:180px; max-width:340px; }
.bvc-pipe-search > i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-low); font-size:15px; }
.bvc-kanban { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; align-items:stretch; min-height:62vh; }
.bvc-kcol { width:264px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; }
.bvc-kcol-h { display:flex; align-items:center; gap:8px; padding:2px 4px; }
.bvc-kcol-h .sq { width:10px; height:10px; border-radius:3px; }
.bvc-kcol-h .t { font:800 14px/1 var(--font-display); color:var(--text-hi); }
.bvc-kcol-h .n { margin-left:auto; font:700 12px/1 var(--font-numeric); background:var(--bg-600); color:var(--text-mid); padding:3px 8px; border-radius:999px; }
.bvc-kcol-body { display:flex; flex-direction:column; gap:10px; flex:1; min-height:120px; border-radius:var(--radius-sm); transition:background var(--motion-base); padding-bottom:6px; }
.bvc-kcol-body.drop-hover { background:var(--cyan-soft); outline:1px dashed var(--cyan-line); }
.bvc-kcard { text-align:left; width:100%; cursor:grab; background:var(--surface-2); border:1px solid var(--border-subtle); border-top:2px solid var(--bv-cyan); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); padding:13px; user-select:none; -webkit-user-select:none; touch-action:none; }
.bvc-kcard:active { cursor:grabbing; }
.bvc-kcard.dragging { opacity:.35; }
.bvc-drag-ghost { position:fixed; z-index:300; pointer-events:none; box-shadow:var(--shadow-pop); transform:rotate(1.5deg); opacity:.96; margin:0 !important; }
.bvc-kcard .kc-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bvc-kcard .kc-name { font-size:14px; font-weight:600; color:var(--text-hi); }
.bvc-kcard .kc-val { font:700 16px/1 var(--font-numeric); color:var(--bv-cyan); margin-top:8px; }
.bvc-kcard .kc-meta { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:11.5px; color:var(--text-low); }
.bvc-kcard .kc-meta .last { margin-left:auto; display:inline-flex; align-items:center; gap:4px; }
.bvc-kcol-empty { font-size:12px; color:var(--text-low); padding:8px 4px; }
/* ============================================================
MI AGENTE · MI NEGOCIO · INTEGRACIONES · FACTURACIÓN (forms)
============================================================ */
.bvc-grid-forms { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; align-items:start; }
.bvc-field-lbl { font-size:12px; color:var(--text-mid); margin-bottom:6px; }
.bvc-field-in { background:var(--bg-700); border:1px solid var(--border-default); border-radius:var(--radius-sm); padding:11px 14px; color:var(--text-hi); font-size:14px; width:100%; font-family:var(--font-body); outline:none; }
.bvc-field-in:focus { border-color:var(--cyan-line); }
.bvc-field-static { background:var(--bg-700); border:1px solid var(--border-default); border-radius:var(--radius-sm); padding:11px 14px; color:var(--text-hi); font-size:14px; display:flex; align-items:center; gap:8px; }
.bvc-field-static i { color:var(--bv-cyan); }
.bvc-tone-chips { display:flex; gap:8px; flex-wrap:wrap; }
.bvc-tone { padding:8px 14px; border-radius:999px; background:var(--bg-700); border:1px solid var(--border-subtle); color:var(--text-mid); font-size:13px; cursor:pointer; }
.bvc-tone.on { background:var(--cyan-soft); border-color:var(--cyan-line); color:var(--bv-cyan); font-weight:600; }
.bvc-svc { padding:6px 12px; border-radius:999px; background:var(--bg-700); border:1px solid var(--border-subtle); color:var(--text-mid); font-size:12.5px; }
.bvc-ig-card { background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:18px; display:flex; flex-direction:column; gap:12px; }
.bvc-ig-card.connected { border-color:var(--cyan-line); box-shadow:var(--glow-cyan); }
.bvc-ig-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:24px; }
.bvc-ig-name { font-size:15px; font-weight:700; color:var(--text-hi); }
.bvc-ig-unlocks { font-size:12.5px; color:var(--text-mid); margin-top:4px; line-height:1.5; }
.bvc-ig-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.bvc-ig-status { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.bvc-ig-status .d { width:7px; height:7px; border-radius:999px; background:currentColor; }
.bvc-bizrow { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--bg-700); }
.bvc-bizrow .day { flex:1; font-size:13.5px; font-weight:600; color:var(--text-hi); }
.bvc-bizrow .hrs { font-family:var(--font-mono); font-size:12.5px; }
.bvc-fact { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-mid); line-height:1.5; }
.bvc-fact > i { font-size:18px; color:var(--success); flex-shrink:0; margin-top:1px; }
/* Facturación */
.bvc-seg { display:inline-flex; padding:4px; background:var(--bg-700); border:1px solid var(--border-subtle); border-radius:999px; gap:2px; }
.bvc-seg button { padding:8px 16px; border-radius:999px; border:none; cursor:pointer; font-size:13px; font-weight:600; background:transparent; color:var(--text-mid); }
.bvc-seg button.on { background:var(--bv-gradient); color:#05070E; }
.bvc-inv { display:flex; align-items:center; gap:12px; padding:11px 8px; border-radius:var(--radius-sm); }
.bvc-inv i.rc { font-size:22px; color:var(--text-mid); }
/* ============================================================
Estados: Vacío / Cargando / Error
============================================================ */
.bvc-state { max-width:460px; margin:6vh auto 0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; }
.bvc-state-ic { width:96px; height:96px; border-radius:28px; display:grid; place-items:center; background:var(--bv-gradient-soft); border:1px solid var(--cyan-line); box-shadow:var(--glow-cyan); font-size:48px; color:var(--bv-cyan); }
.bvc-state-ic.err { background:var(--danger-soft); border-color:rgba(248,113,113,.4); color:var(--danger); box-shadow:none; }
.bvc-state h2 { font-size:var(--text-h2); color:var(--text-hi); }
.bvc-state p { color:var(--text-mid); font-size:15px; line-height:1.6; margin:0; }
/* Toast */
.bvc-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; background:var(--surface-glass-strong); backdrop-filter:blur(20px); border:1px solid var(--success); border-radius:999px; padding:12px 20px; box-shadow:var(--shadow-pop); animation:bvToast var(--motion-base) var(--ease-spring) both; z-index:200; }
.bvc-toast i { font-size:20px; color:var(--success); }
.bvc-toast span { font-size:14px; color:var(--text-hi); font-weight:600; }
.bvc-toast[hidden] { display:none; }
/* ============================================================
CATÁLOGO
============================================================ */
.bvc-cat-card { background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.bvc-cat-img { height:150px; background:var(--bg-700); background-size:cover; background-position:center; display:grid; place-items:center; position:relative; }
.bvc-cat-off { position:absolute; top:8px; left:8px; background:rgba(5,7,14,.7); color:#fff; font-size:10px; font-weight:600; padding:3px 8px; border-radius:999px; }
.bvc-cat-body { padding:12px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.bvc-cat-name { font-size:14px; font-weight:600; color:var(--text-hi); }
.bvc-cat-cat { font-size:11px; color:var(--text-low); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
.bvc-cat-price { font:700 16px/1 var(--font-numeric); color:var(--bv-cyan); margin-top:2px; }
.bvc-cat-actions { display:flex; gap:8px; align-items:center; margin-top:auto; padding-top:10px; }
.bvc-cat-actions .bvc-btn { flex:1; justify-content:center; }
.bvc-cat-del { width:34px; height:34px; flex-shrink:0; border-radius:999px; background:var(--bg-700); border:1px solid var(--border-subtle); color:var(--text-low); cursor:pointer; }
.bvc-cat-del:hover { color:var(--danger); border-color:rgba(248,113,113,.4); }
.bvc-cat-thumb { width:64px; height:64px; border-radius:10px; background-size:cover; background-position:center; position:relative; border:1px solid var(--border-subtle); }
.bvc-cat-thumb .rm { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:999px; background:var(--danger); color:#fff; border:2px solid var(--surface-2); cursor:pointer; display:grid; place-items:center; font-size:11px; line-height:1; }
/* Modal genérico (centrado) */
.bvc-modal-ov { position:absolute; inset:0; z-index:85; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(5,7,14,.6); backdrop-filter:blur(3px); }
.bvc-modal-ov[hidden] { display:none; }
.bvc-modal { width:520px; max-width:100%; max-height:90%; overflow:auto; background:var(--bg-800); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); padding:22px; animation:bvDrop var(--motion-base) var(--ease-out) both; }
/* ============================================================
MÓVIL 375
============================================================ */
.bvc-mtop { display:none; }
.bvc-mtabs { display:none; }
@media (max-width: 900px) {
.bvc-side { display:none; }
.bvc-top { display:none; }
.bvc-mtop {
display:flex; align-items:center; gap:10px; height:56px; flex-shrink:0; padding:0 16px;
border-bottom:1px solid var(--border-subtle); background:var(--surface-glass-strong); backdrop-filter:blur(20px);
position:sticky; top:0; z-index:30;
}
.bvc-mtop .mt-title { font:800 16px/1 var(--font-display); color:var(--text-hi); }
.bvc-mtop .mt-actions { margin-left:auto; display:flex; gap:8px; }
.bvc-mtop .mt-btn { width:34px; height:34px; border-radius:999px; background:var(--bg-700); border:1px solid var(--border-subtle); color:var(--text-mid); display:grid; place-items:center; font-size:18px; cursor:pointer; position:relative; text-decoration:none; }
.bvc-content { padding:16px 14px 24px; }
.bvc-mtabs {
display:flex; flex-shrink:0; border-top:1px solid var(--border-subtle); background:var(--surface-glass-strong);
backdrop-filter:blur(20px); padding:6px 4px 10px; position:sticky; bottom:0; z-index:30;
}
.bvc-mtab { flex:1; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:transparent; border:none; cursor:pointer; color:var(--text-low); text-decoration:none; }
.bvc-mtab i { font-size:24px; }
.bvc-mtab span { font-size:10px; font-weight:600; }
.bvc-mtab.active { color:var(--bv-cyan); }
.bvc-notif { top:60px; right:10px; width:calc(100% - 20px); }
.bvc-usermenu { left:auto; right:12px; bottom:auto; top:60px; width:calc(100% - 24px); max-width:300px; }
.bvc-ficha { width:100%; }
/* Conversaciones: una columna a la vez en móvil */
.bvc-conv { flex-direction:column; }
.bvc-conv-list { width:100%; }
.bvc-conv.show-thread .bvc-conv-list { display:none; }
.bvc-conv:not(.show-thread) .bvc-thread { display:none; }
.bvc-kpi-v { font-size:32px; }
.bvc-hero-val { font-size:2.1rem; }
}