/* CRM: complementos sobre el estilo de Talento (app.css) */
.kpis.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv.kv-1 { grid-template-columns: 1fr; gap: 12px; }
.kv .big { font-size: 20px; font-weight: 700; display: block; }
.opp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.opp-side { position: sticky; top: 80px; }
.crm-board { grid-auto-columns: minmax(230px, 1fr); }
.kcol-closed { opacity: .92; }
.kcol-sum { padding: 6px 14px 0; }
.kcol-empty { text-align: center; padding: 18px 0; border: 1px dashed var(--border-strong); border-radius: 10px; }
.avatar.xs { width: 22px; height: 22px; font-size: 11px; }
.stage-bar { display: flex; gap: 6px; padding: 10px; margin-bottom: 20px; overflow-x: auto; }
.stage-step { flex: 1; min-width: 110px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); border-radius: 999px;
  height: 36px; font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; padding: 0 12px; }
.stage-step:hover { border-color: var(--c); color: var(--ink); }
.stage-step.past { background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-color: color-mix(in srgb, var(--c) 40%, var(--surface)); color: var(--ink); }
.stage-step.on { background: var(--c); border-color: var(--c); color: #fff; }
.stage-step.k-won:not(.on) { border-style: dashed; } .stage-step.k-lost:not(.on) { border-style: dashed; }
.hist-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.hist-row:last-child { border-bottom: 0; }
.ai-list ul { margin: 4px 0 10px; padding-left: 18px; font-size: 13px; } .ai-list li { margin-bottom: 3px; }
.ai-box { border-top: 1px solid var(--border); padding-top: 12px; }
.goal-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.goal-bar { position: relative; height: 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); margin: 6px 0 4px; overflow: visible; }
.goal-bar i { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
.goal-bar i.cumplida { background: var(--good); } .goal-bar i.atrasada { background: var(--warn); }
.goal-bar em { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ink-2); border-radius: 2px; }
.tl-dot.good { color: var(--good); } .tl-dot.bad { color: var(--bad); }
.person { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; }
.person small { display: block; color: var(--ink-3); }
@media (max-width: 1100px) { .opp-grid { grid-template-columns: minmax(0, 1fr); } .opp-side { position: static; } .kpis.kpis-4 { grid-template-columns: repeat(2, 1fr); } }
.grow { flex: 1; }
/* Línea de tiempo de actividades */
.timeline .tl-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.timeline .tl-item:last-child { border-bottom: 0; }
.timeline .tl-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--ink-3); position: static; }
.timeline .tl-dot.good { color: var(--good); border-color: var(--good-bd); background: var(--good-50); }
.timeline .tl-dot.bad { color: var(--bad); border-color: var(--bad-bd); background: var(--bad-50); }
.timeline .tl-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Formularios: datos a la izquierda, comercial responsable (y estado) a la derecha */
.form-split { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; align-items: start; }
.form-side { display: grid; gap: 14px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; position: sticky; top: 0; }
.owner-ro { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-weight: 500; }
.consent { padding: 12px 14px; border: 1px dashed var(--warn-bd); background: var(--warn-50); border-radius: 10px; }
.consent.ok { border-color: var(--good-bd); background: var(--good-50); }
.consent .check { align-items: flex-start; font-weight: 400; } .consent .check input { margin-top: 3px; }
@media (max-width: 860px) { .form-split { grid-template-columns: minmax(0, 1fr); } .form-side { position: static; } }
/* Ventanas con columna lateral: más anchas para que la columna de datos no quede apretada */
.modal:has(.form-split) { width: min(980px, 100%); max-width: 980px; }
.modal:has(.form-split) .form-split { grid-template-columns: minmax(0, 1fr) 260px; }
/* ===== Registro con panel de actividades a la derecha ===== */
.record-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.record-single { max-width: 980px; }
.owner-inline { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.owner-inline select.input { width: 230px; height: 36px; }
.owner-inline .owner-ro { height: 36px; }
.card-pad .divider { height: 1px; background: var(--border); margin: 2px 0; }
.act-panel { position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; overflow: hidden; }
.act-panel .ap-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--border); overflow-x: auto; flex: none; }
.act-panel .ap-tabs button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  border-radius: 99px; height: 28px; padding: 0 10px; font: 600 12px var(--font); cursor: pointer; white-space: nowrap; }
.act-panel .ap-tabs button span:last-child { color: var(--ink-3); font-weight: 500; }
.act-panel .ap-tabs button.on { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary-600); }
.act-panel .ap-compose { padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); display: grid; gap: 10px; flex: none; }
.act-panel .ap-kinds { flex-wrap: wrap; } .act-panel .ap-kinds button { height: 28px; padding: 0 8px; font-size: 12px; }
.act-panel .ap-body { overflow-y: auto; flex: 1; min-height: 120px; }
.ap-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ap-item:last-child { border-bottom: 0; }
.ap-item.is-done .ap-title b { color: var(--ink-2); font-weight: 600; }
.ap-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-3); }
.ap-ico.good { color: var(--good); background: var(--good-50); border-color: var(--good-bd); }
.ap-ico.bad { color: var(--bad); background: var(--bad-50); border-color: var(--bad-bd); }
.ap-title { font-size: 13.5px; line-height: 1.3; }
.ap-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11.5px; margin-top: 3px; color: var(--ink-2); }
.ap-meta.muted { color: var(--ink-3); }
.ap-meta .badge { height: 18px; font-size: 10.5px; padding: 0 7px; }
.ap-text { font-size: 12.5px; color: var(--ink-2); margin: 6px 0 0; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.ap-text.open { -webkit-line-clamp: unset; display: block; }
.ap-actions { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 1200px) { .record-layout { grid-template-columns: minmax(0, 1fr); } .act-panel { position: static; max-height: none; } .owner-inline { margin-left: 0; } }
/* ===== Barra derecha del registro: dueño · vinculado · actividades ===== */
.record-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 96px); min-width: 0; }
.record-side .side-card { padding: 14px 16px; display: grid; gap: 8px; flex: none; }
.side-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.side-title .icon { color: var(--primary); }
.record-side .act-panel { position: static; max-height: none; flex: 1; min-height: 260px; }
.linked { display: grid; gap: 8px; font-size: 13px; }
.linked div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.linked small { color: var(--ink-3); font-size: 11.5px; }
.linked a, .linked span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1200px) { .record-side { position: static; max-height: none; } .record-side .act-panel { min-height: 0; } }
.side-card .hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }

/* ===================== Celulares y tabletas (CRM) =====================
   Solo dentro de media queries: en escritorio nada de esto aplica. */
@media (max-width: 960px) {
  .kpis.kpis-4, .kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
  .kpis.kpis-4, .kpis.kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .linked div { grid-template-columns: 96px minmax(0, 1fr); }
  .linked div > * { overflow-wrap: anywhere; }
  .act-panel .ap-tabs { scrollbar-width: none; }
}

/* Configuración → Catálogos (soluciones y aplicaciones) */
.cat-tabs { margin-bottom: 14px; }
.cat-add { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.cat-add .input { flex: 1; min-width: 0; }
.cat-sol { margin-bottom: 12px; overflow: hidden; }
.cat-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.cat-row .check { white-space: nowrap; }
.cat-name { flex: 1; min-width: 0; border: 1px solid transparent; background: none; border-radius: 8px; padding: 6px 8px; font: inherit; color: var(--ink); }
.cat-name.strong { font-weight: 600; font-size: 15px; }
.cat-name:hover { border-color: var(--border); }
.cat-name:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.cat-apps { border-top: 1px solid var(--border); }
.cat-app { padding-left: 62px; border-bottom: 1px solid var(--border); }
.cat-empty { margin: 0; padding: 12px 18px 0 62px; }
.cat-add-app { margin: 0; padding: 12px 18px 14px 62px; }
.cat-add-app .input { max-width: 420px; }
.off .cat-name { color: var(--ink-3); }
@media (max-width: 680px) {
  .cat-row { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .cat-row .cat-name { flex-basis: calc(100% - 44px); }
  .cat-app, .cat-empty, .cat-add-app { padding-left: 12px; }
  .cat-app .cat-name { flex-basis: 100%; }
  .cat-add { flex-wrap: wrap; } .cat-add .btn { flex: 1 1 100%; justify-content: center; }
}

/* Oportunidades → Parámetros */
.params-tabs { margin-bottom: 16px; }
.rates-table .input { min-width: 0; }
.rates-table td:first-child .input { width: 84px; text-transform: uppercase; }
.rates-table td.num .input { width: 150px; text-align: right; }

/* Tareas: registros vinculados */
.link-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.link-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 10px; border: 1px solid var(--border-strong);
  border-radius: 99px; background: var(--surface); font-size: 13px; }
.link-chip small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); }
.link-chip.t-oportunidad small { color: var(--primary); } .link-chip.t-prospecto small { color: var(--warn); } .link-chip.t-cuenta small { color: var(--good); }
.link-chip a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.link-chip a:hover { color: var(--primary); text-decoration: underline; }
.link-chip button { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 99px; background: none; color: var(--ink-3); cursor: pointer; }
.link-chip button:hover { background: var(--bad-50); color: var(--bad); }
.link-add { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.link-search { position: relative; flex: 1; min-width: 220px; }
.link-results { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 4px; }
.link-results button { display: grid; width: 100%; text-align: left; gap: 1px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--ink); font: inherit; }
.link-results button:hover:not(:disabled) { background: var(--surface-2); }
.link-results button:disabled { opacity: .45; cursor: default; }
.link-results small { color: var(--ink-3); font-size: 12px; }
.rel-list { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.rel-list a { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 680px) { .link-add .seg { width: 100%; } .link-search { min-width: 0; flex-basis: 100%; } }

/* Conversación de la oportunidad */
.conv-compose { padding: 14px 20px; border-bottom: 1px solid var(--border); display: grid; gap: 8px; background: var(--surface-2); }
.conv-compose-bar { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.conv-note { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.conv-list { padding: 4px 0 8px; }
.conv-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 20px 12px calc(20px + var(--depth, 0) * 28px); }
.conv-item:not(.is-reply) { border-top: 1px solid var(--border); }
.conv-item:first-child { border-top: 0; }
.conv-item.is-reply { padding-top: 6px; position: relative; }
.conv-item.is-reply::before { content: ""; position: absolute; left: calc(36px + (var(--depth) - 1) * 28px); top: 0; bottom: 0; width: 2px; background: var(--border); border-radius: 2px; }
.conv-avatar { width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; background: var(--ink-3); }
.is-reply .conv-avatar { width: 28px; height: 28px; font-size: 12px; }
.conv-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.conv-body { margin: 4px 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.conv-edit, .conv-reply { display: grid; gap: 8px; margin: 6px 0; }
.conv-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.react { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--border); border-radius: 99px;
  background: var(--surface); color: var(--ink-2); font: 600 12px var(--font); cursor: pointer; }
.react:hover { border-color: var(--border-strong); }
.react.on { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary-600); }
.react.ghost { color: var(--ink-3); } .react.ghost .icon { width: 12px; height: 12px; }
.react-add { position: relative; }
.react-picker { position: absolute; z-index: 30; bottom: calc(100% + 6px); left: 0; display: flex; gap: 2px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 99px; box-shadow: var(--shadow-lg); }
.react-picker button { width: 34px; height: 34px; border: 0; background: none; border-radius: 99px; font-size: 20px; cursor: pointer; transition: transform .1s; }
.react-picker button:hover { background: var(--surface-2); transform: scale(1.18); }
.link-btn { border: 0; background: none; padding: 2px 4px; color: var(--ink-3); font: 600 12.5px var(--font); cursor: pointer; }
.link-btn:hover { color: var(--primary); } .link-btn.danger:hover { color: var(--bad); }
@media (max-width: 680px) {
  .conv-item { padding-left: calc(14px + var(--depth, 0) * 14px); padding-right: 14px; }
  .conv-item.is-reply::before { left: calc(26px + (var(--depth) - 1) * 14px); }
  .react-picker { flex-wrap: wrap; width: 200px; border-radius: 14px; }
}

/* Dashboard: gráfico anual (paleta categórica validada: posiciones 1 y 2) y actividades por comercial */
.viz { --series-1: #2a78d6; --series-2: #eb6834; }
:root[data-theme="dark"] .viz { --series-1: #3987e5; --series-2: #d95926; }
.year-kpis { margin: 0; padding: 0 20px; gap: 12px; border-bottom: 1px solid var(--border); }
.year-kpis .kpi { padding: 14px 4px; }
.year-kpis .kpi b { font-size: 26px; }
.viz-legend { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
.viz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.sw.s1 { background: var(--series-1); } .sw.s2 { background: var(--series-2); }
.viz-chart { position: relative; }
.viz-svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-svg .grid { stroke: var(--border); stroke-width: 1; }
.viz-svg .tick { fill: var(--ink-3); font: 11px var(--font); }
.viz-svg .s1 { fill: var(--series-1); } .viz-svg .s2 { fill: var(--series-2); }
.viz-svg .hit { fill: transparent; cursor: default; }
.viz-svg .hit:hover { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.viz-tip { position: absolute; pointer-events: none; z-index: 5; min-width: 150px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px 10px; font-size: 12.5px; color: var(--ink); display: grid; gap: 3px; }
.viz-tip div { display: flex; align-items: center; gap: 6px; } .viz-tip div span { margin-left: auto; font-weight: 600; padding-left: 10px; }
.total-bar { position: relative; display: flex; align-items: center; gap: 8px; min-width: 140px; }
.total-bar i { display: block; height: 8px; border-radius: 0 4px 4px 0; background: var(--primary); min-width: 2px; }
.total-bar span { font-weight: 600; font-size: 13px; }
.acts-seller td.num, .acts-seller th.num { text-align: right; }
@media (max-width: 680px) { .year-kpis { padding: 0 12px; } .viz-legend { flex-wrap: wrap; gap: 10px; } }
.conv { margin-top: 20px; }

/* Panel de actividades: mosaico de tipos (reemplaza la fila con desplazamiento) */
.ap-kinds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex: none; }
.ap-kind { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink-2); cursor: pointer;
  font: inherit; transition: border-color .15s, background .15s, transform .1s; }
.ap-kind:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ap-kind:active { transform: scale(.98); }
.ap-kind-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); color: var(--ink-3); }
.ap-kind b { font-size: 15px; line-height: 1.1; color: var(--ink); }
.ap-kind small { font-size: 11px; color: var(--ink-3); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-kind.k-tarea .ap-kind-ico { color: var(--primary); } .ap-kind.k-reunion .ap-kind-ico { color: #0e7490; }
.ap-kind.k-llamada .ap-kind-ico { color: #15803d; } .ap-kind.k-correo .ap-kind-ico { color: #b45309; } .ap-kind.k-nota .ap-kind-ico { color: #7c3aed; }
.ap-kind.on { border-color: var(--primary); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary) inset; }
.ap-kind.on .ap-kind-ico { background: var(--primary); color: #fff; }
.ap-kind.on small { color: var(--primary-600); }
:root[data-theme="dark"] .ap-kind.k-reunion .ap-kind-ico { color: #22d3ee; } :root[data-theme="dark"] .ap-kind.k-llamada .ap-kind-ico { color: #4ade80; }
:root[data-theme="dark"] .ap-kind.k-correo .ap-kind-ico { color: #fbbf24; } :root[data-theme="dark"] .ap-kind.k-nota .ap-kind-ico { color: #a78bfa; }
/* La barra derecha crece con la página (propietario, IA, vinculados y actividades); la lista de actividades se desplaza por dentro */
.record-side { position: static; max-height: none; }
.record-side .act-panel { min-height: 0; }
.record-side .act-panel .ap-body { max-height: 560px; }
.ai-side .ai-list ul { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; }
.money-hint { min-height: 16px; }
.money-in { text-align: right; font-variant-numeric: tabular-nums; }

/* Secciones dentro de los formularios */
.form-sections { row-gap: 14px; }
.fsec { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border); }
.fsec:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.fsec-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--primary-50); color: var(--primary); flex: none; }
.fsec b { display: block; font-size: 14px; color: var(--ink); }
.fsec small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }

/* ===================== Pipeline (tablero) ===================== */
/* Una sola barra vertical (la de la página): las etapas crecen con sus tarjetas, sin alto fijo ni desplazamiento interno.
   Columnas: grid-template-columns en línea (boardCols): las abiertas reparten el ancho (mín. 210 px), las cerradas plegadas
   ocupan 52 px. Si no caben, el tablero se desplaza de lado sin barra visible (flechas .pipe-nav, deslizar, arrastre al borde). */
.pipe { gap: 14px; padding: 2px 2px 8px; scroll-snap-type: x proximity; align-items: start; overflow-x: auto; overflow-y: visible;
  scrollbar-width: none; }
.pipe::-webkit-scrollbar { display: none; }
.pcol { min-width: 0; }
.pcol-in { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pipe-nav { display: inline-flex; gap: 4px; margin-left: auto; }
.pcol.folded { min-height: 260px; }
.pcol-fold { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%;
  padding: 12px 0; border-top: 4px solid var(--c); border-radius: 16px; min-height: 100%; }
.pcol-fold:hover { background: color-mix(in srgb, var(--c) 8%, transparent); }
.pcol-fold:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.pcol-fold .pcol-count { margin: 0; }
.pcol-fold-name { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: 13px; color: var(--ink); white-space: nowrap; }
.pcol-fold-sum { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.pcol-fold-btn { all: unset; cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--ink-3); }
.pcol-fold-btn:hover { background: var(--surface); color: var(--ink); }
.pcol { display: flex; flex-direction: column; min-height: 320px; border-radius: 16px; scroll-snap-align: start;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, var(--surface-2)) 0, var(--surface-2) 140px);
  border: 1px solid color-mix(in srgb, var(--c) 18%, var(--border)); transition: border-color .15s, box-shadow .15s, background .15s; }
.pcol.over { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
  background: color-mix(in srgb, var(--c) 10%, var(--surface-2)); }
.pcol-head { padding: 12px 14px 10px; border-top: 4px solid var(--c); border-radius: 16px 16px 0 0; display: grid; gap: 6px; }
.pcol-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.pcol-title i { width: 9px; height: 9px; border-radius: 99px; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.pcol-prob { font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px; }
.pcol-count { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center;
  background: var(--c); color: #fff; font-size: 11.5px; font-weight: 700; }
.pcol-sum { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.pcol-sum b { font-size: 15px; color: var(--ink); letter-spacing: -.01em; }
.pcol-bar { height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--c) 12%, var(--surface)); overflow: hidden; }
.pcol-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c); transition: width .4s ease; }
.pcol-body { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pcol-empty { margin-top: 4px; padding: 22px 10px; text-align: center; font-size: 12.5px; color: var(--ink-3); border: 1.5px dashed var(--border-strong);
  border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pcol-drop { height: 64px; border-radius: 12px; border: 2px dashed var(--c); background: color-mix(in srgb, var(--c) 8%, transparent);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--c); animation: pdrop .9s ease-in-out infinite alternate; }
@keyframes pdrop { from { opacity: .6; } to { opacity: 1; } }

.pcard { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 10px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05); cursor: grab; display: grid; gap: 6px; transition: box-shadow .18s, transform .18s, border-color .18s; }
.pcard::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.pcard:hover { box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .28); transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 35%, var(--border)); }
.pcard:active { cursor: grabbing; }
.pcard.dragging { opacity: .45; transform: rotate(1.5deg) scale(.98); }
.pcard.just-moved { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.pcard-title { display: flex; align-items: flex-start; gap: 4px; font-weight: 650; font-size: 13.5px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.pcard-title span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pcard-title .icon { flex: none; margin-top: 2px; color: var(--ink-3); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.pcard-title:hover { color: var(--primary); }
.pcard:hover .pcard-title .icon { opacity: 1; transform: none; color: var(--primary); }
.pcard-acc { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); min-width: 0; }
.pcard-acc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-amount { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pcard-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pchip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); }
.pchip .icon { width: 12px; height: 12px; }
.pchip.late { background: var(--bad-50); color: var(--bad-ink); border-color: var(--bad-bd); }
.pchip.warn { background: var(--warn-50); color: var(--warn-ink); border-color: var(--warn-bd); }
.pcol.k-won .pcol-count { background: var(--good); } .pcol.k-lost .pcol-count { background: var(--ink-3); }
.pcol.k-lost .pcard { opacity: .85; }
@media (max-width: 680px) { .pcard-title .icon { opacity: 1; transform: none; } .pipe-nav { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .pcard, .pcol, .pcol-bar i { transition: none; } .pcol-drop { animation: none; } }

/* Barra derecha: pestañas, listas relacionadas e historial */
/* Pestañas solo con ícono; el nombre aparece en un globo al pasar el mouse (o con el teclado) */
.side-tabs { display: flex; width: 100%; }
.side-tabs button { flex: 1; justify-content: center; position: relative; height: 36px; padding: 0 6px; color: var(--ink-3); }
.side-tabs button:hover, .side-tabs button.on { color: var(--ink); }
.side-tabs button .icon { width: 18px; height: 18px; }
.side-tabs .side-count { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 16px; height: 15px; padding: 0 4px; font-size: 10px; }
.side-tabs button[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -2px);
  white-space: nowrap; padding: 5px 9px; border-radius: 7px; background: var(--ink); color: var(--surface); font: 600 12px var(--font);
  box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 5; }
.side-tabs button[data-tip]:hover::after, .side-tabs button[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.side-tabs button:first-child[data-tip]::after { left: 0; transform: translate(0, -2px); }
.side-tabs button:first-child[data-tip]:hover::after, .side-tabs button:first-child[data-tip]:focus-visible::after { transform: translate(0, 0); }
.side-tabs button:last-child[data-tip]::after { left: auto; right: 0; transform: translate(0, -2px); }
.side-tabs button:last-child[data-tip]:hover::after, .side-tabs button:last-child[data-tip]:focus-visible::after { transform: translate(0, 0); }
.side-stack { display: flex; flex-direction: column; gap: 14px; }
.side-count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.side-title .side-add { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--primary); }
.side-title .side-add:hover { background: var(--primary-50); }
.side-list { gap: 2px; }
.side-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; margin: 0 -6px; border-radius: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.side-row:hover { background: var(--surface-2); }
.side-row:hover b { color: var(--primary); }
.side-row-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.side-row-main b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-row-main small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side-row-main .dot { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.side-row-amt { font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stage-tl { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.stage-tl li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 0 0 14px; font-size: 13px; }
.stage-tl li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--border); }
.stage-tl li:last-child::before { display: none; }
.stage-tl .tl-dot { width: 12px; height: 12px; margin-top: 3px; border-radius: 99px; background: var(--surface); border: 2px solid var(--primary); }
.stage-tl li.won .tl-dot { border-color: var(--good); background: var(--good); } .stage-tl li.lost .tl-dot { border-color: var(--ink-3); background: var(--ink-3); }
.role-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }

/* ===================== Etapas dentro de la oportunidad (stepper) ===================== */
.stage-track { margin-bottom: 20px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cur) 9%, var(--surface)) 0%, var(--surface) 55%); }
.stage-track::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--cur), color-mix(in srgb, var(--cur) 25%, transparent)); }
.st-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 20px; padding: 18px 22px 6px; }
.st-now small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.st-now-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.st-now-row b { font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.st-now-dot { width: 10px; height: 10px; border-radius: 99px; background: var(--cur); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cur) 22%, transparent); }
.st-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--cur) 13%, var(--surface)); color: color-mix(in srgb, var(--cur) 80%, var(--ink)); border: 1px solid color-mix(in srgb, var(--cur) 28%, transparent); }
.st-chip.muted { background: var(--surface-2); color: var(--ink-2); border-color: var(--border); }
.st-progress { display: grid; gap: 6px; min-width: 180px; }
.st-progress div { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.st-progress b { font-size: 20px; color: var(--ink); } .st-progress small { color: var(--ink-3); font-size: 12px; }
.st-progress i { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.st-progress i span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--cur) 60%, #fff), var(--cur)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.st-body { display: flex; align-items: center; gap: 18px; padding: 14px 22px 20px; }
.st-steps { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; min-width: 0; }
.st-step { position: relative; flex: 1; min-width: 96px; display: flex; justify-content: center; }
.st-step::before { content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 3px; border-radius: 3px; background: var(--border); z-index: 0; }
.st-step:first-of-type::before { display: none; }
.st-step.done::before, .st-step.cur::before { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, var(--border)), var(--c)); }
.st-step button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; border: 0; background: none; padding: 0 4px; cursor: pointer; font: inherit; color: var(--ink-2); }
.st-dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 99px; font-size: 13px; font-weight: 700; background: var(--surface);
  color: var(--ink-3); border: 2px solid var(--border-strong); transition: transform .15s, box-shadow .2s, background .2s; }
.st-step button:hover .st-dot { transform: scale(1.08); border-color: var(--c); color: var(--c); }
.st-step.done .st-dot { background: var(--c); border-color: var(--c); color: #fff; }
.st-step.done .st-dot .icon { width: 16px; height: 16px; stroke-width: 3; }
.st-step.cur .st-dot { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent), 0 8px 18px -6px var(--c);
  animation: st-pulse 2.4s ease-in-out infinite; }
@keyframes st-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c) 10%, transparent), 0 8px 18px -6px var(--c); } }
.st-label { display: grid; justify-items: center; gap: 1px; text-align: center; }
.st-label b { font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.st-label small { font-size: 11px; color: var(--ink-3); }
.st-step.cur .st-label b { color: var(--ink); font-weight: 700; }
.st-step.done .st-label b { color: var(--ink); }
/* Cierre (Ganada / Perdida): control compacto tipo píldora en el encabezado de la etapa */
.st-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-left: auto; }
.st-outcomes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.st-out { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 99px; border: 0;
  background: transparent; color: var(--ink-2); font: 600 12.5px var(--font); cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.st-out .icon { width: 14px; height: 14px; }
.st-out.k-won:hover { color: var(--good-ink); background: var(--good-50); }
.st-out.k-lost:hover { color: var(--bad-ink); background: var(--bad-50); }
.st-out.k-won.on { background: var(--good); color: #fff; }
.st-out.k-lost.on { background: var(--ink-2); color: var(--surface); }
.stage-track.is-lost .st-steps { opacity: .55; }
@media (max-width: 680px) { .st-head { grid-template-columns: 1fr; } .st-side { margin-left: 0; width: 100%; align-items: flex-start; } }
/* Muchas etapas en una tarjeta angosta (p. ej. 1280 px con el panel derecho): se desplazan en vez de cortarse */
.st-steps { overflow-x: auto; scrollbar-width: none; padding: 11px 6px 8px; }   /* margen: el aro de la etapa actual y el zoom al pasar el mouse no se recortan */
.st-steps::-webkit-scrollbar { display: none; }
.st-step { min-width: 84px; }
@media (max-width: 680px) { .st-steps { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: none; }
  .st-step { min-width: 88px; scroll-snap-align: center; } .st-head { padding: 16px 16px 4px; } .st-body { padding: 12px 16px 16px; } .st-progress { min-width: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .st-step.cur .st-dot { animation: none; } }

/* Correo vinculado */
.mymail-hero { display: flex; align-items: center; gap: 16px; padding: 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
  background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.mymail-hero.ok { background: linear-gradient(135deg, var(--good-50), var(--surface)); }
.mymail-hero.warn { background: linear-gradient(135deg, var(--warn-50), var(--surface)); }
.mymail-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--primary); color: #fff; flex: none; }
.mymail-ico .icon { width: 26px; height: 26px; }
.mymail-hero.ok .mymail-ico { background: var(--good); } .mymail-hero.warn .mymail-ico { background: var(--warn); }
.mymail-txt { flex: 1; min-width: 200px; } .mymail-txt b { font-size: 16px; } .mymail-txt p { margin: 2px 0 0; color: var(--ink-2); }
.mymail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mymail-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); }
.btn.disabled { opacity: .5; pointer-events: none; }
.mail-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: 10px; padding: 8px 10px; }
.mail-fields { display: grid; gap: 8px; }
.mail-mode { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2);
  background: var(--primary-50); border-radius: 10px; padding: 7px 10px; }
.mail-mode span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.mail-sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .mail-sugg small { color: var(--ink-3); }
.mail-rte { min-height: 140px; max-height: 320px; }
.mail-line { display: flex; gap: 6px; align-items: center; min-width: 0; }
.mail-dir { font-weight: 700; font-size: 11.5px; } .mail-dir.entrante { color: var(--good); } .mail-dir.saliente { color: var(--primary); }
.mail-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mail-actions { display: flex; gap: 6px; margin-top: 4px; }
.mail-view { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.mail-head { padding: 8px 10px; background: var(--surface-2); font-size: 12px; color: var(--ink-2); display: grid; gap: 2px; overflow-wrap: anywhere; }
.mail-body { padding: 10px; font-size: 13px; line-height: 1.55; max-height: 360px; overflow: auto; overflow-wrap: anywhere; color: var(--ink); }
.mail-body p { margin: 0 0 8px; } .mail-body blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--border-strong); color: var(--ink-2); }
.mail-foot { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--border); }
.mail-foot a { display: inline-flex; gap: 4px; align-items: center; }

/* ===================== Correo (cliente del buzón personal) ===================== */
.rte-colors { width: auto; gap: 6px; flex-wrap: nowrap; }
.rte-swatch { width: 22px; height: 22px; border-radius: 99px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; padding: 0; }
.rte-swatch:hover { transform: scale(1.15); }
.mc-head { margin-bottom: 14px; }
.mc-off { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mc-off > div { flex: 1; min-width: 220px; }
.mc { display: grid; grid-template-columns: 220px minmax(280px, 380px) minmax(0, 1fr); gap: 14px; height: calc(100vh - 220px); min-height: 520px; }
.mc > .card { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.mc-nav { padding: 12px; gap: 4px; }
.mc-compose-btn { width: 100%; justify-content: center; margin-bottom: 10px; }
.mc-folder { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink-2);
  font: 500 13.5px var(--font); cursor: pointer; text-align: left; }
.mc-folder:hover { background: var(--surface-2); color: var(--ink); }
.mc-folder.on { background: var(--primary-50); color: var(--primary-600); font-weight: 600; }
.mc-folder-name { flex: 1; }
.mc-count { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--ink-3); }
.mc-count.unread { background: var(--primary); color: #fff; }
.mc-nav-foot { margin-top: auto; padding: 10px 6px 0; border-top: 1px solid var(--border); display: grid; gap: 4px; overflow-wrap: anywhere; }
.mc-list-head { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); align-items: center; }
.mc-list-head .input-icon { flex: 1; min-width: 0; }
.mc-folder-select { display: none; }
.mc-items { flex: 1; overflow-y: auto; }
.mc-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--border);
  background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink-2); position: relative; }
.mc-item:hover { background: var(--surface-2); }
.mc-item.on { background: var(--primary-50); }
.mc-item.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
.mc-item-main { display: grid; gap: 2px; min-width: 0; }
.mc-item-top { display: flex; gap: 8px; align-items: baseline; }
.mc-item-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); font-size: 13.5px; }
.mc-item.unread .mc-item-top b, .mc-item.unread .mc-item-subject { font-weight: 700; color: var(--ink); }
.mc-item-top small { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.mc-item.unread .mc-item-top small { color: var(--primary); font-weight: 600; }
.mc-item-subject { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 5px; align-items: center; }
.mc-item-subject > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.mc-item-preview { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-item-flags { display: flex; gap: 6px; align-items: center; color: var(--ink-3); min-height: 0; }
.mc-item-flags:empty { display: none; }
.mc-tag { font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 1px 6px; border-radius: 99px; text-transform: uppercase; flex: none; }
.mc-tag.draft { background: var(--warn-50); color: var(--warn-ink); } .mc-tag.imp { background: var(--bad-50); color: var(--bad-ink); }
.mc-tag.crm { background: var(--primary-50); color: var(--primary-600); }
.mc-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); }
.mc-pager-in { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.mc-empty { display: grid; place-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--ink-3); }
.mc-empty .icon { width: 34px; height: 34px; opacity: .5; }
.mc-pane-empty { flex: 1; }
.mc-back { display: none; align-self: flex-start; }
.mc-read { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 18px 20px 0; gap: 10px; overflow-y: auto; }
.mc-subject { font-size: 20px; margin: 0; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mc-crm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.mc-crm > span { display: inline-flex; gap: 5px; align-items: center; }
.mc-from { display: flex; gap: 12px; align-items: flex-start; }
.mc-from-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mc-date { white-space: nowrap; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mc-actions-grp { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-actions .btn.on { background: var(--primary-50); color: var(--primary-600); }
.mc-log { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.mc-atts { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-att { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  font-size: 12.5px; color: var(--ink); text-decoration: none; max-width: 100%; }
.mc-att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.mc-att small { color: var(--ink-3); }
a.mc-att:hover { border-color: var(--primary); color: var(--primary); }
.mc-att button { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 16px; line-height: 1; padding: 0 2px; }
.mc-img-bar { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2);
  background: var(--surface-2); border-radius: 10px; padding: 7px 10px; }
.mc-img-bar span { display: inline-flex; gap: 6px; align-items: center; }
.mc-frame { flex: 1; min-height: 360px; width: 100%; border: 1px solid var(--border); border-radius: 12px 12px 0 0; background: #fff; margin-bottom: 0; }
.mc-compose { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow-y: auto; }
.mc-compose-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; }
.mc-compose-head h2 { margin: 0; font-size: 17px; }
.mc-rcpt { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 8px 18px; border-top: 1px solid var(--border); cursor: text; }
.mc-rcpt label { width: 42px; flex: none; padding-top: 5px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.mc-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.mc-chips input { flex: 1; min-width: 160px; border: 0; outline: none; background: none; font: inherit; color: var(--ink); padding: 4px 0; }
.mc-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 99px; background: var(--primary-50);
  color: var(--primary-600); font-size: 12.5px; font-weight: 600; max-width: 100%; }
.mc-chip span { overflow: hidden; text-overflow: ellipsis; }
.mc-chip.bad { background: var(--bad-50); color: var(--bad-ink); }
.mc-chip button { width: 18px; height: 18px; border: 0; border-radius: 99px; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; }
.mc-chip button:hover { background: rgba(0,0,0,.08); }
.mc-sugg { position: absolute; z-index: 30; left: 70px; right: 18px; top: calc(100% - 4px); background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 4px; max-height: 280px; overflow-y: auto; }
.mc-sugg button { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; font: inherit; color: var(--ink); }
.mc-sugg button span { color: var(--ink-2); font-size: 12.5px; } .mc-sugg button small { grid-column: 1 / -1; color: var(--ink-3); font-size: 11.5px; }
.mc-sugg button.on, .mc-sugg button:hover { background: var(--primary-50); }
.mc-subject-row { padding: 8px 18px; border-top: 1px solid var(--border); }
.mc-subject-row .input { border: 0; padding-left: 0; font-size: 15px; font-weight: 600; box-shadow: none; }
.mc-editor-wrap { padding: 0 18px 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.mc-editor { min-height: 240px; max-height: none; }
.mc-editor-wrap .composer-box .ed-bar { position: sticky; top: 0; z-index: 2; }
.mc-editor:empty::before { content: attr(data-placeholder); color: var(--ink-3); }
.mc-quote { margin: 0 18px 10px; border: 1px solid var(--border); border-radius: 10px; }
.mc-quote summary { cursor: pointer; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); }
.mc-quote iframe { width: 100%; height: 260px; border: 0; border-top: 1px solid var(--border); background: #fff; border-radius: 0 0 10px 10px; }
.mc-attach { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 18px 10px; padding: 10px; border: 1.5px dashed var(--border-strong); border-radius: 12px; }
.mc-attach.drag { border-color: var(--primary); background: var(--primary-50); }
.mc-crm-pick { margin: 0 18px 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); display: grid; gap: 8px; }
.mc-crm-title { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.mc-compose-foot { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface); margin-top: auto; }
@media (max-width: 1280px) { .mc { grid-template-columns: 64px minmax(260px, 340px) minmax(0, 1fr); }
  .mc-nav { padding: 10px 6px; } .mc-folder-name, .mc-nav-foot, .mc-compose-btn span, .mc-only { display: none; } .mc-folder { justify-content: center; position: relative; }
  .mc-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 16px; font-size: 10px; } .mc-compose-btn { padding: 0; } }
@media (max-width: 900px) {
  .mc { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .mc > .mc-nav { display: none; } .mc-folder-select { display: block; max-width: 160px; }
  .mailc.mc-view-list .mc-pane { display: none; } .mailc.mc-view-pane .mc-list { display: none; }
  .mc-list { height: calc(100vh - 230px); min-height: 420px; }
  .mc-back { display: inline-flex; }
  .mc-frame { min-height: 60vh; }
  .mc-read { padding: 14px 14px 0; } .mc-rcpt, .mc-subject-row, .mc-editor-wrap, .mc-compose-head, .mc-compose-foot { padding-left: 12px; padding-right: 12px; }
  .mc-quote, .mc-attach, .mc-crm-pick { margin-left: 12px; margin-right: 12px; }
  .mc-head .actions { display: none; }
}
/* Encabezado de etapa compacto (las columnas se reparten el ancho) */
.pcol-head { padding: 12px 12px 10px; }
.pcol-title { min-width: 0; gap: 6px; }
.pcol-title > span:not(.pcol-prob):not(.pcol-count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcol-prob, .pcol-count { flex: none; }
.pcol-sum { display: grid; gap: 0; }
.pcol-sum b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcol-sum span { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcol-body { padding: 4px 8px 12px; }
/* La tarjeta del pipeline es un enlace, pero sin subrayado (la flecha indica que se abre) */
.pcard-title, .pcard-title:hover, .pcard-title:focus, .pcard-title span { text-decoration: none !important; }

/* Mensajes sin leer (conversaciones de oportunidades) */
.nav a .nav-grow { flex: 1; }
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
  background: #f59e0b; color: #1f1300; box-shadow: 0 0 0 2px rgba(0,0,0,.08); }
.unread-card { margin-bottom: 20px; border-left: 4px solid var(--primary); background: linear-gradient(90deg, var(--primary-50), var(--surface) 45%); }
.unread-pill { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 8px; margin-left: 6px; border-radius: 99px; background: var(--primary);
  color: #fff; font-size: 12px; font-weight: 700; vertical-align: middle; }
.unread-list { display: grid; }
.unread-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border);
  text-decoration: none; color: var(--ink); }
.unread-item:hover { background: var(--surface-2); }
.unread-count { width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; font-size: 13px; }
.unread-main { display: grid; gap: 1px; min-width: 0; }
.unread-main > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread-main > small { color: var(--ink-3); font-size: 12px; }
.unread-last { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread-last b { color: var(--ink); font-weight: 600; }
.unread-when { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.conv-new { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--primary); padding: 1px 7px; border-radius: 99px; }
.conv-item.is-new { background: linear-gradient(90deg, var(--primary-50), transparent 70%); }
@media (max-width: 680px) { .unread-item { grid-template-columns: 28px minmax(0, 1fr); padding: 10px 14px; } .unread-when { grid-column: 2; } }

/* ===================== Diseño de la barra lateral (Configuración → General → Diseño) =====================
   Capa decorativa detrás del menú, con trazos blancos de baja opacidad: funciona con cualquier color principal. */
.sidebar { isolation: isolate; }
.sb-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.sb-art::before, .sb-art::after { content: ""; position: absolute; inset: 0; }
.sb-art-ondas .sidebar > .sb-art::before { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 260 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%0A%3Cpath d=%22M0 640 C70 600 120 690 190 650 S260 600 260 600 V900 H0Z%22 fill=%22white%22 fill-opacity=%22.05%22/%3E%0A%3Cpath d=%22M0 700 C60 660 140 750 200 705 S260 680 260 680 V900 H0Z%22 fill=%22white%22 fill-opacity=%22.06%22/%3E%0A%3Cpath d=%22M0 770 C80 730 130 810 200 775 S260 750 260 750 V900 H0Z%22 fill=%22white%22 fill-opacity=%22.07%22/%3E%0A%3Cpath d=%22M0 835 C70 805 150 870 260 820 V900 H0Z%22 fill=%22white%22 fill-opacity=%22.08%22/%3E%0A%3Cpath d=%22M-10 610 C60 570 120 660 190 620 S270 570 270 570%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%22.14%22 stroke-width=%221.2%22/%3E%0A%3Cpath d=%22M-10 680 C70 640 130 720 200 680 S270 650 270 650%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%22.10%22 stroke-width=%221%22/%3E%0A%3Cpath d=%22M-20 90 C60 40 140 140 280 60%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%22.08%22 stroke-width=%221%22/%3E%0A%3Cpath d=%22M-20 120 C70 70 150 170 280 95%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%221%22/%3E%0A%3C/svg%3E") bottom center / 100% auto no-repeat; }
.sb-art-circulos .sidebar > .sb-art::before { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 260 900%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Ccircle cx=%22250%22 cy=%2270%22 r=%2230%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.130%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%22250%22 cy=%2270%22 r=%2258%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.115%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%22250%22 cy=%2270%22 r=%2286%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.100%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%22250%22 cy=%2270%22 r=%22114%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.085%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%22250%22 cy=%2270%22 r=%22142%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.070%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%22250%22 cy=%2270%22 r=%22170%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.055%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%22250%22 cy=%2270%22 r=%22198%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.040%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%220%22 cy=%22840%22 r=%2250%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.120%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%220%22 cy=%22840%22 r=%2282%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.108%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%220%22 cy=%22840%22 r=%22114%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.096%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%220%22 cy=%22840%22 r=%22146%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.084%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%220%22 cy=%22840%22 r=%22178%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.072%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%220%22 cy=%22840%22 r=%22210%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.060%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%220%22 cy=%22840%22 r=%22242%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.048%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%220%22 cy=%22840%22 r=%22274%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.036%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%22250%22 cy=%2270%22 r=%2214%22 fill=%22white%22 fill-opacity=%22.10%22/%3E%3Ccircle cx=%220%22 cy=%22840%22 r=%2224%22 fill=%22white%22 fill-opacity=%22.08%22/%3E%3C/svg%3E") center / cover no-repeat; }
.sb-art-geometrico .sidebar > .sb-art::before { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 260 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cpolygon points=%22-20,596 36,590 -20,672%22 fill=%22white%22 fill-opacity=%220.021%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,590 36,663 -20,672%22 fill=%22white%22 fill-opacity=%220.012%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,590 92,598 36,663%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,598 92,649 36,663%22 fill=%22white%22 fill-opacity=%220.021%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,598 148,606 92,649%22 fill=%22white%22 fill-opacity=%220.030%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,606 148,657 92,649%22 fill=%22white%22 fill-opacity=%220.039%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,606 204,587 148,657%22 fill=%22white%22 fill-opacity=%220.021%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,587 204,664 148,657%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,587 260,588 204,664%22 fill=%22white%22 fill-opacity=%220.012%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22260,588 260,647 204,664%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22-20,672 36,663 -20,722%22 fill=%22white%22 fill-opacity=%220.036%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,663 36,712 -20,722%22 fill=%22white%22 fill-opacity=%220.058%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,663 92,649 36,712%22 fill=%22white%22 fill-opacity=%220.025%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,649 92,707 36,712%22 fill=%22white%22 fill-opacity=%220.014%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,649 148,657 92,707%22 fill=%22white%22 fill-opacity=%220.058%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,657 148,708 92,707%22 fill=%22white%22 fill-opacity=%220.058%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,657 204,664 148,708%22 fill=%22white%22 fill-opacity=%220.025%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,664 204,719 148,708%22 fill=%22white%22 fill-opacity=%220.036%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,664 260,647 204,719%22 fill=%22white%22 fill-opacity=%220.014%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22260,647 260,719 204,719%22 fill=%22white%22 fill-opacity=%220.058%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22-20,722 36,712 -20,768%22 fill=%22white%22 fill-opacity=%220.017%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,712 36,773 -20,768%22 fill=%22white%22 fill-opacity=%220.067%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,712 92,707 36,773%22 fill=%22white%22 fill-opacity=%220.017%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,707 92,768 36,773%22 fill=%22white%22 fill-opacity=%220.067%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,707 148,708 92,768%22 fill=%22white%22 fill-opacity=%220.029%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,708 148,783 92,768%22 fill=%22white%22 fill-opacity=%220.055%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,708 204,719 148,783%22 fill=%22white%22 fill-opacity=%220.067%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,719 204,779 148,783%22 fill=%22white%22 fill-opacity=%220.055%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,719 260,719 204,779%22 fill=%22white%22 fill-opacity=%220.042%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22260,719 260,767 204,779%22 fill=%22white%22 fill-opacity=%220.055%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22-20,768 36,773 -20,852%22 fill=%22white%22 fill-opacity=%220.077%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,773 36,844 -20,852%22 fill=%22white%22 fill-opacity=%220.062%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,773 92,768 36,844%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,768 92,829 36,844%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,768 148,783 92,829%22 fill=%22white%22 fill-opacity=%220.034%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,783 148,833 92,829%22 fill=%22white%22 fill-opacity=%220.034%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,783 204,779 148,833%22 fill=%22white%22 fill-opacity=%220.034%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,779 204,846 148,833%22 fill=%22white%22 fill-opacity=%220.019%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,779 260,767 204,846%22 fill=%22white%22 fill-opacity=%220.077%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22260,767 260,846 204,846%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22-20,852 36,844 -20,904%22 fill=%22white%22 fill-opacity=%220.086%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,844 36,887 -20,904%22 fill=%22white%22 fill-opacity=%220.070%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,844 92,829 36,887%22 fill=%22white%22 fill-opacity=%220.054%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,829 92,904 36,887%22 fill=%22white%22 fill-opacity=%220.070%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,829 148,833 92,904%22 fill=%22white%22 fill-opacity=%220.054%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,833 148,904 92,904%22 fill=%22white%22 fill-opacity=%220.086%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,833 204,846 148,904%22 fill=%22white%22 fill-opacity=%220.022%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,846 204,898 148,904%22 fill=%22white%22 fill-opacity=%220.022%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,846 260,846 204,898%22 fill=%22white%22 fill-opacity=%220.086%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22260,846 260,887 204,898%22 fill=%22white%22 fill-opacity=%220.070%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22249.4,77.0 220.0,94.0 190.6,77.0 190.6,43.0 220.0,26.0 249.4,43.0%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.12%22 stroke-width=%221%22/%3E%3Cpolygon points=%22269.1,129.0 250.0,140.0 230.9,129.0 230.9,107.0 250.0,96.0 269.1,107.0%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.09%22 stroke-width=%221%22/%3E%3Cpolygon points=%22199.9,128.0 186.0,136.0 172.1,128.0 172.1,112.0 186.0,104.0 199.9,112.0%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.07%22 stroke-width=%221%22/%3E%3Cpolygon points=%22245.4,181.0 235.0,187.0 224.6,181.0 224.6,169.0 235.0,163.0 245.4,169.0%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.06%22 stroke-width=%221%22/%3E%3C/svg%3E") bottom center / 100% auto no-repeat; }
.sb-art-puntos .sidebar > .sb-art::before { background-image: radial-gradient(rgba(255,255,255,.22) 1.1px, transparent 1.3px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 35%, transparent 70%); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 35%, transparent 70%); }
.sb-art-puntos .sidebar > .sb-art::after { background: radial-gradient(140px 140px at 85% 6%, rgba(255,255,255,.10), transparent 70%); }
.sb-art-aurora .sidebar > .sb-art::before { inset: -20%; filter: blur(28px); opacity: .8;
  background: radial-gradient(45% 30% at 15% 85%, color-mix(in srgb, #22d3ee 70%, transparent), transparent 70%),
              radial-gradient(40% 28% at 85% 70%, color-mix(in srgb, #a855f7 65%, transparent), transparent 70%),
              radial-gradient(38% 25% at 70% 12%, color-mix(in srgb, #f472b6 45%, transparent), transparent 70%);
  animation: sb-aurora 26s ease-in-out infinite alternate; }
.sb-art-aurora .sidebar > .sb-art::after { background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 100%); }
@keyframes sb-aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4%, -3%, 0) scale(1.06); } 100% { transform: translate3d(-4%, 3%, 0) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .sb-art-aurora .sidebar > .sb-art::before { animation: none; } }
/* Vista previa en Configuración (mismas capas a escala) */
.art-picks { display: flex; gap: 10px; flex-wrap: wrap; }
.art-pick { display: grid; gap: 6px; justify-items: center; border: 0; background: none; padding: 0; cursor: pointer; font: 600 12px var(--font); color: var(--ink-2); }
.art-pick .art-demo { position: relative; width: 74px; height: 120px; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 70%, #0b1030) 0%, #11152e 100%); box-shadow: 0 0 0 1px var(--border-strong); transition: box-shadow .15s, transform .15s; }
.art-pick .art-demo .sb-art { border-radius: 12px; filter: brightness(2.1) saturate(1.2); }
.art-pick .art-demo::after { content: ""; position: absolute; left: 10px; right: 10px; top: 18px; height: 40px; z-index: 1;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 4px, transparent 4px 10px); border-radius: 3px; opacity: .55; }
.art-pick:hover .art-demo { transform: translateY(-2px); }
.art-pick.on .art-demo { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.art-pick.on { color: var(--primary); }
.art-pick .art-demo.art-ondas .sb-art::before { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 260 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%0A%3Cpath d=%22M0 640 C70 600 120 690 190 650 S260 600 260 600 V900 H0Z%22 fill=%22white%22 fill-opacity=%22.05%22/%3E%0A%3Cpath d=%22M0 700 C60 660 140 750 200 705 S260 680 260 680 V900 H0Z%22 fill=%22white%22 fill-opacity=%22.06%22/%3E%0A%3Cpath d=%22M0 770 C80 730 130 810 200 775 S260 750 260 750 V900 H0Z%22 fill=%22white%22 fill-opacity=%22.07%22/%3E%0A%3Cpath d=%22M0 835 C70 805 150 870 260 820 V900 H0Z%22 fill=%22white%22 fill-opacity=%22.08%22/%3E%0A%3Cpath d=%22M-10 610 C60 570 120 660 190 620 S270 570 270 570%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%22.14%22 stroke-width=%221.2%22/%3E%0A%3Cpath d=%22M-10 680 C70 640 130 720 200 680 S270 650 270 650%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%22.10%22 stroke-width=%221%22/%3E%0A%3Cpath d=%22M-20 90 C60 40 140 140 280 60%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%22.08%22 stroke-width=%221%22/%3E%0A%3Cpath d=%22M-20 120 C70 70 150 170 280 95%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%221%22/%3E%0A%3C/svg%3E") bottom center / 100% auto no-repeat; }
.art-pick .art-demo.art-circulos .sb-art::before { background: radial-gradient(circle at 100% 0, transparent 0, transparent 9.4px, rgba(255,255,255,0.22) 9.5px 10.6px, transparent 10.8px, transparent 18.4px, rgba(255,255,255,0.22) 18.5px 19.6px, transparent 19.8px, transparent 27.4px, rgba(255,255,255,0.22) 27.5px 28.6px, transparent 28.8px, transparent 36.4px, rgba(255,255,255,0.22) 36.5px 37.6px, transparent 37.8px, transparent 45.4px, rgba(255,255,255,0.22) 45.5px 46.6px, transparent 46.8px, transparent 100%), radial-gradient(circle at 0 100%, transparent 0, transparent 13.4px, rgba(255,255,255,0.18) 13.5px 14.6px, transparent 14.8px, transparent 24.4px, rgba(255,255,255,0.18) 24.5px 25.6px, transparent 25.8px, transparent 35.4px, rgba(255,255,255,0.18) 35.5px 36.6px, transparent 36.8px, transparent 46.4px, rgba(255,255,255,0.18) 46.5px 47.6px, transparent 47.8px, transparent 57.4px, rgba(255,255,255,0.18) 57.5px 58.6px, transparent 58.8px, transparent 100%); filter: none; }
.art-pick .art-demo.art-geometrico .sb-art::before { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 260 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cpolygon points=%22-20,596 36,590 -20,672%22 fill=%22white%22 fill-opacity=%220.021%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,590 36,663 -20,672%22 fill=%22white%22 fill-opacity=%220.012%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,590 92,598 36,663%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,598 92,649 36,663%22 fill=%22white%22 fill-opacity=%220.021%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,598 148,606 92,649%22 fill=%22white%22 fill-opacity=%220.030%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,606 148,657 92,649%22 fill=%22white%22 fill-opacity=%220.039%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,606 204,587 148,657%22 fill=%22white%22 fill-opacity=%220.021%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,587 204,664 148,657%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,587 260,588 204,664%22 fill=%22white%22 fill-opacity=%220.012%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22260,588 260,647 204,664%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22-20,672 36,663 -20,722%22 fill=%22white%22 fill-opacity=%220.036%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,663 36,712 -20,722%22 fill=%22white%22 fill-opacity=%220.058%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,663 92,649 36,712%22 fill=%22white%22 fill-opacity=%220.025%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,649 92,707 36,712%22 fill=%22white%22 fill-opacity=%220.014%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,649 148,657 92,707%22 fill=%22white%22 fill-opacity=%220.058%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,657 148,708 92,707%22 fill=%22white%22 fill-opacity=%220.058%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,657 204,664 148,708%22 fill=%22white%22 fill-opacity=%220.025%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,664 204,719 148,708%22 fill=%22white%22 fill-opacity=%220.036%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,664 260,647 204,719%22 fill=%22white%22 fill-opacity=%220.014%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22260,647 260,719 204,719%22 fill=%22white%22 fill-opacity=%220.058%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22-20,722 36,712 -20,768%22 fill=%22white%22 fill-opacity=%220.017%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,712 36,773 -20,768%22 fill=%22white%22 fill-opacity=%220.067%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,712 92,707 36,773%22 fill=%22white%22 fill-opacity=%220.017%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,707 92,768 36,773%22 fill=%22white%22 fill-opacity=%220.067%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,707 148,708 92,768%22 fill=%22white%22 fill-opacity=%220.029%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,708 148,783 92,768%22 fill=%22white%22 fill-opacity=%220.055%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,708 204,719 148,783%22 fill=%22white%22 fill-opacity=%220.067%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,719 204,779 148,783%22 fill=%22white%22 fill-opacity=%220.055%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,719 260,719 204,779%22 fill=%22white%22 fill-opacity=%220.042%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22260,719 260,767 204,779%22 fill=%22white%22 fill-opacity=%220.055%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22-20,768 36,773 -20,852%22 fill=%22white%22 fill-opacity=%220.077%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,773 36,844 -20,852%22 fill=%22white%22 fill-opacity=%220.062%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,773 92,768 36,844%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,768 92,829 36,844%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,768 148,783 92,829%22 fill=%22white%22 fill-opacity=%220.034%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,783 148,833 92,829%22 fill=%22white%22 fill-opacity=%220.034%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,783 204,779 148,833%22 fill=%22white%22 fill-opacity=%220.034%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,779 204,846 148,833%22 fill=%22white%22 fill-opacity=%220.019%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,779 260,767 204,846%22 fill=%22white%22 fill-opacity=%220.077%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22260,767 260,846 204,846%22 fill=%22white%22 fill-opacity=%220.048%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22-20,852 36,844 -20,904%22 fill=%22white%22 fill-opacity=%220.086%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,844 36,887 -20,904%22 fill=%22white%22 fill-opacity=%220.070%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2236,844 92,829 36,887%22 fill=%22white%22 fill-opacity=%220.054%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,829 92,904 36,887%22 fill=%22white%22 fill-opacity=%220.070%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2292,829 148,833 92,904%22 fill=%22white%22 fill-opacity=%220.054%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,833 148,904 92,904%22 fill=%22white%22 fill-opacity=%220.086%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22148,833 204,846 148,904%22 fill=%22white%22 fill-opacity=%220.022%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,846 204,898 148,904%22 fill=%22white%22 fill-opacity=%220.022%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22204,846 260,846 204,898%22 fill=%22white%22 fill-opacity=%220.086%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22260,846 260,887 204,898%22 fill=%22white%22 fill-opacity=%220.070%22 stroke=%22white%22 stroke-opacity=%22.06%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%22249.4,77.0 220.0,94.0 190.6,77.0 190.6,43.0 220.0,26.0 249.4,43.0%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.12%22 stroke-width=%221%22/%3E%3Cpolygon points=%22269.1,129.0 250.0,140.0 230.9,129.0 230.9,107.0 250.0,96.0 269.1,107.0%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.09%22 stroke-width=%221%22/%3E%3Cpolygon points=%22199.9,128.0 186.0,136.0 172.1,128.0 172.1,112.0 186.0,104.0 199.9,112.0%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.07%22 stroke-width=%221%22/%3E%3Cpolygon points=%22245.4,181.0 235.0,187.0 224.6,181.0 224.6,169.0 235.0,163.0 245.4,169.0%22 fill=%22none%22 stroke=%22white%22 stroke-opacity=%220.06%22 stroke-width=%221%22/%3E%3C/svg%3E") bottom center / 100% auto no-repeat; }
.art-pick .art-demo.art-puntos .sb-art::before { background-image: radial-gradient(rgba(255,255,255,.3) 1px, transparent 1.2px); background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 75%); mask-image: linear-gradient(to top, #000, transparent 75%); }
.art-pick .art-demo.art-aurora .sb-art::before { inset: -20%; filter: blur(10px); opacity: .7;
  background: radial-gradient(45% 30% at 15% 85%, #22d3eeaa, transparent 70%), radial-gradient(40% 28% at 85% 70%, #a855f7a6, transparent 70%),
              radial-gradient(38% 25% at 70% 12%, #f472b673, transparent 70%); }

/* Contacto: copiar correo y varios teléfonos con tipo */
.in-copy { display: flex; gap: 6px; }
.in-copy .input { flex: 1; min-width: 0; }
.phones { display: grid; gap: 8px; }
.phones { container-type: inline-size; }
.phone-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 6px; align-items: center; }   /* columna derecha, junto al correo */
.phone-row .btn-icon { width: 30px; }
/* Columna angosta (p. ej. 1280 px con el panel derecho): tipo arriba y número a todo el ancho, para que no se corte */
@container (max-width: 290px) {
  .phone-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .phone-row select { grid-column: 1 / -1; }
  .phone-row + .phone-row { margin-top: 6px; }
}
.phones > .link-btn { justify-self: start; display: inline-flex; align-items: center; gap: 4px; }
.owner-created { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.owner-created > .icon { flex: none; margin-top: 3px; color: var(--ink-3); }
.owner-by { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.owner-by .avatar.xs { flex: none; }
.owner-by .avatar.web { background: var(--primary-50); color: var(--primary-600); display: inline-grid; place-items: center; }


/* Fichas en modo lectura: el formulario va dentro de <fieldset :disabled="!editing">; «Editar» lo activa */
.fs-plain { border: 0; margin: 0; padding: 0; min-width: 0; }
.fs-plain:disabled .input { background: var(--surface-2); border-color: transparent; color: var(--ink); -webkit-text-fill-color: var(--ink);
  opacity: 1; cursor: default; box-shadow: none; }
.fs-plain:disabled select.input { appearance: none; -webkit-appearance: none; background-image: none; }
.fs-plain:disabled .input::placeholder { color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); opacity: .7; }
.fs-plain:disabled .check { cursor: default; }
.side-card select.input:disabled { background: var(--surface-2); border-color: transparent; color: var(--ink); -webkit-text-fill-color: var(--ink);
  opacity: 1; appearance: none; -webkit-appearance: none; background-image: none; }

/* Comercial / propietario con su foto */
.who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.who > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.who-select { position: relative; }
.who-select > .avatar { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.who-select > select.input { padding-left: 40px; }
.who-select.no-sel > select.input { padding-left: 12px; }

/* Informe de IA por temas */
.ai-report { margin-top: 12px; }
.ai-head { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 14px; padding: 12px; border-radius: 14px;
  background: var(--surface-2); position: relative; --tone: var(--primary); }
.ai-head.tone-good { --tone: var(--good); } .ai-head.tone-warn { --tone: var(--warn); } .ai-head.tone-bad { --tone: var(--bad); }
.ai-ring { width: 84px; height: 84px; transform: rotate(-90deg); grid-row: 1; grid-column: 1; }
.ai-ring-bg { fill: none; stroke: var(--border); stroke-width: 8; }
.ai-ring-fg { fill: none; stroke: var(--tone); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.ai-head-num { grid-row: 1; grid-column: 1; display: grid; place-items: center; }
.ai-head-num b { font-size: 24px; font-weight: 800; color: var(--tone); letter-spacing: -.5px; white-space: nowrap; max-width: 62px; }
.ai-head-num b.len-4 { font-size: 19px; } .ai-head-num b.len-5 { font-size: 16px; } .ai-head-num b.len-6 { font-size: 13px; }   /* 100 %, 263 %, 1250 %… dentro del anillo */
.ai-head-txt { display: grid; gap: 3px; min-width: 0; }
.ai-head-txt > b { font-size: 14px; line-height: 1.3; }
.ai-head-txt small { font-size: 12px; line-height: 1.4; }
.ai-summary { font-size: 13.5px; line-height: 1.55; margin: 12px 0; }
.ai-themes { display: grid; gap: 10px; margin-bottom: 10px; }
.ai-theme { border: 1px solid var(--border); border-left: 3px solid var(--tone); border-radius: 10px; padding: 9px 11px; --tone: var(--primary); }
.ai-theme.is-bien { --tone: var(--good); } .ai-theme.is-atencion { --tone: var(--warn); } .ai-theme.is-riesgo { --tone: var(--bad); }
.ai-theme-top { display: flex; align-items: center; gap: 8px; }
.ai-theme-title { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; }
.ai-theme-chip { font-size: 11px; padding: 1px 7px; border-radius: 99px; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.ai-theme-pct { font-size: 15px; color: var(--tone); min-width: 42px; text-align: right; }
.ai-theme-bar { height: 5px; border-radius: 99px; background: var(--surface-2); margin: 6px 0 7px; overflow: hidden; }
.ai-theme-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--tone); }
.ai-theme-find { font-size: 12.5px; margin: 0; line-height: 1.5; }
.ai-theme-act { font-size: 12.5px; margin: 4px 0 0; color: var(--ink-2); line-height: 1.5; }
.ai-theme-act > span:first-child { color: var(--tone); font-weight: 700; }
.ai-head-txt { grid-column: 2; grid-row: 1; }
.st-now-row b { flex: 1 1 150px; min-width: 0; }   /* el punto de color no se separa del nombre */
.linked .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* Embudo del dashboard: dibujo por etapa con su color y barra animada */
.funnel { display: grid; gap: 12px; }
.fn-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 11px; align-items: center; }
.fn-ico { position: relative; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--c);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--surface)), color-mix(in srgb, var(--c) 8%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); box-shadow: 0 4px 12px -6px var(--c); }
.fn-ico .icon { width: 16px; height: 16px; }
.fn-ico em { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; border-radius: 99px; font: 700 9px/15px var(--font);
  font-style: normal; text-align: center; color: #fff; background: var(--c); box-shadow: 0 0 0 2px var(--surface); }
.fn-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fn-top > b { font-weight: 600; }
.fn-prob { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; color: color-mix(in srgb, var(--c) 75%, var(--ink));
  background: color-mix(in srgb, var(--c) 12%, transparent); }
.fn-val { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; } .fn-val b { color: var(--ink); }
.fn-bar { height: 8px; border-radius: 99px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.fn-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  transform-origin: left; animation: fn-grow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); }
.fn-row.is-empty .fn-ico { filter: saturate(.75); opacity: .85; }
.fn-row.is-empty .fn-top > b { color: var(--ink-2); }
@keyframes fn-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .fn-bar > i { animation: none; } }

/* Pipeline: dibujo de la etapa en el encabezado de la columna */
.pcol-ico { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.pcol-ico .icon { width: 15px; height: 15px; }
/* Configuración → Pipelines: selector de dibujo */
.ico-pick { position: relative; }
.ico-cur { width: 40px; height: 40px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--border)); cursor: pointer;
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); display: grid; place-items: center; position: relative; }
.ico-cur small { position: absolute; bottom: -7px; font-size: 9px; padding: 0 4px; border-radius: 6px; background: var(--surface); color: var(--ink-3); border: 1px solid var(--border); }
.ico-pop { position: absolute; z-index: 30; top: 46px; left: 0; width: 248px; padding: 10px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.ico-auto { width: 100%; margin-bottom: 8px; padding: 6px; border-radius: 8px; border: 1px dashed var(--border-strong); background: none; cursor: pointer; font: 600 12px var(--font); color: var(--ink-2); }
.ico-auto.on { border-style: solid; border-color: var(--primary); color: var(--primary); }
.ico-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ico-grid button { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.ico-grid button:hover { color: var(--c); border-color: var(--c); }
.ico-grid button.on { color: #fff; background: var(--c); border-color: var(--c); }
.ico-grid .icon { width: 17px; height: 17px; }
/* Reunión: presencial o virtual (Teams) */
.meet-box { display: grid; gap: 10px; }
.meet-mode { width: 100%; } .meet-mode button { flex: 1; justify-content: center; gap: 6px; }
.meet-virtual { display: grid; gap: 10px; }
.meet-opts { display: grid; gap: 6px; }
.meet-opts .check { align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.meet-opts .check span { display: grid; gap: 2px; } .meet-opts .check small { color: var(--ink-3); font-size: 11.5px; }
.meet-opts .check:has(input:checked) { border-color: var(--primary); background: var(--primary-50, var(--surface-2)); }
.meet-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.meet-chip { padding: 1px 8px; border-radius: 99px; font-weight: 600; font-size: 11px; background: var(--surface-2); color: var(--ink-2); }
.meet-chip.virtual { background: #ecebfa; color: #4b53bc; }
:root[data-theme="dark"] .meet-chip.virtual { background: #2a2c55; color: #b9bdf5; }
.meet-join { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 99px; background: #4b53bc; color: #fff !important;
  font-weight: 600; font-size: 11.5px; text-decoration: none !important; }
.meet-join:hover { background: #3f479f; }

/* Reunión: contacto principal fijo como invitado */
.att-fixed { display: flex; flex-wrap: wrap; gap: 6px; }
.att-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; font-size: 12.5px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.att-chip .icon { color: var(--primary); width: 13px; height: 13px; }
.att-chip small { color: var(--ink-3); }
.att-chip em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 99px; color: var(--primary); background: var(--primary-50, var(--surface-2)); }
/* Estado de la actividad: marca aparte, junto a Guardar */
.ap-foot { align-items: center; flex-wrap: wrap; }
.done-toggle { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 6px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font: 600 12.5px var(--font); transition: all .15s; }
.done-box { width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; border: 1.5px solid var(--border-strong); color: transparent; }
.done-box .icon { width: 12px; height: 12px; }
.done-toggle:hover { border-color: var(--good); color: var(--good-ink); }
.done-toggle.on { background: var(--good-50); border-color: var(--good-bd); color: var(--good-ink); }
.done-toggle.on .done-box { background: var(--good); border-color: var(--good); color: #fff; }

/* Dashboard: análisis comercial del equipo */
.team-ai { margin-bottom: 20px; }
.team-ai .card-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.team-ai-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.team-ai-main .ai-themes { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.team-ai-side { display: grid; gap: 12px; padding-left: 24px; border-left: 1px solid var(--border); }
.team-leader { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 16%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); }
.team-leader > div { display: grid; gap: 2px; min-width: 0; }
.team-leader small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #b45309; }
:root[data-theme="dark"] .team-leader small { color: #fbbf24; }
.team-leader > div > b { font-size: 15px; }
.team-leader > div > span { font-size: 12.5px; color: var(--ink-2); }
.team-dest { margin: 0; line-height: 1.5; color: var(--ink-2); }
.team-rank { font-size: 12.5px; } .team-rank th { font-size: 10.5px; }
.team-rank tr.is-lead td { background: color-mix(in srgb, #f59e0b 7%, transparent); font-weight: 600; }
.share { display: inline-grid; grid-template-columns: 54px auto; align-items: center; gap: 6px; }
.share > i { display: block; height: 6px; border-radius: 99px; background: var(--primary); max-width: 54px; }
.tx-warn { color: var(--warn-ink); }
@media (max-width: 1100px) { .team-ai-body { grid-template-columns: minmax(0, 1fr); } .team-ai-side { min-width: 0; }
  .team-ai-side .team-rank { display: block; overflow-x: auto; } .team-ai-side { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 16px; } }

/* Metas: encabezado de cada comercial (nombre sin cortes; acciones compactas que bajan de línea si no caben) */
.goal-head { flex-wrap: wrap; gap: 10px; }
.goal-head .person { flex: 1 1 160px; min-width: 0; }
.goal-head .person b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.goal-head-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.goal-del { color: var(--ink-3); }
.goal-del:hover { color: var(--bad); border-color: var(--bad-bd); background: var(--bad-50); }
.goal-x { width: 26px; height: 26px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  display: inline-grid; place-items: center; opacity: .65; transition: all .15s; }
.goal-x .icon { width: 14px; height: 14px; }
.goal-x:hover { opacity: 1; color: var(--bad); background: var(--bad-50); }
.goal-head { flex-wrap: nowrap; }
.goal-head .person { flex: 1 1 auto; }
.goal-ai { gap: 5px; padding: 0 10px; }

/* Panel de actividades: con el formulario abierto los recuadros eligen el tipo («Todas» queda inactivo) */
.ap-kinds-grid.is-picking .ap-kind:disabled { opacity: .4; cursor: not-allowed; }
.ap-kinds-grid.is-picking .ap-kind:not(:disabled):not(.on):hover { border-color: var(--primary); }
.ap-compose-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ap-compose-title .icon { color: var(--primary); }
.ap-compose-title b { font-size: 13.5px; }
.ap-compose-title small { color: var(--ink-3); font-size: 11.5px; margin-left: auto; }

/* Parámetros → Tasas: fila del USD con la TRM oficial (solo lectura) */
.trm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 2px; }
.trm-row .trm-val { font-weight: 700; color: var(--ink); margin-left: auto; }
.trm-row small { flex-basis: 100%; }

/* Ventana de cierre: TRM aplicada */
.trm-box { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); display: grid; gap: 4px; }
.trm-box.is-error { background: var(--bad-50); border-color: var(--bad-bd); color: var(--bad-ink); }
.trm-line { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.trm-num { font-size: 18px; color: var(--ink); }
.trm-calc { font-size: 13px; color: var(--ink-2); margin: 2px 0 4px; }
.trm-calc b { color: var(--good-ink); font-size: 14px; }

/* Oportunidad en otra moneda: valoración en COP (TRM vigente / pactada / del cierre) y proyección */
.fx-box > div { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.fx-proj { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; border-top: 1px dashed var(--border); padding-top: 6px; }
.fx-proj > .icon { color: var(--primary); margin-top: 2px; }
.fx-proj small { flex-basis: 100%; }

.input.is-invalid { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-50); }

/* Prospectos: marca de convertido en la lista y origen de la autorización de datos */
.lead-conv { margin-left: 6px; font-size: 13px; cursor: help; }
.consent-src { display: flex; gap: 8px; align-items: flex-start; }
.consent-src > .icon { margin-top: 3px; color: var(--good); flex: none; }
.consent-src .small { margin-top: 2px; line-height: 1.6; }
.consent-src .avatar.xs { display: inline-grid; vertical-align: -5px; }

/* Pestaña Propuesta de la oportunidad: propuestas generadas */
.prop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prop-list li { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 3px; }
.prop-head { display: flex; align-items: center; gap: 8px; }
.prop-head b { flex: 1; min-width: 0; }
.prop-head .btn { margin: -4px -6px -4px 0; }
.prop-exp { color: var(--bad-ink, #b42318); }
.prop-by .avatar.xs { display: inline-grid; vertical-align: -5px; }
.prop-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prop-links a { display: inline-flex; align-items: center; gap: 3px; }

/* Detalle de reunión: datos y respuestas de los invitados */
.meet-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.meet-detail { margin-left: auto; font-weight: 600; }
.meet-dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; margin: 0; }
.meet-dl dt { color: var(--ink-3); font-size: 13px; }
.meet-dl dd { margin: 0; min-width: 0; }
.meet-url a { word-break: break-all; }
.meet-notes { white-space: pre-wrap; }
.resp-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.resp { padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); }
.resp.ok { background: var(--good-50); border-color: var(--good-bd); color: var(--good-ink); }
.resp.no { background: var(--bad-50); border-color: var(--bad-bd); color: var(--bad-ink); }
.resp.maybe { background: var(--warn-50); border-color: var(--warn-bd); }
.resp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.resp-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.resp-list li > div { flex: 1; min-width: 0; display: grid; }
.resp-list li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resp-ico { width: 20px; text-align: center; }
.resp-lbl { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.resp-lbl.ok { color: var(--good-ink); } .resp-lbl.no { color: var(--bad-ink); }
@media (max-width: 600px) { .meet-dl { grid-template-columns: 1fr; gap: 2px; } .meet-dl dd { margin-bottom: 8px; } }

/* Tareas → Calendario de reuniones */
.cal-bar { align-items: center; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-title { min-width: 150px; text-align: center; font-size: 15px; }
.cal-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.cal-card { overflow: hidden; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head div { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
.cal-day { min-height: 112px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.out { background: var(--surface-2); }
.cal-day.out .cal-num { color: var(--ink-3); opacity: .6; }
.cal-num { font-size: 12px; font-weight: 600; color: var(--ink-2); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 99px; }
.cal-day.today .cal-num { background: var(--primary); color: #fff; }
.cal-ev { --ev: var(--primary); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; padding: 3px 6px; border-radius: 6px; font-size: 12px; line-height: 1.35;
  background: color-mix(in srgb, var(--ev) 11%, transparent); border-left: 3px solid var(--ev); color: var(--ink); text-decoration: none; min-width: 0; }
.cal-ev:hover { background: color-mix(in srgb, var(--ev) 20%, transparent); }
.cal-ev.done { opacity: .65; }
.cal-ev.cancel .cal-subj { text-decoration: line-through; }
.cal-time { font-weight: 700; color: var(--ev); font-size: 11.5px; }
.cal-subj { flex-basis: 100%; order: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cal-who { font-size: 11px; color: var(--ink-3); margin-left: auto; order: 2; }
.cal-time { order: 1; }
.cal-resp { font-size: 11px; letter-spacing: -.02em; order: 4; flex-basis: 100%; }
.cal-agenda { display: none; }
@media (max-width: 760px) {
  .cal-grid, .cal-head { display: none; }
  .cal-agenda { display: grid; gap: 14px; padding: 14px; }
  .cal-ag-day { display: grid; gap: 6px; }
  .cal-legend { margin-left: 0; }
}
.meet-join-btn { background: #4b53bc; border-color: #4b53bc; color: #fff !important; }
.meet-join-btn:hover { background: #3f479f; border-color: #3f479f; }
.mc-only { display: flex; gap: 6px; align-items: flex-start; margin: 10px 4px 0; line-height: 1.45; }
.mc-only .icon { flex: none; margin-top: 2px; }
.mc-nav-foot a { display: inline-flex; align-items: center; gap: 6px; }
.seg-note { font-size: 13px; color: var(--ink-2); font-weight: 600; align-self: center; }


/* Tareas → Por hacer: títulos de grupo (Vencidas · Hoy · Esta semana · Más adelante) */
.todo-table tr.todo-group td { background: var(--surface-2); font-size: 12.5px; padding-top: 8px; padding-bottom: 8px; text-transform: none; }
.todo-table tr.todo-group.g-bad td b { color: var(--bad-ink); }
.todo-table tr.todo-group.g-today td b { color: var(--primary); }
/* Editor en el panel de actividades (angosto): se ocultan los botones menos usados; en pantalla completa vuelven todos */
.act-panel .composer-box:not(.ed-full) .ed-hide-sm, .act-panel .composer-box:not(.ed-full) .ed-code-btn span { display: none; }
.composer-box.ed-full { box-shadow: 0 0 0 100vmax rgba(15, 20, 40, .45), var(--shadow-lg); }

/* Parámetros → Plantillas Word: mapeo de campos */
.map-list { display: grid; gap: 8px; }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.map-row.is-crm { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 4%, transparent); }
.map-field { display: grid; min-width: 0; }
.map-field small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-fixed { grid-column: 2; }
@media (max-width: 640px) { .map-row { grid-template-columns: 1fr; } .map-fixed { grid-column: 1; } }
.prop-file { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: 4px 0; border: 1px solid var(--border); border-radius: 8px;
  font-size: 12.5px; font-weight: 600; text-decoration: none; min-width: 0; }
.prop-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-file small { color: var(--ink-3); font-weight: 500; }
.prop-file:hover { border-color: var(--primary); }
.prop-missing { display: flex; gap: 6px; align-items: flex-start; color: var(--warn-ink); }
.prop-missing .icon { flex: none; margin-top: 2px; }
/* Propuestas: subir versión (botón o arrastrar el Word sobre la propuesta) y lista de versiones */
.prop-list li.is-drop { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.prop-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prop-vers { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.prop-vers li { display: flex; align-items: center; gap: 6px; padding: 4px 8px !important; border: 1px dashed var(--border) !important; border-radius: 8px; font-size: 12px; }
.prop-vers li a { flex: 1; min-width: 0; display: flex; gap: 6px; text-decoration: none; overflow: hidden; }
.prop-vers li a span { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mi firma: aviso obligatorio, vista previa y área para dibujar */
.sig-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--warn-bd); background: var(--warn-50); color: var(--warn-ink); }
.sig-banner span { flex: 1; min-width: 220px; }
.um-req { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--bad-ink); background: var(--bad-50); border-radius: 99px; padding: 1px 7px; }
.sig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sig-draw-card { grid-column: 1 / -1; }
.sig-preview { display: grid; place-items: center; min-height: 120px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 12px;
  background: repeating-conic-gradient(#f4f5f8 0 25%, #fff 0 50%) 0 0 / 16px 16px; margin-bottom: 8px; }
.sig-preview img { max-width: 100%; max-height: 140px; }
.sig-pad { width: 100%; max-width: 900px; aspect-ratio: 3 / 1; border: 1px dashed var(--border-strong); border-radius: 12px; background: #fff;
  touch-action: none; cursor: crosshair; }
@media (max-width: 760px) { .sig-grid { grid-template-columns: 1fr; } }
/* Parámetros → Anexos: matriz anexo × tipo de propuesta */
.annex-table .annex-type { text-align: center; max-width: 120px; font-size: 11.5px; white-space: normal; line-height: 1.25; }
.annex-table td.annex-type input { width: 18px; height: 18px; cursor: pointer; }
.annex-name { min-width: 260px; }
.txt-good { color: var(--good-ink); }
.prop-annex { display: grid; gap: 3px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.prop-annex b { display: inline-flex; align-items: center; gap: 5px; }

/* Propuesta: aprobación y envío */
.prop-file.is-pdf { border-color: color-mix(in srgb, var(--bad-ink, #b42318) 35%, var(--border)); }
.prop-flow { display: flex; gap: 6px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; margin: 2px 0; }
.prop-flow .icon { flex: none; margin-top: 2px; }
.prop-flow.warn { background: var(--warn-50); color: var(--warn-ink); }
.prop-flow.bad { background: var(--bad-50); color: var(--bad-ink); }
.prop-flow.good { background: var(--good-50); color: var(--good-ink); }
.prop-flow a { color: inherit; text-decoration: underline; }
.pre { white-space: pre-wrap; }
.prop-review { width: min(1200px, 100%); height: min(92vh, 1000px); display: flex; flex-direction: column; }
.prop-review-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; }
.prop-review-body iframe { width: 100%; height: 100%; border: 0; background: var(--surface-2); }
.prop-review-side { padding: 14px; overflow: auto; border-left: 1px solid var(--border); align-content: start; }
.prop-mail { padding: 10px; border: 1px solid var(--border); border-radius: 8px; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
@media (max-width: 800px) {
  .prop-review-body { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
  .prop-review-side { border-left: 0; border-top: 1px solid var(--border); }
}

/* Propuesta en preparación: pasos */
.prop-steps { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 0; }
.prop-steps > li { display: grid !important; grid-template-columns: 26px 1fr; gap: 10px; padding: 0 0 12px !important; border: 0 !important; border-radius: 0 !important; position: relative; }
.prop-steps > li:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 2px; width: 2px; background: var(--border); }
.prop-steps > li.done:not(:last-child)::before { background: var(--good-bd); }
.prop-steps > li > div { display: grid; gap: 4px; min-width: 0; }
.prop-steps > li > div > b { font-size: 13px; line-height: 26px; }
.prop-steps > li > div > small { margin-top: -4px; }
.prop-steps .prop-file { margin: 2px 0 0; }
.prop-steps .prop-acts { margin-top: 2px; }
.step-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--ink-3); border: 2px solid var(--border); position: relative; z-index: 1; }
.prop-steps li.done .step-n { background: var(--good-50); color: var(--good-ink); border-color: var(--good-bd); }
.prop-steps li.now .step-n { background: var(--primary); color: #fff; border-color: var(--primary); }
.prop-steps li.off > div > b { color: var(--ink-3); }

/* Metas: vista del año (periodos en filas × comerciales en columnas) */
.seg-n { margin-left: 5px; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 99px; background: var(--surface-2); color: var(--ink-3); }
.gy-wrap { overflow-x: auto; }
.gy { width: 100%; border-collapse: separate; border-spacing: 0; }
.gy th, .gy td { padding: 7px 12px; vertical-align: middle; }
.gy .gy-per { position: sticky; left: 0; z-index: 2; background: var(--surface); width: 130px; min-width: 120px; text-align: left; border-right: 1px solid var(--border); white-space: nowrap; }
.gy .gy-per .link-btn { font-weight: 600; color: var(--ink); }
.gy .gy-per small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.gy thead th { vertical-align: bottom; }
.gy .gy-u { min-width: 150px; }
.gy-person { display: inline-flex; justify-content: flex-end; }
.gy td.gy-c { min-width: 150px; font-variant-numeric: tabular-nums; border-left: 1px solid var(--border); cursor: pointer; }
.gy.is-edit td.gy-c { cursor: default; }
.gy-cell { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.gy-cell b { white-space: nowrap; }
.gy td small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.gy-pct { font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 99px; background: var(--surface-2); min-width: 38px; text-align: center; }
.gy td.st-cumplida { background: var(--good-50); } .gy td.st-cumplida .gy-pct { background: var(--good-bd); color: var(--good-ink); }
.gy td.st-a_tiempo .gy-pct { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.gy td.st-atrasada { background: var(--warn-50); } .gy td.st-atrasada .gy-pct { background: var(--warn-bd); color: var(--warn-ink); }
.gy td.st-no_cumplida { background: var(--bad-50); } .gy td.st-no_cumplida .gy-pct { background: var(--bad-bd); color: var(--bad-ink); }
.gy td.st-futuro b { color: var(--ink-3); }
.gy tr.is-now .gy-per { box-shadow: inset 3px 0 0 var(--primary); }
.gy tr.is-sel > * { border-top: 2px solid var(--primary); border-bottom: 2px solid var(--primary); }
.gy .gy-team { min-width: 130px; border-left: 2px solid var(--border); background: var(--surface-2); }
.gy tfoot th, .gy tfoot td { border-top: 2px solid var(--border); background: var(--surface-2); }
.gy.is-edit td.gy-c > div { display: grid; gap: 2px; justify-items: end; }
.gy.is-edit td.gy-c input { width: 100%; min-width: 130px; text-align: right; padding: 6px 8px; }
.gy-tools { display: grid; gap: 4px; margin-top: 8px; justify-items: end; font-weight: 400; text-transform: none; letter-spacing: 0; }
.gy-tools input { width: 100%; min-width: 130px; padding: 5px 8px; text-align: right; }
.gy-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.gy-act { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s; }
.gy-act:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.gy-act:active { transform: scale(.97); }
.gy-act:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gy-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); align-items: center; }
.gy-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--border); }
.gy-legend i.st-cumplida { background: var(--good-50); } .gy-legend i.st-a_tiempo { background: var(--surface); }
.gy-legend i.st-atrasada { background: var(--warn-50); } .gy-legend i.st-no_cumplida { background: var(--bad-50); } .gy-legend i.st-futuro { background: var(--surface-2); }
.gy-detail-title { font-size: 16px; margin: 22px 0 12px; }

.prop-preview { display: grid; gap: 4px; margin-top: 6px; padding: 8px; border-radius: 8px; border: 1px dashed var(--border); justify-items: start; }
.prop-preview.ok { border-style: solid; border-color: var(--good-bd); background: var(--good-50); }
.prop-preview.ok small { color: var(--good-ink); font-weight: 600; }
.prop-wait { display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 24px; background: var(--surface-2); }
.prop-wait .icon { width: 32px; height: 32px; color: var(--ink-3); }
.prop-preview.warn { border-style: solid; border-color: var(--warn-bd); background: var(--warn-50); }
.prop-preview.warn small { color: var(--warn-ink); font-weight: 600; }

/* Campañas por correo */
.mkt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; padding: 0 16px 12px; }
.mkt-kpis button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  font: inherit; color: var(--ink); cursor: pointer; }
.mkt-kpis button b { font-size: 20px; } .mkt-kpis button span { font-size: 12px; color: var(--ink-3); }
.mkt-kpis button.good b { color: var(--good-ink); } .mkt-kpis button.bad b { color: var(--bad-ink); }
.mkt-kpis button.on { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.mkt-badge { cursor: pointer; font: inherit; font-size: 11.5px; } .mkt-badge:disabled { cursor: default; }
.mkt-hist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.mkt-hist li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.mkt-hist li small { display: block; }
.mail-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.mb-preview { position: sticky; top: 76px; }
.mb-frame { width: 100%; height: 72vh; min-height: 520px; border: 0; border-top: 1px solid var(--border); background: #f2f4f8; }
.mb-editor { min-height: 260px; max-height: 60vh; overflow: auto; }
.mb-editor img { max-width: 100%; height: auto; }
.ai-html { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 14px; line-height: 1.6; max-height: 40vh; overflow: auto; }
.ai-html img { max-width: 100%; }
@media (max-width: 1100px) { .mail-builder { grid-template-columns: 1fr; } .mb-preview { position: static; } }

.mk-results { border-top: 2px solid var(--border); margin-top: 4px; }
.mk-results-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px 6px; }
.mk-results-head h3 { margin: 0; font-size: 16px; } .mk-results-head p { margin: 2px 0 0; }
.mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 8px 16px 12px; }
.mk-stats > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.mk-stats small { color: var(--ink-3); display: inline-flex; gap: 4px; align-items: center; } .mk-stats b { font-size: 22px; } .mk-stats span { font-size: 12px; color: var(--ink-3); }
.mk-stats .good b { color: var(--good-ink); } .mk-stats .bad b { color: var(--bad-ink); }
.table tr.is-sel-row > td { background: color-mix(in srgb, var(--primary) 7%, transparent); }

/* Metas: un comercial por fila; metas a la izquierda y análisis con IA a la derecha */
.goal-row { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 22px; align-items: start; }
.goal-row-goals { display: grid; gap: 14px; }
.goal-row-ai { border-left: 1px solid var(--border); padding-left: 22px; min-width: 0; }
.goal-row-ai .ai-box { margin: 0; }
.goal-ai-empty { display: grid; justify-items: start; gap: 6px; color: var(--ink-3); padding: 6px 0; }
.goal-ai-empty p { margin: 0; }
@media (max-width: 900px) { .goal-row { grid-template-columns: 1fr; } .goal-row-ai { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; } }

/* Metas: un comercial por pestaña en el detalle del periodo */
.goal-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.goal-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0;
  background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; margin-bottom: -1px; }
.goal-tab:hover { color: var(--ink); background: var(--surface-2); }
.goal-tab.on { background: var(--surface); color: var(--ink); border-color: var(--border); }
.goal-tab .avatar.xs { display: inline-grid; }
.goal-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--primary); }
.goal-dot.cumplida { background: var(--good); } .goal-dot.atrasada { background: var(--warn); }
.goal-tabs + section.card, .goal-cards > section.card { border-top-left-radius: 0; }

/* Campaña: panel en la columna derecha, del mismo alto que «Datos de la campaña» */
.camp-layout { align-items: stretch; }
.camp-side { position: static; max-height: none; }
.camp-dash { flex: 1; min-height: 0; padding: 14px 16px; display: grid; gap: 10px; align-content: start; overflow: auto; }
.cd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cd-tiles > div { display: grid; gap: 1px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; }
.cd-tiles small { color: var(--ink-3); font-size: 11.5px; } .cd-tiles b { font-size: 20px; color: var(--ink); } .cd-tiles span { font-size: 11px; color: var(--ink-3); }
.cd-tiles .bad b { color: var(--bad-ink); }
.cd-funnel { display: grid; gap: 7px; margin-top: 8px; }
.cd-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 70px; gap: 8px; align-items: center; font-size: 12.5px; }
.cd-lbl { color: var(--ink-2); }
.cd-bar { display: block; height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.cd-bar i { display: block; height: 100%; border-radius: 4px; background: var(--primary); transition: width .3s; }
.cd-bar i.soft { background: color-mix(in srgb, var(--primary) 55%, var(--surface)); }
.cd-bar i.bad { background: var(--bad); }
.cd-val { display: flex; gap: 5px; justify-content: flex-end; align-items: baseline; color: var(--ink); } .cd-val small { color: var(--ink-3); }
.cd-mails { display: grid; gap: 6px; margin-top: 8px; }
.cd-mail { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--ink); }
.cd-mail:hover { border-color: var(--primary); }
.cd-mname { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .cd-mname b { font-size: 13px; } .cd-mname small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.cd-mini { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 8px; align-items: center; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 1100px) { .camp-dash { overflow: visible; } }

/* Correo: lista local con actualización en segundo plano */
.mc-syncing { padding: 4px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mc-spin .icon { animation: mc-spin 1s linear infinite; }
@keyframes mc-spin { to { transform: rotate(360deg); } }
.goal-head-info { flex: 1 1 160px; color: var(--ink-2); }
@media (max-width: 640px) {
  .goal-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .goal-tab { flex: none; padding: 8px 10px; }
  .goal-row { gap: 14px; }
}

/* Celular: cabecera de la lista de Correo y selectores largos */
@media (max-width: 640px) {
  .mc-list-head { flex-wrap: wrap; }
  .mc-list-head .mc-folder-select { flex: 1 1 100%; }
  .mc-list-head .input-icon { flex: 1 1 0; }
  .toolbar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .toolbar .seg button { flex: none; }
}

/* Listas: selección y actualización masiva */
.bulk-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px; border: 1px solid var(--primary);
  border-radius: 12px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); position: sticky; top: 64px; z-index: 5; }
.bulk-field { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); }
.bulk-field .input { height: 34px; width: auto; min-width: 160px; }
.del-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0; } .del-warn ul { margin: 4px 0 0; padding-left: 18px; font-weight: 400; } .del-warn > div { flex: 1; }
.bulk-skipped { display: flex; gap: 8px; align-items: flex-start; } .bulk-skipped ul { margin: 4px 0 0; padding-left: 18px; } .bulk-skipped > div { flex: 1; }
.table th.bulk-col, .table td.bulk-col { width: 34px; padding-right: 0; }
.table td.bulk-col input, .table th.bulk-col input { width: 16px; height: 16px; cursor: pointer; }
@media (max-width: 640px) { .bulk-bar { top: 56px; } .bulk-field { flex: 1 1 100%; } .bulk-field .input { flex: 1; } }

/* Encabezados ordenables (CRM.sorter + crm/_sort.html) */
th.sortable { padding: 0; }
th.sortable .sort-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; width: 100%; padding: 10px 14px; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; }
th.sortable.num .sort-btn { justify-content: flex-end; }
th.sortable .sort-btn:hover { color: var(--ink); }
th.sortable .sort-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }
.sort-ind { font-size: 10px; color: var(--ink-3); opacity: .45; } .sort-ind.on { opacity: 1; color: var(--primary); }

/* Inicio: periodo único (cabecera) que rige tarjetas, metas y análisis del equipo */
.kpis.is-loading { opacity: .55; transition: opacity .15s; }

/* Editor de correos de campaña: diseños y estilo */
.mb-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.mb-preset { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 6px; justify-items: center; padding: 8px 6px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface); }
.mb-preset:hover { border-color: var(--border-strong); } .mb-preset.on { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); color: var(--ink); }
.mb-preset:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
fieldset:disabled .mb-preset { cursor: default; opacity: .7; }
.mb-sw { width: 64px; height: 44px; border-radius: 6px; background: var(--bg); display: grid; place-items: center; border: 1px solid var(--border); }
.mb-sw i { display: block; width: 40px; height: 32px; border-radius: var(--r); background: var(--card); box-shadow: var(--sh); overflow: hidden; position: relative; }
.mb-sw i::before { content: ""; position: absolute; inset: 0 0 auto; height: 9px; background: var(--head); border-bottom: 2px solid var(--line); }
.mb-sw b { display: none; }
.mb-style { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; }
.mb-style .field { margin: 0; }
.mb-color { display: flex; gap: 8px; align-items: center; }
.mb-color input[type=color] { width: 42px; height: 34px; border: 0; background: none; padding: 0; flex: none; }
.mb-color select.input { min-width: 0; }

/* ===================== Reportes (dirección comercial) ===================== */
.rp-filters { align-items: flex-end; }
.rp-f { display: grid; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.rp-f select.input { min-width: 150px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.rp-sec { margin-bottom: 18px; min-width: 0; }
.rp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.rp-h2 { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 0 0 12px; }
.rp-h2 span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 12px; }
.rp-h3 { font-size: 12.5px; color: var(--ink-2); margin: 4px 0 6px; font-weight: 650; }
.rp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rp-grid > .rp-sec { margin-bottom: 0; } .rp-grid + .rp-sec, .rp-sec + .rp-grid, .rp-grid + .rp-grid { margin-top: 18px; }
.rp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.rp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rp-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: grid; gap: 3px; min-width: 0; }
.rp-kpi small { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.rp-kpi b { font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.rp-kpi.hero { background: linear-gradient(135deg, var(--primary-50), var(--surface)); border-color: var(--primary-100); }
.rp-kpi.hero b { color: var(--primary); }
.rp-kpi span { font-size: 12px; color: var(--ink-2); }
.rp-delta { display: inline-block; margin-left: 4px; font-weight: 700; font-size: 11.5px; padding: 0 6px; border-radius: 99px; white-space: nowrap; }
.rp-delta.up { color: var(--good-ink); background: var(--good-50); } .rp-delta.down { color: var(--bad-ink); background: var(--bad-50); }
.rp-delta.flat { color: var(--ink-3); background: var(--surface-2); }
.tx-good { color: var(--good-ink) !important; } .tx-bad { color: var(--bad-ink) !important; }
.rp-note { font-size: 12px; color: var(--ink-3); margin: 10px 0 0; } .rp-empty { color: var(--ink-3); font-size: 13px; padding: 12px 0; }
.rp-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); margin: -4px 0 6px; }
.rp-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rp-legend .sw.s1 { background: var(--viz-1); } .rp-legend .sw.s2 { background: var(--viz-2); }
.rp-legend .sw.mk { background: var(--ink); width: 12px; height: 2px; vertical-align: 3px; }
.rp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rp-chip { font-size: 12px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); }
.rp-svg { display: block; overflow: visible; }
.rp-svg .rp-lab { font-size: 12px; } .rp-svg .rp-val { font-size: 12px; font-weight: 700; } .rp-svg .rp-tick { font-size: 11px; }
.rp-svg [data-tip] { cursor: default; transition: opacity .12s; } .rp-svg:hover [data-tip]:not(:hover) { opacity: .78; }
.rp-scroll { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rp-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 650; padding: 8px 10px;
  border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.rp-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.rp-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-table tfoot td { font-weight: 700; background: var(--surface-2); }
.rp-cmp td:first-child { white-space: nowrap; }
.rp-tag { font-size: 10.5px; border: 1px solid var(--border); border-radius: 6px; padding: 0 5px; color: var(--ink-3); }
.rp-tag.warn { color: var(--warn-ink); border-color: var(--warn-bd); background: var(--warn-50); }
.rp-tbl { margin-top: 8px; } .rp-tbl summary { cursor: pointer; font-size: 12px; color: var(--primary); font-weight: 600; }
.rp-tbl .rp-table { margin-top: 8px; }
.rp-tip { position: fixed; z-index: 90; max-width: 320px; pointer-events: none; background: var(--toast-bg); color: #fff; font-size: 12px; line-height: 1.4;
  padding: 7px 10px; border-radius: 8px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); }
@media (max-width: 1100px) { .rp-grid, .rp-grid-3 { grid-template-columns: minmax(0, 1fr); } .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rp-kpis { grid-template-columns: minmax(0, 1fr); } .rp-card { padding: 14px; } .rp-f select.input { min-width: 0; width: 100%; } .rp-f { flex: 1 1 140px; } }

/* Revisión de ortografía y redacción de correos (crm/_ai_improve.html) */
.ai-diff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ai-diff > div { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); min-height: 220px; display: flex; flex-direction: column; }
.ai-diff > .new { background: var(--good-50); border-color: var(--good-bd); }
.ai-diff .lbl { font-weight: 700; margin-bottom: 6px; } .ai-diff .new .lbl { color: var(--good-ink); }
.ai-diff-txt { white-space: pre-wrap; font-size: 13.5px; max-height: 50vh; overflow: auto; }
.ai-diff textarea.input { flex: 1; min-height: 260px; resize: vertical; font: inherit; font-size: 13.5px; background: var(--surface); }
.ap-mail-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 720px) { .ai-diff { grid-template-columns: minmax(0, 1fr); } }

/* Prospectos: importar CSV */
.imp-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; }
.imp-steps .btn { margin-left: 6px; vertical-align: middle; }
.imp-drop { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 22px; border: 2px dashed var(--border-strong); border-radius: 12px;
  cursor: pointer; color: var(--ink-2); font-size: 13.5px; text-align: center; }
.imp-drop:hover { border-color: var(--primary); color: var(--primary); } .imp-drop.has { border-style: solid; border-color: var(--primary); background: var(--primary-50); color: var(--ink); }
.imp-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.imp-sum > div { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.imp-sum b { font-size: 22px; } .imp-sum span { font-size: 12px; color: var(--ink-2); }
.imp-sum .ok { background: var(--good-50); border-color: var(--good-bd); } .imp-sum .ok b { color: var(--good-ink); }
.imp-sum .bad { background: var(--bad-50); border-color: var(--bad-bd); } .imp-sum .bad b { color: var(--bad-ink); }
.imp-sum .dup, .imp-sum .warn { background: var(--warn-50); border-color: var(--warn-bd); } .imp-sum .dup b, .imp-sum .warn b { color: var(--warn-ink); }
.imp-list summary { cursor: pointer; font-weight: 600; font-size: 13px; } .imp-list .table { margin-top: 6px; font-size: 12.5px; }