/* ============================================================================
   SFV CRM · COMPONENTES ESPECÍFICOS DEL CRM
   Badges de etapa "Opción B" (píldora + círculo FontAwesome), prioridad,
   pills de etapa, cascada de servicios, perfil, seguimiento, contacto rápido.
   Requiere FontAwesome 4.7 para los círculos de los badges (íconos \fXXX).
   ============================================================================ */

/* ---------------- BADGES DE ETAPA — "Opción B" ----------------
   Píldora tinte suave + círculo de color con icono BLANCO. 6 etapas. */
.crm-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 13px 3px 4px;
  border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.7; white-space: nowrap; border: 1px solid;
}
.crm-badge::before {
  font-family: FontAwesome; font-weight: normal; width: 19px; height: 19px; flex: 0 0 19px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11.5px;
}
.etapa-NUEVO      { background:#eaf1fe; border-color:#d3e2fc; color:#1e4fa3; } .etapa-NUEVO::before      { content:"\f069"; background:#3B82F6; } /* asterisk */
.etapa-CONTACTADO { background:#e3f8fb; border-color:#c4eef4; color:#0a6b80; } .etapa-CONTACTADO::before { content:"\f095"; background:#06B6D4; color:#053946; } /* phone */
.etapa-CALIFICADO { background:#f1ebfd; border-color:#e0d2fb; color:#6d40c4; } .etapa-CALIFICADO::before { content:"\f00c"; background:#8B5CF6; } /* check */
.etapa-PROPUESTA  { background:#fef3e0; border-color:#fbe0b6; color:#9a6512; } .etapa-PROPUESTA::before  { content:"\f1d8"; background:#F59E0B; color:#4a2e02; } /* paper-plane */
.etapa-NEGOCIACION { background:#e2f7f3; border-color:#bdeee4; color:#0c7a6b; } .etapa-NEGOCIACION::before { content:"\f2b5"; background:#14B8A6; color:#053b34; } /* handshake-o */
.etapa-GANADO     { background:#e7f9ee; border-color:#c6efd4; color:#15873f; } .etapa-GANADO::before     { content:"\f091"; background:#22C55E; color:#08431f; } /* trophy */
.etapa-PERDIDO    { background:#fdeceb; border-color:#f8cfcc; color:#c0362f; } .etapa-PERDIDO::before    { content:"\f00d"; background:#EF4444; } /* times */

/* ---------------- PRIORIDAD (bolita emoji) ---------------- */
.crm-prio { display:inline-flex; align-items:center; gap:5px; font-weight:800; font-size:10.5px; letter-spacing:.02em; padding:3px 10px; border-radius:999px; text-transform:uppercase; }
.crm-prio::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55; }
.prio-ALTA  { background:#F2A8A2; color:#7a241b; }
.prio-MEDIA { background:#F6C293; color:#7a4a14; }
.prio-BAJA  { background:#A8C9EE; color:#1d3f6b; }
.prio-sin   { background:#e2e5e2; color:#5b6660; }
.prio-sin::before { opacity:.35; }

/* ---------------- PILLS DE ETAPA / PERFIL ---------------- */
.crm-pill, .crm-pill-on {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  margin: 3px; padding: 7px 14px; cursor: pointer; transition: all .16s var(--sfv-ease); border: 1px solid var(--sfv-line);
}
.crm-pill { background: var(--sfv-white); color: var(--sfv-graphite); }
.crm-pill:hover { border-color: var(--sfv-mint); color: var(--sfv-mint-dark); }
.crm-pill-on { background: var(--sfv-forest); color: #fff; border-color: var(--sfv-forest); }

/* Bloque "cambiar etapa" como panel sand premium */
.etapa-switch { background: var(--sfv-sand); border: 1px solid var(--sfv-line); border-radius: 14px; padding: 14px 16px 16px; }
.etapa-switch h5 { text-align: center; color: var(--sfv-mint-dark); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; font-weight: 800; margin: 0 0 11px; }
.etapa-pills { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }

/* ---------------- CASCADA DE SERVICIOS (chips por categoría) ---------------- */
.grp-h { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--sfv-muted); margin: 14px 0 8px; }
.grp-h::before { content: ""; flex: 0 0 14px; height: 2px; border-radius: 2px; background: #d8ddd6; }
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 9px; background: var(--sfv-white); border: 1px solid var(--sfv-line);
  border-radius: 12px; padding: 9px 13px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: #3c3c3b; transition: all .16s var(--sfv-ease);
}
.cat-chip:hover { border-color: var(--sfv-mint); }
.cat-chip.on { border: 2px solid var(--sfv-mint-dark); background: #f5faf6; color: var(--sfv-mint-dark); }
.cat-chip .fa { width: 26px; height: 26px; border-radius: 8px; background: rgba(51,210,105,.13); color: var(--sfv-mint-dark); display: inline-flex; align-items: center; justify-content: center; }
.cat-chip.on .fa { background: var(--sfv-mint-dark); color: #fff; }

/* Cascada: breadcrumb de selección */
.casc-ruta { margin-top: 8px; }
.casc-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(51,210,105,.14); color: var(--sfv-mint-dark); padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.casc-hint { font-size: 12px; color: var(--sfv-graphite); font-weight: 600; font-style: italic; }

/* ---------------- ESTADO VACÍO (sin registros / sin datos) — universal ---------------- */
.sfv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--sfv-muted); padding: 34px 18px; min-height: 130px; width: 100%; box-sizing: border-box; flex: 1 1 100%; align-self: stretch; animation: sfvIn .4s ease both; }
.sfv-empty-ico { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--sfv-mint-dark, #1fae53); background: rgba(31,176,88,.10); border: 1px solid rgba(31,176,88,.18); }
.sfv-empty-ico i { color: var(--sfv-mint-dark, #1fae53) !important; }
.sfv-empty-t { font-weight: 700; color: var(--sfv-ink); font-size: .93rem; }
.sfv-empty-s { font-size: .82rem; color: var(--sfv-muted); max-width: 290px; line-height: 1.45; font-style: italic; }
.sfv-empty-chart { min-height: 170px; }
.sfv-empty-compact { padding: 16px 12px; min-height: 0; gap: 7px; }
.sfv-empty-compact .sfv-empty-ico { width: 42px; height: 42px; font-size: 17px; }
.sfv-empty-compact .sfv-empty-t { font-size: .86rem; }
.sfv-empty-tr td { padding: 0 !important; background: transparent !important; }
.sfv-empty-tr:hover td { background: transparent !important; }
body.sfv-dark .sfv-empty-ico { background: rgba(51,210,105,.13); border-color: rgba(51,210,105,.24); color: #7ee0a3; }
body.sfv-dark .sfv-empty-ico i { color: #7ee0a3 !important; }

/* ---------------- SEGUIMIENTO (próxima acción + fecha) ---------------- */
.seg-box { background: #f5faf6; border: 1px solid #d7ebde; border-radius: 12px; padding: 12px 14px; }

/* ---------------- CONTACTO RÁPIDO (WhatsApp / email) ---------------- */
.crm-acc { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; text-decoration: none; margin-right: 3px; vertical-align: middle; }
.crm-wa { background: #25D366; color: #fff; } .crm-wa:hover { background: #1ebe5a; }
.crm-wa-call { background: #128C7E; color: #fff; } .crm-wa-call:hover { background: #0f7268; }
.crm-mail { background: #eaf2fb; color: #2f76a8; } .crm-mail:hover { background: #d8e8f7; }

/* ---------------- CALCULADORA (moderna) ---------------- */
.calc-wrap { max-width: 760px; margin: 0 auto; }
/* Pestañas de la página Calculadora (calculadora vs. configurar tarifas — solo admin) */
.calc-page-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.calc-page-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--sfv-line); background: var(--sfv-white); color: var(--sfv-graphite); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: all .15s var(--sfv-ease); }
.calc-page-tabs button:hover { border-color: var(--sfv-mint); color: var(--sfv-mint-dark); }
.calc-page-tabs button.on { background: linear-gradient(135deg, #0e8043, #1fb058); color: #fff; border-color: #0c7a3d; box-shadow: 0 6px 16px -9px rgba(7, 97, 44, .5); }
.tar-wrap { max-width: 900px; margin: 0 auto; }
.calc-seg-row { display: flex; gap: 8px; margin-bottom: 16px; }
.calc-seg, .calc-seg-on { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  border-radius: 999px; padding: 11px 14px; font-size: 13px; font-weight: 800; border: 1px solid var(--sfv-line); transition: all .16s var(--sfv-ease); }
.calc-seg { background: transparent; color: var(--sfv-graphite); }
.calc-seg:hover { border-color: var(--sfv-mint); color: var(--sfv-mint-dark); background: rgba(31,176,88,.08); }
.calc-seg-on { background: linear-gradient(135deg,#0e8043,#1fb058); color: #fff; border-color: #0c7a3d; box-shadow: 0 6px 16px -8px rgba(7,97,44,.5); }

.calc-card2 { background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: var(--sfv-radius); box-shadow: var(--sfv-shadow-card); padding: 22px; }
.calc-field label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sfv-graphite); margin-bottom: 9px; }
.calc-input-big { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--sfv-line); border-radius: 16px; padding: 6px 18px; background: var(--cl-soft, rgba(255,255,255,.4)); transition: border-color .2s var(--sfv-ease), box-shadow .2s var(--sfv-ease); }
.calc-input-big:focus-within { border-color: var(--sfv-mint); box-shadow: 0 0 0 3px rgba(51,210,105,.16); }
.calc-input-big .cur { font-size: 24px; font-weight: 800; color: var(--sfv-muted); }
.calc-input-big input { flex: 1; border: 0; outline: none; font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 800; color: var(--sfv-ink); padding: 10px 0; background: none; width: 100%; }
.calc-input-big input::placeholder { color: var(--sfv-muted); }

.calc-result { margin-top: 18px; background: linear-gradient(135deg, #0e7a43, #0a3a24); border-radius: 18px; padding: 20px 22px; color: #eafff0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; box-shadow: 0 18px 44px -18px rgba(15,74,51,.6), 0 0 32px -12px rgba(51,210,105,.45); position: relative; overflow: hidden; }
.calc-result::after { content: ''; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(51,210,105,.35), transparent 70%); pointer-events: none; }
.calc-result > * { position: relative; z-index: 1; }
.calc-result .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: #aee6c4; }
.calc-result .big { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-size: 40px; font-weight: var(--sfv-w-black, 900); color: #ffe1a0; line-height: 1.05; text-shadow: 0 0 20px rgba(255,210,120,.35); }
.calc-result .cat { display: inline-block; background: rgba(51,210,105,.2); color: #bff0cf; border-radius: 999px; padding: 3px 12px; font-size: 11px; font-weight: 800; }
.calc-bar { margin-top: 10px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; width: 170px; max-width: 100%; }
.calc-bar > i { display: block; height: 100%; background: var(--sfv-mint); border-radius: 999px; transition: width .35s var(--sfv-ease); }

.calc-break { margin-top: 16px; }
.calc-break .row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--sfv-line-soft); font-size: 13px; }
.calc-break .row .k { color: var(--sfv-graphite); } .calc-break .row .k small { color: var(--sfv-muted); }
.calc-break .row .v { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sfv-ink); }
.calc-break .row.total { margin-top: 4px; border-top: 2px solid var(--sfv-line); border-bottom: 0; padding-top: 13px; font-size: 15px; }
.calc-break .row.total .v { color: var(--sfv-gold-dark); font-size: 16px; }
.calc-empty { margin-top: 18px; color: var(--sfv-muted); font-size: 13px; text-align: center; padding: 22px; background: var(--sfv-sand); border-radius: 14px; }
.calc-actions { margin-top: 16px; text-align: center; }

/* ---------------- AGENDA / CALENDARIO ---------------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-head b { font-size: 15px; font-weight: 800; color: var(--sfv-ink); min-width: 120px; text-align: center; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sfv-muted); padding: 4px 0; }
.cal-day { min-height: 96px; border: 1px solid var(--sfv-line); border-radius: 10px; padding: 5px 6px 6px; background: var(--sfv-white); position: relative; }
.cal-day:not(.empty) { cursor: pointer; transition: box-shadow .14s, background .14s; }
.cal-day:not(.empty):hover { background: var(--sfv-mint-bg, #effaf3); box-shadow: inset 0 0 0 1.5px var(--sfv-mint, #33d269); }
.cal-day:not(.empty)::after { content: "\f067"; font-family: FontAwesome; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; background: linear-gradient(135deg, #1fb058, #0e8043); border-radius: 7px; opacity: 0; transform: scale(.5); transition: opacity .16s, transform .16s; pointer-events: none; box-shadow: 0 3px 8px rgba(14, 128, 67, .42); }
.cal-day:not(.empty):hover::after { opacity: 1; transform: scale(1); }
.cal-day .cal-ev { cursor: grab; }
/* Contenedor de eventos con scroll cuando hay muchos (evita celdas eternas) */
.cal-evs { display: block; max-height: 124px; overflow-y: auto; overflow-x: hidden; margin: 0 -2px; padding: 0 2px 1px; scrollbar-width: thin; scrollbar-color: rgba(31, 176, 88, .4) transparent; }
.cal-evs .cal-ev { flex-shrink: 0; }
.cal-evs::-webkit-scrollbar { width: 5px; }
.cal-evs::-webkit-scrollbar-thumb { background: rgba(31, 176, 88, .4); border-radius: 4px; }
.cal-evs::-webkit-scrollbar-thumb:hover { background: rgba(31, 176, 88, .65); }
.cal-evs::-webkit-scrollbar-track { background: transparent; }
.cal-num { display: flex; align-items: center; }
.cal-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: auto; font-size: 9.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #1fb058, #0e8043); border-radius: 999px; font-family: var(--sfv-num); }
/* en días llenos, un degradado sutil abajo insinúa que hay más (se desplaza) */
.cal-day-full .cal-evs { -webkit-mask-image: linear-gradient(to bottom, #000 88%, rgba(0, 0, 0, .35)); mask-image: linear-gradient(to bottom, #000 88%, rgba(0, 0, 0, .35)); }
/* Modalidad + estados en los eventos de la vista Mes */
.cal-ev-mod { font-size: 9px; margin-left: 1px; opacity: .85; }
.cal-ev.cancelada { opacity: .5; }
.cal-ev.cancelada .cal-ev-r2 { text-decoration: line-through; }
.cal-ev.noshow { box-shadow: inset 0 0 0 1.5px #E67E22; }

/* ===================== AGENDA · selector de vista + rejilla Semana/Día ===================== */
.ag-vistas { display: inline-flex; background: var(--sfv-sand, #eef1ec); border-radius: 10px; padding: 3px; gap: 2px; }
.ag-vbtn { border: 0; background: transparent; font-size: 12.5px; font-weight: 700; color: var(--sfv-graphite); padding: 6px 13px; border-radius: 8px; cursor: pointer; transition: all .14s; }
.ag-vbtn:hover { color: var(--sfv-mint-dark, #0e8043); }
.ag-vbtn.on { background: #fff; color: var(--sfv-forest); box-shadow: 0 1px 4px rgba(8, 30, 18, .12); }
body.sfv-dark .ag-vistas { background: rgba(255, 255, 255, .07); }
body.sfv-dark .ag-vbtn.on { background: rgba(255, 255, 255, .16); color: #fff; }

.cal-grid.cal-grid-semana, .cal-grid.cal-grid-dia { display: block; }
.cw-head { display: grid; align-items: end; }
.cw-dayhead { text-align: center; padding: 5px 2px 7px; border-left: 1px solid var(--sfv-line); }
.cw-dayhead span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--sfv-muted); margin-bottom: 2px; }
.cw-dayhead b { font-size: 16px; font-family: var(--sfv-num); color: var(--sfv-ink); }
.cw-dayhead.hoy b { background: linear-gradient(135deg, #1fb058, #0e8043); color: #fff; border-radius: 50%; width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; }
.cw-allday { display: grid; border-top: 1px solid var(--sfv-line); background: var(--sfv-white); }
.cw-ad-lbl { font-size: 9.5px; color: var(--sfv-muted); padding: 5px 6px 0; text-align: right; }
.cw-ad-cell { border-left: 1px solid var(--sfv-line); padding: 4px; min-height: 24px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.cw-chip { font-size: 10px; font-weight: 700; color: var(--sfv-ink); border-radius: 5px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cw-chip i { font-size: 9px; margin-right: 2px; }
.cw-body { display: flex; max-height: 60vh; overflow-y: auto; border-top: 1px solid var(--sfv-line); scrollbar-width: thin; }
.cw-body::-webkit-scrollbar { width: 7px; } .cw-body::-webkit-scrollbar-thumb { background: rgba(31, 176, 88, .35); border-radius: 5px; }
.cw-hours { flex: 0 0 54px; }
.cw-hour { position: relative; }
.cw-hour span { position: absolute; top: -7px; right: 7px; font-size: 10px; color: var(--sfv-muted); font-family: var(--sfv-num); }
.cw-cols { flex: 1; display: grid; }
.cw-col { position: relative; border-left: 1px solid var(--sfv-line); }
.cw-col:hover { background: rgba(51, 210, 105, .035); }
.cw-line { border-bottom: 1px solid #eef1ec; box-sizing: border-box; pointer-events: none; }
.cw-line.work { background: rgba(51, 210, 105, .045); }
.cw-col.hoy { background: rgba(51, 210, 105, .04); }
.cw-ev { position: absolute; right: 4px; border-radius: 7px; padding: 3px 8px; color: #fff; overflow: hidden; cursor: grab; touch-action: none; box-shadow: 0 2px 7px rgba(8, 30, 18, .2); border-left: 3px solid rgba(255, 255, 255, .55); transition: filter .14s, transform .12s, box-shadow .14s; display: flex; flex-direction: column; gap: 0; z-index: 2; }
.cw-ev:active { cursor: grabbing; }
.cw-ev-dragging { opacity: .35; }
.cw-ev-ghost { color: #fff; border-radius: 8px; box-shadow: 0 12px 28px rgba(8, 30, 18, .34); transform: rotate(-1.5deg) scale(1.03); opacity: .96; }
.cw-col.cw-over { background: rgba(51, 210, 105, .1); box-shadow: inset 0 0 0 2px rgba(31, 176, 88, .45); }
.cw-ev:hover { filter: brightness(1.07); transform: translateY(-1px); z-index: 6; box-shadow: 0 6px 16px rgba(8, 30, 18, .3); }
.cw-ev-h { font-size: 10px; font-weight: 800; opacity: .96; font-family: var(--sfv-num); line-height: 1.25; white-space: nowrap; }
.cw-ev-h i { font-size: 9px; }
.cw-ev-n { font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.cw-ev-s { font-size: 9.5px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
/* Eventos cortos: hora + nombre en una sola línea */
.cw-ev-compact { flex-direction: row; align-items: baseline; gap: 6px; }
.cw-ev-compact .cw-ev-h { flex: 0 0 auto; }
.cw-ev-compact .cw-ev-n { flex: 1 1 auto; min-width: 0; }
.cw-ev.hecha { opacity: .55; }
.cw-ev.cancelada { text-decoration: line-through; opacity: .5; }
.cw-ev.noshow { box-shadow: inset 0 0 0 2px #E67E22, 0 2px 7px rgba(8, 30, 18, .2); }
body.sfv-dark .cw-line { border-bottom-color: rgba(255, 255, 255, .07); }
body.sfv-dark .cw-allday { background: transparent; }
@media (max-width: 760px) { .cw-ev-s { display: none; } .ag-vbtn { padding: 6px 9px; } }
/* Tabla de Aliados: anchos fijos para que las columnas no se separen */
.aliados-tabla { table-layout: fixed; width: 100%; }
.aliados-tabla td, .aliados-tabla th { overflow: hidden; }
.aliados-tabla td:first-child, .aliados-tabla th:first-child { white-space: normal; }
.aliados-tabla td:first-child { text-align: left; }
.aliados-tabla th:first-child { text-align: left; }
/* ---- Modal de evento/tarea: robusto, con acciones rápidas y validación clara ---- */
.tk-req { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #b9742a; background: #fcefdc; border-radius: 5px; padding: 1.5px 6px; margin-left: 6px; vertical-align: middle; }
.tk-titulo { font-size: 15px; font-weight: 700; }
.tk-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tk-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--sfv-graphite); background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: all .14s; }
.tk-chip i { font-size: 11px; color: var(--tc, var(--sfv-mint)); }
.tk-chip:hover { border-color: var(--tc, var(--sfv-mint)); background: var(--sfv-mint-bg, #effaf3); transform: translateY(-1px); }
.tk-chip.on { background: var(--tc, #1fb058); border-color: transparent; color: #fff; box-shadow: 0 3px 9px color-mix(in srgb, var(--tc, #1fb058) 38%, transparent); }
.tk-chip.on i { color: #fff; }
/* Modalidad + Estado de la cita (segmentos) */
.tk-mods, .tk-estados { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-mod, .tk-est { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--sfv-graphite); background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 9px; padding: 6px 10px; cursor: pointer; transition: all .14s; }
.tk-mod i, .tk-est i { font-size: 12px; color: var(--mc, var(--ec, var(--sfv-muted))); }
.tk-mod:hover, .tk-est:hover { border-color: var(--mc, var(--ec, var(--sfv-mint))); transform: translateY(-1px); }
.tk-mod.on { background: var(--mc); border-color: transparent; color: #fff; }
.tk-est.on { background: var(--ec); border-color: transparent; color: #fff; }
.tk-mod.on i, .tk-est.on i { color: #fff; }
.tk-finhint { font-size: 11.5px; color: var(--sfv-mint-dark, #0e8043); font-weight: 700; margin: -4px 0 10px; min-height: 14px; }
.tk-finhint i { margin-right: 3px; }
.tk-footer { flex-wrap: wrap; }
.tk-footer-tools { display: inline-flex; gap: 6px; margin-right: auto; }
.sfv-btn.ghost { background: transparent; border: 1px solid var(--sfv-line); color: var(--sfv-graphite); }
.sfv-btn.ghost:hover { border-color: var(--sfv-mint); color: var(--sfv-mint-dark, #0e8043); }
/* Menú "Añadir a calendario" */
.tk-calwrap { position: relative; display: inline-block; }
.tk-calmenu { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 200px; background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(8, 30, 18, .18); padding: 6px; display: none; z-index: 60; }
.tk-calmenu.open { display: block; animation: tkPop .14s ease; }
@keyframes tkPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tk-calmenu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--sfv-ink); cursor: pointer; }
.tk-calmenu button:hover { background: var(--sfv-sand, #eef1ec); }
.tk-calmenu button i { font-size: 15px; width: 18px; text-align: center; color: var(--sfv-graphite); }
body.sfv-dark .tk-calmenu { background: #16302a; border-color: rgba(255, 255, 255, .12); }
body.sfv-dark .tk-calmenu button:hover { background: rgba(255, 255, 255, .08); }
body.sfv-dark .tk-mod, body.sfv-dark .tk-est { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: var(--sfv-ink); }
.sfv-input.is-error { border-color: #EF4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .16) !important; animation: tkShake .3s; }
@keyframes tkShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.tk-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 4px; color: var(--sfv-graphite); }
.tk-check input { width: 16px; height: 16px; accent-color: var(--sfv-mint, #33d269); }
body.sfv-dark .tk-chip { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: var(--sfv-ink); }
body.sfv-dark .tk-req { background: rgba(185, 116, 42, .2); color: #f0b878; }
.cal-day.empty { background: transparent; border: none; }
.cal-day.hoy { border-color: var(--sfv-mint); box-shadow: 0 0 0 2px rgba(51,210,105,.28) inset; }
.cal-day.hoy .cal-num { color: var(--sfv-mint-dark); font-weight: 800; }
.cal-num { font-size: 11px; font-weight: 700; color: var(--sfv-graphite); }
.cal-ev { margin-top: 4px; border-radius: 7px; padding: 3px 7px 4px; background: var(--c, #5e7384); border-left: 3px solid var(--c, #5e7384); display: flex; flex-direction: column; overflow: hidden; }
.cal-ev-r1 { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; color: var(--c); line-height: 1.35; min-height: 11px; }
.cal-ev-r1 i { font-size: 9px; }
.cal-ev-r1 b { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cal-ev-prio { width: 6px; height: 6px; border-radius: 50%; background: #EF4444; margin-left: auto; box-shadow: 0 0 0 2px rgba(239,68,68,.18); }
.cal-ev-r2 { font-size: 10.5px; font-weight: 800; color: var(--sfv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.cal-ev-r3 { font-size: 9px; color: var(--sfv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
body.sfv-dark .cal-ev-r2 { color: #eaf6e6; }
.ag-i { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-left: 3px solid var(--c, var(--sfv-mint)); background: #f8faf8; border-radius: 8px; margin-bottom: 7px; }

/* ---------------- TAMAÑO DE FUENTE (accesibilidad) ---------------- */
.sfv-font-grande .sfv-table tbody td, .sfv-font-grande .sfv-input, .sfv-font-grande .sfv-select, .sfv-font-grande .sfv-nav a { font-size: 14.5px !important; }
.sfv-font-grande .sfv-kpi-value { font-size: 27px; }
.sfv-font-xl .sfv-table tbody td, .sfv-font-xl .sfv-input, .sfv-font-xl .sfv-select, .sfv-font-xl .sfv-nav a { font-size: 16px !important; }
.sfv-font-xl .sfv-kpi-value { font-size: 30px; }

/* ---------------- MIS LEADS: 2 columnas (tabla 75% / resumen 25%) ---------------- */
.leads-2col { display: grid; grid-template-columns: 3fr 1fr; gap: 16px; align-items: start; }
.leads-side { display: flex; flex-direction: column; gap: 14px; }
.leads-side .sfv-mini-card { padding: 14px; }
.kpis-vert { display: flex; flex-direction: column; gap: 9px; }
.kpis-vert .sfv-kpi { padding: 11px 13px; border-radius: 13px; }
.kpis-vert .sfv-kpi-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; font-size: 15px; }
.kpis-vert .sfv-kpi-value { font-size: 19px; }
.kpis-vert .sfv-kpi-label { font-size: 11px; margin-top: 3px; }
@media (max-width: 1100px) { .leads-2col { grid-template-columns: 1fr; } }
.leads-stack { display: flex; flex-direction: column; gap: 16px; }
.leads-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.leads-3col .sfv-mini-card { min-width: 0; display: flex; flex-direction: column; }
.leads-3col .sfv-mini-card > [id^="chart"] { flex: 1; display: flex; align-items: center; justify-content: center; }
.leads-3col .kpis-vert { flex: 1; }
.leads-3col .sfv-sec-head { margin-bottom: 10px; }
.leads-3col .sfv-sec-head h4 { font-size: 14px; }
@media (max-width: 980px) { .leads-3col { grid-template-columns: 1fr; } }

/* ---------------- AGENDA: cursor/affordance en eventos ---------------- */
.cal-ev { cursor: pointer; transition: filter .15s var(--sfv-ease), transform .12s var(--sfv-ease); }
.cal-ev:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(8,30,18,.2); }
.cal-ev.hecha { opacity: .55; }
.cal-ev.hecha .cal-ev-r2 { text-decoration: line-through; }
/* #3 · Arrastre de eventos día↔día */
.cal-ev { cursor: grab; touch-action: none; }
.cal-ev:active { cursor: grabbing; }
.cal-ev-dragging { opacity: .32; }
.cal-ev-ghost { position: fixed; z-index: 1000; pointer-events: none; margin: 0; box-shadow: 0 12px 30px rgba(8,30,18,.38); transform: rotate(-2deg) scale(1.06); opacity: .96; }
.cal-day { transition: background .14s var(--sfv-ease), box-shadow .14s var(--sfv-ease); }
.cal-day.cal-over { background: rgba(51,210,105,.16); box-shadow: inset 0 0 0 2px var(--sfv-mint); }
body.sfv-dark .cal-day.cal-over { background: rgba(51,210,105,.22); }
.ag-i { transition: background .15s var(--sfv-ease); }
.ag-i:hover { background: #eef7f1; }

/* ---------------- MODO CHROME CLARO (temas de sidebar claro) ---------------- */
body.sidebar-claro .sfv-sidebar { background: var(--sfv-white) !important; border-right: 1px solid var(--sfv-line); box-shadow: inset -1px 0 0 var(--sfv-line); }
body.sidebar-claro .sfv-nav-group { color: var(--sfv-muted); }
body.sidebar-claro .sfv-nav a { color: var(--sfv-graphite); }
body.sidebar-claro .sfv-nav a:hover { background: rgba(51,210,105,.10); color: var(--sfv-mint-dark); }
body.sidebar-claro .sfv-nav a.active { background: rgba(51,210,105,.14); color: var(--sfv-mint-dark); box-shadow: inset 2px 0 0 var(--sfv-mint); }
body.sidebar-claro .sfv-topbar { background: var(--sfv-white) !important; border-bottom: 1px solid var(--sfv-line); box-shadow: 0 2px 12px rgba(0,0,0,.05); }
body.sidebar-claro .sfv-topbar::after { display: none; }
body.sidebar-claro .sfv-brand img { filter: none !important; }
body.sidebar-claro .sfv-menu-toggle, body.sidebar-claro .sfv-tbtn { color: var(--sfv-graphite); }
body.sidebar-claro .sfv-tbtn:hover { background: rgba(51,210,105,.12); color: var(--sfv-mint-dark); }
body.sidebar-claro .sfv-user .meta b { color: var(--sfv-ink); }
body.sidebar-claro .sfv-user .meta span { color: var(--sfv-graphite); }
body.sidebar-claro .sfv-topsearch { background: var(--sfv-sand); border-color: var(--sfv-line); color: var(--sfv-graphite); }
body.sidebar-claro .sfv-topsearch input { color: var(--sfv-ink); }
body.sidebar-claro .sfv-topsearch input::placeholder { color: var(--sfv-muted); }
body.sidebar-claro .sfv-tbtn .badge { box-shadow: 0 0 0 2px #fff; }

/* ---------------- DASHBOARD / INICIO (estilo referencia) ---------------- */
.dash-hello { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.dash-hello h1 { font-size: 22px; font-weight: 800; color: var(--sfv-ink); }
.dash-hello p { margin: 3px 0 0; font-size: 13px; color: var(--sfv-graphite); }
.dash-date { display: inline-flex; align-items: center; gap: 8px; background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 700; color: var(--sfv-graphite); }

.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.dash-kpi { background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--sfv-shadow-card); transition: transform .25s var(--sfv-ease), box-shadow .25s var(--sfv-ease); }
.dash-kpi:hover { transform: translateY(-2px); box-shadow: var(--sfv-shadow-hover); }
.dash-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.dash-kpi-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.dash-kpi-delta { font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; }
.dash-kpi-delta.up { color: #1f9d57; } .dash-kpi-delta.down { color: #d2473d; }
.dash-kpi-val { font-size: 27px; font-weight: var(--sfv-w-black, 900); font-family: var(--sfv-num); font-variant-numeric: tabular-nums; color: var(--sfv-ink); margin-top: 12px; line-height: 1; }
.dash-kpi-label { font-size: 12.5px; color: var(--sfv-graphite); margin-top: 5px; font-weight: 600; }
.dash-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 4px; }
.dash-kpi-spark { flex: 1; min-width: 0; }
.dash-kpi-sub { font-size: 10.5px; color: var(--sfv-muted); white-space: nowrap; }

.dash-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.sfv-main > .dash-panel { margin-bottom: 16px; }
/* ---- Módulos reorganizables (modo "Personalizar pantalla") ---- */
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; grid-auto-flow: row dense; }
/* Resumen de métricas: separa la grilla de charts de la tabla siguiente (evita el montaje) */
.dash-grid[data-cust="resumen"] { margin-bottom: 24px; align-items: stretch; }
.dash-mod { grid-column: span 12; min-width: 0; }
.dash-mod[data-span="6"] { grid-column: span 6; }
.dash-mod[data-span="4"] { grid-column: span 4; }
.dash-mod[data-span="8"] { grid-column: span 8; }
.dash-mod.dragging { opacity: .45; outline: 2px dashed var(--sfv-mint); outline-offset: -2px; }
.dash-mod.dragover { box-shadow: 0 0 0 2px var(--sfv-mint) inset; }
/* asas: ocultas por defecto, visibles solo en modo personalizar */
.dash-grip { display: none; border: 0; background: transparent; color: var(--sfv-muted); cursor: grab; font-size: 15px; padding: 6px 8px; border-radius: 8px; line-height: 1; }
.dash-grip:hover { background: var(--sfv-sand); color: var(--sfv-mint-dark); }
.dash-grip:active { cursor: grabbing; }
body.sfv-customizing .dash-grip { display: inline-flex; align-items: center; }
body.sfv-customizing [data-cust] .dash-mod { outline: 1.5px dashed var(--sfv-line); outline-offset: -2px; border-radius: 16px; position: relative; }
body.sfv-customizing [data-cust] .dash-mod:hover { outline-color: var(--sfv-mint); }
@media (max-width: 1100px) { .dash-mod, .dash-mod[data-span="6"], .dash-mod[data-span="4"], .dash-mod[data-span="8"] { grid-column: span 12; } }

/* Barra flotante del modo personalizar */
.sfv-cust-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140%); z-index: 1200; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--sfv-forest), var(--sfv-forest-2)); color: #eafff0; padding: 11px 16px; border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.28); transition: transform .25s var(--sfv-ease); max-width: calc(100vw - 28px); }
.sfv-cust-bar.show { transform: translateX(-50%) translateY(0); }
.sfv-cust-bar .ct { font-size: 13px; font-weight: 700; }
.sfv-cust-bar .ct span { display: block; font-size: 11px; font-weight: 500; color: #9fd9b6; }
.sfv-cust-bar button { border: 0; border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.sfv-cust-bar .reset { background: rgba(255,255,255,.14); color: #eafff0; }
.sfv-cust-bar .reset:hover { background: rgba(255,255,255,.24); }
.sfv-cust-bar .done { background: var(--sfv-mint); color: #08230f; }
.sfv-tbtn.on { background: var(--sfv-mint); color: #08230f; }

/* Editor de orden del menú (Configuración) */
.nav-ord-list { display: flex; flex-direction: column; gap: 7px; }
.nav-ord-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1.5px solid var(--sfv-line); border-radius: 11px; background: var(--sfv-white); font-size: 13.5px; font-weight: 700; color: var(--sfv-ink); cursor: grab; transition: border-color .14s var(--sfv-ease), box-shadow .14s var(--sfv-ease); }
.nav-ord-row:hover { border-color: var(--sfv-mint); }
.nav-ord-row.dragging { opacity: .5; border-style: dashed; }
.nav-ord-row .nav-ord-grip { color: var(--sfv-muted); }
.nav-ord-row span { flex: 1; }

.dash-week { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 100%; row-gap: 8px; }
.dash-week-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--sfv-line); background: var(--sfv-white); color: var(--sfv-graphite); cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; transition: all .14s var(--sfv-ease); }
.dash-week-btn:hover { border-color: var(--sfv-mint); color: var(--sfv-mint-dark); }
.dash-week-btn:disabled { opacity: .4; cursor: not-allowed; }
.dash-week-hoy { border: 1px solid var(--sfv-mint); background: var(--sfv-mint-light); color: var(--sfv-mint-dark); border-radius: 8px; padding: 0 12px; height: 30px; font-size: 12px; font-weight: 800; cursor: pointer; }
/* Segmentado Día / Semana / Mes */
.dash-period { display: inline-flex; background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 999px; padding: 3px; gap: 2px; }
.dash-period button { border: 0; background: transparent; color: var(--sfv-muted); font-weight: 800; font-size: 12px; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: color .15s, background .15s, box-shadow .15s; }
.dash-period button.on { background: linear-gradient(135deg, #0e8043, #1fb058); color: #fff; box-shadow: 0 3px 9px rgba(31,176,88,.3); }
.dash-period button:not(.on):hover { color: var(--sfv-mint-dark); }
/* Rango como botón que abre el calendario */
.dash-week { position: relative; }
.dash-date { cursor: pointer; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.dash-date:hover, .dash-date.on { border-color: var(--sfv-mint); box-shadow: 0 0 0 3px rgba(51,210,105,.12); }
.dash-date-caret { font-size: 11px; opacity: .55; margin-left: 1px; }
/* Popover de calendario */
.dash-cal-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; width: 270px; background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 16px; box-shadow: 0 18px 50px rgba(8,20,14,.22); padding: 12px; animation: sfvIn .18s ease both; }
.dc-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.dc-h b { font-size: 13.5px; color: var(--sfv-ink); text-transform: capitalize; }
.dc-nav { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--sfv-line); background: var(--sfv-white); color: var(--sfv-graphite); cursor: pointer; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.dc-nav:hover { border-color: var(--sfv-mint); color: var(--sfv-mint-dark); }
.dc-hint { font-size: 11px; color: var(--sfv-muted); text-align: center; margin-bottom: 8px; font-style: italic; }
.dc-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 3px; }
.dc-dow span { text-align: center; font-size: 10px; font-weight: 800; color: var(--sfv-muted); }
.dc-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.dc-x { aspect-ratio: 1; }
.dc-d { aspect-ratio: 1; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--sfv-ink); font-family: inherit; transition: background .12s; }
.dc-d:hover:not(:disabled) { background: rgba(51,210,105,.14); }
.dc-d:disabled { color: var(--sfv-line); cursor: not-allowed; }
.dc-d.hoy { box-shadow: inset 0 0 0 1.5px var(--sfv-mint); }
.dc-d.sel { background: linear-gradient(135deg,#0e8043,#1fb058); color: #fff !important; }
.dc-mgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.dc-mo { padding: 12px 0; border: 1px solid var(--sfv-line); background: var(--sfv-white); border-radius: 10px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--sfv-ink); text-transform: capitalize; font-family: inherit; transition: border-color .12s, background .12s; }
.dc-mo:hover:not(:disabled) { border-color: var(--sfv-mint); color: var(--sfv-mint-dark); }
.dc-mo:disabled { color: var(--sfv-line); cursor: not-allowed; }
.dc-mo.hoy { box-shadow: inset 0 0 0 1.5px var(--sfv-mint); }
.dc-mo.sel { background: linear-gradient(135deg,#0e8043,#1fb058); color: #fff !important; border-color: transparent; }
.dc-today { width: 100%; margin-top: 10px; border: 0; background: rgba(31,176,88,.1); color: var(--sfv-mint-dark); border-radius: 9px; padding: 8px; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .14s; }
.dc-today:hover { background: rgba(31,176,88,.18); }
body.sfv-dark .dash-cal-pop { background: #14252a; border-color: rgba(255,255,255,.1); }
body.sfv-dark .dc-nav, body.sfv-dark .dc-mo { background: rgba(255,255,255,.04); }
.dash-action { grid-template-columns: 1fr 1fr; }
.dash-action .dash-panel { border-top: 3px solid var(--sfv-mint); }
.dash-section-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sfv-muted); margin: 6px 2px 12px; }
.agenda-2col { display: grid; grid-template-columns: 7fr 3fr; gap: 18px; align-items: stretch; }
.agenda-2col > .agenda-cal { margin: 0; }
.agenda-grid { align-items: stretch; gap: 18px; }
.agenda-grid > .dash-mod { margin: 0; min-width: 0; }
.agenda-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.agenda-side .sfv-mini-card { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.agenda-side #agLista { overflow: auto; flex: 1; }
.agenda-side .ag-i { margin-bottom: 8px; }
@media (max-width: 980px) { .agenda-2col { grid-template-columns: 1fr; } .agenda-side .sfv-mini-card { flex: none; } .agenda-side #agLista { max-height: 420px; } }
@media (max-width: 1100px) { .dash-grid-2, .dash-grid-3, .dash-action { grid-template-columns: 1fr; } }

.dash-panel { background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 16px; box-shadow: var(--sfv-shadow-card); padding: 18px; }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dash-panel-head h4 { font-size: 14.5px; font-weight: 800; color: var(--sfv-ink); }
.dash-panel-head a { font-size: 12px; color: var(--sfv-mint-dark); font-weight: 700; cursor: pointer; }

.dash-rep { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--sfv-line-soft); }
.dash-rep:last-child { border-bottom: 0; }
.dash-rep .rk { width: 22px; height: 22px; border-radius: 7px; background: var(--sfv-sand); color: var(--sfv-graphite); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.dash-rep .rk.gold { background: rgba(201,164,87,.18); color: #A07C30; }
.dash-rep .av { width: 34px; height: 34px; border-radius: 50%; background: #15603f; color: #5BE584; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.dash-rep .nm { flex: 1; } .dash-rep .nm b { font-size: 13px; display: block; } .dash-rep .nm span { font-size: 11px; color: var(--sfv-muted); }
.dash-rep .amt { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-weight: 800; color: var(--sfv-mint-dark); font-size: 13px; text-align: right; }

.dash-list-i { display: flex; gap: 11px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--sfv-line-soft); }
.dash-list-i:last-child { border-bottom: 0; }
.dash-list-i .li-ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 32px; }
.dash-list-i .li { flex: 1; min-width: 0; } .dash-list-i .li b { font-size: 12.5px; } .dash-list-i .li p { margin: 1px 0 0; font-size: 11.5px; color: var(--sfv-graphite); } .dash-list-i .li .t { font-size: 10.5px; color: var(--sfv-muted); margin-top: 2px; }
.dash-list-i .li-time { font-size: 11px; font-weight: 700; color: var(--sfv-mint-dark); font-family: var(--sfv-num); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------- TOPBAR: botones de acción + campana ---------------- */
.sfv-tbtn { position: relative; background: none; border: 0; color: var(--sfv-on-forest); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s var(--sfv-ease), color .2s var(--sfv-ease); }
.sfv-tbtn:hover { background: rgba(51,210,105,.16); color: var(--sfv-mint-light); }
.sfv-tbtn .badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--sfv-coral); color: #fff; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--sfv-forest); }
.sfv-topsearch { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 7px 14px; color: var(--sfv-on-forest); min-width: 220px; }
.sfv-topsearch input { border: 0; outline: none; background: none; color: #fff; font-size: 13px; width: 100%; font-family: inherit; }
.sfv-topsearch input::placeholder { color: var(--sfv-on-forest-muted); }
.sfv-crm-tag { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #3a2e05;
  background-image: linear-gradient(120deg, #d99e22 0%, #FFE08A 30%, #fff6da 47%, #ffe79e 60%, #d99e22 82%);
  background-size: 280% 280%;
  animation: sfvGoldShim 5s ease-in-out infinite;
  border: 1px solid #e0a72a; padding: 3px 10px; border-radius: 7px;
  box-shadow: 0 2px 12px -3px rgba(240,180,41,.6); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
/* shimmer de oro inclinado (diagonal) y continuo */
@keyframes sfvGoldShim { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .sfv-crm-tag { animation: none; background-position: 50% 50%; } }

/* ---------------- ACCIONES DESTRUCTIVAS EN ROJO (intuitivas) ---------------- */
.sfv-icon-btn.danger { color: #d2473d; }
.sfv-icon-btn.danger:hover { background: rgba(210,71,61,.12); border-color: rgba(210,71,61,.35); color: #b23329; }
.sfv-icon-btn.info { color: #2980B9; }
.sfv-icon-btn.info:hover { background: rgba(41,128,185,.12); border-color: rgba(41,128,185,.35); color: #1f5f86; }
.sfv-btn.danger, .sfv-btn.cancel { background: var(--sfv-danger); border-color: var(--sfv-danger); color: #fff; box-shadow: 0 6px 16px -8px rgba(210,71,61,.5); }
.sfv-btn.danger:hover, .sfv-btn.cancel:hover { filter: brightness(1.05); background: var(--sfv-danger-strong); border-color: var(--sfv-danger-strong); }
.sfv-btn.danger-ghost { background: var(--sfv-white); border-color: #f1cbc6; color: #b23329; box-shadow: none; }
.sfv-btn.danger-ghost:hover { background: #fdeeeb; border-color: #d2473d; filter: none; }
.sfv-modal-title .close:hover { background: rgba(210,71,61,.85); color: #fff; }
.sfv-clear:hover, .sfv-search-x:hover { background: #d2473d; color: #fff; }

/* ---------------- PANEL DE NOTIFICACIONES ---------------- */
.sfv-notif { position: absolute; top: 56px; right: 12px; width: 348px; max-width: calc(100vw - 24px); background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 14px; box-shadow: var(--sfv-shadow-overlay); z-index: 1500; overflow: hidden; display: none; }
.sfv-notif.open { display: block; }
.sfv-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--sfv-line-soft); font-weight: 800; font-size: 13.5px; color: var(--sfv-ink); }
.sfv-notif-head a { font-size: 11.5px; color: var(--sfv-mint-dark); cursor: pointer; font-weight: 700; }
.sfv-notif-list { max-height: 380px; overflow-y: auto; }
.sfv-notif-item { display: flex; gap: 11px; padding: 12px 15px; border-bottom: 1px solid var(--sfv-line-soft); }
.sfv-notif-item.unread { background: #f5faf6; }
.sfv-notif-item .nico, .sfv-toast .tico { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.sfv-notif-item b { font-size: 12.5px; color: var(--sfv-ink); }
.sfv-notif-item p { margin: 2px 0 0; font-size: 11.5px; color: var(--sfv-graphite); line-height: 1.4; }
.sfv-notif-item .nt { font-size: 10.5px; color: var(--sfv-muted); margin-top: 3px; }

/* ---------------- TOASTS (notificaciones flotantes tipo Claude) ---------------- */
.sfv-toasts { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; width: 350px; max-width: calc(100vw - 32px); }
.sfv-toast { display: flex; gap: 11px; align-items: flex-start; background: var(--sfv-white); border: 1px solid var(--sfv-line); border-left: 4px solid var(--sfv-mint); border-radius: 14px; box-shadow: var(--sfv-shadow-overlay); padding: 13px 14px; animation: sfvToastIn .28s var(--sfv-ease); }
.sfv-toast.out { animation: sfvToastOut .25s var(--sfv-ease) forwards; }
.sfv-toast .tbody { flex: 1; min-width: 0; }
.sfv-toast .tbody b { font-size: 13px; display: block; color: var(--sfv-ink); }
.sfv-toast .tbody p { margin: 2px 0 0; font-size: 12px; color: var(--sfv-graphite); line-height: 1.45; }
.sfv-toast .tclose { background: none; border: 0; color: var(--sfv-muted); cursor: pointer; font-size: 15px; line-height: 1; }
.sfv-toast .tclose:hover { color: var(--sfv-coral-dark); }
.sfv-toast.info .tico, .sfv-notif-item.info .nico { background: rgba(47,118,168,.14); color: #2f76a8; }
.sfv-toast.success .tico, .sfv-notif-item.success .nico { background: rgba(31,157,87,.14); color: #1f9d57; }
.sfv-toast.warn .tico, .sfv-notif-item.warn .nico { background: rgba(201,164,87,.18); color: #A07C30; }
.sfv-toast.danger .tico, .sfv-notif-item.danger .nico { background: rgba(232,103,76,.14); color: #b23b27; }
.sfv-toast.info { border-left-color: #2f76a8; } .sfv-toast.success { border-left-color: #1f9d57; } .sfv-toast.warn { border-left-color: #C9A457; } .sfv-toast.danger { border-left-color: #E8674C; }
@keyframes sfvToastIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes sfvToastOut { to { opacity: 0; transform: translateX(26px); } }

/* ---------------- BOTÓN "X" PARA LIMPIAR CAMPOS ---------------- */
.sfv-clearable { position: relative; display: block; }
.sfv-clearable > input { padding-right: 30px !important; }
.sfv-clearable > .sfv-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 0; background: #dfe3df; color: #5b5f5b; cursor: pointer; font-size: 11px; line-height: 1; display: none; align-items: center; justify-content: center; padding: 0; }
.sfv-clearable.show > .sfv-clear { display: inline-flex; }
.sfv-clear:hover { background: var(--sfv-coral); color: #fff; }
.sfv-search .sfv-search-x { border: 0; background: none; color: var(--sfv-muted); cursor: pointer; font-size: 16px; line-height: 1; display: none; padding: 0 2px; }
.sfv-search.has .sfv-search-x { display: inline-flex; }
.sfv-search .sfv-search-x:hover { color: var(--sfv-coral-dark); }
.sfv-topsearch .sfv-search-x { border: 0; background: none; color: var(--sfv-on-forest-muted); cursor: pointer; font-size: 15px; display: none; }
.sfv-topsearch.has .sfv-search-x { display: inline-flex; }
.cl-search .sfv-search-x { border: 0; background: none; color: var(--sfv-muted); cursor: pointer; font-size: 15px; line-height: 1; display: none; padding: 0 2px; }
.cl-search.has .sfv-search-x { display: inline-flex; }
.cl-search .sfv-search-x:hover { color: var(--sfv-coral-dark); }

/* ---------------- CONFIGURACIÓN ---------------- */
.cfg-2col { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .cfg-2col { grid-template-columns: 1fr; } }
.cfg-col-left, .cfg-col-right { display: flex; flex-direction: column; gap: 18px; }
.cfg-foto-block { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cfg-foto { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sfv-mint); box-shadow: 0 6px 18px rgba(7, 97, 44, .18); }
.cfg-foto-empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sfv-forest), var(--sfv-forest-2)); color: var(--sfv-mint-light); font-weight: 800; font-size: 34px; letter-spacing: 1px; }
.cfg-foto-acts { display: flex; gap: 8px; }
.cfg-pref { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sfv-line); }
.cfg-pref:last-child { border-bottom: 0; }
.cfg-pref b { display: block; font-size: 13.5px; color: var(--sfv-ink); }
.cfg-pref span { display: block; font-size: 12px; color: var(--sfv-muted); margin-top: 2px; }
.crm-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cfg-switch { width: 44px; height: 24px; border-radius: 14px; border: 0; background: #c9cfc9; position: relative; cursor: pointer; flex: 0 0 auto; transition: background .18s var(--sfv-ease); }
.cfg-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--sfv-white); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s var(--sfv-ease); }
.cfg-switch.on { background: var(--sfv-mint); }
.cfg-switch.on::after { transform: translateX(20px); }
.cfg-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .cfg-theme-grid { grid-template-columns: 1fr; } }
.cfg-theme { border: 2px solid var(--sfv-line); border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--sfv-white); transition: all .16s var(--sfv-ease); }
.cfg-theme:hover { border-color: var(--sfv-mint); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(7, 97, 44, .12); }
.cfg-theme.on { border-color: var(--sfv-mint-dark); box-shadow: 0 0 0 3px rgba(47, 190, 94, .2); }
.cfg-theme-prev { height: 64px; display: flex; align-items: center; gap: 7px; padding: 0 16px; }
.cfg-theme-prev i { width: 22px; height: 22px; border-radius: 50%; display: inline-block; }
.cfg-theme-meta { padding: 10px 14px 12px; }
.cfg-theme-meta b { display: block; font-size: 13.5px; color: var(--sfv-ink); }
.cfg-theme-meta span { display: block; font-size: 11.5px; color: var(--sfv-muted); margin-top: 2px; }
.cfg-theme.on .cfg-theme-meta b::after { content: ' ✓'; color: var(--sfv-mint-dark); }

/* ---------------- NOTIFICACIONES (gestión) ---------------- */
.sfv-notif-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sfv-coral, #d2473d); color: #fff; font-size: 11px; font-weight: 800; font-style: normal; margin-left: 4px; }
.sfv-notif-acts { display: flex; align-items: center; gap: 10px; }
.sfv-notif-acts a { cursor: pointer; font-size: 12px; }
.sfv-notif-acts a.danger { color: var(--sfv-coral, #d2473d); }
.sfv-notif-item { cursor: pointer; }
.sfv-notif-row-acts { display: flex; flex-direction: column; gap: 5px; align-self: flex-start; }
.sfv-notif-row-acts button { width: 22px; height: 22px; border-radius: 6px; border: 0; background: #eef1ee; color: var(--sfv-graphite); cursor: pointer; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.sfv-notif-item:hover .sfv-notif-row-acts button { opacity: 1; }
.sfv-notif-row-acts button:hover { background: var(--sfv-mint); color: #fff; }
.sfv-notif-row-acts button.danger:hover { background: var(--sfv-coral, #d2473d); color: #fff; }
.sfv-notif-empty { text-align: center; color: var(--sfv-muted); padding: 28px 12px; font-size: 13px; }
.sfv-notif-empty i { font-size: 26px; opacity: .5; }
.sfv-notif-detail { border-left: 4px solid var(--sfv-mint); padding: 4px 0 4px 14px; }
.sfv-notif-detail.warn { border-color: var(--sfv-gold, #d99a3a); }
.sfv-notif-detail.danger { border-color: var(--sfv-coral, #d2473d); }
.sfv-notif-detail.success { border-color: var(--sfv-mint); }

/* ---------------- MODO COMPACTO ---------------- */
body.sfv-compact .sfv-card-body { padding: 14px 16px; }
body.sfv-compact .sfv-table td, body.sfv-compact .sfv-table th { padding-top: 7px; padding-bottom: 7px; }
body.sfv-compact .sfv-mini-card { padding: 12px 14px; }

/* ---------------- CALCULADORA: modos + campos ---------------- */
.calc-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 720px) { .calc-modes { grid-template-columns: 1fr 1fr; } }
.calc-mode { border: 1px solid var(--sfv-line); background: var(--cl-soft, rgba(255,255,255,.4)); color: var(--sfv-graphite); border-radius: 16px; padding: 15px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; line-height: 1.25; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .15s var(--sfv-ease), border-color .2s, box-shadow .25s, background .2s; }
.calc-mode i { font-size: 18px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff !important; box-shadow: 0 5px 14px -5px rgba(15,74,51,.5); }
.calc-mode:nth-child(1) i { background: linear-gradient(135deg,#06B6D4,#0e7490); }
.calc-mode:nth-child(2) i { background: linear-gradient(135deg,#16A085,#0e6b58); }
.calc-mode:nth-child(3) i { background: linear-gradient(135deg,#22C55E,#15803d); }
.calc-mode:nth-child(4) i { background: linear-gradient(135deg,#8B5CF6,#6d28d9); }
.calc-mode:hover { transform: translateY(-2px); border-color: var(--sfv-mint); }
.calc-mode.on { background: linear-gradient(135deg, rgba(31,176,88,.18), rgba(31,176,88,.05)); border-color: var(--sfv-mint); color: var(--sfv-mint-dark); box-shadow: 0 14px 32px -16px rgba(51,210,105,.55), inset 0 0 0 1.5px var(--sfv-mint); }
.calc-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 600px) { .calc-row3 { grid-template-columns: 1fr; } }
.calc-field.sm label { margin-bottom: 6px; }
.calc-field.sm { margin-bottom: 0; }
.calc-input-mid { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--sfv-line); border-radius: 10px; padding: 2px 12px; }
.calc-input-mid:focus-within { border-color: var(--sfv-mint); box-shadow: 0 0 0 3px rgba(51, 210, 105, .14); }
.calc-input-mid .cur { font-weight: 800; color: var(--sfv-muted); }
.calc-input-mid input { flex: 1; border: 0; outline: none; font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; padding: 9px 0; background: none; width: 100%; }
.calc-mini-note { margin-top: 16px; font-size: 12px; color: var(--sfv-muted); font-weight: 600; font-style: italic; }
.calc-disclaimer { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: var(--sfv-graphite); background: var(--sfv-sand); border: 1px solid var(--sfv-line); border-left: 3px solid var(--sfv-gold, #d99a3a); border-radius: 10px; padding: 10px 12px; font-style: italic; }
.calc-disclaimer i { color: var(--sfv-gold-dark, #8f6b22); }

/* --- Ajustar precios para negociar (notas de crédito) --- */
.calc-nego { margin-top: 16px; border: 1px solid var(--sfv-line); border-radius: 14px; padding: 12px 14px; background: var(--sfv-sand); }
.calc-nego-head { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.calc-nego-head input { position: absolute; opacity: 0; width: 0; height: 0; }
.calc-nego-sw { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--sfv-line); transition: background .18s var(--sfv-ease); flex: none; }
.calc-nego-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s var(--sfv-ease); }
.calc-nego-head input:checked + .calc-nego-sw { background: linear-gradient(135deg, #0e8043, #1fb058); }
.calc-nego-head input:checked + .calc-nego-sw::after { transform: translateX(18px); }
.calc-nego-lbl { font-size: 13px; font-weight: 800; color: var(--sfv-graphite); }
.calc-nego-lbl i { color: var(--sfv-gold-dark, #8f6b22); margin-right: 5px; }
.calc-nego-body { margin-top: 2px; }
.calc-def { font-weight: 700; color: var(--sfv-mint-dark); text-transform: none; letter-spacing: 0; }
.calc-nego-flag { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--sfv-gold-dark, #8f6b22); background: rgba(201, 164, 87, .14); border: 1px solid rgba(201, 164, 87, .4); border-radius: 999px; padding: 6px 14px; }
.calc-nego-tag { color: var(--sfv-gold-dark, #8f6b22); font-weight: 800; }
/* botón que alterna la unidad ($ ↔ %) de la comisión de la casa */
.calc-unit-btn { flex: none; width: 27px; height: 27px; border: 1px solid var(--sfv-line); background: var(--sfv-white); color: var(--sfv-graphite); font-weight: 800; font-size: 14px; font-family: inherit; border-radius: 8px; cursor: pointer; transition: border-color .15s var(--sfv-ease), color .15s var(--sfv-ease), background .15s var(--sfv-ease); }
.calc-unit-btn:hover { border-color: var(--sfv-mint); color: var(--sfv-mint-dark); background: rgba(31, 176, 88, .08); }
/* selector de base de la comisión de la casa (nominal vs efectivo, solo en modo %) */
.calc-casa-base { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sfv-muted); }
.calc-casa-base > i { color: var(--sfv-mint-dark); }
.calc-base-sel { border: 1px solid var(--sfv-line); background: var(--sfv-white); color: var(--sfv-graphite); font-weight: 800; font-size: 12px; font-family: inherit; border-radius: 8px; padding: 4px 8px; cursor: pointer; outline: none; transition: border-color .15s var(--sfv-ease); }
.calc-base-sel:hover, .calc-base-sel:focus { border-color: var(--sfv-mint); }
/* campo "total a recibir objetivo" (cálculo inverso) */
.calc-nego-target { margin-top: 14px; max-width: 320px; }
.calc-nego-target > label i { color: var(--sfv-gold-dark, #8f6b22); margin-right: 5px; }
.calc-nego-target .calc-input-mid { border-color: rgba(201, 164, 87, .5); }
.calc-nego-target .calc-input-mid:focus-within { border-color: var(--sfv-gold, #d99a3a); box-shadow: 0 0 0 3px rgba(201, 164, 87, .18); }

/* ---------------- PERFIL DE COTIZACIÓN (imprimible) ---------------- */
/* ---------------- PERFIL DE COTIZACIÓN · documento profesional A4 (imprimible) ---------------- */
.cotiza-doc { background: #fff; border: 1px solid var(--sfv-line); border-radius: 14px; padding: 0; color: #16201a; overflow: hidden; box-shadow: 0 6px 24px rgba(8, 30, 18, .07); }
.cot2-sheet { padding: 30px 34px 24px; }
.cot2-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 15px; border-bottom: 2.5px solid #1fa85c; }
.cot2-logo { height: 52px; }
.cot2-docref { text-align: right; }
.cot2-doctype { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #12894a; margin-bottom: 8px; }
.cot2-reftbl { display: inline-flex; border: 1px solid #e2ebe2; border-radius: 8px; overflow: hidden; }
.cot2-reftbl > div { padding: 6px 14px; text-align: center; }
.cot2-reftbl > div + div { border-left: 1px solid #e2ebe2; }
.cot2-reftbl span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--sfv-muted); }
.cot2-reftbl b { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-size: 12.5px; color: #16201a; }
.cot2-subtitle { margin: 15px 0 14px; font-size: 14px; font-weight: 700; color: #16201a; display: flex; align-items: center; gap: 8px; }
.cot2-subtitle i { color: #1fa85c; }
.cot2-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.cot2-party { background: #f6faf6; border: 1px solid #e6efe6; border-radius: 10px; padding: 12px 14px; }
.cot2-party h6 { margin: 0 0 5px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: #1fa85c; font-weight: 800; }
.cot2-party > b { font-size: 14.5px; color: #16201a; }
.cot2-party-lines { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.cot2-party-lines > div { font-size: 11.5px; color: #3b4a40; }
.cot2-party-lines span { color: var(--sfv-muted); margin-right: 6px; }
.cot2-emisor-inline { display: flex; align-items: center; gap: 9px; }
.cot2-emi-logo { width: 44px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e2ebe2; border-radius: 6px; color: #b9c6bd; font-size: 15px; }
.cot2-emisor-inline b { font-size: 14px; }
.cot2-band { background: linear-gradient(135deg, #2bb866, #18a455); color: #fff; text-align: center; font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; padding: 9px; border-radius: 7px; margin: 2px 0 12px; }
.cot2-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.cot2-table .k { width: 44%; background: linear-gradient(135deg, #34c172, #1fa85c); color: #fff; font-weight: 700; font-size: 12.5px; padding: 11px 16px; border-radius: 8px 0 0 8px; }
.cot2-table .v { background: #f1f5f1; color: #16201a; font-weight: 800; font-size: 14.5px; text-align: right; padding: 11px 18px; border-radius: 0 8px 8px 0; font-family: var(--sfv-num); font-variant-numeric: tabular-nums; }
.cot2-table tr.cot2-total .k { background: linear-gradient(135deg, #0e7a43, #0a5f34); font-size: 13.5px; }
.cot2-table tr.cot2-total .v { background: linear-gradient(135deg, #1fa85c, #12894a); color: #fff; font-size: 19px; font-weight: var(--sfv-w-black, 900); }
.cot2-foot { margin-top: 16px; }
.cot2-note { font-size: 10.5px; line-height: 1.5; color: #4a5a50; background: #fbf7ec; border: 1px solid #f0e6cf; border-left: 3px solid #d99a3a; border-radius: 8px; padding: 9px 12px; font-style: italic; }
.cot2-note b { color: #8f6b22; font-style: normal; }
.cot2-signrow { display: flex; gap: 40px; justify-content: space-around; margin: 46px 0 6px; }
.cot2-sign { text-align: center; flex: 1; max-width: 230px; }
.cot2-sign-line { height: 1px; background: #2a342d; margin-top: 58px; margin-bottom: 6px; }
.cot2-sign span { display: block; font-size: 12px; font-weight: 700; color: #16201a; }
.cot2-sign small { font-size: 9.5px; color: var(--sfv-muted); }
.cot2-legal { margin-top: 12px; padding-top: 9px; border-top: 1px solid #eef1ee; text-align: center; font-size: 9.5px; color: var(--sfv-muted); }

/* ---------------- Propuesta de inversión: escenarios, perfil, vigencia ---------------- */
.prop-perfil-badge { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(201,164,87,.16); color: #8f6b22; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.cot2-note-warn { background: #fff4e8; border-color: #f4d9b0; border-left-color: #d9822b; }
.cot2-note-warn b { color: #a35a10; }
.prop-esc-table { width: 100%; border-collapse: collapse; margin: 2px 0 4px; font-size: 11.5px; }
.prop-esc-table th, .prop-esc-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid #eef1ee; }
.prop-esc-table td:first-child { text-align: left; color: #5b6660; font-weight: 600; }
.prop-esc-table thead th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--sfv-muted); font-weight: 800; }
.prop-esc-mid { background: rgba(31,176,88,.08); font-weight: 800; color: #12894a; }
.prop-esc-table thead th.prop-esc-mid { background: rgba(31,176,88,.14); border-radius: 6px 6px 0 0; }
.prop-esc-table tr.prop-esc-total td { font-weight: var(--sfv-w-black, 900); font-size: 13px; color: #16201a; }
.prop-esc-table tr.prop-esc-total .prop-esc-mid { color: #0e7a43; font-size: 15px; }
.prop-chart { margin: 4px 0 12px; }
.prop-vigencia { display: flex; align-items: center; gap: 8px; background: #f6faf6; border: 1px dashed #b9dcc0; border-radius: 8px; padding: 9px 12px; font-size: 11px; color: #2a4a35; margin-bottom: 12px; }
.prop-vigencia i { color: #1fa85c; }
@media print { .prop-chart { break-inside: avoid; } }

/* Controles del diálogo de cotización (no se imprimen) */
.cotiza-sec { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--sfv-forest); text-transform: uppercase; letter-spacing: .04em; margin: 2px 0 10px; }
.cotiza-sec i { color: var(--sfv-mint); }
.cotiza-sec-hint { font-weight: 600; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--sfv-muted); font-style: italic; }
.cotiza-ctrls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.cotiza-ctrls .cc-span2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .cotiza-ctrls { grid-template-columns: 1fr; } .cotiza-ctrls .cc-span2 { grid-column: auto; } }
/* selector "Valor a cotizar": redondeado vs exacto (solo notas) */
.cotiza-redondeo { margin-bottom: 16px; }
.cotiza-rnd-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .cotiza-rnd-opts { grid-template-columns: 1fr; } }
.cotiza-rnd { position: relative; display: block; cursor: pointer; }
.cotiza-rnd input { position: absolute; opacity: 0; width: 0; height: 0; }
.cotiza-rnd-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1.5px solid var(--sfv-line); border-radius: 12px; padding: 11px 14px; background: var(--sfv-white); transition: all .16s var(--sfv-ease); }
.cotiza-rnd-t { font-size: 12.5px; font-weight: 700; color: var(--sfv-graphite); display: flex; align-items: center; gap: 7px; }
.cotiza-rnd-t i { color: var(--sfv-muted); }
.cotiza-rnd-card b { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--sfv-ink); }
.cotiza-rnd:hover .cotiza-rnd-card { border-color: var(--sfv-mint); }
.cotiza-rnd input:checked + .cotiza-rnd-card { border-color: var(--sfv-mint-dark); background: rgba(51, 210, 105, .1); box-shadow: 0 0 0 3px rgba(51, 210, 105, .14); }
.cotiza-rnd input:checked + .cotiza-rnd-card .cotiza-rnd-t, .cotiza-rnd input:checked + .cotiza-rnd-card .cotiza-rnd-t i { color: var(--sfv-mint-dark); }
.cotiza-rnd input:checked + .cotiza-rnd-card b { color: var(--sfv-forest); }

/* ---- Configuración → Calculadoras (editor de valores referenciales) ---- */
.tar-callout { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.45; color: var(--sfv-graphite); background: var(--sfv-sand); border: 1px solid var(--sfv-line); border-left: 3px solid var(--sfv-mint); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; }
.tar-callout > i { color: var(--sfv-mint-dark); font-size: 15px; }
.tar-callout i.fa-floppy-o { color: var(--sfv-mint-dark); }
.tar-card { margin-bottom: 14px; }
.tar-card .sfv-card-body { padding: 16px 18px; }
.tar-note { font-size: 12.5px; color: var(--sfv-muted); margin: 0 0 12px; font-style: italic; }
.tar-note i { color: var(--sfv-mint-dark); }
.tar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 620px) { .tar-grid { grid-template-columns: 1fr; } }

/* segmento de calculadoras + sub-segmento de productos */
.tar-seg { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tar-seg button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--sfv-line); background: var(--sfv-white); color: var(--sfv-graphite); font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; transition: all .15s var(--sfv-ease); }
.tar-seg button:hover { border-color: var(--sfv-mint); color: var(--sfv-mint-dark); }
.tar-seg button.on { background: linear-gradient(135deg, #0e8043, #1fb058); color: #fff; border-color: #0c7a3d; box-shadow: 0 6px 16px -9px rgba(7, 97, 44, .5); }
.tar-subseg { display: inline-flex; gap: 4px; padding: 4px; background: var(--sfv-sand); border: 1px solid var(--sfv-line); border-radius: 12px; margin-bottom: 14px; }
.tar-subseg button { padding: 7px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--sfv-graphite); font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; transition: all .15s var(--sfv-ease); }
.tar-subseg button.on { background: var(--sfv-white); color: var(--sfv-mint-dark); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .18); }

.tar-inline-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tar-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--sfv-graphite); }
.tar-inline .sfv-input { width: 92px; }
.tar-scroll { overflow-x: auto; }
.tar-table { min-width: 480px; margin-top: 2px; }
.tar-table th { font-size: 10px; white-space: nowrap; color: var(--sfv-muted); padding: 4px 6px; }
.tar-table td { padding: 3px 6px; }
.tar-in { width: 100%; min-width: 52px; text-align: center; padding: 5px 6px; font-size: 12.5px; }
.tar-cat { max-width: 58px; margin: 0 auto; text-transform: uppercase; font-weight: 800; }
.tar-acts-td { width: 78px; white-space: nowrap; }
.tar-save, .tar-del { border: 0; background: transparent; cursor: pointer; font-size: 14px; padding: 6px; border-radius: 8px; transition: color .15s var(--sfv-ease), background .15s var(--sfv-ease); }
.tar-save { color: var(--sfv-mint-dark); }
.tar-save:hover { background: rgba(51, 210, 105, .14); }
.tar-del { color: var(--sfv-muted); }
.tar-del:hover { color: var(--sfv-coral-dark, #b23329); background: rgba(232, 103, 76, .12); }
.tar-add { margin-top: 10px; }
/* botón "Guardar" compacto para secciones/comisión de bolsa */
.tar-savebtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--sfv-mint); background: rgba(51, 210, 105, .1); color: var(--sfv-mint-dark); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: all .15s var(--sfv-ease); }
.tar-savebtn:hover { background: var(--sfv-mint); color: #063; }
.tar-view-save { margin-top: 14px; }
.tar-foot { display: flex; justify-content: flex-end; margin-top: 2px; }

body.sfv-dark .cot2-party { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
body.sfv-dark .cot2-party > b, body.sfv-dark .cot2-subtitle, body.sfv-dark .cot2-sign span { color: var(--sfv-ink); }
body.sfv-dark .cot2-emi-logo { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }

/* ---- Documento (Cotización/Propuesta) en pantallas angostas: colapsa lo que se pueda,
   y lo que sigue siendo tabular (montos en columnas) scrollea horizontal SOLO dentro de
   sí mismo — la página nunca scrollea de lado. No afecta la impresión (@media print
   aparte, ese layout es de escritorio/A4 siempre). ---- */
@media (max-width: 640px) {
  .cot2-sheet { padding: 16px 14px; }
  .cot2-top { flex-direction: column; gap: 12px; }
  .cot2-docref { text-align: left; width: 100%; }
  .cot2-reftbl { display: flex; width: 100%; }
  .cot2-reftbl > div { flex: 1; }
  .cot2-parties { grid-template-columns: 1fr; }
  .cot2-table, .prop-esc-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prop-esc-table th, .prop-esc-table td { padding: 7px 5px; }
  .cot2-signrow { flex-direction: column; gap: 22px; }
  .cot2-sign { max-width: none; }
  /* Vista Mes de la Agenda: grid de 7 columnas, más ancho que cualquier celular — sin esto
     .sfv-card (overflow:hidden) recortaba martes a sábado y no había forma de llegar a ellos. */
  .agenda-cal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Impresión / PDF en A4 (refleja el documento tal cual, con sus colores) ---- */
@page { size: A4; margin: 13mm; }
@media print {
  body > *:not(#dlgCotiza):not(#dlgPropuesta) { display: none !important; }
  #dlgCotiza, #dlgPropuesta { position: static; display: block !important; background: #fff; padding: 0; }
  #dlgCotiza .sfv-modal, #dlgPropuesta .sfv-modal { box-shadow: none; max-width: 100%; width: 100%; border-radius: 0; }
  #dlgCotiza .sfv-modal-title, #dlgCotiza .cotiza-actions, #dlgCotiza .sfv-field, #dlgCotiza .cotiza-ctrls, #dlgCotiza .cotiza-sec, #dlgCotiza .cotiza-redondeo,
  #dlgPropuesta .sfv-modal-title, #dlgPropuesta .cotiza-actions, #dlgPropuesta .sfv-field, #dlgPropuesta .cotiza-sec { display: none !important; }
  #dlgCotiza .sfv-modal-body, #dlgPropuesta .sfv-modal-body { padding: 0 !important; max-height: none !important; overflow: visible !important; }
  .cotiza-doc { border: 0; border-radius: 0; box-shadow: none; }
  .cot2-sheet { padding: 4px 2px; }
  /* fuerza la impresión de fondos verdes/colores (si no, salen en blanco) */
  .cotiza-doc, .cot2-band, .cot2-table .k, .cot2-table .v, .cot2-table .cot2-total .k, .cot2-table .cot2-total .v, .cot2-party, .cot2-note, .cot2-top { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .cot2-signrow { margin-top: 58px; }
  .cot2-sign-line { margin-top: 64px; }
}

/* ============================================================================
   ICONOS PRINCIPALES (pico) + cabeceras de sección con icono
   ============================================================================ */
.sfv-pico { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #fff; flex: 0 0 auto; box-shadow: 0 5px 13px rgba(16, 32, 26, .16); position: relative; }
.sfv-pico::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); pointer-events: none; }
.sfv-pico i { position: relative; z-index: 1; }
.sfv-sec-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.sfv-sec-head .sfv-pico { width: 40px; height: 40px; font-size: 18px; }
.sfv-sec-head h4 { font-size: 15.5px; font-weight: 800; color: var(--sfv-ink); margin: 0; }
.sfv-sec-head .sub { font-size: 12px; font-weight: 600; color: var(--sfv-graphite); margin-top: 1px; font-style: italic; }
.sfv-sec-head .right { margin-left: auto; }

/* ---- Mensaje motivador del día (Inicio) ---- */
.dash-verso { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 15px 20px; border-radius: 16px;
  background: linear-gradient(120deg, var(--sfv-forest), var(--sfv-forest-2)); color: #eafff0;
  box-shadow: 0 10px 26px rgba(7, 97, 44, .22); position: relative; overflow: hidden; }
.dash-verso::before { content: ''; position: absolute; right: -30px; top: -30px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(91,229,132,.28), transparent 70%); }
.dash-verso .vico { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #bff0cf; flex: 0 0 auto; }
.dash-verso .vtxt { position: relative; z-index: 1; }
.dash-verso .vtxt b { display: block; font-size: 16px; font-weight: 800; line-height: 1.4; color: #fff; }
.dash-verso .vtxt span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #9fd9b6; }

/* ---- Lista de tareas con sub-icono + importancia ---- */
.dash-task { display: flex; align-items: center; gap: 11px; padding: 10px 8px; border-radius: 11px; cursor: pointer; transition: background .14s var(--sfv-ease); }
.dash-task:hover { background: var(--sfv-sand); }
.dash-task .tk-ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; flex: 0 0 auto; }
.dash-task .tk-main { flex: 1; min-width: 0; }
.dash-task .tk-main b { display: block; font-size: 13px; color: var(--sfv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-task .tk-main span { font-size: 11.5px; color: var(--sfv-muted); }
.dash-task.hecha .tk-main b { text-decoration: line-through; opacity: .55; }
.dash-task .tk-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.dash-task .tk-fecha { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--sfv-graphite); }
.tk-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tk-toolbar .seg { margin-left: auto; display: inline-flex; border: 1px solid var(--sfv-line); border-radius: 9px; overflow: hidden; }
.tk-toolbar .seg button { border: 0; background: var(--sfv-white); color: var(--sfv-graphite); font-size: 11.5px; font-weight: 700; padding: 5px 11px; cursor: pointer; }
.tk-toolbar .seg button.on { background: var(--sfv-forest); color: #fff; }

/* ---- Actividad: icono con badge (persona + check) ---- */
.act-badge { position: relative; display: inline-flex; }
.act-badge .bdg { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; background: #22C55E; color: #fff; font-size: 8px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }

/* ---- Inicio: pipeline + embudo + top operadores en UNA fila ---- */
.dash-row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.dash-row3 > .dash-panel { display: flex; flex-direction: column; }
.dash-row3 .dash-panel-body { flex: 1; }
@media (max-width: 1150px) { .dash-row3 { grid-template-columns: 1fr; } }

/* pills de importancia dentro del modal de tarea */
.imp-pills { display: flex; gap: 8px; }
.imp-pills .ip { flex: 1; text-align: center; border: 1.5px solid var(--sfv-line); border-radius: 10px; padding: 9px; cursor: pointer; font-weight: 800; font-size: 12px; transition: all .15s var(--sfv-ease); }
.imp-pills .ip i { margin-right: 5px; }
.imp-pills .ip:hover { border-color: var(--sfv-mint); }
.imp-pills .ip.on.alta  { background: #F2A8A2; color: #7a241b; border-color: #e88a82; }
.imp-pills .ip.on.media { background: #F6C293; color: #7a4a14; border-color: #eaa869; }
.imp-pills .ip.on.baja  { background: #A8C9EE; color: #1d3f6b; border-color: #84b0e6; }

/* ---------------- ROLES: selector de rol en topbar ---------------- */
.sfv-role-sel { background: rgba(255,255,255,.1); color: #eafff0; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; padding: 7px 10px; font-size: 12px; font-weight: 700; cursor: pointer; outline: none; }
.sfv-role-sel option { color: #16201a; }
body.sidebar-claro .sfv-role-sel { background: rgba(0,0,0,.04); color: var(--sfv-ink); border-color: var(--sfv-line); }

/* ---------------- Reasignación: opchips (operadores) ---------------- */
.opchips { display: flex; gap: 7px; flex-wrap: wrap; }
.opchip { border: 1.5px solid var(--sfv-line); background: var(--sfv-white); color: var(--sfv-ink); padding: 7px 14px; border-radius: 999px; font-size: 12.5px; cursor: pointer; font-weight: 700; transition: all .15s var(--sfv-ease); display: inline-flex; align-items: center; gap: 7px; }
.opchip .av { width: 22px; height: 22px; border-radius: 50%; background: var(--sfv-forest); color: var(--sfv-mint-light); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.opchip:hover { border-color: var(--sfv-mint); background: #f1faf3; transform: translateY(-1px); }
.opchip.on { background: var(--sfv-mint); border-color: var(--sfv-mint-dark); color: #0f3a23; }
.opchip.on .av { background: var(--sfv-forest); }

/* ---------------- Etiquetas del lead ---------------- */
/* Tablas: texto centrado + alineación vertical media → se ven organizadas y parejas.
   Los montos (.num) quedan a la derecha para alinear las cifras. */
.sfv-table thead th, .sfv-table tbody td { text-align: center; vertical-align: middle; }
.sfv-table .num { text-align: right; }
/* Columna Etapa: centrar el badge en TODAS las tablas (web y responsive) */
.sfv-table td:has(> .crm-badge) { text-align: center; }
.sfv-table th.th-etapa { text-align: center; }
.lead-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; justify-content: center; }
.lead-tag { font-size: 9.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; letter-spacing: .02em; }
/* #8 · Temperatura / score del lead */
.lead-temp-wrap { margin-top: 4px; display: flex; justify-content: center; }
.lead-temp { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; color: var(--tc); border: 1px solid var(--tc); border-radius: 999px; padding: 1px 8px; background: var(--sfv-white); }
.kb-card { position: relative; }
.kb-temp { position: absolute; top: 7px; right: 9px; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--tc); padding: 1px 7px 1px 6px; border-radius: 999px; box-shadow: 0 2px 6px rgba(8,30,18,.2); z-index: 1; }
/* #13 · Tarjeta de meta del mes (Inicio) */
.meta-card { padding: 16px 20px !important; margin-bottom: 14px; }
.meta-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.meta-title { flex: 1; min-width: 0; }
.meta-title h4 { margin: 0; font-size: 15px; color: var(--sfv-ink); }
.meta-title .sub { font-size: 12px; color: var(--sfv-muted); margin-top: 1px; font-style: italic; }
.meta-comision { text-align: right; white-space: nowrap; }
.meta-comision span { display: block; font-size: 10px; color: var(--sfv-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.meta-comision b { font-size: 17px; color: var(--sfv-mint-dark); font-family: var(--sfv-num); font-variant-numeric: tabular-nums; }
.meta-bar { height: 12px; border-radius: 999px; background: rgba(15,74,51,.09); overflow: hidden; }
.meta-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1fb058, #0e8043); transition: width .7s cubic-bezier(.22,.61,.36,1); min-width: 4px; }
.meta-fill.full { background: linear-gradient(90deg, #F59E0B, #d97706); }
.meta-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--sfv-muted); }
.meta-foot b { color: var(--sfv-ink); }
.meta-mini { display: flex; align-items: center; gap: 7px; }
.meta-mini-bar { width: 70px; height: 7px; border-radius: 999px; background: rgba(15,74,51,.1); overflow: hidden; }
.meta-mini-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1fb058, #0e8043); }
.meta-mini b { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-size: 12px; }
body.sfv-dark .meta-bar, body.sfv-dark .meta-mini-bar { background: rgba(255,255,255,.09); }
/* #4 · Barra de distribución en "Desglose por etapa" (Resumen de métricas) */
.rm-bar { height: 8px; border-radius: 999px; background: rgba(15,74,51,.09); overflow: hidden; min-width: 90px; }
.rm-bar span { display: block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.22,.61,.36,1); }
body.sfv-dark .rm-bar { background: rgba(255,255,255,.09); }
/* #9 · Importación CSV */
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 34px 18px; border: 2px dashed var(--sfv-line); border-radius: 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.imp-drop:hover { border-color: var(--sfv-mint); background: rgba(51,210,105,.05); }
.imp-drop i { font-size: 34px; color: var(--sfv-mint-dark); }
.imp-drop b { font-size: 15px; color: var(--sfv-ink); }
.imp-drop span { font-size: 12px; color: var(--sfv-muted); max-width: 460px; }
.imp-tip { font-size: 12px; color: var(--sfv-muted); margin-top: 14px; text-align: center; }
.imp-tip a { color: var(--sfv-mint-dark); font-weight: 700; }
.imp-sum { font-size: 13.5px; color: var(--sfv-ink); margin-bottom: 12px; padding: 10px 13px; background: var(--sfv-sand); border-radius: 10px; }
.imp-cols { display: grid; grid-template-columns: 244px 1fr; gap: 16px; align-items: start; }
@media (max-width: 680px) { .imp-cols { grid-template-columns: 1fr; } }
.imp-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sfv-muted); margin-bottom: 8px; }
.imp-map { display: flex; flex-direction: column; gap: 7px; }
.imp-map-row label { font-size: 11.5px; font-weight: 700; color: var(--sfv-graphite); display: block; margin-bottom: 2px; }
.imp-map-row .sfv-select { padding: 6px 9px; font-size: 12.5px; }
.imp-prev th, .imp-prev td { font-size: 12px; padding: 7px 8px; }
.imp-prev tr.imp-dup td { background: rgba(245,158,11,.08); }
.imp-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.imp-badge.ok { background: #e7f9ee; color: #15873f; }
.imp-badge.dup { background: #fef3e0; color: #9a6512; }
.imp-badge.bad { background: #fdeceb; color: #c0362f; }
.imp-chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sfv-ink); margin-top: 14px; cursor: pointer; }
body.sfv-dark .imp-sum { background: rgba(255,255,255,.05); }
.etq-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.etq-chip { border: 1.5px solid var(--sfv-line); background: var(--sfv-white); padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .14s var(--sfv-ease); display: inline-flex; align-items: center; gap: 6px; }
.etq-chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.etq-chip:hover { border-color: var(--sfv-mint); }
.etq-chip.on { border-width: 2px; }
.asignado-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sfv-line); background: var(--sfv-white); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--sfv-ink); }
.asignado-btn:hover { border-color: var(--sfv-mint); color: var(--sfv-mint-dark); }
.asignado-btn.sin { color: var(--sfv-coral-dark, #b23329); border-color: #f1cbc6; background: #fdeceb; }

/* ============================================================================
   FASE 1 — USUARIOS, ROLES Y PERMISOS (Configuración) + selector de usuario
   ============================================================================ */
.sfv-role-sel { max-width: 230px; }
.rol-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.monto-oculto { color: var(--sfv-muted); font-weight: 700; letter-spacing: .04em; font-size: 12px; }
.monto-oculto .fa { font-size: 10px; opacity: .8; }

.cfg-roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cfg-role-card { background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 13px; padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sfv-shadow-card); }
.cfg-role-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cfg-role-meta { font-size: 11.5px; color: var(--sfv-muted); line-height: 1.5; }
.cfg-role-acts { display: flex; gap: 7px; margin-top: auto; flex-wrap: wrap; align-items: center; }

.sfv-btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 9px; }

.cfg-perm-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sfv-graphite); display: block; margin: 14px 0 9px; }
.cfg-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cfg-chk { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--sfv-line); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; font-weight: 700; color: var(--sfv-graphite); cursor: pointer; transition: all .14s var(--sfv-ease); }
.cfg-chk:hover { border-color: var(--sfv-mint); }
.cfg-chk input { accent-color: var(--sfv-mint-dark); width: 15px; height: 15px; cursor: pointer; flex: 0 0 auto; }
.cfg-chk.on { border-color: var(--sfv-mint-dark); background: #f5faf6; color: var(--sfv-mint-dark); }
.cfg-chk i { width: 16px; text-align: center; flex: 0 0 auto; }
.cfg-chk input:disabled { opacity: .6; cursor: not-allowed; }

/* ============================================================================
   FASE 2 — FICHA DE LEAD: divisores de sección + bitácora de seguimiento
   ============================================================================ */
.sfv-form-sec { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sfv-ink); margin: 14px 0 4px; padding-top: 14px; border-top: 1px solid var(--sfv-line); }
.sfv-form-sec .fa { color: #fff; background: linear-gradient(135deg, #1fb058, #0e8043); width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; box-shadow: 0 3px 8px rgba(31,176,88,.28); }
.sfv-form-sec-hint { margin-left: auto; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--sfv-muted); font-size: 11px; font-style: italic; }

.lead-bitacora { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; padding: 4px 2px; }
.bit-empty { font-size: 12.5px; color: var(--sfv-muted); font-style: italic; padding: 10px 2px; }
.bit-item { display: flex; gap: 10px; align-items: flex-start; background: var(--sfv-sand); border: 1px solid var(--sfv-line); border-radius: 11px; padding: 9px 11px; }
.bit-ico { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; box-shadow: 0 3px 8px rgba(16,32,26,.14); }
.bit-main { flex: 1; min-width: 0; }
.bit-meta { font-size: 11px; color: var(--sfv-muted); font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-style: italic; }
.bit-meta b { color: var(--sfv-graphite); font-family: inherit; }
.bit-txt { font-size: 13px; color: var(--sfv-ink); margin-top: 2px; line-height: 1.45; }
.bit-add { display: flex; gap: 8px; }
.bit-add input { flex: 1; }
/* Compositor de nueva entrada de bitácora (campo amplio y visible) */
.bit-compose { border: 1.5px solid var(--sfv-line); border-radius: 14px; padding: 12px; background: var(--sfv-white); transition: border-color .18s, box-shadow .18s; }
.bit-compose:focus-within { border-color: rgba(31,176,88,.55); box-shadow: 0 0 0 4px rgba(31,176,88,.1); }
.bit-compose-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bit-tipo-lbl { font-size: 12px; font-weight: 800; color: var(--sfv-muted); white-space: nowrap; }
.bit-compose-row .sfv-select { max-width: 240px; flex: 1; }
.bit-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--sfv-line); border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 14px; color: var(--sfv-ink); background: var(--sfv-sand); resize: vertical; min-height: 76px; line-height: 1.55; transition: border-color .15s, background .15s; }
.bit-textarea::placeholder { color: var(--sfv-muted); }
.bit-textarea:focus { outline: 0; border-color: rgba(31,176,88,.5); background: var(--sfv-white); }
.bit-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
.bit-hint { font-size: 11px; color: var(--sfv-muted); display: inline-flex; align-items: center; gap: 6px; font-style: italic; }
@media (max-width: 560px) { .bit-compose-foot { flex-direction: column-reverse; align-items: stretch; } .bit-compose-foot .sfv-btn { width: 100%; justify-content: center; } }
.cl-bit-add { margin-bottom: 12px; flex-wrap: wrap; }
.cl-bit-add .sfv-select { flex: 0 0 auto; max-width: 180px; }
.cl-bit-add input { min-width: 180px; }
.cl-bit-list { display: flex; flex-direction: column; gap: 8px; }

/* ---------------- Selección / asignación múltiple (Leads de Equipo) ---------------- */
.adm-table th, .adm-table td { vertical-align: middle; }
.adm-chk-th, .adm-chk-td { width: 38px; text-align: center; padding-left: 8px !important; padding-right: 4px !important; }
.adm-chk { position: relative; display: inline-flex; cursor: pointer; vertical-align: middle; }
.adm-chk input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.adm-chk > span { width: 18px; height: 18px; border-radius: 6px; border: 1.8px solid var(--sfv-line); background: var(--sfv-surface, #fff); display: inline-block; position: relative; transition: background .15s, border-color .15s; }
.adm-chk input:checked + span { background: linear-gradient(135deg, #0e8043, #1fb058); border-color: #0e8043; }
.adm-chk input:checked + span::after { content: '\f00c'; font-family: FontAwesome; color: #fff; font-size: 10px; position: absolute; left: 3px; top: 0; }
.adm-chk input:indeterminate + span { background: #1fb058; border-color: #0e8043; }
.adm-chk input:indeterminate + span::after { content: '\f068'; font-family: FontAwesome; color: #fff; font-size: 8px; position: absolute; left: 3px; top: 2px; }
.adm-table tbody tr.sel td { background: rgba(31,176,88,.085); }
body.sfv-dark .adm-chk > span { background: rgba(255,255,255,.06); }
body.sfv-dark .adm-table tbody tr.sel td { background: rgba(51,210,105,.12); }

.adm-bulk-bar { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 160%); z-index: 120; display: flex; align-items: center; gap: 18px; padding: 11px 14px 11px 18px; border-radius: 16px; background: var(--sfv-graphite, #16201a); color: #fff; box-shadow: 0 16px 44px rgba(8,20,14,.42); transition: transform .34s cubic-bezier(.22,.61,.36,1); max-width: calc(100vw - 32px); }
.adm-bulk-bar.show { transform: translate(-50%, 0); }
.abb-left { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.abb-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg,#0e8043,#1fb058); padding: 3px 10px; border-radius: 999px; font-weight: 800; margin-right: 4px; }
.abb-actions { display: flex; gap: 8px; }
.adm-bulk-bar .sfv-btn { padding: 8px 14px; }
.adm-bulk-bar .sfv-btn.secondary { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 640px) {
  .adm-bulk-bar { left: 16px; right: 16px; bottom: 12px; transform: translateY(160%); flex-direction: column; align-items: stretch; gap: 10px; max-width: none; padding: 12px; }
  .adm-bulk-bar.show { transform: translateY(0); }
  .abb-left { text-align: center; white-space: normal; }
  .abb-actions { flex-wrap: wrap; justify-content: center; }
}

.bulk-tabs { display: flex; gap: 8px; background: var(--sfv-surface-2, rgba(0,0,0,.04)); padding: 5px; border-radius: 12px; margin-bottom: 16px; }
.bulk-tab { flex: 1; border: 0; background: transparent; color: var(--sfv-muted); font-weight: 700; font-size: 13px; padding: 9px; border-radius: 9px; cursor: pointer; font-family: inherit; transition: background .16s, color .16s; }
.bulk-tab.on { background: linear-gradient(135deg,#0e8043,#1fb058); color: #fff; box-shadow: 0 4px 12px rgba(31,176,88,.3); }
.bulk-count { font-size: 14px; color: var(--sfv-ink); font-weight: 700; }
.bulk-count .bc-n { color: var(--sfv-mint-dark,#1fae53); font-size: 22px; font-weight: 800; margin-right: 3px; }
.bulk-hint { font-size: 12.5px; color: var(--sfv-muted); margin: 4px 0 12px; font-style: italic; }
.bulk-ops { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bulk-op { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1.5px solid var(--sfv-line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; background: var(--sfv-surface,#fff); width: 100%; text-align: left; font-family: inherit; }
.bulk-op.on { border-color: rgba(31,176,88,.5); background: rgba(31,176,88,.07); }
.bulk-op input { width: 17px; height: 17px; accent-color: #1fb058; flex: 0 0 auto; }
.bulk-op .av { width: 30px; height: 30px; border-radius: 50%; background: var(--sfv-forest,#0e3a25); color: var(--sfv-mint-light,#bdf2cf); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; }
.bulk-op .nm { flex: 1; font-weight: 700; color: var(--sfv-ink); font-size: 13.5px; }
.bulk-op .nm i { font-weight: 600; color: var(--sfv-muted); font-style: normal; font-size: 11px; }
.bulk-op .cnt { min-width: 36px; height: 28px; padding: 0 9px; border-radius: 8px; background: linear-gradient(135deg,#0e8043,#1fb058); color: #fff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.bulk-rand { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--sfv-ink); cursor: pointer; margin-bottom: 12px; }
.bulk-rand input { margin-top: 2px; accent-color: #1fb058; flex: 0 0 auto; }
.bulk-rand i { font-style: normal; color: var(--sfv-muted); }
.bulk-summary { font-size: 13px; color: var(--sfv-ink); background: rgba(31,176,88,.08); border: 1px dashed rgba(31,176,88,.35); border-radius: 10px; padding: 10px 13px; text-align: center; }

/* ---------------- Plantillas de mensaje (dlgPlantilla) ---------------- */
.pl-free label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--sfv-muted); margin-bottom: 6px; }
.pl-free textarea { width: 100%; resize: vertical; font-family: inherit; }
.pl-free-acts { display: flex; gap: 8px; margin-top: 10px; }
.pl-free-acts .sfv-btn { flex: 1; }
.pl-sep { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; font-size: 12px; color: var(--sfv-muted); text-align: center; }
.pl-sep::before, .pl-sep::after { content: ""; flex: 1; height: 1px; background: var(--sfv-line); }
.pl-list { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.pl-tpl { border: 1.5px solid var(--sfv-line); border-radius: 12px; padding: 11px 13px; background: var(--sfv-surface,#fff); }
.pl-tpl-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sfv-ink); margin-bottom: 4px; }
.pl-tpl-h i { color: var(--sfv-mint-dark,#1fae53); width: 16px; text-align: center; }
.pl-tpl-txt { font-size: 12.5px; color: var(--sfv-graphite); line-height: 1.5; margin-bottom: 9px; }
.pl-tpl-acts { display: flex; gap: 8px; }
.pl-tpl-acts .sfv-btn { flex: 1; padding: 7px 10px; font-size: 12.5px; }

/* ---------------- KYC / consentimiento LOPDP (dlgKyc) ---------------- */
.kyc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--sfv-line); flex-wrap: wrap; }
.kyc-pct-wrap { display: flex; align-items: center; gap: 9px; min-width: 160px; }
.kyc-pct-track { width: 96px; height: 8px; border-radius: 999px; background: var(--sfv-line-soft, rgba(0,0,0,.06)); overflow: hidden; }
.kyc-pct-fill { height: 100%; border-radius: 999px; transition: width .3s var(--sfv-ease, ease); }
.kyc-pct-lbl { font-size: 12px; font-weight: 800; color: var(--sfv-ink); white-space: nowrap; }
.kyc-pendiente { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--sfv-muted); background: var(--sfv-surface-2, rgba(0,0,0,.03)); border: 1px dashed var(--sfv-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; line-height: 1.4; font-style: italic; }
.kyc-pendiente i { color: var(--sfv-mint-dark,#1fae53); font-size: 15px; flex: 0 0 auto; }

/* ---------------- Catálogos: 3 columnas + sección Estados (etapas/subetapas) ---------------- */
.cat-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 18px; align-items: start; }
@media (max-width: 1100px) { .cat-3col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .cat-3col { grid-template-columns: 1fr; } }
.cat-estado { padding: 11px 0; border-bottom: 1px solid var(--sfv-line); }
.cat-estado:first-child { padding-top: 2px; }
.cat-estado:last-child { border-bottom: 0; padding-bottom: 2px; }
.cat-estado-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cat-estado-n { font-size: 11px; font-weight: 800; color: var(--sfv-muted); background: var(--sfv-sand); border-radius: 999px; padding: 2px 9px; min-width: 22px; text-align: center; }
.cat-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.cat-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; border: 1px solid; border-radius: 999px; padding: 3px 4px 3px 11px; }
.cat-sub button { border: 0; background: transparent; color: inherit; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; opacity: .7; transition: background .14s, opacity .14s; }
.cat-sub button:hover { background: rgba(0,0,0,.08); opacity: 1; }
.cat-sub-add { display: flex; gap: 6px; }
.cat-sub-add input { flex: 1; }

/* Subetapa: chip en la tarjeta del kanban + texto bajo el badge en tablas */
.kb-subetapa { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--c); border: 1px solid var(--c); border-radius: 7px; padding: 2px 8px; margin: 5px 0 0; background: var(--sfv-white); }
.kb-subetapa i { font-size: 8px; opacity: .85; }
.sub-etapa { font-size: 10px; font-weight: 700; color: var(--sfv-muted); margin-top: 3px; line-height: 1.2; }

/* ============================================================================
   FASE 3 — PERSONALIZACIÓN DE COLORES (editor + medidor de contraste WCAG)
   ============================================================================ */
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
@media (max-width: 560px) { .color-grid { grid-template-columns: 1fr; } }
.color-ctrl label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sfv-graphite); margin-bottom: 6px; }
.color-row { display: flex; gap: 8px; align-items: center; }
.color-row input[type="color"] { width: 46px; height: 40px; padding: 3px; border: 1.5px solid var(--sfv-line); border-radius: 10px; background: var(--sfv-white); cursor: pointer; flex: 0 0 auto; }
.color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.color-row .sfv-input { flex: 1; font-family: var(--sfv-mono); text-transform: uppercase; font-size: 13px; }
.color-contrast { margin-top: 14px; background: var(--sfv-sand); border: 1px solid var(--sfv-line); border-radius: 12px; padding: 11px 13px; }
.cc-title { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sfv-muted); margin-bottom: 7px; }
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--sfv-graphite); padding: 3px 0; }
.cc-row b { font-family: var(--sfv-mono); font-size: 11.5px; padding: 2px 9px; border-radius: 999px; }
.cc-row b.ok { background: #e7f9ee; color: #15873f; }
.cc-row b.warn { background: #fef3e0; color: #9a6512; }
.cc-row b.bad { background: #fdeceb; color: #c0362f; }

/* ============================================================================
   FASE 4 — PERSONALIZADOR DE AVATARES (DiceBear)
   ============================================================================ */
.avatar-picker { margin-top: 14px; border-top: 1px solid var(--sfv-line); padding-top: 14px; }
.avatar-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sfv-mint-dark); margin-bottom: 10px; }
.avatar-pick-head .fa { margin-right: 5px; }
.avatar-style-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 560px) { .avatar-style-grid { grid-template-columns: repeat(4, 1fr); } }
.avatar-style { border: 1.5px solid var(--sfv-line); background: var(--sfv-white); border-radius: 12px; padding: 6px 4px 5px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: all .14s var(--sfv-ease); }
.avatar-style img { width: 100%; max-width: 50px; aspect-ratio: 1; border-radius: 9px; background: #f4f6f4; }
.avatar-style span { font-size: 10px; font-weight: 700; color: var(--sfv-graphite); }
.avatar-style:hover { border-color: var(--sfv-mint); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(7,97,44,.12); }
.avatar-style.on { border-color: var(--sfv-mint-dark); border-width: 2px; background: #f5faf6; }
.avatar-style.on span { color: var(--sfv-mint-dark); }
.avatar-bg-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.avatar-bg-lbl { font-size: 11px; font-weight: 700; color: var(--sfv-muted); margin-right: 2px; }
.avatar-bg { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--sfv-line); cursor: pointer; padding: 0; transition: transform .12s var(--sfv-ease); }
.avatar-bg:hover { transform: scale(1.12); }
.avatar-bg.on { border-color: var(--sfv-mint-dark); box-shadow: 0 0 0 2px rgba(47,190,94,.3); }

/* ============================================================================
   FASE 6 — ESPACIO DEL ASISTENTE / MASCOTA (dock escritorio + FAB móvil)
   ============================================================================ */
.sfv-mascota { position: fixed; right: 22px; bottom: 22px; z-index: 1400; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
/* El contenedor NO captura clics (era una zona muerta que tapaba botones); solo el FAB y el panel abierto */
.aur-fab { pointer-events: auto; }
.sfv-mascota.open .sfv-aurelion-pop { pointer-events: auto; }
.sfv-mascota-fab { position: relative; display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer; height: 56px; padding: 0 20px 0 18px; border-radius: 999px; background: linear-gradient(135deg, var(--sfv-mint), var(--sfv-mint-dark)); color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; box-shadow: 0 12px 30px -8px rgba(7,97,44,.55); transition: transform .18s var(--sfv-ease), box-shadow .18s var(--sfv-ease); animation: sfvMascotaPulse 2.8s var(--sfv-ease) infinite; }
.sfv-mascota-fab i { font-size: 19px; }
.sfv-mascota-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 40px -8px rgba(7,97,44,.6); }
@keyframes sfvMascotaPulse { 0%,100% { box-shadow: 0 12px 30px -8px rgba(7,97,44,.55); } 50% { box-shadow: 0 12px 30px -8px rgba(7,97,44,.55), 0 0 0 9px rgba(51,210,105,.12); } }
.sfv-mascota-pop { width: 300px; max-width: calc(100vw - 44px); background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 18px; box-shadow: var(--sfv-shadow-overlay); padding: 22px 18px 18px; text-align: center; position: relative; transform: translateY(12px) scale(.96); opacity: 0; pointer-events: none; transform-origin: bottom right; transition: transform .22s var(--sfv-ease), opacity .22s var(--sfv-ease); }
.sfv-mascota.open .sfv-mascota-pop { transform: none; opacity: 1; pointer-events: auto; }
.sfv-mascota-pop .pop-close { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: var(--sfv-sand); color: var(--sfv-graphite); cursor: pointer; }
.sfv-mascota-pop .pop-close:hover { background: var(--sfv-coral); color: #fff; }
.sfv-mascota-pop .pop-avatar { width: 84px; height: 84px; margin: 2px auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--sfv-mint-dark); background: radial-gradient(circle at 50% 38%, var(--sfv-mint-light), #fff); border: 2px dashed var(--sfv-mint); }
.sfv-mascota-pop b { font-size: 16px; color: var(--sfv-ink); display: block; }
.sfv-mascota-pop p { font-size: 12.5px; color: var(--sfv-graphite); line-height: 1.5; margin: 6px 0 12px; }
.sfv-mascota-pop .pop-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--sfv-gold-dark); background: rgba(201,164,87,.16); padding: 5px 12px; border-radius: 999px; }
body.sfv-customizing #sfvMascota { display: none; }   /* no estorbar al reordenar módulos */
@media (max-width: 640px) {
  .sfv-mascota { right: 16px; bottom: 16px; }
  .sfv-mascota-fab { height: 54px; width: 54px; padding: 0; justify-content: center; border-radius: 50%; }
  .sfv-mascota-fab .lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sfv-mascota-fab { animation: none; } }
@media print { #sfvMascota { display: none !important; } }

/* ===== Aurelion · asistente (dragón) ===== */
.aur-fab { display: inline-flex; align-items: center; gap: 11px; border: 0; background: transparent; cursor: pointer; padding: 0; font-family: inherit; }
.aur-fab-lbl { background: var(--sfv-white); color: var(--sfv-mint-dark); font-weight: 800; font-size: 13px; padding: 9px 15px; border-radius: 999px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.3); border: 1px solid var(--sfv-line); white-space: nowrap; pointer-events: none; }
.aur-fab-face { position: relative; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, var(--sfv-white), var(--sfv-mint-light)); border: 3px solid var(--sfv-mint); box-shadow: 0 12px 30px -8px rgba(7,97,44,.55); display: block; animation: sfvMascotaPulse 2.8s var(--sfv-ease) infinite; transition: transform .18s var(--sfv-ease); }
.aur-fab-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.aur-fab:hover .aur-fab-face { transform: translateY(-2px) scale(1.04); }
.aur-fab-dot { position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--sfv-gold, #C9A457); border: 2px solid #fff; }

.sfv-aurelion-pop { position: relative; width: 380px; max-width: calc(100vw - 28px); height: 600px; max-height: calc(100vh - 84px); overflow: visible; transform: translateY(14px) scale(.97); opacity: 0; pointer-events: none; transform-origin: bottom right; transition: transform .22s var(--sfv-ease), opacity .22s var(--sfv-ease); }
.sfv-mascota.open .sfv-aurelion-pop { transform: none; opacity: 1; pointer-events: auto; }
.aur-win { height: 100%; display: flex; flex-direction: column; background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 20px; overflow: hidden; box-shadow: var(--sfv-shadow-overlay); }
.aur-head { position: relative; flex: 0 0 auto; height: 100px; background: linear-gradient(135deg, var(--sfv-forest-2, #0e5240), var(--sfv-forest, #0b3a2e)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12px; }
.aur-id { text-align: center; }
.aur-id b { font-size: 16px; display: block; line-height: 1.2; }
.aur-id span { font-size: 12px; opacity: .85; }
.aur-stage { position: absolute; top: -40px; left: 50%; margin-left: -45px; width: 90px; height: 90px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255,255,255,.7); background: radial-gradient(circle at 50% 30%, #f4efe7, #e6dcc9); box-shadow: 0 12px 26px -8px rgba(0,0,0,.55); z-index: 5; }
.aur-stage .aur-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; opacity: 0; transition: opacity .55s ease; }
.aur-stage .aur-v.aur-v-on { opacity: 1; }
.sfv-mascota.open .aur-stage { animation: aurDock .5s var(--sfv-ease) both; }
@keyframes aurDock { 0% { transform: translate(74px, 250px) scale(.38); opacity: 0; } 55% { opacity: 1; } 100% { transform: translate(0, 0) scale(1); opacity: 1; } }
.aur-fab { transition: opacity .3s var(--sfv-ease), transform .38s var(--sfv-ease); }
.sfv-mascota.open .aur-fab { opacity: 0; transform: scale(.4); pointer-events: none; }
.aur-fab-face img, .aur-fab-face video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.aur-close { position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; }
.aur-close:hover { background: rgba(255,255,255,.34); }
.aur-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--sfv-sand, #f7f5ef); }
.aur-msg { display: flex; gap: 8px; align-items: flex-end; }
.aur-msg.me { justify-content: flex-end; }
.aur-msg-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 1px solid var(--sfv-line); background: var(--sfv-white); flex: 0 0 auto; }
.aur-bubble { font-size: 13px; line-height: 1.5; padding: 9px 12px; border-radius: 14px; max-width: 252px; }
.aur-msg.bot .aur-bubble { background: var(--sfv-white); color: var(--sfv-ink); border: 1px solid var(--sfv-line); border-bottom-left-radius: 5px; }
.aur-msg.me .aur-bubble { background: linear-gradient(135deg, var(--sfv-mint), var(--sfv-mint-dark)); color: #fff; border-bottom-right-radius: 5px; }
.aur-bubble b { font-weight: 800; }
.aur-bubble a, .aur-link { color: var(--sfv-mint-dark); font-weight: 700; }
.aur-act { margin-top: 9px; }
.aur-go { border: 0; background: var(--sfv-mint-dark); color: #fff; font-weight: 700; font-size: 12px; padding: 7px 12px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.aur-go:hover { filter: brightness(1.07); }
.aur-typing { display: inline-flex; gap: 4px; align-items: center; }
.aur-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--sfv-mint); animation: aurBlink 1.2s infinite; }
.aur-typing span:nth-child(2) { animation-delay: .2s; }
.aur-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aurBlink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.aur-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 10px; background: var(--sfv-sand, #f7f5ef); flex: 0 0 auto; }
.aur-chip { border: 1px solid var(--sfv-mint); background: var(--sfv-white); color: var(--sfv-mint-dark); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.aur-chip:hover { background: var(--sfv-mint); color: #fff; }
.aur-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--sfv-line); background: var(--sfv-white); flex: 0 0 auto; }
.aur-input input { flex: 1; border: 1px solid var(--sfv-line); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-family: inherit; outline: none; }
.aur-input input:focus { border-color: var(--sfv-mint); }
.aur-input button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--sfv-mint), var(--sfv-mint-dark)); color: #fff; cursor: pointer; flex: 0 0 auto; }
@media (max-width: 640px) {
  .aur-fab-lbl { display: none; }
  /* alto reducido: el círculo de Aurelion (asoma ~40px) queda DEBAJO de la barra superior (60px) */
  .sfv-aurelion-pop { width: calc(100vw - 20px); height: calc(100vh - 132px); max-height: calc(100vh - 132px); }
  .aur-stage { width: 78px; height: 78px; top: -34px; margin-left: -39px; }
}
@media (prefers-reduced-motion: reduce) { .aur-fab-face, .aur-stage { animation: none !important; } }

/* ============================================================================
   AVATARES v2 — categorías + sets (emoji / camiseta) + render en barra y perfil
   ============================================================================ */
.av-cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.av-cat { border: 1px solid var(--sfv-line); background: var(--sfv-white); color: var(--sfv-graphite); border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .14s var(--sfv-ease); }
.av-cat:hover { border-color: var(--sfv-mint); color: var(--sfv-mint-dark); }
.av-cat.on { background: var(--sfv-forest); color: #fff; border-color: var(--sfv-forest); }
.avatar-style.emoji, .avatar-style.jersey { padding: 5px 4px; }
.avatar-style .ava-prev { width: 100%; aspect-ratio: 1; border-radius: 12px; display: flex; align-items: center; justify-content: center; line-height: 1; overflow: hidden; margin: 0; }
.avatar-style.jersey .ava-prev { background: #eef2f5; }
.avatar-style small { display: block; font-size: 9.5px; font-weight: 700; color: var(--sfv-graphite); margin-top: 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-style-grid.jersey, .avatar-style-grid.emoji { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 560px) { .avatar-style-grid.jersey, .avatar-style-grid.emoji { grid-template-columns: repeat(4, 1fr); } }
/* render del avatar emoji / camiseta en cualquier .av o .cfg-foto */
.av-emoji, .av-jersey { display: inline-flex !important; align-items: center; justify-content: center; overflow: hidden; line-height: 1; }
.cfg-foto.av-emoji { font-size: 54px; }
.sfv-user .av-emoji:hover, .sfv-user .av-jersey:hover { transform: translateY(-1px) scale(1.05); transition: transform .2s var(--sfv-ease); }
/* idle sutil "animado" para los avatares fun en la vista de perfil */
.cfg-foto.av-emoji, .cfg-foto.av-jersey { animation: sfvAvBob 3.4s var(--sfv-ease) infinite; }
@keyframes sfvAvBob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .cfg-foto.av-emoji, .cfg-foto.av-jersey { animation: none; } }

/* ============================================================================
   CONFIGURACIÓN — pestañas / submenús
   ============================================================================ */
.cfg-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; border-bottom: 1px solid var(--sfv-line); padding-bottom: 14px; }
/* Pestañas SIEMPRE visibles (chip permanente), no solo al hover/activo */
.cfg-tab { border: 1px solid var(--sfv-line); background: var(--sfv-white); color: var(--sfv-graphite); font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; padding: 10px 16px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; position: relative; box-shadow: 0 2px 8px -5px rgba(8,40,26,.4); transition: color .15s var(--sfv-ease), background .15s var(--sfv-ease), border-color .15s, box-shadow .15s; }
.cfg-tab:hover { color: var(--sfv-mint-dark); background: var(--sfv-sand); border-color: rgba(51,210,105,.45); }
.cfg-tab.on { color: #fff; background: linear-gradient(135deg, #1fb058, #0e8043); border-color: transparent; box-shadow: 0 5px 14px rgba(31,176,88,.32); }
.cfg-tab.on i { color: #fff; }
.cfg-tab i { font-size: 15px; }
body.sfv-dark .cfg-tab { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--sfv-on-forest); }
body.sfv-dark .cfg-tab:hover { background: rgba(51,210,105,.16); border-color: rgba(51,210,105,.4); color: #cdeede; }
body.sfv-dark .cfg-tab.on { background: linear-gradient(135deg, #1fb058, #0e7a43); color: #fff; border-color: transparent; }
.cfg-panel[hidden] { display: none; }
@media (max-width: 620px) { .cfg-tab { flex: 1; justify-content: center; padding: 10px 8px; font-size: 12px; } .cfg-tab i { display: none; } }

/* ============================================================================
   DASHBOARD SIMPLIFICADO (Digitador / roles de carga de datos)
   ============================================================================ */
body.dash-lite #dashGrid > .dash-mod { display: none; }
body.dash-lite .dash-week { display: none; }
#dashLite { grid-column: span 12; display: flex; flex-direction: column; gap: 16px; }
.dash-lite-hero { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, var(--sfv-forest), var(--sfv-forest-2)); color: #eafff0; border-radius: 18px; padding: 20px 22px; flex-wrap: wrap; box-shadow: 0 10px 26px rgba(7,97,44,.22); }
.dash-lite-hero .dlh-txt { flex: 1; min-width: 180px; }
.dash-lite-hero h3 { font-size: 19px; font-weight: 800; color: #fff; margin: 0; }
.dash-lite-hero p { font-size: 13px; color: #bfe6cd; margin: 3px 0 0; }
.sfv-btn.lg { font-size: 15px; padding: 13px 22px; }
.dash-lite-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .dash-lite-stats { grid-template-columns: 1fr; } }
.dls-card { display: flex; align-items: center; gap: 13px; background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--sfv-shadow-card); }
.dls-n { font-size: 26px; font-weight: 800; font-family: var(--sfv-num); font-variant-numeric: tabular-nums; color: var(--sfv-ink); line-height: 1; }
.dls-l { font-size: 12.5px; color: var(--sfv-graphite); margin-top: 4px; }
.dls-ver { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--sfv-mint-dark); text-decoration: none; }
.dls-ver:hover { text-decoration: underline; }

/* ============================================================================
   ALIADOS COMERCIALES (comisionistas / referidores)
   ============================================================================ */
.aliado-2col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: stretch; margin-bottom: 18px; }
@media (max-width: 900px) { .aliado-2col { grid-template-columns: 1fr; } }
.aliado-2col > .sfv-card { margin: 0; }
/* separación consistente entre tarjetas apiladas del detalle */
#aliadosView > .sfv-card { margin-bottom: 16px; }
#aliadosView > .sfv-card:last-child { margin-bottom: 0; }
/* Vincular clientes (modal) */
.vinc-lista { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 2px; }
.vinc-row { display: flex; align-items: center; gap: 11px; border: 1px solid var(--sfv-line); border-radius: 11px; padding: 9px 12px; cursor: pointer; transition: border-color .14s var(--sfv-ease), background .14s var(--sfv-ease); }
.vinc-row:hover { border-color: var(--sfv-mint); background: var(--sfv-sand); }
.vinc-row input { accent-color: var(--sfv-mint-dark); width: 16px; height: 16px; flex: 0 0 auto; }
.vinc-main { flex: 1; min-width: 0; }
.vinc-main b { font-size: 13px; color: var(--sfv-ink); display: block; }
.vinc-main span { font-size: 11.5px; color: var(--sfv-muted); }
.aliado-data { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 12px; }
.aliado-data > div { display: flex; flex-direction: column; min-width: 0; }
.aliado-data span { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--sfv-muted); }
.aliado-data b { font-size: 13.5px; color: var(--sfv-ink); word-break: break-word; }
.aliado-com-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 10px; }
.acs { background: var(--sfv-sand); border: 1px solid var(--sfv-line); border-radius: 12px; padding: 11px 10px; text-align: center; }
.acs-l { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--sfv-muted); }
.acs-v { display: block; font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 800; color: var(--sfv-ink); margin-top: 3px; }
.al-com-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.al-com-tag { font-size: 11px; font-weight: 700; background: rgba(201,164,87,.16); color: #8f6b22; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }

/* ============================================================================
   MODO OSCURO (Fase 1) — redefine tokens neutros + acentos de texto.
   Las superficies usan var(--sfv-white); el chrome (forest) ya es oscuro.
   Toggle: body.sfv-dark (botón luna en la barra superior, persiste en localStorage).
   ============================================================================ */
body.sfv-dark {
  color-scheme: dark;           /* iconos nativos (fecha/hora), checkboxes, selects y scrollbars en oscuro */
  --sfv-white:       #14282b;   /* superficie de tarjeta (teal-medianoche, elevada) */
  --sfv-sand:        #06161a;   /* fondo de app (teal-medianoche profundo) */
  --sfv-ink:         #eef4f3;   /* texto principal */
  --sfv-graphite:    #aec6c7;   /* texto secundario */
  --sfv-muted:       #84a0a3;   /* texto terciario */
  --sfv-line:        #294648;   /* bordes (teal, visibles) */
  --sfv-line-soft:   #18302f;   /* divisores */
  --sfv-mint-dark:   #5cdd8c;   /* acento verde como TEXTO sobre oscuro (más brillante) */
  --sfv-gold-dark:   #ecca88;   /* acento dorado como texto */
  --sfv-coral-dark:  #f59782;   /* peligro como texto */
  --sfv-shadow-card:    0 6px 22px rgba(0,0,0,.5);
  --sfv-shadow-hover:   0 18px 40px -18px rgba(0,0,0,.62);
  --sfv-shadow-pop:     0 30px 70px -30px rgba(0,0,0,.74);
  --sfv-shadow-overlay: 0 40px 90px -30px rgba(0,0,0,.82);
}
/* Ajustes puntuales (cosas que estaban con color "duro" claro) */
body.sfv-dark .sfv-input, body.sfv-dark .sfv-select, body.sfv-dark .sfv-textarea { background: #0c2226; }
body.sfv-dark .sfv-table tbody tr:nth-child(even) { background: #122529; }
body.sfv-dark .sfv-table tbody tr:hover { background: #20362c; }
body.sfv-dark .sfv-callout { background: linear-gradient(135deg, #15302a, #16211c); }
body.sfv-dark .sfv-msg.info  { background: rgba(51,210,105,.12); }
body.sfv-dark .sfv-msg.error { background: rgba(232,103,76,.14); }
body.sfv-dark .sfv-msg.warn  { background: rgba(201,164,87,.13); }
body.sfv-dark .sfv-btn.success { color: #08231a; }
body.sfv-dark .sfv-btn.danger-ghost { border-color: rgba(232,103,76,.4); color: var(--sfv-coral-dark); }
body.sfv-dark .cotiza-doc { color: var(--sfv-ink); }
body.sfv-dark .al-com-tag { color: var(--sfv-gold-dark); }
/* Estados ACTIVOS de segmentos/píldoras: que resalten (verde brillante) en oscuro */
body.sfv-dark .crm-pill-on,
body.sfv-dark .calc-seg-on,
body.sfv-dark .calc-mode.on,
body.sfv-dark .tk-toolbar .seg button.on { background: var(--sfv-mint-dark); color: #06140d; border-color: var(--sfv-mint-dark); }
/* Tarjetas KPI del dashboard (dash-kpi) y paneles: separación clara del fondo */
body.sfv-dark .dash-kpi, body.sfv-dark .dash-panel, body.sfv-dark .calc-card2 { border-color: var(--sfv-line); }
/* CHARTS (Highcharts) en oscuro: texto de ejes/leyendas/etiquetas en claro; líneas sutiles */
body.sfv-dark .highcharts-axis-labels text, body.sfv-dark .highcharts-axis-labels tspan,
body.sfv-dark .highcharts-legend-item text, body.sfv-dark .highcharts-legend-item tspan,
body.sfv-dark .highcharts-data-label text, body.sfv-dark .highcharts-data-label tspan,
body.sfv-dark .highcharts-data-labels text, body.sfv-dark .highcharts-data-labels tspan { fill: #cdddd3 !important; color: #cdddd3 !important; }
body.sfv-dark .highcharts-grid-line { stroke: rgba(255,255,255,.06) !important; }
body.sfv-dark .highcharts-axis-line, body.sfv-dark .highcharts-tick { stroke: rgba(255,255,255,.16) !important; }
/* Bordes blancos entre segmentos (donut/funnel/column) → tenues en oscuro */
body.sfv-dark .highcharts-point { stroke: var(--sfv-white) !important; }
/* Estados hover/seleccionado/no-leída que tenían fondo CLARO fijo → tinte oscuro legible */
body.sfv-dark .opchip:hover { background: rgba(92,221,140,.12); }
body.sfv-dark .cfg-chk.on { background: rgba(92,221,140,.14); color: var(--sfv-mint-dark); }
body.sfv-dark .sfv-notif-item.unread { background: rgba(92,221,140,.07); }
body.sfv-dark .sfv-notif-row-acts button { background: rgba(255,255,255,.08); color: var(--sfv-graphite); }
body.sfv-dark .seg-box { background: rgba(92,221,140,.06); border-color: var(--sfv-line); }
body.sfv-dark .crm-mail { background: rgba(47,118,168,.20); color: #84c2ef; }
body.sfv-dark .crm-mail:hover { background: rgba(47,118,168,.30); }
body.sfv-dark .ag-i { background: rgba(255,255,255,.04); }
body.sfv-dark .ag-i:hover { background: rgba(92,221,140,.10); }
body.sfv-dark .sfv-btn.danger-ghost:hover { background: rgba(232,103,76,.16); border-color: var(--sfv-coral); }
body.sfv-dark .avatar-style img, body.sfv-dark .avatar-style.jersey .ava-prev { background: rgba(255,255,255,.06); }
body.sfv-dark .seg-box { color: var(--sfv-ink); }
/* Botón toggle (luna/sol) en la barra superior */
.sfv-tbtn.on { color: var(--sfv-gold); }
/* En oscuro, el logo debe ir BLANCO aunque esté el chrome claro (sidebar-claro) */
body.sfv-dark.sidebar-claro .sfv-brand img,
body.sfv-dark .sfv-brand img { filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.3)) !important; }
/* En oscuro con chrome claro, dar borde al topbar/sidebar para separarlos del fondo */
body.sfv-dark.sidebar-claro .sfv-topbar { border-bottom: 1px solid var(--sfv-line); }
body.sfv-dark.sidebar-claro .sfv-sidebar { border-right: 1px solid var(--sfv-line); }
/* Holgura inferior para que el botón flotante de Aurelion no tape acciones de filas */
.sfv-main { padding-bottom: 104px; }

/* ============================================================================
   TABLERO KANBAN — vista alterna de "Mis Leads" (embudo arrastrable).
   Reversible: si se quita el toggle, la tabla sigue intacta.
   ============================================================================ */
:root { --kb-col-bg: rgba(255,255,255,.30); --kb-card-bg: rgba(255,255,255,.88); }
body.sfv-dark { --kb-col-bg: rgba(14,33,36,.42); --kb-card-bg: rgba(22,47,51,.84); }

/* Conmutador Tabla / Tablero (en la barra de herramientas) */
.leads-view-seg { display: inline-flex; border: 1px solid var(--sfv-line); border-radius: 999px; overflow: hidden; }
.leads-view-seg button { border: 0; background: transparent; padding: 7px 14px; font: inherit; font-size: 13px; color: var(--sfv-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s; }
.leads-view-seg button.on { background: var(--sfv-mint); color: #0a2a16; font-weight: 700; }

/* Tablero */
.kb-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(186px, 1fr); gap: 12px; overflow-x: auto; padding: 6px 2px 14px; align-items: start; }
.kb-col { background: var(--kb-col-bg); -webkit-backdrop-filter: blur(15px) saturate(1.08); backdrop-filter: blur(15px) saturate(1.08); border: 1px solid var(--sfv-line); border-radius: 16px; display: flex; flex-direction: column; min-height: 130px; transition: box-shadow .32s, border-color .32s, transform .14s; }
.kb-col.kb-over { border-color: var(--kb-c); box-shadow: 0 0 0 1.5px var(--kb-c), 0 16px 44px -12px var(--kb-c); transform: translateY(-2px); }
.kb-col-h { display: flex; align-items: center; gap: 9px; padding: 11px 11px 10px; border-bottom: 1px solid var(--sfv-line); }
.kb-chip { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 14px; flex: 0 0 auto; box-shadow: 0 4px 12px -3px var(--kb-c); }
.kb-col-name { font-weight: 800; font-size: 12px; letter-spacing: .4px; color: var(--sfv-ink); }
.kb-col-sub { font-size: 11.5px; font-weight: 700; color: var(--sfv-graphite); margin-top: 1px; }
.kb-count { margin-left: auto; min-width: 23px; height: 21px; padding: 0 7px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
.kb-col-b { padding: 9px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; max-height: 64vh; }
.kb-empty { border: 1.5px dashed var(--sfv-line); border-radius: 12px; padding: 16px 8px; text-align: center; color: var(--sfv-muted); font-size: 11px; }

.kb-card { background: var(--kb-card-bg); border: 1px solid var(--sfv-line); border-radius: 13px; padding: 9px 11px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; transition: box-shadow .18s, transform .12s, border-color .18s; }
.kb-card:hover { border-color: var(--kb-c); box-shadow: 0 8px 24px -10px rgba(0,0,0,.28); transform: translateY(-1px); }
.kb-card.kb-dragging { opacity: .22; border-style: dashed; }
body.kb-readonly .kb-card { cursor: default; }
.kb-ghost { position: fixed; z-index: 9000; pointer-events: none; background: var(--kb-card-bg); border: 1px solid var(--kb-c, var(--sfv-line)); border-radius: 13px; padding: 9px 11px; box-shadow: 0 20px 54px -12px rgba(0,0,0,.5); transform: rotate(2deg) scale(1.03); }
.kb-r1 { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.kb-card:has(.kb-temp) .kb-r1 { padding-right: 42px; }   /* reserva espacio para el badge de temperatura (absoluto, top-right) y evita que tape el nombre/monto */
.kb-prio { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.kb-name { font-weight: 700; font-size: 13px; color: var(--sfv-ink); line-height: 1.25; flex: 1 1 auto; min-width: 60px; }
.kb-amt { font-weight: 800; font-size: 12.5px; color: var(--cl-gold); white-space: nowrap; flex: 0 0 auto; margin-left: auto; }
.kb-req { font-size: 11px; font-weight: 600; color: var(--sfv-graphite); margin: 5px 0 0; line-height: 1.3; }
.kb-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.kb-tag { font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.kb-foot { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--sfv-line); }
.kb-av { width: 21px; height: 21px; border-radius: 50%; background: var(--sfv-forest); color: #fff; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
.kb-av.none { background: transparent; border: 1.5px dashed var(--sfv-line); color: var(--sfv-muted); }
.kb-op { font-size: 10.5px; color: var(--sfv-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-date { font-size: 10px; color: var(--sfv-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.kb-date.kb-venc { color: var(--sfv-coral-dark); font-weight: 700; }

/* Confeti del festejo al pasar a GANADO */
#kbConfetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6000; }

/* Mini-diálogo: motivo de pérdida al soltar en PERDIDO */
.kb-ask { position: fixed; inset: 0; z-index: 6100; display: flex; align-items: center; justify-content: center; background: rgba(6,16,12,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.kb-ask-box { background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 16px; padding: 18px; max-width: 340px; width: 90%; box-shadow: 0 24px 70px -18px rgba(0,0,0,.5); }
.kb-ask-h { font-weight: 800; font-size: 15px; color: var(--sfv-ink); display: flex; align-items: center; gap: 8px; }
.kb-ask-sub { font-size: 12.5px; color: var(--sfv-muted); margin: 6px 0 14px; }
.kb-ask-opts { display: flex; flex-direction: column; gap: 8px; }
.kb-ask-opt { text-align: left; border: 1px solid var(--sfv-line); background: transparent; color: var(--sfv-ink); padding: 9px 12px; border-radius: 10px; font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.kb-ask-opt:hover { border-color: var(--sfv-coral-dark); background: rgba(178,59,39,.08); }
.kb-ask-foot { margin-top: 12px; text-align: right; }

@media (prefers-reduced-motion: reduce) { .kb-col, .kb-card, .leads-view-seg button { transition: none; } }

/* ============================================================================
   CLIENTES Y CARTERA — pantalla maestro-detalle (lista buscable + cartera).
   Reusa los componentes del sistema (.sfv-card / .dash-kpi / .dash-panel +
   Highcharts) → hereda glass, glow de sección, fade-in y charts animados.
   ============================================================================ */
:root { --cl-soft: rgba(255,255,255,.40); --cl-gold: #a8801f; }
body.sfv-dark { --cl-soft: rgba(255,255,255,.05); --cl-gold: #e6c47e; }
/* Glifos de los picos SIEMPRE blancos (universal, claro y oscuro: fondos saturados) */
.sfv-pico { color: #fff !important; }
.sfv-pico i { color: inherit; }
/* Subiconos (chips de icono con fondo de color) → glifo SIEMPRE blanco también */
.li-ico, .tk-ico, .nico, .bit-ico, .seg-ico, .dls-card .sfv-pico, .av-cat .sfv-pico { color: #fff !important; }
.li-ico i, .tk-ico i, .nico i, .bit-ico i { color: inherit; }
/* Dorado legible para textos de cifra en Clientes (el #C9A457 se lavaba en vidrio claro) */
.cl-detail .crm-gold, .cl-stat .v.gold { color: var(--cl-gold); }

/* Cabecera fusionada (totales globales + cliente seleccionado en UNA sola tarjeta) */
.cl-header { padding: 13px 22px !important; margin-bottom: 16px; }
.cl-header-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.cl-header-div { height: 1px; background: var(--sfv-line); margin: 11px 0 4px; }
.cl-stat .l { font-size: 11px; color: var(--sfv-muted); display: block; }
.cl-stat .v { font-size: 19px; font-weight: 800; color: var(--sfv-ink); font-family: var(--sfv-num); font-variant-numeric: tabular-nums; margin-top: 2px; }
.cl-stat .v.up { color: var(--sfv-mint-dark, #1fae53); }
.cl-stat-div { width: 1px; height: 34px; background: var(--sfv-line); }
.cl-newbtn { margin-left: auto; flex: 0 0 auto; }

.cl-main { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 16px; align-items: start; }
.cl-detail-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cl-hero-card { padding: 16px 22px !important; }
.cl-aside-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sfv-mint-dark); display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.cl-aside { padding: 14px !important; align-self: stretch; display: flex; flex-direction: column; }
.cl-search { display: flex; align-items: center; gap: 9px; background: var(--cl-soft); border: 1px solid var(--sfv-line); border-radius: 11px; padding: 9px 12px; }
.cl-search i { color: var(--sfv-mint); }
.cl-search input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; font-size: 13.5px; color: var(--sfv-ink); }
.cl-search input::placeholder { color: var(--sfv-muted); }
.cl-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 6px; }
.cl-chip { font-size: 11px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--sfv-line); background: transparent; color: var(--sfv-muted); cursor: pointer; font-weight: 600; }
.cl-chip.on { background: var(--sfv-mint); color: #0a2a16; border-color: var(--sfv-mint); font-weight: 800; }
.cl-count { font-size: 10.5px; color: var(--sfv-muted); padding: 6px 4px 8px; letter-spacing: .3px; }
.cl-list { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 130px; overflow-y: auto; }
.cl-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.cl-row:hover { background: var(--cl-soft); }
.cl-row.on { background: rgba(51,210,105,.15); border-color: rgba(51,210,105,.5); }
.cl-grip { flex: 0 0 auto; color: var(--sfv-muted); cursor: grab; opacity: 0; font-size: 12px; transition: opacity .15s; margin: -2px 0; }
.cl-row:hover .cl-grip { opacity: .55; }
.cl-grip:active { cursor: grabbing; }
.cl-row.cl-dragging { opacity: .45; box-shadow: 0 6px 16px rgba(8,30,18,.2); }
.cl-row.cl-over { box-shadow: inset 0 2px 0 var(--sfv-mint, #33d269); }
.cl-av { width: 36px; height: 36px; border-radius: 50%; background: var(--sfv-forest); color: #fff; font-weight: 800; font-size: 12.5px; display: grid; place-items: center; flex: 0 0 auto; }
.cl-row-mid { flex: 1; min-width: 0; }
.cl-row-name { font-weight: 700; font-size: 13px; color: var(--sfv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row-sub { font-size: 10.5px; color: var(--sfv-muted); display: flex; align-items: center; gap: 5px; }
.cl-row-r { text-align: right; flex: 0 0 auto; }
.cl-row-cap { font-weight: 800; font-size: 12.5px; color: var(--sfv-ink); }
.cl-rend { font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 2px; }
.cl-up { color: var(--sfv-mint-dark, #1fae53); } .cl-down { color: var(--sfv-coral-dark); }
.cl-empty { text-align: center; color: var(--sfv-muted); font-size: 12.5px; padding: 22px 8px; }

/* Detalle = pila de tarjetas del sistema (cada una con su glow + fade-in) */
.cl-detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Hero estilo "tarjeta de portafolio": identidad + valor + delta + tendencia integrada */
.cl-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cl-d-av { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg,#16A085,#0e6b58); color: #fff; font-weight: 800; font-size: 18px; display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 6px 16px -6px rgba(15,74,51,.5); }
.cl-d-name { font-weight: 800; font-size: 19px; color: var(--sfv-ink); }
.cl-d-sub { font-size: 12.5px; color: var(--sfv-muted); margin-top: 3px; }
.cl-d-graduado { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11px; color: var(--sfv-mint-dark, #1fae53); background: rgba(51,210,105,.12); border: 1px solid rgba(51,210,105,.4); padding: 4px 11px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.cl-hero-val { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.cl-hero-val .l { font-size: 11px; color: var(--sfv-muted); }
.cl-hero-val .v { font-size: 28px; font-weight: 800; color: var(--sfv-ink); font-family: var(--sfv-num); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; }
.cl-delta { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 999px; }
.cl-delta.up { color: #1f9d57; background: rgba(31,157,87,.13); }
.cl-delta.down { color: #d2473d; background: rgba(210,71,61,.13); }
.cl-hero-trend { margin: 8px -4px -2px; }
.cl-hero-trend .cap { display: flex; justify-content: space-between; font-size: 10px; color: var(--sfv-muted); padding: 4px 6px 0; letter-spacing: .4px; text-transform: uppercase; }

/* KPIs limpios y parejos (sin sparkline flotante) */
.cl-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.cl-tile-sub { font-size: 11px; color: var(--sfv-muted); margin-top: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Composición: donut + desglose por tipo con montos y barras */
.cl-compo2 { display: grid; grid-template-columns: minmax(0,250px) minmax(0,1fr); gap: 22px; align-items: center; }
.cl-desglose { display: flex; flex-direction: column; gap: 13px; }
.cl-dg-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sfv-ink); }
.cl-dg-amt { margin-left: auto; font-weight: 800; color: var(--sfv-graphite); }
.cl-dg-amt span { color: var(--sfv-muted); font-weight: 600; margin-left: 7px; }
.cl-dg-bar { height: 7px; border-radius: 5px; background: var(--cl-soft); margin-top: 6px; overflow: hidden; }
.cl-dg-fill { display: block; height: 100%; border-radius: 5px; }

.cl-pos-tipo { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.cl-mini { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.cl-pos-tipo + .cl-mini, td .cl-mini { margin-right: 6px; }
.cl-part { display: flex; align-items: center; gap: 8px; min-width: 96px; }
.cl-part > span { font-size: 11px; font-weight: 700; color: var(--sfv-graphite); white-space: nowrap; }
.cl-part-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--cl-soft); overflow: hidden; }
.cl-part-bar > span { display: block; height: 100%; border-radius: 4px; }
@media (max-width: 980px){ .cl-main{ grid-template-columns: 1fr; } .cl-aside{ position: static; } .cl-list{ max-height: 260px; } .cl-kpis{ grid-template-columns: repeat(2,minmax(0,1fr)); } .cl-compo2{ grid-template-columns: 1fr; } }

/* ============================================================================
   AURELION = centro de avisos: notificación dentro del chat + rebote del FAB.
   ============================================================================ */
@keyframes aurNudge { 0%,100%{ transform: none; } 12%{ transform: translateY(-7px) scale(1.07); } 26%{ transform: translateY(0) scale(1); } 40%{ transform: translateY(-4px) scale(1.04); } 55%{ transform: none; } }
.aur-fab.aur-nudge { animation: aurNudge 1.25s cubic-bezier(.22,.61,.36,1); }
.aur-msg .aur-aviso { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-size: 11px; color: #fff; flex: 0 0 auto; margin-right: 7px; vertical-align: -5px; }
.aur-aviso.info { background: #2980B9; } .aur-aviso.success { background: #27AE60; } .aur-aviso.warn { background: #E67E22; } .aur-aviso.danger { background: #E74C3C; }
.aur-aviso-tx { display: inline; }
@media (prefers-reduced-motion: reduce) { .aur-fab.aur-nudge { animation: none; } }

/* ============================================================================
   AUDITORÍA (admin) — escáner de salud de la cartera, desempeño por operador,
   reparto/balance de carga, trazabilidad y Conozca a su Cliente. Reutiliza
   .sfv-card/.sfv-kpi/.sfv-table/.sfv-cols/.sfv-bar-row del resto del CRM;
   estas clases son las piezas NUEVAS y específicas de esa pantalla.
   ============================================================================ */
.aud-hero { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.aud-hero-left { flex: 0 0 auto; text-align: center; }
.aud-scan-btn { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; padding: 14px 26px; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--sfv-mint), var(--sfv-mint-dark)); box-shadow: 0 12px 30px -8px rgba(7,97,44,.5); transition: transform .16s var(--sfv-ease); }
.aud-scan-btn:hover { transform: translateY(-2px) scale(1.02); }
.aud-scan-btn i { font-size: 18px; }
.aud-scan-meta { margin-top: 10px; font-size: 12px; color: var(--sfv-muted); }
.aud-prog { display: none; margin-top: 14px; }
.aud-prog-track { height: 9px; border-radius: 6px; background: var(--sfv-sand); overflow: hidden; }
.aud-prog-bar { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--sfv-mint-dark), var(--sfv-gold)); transition: width .12s linear; }
.aud-prog-stat { font-size: 12px; color: var(--sfv-graphite); margin-top: 6px; font-weight: 600; }
.aud-gauge-wrap { position: relative; width: 172px; height: 172px; flex: 0 0 172px; }
.aud-gauge { width: 172px; height: 172px; border-radius: 50%; -webkit-mask: radial-gradient(transparent 60%,#000 61%); mask: radial-gradient(transparent 60%,#000 61%); background: conic-gradient(#94a3b8 0deg 360deg); }
.aud-gauge-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.aud-gauge-num { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-size: 44px; font-weight: 800; line-height: 1; color: var(--sfv-ink); }
.aud-gauge-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sfv-muted); margin-top: 4px; }
.aud-hero-stats { flex: 1; min-width: 220px; display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 12px; }
.aud-hstat { background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 12px; padding: 12px 14px; }
.aud-hstat .v { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 800; }
.aud-hstat .l { font-size: 11.5px; color: var(--sfv-muted); }
.aud-hstat.crit .v { color: #dc2626; } .aud-hstat.med .v { color: #d97706; }
.aud-scale { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--sfv-muted); margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--sfv-line); }
.aud-scale b { color: var(--sfv-ink); margin-right: 2px; }
.aud-scale-i { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.aud-scale-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.aud-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aud-toolbar .spacer { flex: 1; }
.aud-toolbar .scope-lbl { font-size: 12px; font-weight: 700; color: var(--sfv-graphite); white-space: nowrap; }
.aud-exp-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--sfv-line); background: var(--sfv-white); color: var(--sfv-graphite); border-radius: 10px; padding: 8px 13px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .14s var(--sfv-ease); }
.aud-exp-btn:hover { border-color: var(--sfv-mint); color: var(--sfv-mint-dark); }
.aud-exp-btn.pdf i { color: #dc2626; } .aud-exp-btn.xls i { color: #15803d; } .aud-exp-btn.csv i { color: #2563eb; }
.aud-scope-banner { display: flex; align-items: center; gap: 9px; background: var(--sfv-sand); padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 13px; }
.aud-scope-banner a { margin-left: auto; font-weight: 800; color: var(--sfv-mint-dark); cursor: pointer; white-space: nowrap; }
.aud-sev-head { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.aud-sev-dot { width: 10px; height: 10px; border-radius: 50%; }
.aud-find { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--sfv-line); border-radius: 12px; background: var(--sfv-white); margin-bottom: 8px; }
.aud-find .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 17px; flex: 0 0 auto; }
.aud-find .main { flex: 1; min-width: 0; }
.aud-find .ti { font-weight: 700; font-size: 14px; }
.aud-find .su { font-size: 12px; color: var(--sfv-muted); }
.aud-find .cnt { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 22px; }
.aud-ops { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 14px; margin-bottom: 18px; }
.aud-op { background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 16px; padding: 16px; }
.aud-op-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.aud-op-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px; flex: 0 0 auto; }
.aud-op-name { font-weight: 800; font-size: 15px; }
.aud-op-role { font-size: 11.5px; color: var(--sfv-muted); }
.aud-op-badge { margin-left: auto; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.aud-op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aud-op-m .v { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; }
.aud-op-m .l { font-size: 11px; color: var(--sfv-muted); }
.aud-log-i { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--sfv-line-soft,rgba(0,0,0,.06)); }
.aud-log-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 14px; flex: 0 0 auto; }
.aud-log-meta { font-size: 11.5px; color: var(--sfv-muted); }
.aud-log-txt { font-size: 13.5px; margin-top: 1px; }
.aud-log-txt b { font-weight: 800; }
.aud-chip-flag { display: inline-block; font-size: 10px; font-weight: 800; color: #b91c1c; background: #fee2e2; border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.aud-flags { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 14px; }
.aud-flag { border: 1px solid var(--sfv-line); border-left: 4px solid #ef4444; background: linear-gradient(90deg, rgba(239,68,68,.05), transparent); border-radius: 12px; padding: 14px 16px; }
.aud-flag h5 { margin: 0 0 4px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.aud-flag h5 i { color: #ef4444; }
.aud-flag .n { font-family: var(--sfv-num); font-weight: 800; }
.aud-flag p { margin: 6px 0 0; font-size: 12.5px; color: var(--sfv-graphite); }
.aud-flag-sign { margin-top: 11px; font-size: 11.5px; font-weight: 700; color: var(--sfv-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.aud-flag-sign:hover { color: var(--sfv-graphite); }
.aud-flag-sign.on { color: #15803d; }
.aud-kyc-row { display: grid; grid-template-columns: 210px 1fr 52px; align-items: center; gap: 12px; margin: 12px 0; }
.aud-kyc-row .lbl { font-size: 13px; font-weight: 600; }
.aud-kyc-track { height: 12px; border-radius: 6px; background: var(--sfv-sand); overflow: hidden; }
.aud-kyc-fill { height: 100%; border-radius: 6px; }
.aud-kyc-pct { text-align: right; font-family: var(--sfv-num); font-weight: 800; }
.aud-hint { font-size: 12px; color: var(--sfv-muted); display: flex; align-items: center; gap: 7px; margin-top: 4px; font-style: italic; }
.aud-bal-row { display: grid; grid-template-columns: 150px 1fr 70px; align-items: center; gap: 12px; margin: 14px 0; }
.aud-bal-row .lbl { font-size: 13px; font-weight: 700; }
.aud-bal-track { position: relative; height: 14px; border-radius: 7px; background: var(--sfv-sand); overflow: visible; }
.aud-bal-fill { position: absolute; inset: 0; height: 100%; border-radius: 7px; }
.aud-bal-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--sfv-ink); opacity: .4; }
.aud-bal-val { text-align: right; font-family: var(--sfv-num); font-weight: 800; font-size: 13px; }
.aud-impact-box { display: flex; align-items: center; gap: 16px; background: linear-gradient(90deg, rgba(234,88,12,.08), transparent); border: 1px solid #fed7aa; border-radius: 14px; padding: 16px 18px; margin-top: 6px; }
.aud-impact-box .n { font-family: var(--sfv-num); font-size: 30px; font-weight: 800; color: #c2410c; flex: 0 0 auto; }
.aud-impact-box p { margin: 0; font-size: 13px; color: var(--sfv-graphite); }
@media (max-width: 700px) { .aud-hero { justify-content: center; } .aud-scale { justify-content: center; } .aud-scale span:last-child { margin-left: 0 !important; width: 100%; text-align: center; } }

/* Impresión (exportar "PDF" = imprimir del navegador): solo el reporte, sin chrome de la app. */
@media print {
  .sfv-topbar, .sfv-sidebar, .sfv-menu-toggle, .aud-noprint, .aud-scan-btn, .aud-flag-sign { display: none !important; }
  .sfv-app, .sfv-body, .sfv-main { display: block !important; margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
  .sfv-card, .aud-op, .aud-flag { box-shadow: none !important; break-inside: avoid; }
}

/* Importar / Exportar Leads (Configuración → admin) */
.ie-exp-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; }
.ie-exp-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; border: 1px solid var(--sfv-line); background: var(--sfv-white); border-radius: 14px; padding: 16px; cursor: pointer; font-family: inherit; transition: transform .15s var(--sfv-ease), box-shadow .15s var(--sfv-ease), border-color .15s; }
.ie-exp-btn:hover { transform: translateY(-2px); box-shadow: var(--sfv-shadow-hover); border-color: var(--sfv-mint); }
.ie-exp-btn i { font-size: 22px; }
.ie-exp-btn b { font-size: 14px; color: var(--sfv-ink); }
.ie-exp-btn span { font-size: 11.5px; color: var(--sfv-muted); line-height: 1.4; }