:root {
  /* Superficies y texto: neutros cálidos, con mucho aire */
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #f3f1ed;
  --surface-3: #ebe8e3;
  --border: #e6e2dc;
  --border-strong: #d6d0c8;
  --text: #1c1917;
  --text-2: #57514b;
  --muted: #8c857e;
  /* Marca */
  --accent: #b4552d;
  --accent-2: #d2703f;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --focus: #b4552d;
  --error: #c0362c;
  --wa: #128c4a;

  --st-muy-caliente: #c0362c;
  --st-caliente: #e07a1f;
  --st-templado: #c9a227;
  --st-frio: #4f7fb8;

  --chip-on-bg: #e4f2e8;
  --chip-on-ink: #1f6b3a;
  --chip-half-bg: #fbf1dc;
  --chip-half-ink: #8a5a00;

  /* Tonos de las tarjetas de métricas (icono y acentos) */
  --tone-accent: #b4552d;
  --tone-vip: #a86b00;
  --tone-buy: #138a4b;
  --tone-live: #6b4fc8;
  --tone-info: #2f6aa8;
  --tone-money: #17716a;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgb(28 25 23 / .05);
  --shadow: 0 1px 2px rgb(28 25 23 / .04), 0 2px 10px -2px rgb(28 25 23 / .06);
  --shadow-lg: 0 24px 48px -12px rgb(28 25 23 / .22), 0 6px 16px -6px rgb(28 25 23 / .08);
  --topbar-h: 64px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f0e0d;
  --surface: #181716;
  --surface-2: #211f1d;
  --surface-3: #2a2825;
  --border: #2d2a27;
  --border-strong: #3b3834;
  --text: #f4f0eb;
  --text-2: #c2bab2;
  --muted: #8d857e;
  --accent: #e57a4c;
  --accent-2: #f0925f;
  --accent-ink: #1a0e08;
  --focus: #f0925f;
  --error: #ff8a80;
  --wa: #3ccf7f;
  --st-muy-caliente: #f0645a;
  --st-caliente: #f2994a;
  --st-templado: #e3c25a;
  --st-frio: #7aa6dc;
  --chip-on-bg: #1f3a29;
  --chip-on-ink: #8fe0ac;
  --chip-half-bg: #3d3018;
  --chip-half-ink: #f1cd7c;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 6px 18px -6px rgb(0 0 0 / .55);
  --shadow-lg: 0 28px 60px -12px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .04);
  --tone-accent: #e57a4c;
  --tone-vip: #e8b54a;
  --tone-buy: #3ccf7f;
  --tone-live: #a995ff;
  --tone-info: #7aa6dc;
  --tone-money: #5fcfc2;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
}
[hidden] { display: none !important; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.muted { color: var(--muted); }
.error { color: var(--error); }
.spacer { flex: 1; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }

/* Botones y campos */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; padding: 6px 10px; }
.btn.wa.sent { background: transparent; color: var(--wa); }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  max-width: 100%;
}
textarea { width: 100%; resize: vertical; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span { font-size: 12px; font-weight: 600; color: var(--text-2); }
.field input, .field select { width: 100%; }
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
.field.inline > span { white-space: nowrap; }
.field.narrow { max-width: 220px; }
.check { display: inline-flex; gap: 6px; align-items: center; color: var(--text-2); white-space: nowrap; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 360px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-card p { margin: 0; }

/* Barra superior */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 16px; display: flex; gap: 8px; align-items: center; }
.badge { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.topbar-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#launch-select { min-width: 180px; }
body:not(.is-admin) .admin-only { display: none !important; }
body:not(.can-config) .config-only { display: none !important; }
body:not(.can-zoom) .zoom-only { display: none !important; }
body:not(.can-tareas) .tareas-only { display: none !important; }
body.is-admin .setter-only { display: none !important; }

.container { max-width: 1320px; margin: 0 auto; padding: 16px; }
.notice { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.notice.err { border-color: var(--error); color: var(--error); }
.empty { padding: 32px; text-align: center; }
.empty h2 { margin-top: 0; }

.progress { position: relative; height: 26px; border-radius: 8px; background: var(--surface-2); overflow: hidden; margin-bottom: 12px; }
.progress-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--accent) 30%, transparent); transition: width .2s; }
.progress-text { position: relative; display: block; text-align: center; line-height: 26px; font-size: 12px; color: var(--text-2); }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.kpi:hover { background: var(--surface-2); }
.kpi.active { outline: 2px solid var(--accent); outline-offset: -1px; }
.kpi .kpi-label { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.kpi .kpi-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .kpi-sub { font-size: 12px; color: var(--muted); }
.kpi.static { cursor: default; }
.kpi.static:hover { background: var(--surface); }

.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.st-muy-caliente { --st: var(--st-muy-caliente); }
.st-caliente { --st: var(--st-caliente); }
.st-templado { --st: var(--st-templado); }
.st-frio { --st: var(--st-frio); }
.dot { background: var(--st); }

.distribution { display: flex; height: 8px; gap: 2px; border-radius: 4px; overflow: hidden; margin: -4px 0 14px; }
.distribution span { background: var(--st); min-width: 2px; }

/* Vistas */
.views { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.view-tab { font: inherit; font-weight: 600; font-size: 15px; background: none; border: 0; padding: 10px 14px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; }
.view-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.notice.warn { border-color: var(--st-caliente); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.notice.warn p { margin: 0; flex: 1 1 320px; }

/* Métricas */
.metric-card { padding: 14px 16px; margin-bottom: 14px; }
.metric-card h2 { font-size: 14px; margin: 0 0 12px; }
.metric-card h2 .muted { font-weight: 400; }
.funnel-row { display: grid; grid-template-columns: minmax(130px, 220px) 1fr minmax(90px, auto); gap: 10px; align-items: center; padding: 5px 0; }
.funnel-label { font-size: 13px; font-weight: 600; }
.funnel-label small { display: block; font-weight: 400; color: var(--muted); }
.funnel-bar { height: 14px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.funnel-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); min-width: 2px; }
.funnel-bar.buy span { background: var(--wa); }
.funnel-bar.extra span { opacity: .45; }
.funnel-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.funnel-num strong { font-size: 14px; }
table.metric-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.metric-table th, .metric-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
.metric-table thead th { font-size: 12px; color: var(--text-2); }
.metric-table td.num, .metric-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.metric-table tr:last-child td { border-bottom: 0; }
.metric-table .big { font-weight: 700; font-size: 15px; }
.snapshot-box { padding: 12px; border-radius: 8px; background: var(--surface-2); font-size: 13px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.snapshot-box p { margin: 0; }
@media (max-width: 640px) {
  table.metric-table { min-width: 0; }
  .metric-table th, .metric-table td { padding: 8px 4px; }
  .funnel-row { grid-template-columns: 1fr auto; }
  .funnel-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* Reparto frío / templado */
.split-bar { display: flex; height: 22px; gap: 2px; border-radius: 6px; overflow: hidden; margin: 4px 0 8px; }
.split-bar span { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; min-width: 2px; }
.split-bar .frio { background: var(--st-frio); }
.split-bar .templado { background: var(--accent); }
.split-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; margin-bottom: 10px; }
.split-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* Nota de nombres de campañas de Meta */
.meta-note { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-radius: 10px; padding: 12px 14px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.meta-note strong { font-size: 14px; }
.meta-note p { margin: 0; }
.meta-note .copy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.meta-note code { font-size: 12.5px; padding: 3px 6px; word-break: break-all; }
.meta-note .btn { padding: 4px 10px; font-size: 12px; }

/* Hoy */
.hoy-intro { margin: 0 0 12px; }
.hoy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.hoy-card { padding: 14px 16px; }
.hoy-card h2 { font-size: 15px; margin: 0; display: flex; gap: 8px; align-items: center; }
.hoy-card > p { margin: 2px 0 10px; font-size: 12px; }
.hoy-list { list-style: none; margin: 0; padding: 0; }
.hoy-item { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.hoy-main { min-width: 0; flex: 1 1 180px; }
.hoy-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
select.outcome { font-size: 12px; padding: 4px 6px; }
.compare-pick { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.cfg-h3 { font-size: 14px; margin: 10px 0 0; }
.enlaces-list { display: flex; flex-direction: column; gap: 6px; }
.enlace-row { display: grid; grid-template-columns: minmax(110px, 180px) 1fr auto; gap: 6px; }
.acceso-row { display: grid; grid-template-columns: minmax(160px, 260px) 1fr auto auto; gap: 6px; align-items: center; }
.acc-ico { width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.acc-ico svg { width: 20px; height: 20px; }
.acc-workflow { background: #e8e3fb; color: #5a3fc0; }
.acc-pagina { background: #dfeefb; color: #1f62a8; }
.acc-formulario { background: #fde7d9; color: #9a3b12; }
.acc-encuesta { background: #e3efe6; color: #276237; }
.acc-calendario { background: #fbf0c9; color: #7a5600; }
.acc-email { background: #fbe1ec; color: #a32a5f; }
.acc-pago { background: #dff3f1; color: #17716a; }
.acc-whatsapp { background: #ddf5e6; color: #128c4a; }
.acc-otro { background: var(--surface-2); color: var(--muted, #7a6a60); }
.acc-open { text-decoration: none; white-space: nowrap; }
.acc-open[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (max-width: 640px) {
  .acceso-row { grid-template-columns: 1fr auto auto; grid-template-areas: "nom nom del" "url open open"; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
  .acc-del { grid-area: del; } .acc-nombre { grid-area: nom; } .acc-url { grid-area: url; min-width: 0; } .acc-open { grid-area: open; }
}
:root[data-theme="dark"] .acc-workflow { background: #2e2650; color: #c3b4ff; }
:root[data-theme="dark"] .acc-pagina { background: #1c3047; color: #9ccaf5; }
:root[data-theme="dark"] .acc-formulario { background: #4a2a1a; color: #ffbf9a; }
:root[data-theme="dark"] .acc-encuesta { background: #1d3524; color: #a6dcb3; }
:root[data-theme="dark"] .acc-calendario { background: #3f3413; color: #f3d77e; }
:root[data-theme="dark"] .acc-email { background: #47202f; color: #f5a8c8; }
:root[data-theme="dark"] .acc-pago { background: #173a37; color: #8fdcd3; }
:root[data-theme="dark"] .acc-whatsapp { background: #16351f; color: #6ee59a; }
.bar-table input, .bar-table select { width: 100%; font-size: 13px; padding: 6px 8px; }
.bar-table td:first-child { font-size: 12px; font-weight: 600; min-width: 130px; }
.bar-table td:nth-child(2) { min-width: 260px; }
@media (max-width: 640px) { .hoy-grid { grid-template-columns: 1fr; } }

/* Consumo de vídeos */
.consumo-card { padding: 14px 16px; margin-bottom: 14px; }
.consumo-card h2 { font-size: 14px; margin: 0 0 10px; }
.consumo-card h2 .muted { font-weight: 400; }
.table-scroll { overflow-x: auto; }
table.consumo { width: 100%; border-collapse: collapse; min-width: 560px; }
.consumo th, .consumo td { padding: 6px 10px 6px 0; text-align: left; font-size: 13px; vertical-align: middle; }
.consumo thead th { font-size: 12px; color: var(--text-2); font-weight: 600; }
.consumo tbody th { font-weight: 600; white-space: nowrap; width: 90px; }
.meter { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-bottom: 3px; }
.meter span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.meter-num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Filtros */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
#f-search { flex: 1 1 240px; min-width: 0; }

/* Tabla */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table.leads { width: 100%; border-collapse: collapse; min-width: 960px; }
.leads th, .leads td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.leads th { font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); position: sticky; top: 0; }
.leads th[data-sort] { cursor: pointer; user-select: none; }
.leads th.sorted::after { content: " ↓"; }
.leads th.sorted.asc::after { content: " ↑"; }
.leads tr:last-child td { border-bottom: 0; }
.leads td.num, .leads th.num { text-align: right; font-variant-numeric: tabular-nums; }
.lead-name { font-weight: 600; }
.lead-meta { font-size: 12px; color: var(--muted); }
.score { font-weight: 700; font-size: 15px; }

.chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip.on { background: var(--chip-on-bg); color: var(--chip-on-ink); }
.chip.half { background: var(--chip-half-bg); color: var(--chip-half-ink); }
.estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.wa-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.wa-step { font-size: 11px; color: var(--muted); }

.pager { display: flex; align-items: center; gap: 8px; padding: 12px 0; }

/* Diálogo */
.dialog { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.dialog::backdrop { background: rgba(0, 0, 0, .4); }
.dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 34px); }
.dialog-head, .dialog-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.dialog-head { border-bottom: 1px solid var(--border); }
.dialog-head h2 { margin: 0; font-size: 18px; flex: 1; }
.dialog-foot { border-top: 1px solid var(--border); }
.dialog-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
/* Que la ventana no aplaste las pestañas ni los paneles cuando el contenido es largo. */
.dialog-body > * { flex-shrink: 0; }
.tabs { flex-shrink: 0; position: sticky; top: -16px; z-index: 2; background: var(--surface); padding-top: 4px; }
.tab-panel { display: flex; flex-direction: column; gap: 12px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab { font: inherit; font-weight: 600; background: none; border: 0; padding: 8px 12px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab[data-tab-icon] { display: inline-flex; align-items: center; gap: 6px; }
.tab-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); flex: none; }
.tab-ico .ico { width: 14px; height: 14px; }
.tab.active .tab-ico { background: var(--accent); color: var(--accent-ink); }
.cfg-sec-num.cfg-sec-ico { background: var(--surface-2); font-size: 15px; }
.cfg-pronto { margin: 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13px; }
.row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.row .field { flex: 1 1 240px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.snippet { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.snippet h3 { font-size: 14px; margin: 0; }
.snippet pre { margin: 0; padding: 10px; background: var(--surface-2); border-radius: 8px; overflow-x: auto; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.snippet .btn { align-self: flex-start; }

@media (max-width: 640px) {
  .topbar { position: static; }
  .topbar-controls { width: 100%; }
  .field.inline { width: 100%; }
  #launch-select { flex: 1; min-width: 0; }
  .kpi .kpi-value { font-size: 22px; }
}
.grid2 > .full { grid-column: 1 / -1; margin: 0; }

.guia { border: 1px solid var(--border, #d8d0c9); border-radius: 10px; padding: 12px 14px; font-size: 13px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.guia > strong { font-size: 14px; }
.guia-leyenda { display: flex; flex-direction: column; gap: 4px; }
.guia-sub { margin: 0 0 6px; }
.guia-items { display: flex; flex-wrap: wrap; gap: 6px; }
.guia-item { font: inherit; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 4px 9px; cursor: pointer; border: 1px solid transparent; text-align: left; }
.guia-item small { font-weight: 400; opacity: .85; }
.guia-ok { background: #e3efe6; color: #276237; }
.guia-falta { background: #fbe3e1; color: #9d1c14; border-color: #f0b8b3; }
.guia-warn { background: #fff1cc; color: #7a5200; border-color: #ecd089; }
.guia-opt { background: transparent; color: var(--muted, #7a6a60); border-color: var(--border, #d8d0c9); }
.guia-ghl summary { cursor: pointer; font-weight: 600; }
.guia-ghl ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.field.ciclo-nuevo, .field.ciclo-revisar, .field.ciclo-fijo { border-left: 4px solid transparent; padding-left: 8px; }
.field.ciclo-nuevo { border-left-color: #e0703a; }
.field.ciclo-revisar { border-left-color: #e2b23a; }
.field.ciclo-fijo { border-left-color: #6fae80; }
.badge-cambia, .badge-fija, .badge-revisa { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.badge-cambia { background: #fde7d9; color: #9a3b12; }
.badge-fija { background: #e3efe6; color: #276237; }
.badge-revisa { background: #fbf0c9; color: #7a5600; }
.tag-warn { color: #b3261e; font-weight: 600; }
:root[data-theme="dark"] .badge-cambia { background: #4a2a1a; color: #ffbf9a; }
:root[data-theme="dark"] .badge-fija { background: #1d3524; color: #a6dcb3; }
:root[data-theme="dark"] .tag-warn { color: #ff9a90; }
:root[data-theme="dark"] .badge-revisa { background: #3f3413; color: #f3d77e; }
:root[data-theme="dark"] .guia-ok { background: #1d3524; color: #a6dcb3; }
:root[data-theme="dark"] .guia-falta { background: #45201c; color: #ffb4ab; border-color: #6d2d27; }
:root[data-theme="dark"] .guia-warn { background: #3f3413; color: #f3d77e; border-color: #6b5720; }

/* Configuración por secciones */
.cfg-sec { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.cfg-sec-head { display: flex; align-items: flex-start; gap: 12px; }
.cfg-sec-head > div { flex: 1; min-width: 0; }
.cfg-sec-head h3 { margin: 0; font-size: 15px; }
.cfg-sec-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted, #7a6a60); }
.cfg-sec-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.cfg-sec-status { flex: none; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; border: 1px solid transparent; white-space: nowrap; }
.cfg-sec-status:empty { display: none; }
.cfg-sec .meta-note { margin: 0; }
.cfg-h4 { margin: 8px 0 0; font-size: 14px; }
.guia-groups { display: flex; flex-direction: column; gap: 8px; }
.guia-group { display: grid; grid-template-columns: 170px 1fr; gap: 8px; align-items: start; }
.guia-group-t { font-weight: 600; padding-top: 4px; }
@media (max-width: 640px) { .guia-group { grid-template-columns: 1fr; gap: 4px; } }

.field-note { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--muted, #7a6a60); background: var(--surface-2); border-radius: 6px; padding: 6px 8px; }
.metric-table tr.total td { border-top: 2px solid var(--border); }

.campos-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.campos-list .campo { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 3px 0; cursor: pointer; }
.metric-actions { display: flex; justify-content: flex-end; }
#avisos ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- Iconos y aspecto de tarjetas y secciones ---------- */
.ico { width: 18px; height: 18px; flex: none; }
.ico-xl { width: 44px; height: 44px; color: var(--accent); }
.tone-accent { --tone: var(--tone-accent); }
.tone-vip { --tone: var(--tone-vip); }
.tone-buy { --tone: var(--tone-buy); }
.tone-live { --tone: var(--tone-live); }
.tone-info { --tone: var(--tone-info); }
.tone-money { --tone: var(--tone-money); }
.kpi-estado { --tone: var(--st); }

.kpis { gap: 12px; }
.kpi { padding: 14px 16px 14px; gap: 4px; position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tone, var(--accent)); opacity: .85; }
.kpi .kpi-label { font-weight: 600; gap: 8px; line-height: 1.25; }
.kpi .kpi-ico { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  color: var(--tone, var(--accent)); background: color-mix(in srgb, var(--tone, var(--accent)) 13%, transparent); }
.kpi .kpi-ico .ico { width: 17px; height: 17px; }
.kpi .kpi-value { font-size: 28px; line-height: 1.15; margin-top: 4px; letter-spacing: -.01em; }
.kpi .kpi-value small { font-size: 14px; font-weight: 600; }
.kpi .kpi-sub { line-height: 1.4; }
button.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.kpi.active { outline-color: var(--tone, var(--accent)); background: color-mix(in srgb, var(--tone, var(--accent)) 7%, var(--surface)); }

.metric-card { padding: 16px 18px; }
.metric-card h2 { font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.metric-card h2 .muted { font-size: 13px; }
.h-ico { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.h-ico .ico { width: 17px; height: 17px; }
.metric-table thead th { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 700; background: var(--surface-2); }
.metric-table thead th:first-child { border-top-left-radius: 8px; }
.metric-table thead th:last-child { border-top-right-radius: 8px; }
.metric-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.funnel-bar { height: 16px; border-radius: 6px; }
.funnel-bar span { border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 75%, transparent), var(--accent)); }
.funnel-bar.buy span { background: linear-gradient(90deg, color-mix(in srgb, var(--wa) 70%, transparent), var(--wa)); }

.view-tab { display: inline-flex; align-items: center; gap: 7px; }
.view-tab .ico { width: 17px; height: 17px; opacity: .75; }
.view-tab.active .ico { color: var(--accent); opacity: 1; }
@media (max-width: 640px) { .views { overflow-x: auto; } .view-tab { padding: 10px 10px; white-space: nowrap; } }

.metric-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
#avisos { align-items: flex-start; }

/* Pestaña Objetivos */
.obj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.obj-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.obj-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tone); }
.obj-card header { display: flex; align-items: center; gap: 10px; }
.obj-card h3 { margin: 0; font-size: 15px; flex: 1; }
.obj-card .kpi-ico { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); }
.obj-pct { font-size: 22px; font-weight: 800; color: var(--tone); font-variant-numeric: tabular-nums; }
.obj-value { margin: 0; font-size: 15px; }
.obj-value strong { font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.obj-bar { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.obj-bar span { display: block; height: 100%; border-radius: 999px; background: var(--tone); min-width: 4px; transition: width .4s ease; }
.obj-ritmo { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.obj-card.done { border-color: color-mix(in srgb, var(--tone-buy) 45%, var(--border)); }
.obj-card.done .obj-bar span { background: var(--tone-buy); }
.obj-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.obj-empty p { max-width: 46ch; margin: 0; }
@media (prefers-reduced-motion: reduce) { .kpi, .obj-bar span { transition: none; } }
#kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { #kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#metric-cards, #eco-cards { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
.kpi { min-width: 0; }
.kpi .kpi-value { font-size: clamp(22px, 2.1vw, 28px); overflow-wrap: anywhere; }

/* Avatares de compradoras */
.av-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; font-size: 13px; color: var(--text-2); }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-btn { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: transparent; color: var(--text-2); padding: 6px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg-btn .ico { width: 15px; height: 15px; }
.seg-btn.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-bottom: 18px; }
.av-card { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 9%, var(--surface)), var(--surface) 55%); }
.av-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tone); }
.av-card header { display: flex; gap: 10px; align-items: flex-start; }
.av-ico { width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent); }
.av-ico .ico { width: 21px; height: 21px; }
.av-kicker { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); }
.av-card h3 { margin: 2px 0 0; font-size: 15px; line-height: 1.3; text-wrap: balance; }
.av-frase { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.av-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.av-stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 8px 6px; text-align: center; }
.av-stats strong { font-size: 18px; white-space: nowrap; color: var(--tone); font-variant-numeric: tabular-nums; }
.av-stats span { font-size: 11px; line-height: 1.3; color: var(--muted); }
.av-bar { position: relative; height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.av-bar span { position: absolute; left: 0; height: 50%; border-radius: 999px; }
.av-bar .l { top: 0; background: var(--muted); opacity: .55; }
.av-bar .c { bottom: 0; background: var(--tone); }
.av-pie { margin: 0; font-size: 12px; color: var(--muted); }
.av-anti { --tone: var(--st-caliente); background: var(--surface); border-style: dashed; }
.av-vacio { display: flex; gap: 8px; align-items: center; padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-2); font-size: 13px; }
.av-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.sw { display: inline-block; width: 18px; height: 8px; border-radius: 4px; vertical-align: middle; }
.sw.l { background: var(--muted); opacity: .55; }
.sw.c { background: var(--tone-buy); }
.av-qs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.av-q { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.av-q h4 { margin: 0; font-size: 14px; line-height: 1.35; }
.av-row { display: flex; flex-direction: column; gap: 5px; }
.av-row.t-pocos { opacity: .7; }
.av-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.av-label { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; min-width: 0; }
.av-row-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.av-row-bar span { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: var(--muted); }
.av-row.t-mas .av-row-bar span { background: var(--tone-buy); }
.av-row.t-menos .av-row-bar span { background: var(--st-muy-caliente); }
.av-row-txt { font-size: 12.5px; color: var(--text-2); }
.av-row-txt strong { color: var(--text); }
.av-tag { flex: none; display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.av-tag.t-mas { color: var(--tone-buy); background: color-mix(in srgb, var(--tone-buy) 14%, transparent); }
.av-tag.t-menos { color: var(--st-muy-caliente); background: color-mix(in srgb, var(--st-muy-caliente) 14%, transparent); }
.av-tag.t-igual { color: var(--text-2); background: color-mix(in srgb, var(--muted) 16%, transparent); }
.av-tag.t-pocos { color: var(--muted); border-color: var(--border); border-style: dashed; }
.av-leyenda .av-tag { font-size: 10.5px; }
.av-filtros { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 16px; }
.av-filtro { display: flex; flex-direction: column; gap: 6px; }
.av-filtro > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.av-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.av-cifras > div { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.av-cifras strong { font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.av-cifras span { font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.av-claves { padding: 14px 16px; border-radius: 14px; margin: 0 0 18px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.av-claves h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; }
.av-claves h3 .ico { width: 18px; height: 18px; color: var(--accent); }
.av-claves p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.av-claves ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.av-claves li { display: flex; gap: 8px; font-size: 14px; line-height: 1.5; }
.av-clave { margin: 0; font-size: 15px; font-weight: 700; color: var(--tone); }
.av-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.av-datos strong { color: var(--text); }
.av-h { font-size: 15px; margin: 8px 0 6px; }
.av-leyenda { display: block; line-height: 1.9; font-size: 12.5px; }
.av-tablas { margin-top: 16px; }
.av-tablas summary { cursor: pointer; font-weight: 600; font-size: 13px; }
@media (max-width: 640px) { .av-qs { grid-template-columns: 1fr; } .av-stats strong { font-size: 16px; } }

/* Avatar en la lista de leads */
.av-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; white-space: nowrap;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); }
.av-chip .ico { width: 12px; height: 12px; }

/* Carrito frente a otro lanzamiento */
.cc { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.cc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-head h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cc-head .ico { color: var(--accent); }
.cc-pick { margin: 0; }
.cc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cc-kpis > div { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); }
.cc-kpis span { font-size: 12px; color: var(--text-2); }
.cc-kpis strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.cc-kpis em { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.4; }
.cc-kpis em.up { color: var(--tone-buy); font-weight: 700; }
.cc-kpis em.down { color: var(--st-muy-caliente); font-weight: 700; }
.cc-kpis .cc-prev { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.cc-kpis .cc-prev strong { color: var(--accent); }
.cc-leyenda { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-2); margin: 0; }
.sw.cur { background: var(--accent); }
.sw.prev { background: var(--muted); }
.cc-chart-wrap { overflow-x: auto; }
.cc-chart { width: 100%; max-width: 820px; min-width: 460px; height: auto; display: block; }
.cc-grid { stroke: var(--border); stroke-width: 1; }
.cc-ax { fill: var(--muted); font-size: 11px; }
.cc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cc-line.cur { stroke: var(--accent); }
.cc-line.prev { stroke: var(--muted); stroke-dasharray: 5 5; }
.cc-dot { stroke: var(--surface); stroke-width: 2; }
.cc-dot.cur { fill: var(--accent); }
.cc-dot.prev { fill: var(--muted); }
.cc-lbl { font-size: 12px; font-weight: 700; }
.cc-lbl.cur { fill: var(--text); }
.cc-lbl.prev { fill: var(--muted); }
.cc-nota { margin-top: 12px; }

/* Recursos lanzamiento (enlaces por categorías) */
.acc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.acc-cat { font: inherit; color: inherit; text-align: left; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.acc-cat:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.acc-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-cat .acc-ico { width: 42px; height: 42px; border-radius: 11px; flex: none; }
.acc-cat .acc-ico svg { width: 22px; height: 22px; }
.acc-cat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-cat-txt strong { font-size: 15px; }
.acc-cat-txt small { font-size: 12px; color: var(--muted); }
.acc-cat-txt em { font-style: normal; color: var(--st-caliente); font-weight: 600; }
.acc-cat-go { font-size: 24px; color: var(--muted); line-height: 1; }
.acc-detail { display: flex; flex-direction: column; gap: 12px; }
.acc-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-detail-head h3 { margin: 0; font-size: 16px; }
.acc-add { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .acc-cat { transition: none; } }

/* ---------- Tareas ---------- */
.login-hint { font-size: 12px; }
.tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.tareas-resumen { margin-bottom: 12px; }
.tareas-progress { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; --tone: var(--tone-buy); }
.tp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tp-pct { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip { font: inherit; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.tp-chip .ico { width: 14px; height: 14px; }
.tp-chip.bad { background: color-mix(in srgb, var(--error) 12%, var(--surface)); border-color: color-mix(in srgb, var(--error) 35%, transparent); color: var(--error); }
.tp-chip.warn { background: var(--chip-half-bg); color: var(--chip-half-ink); border-color: transparent; }
.tp-chip.mine { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); border-color: transparent; }
.tareas-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.tareas-toolbar .seg { flex-wrap: wrap; }
.tareas-empty p { margin: 8px 0; }
.tareas-none { text-align: center; padding: 24px 0; }
.tarea-fase { padding: 0; margin-bottom: 12px; overflow: hidden; }
.tf-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.tf-head h3 { margin: 0; font-size: 15px; flex: 1; }
.tf-ico { font-size: 18px; line-height: 1; }
.tf-count { font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tf-bar { width: 80px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.tf-bar span { display: block; height: 100%; background: var(--tone-buy); border-radius: 999px; }
.tareas-ul { list-style: none; margin: 0; padding: 0; }
.tarea { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background-color .15s; }
.tarea:last-child { border-bottom: 0; }
.tarea:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.tarea.is-mia { box-shadow: inset 3px 0 0 var(--accent); }
.tarea.is-vencida:not(.done) { box-shadow: inset 3px 0 0 var(--error); }
.t-check { position: relative; flex: none; width: 24px; height: 24px; margin-top: 1px; cursor: pointer; }
.t-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.t-box { display: block; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--border); background: var(--surface); transition: background-color .15s, border-color .15s; }
.t-check:hover .t-box { border-color: var(--tone-buy); }
.t-check input:checked + .t-box { background: var(--tone-buy); border-color: var(--tone-buy); }
.t-check input:checked + .t-box::after { content: ""; display: block; width: 6px; height: 11px; margin: 3px 0 0 7px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.t-check input:focus-visible + .t-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.t-check input:disabled + .t-box { opacity: .45; }
.t-check:has(input:disabled) { cursor: not-allowed; }
.t-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.t-titulo { font-weight: 600; overflow-wrap: anywhere; }
.t-open { font: inherit; font-weight: 600; text-align: left; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.t-open:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tarea.done .t-titulo { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.t-notas { font-size: 13px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.t-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--text-2); }
.t-meta .ico, .t-who .ico { width: 14px; height: 14px; }
.t-fecha, .t-who { display: inline-flex; align-items: center; gap: 5px; }
.t-fecha.vencida { color: var(--error); font-weight: 700; }
.t-fecha.hoy { color: var(--chip-half-ink); font-weight: 700; }
.t-rol { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); }
.t-nadie { font-style: italic; color: var(--muted); }
.t-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); font-size: 10px; font-weight: 800; flex: none; }
.equipo-table .t-avatar { width: 32px; height: 32px; font-size: 12px; }
.t-avatar { overflow: hidden; }
.t-avatar img, .tb-foto img, .cuenta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-ico.tb-foto { overflow: hidden; background: var(--surface-2); }
.cuenta-foto-row { display: flex; gap: 14px; align-items: center; }
.cuenta-foto { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); font-size: 24px; font-weight: 800; }
.cuenta-foto-acc { display: flex; flex-direction: column; gap: 6px; }
.cuenta-foto-acc .row { align-items: center; }
.cuenta-foto-acc label.btn { cursor: pointer; }
.equipo-table .t-who { gap: 10px; }
.t-hecha { color: var(--tone-buy); font-weight: 600; }
.t-actions { display: flex; gap: 2px; flex: none; }
.t-actions .btn { padding: 4px 8px; }
.dialog-sm { width: min(560px, calc(100vw - 32px)); }
.nueva-persona { padding: 12px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border); }
.nueva-persona p { margin: 0 0 8px; font-size: 13px; }
.roles-note { display: flex; flex-wrap: wrap; gap: 6px; }
.roles-note span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.equipo-table tr.inactivo td { opacity: .55; }
.eq-actions { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.equipo-add { align-items: flex-end; }
.eq-marca-chk { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 4px; }
.eq-embudos-nuevo { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card, transparent); }
.eq-embs-tit { margin: 0 0 8px; }
.eq-embs { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 6px 0 8px; }
.eq-emb { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 13px; }
.eq-emb:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.eq-emb-btn { text-align: left; max-width: 220px; white-space: normal; background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
@media (max-width: 600px) {
  .tarea { padding: 12px; gap: 10px; }
  .tf-bar { display: none; }
  .tareas-toolbar .spacer { display: none; }
  #tareas-resp { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .t-box, .tarea { transition: none; } }
.tareas-selbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; background: color-mix(in srgb, var(--error) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); position: sticky; top: 64px; z-index: 3; }
.btn.danger { background: var(--error); border-color: var(--error); color: #fff; }
.btn.danger-ghost { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); }
.t-sel { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; }
.t-sel input { width: 18px; height: 18px; accent-color: var(--error); cursor: pointer; margin: 0; }
.tarea.is-sel { background: color-mix(in srgb, var(--error) 7%, var(--surface)); }

/* ---------- Calendario ---------- */
.tone-info { --tone: var(--tone-info); } .tone-live { --tone: var(--tone-live); } .tone-accent { --tone: var(--tone-accent); } .tone-buy { --tone: var(--tone-buy); }
.cal-toolbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-nav .btn { padding: 6px 12px; }
.cal-nav h2 { margin: 0 0 0 8px; font-size: 20px; min-width: 190px; }
.cal-toggles { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; }
.cal-leg { display: inline-flex; align-items: center; gap: 6px; }
.cal-leg i { width: 18px; height: 6px; border-radius: 3px; background: var(--tone); }
.cal-leg-sep { width: 1px; height: 16px; background: var(--border); }
.cal { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal-head span { padding: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); text-align: center; }
.cal-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-day { font: inherit; color: inherit; text-align: left; background: var(--surface); border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0 6px 6px; min-height: 118px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; position: relative; min-width: 0; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.cal-day.out { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.cal-day.out .cal-num, .cal-day.out .cal-chips { opacity: .5; }
.cal-day.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-bands { display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; min-height: 4px; }
.cal-bands i { display: block; height: 4px; background: var(--tone); opacity: .85; }
.cal-num { font-size: 13px; font-weight: 700; color: var(--text-2); padding-top: 2px; }
.cal-day.past .cal-num { color: var(--muted); }
.cal-day.today .cal-num { color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 1px 7px; align-self: flex-start; margin-top: 2px; }
.cal-dow { font-weight: 600; text-transform: capitalize; color: var(--muted); }
.cal-day.today .cal-dow { color: inherit; }
.cal-chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-chip { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; line-height: 1.35; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text); }
.cal-chip .cc-ico { flex: none; font-size: 11px; }
.cal-chip .cc-time { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-chip .cc-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip.k-hito { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--text); font-weight: 700; }
.cal-chip.k-hito.other { background: var(--surface-2); color: var(--text-2); font-weight: 500; border: 1px dashed var(--border); }
.cal-chip.k-evento { background: color-mix(in srgb, var(--tone-info) 13%, var(--surface)); }
.cal-chip.k-evento.t-rrss { background: color-mix(in srgb, var(--tone-live) 13%, var(--surface)); }
.cal-chip.k-evento.t-publi { background: color-mix(in srgb, var(--tone-vip) 15%, var(--surface)); }
.cal-chip.k-evento.t-reunion { background: color-mix(in srgb, var(--tone-money) 14%, var(--surface)); }
.cal-chip.k-evento.cont { opacity: .7; border-left: 3px solid var(--tone-info); }
.cal-chip.k-tarea { background: transparent; border: 1px solid var(--border); color: var(--text-2); }
.cal-chip.k-tarea.mine { border-color: var(--accent); color: var(--text); }
.cal-chip.k-tarea.late { border-color: var(--error); color: var(--error); font-weight: 600; }
.cal-chip.k-tarea.done { text-decoration: line-through; color: var(--muted); }
.cal-chip.k-tarea.done .cc-ico { color: var(--tone-buy); text-decoration: none; }
.cal-more { font-size: 11px; font-weight: 700; color: var(--text-2); padding-left: 4px; }
.cal-dots { display: none; }
.cal-semana .cal-day { min-height: 300px; }
.cal-dia { margin-top: 12px; padding: 14px 16px; }
.cd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cd-head h3 { margin: 0; flex: 1; font-size: 16px; }
.cd-list { list-style: none; margin: 0; padding: 0; }
.cd-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); }
.cd-ico { font-size: 18px; width: 24px; text-align: center; flex: none; }
.cd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cd-notas { font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.cd-row.done strong { text-decoration: line-through; color: var(--muted); }
.cd-row.late:not(.done) strong { color: var(--error); }
.cd-row.other { opacity: .75; }
.sync-url { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 12px; }
.sync-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sync-how h3 { font-size: 14px; margin: 0 0 4px; }
.sync-how ol { margin: 0; padding-left: 18px; }
@media (max-width: 700px) {
  .cal-nav h2 { font-size: 17px; min-width: 0; }
  .cal-mes .cal-day { min-height: 64px; padding: 0 3px 4px; align-items: center; }
  .cal-mes .cal-chips { display: none; }
  .cal-mes .cal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
  .cal-dots i.d-hito { background: var(--accent); }
  .cal-dots i.d-evento { background: var(--tone-info); }
  .cal-dots i.late { background: var(--error); }
  .cal-mes .cal-bands { align-self: stretch; margin: 0 -3px; }
  .cal-head span { padding: 6px 0; font-size: 11px; }
  .cal-semana .cal-body { grid-template-columns: 1fr; }
  .cal-semana .cal-day { min-height: 0; border-right: 0; padding-bottom: 8px; }
  .cd-head h3 { flex: 1 1 100%; order: -1; }
}

/* ---------- Tablero kanban de tareas ---------- */
.t-encurso { font-weight: 700; color: var(--tone-info); }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.kb-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; min-height: 220px; transition: background-color .15s, box-shadow .15s; }
.kb-col.over { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); box-shadow: inset 0 0 0 2px var(--accent); }
.kb-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; border-bottom: 3px solid var(--kb); margin-bottom: 10px; }
.kb-head h3 { margin: 0; font-size: 15px; flex: 1; }
.kb-pendiente { --kb: var(--muted); } .kb-en-curso { --kb: var(--tone-info); } .kb-hecha { --kb: var(--tone-buy); }
.kb-count { font-size: 12px; font-weight: 700; min-width: 24px; text-align: center; padding: 1px 8px; border-radius: 999px; background: var(--surface); color: var(--text-2); }
.kb-list { display: flex; flex-direction: column; gap: 8px; }
.kb-empty { margin: 0; padding: 18px 8px; text-align: center; font-size: 13px; color: var(--muted); border: 2px dashed var(--border); border-radius: 10px; }
.kb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); cursor: grab; transition: transform .12s, box-shadow .12s, opacity .12s; }
.kb-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.kb-card.locked { cursor: default; }
.kb-card.dragging { opacity: .45; }
.kb-card.is-mia { border-left: 3px solid var(--accent); }
.kb-card.is-vencida:not(.done) { border-left: 3px solid var(--error); }
.kb-card.done .kb-titulo { text-decoration: line-through; color: var(--muted); }
.kb-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kb-fase { font-size: 11px; font-weight: 700; color: var(--text-2); background: var(--surface-2); padding: 2px 8px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-edit { font: inherit; border: 0; background: none; color: var(--text-2); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.kb-edit:hover { background: var(--surface-2); }
.kb-titulo { font-weight: 600; overflow-wrap: anywhere; }
.kb-notas { font-size: 12.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.kb-actions { display: flex; justify-content: space-between; }
.kb-move { font: inherit; font-size: 16px; font-weight: 700; line-height: 1; width: 30px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; }
.kb-move:hover { background: var(--surface-2); color: var(--text); }
.kb-move-ph { width: 30px; }
@media (max-width: 800px) {
  .kanban { grid-template-columns: 1fr; }
  .kb-col { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .kb-card, .kb-col { transition: none; } }

/* ---------- Descripción con formato ---------- */
.t-hab { margin-right: 5px; font-size: .9em; }
.t-media { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); padding: 0 7px; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
.kb-titulo.t-open { font-weight: 600; }
.rt-editor { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.rt-editor:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 25%, transparent); }
.rt-toolbar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 5px; background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
.rt-toolbar button { font: inherit; font-size: 13px; border: 0; background: none; color: var(--text); padding: 5px 8px; border-radius: 6px; cursor: pointer; min-width: 30px; }
.rt-toolbar button:hover { background: var(--surface); }
.rt-toolbar select { font-size: 13px; padding: 4px 6px; width: auto; }
.rt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.rt-area { min-height: 140px; max-height: 50vh; overflow-y: auto; padding: 10px 12px; outline: none; }
.rt-area:empty::before { content: attr(data-placeholder); color: var(--muted); }
.rich { line-height: 1.55; overflow-wrap: anywhere; }
.rich h2 { font-size: 18px; margin: 12px 0 6px; }
.rich h3 { font-size: 15px; margin: 10px 0 4px; }
.rich p, .rich div:not(.rt-video):not(.rt-frame):not(.rt-video-bar) { margin: 0 0 6px; }
.rich ul, .rich ol { margin: 4px 0 8px; padding-left: 22px; }
.rich li { margin: 2px 0; }
.rich a { color: var(--tone-info); text-decoration: underline; text-underline-offset: 2px; }
.rich blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--border); color: var(--text-2); }
.rich > :first-child { margin-top: 0; }
.rt-video { margin: 10px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #000; }
.rt-frame { position: relative; padding-top: 56.25%; }
.rt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rt-video-bar { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--surface-2); font-size: 12px; color: var(--text-2); }
.rt-video-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habitual-check { white-space: normal; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); line-height: 1.4; }
.habitual-check input { margin-top: 3px; }
.dialog-md { width: min(760px, calc(100vw - 32px)); }
.tv-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.tv-chip .ico { width: 14px; height: 14px; }
.tv-chip.late { color: var(--error); }
.tv-chip.ok { color: var(--tone-buy); }
.tv-notas { font-size: 15px; }
#tv-estado .seg-btn:disabled { opacity: .5; cursor: not-allowed; }
.tareas-selbar select { width: auto; }

/* ---------- Botones de la barra superior ---------- */
.tb-btn {
  --tb: var(--text-2);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 5px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tb) 28%, var(--border)); background: color-mix(in srgb, var(--tb) 7%, var(--surface)); color: var(--text);
  transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.tb-btn:hover { background: color-mix(in srgb, var(--tb) 15%, var(--surface)); border-color: color-mix(in srgb, var(--tb) 50%, var(--border)); transform: translateY(-1px); box-shadow: 0 3px 10px color-mix(in srgb, var(--tb) 18%, transparent); }
.tb-btn:active { transform: none; }
.tb-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.tb-btn[hidden] { display: none !important; }
.tb-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tb); color: #fff; flex: none; }
.tb-ico .ico { width: 16px; height: 16px; }
.tb-reload { --tb: var(--tone-buy); }
.tb-zoom { --tb: #2d8cff; }
.tb-config { --tb: var(--accent); }
.tb-cuenta { --tb: var(--tone-live); }
.tb-equipo { --tb: var(--tone-vip, var(--accent)); }
.tb-agencia { --tb: var(--tone-info, var(--accent)); }
.tb-logout { --tb: var(--muted); background: transparent; border-color: transparent; }
.tb-logout .tb-ico { background: var(--surface-2); color: var(--text-2); }
.tb-logout:hover { --tb: var(--error); }
.tb-logout:hover .tb-ico { background: var(--error); color: #fff; }
.tb-reload:disabled .tb-ico .ico { animation: tbSpin 1s linear infinite; }
@keyframes tbSpin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .tb-btn { padding: 4px; }
  .tb-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tb-ico { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .tb-btn { transition: none; } .tb-reload:disabled .tb-ico .ico { animation: none; } }

/* ---------- Tareas completadas ---------- */
.tareas-done > summary { list-style: none; cursor: pointer; }
.tareas-done > summary::-webkit-details-marker { display: none; }
.tareas-done:not([open]) > summary { border-bottom: 0; }
.tareas-done .tf-head { background: color-mix(in srgb, var(--tone-buy) 9%, var(--surface-2)); }
.td-chev { margin-left: auto; transition: transform .2s; color: var(--text-2); }
.tareas-done:not([open]) .td-chev { transform: rotate(-90deg); }
.tarea.completing .t-titulo, .kb-card.completing .kb-titulo { text-decoration: line-through; color: var(--muted); }
.tarea.completing, .kb-card.completing { opacity: .55; transition: opacity .3s; }
.tarea.completing .t-box, .kb-card.completing .t-box { background: var(--tone-buy); border-color: var(--tone-buy); }
.kb-row { display: flex; gap: 10px; align-items: flex-start; }
.kb-row .t-check { width: 22px; height: 22px; }
.kb-row .t-box { width: 22px; height: 22px; }
.kb-row .t-check input:checked + .t-box::after { margin: 2px 0 0 6px; }

/* ---------- Avisos del equipo (solo admin) ---------- */
.avisos-equipo { margin-bottom: 12px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--error) 35%, var(--border)); background: color-mix(in srgb, var(--error) 7%, var(--surface)); }
.ae-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ae-head strong { color: var(--error); }
.ae-ico { font-size: 20px; }
.ae-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ae-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ae-quien { font-weight: 800; min-width: 120px; }
.ae-task { font: inherit; font-size: 12.5px; text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.ae-task:hover { border-color: var(--error); }
.ae-dias { color: var(--error); font-weight: 700; margin-left: 4px; }

/* ---------- Anuncios ganadores ---------- */
.ganadores-card #gan-level { margin-bottom: 12px; }
.gan-podios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.gan-podio { display: flex; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); position: relative; overflow: hidden; }
.gan-podio::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--pc); }
.gan-podio.p1 { --pc: #d4a017; background: linear-gradient(160deg, color-mix(in srgb, #d4a017 14%, var(--surface)), var(--surface) 60%); border-color: color-mix(in srgb, #d4a017 45%, var(--border)); }
.gan-podio.p2 { --pc: #9aa3ad; }
.gan-podio.p3 { --pc: #b87333; }
.gp-medal { font-size: 34px; line-height: 1; }
.gp-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.gp-name { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gp-ruta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-nums { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.gp-ventas { font-size: 30px; font-weight: 800; color: var(--tone-buy); font-variant-numeric: tabular-nums; line-height: 1; }
.gp-lbl { font-weight: 700; color: var(--text-2); }
.gp-conv { margin-left: auto; font-size: 12.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tone-buy) 12%, var(--surface)); color: var(--tone-buy); }
.gp-extra { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--text-2); }
.gan-bar { position: relative; display: flex; align-items: center; gap: 8px; min-width: 120px; }
.gan-bar span { display: block; height: 10px; border-radius: 999px; background: var(--tone-buy); min-width: 4px; }
.gan-note { margin: 10px 0 0; font-size: 12.5px; }

/* Subcategorías de Preparación */
.tf-sub + .tf-sub { border-top: 1px solid var(--border); }
.tf-sub-head { display: flex; align-items: center; gap: 8px; padding: 9px 16px 7px 24px; background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); border-bottom: 1px dashed var(--border); }
.tf-sub-head h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); flex: 1; }
.tf-sub .tarea { padding-left: 24px; }
@media (max-width: 600px) { .tf-sub-head { padding-left: 14px; } .tf-sub .tarea { padding-left: 12px; } }

/* ---------- Tablero por fases + columnas extra ---------- */
.kanban { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.kanban > .kb-col { flex: 0 0 300px; scroll-snap-align: start; max-height: calc(100vh - 230px); display: flex; flex-direction: column; }
.kb-col .kb-list { overflow-y: auto; padding-right: 2px; min-height: 60px; }
.kb-col.kbt-hechas { background: color-mix(in srgb, var(--tone-buy) 6%, var(--surface-2)); }
.kb-col.kbt-extra { border-style: dashed; }
.kb-head { border-bottom-color: var(--kb) !important; }
.kb-prog { height: 4px; border-radius: 999px; background: var(--border); margin: -6px 2px 10px; overflow: hidden; }
.kb-prog span { display: block; height: 100%; background: var(--tone-buy); }
.kb-subhead { display: flex; align-items: center; gap: 6px; margin: 6px 2px 0; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.kb-subhead span { margin-left: auto; font-weight: 700; color: var(--muted); }
.kb-coledit { font: inherit; font-size: 18px; line-height: 1; border: 0; background: none; color: var(--text-2); cursor: pointer; padding: 0 6px; border-radius: 6px; }
.kb-coledit:hover { background: var(--surface); }
.kb-addcol { flex: 0 0 200px; min-height: 120px; font: inherit; font-weight: 700; color: var(--text-2); border: 2px dashed var(--border); border-radius: var(--radius); background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.kb-addcol span { font-size: 26px; line-height: 1; }
.kb-addcol:hover { border-color: var(--accent); color: var(--accent); }
.kb-card.done { opacity: .8; }
.kb-card.done .kb-titulo { text-decoration: line-through; color: var(--muted); }
.col-iconos, .col-colores { display: flex; flex-wrap: wrap; gap: 6px; }
.col-ico { font-size: 20px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.col-ico.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.col-color { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--surface); background: var(--c); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.col-color.on { box-shadow: 0 0 0 3px var(--c); }
.tv-estado { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tv-estado select { width: auto; }
@media (max-width: 800px) {
  .kanban { flex-direction: column; overflow-x: visible; }
  .kanban > .kb-col { flex: none; width: 100%; max-height: none; }
  .kb-col .kb-list { overflow: visible; }
  .kb-addcol { flex: none; width: 100%; min-height: 64px; }
}
.kb-titulo.t-open { display: block; cursor: pointer; }
.kb-card[draggable="true"] { -webkit-user-drag: element; }

/* ---------- Llamadas de valoración ---------- */
.ll-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ll-toolbar p { margin: 0; }
.ll-kpis { margin-bottom: 12px; }
.ll-pipe, .ll-motivos { padding: 12px 16px; margin-bottom: 12px; }
.ll-pipe h3, .ll-motivos h3 { margin: 0 0 8px; font-size: 14px; }
.ll-stages { display: flex; flex-wrap: wrap; gap: 6px; }
.ll-stage { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); }
.ll-stage i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ll-stage strong { font-variant-numeric: tabular-nums; }
.ll-mot { display: grid; grid-template-columns: minmax(140px, 260px) 1fr; gap: 10px; align-items: center; font-size: 13px; margin: 4px 0; }
.ll-sec { margin: 14px 0; }
.ll-sec h3 { font-size: 15px; margin: 0 0 8px; }
.ll-sec.warn h3 { color: var(--error); }
.ll-done > summary { list-style: none; cursor: pointer; }
.ll-done > summary::-webkit-details-marker { display: none; }
.ll-card { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; margin-bottom: 8px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.ll-card.pendiente { border-left: 4px solid var(--error); }
.ll-card.res-venta { border-left: 4px solid var(--tone-buy); }
.ll-card.res-perdido { border-left: 4px solid var(--muted); }
.ll-card.res-seguimiento { border-left: 4px solid var(--tone-live); }
.ll-card.cancelada { opacity: .6; }
.ll-when { flex: none; width: 74px; text-align: center; padding: 6px 0; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; }
.ll-dia { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: capitalize; }
.ll-hora { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ll-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ll-name { font-weight: 800; font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ll-etapa { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: #fff; background: var(--c); }
.ll-etapa.none { background: var(--surface-2); color: var(--text-2); }
.ll-contact { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.ll-contact a { display: inline-flex; align-items: center; gap: 4px; color: var(--tone-info); text-decoration: none; font-weight: 600; }
.ll-contact .ico { width: 14px; height: 14px; }
.ll-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ll-chip { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.setter-chip.humano { background: color-mix(in srgb, var(--warn, #b45309) 16%, var(--surface-2)); color: var(--text); }
.setter-chip.baja { opacity: .75; text-decoration: line-through; }
/* Rendimiento del equipo: cifras generales, el setter IA y una tarjeta por persona */
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.rp-kpi { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: 0 1px 2px rgb(0 0 0 / 4%); }
.rp-kpi-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--accent-soft); }
.rp-kpi div { display: flex; flex-direction: column; min-width: 0; }
.rp-kpi span { font-size: 12.5px; color: var(--muted); }
.rp-kpi strong { font-size: 26px; line-height: 1.15; }
.rp-kpi small { font-size: 12px; color: var(--muted); }
.rp-titulo { margin: 26px 0 12px; font-size: 16px; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 10px; }
.rp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 2px rgb(0 0 0 / 4%); transition: box-shadow .15s, transform .15s; }
.rp-card:hover { box-shadow: 0 6px 18px rgb(0 0 0 / 8%); transform: translateY(-1px); }
.rp-card > header, .rs-cab { display: flex; align-items: center; gap: 12px; }
.rp-card > header div, .rs-cab div { display: flex; flex-direction: column; min-width: 0; }
.rp-card > header strong, .rs-cab strong { font-size: 16px; }
.rp-card > header small, .rs-cab small { color: var(--muted); font-size: 12.5px; }
.rp-av { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 35%, var(--surface))); }
.rp-bloque h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.rp-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.rp-dato { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; }
.rp-dato strong { font-size: 18px; line-height: 1.2; }
.rp-dato span { font-size: 11.5px; color: var(--muted); }
.rp-card footer { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 13px; }
.rp-card footer span { color: var(--muted); flex: 1 1 auto; }
.rp-card footer small { color: var(--muted); font-weight: 400; }
.rp-card footer b { color: var(--tone-money, var(--text)); }
.rp-vacia { background: var(--surface-2); box-shadow: none; border-style: dashed; }
.rp-vacia .rp-av { filter: grayscale(1); opacity: .7; }
.rp-nada { margin: 0; font-size: 13px; color: var(--muted); }
.rend-setter { padding: 20px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 60%); display: flex; flex-direction: column; gap: 14px; }
.rs-av { font-size: 22px; }
.rs-estado { margin-left: auto; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.rs-estado.on { background: color-mix(in srgb, var(--wa) 16%, var(--surface)); color: var(--text); }
.rs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.rs-kpis > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; }
.rs-kpis span { font-size: 12px; color: var(--muted); }
.rs-kpis strong { font-size: 22px; }
.rs-kpis small { font-size: 11.5px; color: var(--muted); }
.rend-setter p { margin: 0; }
@media (max-width: 600px) {
  .rp-kpis, .rs-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rp-kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .rp-kpi-ico { width: 34px; height: 34px; font-size: 17px; }
  .rp-kpi strong { font-size: 22px; }
  .rs-cab { flex-wrap: wrap; }
  .rs-cab div { flex: 1 1 150px; }
  .rs-estado { margin-left: 56px; }
  .rend-setter { padding: 14px; }
  .rs-kpis strong { font-size: 19px; }
}
#cx-setter-url { width: 100%; }
.ll-chip.vip { background: color-mix(in srgb, var(--tone-vip) 15%, var(--surface)); color: var(--tone-vip); }
.ll-chip.buy { background: var(--chip-on-bg); color: var(--chip-on-ink); }
.ll-chip[class*="st-"] { color: var(--st); background: color-mix(in srgb, var(--st) 12%, var(--surface)); }
.ll-res { font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.ll-notas { margin-top: 4px; white-space: pre-wrap; color: var(--text-2); }
.ll-actions { flex: none; }
.ll-resultados { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ll-opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; font-weight: 700; }
.ll-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.ll-explica { font-size: 12.5px; margin: 0; }
@media (max-width: 640px) {
  .ll-card { flex-wrap: wrap; }
  .ll-actions { width: 100%; }
  .ll-actions .btn { width: 100%; }
  .ll-mot { grid-template-columns: 1fr; gap: 2px; }
}
.ll-opt span { display: inline-flex; align-items: center; gap: 6px; }
.ll-pct { font-size: 15px; font-weight: 700; color: var(--text-2); margin-left: 4px; }
.ll-ayuda { padding: 12px 16px; margin-bottom: 12px; background: color-mix(in srgb, var(--tone-info) 6%, var(--surface)); }
.ll-ayuda > summary { cursor: pointer; }
.ll-ayuda ol { margin: 10px 0 2px; padding-left: 20px; line-height: 1.55; }
.ll-ayuda li { margin: 4px 0; }
.ll-ayuda ul { margin: 4px 0; padding-left: 18px; }
.ll-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- Llamadas en calendario ---------- */
.ll-toolbar .seg { flex: none; }
.llc-leyenda { display: flex; flex-wrap: wrap; gap: 4px; }
.llc-leyenda .llc-chip { cursor: default; font-size: 11px; padding: 2px 8px; }
.llc-chip { --c: var(--muted); display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; font: inherit; font-size: 12px; text-align: left; padding: 4px 7px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--border)); border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: var(--text); cursor: pointer; }
.llc-chip:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 20%, var(--surface)); }
.llc-chip.pend { --c: var(--error); font-weight: 700; }
.llc-chip.prox { --c: var(--tone-info); }
.llc-chip.res-venta { --c: var(--tone-buy); }
.llc-chip.res-seguimiento { --c: var(--tone-live); }
.llc-chip.res-perdido { --c: #8a817b; }
.llc-chip.res-noshow { --c: var(--tone-vip); }
.llc-chip.res-reagendar, .llc-chip.cancel { --c: #b5aca5; opacity: .7; text-decoration: line-through; }
.llc-leyenda .llc-chip.cancel, .llc-leyenda .llc-chip.res-reagendar { text-decoration: none; }
.llc-hora { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.llc-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llc-day { cursor: default; }
.llc .cal-day:hover { background: var(--surface); }
.llc-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-2); font-size: 11px; color: var(--text-2); margin-left: 4px; }
.llc-more { font: inherit; border: 0; background: none; cursor: pointer; text-align: left; }
.llc.cal-semana .cal-day { min-height: 220px; }
@media (max-width: 700px) {
  .llc.cal-mes .cal-chips { display: flex; }
  .llc.cal-mes .llc-chip .llc-nombre { display: none; }
  .llc.cal-mes .llc-chip { padding: 2px 3px; font-size: 10px; justify-content: center; border-left-width: 3px; }
}
.llc-leyenda .llc-chip { width: auto; display: inline-flex; }
.views { overflow-x: auto; scrollbar-width: thin; }
.view-tab { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) { .ll-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ll-kpis .kpi-sub { font-size: 11px; } }

/* ---------- Fases de llamada ---------- */
.fase-chip { --c: #8a817b; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: color-mix(in srgb, var(--c) 80%, var(--text)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); white-space: nowrap; vertical-align: 1px; }
.fase-proxima { --c: #2f6aa8; } .fase-pendiente { --c: #b3261e; } .fase-pendiente_pago { --c: #c27c00; } .fase-seguimiento { --c: #6b4fc8; }
.fase-venta { --c: #128c4a; } .fase-perdido { --c: #6f6660; } .fase-noshow { --c: #a86b00; } .fase-reagendar { --c: #4f7fb8; } .fase-cancelada { --c: #9b928b; }
.llf-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.llf-f { --c: var(--accent); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.llf-f b { font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); }
.llf-f.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent); }
.llf-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; margin-bottom: 8px; border-radius: var(--radius); border: 1px solid var(--border); border-left: 4px solid var(--c, var(--border)); background: var(--surface); box-shadow: var(--shadow); }
.llf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.llf-name { font-weight: 800; font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.llf-meta { font-size: 12.5px; color: var(--text-2); }
.llf-notas { font-size: 13px; white-space: pre-wrap; background: var(--surface-2); padding: 6px 10px; border-radius: 8px; }
.llf-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.llf-wa { font-size: 11.5px; }
.ll-card.res-pendiente_pago { border-left: 4px solid #c27c00; }
.llc-chip.res-pendiente_pago { --c: #c27c00; }
#f-llamada[hidden] { display: none !important; }
@media (max-width: 640px) { .llf-row { flex-direction: column; } .llf-actions { width: 100%; align-items: stretch; } }
.ll-chip.origen-publi { background: color-mix(in srgb, var(--tone-info) 14%, var(--surface)); color: var(--tone-info); }
.ll-chip.origen-organico { background: color-mix(in srgb, var(--tone-buy) 13%, var(--surface)); color: var(--tone-buy); }
.ll-chip.origen-nd { font-weight: 500; }
.llc.cal-semana .llc-chip { align-items: flex-start; }
.llc.cal-semana .llc-nombre { white-space: normal; display: flex; flex-direction: column; }
.llc-extra { font-size: 11px; color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ll-sub .ll-chip { margin-left: 4px; }
.llc-extra { align-self: flex-start; text-align: left; }
.llc.cal-semana .llc-nombre { align-items: flex-start; text-align: left; }

/* ---------- Roles y permisos ---------- */
.roles-table th, .roles-table td { vertical-align: middle; }
.roles-grupo { text-align: center; border-bottom: 1px solid var(--border); }
.roles-perm { font-size: 11.5px; text-transform: none; letter-spacing: 0; text-align: center; min-width: 78px; line-height: 1.25; }
.roles-cell { text-align: center; }
.roles-cell input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.roles-admin td { background: var(--surface-2); }
.rol-label { width: 160px; font-weight: 700; }
.roles-add { margin-top: 12px; align-items: flex-end; }
#config-dialog { width: min(1120px, calc(100vw - 32px)); }
.rol-label { width: 190px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.form-ads { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.form-ads h4 { margin: 0 0 4px; font-size: 14px; }
.form-ads p { margin: 0 0 10px; font-size: 12.5px; }

/* ---------- Comentarios de las tareas ---------- */
.coments { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.coments-h { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; }
.coments-h .ico { width: 16px; height: 16px; }
.coments-vacio { margin: 0; font-size: 13px; }
.coments-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.coment { display: flex; gap: 10px; align-items: flex-start; }
.coment .t-avatar, .coment-form .t-avatar { width: 30px; height: 30px; font-size: 11px; }
.coment-body { flex: 1; min-width: 0; background: var(--surface-2); border-radius: 4px 12px 12px 12px; padding: 8px 12px; }
.coment.is-mencion .coment-body { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.coment-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.coment-head .muted { font-size: 12px; }
.coment-del { margin-left: auto; background: none; border: 0; color: var(--text-2); cursor: pointer; font-size: 12px; padding: 0 2px; opacity: .6; }
.coment-del:hover { opacity: 1; color: var(--error); }
.coment-txt { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; margin-top: 2px; }
.coment-txt a { color: var(--accent); }
.mention { font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 4px; padding: 0 3px; }
.mention.me { background: var(--accent); color: var(--accent-ink); }
.coment-form { display: flex; gap: 10px; align-items: flex-start; }
.coment-input { flex: 1; position: relative; }
.coment-new { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); resize: vertical; min-height: 42px; box-sizing: border-box; }
.coment-new:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); }
.coment-status { min-height: 1em; }
.mention-list { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / .15); padding: 4px; display: flex; flex-direction: column; }
.mention-list[hidden] { display: none; }
.mention-list button { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; text-align: left; background: none; border: 0; border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--text); }
.mention-list button small { margin-left: auto; }
.mention-list button.active, .mention-list button:hover { background: var(--surface-2); }

/* Tareas: se abren al pulsar en cualquier parte */
.tarea[data-trow], .kb-card[data-kid] { cursor: pointer; }

/* ---------- Campanita de notificaciones ---------- */
.notif-wrap { position: relative; display: inline-flex; }
.tb-notif { --tb: #c0841a; position: relative; padding: 4px; }
.tb-notif.has-new .tb-ico { animation: notifRing 1.2s ease 1; }
.notif-count { position: absolute; top: -4px; left: 22px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--error); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.notif-count[hidden] { display: none; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: min(400px, calc(100vw - 32px)); max-height: min(560px, 75vh); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgb(0 0 0 / .18); padding: 6px; }
.notif-panel[hidden] { display: none; }
.notif-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 10px; font-size: 15px; }
.notif-head .muted { font-size: 12px; }
.notif-grupo h4 { margin: 8px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.notif-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; font: inherit; font-size: 13.5px; background: none; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--text); }
.notif-item:hover { background: var(--surface-2); }
.notif-item.nueva { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.notif-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 14px; font-weight: 800; color: var(--accent); }
.notif-item.t-vencida .notif-ico, .notif-item.t-equipo .notif-ico { background: color-mix(in srgb, var(--error) 15%, var(--surface)); }
.notif-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.notif-cita { color: var(--text-2); font-size: 12.5px; overflow-wrap: anywhere; }
.notif-when { color: var(--text-2); font-size: 11.5px; }
.notif-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; }
.notif-vacio { padding: 10px 12px 14px; margin: 0; }
@keyframes notifRing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@media (max-width: 640px) { .notif-panel { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .tb-notif.has-new .tb-ico { animation: none; } }

/* Mensajes de WhatsApp (Setting hoy) */
.wa-plantillas { margin-top: 18px; padding: 0; }
.wa-plantillas > summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.wa-plantillas > summary::-webkit-details-marker { display: none; }
.wa-plantillas > summary::after { content: '▾'; margin-left: auto; color: var(--text-2); transition: transform .15s; }
.wa-plantillas[open] > summary::after { transform: rotate(180deg); }
.wa-plantillas > summary > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.wa-pl-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #25d366 18%, var(--surface)); font-size: 17px; }
.wa-pl-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; border-top: 1px solid var(--border); }
.wa-pl-body .cfg-h3 { margin: 14px 0 0; }
.wa-pl-save { align-items: center; position: sticky; bottom: 0; background: var(--surface); padding-top: 8px; }

/* ---------- Embudos: menú lateral ---------- */
body.embudo-vsl .lanz-only { display: none !important; }
.app-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; }
.sidebar { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 6px; padding: 16px 0 16px 16px; }
.sb-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); padding: 0 10px 4px; }
.sb-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--text); background: none; border: 1px solid transparent; border-radius: 12px; padding: 10px; cursor: pointer; }
.sb-item:hover { background: var(--surface); border-color: var(--border); }
.sb-item.active { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.sb-item.active .sb-ico { background: var(--accent); }
.sb-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--surface-2); }
.sb-txt { display: flex; flex-direction: column; min-width: 0; }
.sb-txt strong { font-size: 14.5px; }
.sb-txt small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body > .container { min-width: 0; width: 100%; }
@media (max-width: 900px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; flex-direction: row; padding: 12px 16px 0; overflow-x: auto; }
  .sb-title { display: none; }
  .sb-item { flex: 1 1 0; min-width: 150px; padding: 8px; }
  .sb-ico { width: 30px; height: 30px; font-size: 15px; }
}

/* ---------- VSL ---------- */
.vsl-rango { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px 14px; margin-bottom: 14px; }
.vsl-rango[hidden] { display: none; }
.vr-semanas .seg-btn { white-space: nowrap; }
.vr-texto { margin-left: auto; font-weight: 700; color: var(--text-2); font-size: 13.5px; }
.vm-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.vm-embudo { display: flex; flex-direction: column; gap: 8px; }
.vm-paso { display: grid; grid-template-columns: 190px minmax(0, 1fr) 110px; gap: 10px; align-items: center; font-size: 14px; }
.vm-paso-bar { height: 22px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.vm-paso-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #fff)); border-radius: 6px; }
.vm-paso-n { text-align: right; font-variant-numeric: tabular-nums; }
.vm-nota { margin: 6px 0 0; font-size: 12.5px; }
.vm-total td { border-top: 2px solid var(--border); }
.vm-chart { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: end; height: 160px; padding-top: 18px; }
.vm-col { position: relative; height: 100%; display: flex; align-items: flex-end; }
.vm-reg { display: block; width: 100%; min-height: 1px; background: color-mix(in srgb, var(--accent) 55%, var(--surface)); border-radius: 3px 3px 0 0; }
.vm-col:hover .vm-reg { background: var(--accent); }
.vm-venta { position: absolute; left: 50%; bottom: calc(100% - 16px); transform: translateX(-50%); min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--tone-buy); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.vm-eje { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-2); margin-top: 6px; flex-wrap: wrap; }
.vm-leyenda { display: inline-flex; align-items: center; gap: 6px; }
.vm-sw-reg { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.vm-sw-venta { background: var(--tone-buy); border-radius: 50%; }
.vl-resumen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vl-chip { font: inherit; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.vl-chip strong { font-variant-numeric: tabular-nums; }
.vl-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.vl-table td { vertical-align: top; }
.vl-origen { display: inline-block; margin-top: 4px; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.vl-origen.publi { background: color-mix(in srgb, var(--tone-info) 14%, var(--surface)); color: var(--tone-info); }
.vl-video { width: 90px; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 6px 0 2px; }
.vl-video span { display: block; height: 100%; background: var(--tone-info); border-radius: 999px; }
.vl-cita { white-space: nowrap; }
.vl-more { justify-content: center; margin-top: 10px; }
.notif-emb { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
@media (max-width: 640px) {
  .vm-paso { grid-template-columns: 120px minmax(0, 1fr) 80px; font-size: 13px; }
  .vr-texto { margin-left: 0; width: 100%; }
}
.vsl-rango [hidden], #vl-mas[hidden] { display: none !important; }

/* Calendario: la fase colorea el día entero; los hitos lo enmarcan y su etiqueta va en color sólido */
.cal-day.con-fase { background: color-mix(in srgb, var(--tone) 14%, var(--surface)); }
.cal-day.con-fase:hover { background: color-mix(in srgb, var(--tone) 22%, var(--surface)); }
.cal-day.con-fase .cal-bands i { height: 6px; background: var(--tone); opacity: 1; }
.cal-day.out.con-fase { background: color-mix(in srgb, var(--tone) 7%, var(--surface-2)); }
.cal-day.dia-hito { box-shadow: inset 0 0 0 3px var(--accent); }
.cal-day.dia-hito.dia-webinar { box-shadow: inset 0 0 0 3px #d93025; }
.cal-day.dia-hito.sel { box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 5px var(--surface); }
.cal-chip.k-hito:not(.other) { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.cal-chip.k-hito.h-webinar:not(.other) { background: #d93025; color: #fff; }
.cal-chip.k-hito:not(.other) .cc-time { color: inherit; opacity: .9; }

/* ---------- Varios clientes ---------- */
body:not(.is-superadmin) .superadmin-only { display: none !important; }
body:not(.is-agencia) .agencia-only { display: none !important; }
body:not(.can-operativa) .operativa-only { display: none !important; }
/* Inicio de un admin de proyecto (no de la agencia): acceso directo a la Operativa de sus proyectos. */
body:not(.can-operativa) .operativa-solo-proyecto, body.is-agencia .operativa-solo-proyecto { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cliente-pick select { font: inherit; font-weight: 800; font-size: 15px; padding: 5px 30px 5px 12px; border-radius: 999px; border: 1px solid var(--border); background-color: color-mix(in srgb, var(--cliente, var(--accent)) 10%, var(--surface)); color: var(--text); cursor: pointer; max-width: 260px; }
.cliente-pick[hidden] { display: none; }
.sa-badge { background: var(--accent); color: var(--accent-ink); }
.eq-clientes { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.eq-cli { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.eq-accesos { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--surface-2); }
.acc-clis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.acc-cli { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); }
.eq-fuera { margin-top: 12px; }
.eq-fuera summary { cursor: pointer; font-weight: 700; color: var(--text-2); }
.cl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cl); flex: none; }
.cl-nombre { font: inherit; font-weight: 800; font-size: 16px; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; background: transparent; color: var(--text); flex: 1; min-width: 120px; }
.cl-nombre:hover, .cl-nombre:focus { border-color: var(--border); background: var(--surface); }
.cl-datos { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cl-estado.ok { color: var(--tone-buy); font-weight: 700; }
.cl-estado.ko { color: var(--error); font-weight: 700; }
.cl-acciones { flex-wrap: wrap; align-items: center; }
.cl-ayuda { margin-top: 14px; font-size: 13px; }
.cl-ayuda ol { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* Menú lateral: embudos del cliente y «+» */
.sb-items { display: flex; flex-direction: column; gap: 6px; }
.sb-add { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--text-2); background: none; border: 1px dashed var(--border); border-radius: 12px; padding: 8px 10px; cursor: pointer; margin-top: 4px; }
.sb-add:hover { color: var(--text); border-color: var(--accent); background: var(--surface); }
.sb-add .sb-ico { background: transparent; font-weight: 800; }
@media (max-width: 900px) { .sb-items { flex-direction: row; } .sb-add { width: auto; flex: none; margin-top: 0; } .sb-add .sb-txt { display: none; } }
.emb-tipos { display: flex; flex-direction: column; gap: 10px; }
.emb-grupo { margin: 6px 0 -2px; }
.emb-tipo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.emb-tipo:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.emb-tipo input { margin-top: 4px; accent-color: var(--accent); }
.emb-tipo > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.emb-tipo small { color: var(--text-2); line-height: 1.4; }
.emb-ico { font-size: 22px; line-height: 1; }
input[type="color"] { width: 64px; height: 36px; padding: 2px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }

/* Guías (nuevo embudo, nuevo cliente) y pestañas del embudo */
.emb-pestanas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.emb-pest { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.emb-pest:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.emb-pest input { margin-top: 3px; accent-color: var(--accent); }
.emb-pest > span { display: flex; flex-direction: column; gap: 2px; }
.emb-pest small { color: var(--text-2); font-size: 12px; line-height: 1.35; }
.emb-guia { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 10px 14px; }
.emb-guia > summary { cursor: pointer; font-weight: 800; }
.guia-sec h4 { margin: 12px 0 6px; font-size: 14px; }
.guia-sec ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; }
.guia-sec code { font-size: 12px; overflow-wrap: anywhere; }
/* Añadir cliente: 1 Datos · 2 Integrar el CRM (en el paso 2 solo se ve la guía) */
.cl-integrando > p.muted, .cl-integrando #clientes-list { display: none; }
.cl-pasos-rail { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 14px; flex-wrap: wrap; }
.cl-pasos-rail li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-weight: 700; font-size: 13px; }
.cl-pasos-rail b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--border); color: var(--text); font-size: 12px; }
.cl-pasos-rail li.activo { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--text); }
.cl-pasos-rail li.activo b { background: var(--accent); color: #fff; }
.cl-pasos-rail li.hecho b { background: var(--tone-buy); color: #fff; }
.cl-meta-campo { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; }
.cl-meta-campo > label, .cl-meta-campo > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.cl-meta-ayuda { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); padding: 8px 12px; font-size: 13px; line-height: 1.5; }
.cl-meta-ayuda > summary { cursor: pointer; font-weight: 700; color: var(--text); }
.cl-meta-ayuda > summary small { font-weight: 600; color: var(--error); margin-left: 6px; }
.cl-meta-ayuda p { margin: 8px 0; }
.cl-meta-ayuda ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.cl-meta-ayuda code { overflow-wrap: anywhere; }
.cl-meta-ayuda [data-copiar], .crm-cuerpo [data-copiar] { display: inline-flex; padding: 1px 8px; min-height: 0; font-size: 12px; line-height: 1.6; vertical-align: baseline; border: 1px solid var(--border); border-radius: 6px; margin: 0 2px; }
.crm-hero { border: 1px solid var(--border); border-top: 4px solid var(--cl); border-radius: 14px; padding: 14px 16px; background: var(--surface); margin-bottom: 12px; }
.crm-hero h3 { margin: 0 0 6px; font-size: 18px; }
.crm-hero p { margin: 0 0 10px; color: var(--text-2); line-height: 1.5; }
.crm-barra { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: 4px; }
.crm-barra span { display: block; height: 100%; background: var(--tone-buy); border-radius: inherit; transition: width .4s ease; }
.crm-pasos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.crm-paso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color .2s, background .2s, opacity .2s; }
.crm-paso.actual { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.crm-paso.hecho { opacity: .7; background: color-mix(in srgb, var(--tone-buy) 6%, var(--surface)); }
.crm-paso.hecho .crm-cuerpo p { display: none; }
.crm-paso.revisar { border-color: var(--error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 18%, transparent); opacity: 1; }
.crm-paso.revisar .crm-cuerpo p { display: block; }
.crm-check { flex: none; cursor: pointer; position: relative; }
.crm-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.crm-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid var(--border); background: var(--surface); color: var(--text-2); }
.crm-paso.actual .crm-num { border-color: var(--accent); color: var(--accent); }
.crm-paso.hecho .crm-num { background: var(--tone-buy); border-color: var(--tone-buy); color: #fff; }
.crm-check input:focus-visible + .crm-num { outline: 2px solid var(--accent); outline-offset: 2px; }
.crm-cuerpo { flex: 1; min-width: 0; }
.crm-cuerpo h4 { margin: 4px 0 4px; font-size: 15px; }
.crm-cuerpo p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.crm-cuerpo code { overflow-wrap: anywhere; }
.crm-tag { font-size: 11px; font-weight: 800; color: #fff; background: var(--error); border-radius: 99px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.crm-aviso { color: var(--warn, #b7791f); font-weight: 600; }
.crm-error { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--error) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--error) 40%, var(--border)); font-size: 13.5px; line-height: 1.5; }
.crm-error small { display: block; margin-top: 4px; color: var(--text-2); overflow-wrap: anywhere; }
.crm-pie { margin-top: 12px; align-items: center; flex-wrap: wrap; }
.crm-ok { text-align: center; padding: 28px 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--tone-buy) 40%, var(--border)); background: color-mix(in srgb, var(--tone-buy) 8%, var(--surface)); animation: crm-entra .5s ease; }
.crm-ok h3 { margin: 10px 0 6px; font-size: 22px; }
.crm-ok p { max-width: 560px; margin: 0 auto 16px; color: var(--text-2); line-height: 1.55; }
.crm-ok-ico { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--tone-buy); color: #fff; font-size: 34px; font-weight: 900; display: grid; place-items: center; animation: crm-pop .6s cubic-bezier(.2, 1.6, .4, 1); }
.crm-ok-acc { justify-content: center; flex-wrap: wrap; }
.cl-pasos-rail small { font-weight: 600; opacity: .75; }
.crm-hecho-banner { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--tone-buy) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone-buy) 35%, var(--border)); color: var(--tone-buy); font-size: 14px; animation: crm-entra .4s ease; }
.crm-hecho-banner strong { color: var(--text); }
.crm-campo { gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.crm-campo input { flex: 1 1 220px; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.crm-resumen { list-style: none; padding: 0; margin: 0 auto 14px; display: flex; flex-direction: column; gap: 6px; align-items: center; font-weight: 700; font-size: 14px; }
.crm-resumen .ok { color: var(--tone-buy); }
.crm-resumen .pend { color: var(--text-2); font-weight: 600; }
@keyframes crm-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes crm-pop { from { transform: scale(.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .crm-ok, .crm-ok-ico { animation: none; } }
.emb-tipos[hidden] { display: none; }
/* ⚙️ junto a cada embudo del menú lateral */
.sb-row { position: relative; display: flex; }
.sb-row .sb-item { padding-right: 34px; }
.sb-edit { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; opacity: .35; font-size: 14px; }
.sb-row:hover .sb-edit, .sb-edit:focus-visible { opacity: 1; background: var(--surface-2); }
@media (max-width: 900px) { .sb-row { flex: 1 1 0; min-width: 160px; } .sb-edit { opacity: .8; } }
.emb-pest input[type="checkbox"], .emb-tipo input[type="radio"] { width: auto; flex: none; }

/* ---------- Auditor ---------- */
.tb-auditor { --tb: #6b4fc8; position: relative; }
.tb-auditor .notif-count { left: 24px; }
.tb-auditor.has-crit .tb-ico { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 35%, transparent); }
.aud-cabecera { display: flex; flex-direction: column; gap: 8px; }
.aud-resumen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aud-chip { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13.5px; }
.aud-chip.n-critico { background: color-mix(in srgb, var(--error) 12%, var(--surface)); }
.aud-chip.n-importante { background: color-mix(in srgb, #e8890c 14%, var(--surface)); }
.aud-chip.n-aviso { background: color-mix(in srgb, #e0b400 14%, var(--surface)); }
.aud-ok { font-weight: 800; color: var(--tone-buy); }
.aud-prox { margin: 0; font-size: 14px; }
.aud-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aud-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; background: var(--surface); }
.aud-item.n-critico { border-left-color: var(--error); }
.aud-item.n-importante { border-left-color: #e8890c; }
.aud-item.n-aviso { border-left-color: #e0b400; }
.aud-ico { font-size: 14px; line-height: 1.6; }
.aud-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aud-txt small { color: var(--text-2); line-height: 1.4; }
.aud-area { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); font-weight: 700; }
.aud-acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.aud-vacio { font-size: 15px; padding: 20px 0; text-align: center; }
.aud-ign { margin-top: 14px; }
.aud-ign summary { cursor: pointer; color: var(--text-2); font-weight: 700; }
.aud-ign .aud-item { opacity: .6; }
.aud-nota { font-size: 12.5px; }
@media (max-width: 640px) { .aud-item { flex-wrap: wrap; } .aud-acc { width: 100%; justify-content: flex-start; } }

/* Equipo → Historial */
.hist-bar { align-items: flex-end; }
.hist-table td { white-space: nowrap; }
.hist-table td:last-child { white-space: normal; }
.hist-copias { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; background: var(--surface); }
.hist-copias summary { cursor: pointer; }
.hist-copias ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hist-copias li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Verificación en dos pasos y Equipo → Seguridad */
.ok-txt { color: var(--chip-on-ink); font-weight: 600; }
.cuenta-2fa { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.cuenta-2fa p { margin: 0; }
.dospasos-alta { display: flex; flex-direction: column; gap: 8px; }
.qr-box { align-self: center; padding: 10px; background: #fff; border-radius: 10px; line-height: 0; }
.qr-box:empty { display: none; }
.qr-box img, .qr-box canvas { display: block; max-width: 100%; height: auto; }
.secreto { word-break: break-all; user-select: all; }
.notice.recup { display: block; }
#hist-ambito { min-width: 320px; }
.recup-lista { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 28px; margin: 8px 0; padding: 0; font-size: 14px; }
.small { font-size: 12px; }
.seg-tabla td, .seg-tabla th { white-space: nowrap; }
.seg-ajuste { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.seg-ajuste input { width: auto; margin-top: 3px; }
.perm-lista { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.perm-lista li { display: grid; grid-template-columns: 24px 1fr; gap: 4px 8px; align-items: start; }
.perm-lista li small { grid-column: 2; }

/* Configuración: vídeos 2-4 del lanzamiento */
.cfg-video { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px 4px; margin: 0 0 12px; }
.cfg-video legend { font-weight: 700; padding: 0 6px; }
.videos-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 280px; }

/* Objetivos y calculadora */
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.obj-form { padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.obj-form h3, .calc h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.calc { padding: 16px; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.calc-h { margin: 14px 0 6px; }
.calc-esc { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.calc-card { border: 1px solid var(--border); border-top: 4px solid var(--tone-info); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.calc-card.tone-buy { border-top-color: var(--tone-buy); }
.calc-card.tone-warn { border-top-color: var(--st-caliente); }
.calc-card header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.calc-card h4 { margin: 0; }
.calc-card dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.calc-card dl > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.calc-card dt { color: var(--text-2); font-size: 13px; }
.calc-card dd { margin: 0; text-align: right; display: flex; flex-direction: column; }
.calc-card dd small { color: var(--muted); font-size: 11px; }
.calc-card strong.ok { color: var(--chip-on-ink); }
.calc-card strong.warn { color: var(--st-caliente); }
.calc-card strong.mal { color: var(--error); }
.calc-proy td, .calc-proy th { vertical-align: top; }
.calc-sug { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.calc-hist summary { cursor: pointer; }
.marca-preg { flex-wrap: nowrap; gap: 8px; margin-bottom: 8px; }
.marca-preg .mp-campo { flex: 1 1 30%; min-width: 0; }
.marca-preg .mp-nombre { flex: 2 1 45%; min-width: 0; }
.marca-preg .mp-tipo { flex: 1 1 22%; min-width: 0; }
@media (max-width: 640px) { .marca-preg { flex-wrap: wrap; } }

/* Panel de agencia */
.dialog-xl { width: min(1200px, calc(100vw - 32px)); max-width: none; }
.ag-bar { align-items: center; margin-bottom: 12px; }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.ag-card { border: 1px solid var(--border); border-top: 4px solid var(--cl, var(--accent)); border-radius: 12px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.ag-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-card h3 { margin: 0; font-size: 17px; }
.ag-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ag-kpis div { background: var(--surface-2); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; }
.ag-kpis span { font-size: 11px; color: var(--muted); }
.ag-kpis strong { font-size: 16px; }
.ag-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.ag-badge.crit { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); border-color: transparent; font-weight: 700; }
.ag-badge.imp { background: color-mix(in srgb, var(--st-caliente) 16%, transparent); color: var(--text); border-color: transparent; }
.ag-badge.ok { background: var(--chip-on-bg); color: var(--chip-on-ink); border-color: transparent; }
.ag-crit { margin: 0; padding-left: 18px; color: var(--error); font-size: 13px; }
.ag-alta summary { cursor: pointer; font-size: 13px; }
.ag-alta ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ag-alta-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.ag-alta-bar span { display: block; height: 100%; background: var(--tone-buy); }
.ag-vsl { font-size: 13px; }
.emb-tipos.apagado { opacity: .45; pointer-events: none; }
.emb-plantilla { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.emb-plantilla .chk { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.emb-plantilla .chk input { width: auto; }

/* Portal del cliente (solo lectura) */
.portal { min-height: 100vh; background: var(--bg); }
.portal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.portal-head h1 { margin: 0; font-size: 22px; }
.portal-head p { margin: 2px 0 0; }
.portal-body { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; display: flex; flex-direction: column; gap: 18px; }
.portal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.portal-card h2 { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.portal-card h3 { margin: 18px 0 8px; font-size: 15px; }
.portal-card > p { margin: 4px 0 0; }
.portal-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.portal-kpi { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.portal-kpi span { font-size: 12px; color: var(--muted); }
.portal-kpi strong { font-size: 22px; }
.portal-kpi small { font-size: 11px; color: var(--muted); }
.portal-obj { margin-bottom: 10px; }
.portal-obj .row { gap: 6px; font-size: 14px; }
.portal-hitos { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.portal-nota { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.badge.tone-info { background: color-mix(in srgb, var(--tone-info) 16%, transparent); }
.badge.tone-buy { background: var(--chip-on-bg); color: var(--chip-on-ink); }
.chk-field .chk { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.chk-field .chk input { width: auto; }
.metric-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Comparativas y previsión */
.cmp-modos { margin: 4px 0 12px; flex-wrap: wrap; }
.seg-btn.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cmp-delta.up { color: var(--chip-on-ink); font-weight: 700; }
.cmp-delta.down { color: var(--error); font-weight: 700; }
.cmp-alertas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cmp-alertas li { padding: 8px 12px; border-radius: 8px; background: var(--surface-2); }
.cmp-alertas li.mal { background: color-mix(in srgb, var(--error) 10%, transparent); }
.cmp-alertas li.bien { background: var(--chip-on-bg); }
.card.prev { padding: 16px; margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.card.prev h3 { margin: 0; display: flex; gap: 8px; align-items: center; }
.prev-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.prev-kpis div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.prev-kpis span { font-size: 12px; color: var(--muted); }
.prev-kpis strong { font-size: 24px; }
.prev-mal { color: var(--error); font-weight: 700; }
.prev-warn { color: var(--st-caliente); font-weight: 700; }
.prev-ok { color: var(--chip-on-ink); font-weight: 700; }

/* Configuración → Etiquetas GHL */
.tags-auto code { white-space: nowrap; }
[data-panel="etiquetas"] .cfg-h4 { margin-top: 14px; color: var(--muted, inherit); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
[data-panel="etiquetas"] .snapshot-box { margin-top: 14px; }

/* Asistencia por tipo de tráfico: diferencia frío − templado en puntos */
.dif-mas { color: var(--ok, #1e7a3c); }
.dif-menos { color: var(--error, #b3261e); }

/* «Ver como» (Agencia) */
.portal-aviso { margin: 0; padding: 10px 24px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-bottom: 1px solid var(--border); font-size: 14px; }
.vercomo-bar { align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.vercomo-bar .field { min-width: 260px; }

/* Comercial: subpestañas Setting hoy / Llamadas */
.subviews { display: flex; gap: 6px; margin: -6px 0 14px; flex-wrap: wrap; }
.subview-tab { font: inherit; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; }
.subview-tab .ico { width: 16px; height: 16px; opacity: .75; }
.subview-tab.active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
.subview-tab.active .ico { color: var(--accent); opacity: 1; }
/* Métricas: categorías */
.subviews.msubs { margin: 6px 0 16px; clear: both; }

/* Leads: columna Encuesta */
.enc-si, .enc-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; font-size: 14px; }
.enc-si { color: #fff; background: var(--ok, #1e7a3c); }
.enc-no { color: var(--error, #b3261e); background: color-mix(in srgb, var(--error, #b3261e) 12%, transparent); }

/* Ficha completa del lead (Llamadas) */
.ll-card[data-ll-card] { cursor: pointer; }
.ll-card[data-ll-card]:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.ficha-cita { margin: 0 0 8px; }
.ficha-contacto { margin-bottom: 12px; }
.ficha-sec { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.ficha-sec h3 { margin: 0 0 8px; font-size: 15px; }
.ficha-temp { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ficha-score { display: flex; align-items: center; gap: 8px; }
.ficha-score-bar { width: 160px; height: 8px; border-radius: 99px; background: var(--surface-2, color-mix(in srgb, currentColor 10%, transparent)); overflow: hidden; }
.ficha-score-bar span { display: block; height: 100%; background: var(--accent); }
.ficha-hechos { margin: 0; padding-left: 4px; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.ficha-meta { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-dl { display: grid; grid-template-columns: minmax(160px, 40%) 1fr; gap: 6px 14px; margin: 0; }
.ficha-dl dt { color: var(--text-2); font-size: 13px; }
.ficha-dl dd { margin: 0; font-weight: 500; white-space: pre-wrap; }
.ficha-notas { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ficha-notas li { padding: 8px 10px; border-radius: 8px; background: var(--surface-2, color-mix(in srgb, currentColor 5%, transparent)); white-space: pre-wrap; }
@media (max-width: 600px) { .ficha-dl { grid-template-columns: 1fr; } .ficha-dl dd { margin-bottom: 6px; } }

/* Leads → Encuesta */
.enc-cab { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.enc-preg { margin-bottom: 14px; }
.enc-ia { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; border-left: 4px solid var(--tone-live); }
.enc-ia-txt { flex: 1 1 320px; min-width: 0; }
.enc-ia-txt h3 { margin: 0 0 6px; font-size: 16px; }
.enc-ia-txt p { margin: 0 0 4px; }
.enc-ia-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.enc-ia-prompt { flex: 1 1 100%; max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--surface-2); color: var(--text); padding: 12px; border-radius: var(--radius-sm); margin: 0; }
.enc-preg h3 { margin: 0 0 12px; font-size: 16px; }
.enc-opciones { display: grid; gap: 8px; }
.enc-op { display: grid; grid-template-columns: minmax(140px, 30%) 1fr minmax(150px, auto); gap: 12px; align-items: center; }
.enc-op-lbl { font-weight: 500; }
.enc-op-bar { height: 12px; border-radius: 99px; background: var(--surface-2, color-mix(in srgb, currentColor 8%, transparent)); overflow: hidden; }
.enc-op-bar span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.enc-op-n { text-align: right; white-space: nowrap; }
.enc-libres { margin-top: 12px; }
.enc-libres summary { cursor: pointer; font-weight: 600; }
.enc-buscar { margin: 10px 0; width: 100%; max-width: 360px; }
.enc-lista { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
@media (max-width: 640px) { .enc-op { grid-template-columns: 1fr; gap: 4px; } .enc-op-n { text-align: left; } }
.enc-cab, .enc-preg, .enc-ia { padding: 16px 20px; }
#enc-leads > .card { padding: 16px 20px; }

/* Botón de Agencia: aparte de los botones del cliente, junto al nombre */
.agencia-btn { margin-left: 10px; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 14px; padding: 7px 16px 7px 10px; border-radius: 999px; border: 0; cursor: pointer; color: #fff; background: linear-gradient(135deg, #2c3e66, #4a3a7a); box-shadow: 0 2px 8px rgba(30, 30, 60, .25); }
.agencia-btn:hover { filter: brightness(1.1); }
.agencia-btn .agencia-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.agencia-btn .agencia-ico .ico { width: 15px; height: 15px; }

/* Agencia → Equipo de la agencia */
.age-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px; margin: 10px 0; }
.age-accesos label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.age-cli { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--surface-2, color-mix(in srgb, currentColor 8%, transparent)); }
.age-cli strong { font-weight: 700; }
.age-editor td { background: var(--surface-2, color-mix(in srgb, currentColor 4%, transparent)); }
.eq-agencia-nota { margin-top: 12px; }

/* Portal del cliente: elegir embudo, lanzamiento y periodo */
.portal-nav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; padding: 14px 24px 0; max-width: 1100px; margin: 0 auto; }
.portal-nav:empty { display: none; }
.portal-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.portal-chip { font: inherit; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; }
.portal-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.portal-pick { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.portal-pick select { min-width: 220px; }

/* ⚡ Meteóricos */
body.embudo-meteo .lanz-only { display: none !important; }
.meteo-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.meteo-bar .field { min-width: 260px; }
#meteo-body, #meteo-l-body { display: flex; flex-direction: column; gap: 14px; }
#meteo-body > .meteo-cab, #meteo-body > .meteo-sec, #meteo-body > .meteo-kpis { background: var(--surface); }
.meteo-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; }
.meteo-cab h2 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meteo-cab p { margin: 2px 0; }
.meteo-tiempos { font-size: 14px; }
.meteo-cuenta { text-align: center; padding: 10px 18px; border-radius: 12px; background: #1f1a17; color: #fff; min-width: 160px; }
.meteo-cuenta span { display: block; font-size: 12px; opacity: .8; }
.meteo-cuenta strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.meteo-sec { padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; }
.meteo-sec h3 { margin: 0 0 10px; font-size: 15px; }
.meteo-sec .snippet { white-space: pre-wrap; word-break: break-all; font-size: 12px; padding: 10px; border-radius: 8px; background: var(--surface-2, color-mix(in srgb, currentColor 6%, transparent)); }
.meteo-sec .table-scroll { max-height: 420px; overflow-y: auto; }

/* Tipo de pago (pago único / suscripción) en las configuraciones */
.pago-cfg { margin: 4px 0 12px; }
.pago-sel { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.pago-sel-label { font-weight: 700; font-size: 13px; }
.pago-tipos { display: flex; gap: 8px; flex-wrap: wrap; }
.pago-tipos label { cursor: pointer; }
.pago-tipos input { position: absolute; opacity: 0; pointer-events: none; }
.pago-tipos span { display: inline-block; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface, #fff); font-weight: 600; font-size: 14px; }
.pago-tipos input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pago-tipos input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pago-sel .chk { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.pago-sel .chk input { width: auto; }
.pago-planes { display: flex; flex-direction: column; gap: 8px; }
.pago-planes p { margin: 0; }
.pago-plan { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: center; }
.pago-plan .field { margin: 0; }
@media (max-width: 560px) { .pago-plan { grid-template-columns: 1fr; } }
[data-pago-enlaces]:empty, [data-pago-etiquetas]:empty { display: none; }

/* =====================================================================
   Diseño 2026: capa de acabado (tipografía, superficies, barra, menú,
   pestañas, tarjetas, tablas, botones, campos, ventanas, modo día/noche)
   ===================================================================== */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  font-feature-settings: "cv11", "ss01", "ss03";
  background:
    radial-gradient(1200px 520px at 100% -10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
    radial-gradient(900px 480px at -10% 0%, color-mix(in srgb, var(--tone-info) 4%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
h1, h2, h3, h4 { letter-spacing: -.012em; }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--focus) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Cambio de tema suave */
html.tema-cambiando, html.tema-cambiando *, html.tema-cambiando *::before, html.tema-cambiando *::after {
  transition: background-color .4s ease, border-color .4s ease, color .3s ease, fill .3s ease, box-shadow .4s ease !important;
}

/* ---------- Superficies ---------- */
.card, .obj-card, .portal-card, .cfg-sec { border-color: var(--border); box-shadow: var(--shadow); }
.card { border-radius: var(--radius); }
.metric-card { padding: 18px 20px; margin-bottom: 16px; }
.metric-card h2 { font-size: 15px; font-weight: 650; margin-bottom: 16px; }
.metric-card h2 .muted { font-weight: 450; }
.h-ico { border-radius: 10px; }
.empty { padding: 44px 32px; }
.empty h2 { font-size: 20px; font-weight: 700; }

/* ---------- Barra superior ---------- */
.topbar {
  min-height: var(--topbar-h); padding: 10px 24px; gap: 10px 20px; flex-wrap: nowrap;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  z-index: 20;
}
.brand { font-size: 15px; font-weight: 700; gap: 10px; min-width: 0; letter-spacing: -.01em; }
.brand #brand-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
.brand-mark {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--accent-2), var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgb(255 255 255 / .25);
}
.brand-mark .ico { width: 18px; height: 18px; }
.badge { font-size: 10.5px; letter-spacing: .06em; padding: 3px 8px; background: var(--surface-2); border: 1px solid var(--border); }
.topbar-controls { flex-wrap: nowrap; gap: 4px; }
.topbar-controls .field.inline > span { font-size: 12px; color: var(--muted); font-weight: 600; }
#launch-select { min-width: 200px; font-weight: 600; }

/* Botones de la barra: sobrios, el color solo en el icono */
.tb-btn {
  padding: 6px 12px 6px 6px; gap: 8px; border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: var(--text-2); font-weight: 600; font-size: 13.5px;
}
.tb-btn:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); transform: none; box-shadow: none; }
.tb-ico { width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--tb) 13%, transparent); color: var(--tb); }
.tb-btn:hover .tb-ico { background: color-mix(in srgb, var(--tb) 20%, transparent); }
.tb-ico .ico { width: 16px; height: 16px; }
.tb-notif, .tb-icono { padding: 6px; }
.tb-notif { --tb: var(--tone-vip); }
.tb-auditor { --tb: var(--tone-live); }
.tb-logout { background: transparent; border-color: transparent; }
.tb-logout .tb-ico { background: var(--surface-2); color: var(--text-2); }
.tb-logout:hover { --tb: var(--error); color: var(--error); }
.tb-logout:hover .tb-ico { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }
.tb-tema { margin-left: 6px; position: relative; }
.tb-tema::before { content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.notif-count { box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 1360px) { .topbar .tb-txt { display: none; } .tb-btn { padding: 6px; } }
@media (max-width: 1000px) { .topbar { flex-wrap: wrap; padding: 10px 16px; } .topbar-controls { flex-wrap: wrap; } }

/* Botón de modo día / noche */
.tema-toggle, .tb-tema { --tb: var(--tone-vip); }
.tema-toggle {
  position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer; display: inline-grid; place-items: center; box-shadow: var(--shadow-sm);
}
.tema-toggle:hover { color: var(--text); background: var(--surface-2); }
.tema-flotante { position: fixed; top: 16px; right: 16px; z-index: 5; }
.tb-tema .tb-ico, .tema-toggle { overflow: hidden; }
.tema-ico { grid-area: 1 / 1; display: grid; place-items: center; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.tema-ico .ico { width: 17px; height: 17px; }
.tb-tema .tb-ico { position: relative; display: grid; }
:root[data-theme="dark"] .tema-luna, :root:not([data-theme="dark"]) .tema-sol { transform: rotate(-90deg) scale(.4); opacity: 0; }
[data-tema-toggle].manual::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
}

/* Agencia y cliente */
.agencia-btn {
  margin-left: 6px; font-size: 13px; padding: 6px 14px 6px 8px; border-radius: 10px;
  background: linear-gradient(135deg, #1f2a44, #3b2f63); box-shadow: 0 6px 16px -6px rgb(40 34 90 / .55), inset 0 1px 0 rgb(255 255 255 / .12);
}
.agencia-btn:hover { filter: brightness(1.12); }
.cliente-pick select { font-weight: 700; font-size: 14px; border-radius: 10px; padding: 6px 30px 6px 12px; }

/* ---------- Menú lateral de embudos ---------- */
@media (min-width: 901px) {
  .app-body { grid-template-columns: 236px minmax(0, 1fr); }
  .sidebar { top: calc(var(--topbar-h) + 12px); padding: 20px 4px 20px 20px; gap: 4px; }
}
.sb-title { font-size: 10.5px; letter-spacing: .09em; color: var(--muted); padding: 0 10px 8px; }
.sb-item { position: relative; padding: 9px 10px; border-radius: 12px; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.sb-item:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); border-color: var(--border); }
.sb-item.active { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.sb-item.active::before { content: ""; position: absolute; left: -11px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sb-ico { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; background: var(--surface-2); border: 1px solid var(--border); }
.sb-item.active .sb-ico { background: linear-gradient(140deg, var(--accent-2), var(--accent)); border-color: transparent; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
.sb-txt strong { font-size: 14px; font-weight: 650; }
.sb-txt small { font-size: 12px; color: var(--muted); }
.sb-add { border-radius: 12px; color: var(--muted); margin-top: 8px; }
.sb-add:hover { border-style: solid; color: var(--accent); background: var(--accent-soft); }
.sb-edit { opacity: 0; transition: opacity .15s; }
.sb-row:hover .sb-edit, .sb-edit:focus-visible { opacity: .8; }
@media (max-width: 900px) { .sb-item.active::before { display: none; } .sb-edit { opacity: .7; } .topbar { gap: 8px; } }

/* ---------- Contenido ---------- */
.container { max-width: 1360px; padding: 22px 28px 48px; }
@media (max-width: 640px) { .container { padding: 16px; } }
.notice { border-radius: 12px; padding: 11px 16px; background: var(--surface); box-shadow: var(--shadow-sm); border-left: 3px solid var(--tone-info); }
.notice.warn { border-left-color: var(--st-caliente); background: color-mix(in srgb, var(--st-caliente) 6%, var(--surface)); }
.notice.err { border-left-color: var(--error); background: color-mix(in srgb, var(--error) 6%, var(--surface)); }
.progress { border-radius: 10px; height: 30px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.progress-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 26%, transparent)); }
.progress-text { line-height: 28px; font-weight: 600; }

/* Pestañas principales */
.views { gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.view-tab { font-size: 14px; font-weight: 600; padding: 12px 14px; color: var(--muted); position: relative; border-bottom: 0; transition: color .15s; }
.view-tab:hover { color: var(--text); }
.view-tab.active { color: var(--text); }
.view-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); transform: scaleX(0); transition: transform .2s ease; }
.view-tab.active::after { transform: scaleX(1); }
.view-tab .ico { width: 16px; height: 16px; }

/* Subpestañas (en píldora, dentro de un carril) */
.subviews:not(.msubs), .subviews.msubs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.subviews:not(.msubs) { margin: -4px 0 18px; }
.subviews.msubs { margin: 4px 0 18px; }
.msubs .subview-tab { padding: 7px 10px; gap: 5px; } /* las 9 categorías de Métricas en una sola fila */
@media (max-width: 1700px) { .msubs .subview-tab .ico { display: none; } }
@media (max-width: 1400px) { .msubs .subview-tab { padding: 7px 6px; font-size: 13px; } }
.subview-tab { border: 0; background: transparent; border-radius: 9px; padding: 7px 14px; font-size: 13.5px; color: var(--text-2); }
.subview-tab:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.subview-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }

/* Segmentados */
.seg { border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.seg-btn { border-radius: 7px; font-weight: 600; }
.seg-btn.on { box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }

/* ---------- KPIs ---------- */
.kpis { gap: 14px; margin-bottom: 18px; }
.kpi { padding: 16px 18px; border-radius: var(--radius); box-shadow: var(--shadow); gap: 6px; border-color: var(--border); }
.kpi::before { inset: 0 auto 0 0; width: 3px; height: auto; opacity: 0; transition: opacity .2s; }
.kpi.active::before, button.kpi:hover::before { opacity: 1; }
.kpi .kpi-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.kpi .kpi-ico { width: 32px; height: 32px; border-radius: 10px; }
.kpi .kpi-value { font-weight: 750; letter-spacing: -.025em; font-feature-settings: "tnum", "cv11"; }
.kpi .kpi-sub { font-size: 12px; }
button.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background: var(--surface); }
.kpi.active { outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone, var(--accent)) 55%, transparent), var(--shadow); }
.obj-card::before, .av-card::before { height: 3px; }

/* ---------- Tablas ---------- */
.table-scroll { border-radius: 12px; }
.metric-table th, .metric-table td { padding: 10px 12px; border-bottom-color: color-mix(in srgb, var(--border) 80%, transparent); }
.metric-table thead th { font-size: 10.5px; letter-spacing: .07em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.metric-table tbody tr { transition: background-color .12s; }
.metric-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.metric-table tr.total td { background: var(--surface-2); font-weight: 600; }

/* ---------- Botones y campos ---------- */
.btn { border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 13.5px; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s; box-shadow: var(--shadow-sm); }
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 70%, var(--accent)), var(--accent));
  border-color: color-mix(in srgb, var(--accent) 80%, #000);
  box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 4px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgb(255 255 255 / .18);
}
.btn.primary:hover { filter: brightness(1.06); background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 70%, var(--accent)), var(--accent)); }
.btn.ghost { box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); }
input, select, textarea { border-radius: 10px; border-color: var(--border-strong); background-color: var(--surface); transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--border)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.field > span { font-weight: 600; color: var(--text-2); font-size: 12.5px; }

/* ---------- Ventanas ---------- */
.dialog { border-radius: 18px; border-color: var(--border); box-shadow: var(--shadow-lg); }
.dialog::backdrop { background: rgb(15 14 13 / .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.dialog[open] { animation: dlgIn .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.dialog-head { padding: 16px 22px; }
.dialog-head h2 { font-size: 18px; font-weight: 700; }
.dialog-body { padding: 18px 22px; }
.dialog-foot { padding: 14px 22px; background: var(--surface-2); border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
.tabs { gap: 2px; }
.tab { border-radius: 8px 8px 0 0; color: var(--muted); padding: 10px 12px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.cfg-sec { border-radius: 14px; box-shadow: none; }
.cfg-sec-num { background: linear-gradient(140deg, var(--accent-2), var(--accent)); }
.notif-panel { border-radius: 16px; box-shadow: var(--shadow-lg); }

/* ---------- Acceso ---------- */
.login {
  background:
    radial-gradient(700px 420px at 15% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(700px 420px at 90% 90%, color-mix(in srgb, var(--tone-live) 14%, transparent), transparent 60%),
    var(--bg);
}
.login-card { max-width: 400px; padding: 36px 32px 30px; gap: 14px; border-radius: 20px; box-shadow: var(--shadow-lg); }
.login-card::before {
  content: ""; width: 44px; height: 44px; border-radius: 13px; margin-bottom: 4px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E") center / 22px no-repeat,
    linear-gradient(140deg, var(--accent-2), var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.login-card h1 { font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.login-card .btn.primary { padding: 11px 14px; font-size: 14.5px; }
.login-card input { padding: 10px 12px; }

/* ---------- Portal del cliente ---------- */
.portal-head { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 5; }
.portal-head .tema-toggle { margin-right: 4px; }
.portal-card { border-radius: 16px; }
.portal-kpi { border-radius: 12px; border: 1px solid var(--border); }

/* ---------- Calendario y tareas ---------- */
.cal-day { transition: background-color .12s; }
.kb-col, .t-group { border-radius: 14px; }

@media (prefers-reduced-motion: reduce) {
  .dialog[open], .view-tab::after, .tema-ico, button.kpi:hover { animation: none; transition: none; transform: none; }
}

/* Ajustes de la barra superior: el nombre nunca desaparece y los textos se ocultan antes de apretarse */
.topbar .brand { flex: 1 1 auto; min-width: 0; }
.topbar .brand #brand-nombre { min-width: 6ch; flex: 0 1 auto; }
.topbar .brand > * { flex-shrink: 0; }
.topbar .brand #brand-nombre { flex-shrink: 1; }
.topbar-controls { flex: none; }
.topbar-controls .field.inline.lanz-only > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 1640px) { .topbar .tb-txt { display: none; } .topbar .tb-btn { padding: 6px; } }
.notice.warn, .notice.err { border: 1px solid color-mix(in srgb, var(--st-caliente) 30%, var(--border)); border-left: 3px solid var(--st-caliente); }
.notice.err { border-color: color-mix(in srgb, var(--error) 30%, var(--border)); border-left-color: var(--error); }
/* Calendario más limpio: la fase tiñe el día con suavidad */
.cal-day.con-fase { background: color-mix(in srgb, var(--tone) 7%, var(--surface)); }
.cal-day.con-fase:hover { background: color-mix(in srgb, var(--tone) 12%, var(--surface)); }
.cal-day.con-fase .cal-bands i { height: 3px; }
.cal-day.out.con-fase { background: color-mix(in srgb, var(--tone) 4%, var(--surface-2)); }

/* ---------- Emails (Métricas → Emails) ---------- */
.em-kpis { margin-bottom: 16px; }
.em-niv { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.em-niv.alto { background: color-mix(in srgb, var(--tone-buy) 14%, var(--surface)); color: var(--tone-buy); }
.em-niv.medio { background: var(--surface-2); color: var(--text-2); }
.em-niv.bajo { background: color-mix(in srgb, var(--error) 12%, var(--surface)); color: var(--error); }
.em-tipo { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.em-asunto { display: block; font-size: 13px; color: var(--text-2); margin-top: 4px; max-width: 46ch; }
.em-consejo { font-size: 12.5px; color: var(--text-2); max-width: 34ch; line-height: 1.45; }
.em-table td { vertical-align: top; }
.em-barra { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 12px; }
.em-barra select { width: auto; }
.em-destacados { display: grid; gap: 6px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; }
.em-destacados p { margin: 0; }

/* Agencia: botón flotante abajo a la derecha (solo superadmin) */
.agencia-btn.agencia-flotante {
  position: fixed; right: 24px; bottom: 24px; z-index: 30; margin: 0;
  padding: 11px 20px 11px 12px; font-size: 14px; border-radius: 999px;
  box-shadow: 0 14px 30px -10px rgb(40 34 90 / .6), 0 4px 10px -4px rgb(0 0 0 / .25), inset 0 1px 0 rgb(255 255 255 / .14);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.agencia-btn.agencia-flotante:hover { transform: translateY(-2px); filter: brightness(1.12); }
.agencia-btn.agencia-flotante .agencia-ico { width: 28px; height: 28px; }
body.is-superadmin .container { padding-bottom: 96px; }
@media (max-width: 640px) { .agencia-btn.agencia-flotante { right: 16px; bottom: 16px; padding: 10px 16px 10px 10px; } }
@media print { .agencia-flotante { display: none !important; } }

/* ---------- Oferta (Configuración) y Oferta y bonus (Métricas) ---------- */
.of-resumen { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; }
.of-resumen:empty { display: none; }
.of-lista { display: flex; flex-direction: column; gap: 8px; }
.of-fila { display: grid; grid-template-columns: 42px 210px minmax(140px, 1.2fr) minmax(140px, 1.3fr) 96px auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.of-fila-bonus { grid-template-columns: 42px 160px minmax(140px, 1.2fr) minmax(140px, 1.2fr) 96px 190px auto; }
.of-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.of-fila.nueva { animation: of-entra .35s ease-out; border-color: var(--accent); }
@keyframes of-entra { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.of-fila input, .of-fila select { width: 100%; min-width: 0; }
.of-hasta { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.of-ventana { grid-column: 2 / -1; padding: 0 2px; }
#meteo-dialog .of-ico { display: none; }
/* Diálogo del meteórico (más estrecho): tipo, nombre y valor arriba; detalle y fin a mano debajo. */
#meteo-dialog .of-fila { grid-template-columns: 170px minmax(0, 1fr) 92px auto; }
#meteo-dialog .of-fila .of-valor { grid-row: 1; grid-column: 3; }
#meteo-dialog .of-fila .of-del { grid-row: 1; grid-column: 4; }
#meteo-dialog .of-fila .of-detalle { grid-row: 2; grid-column: 1 / -1; }
#meteo-dialog .of-fila-bonus .of-detalle { grid-column: 1 / 3; }
#meteo-dialog .of-fila-bonus .of-hasta { grid-row: 2; grid-column: 3 / -1; }
@media (max-width: 1000px) { #meteo-dialog .of-fila { grid-template-columns: 1fr 1fr; } #meteo-dialog .of-fila > * { grid-row: auto !important; grid-column: auto !important; } #meteo-dialog .of-fila .of-detalle, #meteo-dialog .of-fila-bonus .of-hasta { grid-column: 1 / -1 !important; } }
.of-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; margin: 1px 0; }
.of-chip.b-bar_directo { background: color-mix(in srgb, var(--st-muy-caliente) 12%, var(--surface)); border-color: color-mix(in srgb, var(--st-muy-caliente) 30%, var(--border)); }
.of-chip.b-bar_24h { background: color-mix(in srgb, var(--tone-vip) 13%, var(--surface)); border-color: color-mix(in srgb, var(--tone-vip) 30%, var(--border)); }
.of-chip.b-bar_48h { background: color-mix(in srgb, var(--tone-live) 12%, var(--surface)); border-color: color-mix(in srgb, var(--tone-live) 30%, var(--border)); }
.of-chip.b-bar_30m { background: color-mix(in srgb, var(--st-muy-caliente) 12%, var(--surface)); border-color: color-mix(in srgb, var(--st-muy-caliente) 30%, var(--border)); }
.of-chip.b-bar_1h { background: color-mix(in srgb, var(--tone-vip) 13%, var(--surface)); border-color: color-mix(in srgb, var(--tone-vip) 30%, var(--border)); }
.meteo-l-oferta:not(:empty) { margin-top: 16px; display: grid; gap: 14px; }
#moferta-body { display: grid; gap: 14px; }
.of-horas { max-height: 520px; overflow-y: auto; }
.of-chip.b-bonus { background: color-mix(in srgb, var(--tone-buy) 11%, var(--surface)); border-color: color-mix(in srgb, var(--tone-buy) 28%, var(--border)); }
.of-oferta { display: grid; grid-template-columns: 1fr 1fr 200px; gap: 16px; margin-bottom: 18px; }
.of-oferta h4 { margin: 0 0 8px; font-size: 14px; }
.of-oferta ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.of-valor-box { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.of-valor-box strong { font-size: 20px; letter-spacing: -.02em; margin-bottom: 6px; }
.of-ratio { align-self: flex-start; font-weight: 700; font-size: 12.5px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
@media (max-width: 900px) { .of-oferta { grid-template-columns: 1fr; } }
.of-h3 { font-size: 14px; margin: 18px 0 10px; }
.of-dias td { vertical-align: middle; }
.of-barra { width: 28%; }
.of-caduca { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--st-caliente); }
.of-bonus-t td { vertical-align: top; }
.enc-ant { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; font-size: 14px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); }

/* ---------- Ciclo de compra ---------- */
.ciclo-kpis { margin-bottom: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ciclo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .ciclo-grid { grid-template-columns: 1fr; } }
.ciclo-col h4 { margin: 0 0 10px; font-size: 14px; }
.ciclo-cifras { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 12px; }
.ciclo-cifras div { display: flex; flex-direction: column; }
.ciclo-cifras strong { font-size: 19px; letter-spacing: -.02em; }
.ciclo-tramo { display: grid; grid-template-columns: 120px 1fr 74px; gap: 10px; align-items: center; font-size: 13px; padding: 3px 0; }
.ciclo-tramo .meter { margin: 0; }
.ciclo-tramo .num { text-align: right; font-variant-numeric: tabular-nums; }
.ciclo-trafico { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; }

/* Barras de pestañas que no caben (móvil): se difumina el borde por el que hay más pestañas. */
.views.mas-der, .subviews.mas-der, .tabs.mas-der { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.views.mas-izq, .subviews.mas-izq, .tabs.mas-izq { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.views.mas-izq.mas-der, .subviews.mas-izq.mas-der, .tabs.mas-izq.mas-der { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.subviews { overflow-x: auto; scrollbar-width: none; }
.subviews::-webkit-scrollbar { display: none; }
.alertas-carrito { color: var(--text); }
.alertas-carrito ul { margin: 6px 0 0; padding-left: 20px; }

/* Inicio del cliente: todos los embudos de un vistazo */
body:not(.en-inicio) #inicio { display: none; }
body.en-inicio #dashboard, body.en-inicio #empty-state, body.en-inicio #sin-embudos, body.en-inicio #launch-select { display: none !important; }
.inicio { display: grid; gap: 16px; }
.inicio-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inicio-cab h2 { margin: 0; }
.inicio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.inicio-emb { display: grid; gap: 8px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.inicio-emb:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.inicio-emb h3 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inicio-emb .ie-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.inicio-emb .ie-cifras span { display: grid; font-size: 12px; color: var(--muted); }
.inicio-emb .ie-cifras strong { font-size: 18px; color: var(--text); }
.inicio-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .inicio-dos { grid-template-columns: 1fr; } }
.inicio-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.inicio-lista li { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.inicio-lista li:last-child { border-bottom: 0; }
.inicio-lista button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.inicio-lista button:hover { text-decoration: underline; }
.inicio-emb { padding: 16px 18px; border-radius: 16px; }
.sb-inicio + .sb-title { margin-top: 10px; }
body.en-inicio #btn-config, body.en-inicio #btn-zoom { display: none !important; }
@media (max-width: 1000px) { #meteo-dialog .of-fila .of-ventana { grid-column: 1 / -1 !important; } }
.retro-lista { margin: 0; padding-left: 4px; list-style: none; display: grid; gap: 6px; }

/* Recursos de la preclase (configuración del lanzamiento y nuevo embudo) */
.rec-cfg { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
.rec-cfg > .chk { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.rec-cfg > .chk input, .emb-recursos .chk input { width: auto; }
.rec-cfg .grid2 { margin-top: 8px; }
.rec-etapas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.rec-etapa { border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 10px; background: var(--surface-2); }
.rec-etapa small { color: var(--muted); }
.emb-recursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.emb-recursos .chk { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.lead-ficha { all: unset; cursor: pointer; font-weight: 600; }
.lead-ficha:hover, .lead-ficha:focus-visible { color: var(--accent); text-decoration: underline; }
.vot-bars { display: grid; gap: 6px; margin: 6px 0; }
.vot-bar { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 14px; }
.vot-bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); z-index: 0; }
.vot-bar span, .vot-bar strong { position: relative; z-index: 1; }
.vot-bar.mio { border-color: var(--accent); }
.vot-cfg { display: grid; gap: 10px; margin-top: 8px; }
.vot-cfg-lista { display: grid; gap: 10px; }
.vot-q { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-2); }
.vot-q-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vot-q-head strong { font-size: 13px; color: var(--muted); }
.vot-q-head select { width: auto; }
.vot-q-head .spacer { flex: 1; }
.vot-m-q { font-size: 15px; margin: 4px 0 6px; text-wrap: balance; }
.vot-m-sep { border: 0; border-top: 1px dashed var(--border); margin: 16px 0; }
.vot-libres { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 420px; overflow: auto; }
.vot-libres li { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.vot-libres p { margin: 4px 0 0; white-space: pre-line; }
.ficha-vot + .ficha-vot { margin-top: 12px; }
/* Enlace para conectarse al directo (Configuración → Preclase) */
.enlace-directo { margin: 0 0 16px; padding: 14px 16px; border: 2px solid var(--accent); border-radius: 12px; background: var(--accent-soft); display: grid; gap: 8px; }
.enlace-directo h3 { margin: 0; font-size: 16px; }
.enlace-directo > p { margin: 0; font-size: 14px; max-width: 75ch; }
#enlace-directo-box, .pasos-box { display: grid; gap: 10px; }
.enlace-directo-fila code.multi { white-space: pre-wrap; }
.enlace-directo-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.enlace-directo-etq { font-weight: 700; font-size: 13px; white-space: nowrap; }
.enlace-directo-fila code { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.enlace-directo-fila small { grid-column: 1 / -1; color: var(--muted); }
.enlace-directo-falta { margin: 0; color: var(--muted); }
@media (max-width: 600px) { .enlace-directo-fila { grid-template-columns: minmax(0, 1fr) auto; } .enlace-directo-etq { grid-column: 1 / -1; } }
.grid2 > .chk { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.grid2 > .chk input { width: auto; }

/* ---------- Asistente de «＋ Nuevo embudo» ---------- */
.wiz-pasos { display: flex; align-items: center; gap: 6px; padding: 10px 20px 12px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.wiz-dot { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.wiz-dot:disabled { cursor: default; opacity: .7; }
.wiz-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); font-weight: 800; font-variant-numeric: tabular-nums; }
.wiz-dot.actual { color: var(--text, inherit); }
.wiz-dot.actual .wiz-num { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.wiz-dot.hecho .wiz-num { border-color: var(--accent); color: var(--accent); }
.wiz-dot:not(:disabled):hover .wiz-lbl { text-decoration: underline; }
.wiz-raya { flex: 1 0 18px; height: 2px; border-radius: 2px; background: var(--border); }
.wiz-paso { display: grid; gap: 14px; }
.wiz-h { margin: 0; font-size: 20px; text-wrap: balance; }
.wiz-sub { margin: -8px 0 0; color: var(--muted); max-width: 70ch; }
.wiz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.wiz-card { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.wiz-card h4 { margin: 0; font-size: 15px; }
.wiz-card > p { margin: -6px 0 0; }
.wiz-card-full { grid-column: 1 / -1; }
.wiz-card #emb-recursos-box > span { display: none; }
.emb-cats { display: grid; gap: 12px; }
.emb-cat { margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; transition: opacity .2s; }
.emb-cat.apagada { opacity: .6; }
.emb-cat legend { display: contents; }
.emb-cat-h { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-2); cursor: pointer; }
.emb-cat-h input { width: 18px; height: 18px; flex: none; }
.emb-cat-ico { font-size: 22px; }
.emb-cat-h strong { display: block; font-size: 15px; }
.emb-cat-h small { color: var(--muted); }
.emb-cat-n { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.emb-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 12px 14px; }
.emb-sub { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.emb-sub:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.emb-sub input { width: auto; margin-top: 3px; flex: none; }
.emb-sub strong { display: block; font-size: 14px; }
.emb-sub small { color: var(--muted); font-size: 12px; }
.emb-resumen dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.emb-resumen dt { font-weight: 700; color: var(--muted); }
.emb-resumen dd { margin: 0; }
.emb-origen { display: grid; gap: 8px; }
.emb-origen .chk { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 600; }
.emb-origen .chk:has(input:checked) { border-color: var(--accent); background: var(--surface-2); }
.emb-urls { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.emb-urls h4 { margin: 0 0 8px; }
.emb-urls-lista, .pg-urls { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.emb-urls-lista li, .pg-urls li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.emb-urls-lista small, .pg-urls small { grid-column: 1; color: var(--muted); }
.emb-urls-lista code, .pg-urls code { grid-column: 1; overflow-wrap: anywhere; font-size: 13px; justify-self: start; }
.emb-urls-lista li > .btn, .pg-urls li > .btn { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 600px) { .wiz-lbl { display: none; } .wiz-dot.actual .wiz-lbl { display: inline; } .emb-resumen dl { grid-template-columns: 1fr; } }
#embudo-dialog .emb-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
#embudo-dialog .emb-tipos .emb-grupo { grid-column: 1 / -1; margin: 6px 0 0; }
#embudo-dialog .emb-tipos .emb-tipo { margin: 0; }
.wiz-card .emb-recursos { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.wiz-card .emb-recursos .chk { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 600; }
.wiz-card .emb-recursos .chk:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wiz-card .emb-recursos .chk small { grid-column: 2; font-weight: 400; }
/* Comercial → En directo */
/* Comercial → En directo */
.ed-vista:not([hidden]) { display: grid; gap: 18px; }
.ed-head { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; padding: 20px 24px; }
.ed-head-txt { display: grid; gap: 6px; min-width: 0; }
.ed-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ed-head h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.ed-estado { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.ed-estado i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.ed-estado[data-tono="vivo"] { background: color-mix(in srgb, #d93025 12%, var(--surface)); color: #b3261e; border-color: color-mix(in srgb, #d93025 35%, transparent); }
.ed-estado[data-tono="vivo"] i { background: #d93025; animation: ed-latido 1.4s ease-in-out infinite; }
@keyframes ed-latido { 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .ed-estado i { animation: none !important; } }
.ed-acciones { display: flex; gap: 12px; align-items: center; }
.ed-grupos { display: grid; gap: 18px; }
.ed-card { padding: 20px 24px; }
.ed-card-t { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 15px; font-weight: 800; }
.ed-pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.ed-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 0; }
.ed-stat { display: grid; gap: 6px; align-content: start; padding: 4px 18px; border-left: 1px solid var(--border); }
.ed-stat:first-child { border-left: 0; padding-left: 0; }
.ed-stat-l { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.ed-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; flex: none; color: var(--tone, var(--accent)); background: color-mix(in srgb, var(--tone, var(--accent)) 14%, transparent); }
.ed-ico svg { width: 16px; height: 16px; }
.ed-stat-n { font-size: 34px; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; }
.ed-stat-s { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ed-nota { margin: 0; }
@media (max-width: 640px) {
  .ed-head, .ed-card { padding: 16px; }
  .ed-stat { border-left: 0; padding: 12px 0; border-top: 1px solid var(--border); }
  .ed-stat:first-child { border-top: 0; padding-top: 0; }
}
.ed-barras { display: flex; align-items: flex-end; gap: 2px; height: 140px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ed-barras span { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent); opacity: .85; }
.ed-barras span:hover { opacity: 1; }
.ed-eje { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Página de replay: barra fija con cuenta atrás */
.rb-cfg { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 10px; }
.rb-cfg legend { font-weight: 700; padding: 0 6px; }
.rb-cfg input[type="color"] { width: 64px; height: 36px; padding: 2px; }
/* Barra de urgencia por fase: sin botón (solo informativa), no se puede elegir adónde lleva */
.bar-table tr.sin-boton .bar-button, .bar-table tr.sin-boton .bar-label { visibility: hidden; }
/* Página de venta: tramos de la barra fija */
.vb-cuerpo { display: grid; gap: 10px; }
.vb-cuerpo > p { margin: 0; }
.vb-tramos { display: grid; gap: 8px; }
.vb-tramo { display: grid; grid-template-columns: 28px minmax(200px, 2fr) minmax(170px, 1fr) 150px minmax(150px, 1fr) minmax(120px, 1fr) 36px; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.vb-tramo .field { margin: 0; }
.vb-n { align-self: center; font-weight: 700; text-align: center; }
.vb-tramo.sin-boton [data-vb-boton] { visibility: hidden; }
.vb-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.vb-color { margin: 0 0 0 auto; }
.vb-color input { width: 64px; height: 36px; padding: 2px; }
#cfg-vb-resumen ol { margin: 4px 0 0; padding-left: 20px; }
@media (max-width: 900px) { .vb-tramo { grid-template-columns: 28px 1fr 1fr; } .vb-tramo .vb-texto { grid-column: 2 / -1; } }
.of-tipo-box { display: grid; gap: 6px; min-width: 0; }
.of-obj { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.of-obj label { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--muted); font-weight: 600; min-width: 240px; }
.of-obj .of-obj-otro { flex: 1 1 260px; width: auto; }
/* Configuración → Carrito */
.car-vacio { padding: 18px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2); line-height: 1.5; }
.car-resumen { margin: 0 0 10px; }
.car-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.car-dia { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); display: grid; gap: 8px; align-content: start; }
.car-dia.car-hoy { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.car-dia header { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.car-dia header strong { display: inline-block; }
.car-dia header strong::first-letter { text-transform: uppercase; }
.car-n { font-weight: 800; color: var(--accent); }
.car-tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.car-tag-hoy { background: var(--accent); color: #fff; border-color: var(--accent); }
.car-dia h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.car-auto { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.4; }
.car-dia .field { margin: 0; }
.car-envios { display: grid; gap: 8px; }
.car-canal { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.car-canal-n { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13.5px; }
.car-canal-n select { width: auto; }
.car-horas { display: flex; flex-wrap: wrap; gap: 6px; }
.car-horas:empty { display: none; }
.car-hora-l { display: grid; gap: 2px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.car-hora { width: 110px; }
.car-copiar { justify-self: start; }
/* Calendario: envíos del carrito (emails, WhatsApp): se ven, pero sin el peso de los hitos */
.cal-chip.k-hito.h-suave, .cal-chip.k-hito.h-suave:not(.other) { background: transparent; color: var(--text-2); font-weight: 500; border: 1px solid var(--border); }
.cal-chip.k-hito.h-suave .cc-time { color: var(--muted); }
/* Página de pago: cajetines de pago único y fraccionado */
.pago-caja { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.pago-caja legend { font-weight: 700; padding: 0 6px; }
/* Planificador del lanzamiento */
.plan-sup { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.plan-sup fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; align-content: start; margin: 0; }
.plan-sup legend { font-weight: 700; padding: 0 6px; }
.plan-sup .field { margin: 0; }
.plan-grupos { display: grid; gap: 14px; }
.plan-grupo h4 { margin: 0 0 8px; font-size: 14px; }
.plan-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.plan-tile { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.plan-tile.destacado { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.plan-l { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.plan-n { font-size: 24px; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; }
.plan-tile.ok .plan-n { color: var(--ok, #2e7d32); } .plan-tile.warn .plan-n { color: #b26a00; } .plan-tile.mal .plan-n { color: #c62828; }
.plan-s { font-size: 12px; line-height: 1.4; color: var(--muted); }
.plan-rango td.num { white-space: nowrap; }
.hm-form { margin: 10px 0; padding: 14px; display: grid; gap: 10px; }
.calc-detalle { margin: 10px 0; }
.calc-detalle > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.calc-hist-bar { align-items: center; gap: 10px; flex-wrap: wrap; }
.obj-proy { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--border); }
.obj-proy .row { margin-top: 10px; align-items: center; gap: 10px; flex-wrap: wrap; }
.obj-titulo { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; }
.bump-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.bump-fila { display: grid; grid-template-columns: auto 1.4fr .7fr .9fr 1.6fr auto; gap: 10px; align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.bump-fila .chk { align-self: center; }
.bump-fila.off .field { opacity: .5; }
@media (max-width: 760px) { .bump-fila { grid-template-columns: 1fr 1fr; } .bump-fila .chk, .bump-fila .bump-quitar { grid-column: auto; } }
.inicio-emb .ie-cifras.ie-sec { margin-top: 6px; }
.inicio-emb .ie-cifras.ie-sec strong { font-size: 14px; }
/* Configuración: barra «Listo para lanzar» y lo que falta en cada pestaña */
.cfg-listo { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.cfg-listo:empty { display: none; }
.cfg-listo-txt { display: flex; flex-direction: column; gap: 2px; }
.cfg-listo-barra { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.cfg-listo-barra span { display: block; height: 100%; background: var(--st-caliente, #d97706); border-radius: 999px; transition: width .3s; }
.cfg-listo-barra span.ok { background: var(--tone-buy, #2e7d4f); }
.tab .tab-falta { margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
@media (max-width: 640px) { .cfg-listo { grid-template-columns: 1fr; } }
/* «?» de las tarjetas: cómo se calcula cada dato (al pasar el ratón, con el teclado o al tocarlo) */
.kpi-ayuda { position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 6px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle; }
.kpi-ayuda:hover, .kpi-ayuda:focus-visible { color: var(--text); border-color: var(--text); }
.ayuda-pop { position: fixed; z-index: 1000; max-width: 300px; padding: 8px 10px; border-radius: 8px; background: var(--text); color: var(--surface); font-size: 12px; line-height: 1.45; box-shadow: 0 6px 20px rgba(0,0,0,.18); pointer-events: none; }
/* «Configurarlo ahora»: botones que llevan al campo exacto de la configuración */
.ir-config { margin-left: 6px; vertical-align: middle; }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-btn:hover { color: var(--accent, #b4532a); }
/* Barra de arriba en dos grupos: lo de este lanzamiento (con texto) y la cuenta (menú) */
.tb-grupo { display: flex; align-items: center; gap: 4px; }
.tb-lanz { padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--border); }
.tb-menu { position: relative; }
.tb-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.tb-menu > summary::-webkit-details-marker { display: none; }
.tb-menu > summary::after { content: "▾"; margin-left: 2px; font-size: 11px; color: var(--muted); }
.tb-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; display: flex; flex-direction: column; gap: 2px; min-width: 220px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.tb-menu-panel .tb-btn { justify-content: flex-start; width: 100%; padding: 6px 10px 6px 6px; margin: 0; }
.tb-menu-panel .tb-tema::before { display: none; }
/* En el menú, siempre con su texto; fuera, el de las acciones del lanzamiento se ve hasta 1180 px */
.topbar .tb-menu-panel .tb-txt { display: inline !important; position: static; width: auto; height: auto; clip: auto; overflow: visible; }
@media (max-width: 1640px) { .topbar .tb-lanz .tb-txt { display: inline; } .topbar .tb-lanz .tb-btn { padding: 6px 10px 6px 6px; } }
@media (max-width: 1180px) { .topbar .tb-lanz .tb-txt { display: none; } .topbar .tb-lanz .tb-btn { padding: 6px; } }
/* Ayuda de la primera visita a cada pestaña */
.ayuda-vista { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--tone-info, #2f6fb0) 35%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--tone-info, #2f6fb0) 8%, var(--surface)); }
.ayuda-vista > div { flex: 1; }
.ayuda-vista p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }
@media (max-width: 640px) { .ayuda-vista { flex-direction: column; align-items: stretch; } }
/* Leads: leyenda de la tabla */
.leads-leyenda { margin-bottom: 12px; padding: 10px 14px; }
.leads-leyenda > summary { cursor: pointer; font-weight: 600; }
.leyenda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; margin-top: 10px; }
.leyenda-grid h4 { margin: 0 0 6px; font-size: 13px; }
.leyenda-grid ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.leyenda-grid li { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 8px; }
/* Inicio: comentarios que te mencionan */
.inicio-menciones { margin-bottom: 16px; }
.inicio-menciones .notif-item { width: 100%; }
/* Enlace para los emails: bien visible bajo la URL de su página */
.enlace-email { margin: 10px 0 14px; padding: 14px 16px; border: 2px solid color-mix(in srgb, var(--tone-buy, #2e7d4f) 55%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--tone-buy, #2e7d4f) 8%, var(--surface)); }
.enlace-email:empty { display: none; }
.ee-head { display: flex; gap: 12px; align-items: flex-start; }
.ee-head > div { display: flex; flex-direction: column; gap: 3px; }
.ee-head > div > strong { font-size: 15px; }
.ee-head span { font-size: 13px; color: var(--text-2); }
.ee-ico { font-size: 22px; line-height: 1; }
.ee-falta { opacity: .85; }
.ee-fila { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ee-fila code { flex: 1 1 320px; padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 600; word-break: break-all; }
/* Códigos para pegar en GHL: plegados (solo hacen falta la primera vez) */
.codigos-pagina > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.codigos-pagina > summary::-webkit-details-marker { display: none; }
.codigos-pagina > summary .cp-t { font-weight: 700; font-size: 15px; }
.codigos-pagina > summary .cp-hint { flex: none; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.codigos-pagina > summary .cp-hint::after { content: " ▾"; }
.codigos-pagina[open] > summary .cp-hint { font-size: 0; }
.codigos-pagina[open] > summary .cp-hint::after { content: "Ocultar códigos ▴"; font-size: 12.5px; }
.codigos-pagina[open] > summary { margin-bottom: 8px; }
/* Métricas → Resumen: las tres cifras clave, más grandes y llamativas */
.kpis-hero { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 14px; }
.kpi.kpi-hero { padding: 22px 24px; border-width: 2px; border-color: color-mix(in srgb, var(--tone, var(--accent)) 35%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--tone, var(--accent)) 10%, var(--surface)), var(--surface) 70%); box-shadow: 0 6px 22px rgba(0,0,0,.06); }
.kpi.kpi-hero .kpi-label { font-size: 15px; font-weight: 700; }
.kpi.kpi-hero .kpi-value { font-size: clamp(34px, 4vw, 46px); line-height: 1.05; margin: 6px 0 4px; }
.kpi.kpi-hero .kpi-sub { font-size: 13.5px; }
.kpi-hero-ventas { display: block; font-size: 16px; color: var(--text); margin-bottom: 2px; }
/* ---------- Móvil ---------- */
/* Sin zoom al tocar dos veces (los gestos de pellizcar siguen funcionando) */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, summary, label, select, input, textarea { touch-action: manipulation; }
.notif-head { display: flex; align-items: center; gap: 8px; }
.notif-head .notif-cerrar { margin-left: auto; padding: 4px 10px; }
@media (max-width: 640px) {
  /* iOS hace zoom al tocar un campo con letra de menos de 16 px */
  input, select, textarea { font-size: 16px; }
  /* Ventanas a pantalla completa, con la cabecera (✕) y los botones de abajo siempre a la vista */
  .dialog, .dialog-sm, .dialog-md, .dialog-xl { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .dialog form, .dialog > .dialog-body { max-height: 100dvh; height: 100%; }
  .dialog-head { position: sticky; top: 0; z-index: 5; background: var(--surface); padding: 10px 12px; }
  .dialog-head .btn.ghost[aria-label="Cerrar"], .dialog-head button[value="cancel"] { min-width: 44px; min-height: 44px; font-size: 20px; }
  .dialog-body { flex: 1; padding: 12px; }
  .dialog-foot { position: sticky; bottom: 0; background: var(--surface); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  /* Agencia: solo el icono, para no tapar el contenido */
  .agencia-btn.agencia-flotante { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 8px; font-size: 0; gap: 0; }
  .notif-panel { max-height: calc(100dvh - 90px); }
}

/* ---------- 🛒 Venta directa (low ticket) ---------- */
.dir-flujo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 14px; font-size: 13px; }
.dir-flujo span { padding: 5px 10px; border-radius: 999px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); white-space: nowrap; }
.dir-flujo i { font-style: normal; color: var(--muted); }
.dir-flujo [hidden] { display: none; }
.dir-partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.dir-parte { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.dir-parte input { position: absolute; opacity: 0; pointer-events: none; }
.dir-parte strong { display: block; }
.dir-parte small { display: block; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.dir-parte-ico { font-size: 22px; }
.dir-parte.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.dir-parte:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dir-switch { width: 38px; height: 22px; border-radius: 999px; background: var(--border); position: relative; flex: none; transition: background .15s; }
.dir-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dir-parte.on .dir-switch { background: var(--accent); }
.dir-parte.on .dir-switch::after { transform: translateX(16px); }
.dir-partes.compacto small { font-size: 12px; }
.bump-fila.con-url { grid-template-columns: auto 1.2fr .55fr 1fr 1.2fr 1.2fr auto; }
@media (max-width: 760px) { .bump-fila.con-url { grid-template-columns: 1fr 1fr; } }
.dir-rango-acc { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dir-extra h3, #dir-objetivos h3, #dir-dias h3 { margin: 0 0 10px; }
#dir-extras, #dir-objetivos, #dir-dias { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.dir-barra { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.dir-barra i { display: block; height: 10px; border-radius: 5px; background: var(--accent); min-width: 2px; }
.dir-barra b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dir-cli-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 10px; }
.dir-cli td { vertical-align: top; }
.dir-cli .badge { margin: 0 4px 4px 0; display: inline-block; }
.dc-codigos { margin-top: 12px; }
.dc-codigos summary { cursor: pointer; font-weight: 600; }
body.embudo-directa .lanz-only { display: none !important; }

/* 🛎️ Vigilancia de los grupos de WhatsApp */
.vigia { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.vigia h3 { margin: 0 0 8px; }
.vigia-estado, .vigia-alertas { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.vigia-alertas li { padding: 8px 12px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--st-caliente); }
.vigia-alertas li.n-alta { border-left-color: var(--error); }
.vigia-pico td { background: color-mix(in srgb, var(--error) 8%, transparent); }
.cx-h { margin: 14px 0 6px; font-size: 14px; }

/* 💬 Plan → Grupo de WhatsApp */
#grupowa-body { display: flex; flex-direction: column; gap: 14px; }
.gw-pasos { margin: 8px 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.gw-rango { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.gw-prompt { white-space: pre-wrap; max-height: 320px; overflow: auto; font-size: 12px; }
#gw-pegar { width: 100%; font-family: ui-monospace, monospace; font-size: 13px; }
.gw-archivos summary h3 { display: inline; margin: 0; }
.gw-archivos summary { cursor: pointer; }
.gw-dia h4 { margin: 14px 0 8px; text-transform: capitalize; }
.gw-msg { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.gw-msg.fijo { background: var(--surface-2); }
.gw-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gw-cab .badge { margin-left: auto; }
.gw-msg textarea, .gw-msg input[type=url], .gw-msg .gw-preg { width: 100%; }
.gw-guion pre { white-space: pre-wrap; margin: 6px 0 0; font-size: 13px; background: var(--surface-2); padding: 8px; border-radius: 8px; }
.gw-falta { color: var(--st-caliente); margin: 0; }
.gw-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; position: sticky; bottom: 0; background: var(--surface); padding: 10px 0; }

/* Margen interior de las tarjetas de Grupo de WhatsApp y Venta directa (.card no lo trae de serie) */
#grupowa-body > .card, #dir-extras > .card, #dir-objetivos > .card, #dir-dias > .card, #view-dclientes > .card { padding: 18px 22px; box-sizing: border-box; min-width: 0; }
#grupowa-body > .card > :first-child { margin-top: 0; }
#grupowa-body h2, #grupowa-body h3 { margin: 0 0 10px; }
#grupowa-body textarea, #grupowa-body input, #grupowa-body select, #grupowa-body pre { box-sizing: border-box; max-width: 100%; }
#grupowa-body .gw-pasos { padding-left: 22px; }
.gw-rango .field.inline { flex: 0 1 220px; }
.gw-rango .field.inline input { width: 100%; }
.gw-rango .btn { margin-left: auto; }
.gw-archivos .table-scroll { margin: 10px 0; }
.gw-msg .gw-at { flex: 0 1 220px; }
.gw-msg .gw-tipo { flex: 0 1 190px; }
@media (max-width: 640px) {
  #grupowa-body > .card { padding: 14px; }
  .gw-rango .field.inline { flex: 1 1 100%; }
  .gw-rango .btn { margin-left: 0; width: 100%; }
  .gw-cab .badge { margin-left: 0; }
}
.gw-directo-info { padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); margin: 10px 0; font-size: 14px; }
#gw-temario { width: 100%; }
.gw-falta code { word-break: break-all; }
.gw-anadir { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 4px; padding: 10px; border: 1px dashed var(--border); border-radius: 10px; }
.gw-anadir-t { font-weight: 600; font-size: 13px; margin-right: 4px; }

/* ---------- 🎨 Marca y avatar (panel del dashboard y página del cliente /marca.html) ---------- */
.mq-prog { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.mq-prog-bar { flex: 1 1 200px; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.mq-prog-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.mq-sec { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin: 10px 0; background: var(--surface); }
.mq-sec > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 4px 0; }
.mq-sec > summary::-webkit-details-marker { display: none; }
.mq-sec-prog { margin-left: auto; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--muted); }
.mq-sec-prog.ok { background: var(--accent-soft); color: var(--accent-ink); }
.mq-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px 16px; padding: 6px 0 4px; }
.mq-campos .field { min-width: 0; }
.mq-campos .field textarea, .mq-campos .field input { width: 100%; box-sizing: border-box; }
.mq-campos .mq-chips, .mq-campos .field:has(textarea) { grid-column: 1 / -1; }
.mq-chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mq-chips legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.mq-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mq-chip span { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 99px; cursor: pointer; font-size: 13px; background: var(--surface); }
.mq-chip input:checked + span { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }
.mq-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.mq-color-fila { display: flex; gap: 8px; align-items: center; }
.mq-color-fila input[type=color] { width: 42px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); flex: none; }
.mq-docs { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.mq-docs li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.mq-docs li small { flex: 1 1 200px; }
.mq-subir { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mk-enlace { display: grid; gap: 8px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; margin-bottom: 12px; }
.mk-enlace > div:first-child { display: grid; gap: 2px; }
.mk-enlace .copy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mk-enlace code { word-break: break-all; font-size: 12px; }
.mk-enlace-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-ok { font-weight: 700; }
.mk-ficha { padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); margin-bottom: 12px; }
.mk-ficha h3 { margin: 0 0 4px; }
.mk-ficha textarea, .mk-prompt-a-mano { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.mk-ficha-acc { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mk-nuevo { display: grid; gap: 8px; max-width: 460px; }
.mk-embudos { display: grid; gap: 8px; }
.mk-borrar { text-align: right; }
.mq-publica { background: var(--bg); }
.mq-pub { max-width: 920px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; }
.mq-pub-head h1 { margin: 0 0 6px; font-size: 22px; }
.mq-bloque { padding: 16px; }
.mq-bloque h2 { margin: 0 0 6px; font-size: 18px; }
.mq-nuevo { display: flex; gap: 8px; flex-wrap: wrap; }
.mq-nuevo input { flex: 1 1 220px; }

/* ---------- 🧱 Páginas del embudo con IA ---------- */
.pg-pasos { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 4px; }
.pg-pag > summary { display: grid; gap: 2px; cursor: pointer; list-style: none; }
.pg-pag > summary::-webkit-details-marker { display: none; }
.pg-pag > summary strong::before { content: '▸ '; color: var(--muted); }
.pg-pag[open] > summary strong::before { content: '▾ '; }
.pg-cuerpo { padding-top: 10px; }
.pg-cuerpo textarea { width: 100%; box-sizing: border-box; }
.pg-prompt { max-height: 420px; overflow: auto; white-space: pre-wrap; font-size: 12px; }
#paginas-body > .card { padding: 16px; box-sizing: border-box; }

/* ---------- 🎨 Asistente de marca (cliente): pantalla completa, sin scroll, paso a paso ---------- */
.asistente-pantalla { position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--text); overflow: hidden; }
.asistente-pantalla[hidden] { display: none; }
.as { height: 100dvh; max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; padding: 0 16px; box-sizing: border-box; }
.as-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.as-tit { display: grid; line-height: 1.2; }
.as-prog { display: grid; gap: 4px; min-width: 0; }
.as-bar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.as-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .35s; }
.as-acc { display: flex; align-items: center; gap: 8px; }
.as-estado.error { color: var(--error); }
.as-main { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 2px; }
.as-paso h2 { margin: 0 0 4px; font-size: 22px; }
.as-paso > p { margin: 0 0 12px; }
.as-centro { max-width: 620px; margin: 6vh auto 0; text-align: center; display: grid; gap: 12px; }
.as-centro h2 { font-size: 28px; }
.as-nota { background: var(--accent-soft); color: var(--text); border-radius: 14px; padding: 14px 16px; text-align: left; line-height: 1.5; }
.as-campos { grid-template-columns: 1fr; gap: 12px; }
.as-campos .mq-chips, .as-campos .field:has(textarea) { grid-column: auto; }
.as-campo.as-falta .field > span, .as-campo.as-falta legend { color: var(--error); }
.as-campo.as-falta textarea, .as-campo.as-falta input[type=text], .as-campo.as-falta input[type=url] { border-color: var(--error); box-shadow: 0 0 0 2px color-mix(in srgb, var(--error) 25%, transparent); }
.as-campo.as-falta .mq-chips { outline: 2px solid color-mix(in srgb, var(--error) 40%, transparent); outline-offset: 4px; border-radius: 8px; }
.as-campos:has(.mq-color) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.mq-opc { font-weight: 400; color: var(--muted); }
.as-prods { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.as-prods li { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.as-faltan { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.as-faltan ul { margin: 6px 0 0; padding-left: 18px; }
.as-faltan .link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
.as-ok { color: var(--accent-ink); font-weight: 600; margin-top: 12px; }
.as-foot { display: flex; align-items: center; gap: 12px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.as-foot[hidden] { display: none; }
.as-foot [data-as="siguiente"] { margin-left: auto; min-width: 160px; }
.as-aviso { color: var(--error); flex: 1; text-align: center; }
.as-error { padding: 24px; text-align: center; }
@media (max-width: 640px) {
  .as-head { grid-template-columns: 1fr auto; }
  .as-prog { grid-column: 1 / -1; grid-row: 2; }
  .as-tit span { display: none; }
  .as-paso h2 { font-size: 19px; }
  .as-foot [data-as="siguiente"] { min-width: 0; }
}
.mk-cliente-sel { margin-left: 8px; max-width: 260px; font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.mk-as { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.mk-as.ok { background: var(--accent-soft); }
.mk-enlace > .btn { justify-self: start; }

/* ---------- 🎯 Crear anuncios con IA ---------- */
#anuncios-body > .card { padding: 16px; box-sizing: border-box; }
.an-obj h3 { margin: 0 0 4px; }
.an-obj > p { margin: 0 0 6px; }
.an-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.an-logo { margin: 10px 0 4px; }
.an-logo-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.an-logo-fila input { flex: 1 1 240px; min-width: 0; }
.an-logo-img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); background: repeating-conic-gradient(#0000 0 25%, #8881 0 50%) 0 0 / 12px 12px; padding: 4px; }

/* ---------- Acceso: «Data driven growth» (espacio, cohete despegando y gráfica de crecimiento) ---------- */
/* Siempre oscura, en modo día y noche. */
.login {
  --lg-fondo: #05060f; --lg-txt: #eef0ff; --lg-tenue: #a3a8c9; --lg-violeta: #8b5cf6; --lg-cian: #22d3ee; --lg-rosa: #f472b6;
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; padding: 0; display: block; color: var(--lg-txt);
  background: radial-gradient(1200px 700px at 70% 120%, #2a1460 0%, transparent 60%), radial-gradient(900px 600px at 0% 0%, #0b2a4a 0%, transparent 55%), linear-gradient(180deg, #05060f 0%, #0a0c24 55%, #140a33 100%);
}
.login[hidden] { display: none; }
.lg-cielo { position: absolute; inset: 0; pointer-events: none; }
/* Estrellas: tres capas a distinta velocidad (el cohete «sube» porque el cielo baja) */
.lg-estrellas { position: absolute; inset: -100% 0 0; background-repeat: repeat; animation: lgCae linear infinite; }
.lg-e1 { background-image: radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 52%), radial-gradient(1px 1px at 140px 90px, #c7d2fe 50%, transparent 52%), radial-gradient(1px 1px at 80px 160px, #fff 50%, transparent 52%), radial-gradient(1px 1px at 190px 210px, #e0e7ff 50%, transparent 52%); background-size: 220px 240px; opacity: .55; animation-duration: 24s; }
.lg-e2 { background-image: radial-gradient(1.5px 1.5px at 50px 70px, #fff 50%, transparent 55%), radial-gradient(1.5px 1.5px at 230px 180px, #a5f3fc 50%, transparent 55%), radial-gradient(1.5px 1.5px at 140px 300px, #fbcfe8 50%, transparent 55%); background-size: 320px 340px; opacity: .75; animation-duration: 14s; }
.lg-e3 { background-image: radial-gradient(2px 2px at 100px 120px, #fff 50%, transparent 60%), radial-gradient(2px 2px at 380px 400px, #ddd6fe 50%, transparent 60%); background-size: 480px 520px; opacity: .9; animation-duration: 8s; }
@keyframes lgCae { from { transform: translateY(0); } to { transform: translateY(50%); } }
.lg-nebulosa { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: lgRespira 9s ease-in-out infinite; }
.lg-n1 { width: 520px; height: 520px; left: -120px; top: 10%; background: radial-gradient(circle, #7c3aed 0%, transparent 70%); }
.lg-n2 { width: 460px; height: 460px; right: 22%; bottom: -160px; background: radial-gradient(circle, #0ea5e9 0%, transparent 70%); animation-delay: -4s; }
@keyframes lgRespira { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.15); opacity: .7; } }
/* Estelas de velocidad */
.lg-rayas i { position: absolute; top: -20%; width: 2px; height: 120px; border-radius: 2px; background: linear-gradient(transparent, rgba(255,255,255,.55)); animation: lgRaya 1.6s linear infinite; opacity: 0; }
.lg-rayas i:nth-child(1) { left: 8%; animation-delay: 0s; } .lg-rayas i:nth-child(2) { left: 18%; animation-delay: .7s; height: 80px; }
.lg-rayas i:nth-child(3) { left: 31%; animation-delay: .3s; } .lg-rayas i:nth-child(4) { left: 44%; animation-delay: 1.1s; height: 60px; }
.lg-rayas i:nth-child(5) { left: 57%; animation-delay: .5s; } .lg-rayas i:nth-child(6) { left: 69%; animation-delay: 1.3s; height: 90px; }
.lg-rayas i:nth-child(7) { left: 82%; animation-delay: .9s; } .lg-rayas i:nth-child(8) { left: 93%; animation-delay: .2s; height: 70px; }
@keyframes lgRaya { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(140vh); opacity: 0; } }
/* Gráfica de crecimiento que se dibuja */
.lg-grafica { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; opacity: .55; }
.lg-linea { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: lgDibuja 3.2s .4s cubic-bezier(.6,.1,.2,1) forwards; filter: drop-shadow(0 0 8px rgba(139,92,246,.8)); }
.lg-area { opacity: 0; animation: lgAparece 1.5s 2.4s ease forwards; }
.lg-puntos circle { opacity: 0; animation: lgAparece .4s ease forwards; }
.lg-puntos circle:nth-child(1) { animation-delay: 1.4s; } .lg-puntos circle:nth-child(2) { animation-delay: 2s; } .lg-puntos circle:nth-child(3) { animation-delay: 2.7s; } .lg-puntos circle:nth-child(4) { animation-delay: 3.4s; filter: drop-shadow(0 0 6px #f472b6); }
@keyframes lgDibuja { to { stroke-dashoffset: 0; } }
@keyframes lgAparece { to { opacity: 1; } }
/* Cohete: despega desde abajo y se queda «volando» con la llama viva */
.lg-cohete { position: absolute; left: 47%; top: 5%; width: 104px; transform: rotate(14deg); animation: lgDespega 2.6s cubic-bezier(.3,.6,.2,1) both, lgVuela 3.5s 2.6s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(139,92,246,.45)); }
.lg-cohete-svg { display: block; width: 100%; height: auto; position: relative; z-index: 2; }
@keyframes lgDespega { 0% { transform: translate(-40px, 70vh) rotate(14deg); } 100% { transform: translate(0, 0) rotate(14deg); } }
@keyframes lgVuela { 0%, 100% { transform: translate(0, 0) rotate(14deg); } 50% { transform: translate(6px, -16px) rotate(12deg); } }
.lg-llama { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); width: 46px; height: 120px; z-index: 1; }
.lg-llama span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; transform-origin: 50% 0; animation: lgLlama .12s ease-in-out infinite alternate; }
.lg-l1 { width: 46px; height: 120px; background: radial-gradient(ellipse at 50% 20%, rgba(255,106,61,.95), rgba(255,106,61,0) 70%); filter: blur(4px); }
.lg-l2 { width: 30px; height: 86px; background: radial-gradient(ellipse at 50% 20%, #ffd166, rgba(255,181,71,0) 75%); animation-duration: .09s !important; }
.lg-l3 { width: 16px; height: 50px; background: radial-gradient(ellipse at 50% 15%, #fff, rgba(255,255,255,0) 80%); animation-duration: .07s !important; }
@keyframes lgLlama { from { transform: translateX(-50%) scaleY(.85) scaleX(1.05); opacity: .85; } to { transform: translateX(-50%) scaleY(1.12) scaleX(.95); opacity: 1; } }
.lg-humo i { position: absolute; left: 50%; top: 125%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: radial-gradient(circle, rgba(203,213,255,.55), rgba(203,213,255,0) 70%); animation: lgHumo 2.2s ease-out infinite; opacity: 0; }
.lg-humo i:nth-child(2) { animation-delay: .35s; } .lg-humo i:nth-child(3) { animation-delay: .7s; } .lg-humo i:nth-child(4) { animation-delay: 1.05s; } .lg-humo i:nth-child(5) { animation-delay: 1.4s; } .lg-humo i:nth-child(6) { animation-delay: 1.75s; }
@keyframes lgHumo { 0% { transform: translate(0, 0) scale(.4); opacity: .9; } 100% { transform: translate(-60px, 260px) scale(3.2); opacity: 0; } }
/* Tarjetas de métricas flotando */
.lg-chip { position: absolute; display: grid; grid-template-columns: auto auto; gap: 2px 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 12px; color: var(--lg-tenue); opacity: 0; animation: lgChip .8s ease forwards, lgFlota 6s ease-in-out infinite; }
.lg-chip b { color: #fff; font-size: 13px; }
.lg-chip span { color: #34d399; font-weight: 600; }
.lg-chip svg { grid-column: 1 / -1; width: 100%; height: 18px; }
.lg-c1 { left: 6%; top: 9%; animation-delay: 1.2s, 2s; }
.lg-c2 { left: 10%; bottom: 12%; animation-delay: 1.6s, 2.4s; }
.lg-c3 { left: 27%; top: 6%; animation-delay: 2s, 2.8s; }
.lg-c2 span { color: #22d3ee; } .lg-c3 span { color: #f472b6; }
@keyframes lgChip { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lgFlota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* Contenido: titular a la izquierda, acceso a la derecha */
.lg-contenido { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; max-width: 1200px; margin: 0 auto; padding: 32px 24px; box-sizing: border-box; display: grid; grid-template-columns: 1.2fr 420px; gap: 48px; align-items: center; }
.lg-hero { align-self: center; padding-bottom: 10vh; }
.lg-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lg-tenue); animation: lgSube .8s .2s ease both; }
.lg-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: lgLatido 2s infinite; }
@keyframes lgLatido { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } }
.lg-titular { margin: 18px 0 12px; font-size: clamp(44px, 6.4vw, 88px); line-height: 1; font-weight: 800; letter-spacing: -.045em; color: #fff; text-shadow: 0 10px 40px rgba(0,0,0,.4); animation: lgSube .9s .35s cubic-bezier(.2,.8,.2,1) both; }
.lg-titular span { display: block; padding: 0 .04em .12em 0; margin-bottom: -.1em; background: linear-gradient(100deg, #22d3ee 0%, #8b5cf6 40%, #f472b6 70%, #22d3ee 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lgBrillo 6s linear infinite; }
@keyframes lgBrillo { to { background-position: -220% 0; } }
/* La palabra que va cambiando (negocio → ventas → cash → libertad → impacto) */
.lg-rota { transition: opacity .35s ease, transform .35s ease, filter .35s ease; will-change: opacity, transform; }
.lg-rota.sale { opacity: 0; transform: translateY(-.25em); filter: blur(6px); }
.lg-rota.entra { opacity: 0; transform: translateY(.3em); filter: blur(6px); transition: none; }
.lg-sub strong { font-weight: 750; }
@media (prefers-reduced-motion: reduce) { .lg-rota, .lg-rota.sale, .lg-rota.entra { transition: none; transform: none; filter: none; } }
.lg-sub { margin: 0; font-size: clamp(16px, 1.6vw, 20px); font-weight: 500; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); max-width: 36em; animation: lgSube .9s .5s ease both; }
@keyframes lgSube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.lg-panel { animation: lgSube 1s .6s cubic-bezier(.2,.8,.2,1) both; }
/* Tarjeta de acceso de cristal */
.login .login-card { max-width: none; width: 100%; box-sizing: border-box; padding: 34px 30px 26px; gap: 14px; border-radius: 24px; color: var(--lg-txt);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.15); }
.login .login-card::before { content: ""; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E") center / 24px no-repeat, linear-gradient(140deg, #22d3ee, #8b5cf6 55%, #f472b6);
  box-shadow: 0 10px 26px -6px rgba(139,92,246,.7); }
.login .login-card h2 { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: #fff; }
.login .login-card .muted, .login .login-card .login-hint { color: var(--lg-tenue); }
.login .login-card input { padding: 13px 14px; border-radius: 12px; background: rgba(5,6,15,.45); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.login .login-card input::placeholder { color: #8088ad; }
.login .login-card input:focus { outline: none; border-color: #ff7a18; box-shadow: 0 0 0 4px rgba(255,122,24,.22); }
.login .login-card .btn.primary { position: relative; overflow: hidden; padding: 14px 16px; border: 0; border-radius: 12px; font-size: 15.5px; font-weight: 800; letter-spacing: .01em; color: #fff !important; text-shadow: 0 1px 2px rgba(120,30,0,.45);
  background: linear-gradient(110deg, #ffb347 0%, #ff7a18 40%, #ff4d00 75%, #ff7a18 100%); background-size: 200% 100%; box-shadow: 0 0 0 1px rgba(255,170,90,.35), 0 12px 34px -8px rgba(255,100,20,.85), 0 0 40px -10px rgba(255,140,40,.7); transition: background-position .5s, transform .15s, box-shadow .3s; }
.login .login-card .btn.primary:hover { box-shadow: 0 0 0 1px rgba(255,190,120,.5), 0 14px 40px -8px rgba(255,100,20,.95), 0 0 56px -8px rgba(255,140,40,.85); }
.login .login-card .btn.primary:hover { background-position: 100% 0; }
.login .login-card .btn.primary:active { transform: translateY(1px); }
.login .login-card .btn.primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: lgReflejo 3.6s ease-in-out infinite; }
@keyframes lgReflejo { 0%, 60% { left: -60%; } 100% { left: 140%; } }
.login .login-card .btn.ghost { color: var(--lg-tenue); }
.login .login-card .error { color: #fda4af; }
.lg-seguro { margin: 2px 0 0 !important; text-align: center; font-size: 12px; color: #7d84a8; }
/* «powered by Tenax Digital» al pie del formulario de entrar */
.lg-powered { margin: 6px 0 0 !important; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; letter-spacing: .02em; color: #7d84a8; }
.tx-logo { display: inline-flex; align-items: center; gap: 5px; color: #e8eaf6; }
.tx-hex { width: 17px; height: 17px; flex: none; }
.tx-txt { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.tx-txt b { font-weight: 700; background: linear-gradient(90deg, #ff8a1f, #ff4b00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login .login-card code.secreto { color: #fff; }
@media (max-width: 900px) {
  /* Móvil: todo el acceso a la vista en la primera carga, con aire a los lados y abajo */
  .lg-contenido { grid-template-columns: 1fr; gap: 30px; align-content: center; padding: max(36px, env(safe-area-inset-top)) 22px calc(36px + env(safe-area-inset-bottom)); }
  .lg-hero { align-self: auto; padding: 0; text-align: center; }
  .lg-eyebrow { display: none; }
  .lg-titular { margin: 0 0 8px; font-size: clamp(36px, 11vw, 52px); }
  .lg-sub { font-size: 14.5px; max-width: 26em; margin: 0 auto; }
  .lg-panel { max-width: 420px; width: 100%; margin: 0 auto; }
  .login .login-card { padding: 22px 20px 18px; gap: 10px; border-radius: 20px; }
  .login .login-card::before { display: none; }
  .login .login-card h2 { font-size: 22px; }
  .login .login-card input { padding: 12px 13px; }
  .login .login-card .btn.primary { padding: 13px 16px; }
  .lg-cohete { left: auto; right: 4%; bottom: auto; top: 1%; width: 40px; opacity: .9; }
  .lg-chip { display: none; }
  .lg-grafica { height: 40%; opacity: .35; }
}
/* Título centrado, iconos en los campos (email y candado) y recuperar contraseña */
.login .login-card h2 { text-align: center; }
.login .login-card .lg-in { padding-left: 46px; background-repeat: no-repeat; background-position: 15px 50%; background-size: 19px 19px; }
.login .login-card .lg-in-email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a8c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E"); }
.login .login-card .lg-in-clave { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a8c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='12' cy='15.5' r='1.2' fill='%23a3a8c9'/%3E%3C/svg%3E"); }
.login .login-card .lg-in:focus.lg-in-email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9a3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E"); }
.login .login-card .lg-in:focus.lg-in-clave { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9a3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='12' cy='15.5' r='1.2' fill='%23ff9a3c'/%3E%3C/svg%3E"); }
.lg-olvido { align-self: flex-end; margin: -4px 2px 2px; padding: 2px 0; border: 0; background: none; color: #ffb36b; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lg-olvido:hover, .lg-olvido:focus-visible { color: #ffd2a6; text-decoration: underline; outline: none; }
.login .login-card .lg-centro { text-align: center; }
.login .login-card .lg-ok { color: #86efac; margin: 0; font-size: 14px; line-height: 1.45; }
.login .login-card .error.lg-ok { color: #86efac; }
/* Móviles bajos (iPhone SE…): un poco más compacto para que el acceso quepa con margen */
@media (max-width: 900px) and (max-height: 620px) {
  .lg-contenido { gap: 22px; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: 24px; }
  .lg-titular { font-size: clamp(32px, 10vw, 42px); }
}
@media (prefers-reduced-motion: reduce) {
  .login *, .login *::before, .login *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  .lg-linea { stroke-dashoffset: 0; }
}

/* Métricas → Grupos de WhatsApp → Impacto de cada mensaje */
.wa-impacto { margin-top: 16px; }
.wa-impacto h3 { margin: 0 0 6px; }
.wa-impacto-tabla td:nth-child(2) { min-width: 220px; }
.wa-impacto-tabla tr.wa-fuga td { background: color-mix(in srgb, #f59e0b 12%, transparent); }

/* ---------- Diseño «espacial» (Cuenta → Diseño): el de la pantalla de acceso en todo el dashboard ----------
   Siempre oscuro: cielo con estrellas y nebulosas, tarjetas de cristal y botones naranja espacial.
   Se activa con <html data-estilo="espacial"> (tema.js); el clásico no cambia nada. */
:root[data-estilo="espacial"] {
  --bg: #05060f;
  --surface: #0f1130;
  --surface-2: #161a40;
  --surface-3: #1e2352;
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .2);
  --text: #eef0ff;
  --text-2: #c7cbe8;
  --muted: #a3a8c9;
  --accent: #ff7a18;
  --accent-2: #ff9a3c;
  --accent-ink: #ffffff;
  --accent-soft: rgba(255, 122, 24, .14);
  --focus: #ff9a3c;
  --error: #ff8a80;
  --wa: #34d399;
  --st-muy-caliente: #fb7185;
  --st-caliente: #fb923c;
  --st-templado: #fcd34d;
  --st-frio: #67e8f9;
  --chip-on-bg: rgba(52, 211, 153, .16);
  --chip-on-ink: #86efac;
  --chip-half-bg: rgba(251, 191, 36, .16);
  --chip-half-ink: #fcd34d;
  --tone-accent: #ff9a3c;
  --tone-vip: #fbbf24;
  --tone-buy: #34d399;
  --tone-live: #a78bfa;
  --tone-info: #22d3ee;
  --tone-money: #5eead4;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 10px 30px -10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  --esp-cristal: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));
  color-scheme: dark;
}
:root[data-estilo="espacial"] {
  min-height: 100%;
  background: radial-gradient(1200px 700px at 85% 110%, #2a1460 0%, transparent 60%), radial-gradient(900px 600px at 0% 0%, #0b2a4a 0%, transparent 55%), linear-gradient(180deg, #05060f 0%, #0a0c24 55%, #140a33 100%), #05060f;
  background-attachment: fixed;
}
:root[data-estilo="espacial"] body { background: transparent; }
/* Cielo: dos capas de estrellas que caen muy despacio (fijas detrás de todo). */
:root[data-estilo="espacial"] body::before, :root[data-estilo="espacial"] body::after {
  content: ""; position: fixed; inset: -100% 0 0; z-index: -1; pointer-events: none; background-repeat: repeat; animation: lgCae linear infinite;
}
:root[data-estilo="espacial"] body::before {
  background-image: radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 52%), radial-gradient(1px 1px at 140px 90px, #c7d2fe 50%, transparent 52%), radial-gradient(1px 1px at 80px 160px, #fff 50%, transparent 52%), radial-gradient(1px 1px at 190px 210px, #e0e7ff 50%, transparent 52%);
  background-size: 220px 240px; opacity: .45; animation-duration: 120s;
}
:root[data-estilo="espacial"] body::after {
  background-image: radial-gradient(1.5px 1.5px at 50px 70px, #fff 50%, transparent 55%), radial-gradient(1.5px 1.5px at 230px 180px, #a5f3fc 50%, transparent 55%), radial-gradient(1.5px 1.5px at 140px 300px, #fbcfe8 50%, transparent 55%);
  background-size: 320px 340px; opacity: .55; animation-duration: 80s;
}
@media (prefers-reduced-motion: reduce) { :root[data-estilo="espacial"] body::before, :root[data-estilo="espacial"] body::after { animation: none; } }
/* Barra de arriba y menú lateral de cristal */
:root[data-estilo="espacial"] .topbar { background: rgba(5, 6, 15, .55); border-bottom-color: rgba(255, 255, 255, .08); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
:root[data-estilo="espacial"] .sb-item.active { background: var(--esp-cristal); border-color: rgba(255, 255, 255, .16); box-shadow: 0 10px 30px -12px rgba(139, 92, 246, .55); }
:root[data-estilo="espacial"] .sb-item.active .sb-ico { background: linear-gradient(140deg, #ff9a3c, #ff5e1a); }
/* Tarjetas de cristal */
:root[data-estilo="espacial"] .card, :root[data-estilo="espacial"] .kpi, :root[data-estilo="espacial"] .kpi.static:hover {
  background: var(--esp-cristal), rgba(15, 17, 48, .55); border-color: rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
}
:root[data-estilo="espacial"] .kpi:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)), rgba(15, 17, 48, .6); }
:root[data-estilo="espacial"] .kpi .kpi-value { color: #fff; }
/* Botón principal: naranja espacial con brillo */
:root[data-estilo="espacial"] .btn.primary {
  background: linear-gradient(135deg, #ff9a3c 0%, #ff6a1a 55%, #ff7a18 100%); border-color: transparent; color: #fff;
  box-shadow: 0 10px 26px -8px rgba(255, 106, 26, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
}
:root[data-estilo="espacial"] .btn.primary:hover { filter: brightness(1.08); }
:root[data-estilo="espacial"] .btn:not(.primary):not(.ghost):not(.wa) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
:root[data-estilo="espacial"] .btn:not(.primary):not(.ghost):not(.wa):hover { background: rgba(255, 255, 255, .11); }
/* Pestañas */
:root[data-estilo="espacial"] .view-tab.active { border-bottom-color: #ff9a3c; }
:root[data-estilo="espacial"] .subview-tab { background: rgba(255, 255, 255, .05); }
:root[data-estilo="espacial"] .subview-tab.active { background: rgba(255, 122, 24, .16); border-color: rgba(255, 154, 60, .55); }
/* Diálogos y menús: opacos (se lee mejor) con borde de luz */
:root[data-estilo="espacial"] .dialog { background: linear-gradient(180deg, #12153a, #0c0e2a); border-color: rgba(255, 255, 255, .14); box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 0 1px rgba(139, 92, 246, .18); }
:root[data-estilo="espacial"] .dialog::backdrop { background: rgba(3, 4, 12, .65); backdrop-filter: blur(3px); }
:root[data-estilo="espacial"] .notice { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
/* Saludo del Inicio con el degradado del titular de acceso */
:root[data-estilo="espacial"] #inicio-saludo { background: linear-gradient(100deg, #22d3ee 0%, #8b5cf6 45%, #f472b6 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* En espacial no hay modo día: se oculta su botón */
:root[data-estilo="espacial"] [data-tema-toggle] { display: none; }

/* Cuenta → Diseño (clásico / espacial) */
.tb-estilo { display: grid; gap: 6px; padding: 8px 10px; }
.tb-estilo > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.tb-estilo-opc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tb-estilo-opc button { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.tb-estilo-opc button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

/* ---------- Vistas «con IA» (Plan → Anuncios, Páginas y Grupo de WhatsApp): más aire y una acción clara ---------- */
#anuncios-body, #paginas-body, #grupowa-body { display: flex; flex-direction: column; gap: 18px; }
#anuncios-body > .card, #paginas-body > .card, #grupowa-body > .card { margin: 0; }
.st-hero { padding: 24px 26px; display: grid; gap: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 60%); }
.st-hero-cab { display: flex; gap: 16px; align-items: center; }
.st-hero-ico { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: var(--surface-2); border: 1px solid var(--border); }
.st-hero h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.st-sub { margin: 4px 0 0; color: var(--text-2); }
.st-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.st-pasos li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; line-height: 1.4; }
.st-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.st-n.grande { width: 32px; height: 32px; font-size: 15px; }
/* Avisos de una línea con su botón a la derecha */
.st-aviso { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); font-size: 14px; }
.st-aviso > span { flex: 1 1 260px; }
.st-aviso.warn { border-color: color-mix(in srgb, #e07a1f 40%, var(--border)); background: color-mix(in srgb, #e07a1f 8%, var(--surface)); }
.st-aviso.ok { border-color: color-mix(in srgb, var(--tone-buy) 35%, var(--border)); background: color-mix(in srgb, var(--tone-buy) 7%, var(--surface)); }
.st-aviso.info { border-color: color-mix(in srgb, var(--tone-info) 35%, var(--border)); background: color-mix(in srgb, var(--tone-info) 7%, var(--surface)); }
.st-aviso.err { border-color: color-mix(in srgb, var(--error) 40%, var(--border)); background: color-mix(in srgb, var(--error) 8%, var(--surface)); }
/* Bloque de ajustes: formulario en dos columnas */
.st-ajustes, .st-paso { padding: 22px 24px; display: grid; gap: 16px; }
.st-sec-cab { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.st-sec-cab h3 { margin: 0; font-size: 17px; }
.st-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 18px; align-items: start; }
.st-form .field { margin: 0; }
.st-form .st-ancho { grid-column: 1 / -1; }
.st-ayuda { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted); }
.st-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.st-chip.ok { color: var(--tone-buy); border-color: color-mix(in srgb, var(--tone-buy) 35%, var(--border)); }
/* Plegables y «ver el prompt» */
.st-plegable > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; cursor: pointer; font-weight: 650; list-style: none; padding: 4px 0; }
.st-plegable > summary::-webkit-details-marker { display: none; }
.st-plegable > summary::before { content: '▸'; color: var(--muted); transition: transform .15s; }
.st-plegable[open] > summary::before { transform: rotate(90deg); }
.st-plegable > summary .btn { margin-left: auto; }
.st-plegable[open] > summary { margin-bottom: 10px; }
.st-ver > summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
.st-ver[open] > summary { margin-bottom: 10px; }
.st-acciones { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.st-acciones .st-ver { flex: 1 1 100%; }
/* Título de sección y cuadrícula de tarjetas */
.st-titulo { margin: 8px 0 -4px; font-size: 18px; display: flex; gap: 10px; align-items: center; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }
.st-grid > .card { margin: 0; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.st-bloque { width: 100%; justify-content: center; padding-block: 11px; font-size: 15px; }
/* Anuncios: tarjeta de cada objetivo */
.an-obj-cab, .pg-cab { display: flex; gap: 12px; align-items: center; }
.an-obj-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--accent-soft); }
.an-obj h3, .pg-card h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.an-obj-meta, .pg-obj { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.an-obj-para { margin: 0; display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--muted); }
.an-mas { display: grid; gap: 6px; }
.an-mas-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.an-mas-btns .btn { justify-content: center; padding: 6px 4px; white-space: nowrap; }
.an-obj > p, .an-obj h3 { margin: 0; }
.st-ajustes .an-logo { margin: 0; }
/* Páginas */
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-card .pg-urls { margin: 0; }
.st-paso-cab { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.st-paso-txt { flex: 1 1 240px; }
.st-paso-txt h3 { margin: 4px 0 2px; font-size: 17px; }
.st-paso-txt p { margin: 0; }
.st-paso-cab .pg-chips { margin-top: 6px; }
.gw-form { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
#grupowa-body .gw-archivos > details > :not(summary) { margin-top: 10px; }
@media (max-width: 640px) {
  .st-hero, .st-ajustes, .st-paso { padding: 18px; }
  .st-hero h2 { font-size: 19px; }
  .st-pasos { grid-template-columns: 1fr; }
}
.an-grid { align-items: stretch; }
.an-grid .an-obj > .btn.primary { margin-top: auto; }

/* ---------- Plan → Carrito: resumen, tira de días y timeline ---------- */
#carrito-vista { display: flex; flex-direction: column; gap: 18px; }
#carrito-vista > .card { margin: 0; }
.car-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.car-stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.car-stat strong { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.car-stat span { font-size: 13px; color: var(--muted); }
.car-tira { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.car-tira-dia { flex: 1 0 84px; display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); }
.car-tira-dia:hover { border-color: var(--accent); }
.car-tira-dia strong { font-size: 22px; line-height: 1.1; }
.car-tira-n { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.car-tira-m { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.car-tira-ico { font-size: 15px; min-height: 20px; }
.car-tira-dia.pasado { opacity: .5; }
.car-tira-dia.hoy { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.car-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.car-timeline::before { content: ""; position: absolute; left: 35px; top: 10px; bottom: 10px; width: 2px; background: var(--border); }
.car-t-dia { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; position: relative; scroll-margin-top: 90px; }
.car-fecha { position: relative; z-index: 1; display: grid; justify-items: center; padding: 10px 4px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); text-transform: capitalize; }
.car-fecha strong { font-size: 26px; line-height: 1.1; }
.car-fecha-d, .car-fecha-m { font-size: 12px; color: var(--muted); }
.car-t-dia.hoy .car-fecha { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.car-t-dia.hoy .car-fecha span { color: inherit; opacity: .85; }
.car-t-dia.pasado { opacity: .55; }
.car-t-card { margin: 0; padding: 16px 18px; display: grid; gap: 12px; }
.car-t-dia.hoy .car-t-card { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
.car-t-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.car-t-cab h3 { margin: 0; font-size: 17px; }
.car-hoy-chip { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.car-hitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.car-hito { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.car-hito-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-size: 17px; }
.car-hito-txt { display: grid; gap: 4px; font-size: 14px; }
.car-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.car-chip { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--tone-vip) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone-vip) 35%, var(--border)); }
.car-hora-chip { display: inline-flex; padding: 3px 9px; border-radius: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface-2); border: 1px solid var(--border); }
.car-hora-chip.wa { color: var(--wa); border-color: color-mix(in srgb, var(--wa) 35%, var(--border)); }
.car-envios-v { display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--border); }
.car-envios-v > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.car-env-l { font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 104px; }
.car-estrategia { margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--surface-2); font-size: 14px; display: grid; gap: 4px; }
@media (max-width: 640px) {
  .car-timeline::before { left: 27px; }
  .car-t-dia { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
  .car-fecha strong { font-size: 21px; }
  .car-env-l { min-width: 0; flex-basis: 100%; }
}
.pg-ghl-nota ol { margin: 6px 0 6px; padding-left: 20px; display: grid; gap: 4px; }

/* ⚡ Nuevo lanzamiento rápido */
#nl-dialog .dialog-body { gap: 16px; }
.nl-sec { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; display: grid; gap: 10px; }
.nl-sec-t { margin: 0; font-weight: 600; }
.nl-bonus { display: grid; gap: 6px; }
.nl-bonus p { margin: 0; }
.nl-meta-calc { display: grid; gap: 8px; margin-top: 10px; }
.nl-meta-calc .plan-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nl-meta-calc p { margin: 0; }
.nl-hacer { padding: 12px 14px; display: grid; gap: 8px; background: var(--surface-2); }
.nl-hacer-t { margin: 0; font-weight: 600; }
.nl-hacer .chk { display: flex; gap: 10px; align-items: flex-start; }
.nl-hacer .chk input:disabled + span { opacity: .55; }
.nl-hacer code { font-size: 12px; }
.nl-zoom { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.nl-res { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.nl-res-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nl-fechas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.nl-fechas li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.nl-fechas li span { font-size: 12px; color: var(--muted); }
.nl-fechas li strong { font-variant-numeric: tabular-nums; }
.nl-mas { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }

/* ---------- Pantalla de enhorabuena (nuevo embudo / lanzamiento) ---------- */
.dialog.fiesta[open] { animation: fiestaFondo .25s ease-out; overflow: visible; }
.fiesta .fiesta-body { position: relative; z-index: 1; padding: 28px 26px 22px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 40px); overflow-y: auto; animation: fiestaIn .45s cubic-bezier(.2, 1.3, .4, 1); }
.fiesta-confeti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2; }
.fiesta-emoji { font-size: 56px; line-height: 1; text-align: center; animation: fiestaSalto 1s ease-in-out .3s 2; }
.fiesta h2 { margin: 0; text-align: center; font-size: 24px; font-weight: 800; }
.fiesta-sub { margin: 0; text-align: center; color: var(--muted); }
.fiesta-hecho { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fiesta-hecho li { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.fiesta-hecho li.mal { background: color-mix(in srgb, var(--error) 10%, transparent); border-color: color-mix(in srgb, var(--error) 35%, transparent); }
.fiesta-h { margin: 6px 0 0; font-size: 15px; }
.fiesta-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: flex; flex-direction: column; gap: 8px; }
.fiesta-pasos li { counter-increment: paso; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2, transparent); }
.fiesta-pasos li::before { content: counter(paso); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--accent); color: var(--accent-ink); }
.fiesta-pasos strong { font-size: 14px; }
.fiesta-pasos span { font-size: 13px; color: var(--muted); }
.fiesta-email { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.fiesta-acciones { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; position: sticky; bottom: -22px; margin: 0 -26px -22px; padding: 12px 26px 16px; background: var(--surface); border-top: 1px solid var(--border); }
.fiesta-acciones .btn { min-width: 180px; }
@keyframes fiestaFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes fiestaIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes fiestaSalto { 0%, 100% { transform: none; } 30% { transform: translateY(-10px) rotate(-8deg); } 60% { transform: translateY(0) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .fiesta .fiesta-body, .fiesta-emoji, .dialog.fiesta[open] { animation: none; } }
.nl-hacer .nl-zoom { padding: 0; border: 0; background: none; }
.nl-hacer .chk input, .nl-bonus .chk input { width: auto; margin-top: 3px; flex-shrink: 0; }
.nl-bonus .chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
@media (max-width: 560px) { #nl-dialog .dialog-foot { flex-wrap: wrap; } #nl-dialog .dialog-foot .spacer { display: none; } #nl-dialog #nl-crear, #nl-dialog #nl-siguiente { flex: 1 1 auto; } #nl-dialog #nl-manual { order: 9; flex: 1 1 100%; } }
.nl-mas .nl-error { color: var(--error); font-weight: 600; }
.nl-mas .nl-aviso { color: var(--st-caliente); }
.nl-esc { width: 100%; border-collapse: collapse; font-size: 14px; }
.nl-esc th, .nl-esc td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.nl-esc .num { text-align: right; font-variant-numeric: tabular-nums; }
.nl-esc .nl-neutro { background: var(--accent-soft); font-weight: 700; }
.nl-esc tbody th { font-weight: 500; color: var(--text-2); }
.tabla-scroll { overflow-x: auto; }
.fiesta-det { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; }
.fiesta-det summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.fiesta-det p { margin: 8px 0 4px; }
.fiesta-mails { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.fiesta-mails li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); }
.fiesta-mails li span { color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { #fiesta-ok { order: 1; flex: 1 1 100%; } #fiesta-deshacer { order: 2; } }
.tg-pasos { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.tg-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tg-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
#tg-box .row { flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.cl-url { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.cl-url code { overflow-wrap: anywhere; }
#cl-lista .tg-lista li > span { min-width: 0; overflow-wrap: anywhere; }
#tg-enlace .st-aviso { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.narr-card { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.nl-narr-ops { display: grid; gap: 6px; }
.nl-narr-ops .chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.nl-narr-ops .chk input { width: auto; margin-top: 3px; flex-shrink: 0; }
#nl-narr-nueva .st-aviso { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
#narr-prompt { max-height: 260px; overflow: auto; white-space: pre-wrap; }
/* ---------- ✉️ Emails con IA ---------- */
.em-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.em-stats { display: flex; gap: 28px; }
.em-stat { display: grid; line-height: 1.1; }
.em-stat b { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.em-stat span { font-size: 13px; color: var(--muted); }
.em-copiar { font-size: 15px; padding: 12px 22px; }
.em-fases { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.em-fase { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; }
.em-fase:hover { border-color: var(--border-strong); }
.em-fase.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.em-fase:not(.on) { text-decoration: line-through; opacity: .7; }
.em-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 6px 0 4px; }
.em-grad { display: inline-flex; justify-content: space-between; gap: 30px; padding: 3px 10px; border-radius: 999px; color: #fff; font-weight: 700; background: linear-gradient(90deg, #d9488f, #7c5cd6 55%, #2f7dd1); }
.em-grad i { font-style: normal; font-size: 12px; }
.em-dias { display: grid; gap: 14px; margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
.em-dia.ancho { grid-column: 1 / -1; }
.em-dia { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px 16px; }
.em-dia.es-carrito { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.em-dia-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.em-fecha { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); line-height: 1; flex-shrink: 0; }
.em-fecha b { font-size: 20px; font-weight: 800; }
.em-fecha small { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
.em-dia.es-carrito .em-fecha { background: var(--accent); color: var(--accent-ink); }
.em-dia.es-carrito .em-fecha small { color: inherit; opacity: .85; }
.em-dia-txt { display: grid; flex: 1; min-width: 0; }
.em-dia-txt strong { font-size: 15px; }
.em-dia-txt strong.sem { text-transform: capitalize; }
.em-dia-txt span { font-size: 13px; color: var(--muted); }
.em-n { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 3px 9px; }
.em-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.em-card { display: grid; gap: 8px; align-content: start; min-width: 0; overflow: hidden; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--border-strong); cursor: default; }
.em-hora { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.em-tit { display: flex; gap: 6px; font-weight: 700; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.em-ico { flex-shrink: 0; }
.em-pie { display: flex; flex-wrap: wrap; gap: 6px; }
.em-tono, .em-motivo { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.em-card.f-registro { border-left-color: #2e9e6a; } .em-card.f-preclase { border-left-color: #1f9bb0; } .em-card.f-vip { border-left-color: #d4a017; }
.em-card.f-directo { border-left-color: #d93a3a; } .em-card.f-replay { border-left-color: #7d7d7d; } .em-card.f-cierre { border-left-color: #9a8f86; }
.em-card.f-carrito { border-left-color: var(--accent); }
.em-card.t-emocional { border-left-color: #d9488f; } .em-card.t-mixto { border-left-color: #7c5cd6; } .em-card.t-racional { border-left-color: #2f7dd1; }
.em-card.t-emocional .em-tono { color: #b8336f; border-color: color-mix(in srgb, #d9488f 40%, transparent); }
.em-card.t-mixto .em-tono { color: #6447b8; border-color: color-mix(in srgb, #7c5cd6 40%, transparent); }
.em-card.t-racional .em-tono { color: #2566ad; border-color: color-mix(in srgb, #2f7dd1 40%, transparent); }
.em-ajustes > summary { cursor: pointer; font-weight: 700; }
.em-ajustes[open] > summary { margin-bottom: 12px; }
.em-ajustes { display: block; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; margin-top: 14px; }
.em-gan-box { display: grid; gap: 6px; margin: 12px 0; }
.em-gan { white-space: pre-wrap; }
@media (max-width: 560px) { .em-stats { gap: 18px; } .em-stat b { font-size: 24px; } .em-copiar { width: 100%; } .em-cards { grid-template-columns: 1fr 1fr; } }
:root[data-theme="dark"] .em-card.t-emocional .em-tono { color: #f39ac4; }
:root[data-theme="dark"] .em-card.t-mixto .em-tono { color: #b9a4ff; }
:root[data-theme="dark"] .em-card.t-racional .em-tono { color: #8cc0f5; }

/* ---------- Configuración del lanzamiento: menú lateral por fases + contenido ----------
   Escritorio: menú a la izquierda (lanzamiento, «Listo para lanzar» y apartados con su estado) y el apartado a la derecha.
   Móvil: primero el menú (como unos Ajustes); al elegir un apartado se abre a pantalla completa y «‹ Apartados» vuelve. */
#config-dialog { width: min(1200px, calc(100vw - 32px)); height: min(900px, calc(100vh - 32px)); }
#config-dialog > form { height: 100%; max-height: none; }
#config-dialog .cfg-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.cfg-side { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; overflow-y: auto; border-right: 1px solid var(--border); background: var(--surface-2); }
.cfg-main { display: flex; flex-direction: column; gap: 16px; padding: 20px 26px 28px; overflow-y: auto; min-width: 0; }
.cfg-main > .tab-panel { gap: 16px; }
.cfg-main-head { display: flex; align-items: center; gap: 10px; }
.cfg-main-head h3 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.cfg-volver { display: none; }
.cfg-pick { display: flex; gap: 8px; align-items: flex-end; }
.cfg-pick .field { flex: 1; min-width: 0; margin: 0; }
.cfg-pick select { width: 100%; }
.cfg-pick .btn { flex: none; }
/* «Listo para lanzar»: anillo + siguiente paso */
#config-dialog .cfg-listo { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px; border-radius: 14px; background: var(--surface); }
.cfg-listo-fila { display: flex; align-items: center; gap: 12px; }
.cfg-anillo { --p: 0; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--st-caliente, #e07a1f) calc(var(--p) * 1%), var(--border) 0); }
.cfg-anillo.ok { background: conic-gradient(var(--tone-buy, #138a4b) calc(var(--p) * 1%), var(--border) 0); }
.cfg-anillo span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 12px; font-weight: 700; }
.cfg-listo-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cfg-sig { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; gap: 6px; }
/* Menú de apartados */
.cfg-nav { display: flex; flex-direction: column; gap: 2px; }
.cfg-nav-g { margin: 12px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cfg-nav-g:first-child { margin-top: 0; }
.cfg-nav .tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; text-align: left; white-space: normal; color: var(--text-2); transition: background .15s; }
.cfg-nav .tab:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.cfg-nav .tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--border); }
.cfg-nav .tab .tab-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--surface); }
.cfg-nav .tab.active .tab-ico { background: var(--accent); color: var(--accent-ink); }
.cfg-nav-t { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 14px; line-height: 1.25; }
.cfg-nav-t small { font-size: 11.5px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-nav .tab .tab-falta { margin-left: auto; flex: none; }
.cfg-nav .tab .tab-falta.ok { background: color-mix(in srgb, var(--tone-buy, #138a4b) 16%, transparent); color: var(--tone-buy, #138a4b); }
/* Bloques más limpios: explicaciones en una línea (al pulsar se leen enteras), ayudas de cada campo al escribir en él */
.cfg-main .cfg-sec { padding: 18px 20px 20px; gap: 14px; border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.cfg-main .cfg-sec-head h3 { font-size: 16px; }
.cfg-main .cfg-sec-head p, .cfg-main .tab-panel > p.muted { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.cfg-main .cfg-sec-head p.abierto, .cfg-main .tab-panel > p.muted.abierto { display: block; -webkit-line-clamp: unset; }
.cfg-main .cfg-sec-head p:not(.abierto)::after { content: ""; }
.cfg-main .field > span small { display: none; }
.cfg-main .field:focus-within > span small { display: inline; color: var(--muted); font-weight: 400; }
.cfg-main .field > span:has(small)::after { content: "ⓘ"; margin-left: 4px; font-size: 12px; color: var(--muted); opacity: .7; }
.cfg-main .field:focus-within > span:has(small)::after { content: none; }
/* Nuevo / revisar / siempre igual: un punto de color (la leyenda, en «Qué cambiar en cada lanzamiento») */
.cfg-main .field.ciclo-nuevo, .cfg-main .field.ciclo-revisar, .cfg-main .field.ciclo-fijo { border-left: 0; padding-left: 0; }
.cfg-main .field > span .badge-cambia, .cfg-main .field > span .badge-revisa, .cfg-main .field > span .badge-fija { font-size: 0; width: 8px; height: 8px; padding: 0; margin-left: 6px; vertical-align: 1px; }
.cfg-main .field > span .badge-cambia { background: #e0703a; }
.cfg-main .field > span .badge-revisa { background: #e2b23a; }
.cfg-main .field > span .badge-fija { background: #6fae80; }
/* Listas de comprobación plegadas */
.cfg-ayuda { padding: 10px 14px; gap: 10px; }
.cfg-ayuda > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cfg-ayuda > summary::-webkit-details-marker { display: none; }
.cfg-ayuda > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.cfg-ayuda[open] > summary::before { transform: rotate(90deg); }
.cfg-ayuda[open] > summary { margin-bottom: 8px; }
@media (max-width: 760px) {
  #config-dialog { width: 100vw; height: 100dvh; }
  #config-dialog .cfg-body { grid-template-columns: minmax(0, 1fr); }
  #config-dialog.cfg-en-menu .cfg-main { display: none; }
  #config-dialog:not(.cfg-en-menu) .cfg-side { display: none; }
  .cfg-side { border-right: 0; padding: 14px 12px 20px; }
  .cfg-main { padding: 12px 12px 24px; }
  .cfg-volver { display: inline-flex; flex: none; }
  .cfg-main-head h3 { font-size: 18px; }
  .cfg-nav .tab { padding: 12px 10px; background: var(--surface); margin-bottom: 4px; box-shadow: 0 0 0 1px var(--border); }
  .cfg-nav .tab::after { content: "›"; font-size: 20px; color: var(--muted); margin-left: 4px; }
  .cfg-nav .tab .tab-falta { margin-left: auto; }
  .cfg-main .cfg-sec { padding: 14px; }
}
:root[data-estilo="espacial"] .cfg-side { background: rgba(255, 255, 255, .025); border-right-color: rgba(255, 255, 255, .08); }
:root[data-estilo="espacial"] #config-dialog .cfg-listo, :root[data-estilo="espacial"] .cfg-anillo span { background: #12153a; }
:root[data-estilo="espacial"] .cfg-nav .tab.active, :root[data-estilo="espacial"] .cfg-nav .tab .tab-ico { background: rgba(255, 255, 255, .07); }
:root[data-estilo="espacial"] .cfg-nav .tab.active .tab-ico { background: linear-gradient(140deg, #ff9a3c, #ff5e1a); color: #fff; }
.cfg-main .field > span .badge-cambia, .cfg-main .field > span .badge-revisa, .cfg-main .field > span .badge-fija { vertical-align: middle; }
/* Plan → Tareas: 🧠 Análisis del lanzamiento con Claude */
.an-ia { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 16px 20px; border-left: 4px solid var(--tone-live); }
.an-ia-txt { flex: 1 1 340px; min-width: 0; }
.an-ia-txt h3 { margin: 0 0 6px; font-size: 16px; }
.an-ia-txt p { margin: 0 0 4px; }
.an-ia-acc { display: flex; flex-wrap: wrap; gap: 8px; }
/* Plan → 🧠 Claude */
#claude-body, #automatizaciones-body { display: flex; flex-direction: column; gap: 14px; }
#claude-body .an-ia { margin-top: 0; }
.cl-hub h3 { margin: 0 0 4px; font-size: 16px; }
.cl-atajos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.cl-atajo { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.cl-atajo:hover { border-color: var(--accent); transform: translateY(-1px); }
.cl-atajo-i { font-size: 22px; flex: none; }
.cl-atajo span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cl-atajo small { color: var(--muted); font-size: 12px; }
/* Plan → ⚙️ Automatizaciones */
.au-head h3 { margin: 0 0 4px; font-size: 17px; }
.au-head p { margin: 4px 0; }
.au-origen { margin: 8px 0 12px; flex-wrap: wrap; }
.au-progreso { display: grid; gap: 6px; font-size: 14px; max-width: 420px; }
.au-prep { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; border-left: 4px solid var(--tone-live); }
.au-prep h4 { margin: 0 0 2px; }
.au-prep p { margin: 0; }
.au-item { display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--border); }
.au-item.au-creada { border-left-color: var(--st-caliente, #e07a1f); }
.au-item.au-probada { border-left-color: var(--tone-buy, #138a4b); }
.au-top { display: flex; align-items: center; gap: 12px; }
.au-n { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; background: var(--surface-2); }
.au-probada .au-n { background: color-mix(in srgb, var(--tone-buy, #138a4b) 16%, transparent); color: var(--tone-buy, #138a4b); }
.au-tit { flex: 1; min-width: 0; }
.au-tit h4 { margin: 0; font-size: 15px; }
.au-tit code { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.au-estado { flex: none; width: auto; }
.au-item > p { margin: 0; }
.au-falta { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: #fff1cc; color: #7a5200; }
:root[data-theme="dark"] .au-falta, :root[data-estilo="espacial"] .au-falta { background: #3f3413; color: #f3d77e; }
.au-revisar { font-size: 13px; }
.au-det summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); }
.au-det ol { margin: 6px 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.au-det p { margin: 6px 0 0; font-size: 13px; }
.au-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.au-url { flex: 1 1 260px; min-width: 0; }
.cfg-reg-poner { margin-top: 6px; align-self: flex-start; }
@media (max-width: 640px) { .au-top { flex-wrap: wrap; } .au-estado { width: 100%; } }
.au-head, .au-prep, .au-item, .cl-hub { padding: 16px 20px; }
@media (max-width: 640px) { .au-head, .au-prep, .au-item, .cl-hub { padding: 14px; } }
/* Código para el nombre de las campañas de Meta (VSL, venta directa y meteóricos) */
.meta-cod { grid-column: 1 / -1; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); display: grid; gap: 4px; }
.meta-cod p { margin: 0; }
.meta-cod-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; }
.meta-cod-fila code { font-size: 14px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--surface); }
.meta-cod-ok { color: var(--tone-buy, #138a4b); font-weight: 600; font-size: 13px; }
.meta-cod-aviso { font-size: 13px; padding: 6px 8px; border-radius: 8px; background: #fff1cc; color: #7a5200; }
:root[data-theme="dark"] .meta-cod-aviso, :root[data-estilo="espacial"] .meta-cod-aviso { background: #3f3413; color: #f3d77e; }
/* Venta directa → 👑 Anuncios ganadores */
.dan-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; padding: 12px 16px; margin-bottom: 14px; }
.dan-podio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.dan-top { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 16px 18px; border-top: 4px solid var(--border); }
.dan-top-1 { border-top-color: #e2b23a; } .dan-top-2 { border-top-color: #a8a29e; } .dan-top-3 { border-top-color: #c2784a; }
.dan-med { font-size: 30px; line-height: 1; }
.dan-top-t { display: flex; flex-direction: column; min-width: 0; }
.dan-top-t strong { overflow-wrap: anywhere; }
.dan-top-t small { overflow-wrap: anywhere; }
.dan-top-k { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dan-top-k span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.dan-top-k b { font-size: 18px; }
.dan-top-k small { color: var(--muted); font-size: 12px; }
.dan-ok { color: var(--tone-buy, #138a4b); }
.dan-mal { color: var(--error, #c0362c); }
.dan-t tr.dan-sin td { opacity: .75; }
#dan-tabla .card > p { margin: 0; padding: 10px 16px 14px; }

/* 📣 Publicidad: árbol campaña → conjunto → anuncio y avisos de anuncios nuevos */
.pb-rango { margin-bottom: 14px; }
.notice.ok { border-left: 3px solid var(--tone-buy); background: color-mix(in srgb, var(--tone-buy) 6%, var(--surface)); }
.pb-avisos { margin-bottom: 14px; }
.pb-avisos ul { margin: 6px 0 0; padding-left: 4px; list-style: none; }
.pb-avisos li { margin: 3px 0; }
.notice.err.pb-avisos li, .notice.err.pb-avisos .small { color: var(--text); }
.pb-umbrales { margin-top: 8px; }
.pb-umbrales summary { cursor: pointer; color: var(--accent); font-size: .9em; }
.pb-arbol-card { padding: 14px 16px; }
.pb-barra { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; }
.pb-solo { display: inline-flex; gap: 6px; align-items: center; font-size: .9em; }
.pb-acc { display: inline-flex; gap: 6px; margin-left: auto; }
.pb-t td, .pb-t th { white-space: nowrap; }
.pb-t .pb-c1 { white-space: normal; min-width: 240px; max-width: 420px; padding-left: calc(8px + var(--pb-prof, 0) * 22px); }
.pb-c1-in { display: flex; gap: 6px; align-items: flex-start; }
.pb-nom { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.pb-nom small { font-size: .78em; }
.pb-tog, .pb-tog-v { flex: 0 0 22px; width: 22px; height: 22px; }
.pb-tog { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; line-height: 1; padding: 0; }
.pb-tog:hover { border-color: var(--accent); color: var(--accent); }
.pb-meta { margin-left: auto; text-decoration: none; color: var(--muted); padding: 0 4px; }
.pb-meta:hover { color: var(--accent); }
.pb-campaign td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.pb-ad td { font-size: .95em; }
.pb-est { display: inline-flex; align-items: center; gap: 5px; font-size: .85em; }
.pb-est::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pb-est-on::before { background: var(--tone-buy); }
.pb-est-rev::before { background: var(--st-caliente); }
.pb-est-mal::before { background: var(--error); }
.pb-t tfoot td { border-top: 2px solid var(--border-strong); }
/* Inicio: periodo y avisos de anuncios */
.inicio-cab-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.inicio-cab-acc .field { margin: 0; }
.inicio-anuncios { margin-bottom: 16px; }
.inicio-anuncios ul { margin: 6px 0 0; padding: 0; list-style: none; }
.inicio-anuncios li { margin: 6px 0; }
.inicio-anuncios li button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.inicio-anuncios li button:hover strong { color: var(--accent); }
/* 🎯 Venta directa: paso al producto principal (upsell posterior) */
.dir-upsell { margin: 0 0 16px; padding: 16px 18px; border-left: 3px solid var(--tone-buy); }
.dir-upsell h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.dir-upsell-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.dir-upsell-b { display: flex; flex-direction: column; gap: 2px; }
.dir-upsell-t { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dir-upsell-pct { font-size: 2.4em; line-height: 1.1; color: var(--tone-buy); }
.dir-upsell-n b { font-size: 1.1em; }
.dir-upsell-vacio { margin: 0 0 14px; }
.dc-upp { display: flex; flex-direction: column; gap: 6px; }
.dc-upp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-upp-chip { display: inline-flex; align-items: center; gap: 4px; }
.dc-upp-chip button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; padding: 0 2px; }
.dc-upp-add { display: flex; gap: 6px; }
.dc-upp-add input { flex: 1; min-width: 0; }
/* 📞 Seguimiento de compradoras sin el producto principal */
.seg-cab { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.seg-cab p { margin: 0; }
.seg-etapas { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-etapas .seg-btn b { margin-left: 4px; }
.seg-etapas .seg-btn[style*="--c"]::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: middle; }
.seg-opc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.seg-msg summary { cursor: pointer; font-weight: 600; }
.seg-msg textarea { width: 100%; margin: 6px 0; }
.seg-acc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.seg-acc select { max-width: 220px; }
.seg-acc input { flex: 1 1 180px; min-width: 0; }
.seg-acc .btn.wa { background: var(--wa, #25d366); color: #fff; border-color: transparent; }
.seg-acc .btn .ico { width: 14px; height: 14px; vertical-align: -2px; }
.dc-sinprincipal { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; align-self: flex-end; }
.dc-sinprincipal:has(input:checked) { border-color: var(--accent); color: var(--accent); }

/* ---------- Desplegables: flecha propia, con aire (la nativa se pegaba al borde) ---------- */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a817b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px;
}
select:not([multiple]):not([size]):hover, select:not([multiple]):not([size]):focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97757' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select.outcome, .rt-toolbar select, .bar-table select { padding-right: 28px; background-position: right 8px center; background-size: 12px 12px; }

/* ---------- Barra de periodo (Métricas, Publicidad, VSL, venta directa, Inicio) ---------- */
.vsl-rango { gap: 10px 16px; padding: 12px 16px; border-radius: 14px; }
.vsl-rango .field.inline > span, .inicio-cab-acc .field.inline > span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
#vr-preset, #dr-preset, #pb-preset, #inicio-preset {
  min-width: 200px; font-weight: 650; border-radius: 999px; padding: 9px 40px 9px 38px;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background-color: color-mix(in srgb, var(--accent) 7%, var(--surface));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97757' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97757' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat; background-position: left 13px center, right 14px center; background-size: 16px 16px, 14px 14px;
}
.vsl-rango input[type="date"], .inicio-cab-acc input[type="date"] { border-radius: 999px; padding: 8px 12px; }
.vr-texto { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-weight: 650; font-size: 13px; color: var(--text-2); }
.vr-texto:empty { display: none; }
@media (max-width: 640px) {
  #vr-preset, #dr-preset, #pb-preset, #inicio-preset { min-width: 0; width: 100%; }
  .vsl-rango .field.inline { flex: 1 1 100%; }
  .vr-texto { width: auto; }
}

/* ---------- 🛍️ Compradoras de venta directa: tarjetas por día ---------- */
.dir-cli-bar { align-items: center; gap: 10px 14px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.dc-buscar { flex: 1 1 260px; min-width: 0; }
.dc-buscar input { width: 100%; border-radius: 999px; padding: 9px 14px 9px 38px; background-repeat: no-repeat; background-position: left 13px center; background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a817b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E"); }
.dc-mostrar select { border-radius: 999px; min-width: 170px; }
.dc-n { margin-left: auto; font-size: 13px; color: var(--text-2); }
.dc-n strong { color: var(--text); }
.dc-lista { display: flex; flex-direction: column; gap: 22px; }
.dc-dia h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.dc-dia h4 span::first-letter { text-transform: uppercase; }
.dc-dia h4 small { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 600; }
.dc-dia h4::after { content: ''; flex: 1; height: 1px; background: var(--border); align-self: center; }
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.dc-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, transform .15s, box-shadow .15s; }
.dc-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow); transform: translateY(-1px); }
.dc-card.dc-principal { border-left: 3px solid var(--tone-buy); }
.dc-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; letter-spacing: .02em;
  color: hsl(var(--h) 55% 35%); background: hsl(var(--h) 70% 88%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dc-av { color: hsl(var(--h) 70% 82%); background: hsl(var(--h) 35% 24%); } }
:root[data-theme="dark"] .dc-av { color: hsl(var(--h) 70% 82%); background: hsl(var(--h) 35% 24%); }
.dc-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dc-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dc-nombre .lead-ficha { font-weight: 750; font-size: 15px; }
.dc-tag-principal { font-size: 11px; font-weight: 750; padding: 2px 8px; border-radius: 999px; color: var(--tone-buy); background: color-mix(in srgb, var(--tone-buy) 13%, var(--surface)); }
.dc-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--muted); }
.dc-sub span { overflow-wrap: anywhere; }
.dc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dc-chip { font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.dc-chip-extra { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.dc-chip-ad { background: color-mix(in srgb, var(--tone-info) 12%, var(--surface)); color: var(--tone-info); }
.dc-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dc-importe { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.dc-lado .btn.wa { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.dc-lado .btn.wa .ico { width: 14px; height: 14px; }
.dc-sintel { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dc-vacio { text-align: center; padding: 40px 10px; color: var(--muted); }
.dc-vacio span { font-size: 34px; }
@media (max-width: 640px) {
  .dc-grid { grid-template-columns: 1fr; }
  .dc-card { grid-template-columns: auto minmax(0, 1fr); }
  .dc-lado { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px dashed var(--border); }
  .dc-n { margin-left: 0; width: 100%; }
  .dc-mostrar { flex: 1 1 auto; }
}
.dir-upsell-f { font-size: 14px; margin-top: 2px; }
.dir-upsell-f b { font-size: 1.15em; color: var(--tone-buy); }
.dc-upp-tags { flex-direction: column; align-items: stretch; }
.dc-upp-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-upp-precio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.dc-upp-precio input { width: 110px; }
/* 📨 Informes diarios */
.inf-que { margin: 0 0 14px; padding-left: 18px; font-size: 13.5px; color: var(--text-2); }
.inf-que li { margin: 4px 0; }
.inf-emails { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.inf-fases { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0; }
.inf-fases label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.inf-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.inf-vista { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: #fff; color: #241f1c; overflow-x: auto; }
.inf-vista .muted { color: #6b625d; }
.inf-asunto { margin: 0 0 10px; }

/* 📅 Venta directa: día a día en columnas */
.dd-card { padding: 16px 18px; }
.dd-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
.dd-cab h3 { margin: 0; }
.dd-res { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-res span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); }
.dd-res small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dd-res b { font-size: 15px; font-variant-numeric: tabular-nums; }
.dd-res em { font-style: normal; font-size: 12px; color: var(--text-2); }
.dd-scroll { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.dd-chart { display: flex; gap: 6px; align-items: stretch; min-width: 100%; width: max-content; }
.dd-col { flex: 1 0 44px; max-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 8px; border-radius: 10px; transition: background .15s; }
.dd-col:hover { background: var(--surface-2); }
.dd-n { height: 18px; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.dd-bar { position: relative; width: 26px; height: 130px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); overflow: hidden; display: flex; align-items: flex-end; }
.dd-bar i { display: block; width: 100%; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); }
.dd-top .dd-bar i { background: linear-gradient(180deg, color-mix(in srgb, var(--tone-buy) 75%, #fff), var(--tone-buy)); }
.dd-top .dd-n { color: var(--tone-buy); }
.dd-eur { height: 15px; font-size: 10.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-dia { display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding-top: 4px; border-top: 1px solid var(--border); width: 100%; }
.dd-dia small { font-size: 10.5px; color: var(--muted); text-transform: capitalize; }
.dd-dia b { font-size: 14px; }
.dd-hoy .dd-dia b { color: var(--accent); }
.dd-hoy { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.dd-cero .dd-dia b { color: var(--muted); font-weight: 600; }
.dd-vis { height: 14px; font-size: 10px; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .dd-col { flex-basis: 40px; }
  .dd-bar { height: 110px; width: 22px; }
}
.dd-cab h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dd-mes select { font-size: 13px; font-weight: 650; border-radius: 999px; padding: 6px 34px 6px 12px; }

/* ---------- Repaso visual general ---------- */
/* Botón «Agencia» flotante: más pequeño y semitransparente hasta pasar el ratón (tapaba cifras y botones). */
.agencia-btn.agencia-flotante { padding: 8px 14px 8px 8px; font-size: 13px; opacity: .82; }
.agencia-btn.agencia-flotante:hover, .agencia-btn.agencia-flotante:focus-visible { opacity: 1; }
.agencia-btn.agencia-flotante .agencia-ico { width: 24px; height: 24px; }
@media (max-width: 640px) { .agencia-btn.agencia-flotante { font-size: 0; gap: 0; padding: 8px; } .agencia-btn.agencia-flotante .agencia-ico { width: 28px; height: 28px; } }

/* Tarjetas de cifras: más anchas (los títulos ya no se parten en tres líneas) y a la misma altura. */
.kpis { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); align-items: stretch; }
.kpis > .kpi { height: 100%; }
.kpi-label { line-height: 1.25; }

/* Inicio: tarjetas de cada embudo con las cifras arriba, en rejilla flexible, sin huecos raros. */
.inicio-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }
.inicio-emb { align-content: start; gap: 10px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.inicio-emb:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.inicio-emb .ie-cifras { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.inicio-emb .ie-cifras span { line-height: 1.3; align-content: start; }
.inicio-emb .ie-cifras strong { font-size: 18px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.inicio-emb .ie-cifras.ie-sec { border-top: 1px dashed var(--border); }
.inicio-emb .ie-cifras strong small { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Avisos de anuncios del Inicio: una lista legible en vez de un párrafo apretado. */
.inicio-anuncios > span > ul > li { padding: 8px 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.inicio-anuncios > span > ul > li:first-child { border-top: 0; }
.ia-sub { margin: 6px 0 0; padding-left: 22px; list-style: disc; color: var(--text-2); font-size: 13px; }
.ia-sub li { margin: 3px 0; }
.ia-sub strong { color: var(--text); font-weight: 650; }

/* Avisos «para que las cifras salgan bien»: lista y botón más ordenados. */
.notice ul { margin: 6px 0; padding-left: 20px; }
.notice ul li { margin: 3px 0; }
/* En escritorio, el botón Agencia va abajo a la izquierda (sobre la barra lateral): no tapa las fichas. */
@media (min-width: 901px) { .agencia-btn.agencia-flotante { right: auto; left: 24px; } }

/* ---------- Setting hoy: una lista por prioridad con color de temperatura ---------- */
.hoy-prio { padding: 18px 20px; }
.hoy-prio-cab { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hoy-prio-cab h2 { font-size: 16px; margin: 0; display: flex; gap: 8px; align-items: center; }
.hoy-leyenda { display: flex; flex-wrap: wrap; gap: 6px; }
.hoy-temp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--st) 35%, transparent); background: color-mix(in srgb, var(--st) 9%, var(--surface, #fff)); color: var(--text); }
.hoy-temp .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--st); }
.hoy-temp b { color: var(--st); font-weight: 800; }
.hoy-temp.on { background: var(--st); color: #fff; border-color: var(--st); }
.hoy-temp.on .dot { background: #fff; } .hoy-temp.on b { color: #fff; }
.hoy-motivos { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.hoy-chip { font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text-2); cursor: pointer; }
.hoy-chip b { color: var(--text); margin-left: 2px; }
.hoy-chip:hover { border-color: var(--text-2); }
.hoy-chip.on { background: var(--text); color: var(--bg, #fff); border-color: var(--text); }
.hoy-chip.on b { color: inherit; }
.hoy-aviso { font-size: 12px; margin: 8px 0 0; }
.hoy-ranking { counter-reset: none; margin-top: 6px; }
.hoy-ranking .hoy-item { position: relative; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; margin-top: 6px; border: 1px solid var(--border); border-left: 5px solid var(--st);
  border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--st) 8%, transparent), transparent 55%); }
.hoy-ranking .hoy-item:hover { box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--st) 70%, transparent); }
.hoy-n { flex: 0 0 auto; min-width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: var(--st); font-variant-numeric: tabular-nums; }
.hoy-linea { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.hoy-motivo { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2, #f1efe9); color: var(--text-2); }
.hoy-ranking .lead-meta { margin-top: 3px; }
.hoy-mas { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 14px; }
.hoy-vacio { padding: 18px 0 6px; text-align: center; }
#hoy-lists:has(.hoy-prio) { display: block; }
@media (max-width: 640px) {
  .hoy-prio { padding: 14px 12px; }
  .hoy-ranking .hoy-item { padding: 10px; gap: 10px; }
  .hoy-n { min-width: 26px; height: 26px; font-size: 12px; }
  .hoy-actions { width: 100%; padding-left: 36px; }
}
.hoy-temp.st-templado.on, .hoy-temp.st-templado.on b { color: #2b2200; } .hoy-temp.st-templado.on .dot { background: #2b2200; }

/* ---------- Subpestañas: con aire, icono en su cuadradito y la activa bien marcada ---------- */
.subviews:not(.msubs), .subviews.msubs {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: none; border: 0; border-radius: 0;
  margin: 2px 0 22px; overflow: visible;
}
.subviews .subview-tab, .msubs .subview-tab {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px 6px 6px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .005em; line-height: 1.2; white-space: nowrap;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04); transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.subviews .subview-tab .ico, .msubs .subview-tab .ico {
  display: block; width: 28px; height: 28px; padding: 6px; box-sizing: border-box; flex: 0 0 auto;
  border-radius: 8px; background: var(--surface-2); color: var(--text-2); opacity: 1; transition: background .15s, color .15s;
}
.subviews .subview-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); transform: translateY(-1px); box-shadow: 0 6px 14px -10px rgb(0 0 0 / .35); }
.subviews .subview-tab:hover .ico { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.subviews .subview-tab.active {
  color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), 0 6px 16px -12px var(--accent);
}
.subviews .subview-tab.active .ico { background: var(--accent); color: #fff; }
.subviews .subview-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Sin icono (p. ej. pestañas pintadas antes de tenerlo): mismo aire a los dos lados */
.subviews .subview-tab:not(:has(.ico)) { padding: 10px 16px; }
@media (max-width: 1700px) { .msubs .subview-tab .ico { display: block; } }
@media (max-width: 1400px) { .msubs .subview-tab { padding: 6px 13px 6px 6px; font-size: 13.5px; } }
/* Móvil: una fila que se desliza (con el degradado de «hay más») en vez de muchas filas */
@media (max-width: 640px) {
  .subviews:not(.msubs), .subviews.msubs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 18px; padding: 2px 16px 6px; scroll-padding: 16px; }
  .subviews .subview-tab { padding: 5px 13px 5px 5px; font-size: 13px; }
  .subviews .subview-tab .ico { width: 26px; height: 26px; }
}
:root[data-estilo="espacial"] .subviews .subview-tab.active .ico { background: #ff7a18; }

/* ---------- Titular según la encuesta (Configuración → Embudo → Página de venta) ---------- */
.tit-variantes { display: grid; gap: 12px; margin: 12px 0; }
.tit-variantes.apagado { opacity: .55; }
.tit-var { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px 16px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--surface); }
.tit-var > .field { grid-column: 1 / -1; margin: 0; }
.tit-var > .field:nth-of-type(1) { grid-column: 1 / -1; }
.tit-var-cab { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.tit-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; }
.tit-var-acc { margin-left: auto; display: flex; gap: 4px; }
.tit-resps { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.tit-resp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13px; cursor: pointer; }
.tit-resp input { margin: 0; accent-color: var(--accent); }
.tit-resp small { color: var(--text-2); font-weight: 700; }
.tit-resp.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font-weight: 600; }
.tit-res { margin: 8px 0 14px; }
.tit-res h4 { margin: 0 0 8px; font-size: 14px; }
.tit-resps .tit-resp { flex: 0 0 auto; width: auto; white-space: nowrap; flex-direction: row; margin: 0; }
.tit-resps .tit-resp input[type="checkbox"] { width: 15px; height: 15px; min-height: 0; padding: 0; flex: 0 0 auto; }
.tit-var .field > span:first-child { display: block; }

/* ---------- «Lo que falta» arriba de cada apartado de configuración (todos los embudos) ---------- */
.cfg-pend {
  margin: 0 0 18px; padding: 14px 16px 12px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--st-muy-caliente) 40%, var(--border));
  border-left: 5px solid var(--st-muy-caliente);
  background: linear-gradient(135deg, color-mix(in srgb, var(--st-muy-caliente) 10%, var(--surface)), color-mix(in srgb, #e07a1f 6%, var(--surface)));
  box-shadow: 0 10px 24px -18px var(--st-muy-caliente);
}
.cfg-pend-cab { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.cfg-pend-ico { font-size: 20px; line-height: 1.2; }
.cfg-pend-cab strong { font-size: 15px; color: var(--st-muy-caliente); }
.cfg-pend-cab small { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 2px; }
.cfg-pend-rev { font-size: 13px; color: #b5651d; font-weight: 600; }
.cfg-pend-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: pend; }
.cfg-pend-item {
  counter-increment: pend; width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--text); padding: 8px 12px 8px 8px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cfg-pend-item::before {
  content: counter(pend); flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 12px; color: #fff; background: var(--st-muy-caliente);
}
.cfg-pend-item.warn::before { background: #e07a1f; content: '!'; }
.cfg-pend-item:hover, .cfg-pend-item:focus-visible { border-color: var(--st-muy-caliente); transform: translateX(2px); box-shadow: 0 4px 12px -8px rgb(0 0 0 / .4); }
.cfg-pend-txt { flex: 1; min-width: 0; }
.cfg-pend-txt span { color: var(--text-2); }
.cfg-pend-ir { flex: 0 0 auto; font-weight: 700; font-size: 12.5px; color: var(--st-muy-caliente); }
/* El campo al que se llega desde el recuadro parpadea un momento. */
@keyframes campoResaltado { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 20%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); } }
.campo-resaltado { animation: campoResaltado 2.4s ease; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); transition: background .6s; }

/* ---------- Métricas: barra de informes con aire (separada de las categorías) ---------- */
#view-metricas > .metric-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  margin: 0 0 22px; padding: 12px 14px 12px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.metric-actions .ma-t { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 700; font-size: 14.5px; }
.metric-actions .ma-t small { font-weight: 500; color: var(--text-2); font-size: 12.5px; }
.metric-actions .ma-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.metric-actions [data-informe-status]:empty { display: none; }
#view-metricas > .metric-actions + .notice, #view-metricas > .metric-actions ~ .msubs { margin-top: 0; }
@media (max-width: 640px) { #view-metricas > .metric-actions .ma-btns .btn { flex: 1 1 calc(50% - 10px); justify-content: center; } }

/* ---------- Emails con IA: cabecera con aire, fases legibles y la fase «antes del directo» ---------- */
#emailsia-body > * + * { margin-top: 20px; }
.em-panel { padding: 0; overflow: hidden; }
.em-panel .em-top { border: 0; border-radius: 0; background: none; padding: 22px 24px; gap: 20px 28px; }
.em-panel .em-stats { gap: 14px; flex-wrap: wrap; }
.em-panel .em-stat { min-width: 92px; padding: 10px 16px; border-radius: 12px; background: var(--surface-2); gap: 4px; }
.em-panel .em-stat b { font-size: 28px; }
.em-panel .em-stat span { font-size: 12.5px; color: var(--text-2); }
.em-bloque { padding: 18px 24px 20px; border-top: 1px solid var(--border); }
.em-bloque h4 { margin: 0 0 12px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.em-bloque h4 small { font-weight: 500; color: var(--text-2); font-size: 12.5px; }
.em-panel .em-fases { gap: 10px; margin: 0; }
.em-panel .em-fase { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 8px; font-size: 14px; border-radius: 12px; color: var(--text-2); }
.em-panel .em-fase .em-fase-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); font-size: 15px; }
.em-panel .em-fase.on { color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.em-panel .em-fase.on .em-fase-ico { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.em-panel .em-fase:not(.on) { text-decoration: none; opacity: .6; }
.em-panel .em-fase:not(.on) .em-fase-ico { filter: grayscale(1); }
.em-panel .em-leyenda { margin: 0; padding: 14px 24px 18px; border-top: 1px dashed var(--border); gap: 10px 12px; font-size: 13.5px; color: var(--text-2); }
.em-panel .em-grad { gap: 40px; padding: 5px 14px; }
.em-previos { padding: 20px 24px; border-left: 4px solid #7c5cd6; }
.em-previos-cab { display: flex; gap: 14px; align-items: flex-start; }
.em-previos-ico { font-size: 26px; line-height: 1; }
.em-previos-cab h3 { margin: 0 0 4px; font-size: 16px; }
.em-previos-cab p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.em-previos-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 16px 0; }
.em-previo { position: relative; display: grid; gap: 4px; padding: 12px 14px 12px 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.em-previo small { color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.em-previo-n { position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; background: #7c5cd6; }
.em-previo.a-consciencia .em-previo-n { background: #2f7dd1; }
.em-previo.a-objecion .em-previo-n { background: #d9488f; }
.em-previo.a-expectacion .em-previo-n { background: #e07a1f; }
.em-angulo { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.em-angulo.a-consciencia { background: color-mix(in srgb, #2f7dd1 16%, var(--surface)); color: color-mix(in srgb, #2f7dd1 70%, var(--text)); }
.em-angulo.a-objecion { background: color-mix(in srgb, #d9488f 16%, var(--surface)); color: color-mix(in srgb, #d9488f 70%, var(--text)); }
.em-angulo.a-expectacion { background: color-mix(in srgb, #e07a1f 16%, var(--surface)); color: color-mix(in srgb, #e07a1f 70%, var(--text)); }
.em-card.f-consciencia { border-left-color: #7c5cd6; }
@media (max-width: 560px) { .em-panel .em-top, .em-bloque, .em-panel .em-leyenda, .em-previos { padding-left: 16px; padding-right: 16px; } .em-panel .em-stat { min-width: 0; flex: 1 1 40%; } }

/* ---------- Movimiento (public/js/animaciones.js): entrada escalonada, barras que crecen, cifras y onda ---------- */
@keyframes animEntra { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes animVista { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes animBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes animBarraV { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes animOnda { from { transform: scale(0); opacity: .35; } to { transform: scale(1); opacity: 0; } }
@keyframes animCambio { 0% { color: inherit; } 30% { color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); } 100% { color: inherit; } }
@keyframes animBrillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.con-anim .anim-in { animation: animEntra .5s cubic-bezier(.2, .75, .25, 1) backwards; animation-delay: calc(var(--anim-i, 0) * 45ms); }
.con-anim .anim-espera { opacity: 0; }
.con-anim .anim-barra { transform-origin: left center; animation: animBarra .9s cubic-bezier(.25, .8, .25, 1) .15s backwards; }
.con-anim .anim-barra-v { transform-origin: center bottom; animation: animBarraV .7s cubic-bezier(.25, .8, .25, 1) backwards; animation-delay: calc(var(--anim-i, 0) * 25ms + .1s); }
.con-anim .anim-cambio { animation: animCambio 1.1s ease; }
/* Cambiar de vista, de subpestaña o de apartado: un fundido corto. */
.con-anim main section[id^="view-"]:not([hidden]), .con-anim [data-msub]:not([hidden]), .con-anim dialog .tab-panel:not([hidden]) { animation: animVista .35s cubic-bezier(.2, .75, .25, 1) backwards; }

/* Botones: se hunden un poco al pulsar y dejan una onda. */
.con-anim .btn, .con-anim .tb-btn, .con-anim .subview-tab, .con-anim .em-fase, .con-anim .hoy-chip, .con-anim .hoy-temp { transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease; }
.con-anim .btn:active:not(:disabled), .con-anim .tb-btn:active, .con-anim .subview-tab:active, .con-anim .em-fase:active, .con-anim .hoy-chip:active, .con-anim .hoy-temp:active { transform: scale(.97); }
.con-anim .btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px -10px var(--accent); }
.anim-con-onda { overflow: hidden; }
.anim-onda { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; animation: animOnda .6s ease-out forwards; }

/* Tarjetas que se pueden pulsar: se elevan al pasar por encima. */
.con-anim .inicio-emb, .con-anim .kpi, .con-anim .em-card, .con-anim .cfg-pend-item, .con-anim .sb-item { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.con-anim .kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgb(0 0 0 / .45); }
.con-anim .em-card:hover { transform: translateY(-1px); }

/* «Cargando…»: brillo suave mientras llegan los datos. */
.con-anim p.muted:only-child:is([aria-busy="true"], .cargando) { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 12%, transparent), transparent) 0 0 / 200% 100%; animation: animBrillo 1.6s linear infinite; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .con-anim .anim-in, .con-anim .anim-barra, .con-anim .anim-barra-v, .con-anim .anim-cambio, .con-anim main section[id^="view-"], .con-anim [data-msub], .con-anim dialog .tab-panel { animation: none !important; }
  .con-anim .anim-espera { opacity: 1; }
  .anim-onda { display: none; }
}

/* ---------- Inicio de la agencia (superadmin) ---------- */
:root { --ag-rojo: #e5484d; --ag-ambar: #f0a020; --ag-verde: #2fb37a; --ag-gris: #9aa0a6; }
.ini-modo { display: inline-flex; padding: 4px; gap: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.ini-modo button { font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 16px; border-radius: 10px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.ini-modo button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--border); }
#inicio.modo-agencia > :not(.inicio-cab):not(#inicio-agencia) { display: none !important; }
#inicio.modo-agencia .inicio-cab-acc .field { display: none !important; }
.ag-home { display: grid; gap: 22px; }
.ag-cargando { display: grid; place-items: center; gap: 12px; padding: 60px 0; }
.ag-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: tbSpin .8s linear infinite; }

/* Hero */
.ag-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 26px 30px; border-radius: 22px;
  color: #fff; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 85%, #000) 0%, #2a1d3d 55%, #141026 100%); box-shadow: 0 24px 48px -28px rgb(20 10 40 / .7); }
.ag-hero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .14), transparent 65%); animation: agFlota 9s ease-in-out infinite alternate; pointer-events: none; }
.ag-hero::after { content: ""; position: absolute; inset: auto auto -50% -10%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent), transparent 70%); opacity: .5; animation: agFlota 11s ease-in-out infinite alternate-reverse; pointer-events: none; }
@keyframes agFlota { to { transform: translate(-30px, 24px) scale(1.08); } }
.ag-hero-txt { position: relative; z-index: 1; }
.ag-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgb(255 255 255 / .12); color: rgb(255 255 255 / .9); }
.ag-hero h3 { margin: 12px 0 6px; font-size: 26px; line-height: 1.15; color: #fff; }
.ag-hero p { margin: 0; color: rgb(255 255 255 / .82); font-size: 14.5px; }
.ag-hero .ag-rojo { color: #ffb4b6; } .ag-hero .ag-verde { color: #9ff0c9; }
.ag-estado { opacity: .75; }
.ag-hero-acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ag-hero-acc .btn { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .22); backdrop-filter: blur(6px); }
.ag-hero-acc .btn:hover { background: rgb(255 255 255 / .18); }
.ag-hero-acc .btn.primary { background: #fff; color: #1d1530; border-color: #fff; }
.ag-hero-salud { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.ag-donut { position: relative; width: 138px; height: 138px; }
.ag-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ag-don-fondo { fill: none; stroke: rgb(255 255 255 / .12); stroke-width: 12; }
.ag-don-seg { fill: none; stroke-width: 12; stroke-linecap: butt; animation: agDon 1.2s cubic-bezier(.3, .8, .3, 1) .2s backwards; }
.ag-don-seg.rojo { stroke: var(--ag-rojo); } .ag-don-seg.ambar { stroke: var(--ag-ambar); } .ag-don-seg.verde { stroke: var(--ag-verde); } .ag-don-seg.gris { stroke: var(--ag-gris); }
@keyframes agDon { from { stroke-dasharray: 0 400; } }
.ag-don-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ag-don-c b { font-size: 30px; font-weight: 800; line-height: 1; } .ag-don-c b small { font-size: 15px; opacity: .7; }
.ag-don-c span { font-size: 11.5px; opacity: .8; margin-top: 2px; }
.ag-don-ley { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: rgb(255 255 255 / .9); }
.ag-don-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.ag-don-ley .rojo i { background: var(--ag-rojo); } .ag-don-ley .ambar i { background: var(--ag-ambar); } .ag-don-ley .verde i { background: var(--ag-verde); }

.ag-kpis-top { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ag-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.ag-home h3 { margin: 0 0 14px; font-size: 16.5px; display: flex; align-items: center; gap: 8px; }
.ag-sec-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 12px; }
.ag-sec-cab h3 { margin: 0; }

/* Urgente */
.ag-urg-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 470px; overflow: auto; padding-right: 2px; }
.ag-urg-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ag-urg-lista li:hover { transform: translateX(3px); box-shadow: 0 8px 18px -14px rgb(0 0 0 / .5); }
.ag-urg-niv { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.u-critico .ag-urg-niv { background: var(--ag-rojo); box-shadow: 0 0 0 0 var(--ag-rojo); animation: agLatido 1.8s ease-out infinite; }
.u-importante .ag-urg-niv { background: var(--ag-ambar); } .u-aviso .ag-urg-niv { background: var(--ag-gris); }
.u-critico { border-color: color-mix(in srgb, var(--ag-rojo) 35%, var(--border)) !important; background: color-mix(in srgb, var(--ag-rojo) 5%, var(--surface)) !important; }
@keyframes agLatido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ag-rojo) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.ag-urg-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ag-urg-txt strong { font-size: 13.5px; line-height: 1.35; }
.ag-urg-txt small { color: var(--text-2); font-size: 12px; }
.ag-chip-cli { justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; color: var(--cl); background: color-mix(in srgb, var(--cl) 14%, var(--surface)); }
.ag-vacio { display: grid; place-items: center; text-align: center; gap: 4px; padding: 26px 0; color: var(--text-2); }
.ag-vacio span { font-size: 34px; }

/* Agenda */
.ag-dias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.ag-dia { display: grid; align-content: start; gap: 6px; min-height: 150px; padding: 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; }
.ag-dia.finde { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.ag-dia.hoy { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 8px 20px -16px var(--accent); }
.ag-dia header { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--text-2); text-transform: capitalize; }
.ag-dia header b { font-size: 20px; color: var(--text); }
.ag-dia.vacio header b { color: var(--text-2); opacity: .6; }
.ag-ev { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: var(--surface); border-left: 3px solid var(--cl); font-size: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / .05); transition: transform .15s; }
.ag-ev:hover { transform: translateY(-1px); }
.ag-ev-t { font-weight: 700; line-height: 1.25; }
.ag-ev small { color: var(--text-2); font-size: 11px; }

/* Salud de los clientes */
.ag-cli-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ag-cli { position: relative; display: grid; gap: 10px; padding: 16px 18px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.ag-cli::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--cl), color-mix(in srgb, var(--cl) 30%, transparent)); }
.ag-cli:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgb(0 0 0 / .55); }
.ag-cli header { display: flex; align-items: center; gap: 10px; }
.ag-cli h4 { margin: 0; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-sem { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--ag-gris); }
.s-rojo .ag-sem { background: var(--ag-rojo); animation: agLatido 1.8s ease-out infinite; }
.s-ambar .ag-sem { background: var(--ag-ambar); box-shadow: 0 0 12px color-mix(in srgb, var(--ag-ambar) 60%, transparent); }
.s-verde .ag-sem { background: var(--ag-verde); box-shadow: 0 0 12px color-mix(in srgb, var(--ag-verde) 60%, transparent); }
.s-rojo { border-color: color-mix(in srgb, var(--ag-rojo) 35%, var(--border)); }
.ag-fase { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.ag-fase.f-carrito { background: color-mix(in srgb, var(--ag-verde) 16%, var(--surface)); color: color-mix(in srgb, var(--ag-verde) 70%, var(--text)); }
.ag-fase.f-captacion { background: color-mix(in srgb, #3b82f6 14%, var(--surface)); color: color-mix(in srgb, #3b82f6 70%, var(--text)); }
.ag-cli-lanz { margin: 0; display: grid; gap: 2px; font-size: 13.5px; }
.ag-cli-lanz span { font-size: 12px; color: var(--text-2); }
.ag-cli-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ag-cli-kpis div { display: grid; gap: 2px; padding: 8px; border-radius: 10px; background: var(--surface-2); }
.ag-cli-kpis span { font-size: 11px; color: var(--text-2); }
.ag-cli-kpis b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-roas { display: grid; gap: 4px; }
.ag-roas small { font-size: 11.5px; color: var(--text-2); }
.ag-barra { position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: visible; }
.ag-barra > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cl, var(--accent)), color-mix(in srgb, var(--cl, var(--accent)) 60%, #fff)); }
.s-rojo .ag-barra > span { background: linear-gradient(90deg, var(--ag-rojo), #ff8a8d); }
.ag-barra > i { position: absolute; top: -4px; width: 2px; height: 16px; border-radius: 2px; background: var(--text); opacity: .7; }
.ag-motivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; color: var(--text-2); }
.ag-motivos li::before { content: "•"; margin-right: 6px; color: var(--cl); }
.ag-cli footer { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.ag-cons { display: flex; flex-wrap: wrap; gap: 4px; }
.ag-con { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.ag-con.on { background: color-mix(in srgb, var(--ag-verde) 14%, var(--surface)); color: color-mix(in srgb, var(--ag-verde) 75%, var(--text)); }
.ag-con.off { background: var(--surface-2); color: var(--text-2); text-decoration: line-through; opacity: .7; }
.ag-act { font-size: 11px; color: var(--text-2); opacity: .8; }

/* Equipo */
.ag-eq-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 22px; }
.ag-eq { display: flex; align-items: center; gap: 12px; }
.ag-eq-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #6b4bd6)); }
.ag-eq-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ag-eq-txt small { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-barra.eq > span { background: linear-gradient(90deg, var(--ag-ambar), var(--ag-rojo)); }
.ag-eq-n { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Entrada escalonada de listas dentro de tarjetas que entran */
.con-anim .anim-in .ag-urg-lista > li, .con-anim .anim-in .ag-dia, .con-anim .anim-in .ag-eq { animation: animEntra .45s cubic-bezier(.2, .75, .25, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms + 120ms); }

/* Tema espacial */
:root[data-estilo="espacial"] .ag-cli, :root[data-estilo="espacial"] .ag-urg-lista li, :root[data-estilo="espacial"] .ag-ev { background: rgb(255 255 255 / .04); }
:root[data-estilo="espacial"] .ag-dia { background: rgb(255 255 255 / .03); }

@media (max-width: 1100px) { .ag-dos { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ag-hero { grid-template-columns: 1fr; padding: 20px; }
  .ag-hero h3 { font-size: 21px; }
  .ag-hero-salud { justify-content: flex-start; }
  .ag-donut { width: 110px; height: 110px; }
  .ag-cli-kpis { grid-template-columns: repeat(2, 1fr); }
  .ini-modo { width: 100%; } .ini-modo button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .ag-hero::before, .ag-hero::after, .ag-don-seg, .u-critico .ag-urg-niv, .s-rojo .ag-sem { animation: none !important; } }
.ag-home .ag-hero h3 { margin: 14px 0 6px; font-size: 26px; color: #fff; display: block; }
.ag-home .ag-dos > .card, .ag-home > .card { padding: 20px 22px; border-radius: 18px; }
@media (max-width: 640px) { .ag-home .ag-hero h3 { font-size: 21px; } .ag-home .ag-dos > .card, .ag-home > .card { padding: 16px; } }
.ag-cli-grid > * { min-width: 0; }
.ag-cli-kpis { grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); }
.ag-cli-kpis div { min-width: 0; }
.ag-cli-kpis b { overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.ag-cli footer { flex-wrap: wrap; }
.ag-dias { grid-auto-columns: minmax(128px, 1fr); }
/* Que la tira de 14 días (o una ficha) nunca ensanche la página: solo se desliza la agenda. */
.ag-home, .ag-home > *, .ag-dos > *, .ag-salud, .ag-cli-grid { min-width: 0; max-width: 100%; }
.ag-agenda { overflow: hidden; }
.ag-dias { max-width: 100%; }
#inicio { min-width: 0; }
.ag-cli { grid-template-columns: minmax(0, 1fr); }
.ag-cli header > .ag-fase { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ag-cli-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag-cli-kpis div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 10px; }
.ag-cli-kpis b { font-size: 15px; }
.ag-cli h4 { white-space: normal; line-height: 1.2; }

/* Automatizaciones: el botón del prompt para la IA de GHL, un botón de verdad (azul de GHL) junto al de Claude. */
.btn.au-btn-ghl { background: color-mix(in srgb, #2f6fed 12%, var(--surface)); color: color-mix(in srgb, #2f6fed 80%, var(--text)); border: 1px solid color-mix(in srgb, #2f6fed 45%, var(--border)); font-weight: 700; }
.btn.au-btn-ghl:hover { background: color-mix(in srgb, #2f6fed 20%, var(--surface)); border-color: #2f6fed; }
:root[data-estilo="espacial"] .btn.au-btn-ghl { background: rgb(47 111 237 / .18); color: #a9c4ff; border-color: rgb(120 160 255 / .5); }

/* ---------- Configuración → Carrito: emails y WhatsApp de cada fase ---------- */
.env-fases { display: grid; gap: 12px; }
.env-fase { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 12px 20px; align-items: start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.env-fase-n { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.env-fase-n > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.env-fase-n small { color: var(--text-2); font-size: 12px; line-height: 1.35; }
.env-fase-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-size: 17px; flex: 0 0 auto; }
.env-def-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.env-canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; }
@media (max-width: 760px) { .env-fase { grid-template-columns: 1fr; } }

/* ---------- Grupo de WhatsApp: categorías, calendario y prompt por categoría ---------- */
.gw-cats { display: grid; gap: 14px; margin-top: 10px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.gw-cats h4 { margin: 0; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.gw-cats h4 small { font-weight: 500; color: var(--text-2); font-size: 12.5px; }
.gw-cats .em-fases { gap: 8px; margin: 0; }
.gw-cats .em-fase { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 12px; color: var(--text-2); background: var(--surface); }
.gw-cats .em-fase .em-fase-ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); }
.gw-cats .em-fase.on { color: var(--text); background: color-mix(in srgb, var(--wa, #25d366) 10%, var(--surface)); border-color: color-mix(in srgb, var(--wa, #25d366) 55%, var(--border)); }
.gw-cats .em-fase:not(.on) { text-decoration: none; opacity: .55; }
.gw-cat-n { font-weight: 800; color: var(--text-2); }
.gw-cal { display: grid; gap: 6px; max-height: 360px; overflow: auto; padding-right: 4px; }
.gw-cal-dia { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--surface); }
.gw-cal-f { display: grid; justify-items: center; line-height: 1; }
.gw-cal-f b { font-size: 20px; } .gw-cal-f small { font-size: 10.5px; color: var(--text-2); text-transform: capitalize; margin-top: 3px; }
.gw-cal-ms { display: flex; flex-wrap: wrap; gap: 6px; }
.gw-cal-m { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--wa, #25d366); }
.gw-cal-m i { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-2); }
.gw-cal-m.f-directo { border-left-color: #d93a3a; } .gw-cal-m.f-carrito { border-left-color: var(--accent); } .gw-cal-m.f-preclase { border-left-color: #1f9bb0; }
.gw-cal-m.f-consciencia { border-left-color: #7c5cd6; } .gw-cal-m.f-vip { border-left-color: #d4a017; }
.gw-cat-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.env-canales { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.env-canales .car-canal-n span { white-space: nowrap; }

/* ---------- Menú «Cuenta» en el móvil: hoja fija bajo la barra, opaca, encima de todo y con aire ---------- */
.tb-menu[open] > .tb-menu-panel { z-index: 1000; }
:root[data-estilo="espacial"] .tb-menu-panel { background: #17142c; border-color: rgb(255 255 255 / .12); box-shadow: 0 24px 60px -12px rgb(0 0 0 / .8); }
@media (max-width: 640px) {
  .tb-menu { position: static; }
  .tb-menu-panel {
    position: fixed; top: calc(var(--tb-menu-top, 112px)); left: 12px; right: 12px; min-width: 0;
    max-height: calc(100dvh - var(--tb-menu-top, 112px) - 16px); overflow-y: auto; overscroll-behavior: contain;
    gap: 6px; padding: 10px; border-radius: 18px; box-shadow: 0 24px 60px -16px rgb(0 0 0 / .45);
    animation: tbMenuIn .18s ease-out;
  }
  .tb-menu-panel .tb-btn { padding: 11px 12px 11px 10px; border-radius: 12px; font-size: 15px; gap: 12px; background: var(--surface-2); }
  .tb-menu-panel .tb-btn .tb-ico { width: 34px; height: 34px; }
  .tb-menu-panel .tb-estilo { padding: 6px 4px 2px; }
  .tb-menu-panel .tb-estilo > span { display: block; margin: 0 0 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
  .tb-menu-panel .tb-estilo-opc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tb-menu-panel .tb-estilo-opc button { padding: 12px 8px; border-radius: 12px; font-size: 14px; }
  :root[data-estilo="espacial"] .tb-menu-panel .tb-btn { background: rgb(255 255 255 / .05); }
  /* Fondo que oscurece el resto mientras el menú está abierto. */
  .tb-menu[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 999; background: rgb(10 8 20 / .45); backdrop-filter: blur(2px); cursor: default; }
}
@keyframes tbMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  /* El desenfoque de la barra haría que el menú «fijo» se colocara respecto a la barra y no a la pantalla. */
  .topbar:has(.tb-menu[open]) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 1001; }
  :root[data-estilo="espacial"] .topbar:has(.tb-menu[open]) { background: #0b0a18; }
}

/* ---------- Marca y avatar: proceso por etapas (Cuenta → Marca y avatar) ---------- */
.mp-intro { margin: 0 0 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.mp-cliente { margin: 10px 0 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.mp-cliente > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font-weight: 600; font-size: 14px; list-style: none; }
.mp-cliente > summary::-webkit-details-marker { display: none; }
.mp-cliente > summary::after { content: "▾"; color: var(--muted); transition: transform .2s; }
.mp-cliente[open] > summary::after { transform: rotate(180deg); }
.mp-cliente > summary small { margin-left: auto; font-weight: 500; }
.mp-cliente > :not(summary) { margin: 0 14px 12px; }
.mp { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
.mp-rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); max-height: calc(100dvh - 220px); overflow-y: auto; }
.mp-rail-top { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.mp-rail-top strong { display: block; font-size: 15px; }
.mp-rail-top span { font-size: 12.5px; color: var(--muted); }
.mp-anillo { position: relative; flex: none; width: 52px; height: 52px; display: inline-grid; place-items: center; }
.mp-anillo svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.mp-anillo circle { fill: none; stroke-width: 3.4; }
.mp-anillo .f { stroke: color-mix(in srgb, var(--muted) 22%, transparent); }
.mp-anillo .v { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.mp-anillo b { position: relative; font-size: 12px; font-variant-numeric: tabular-nums; }
.mp-etapas, .mp-etapas ol { list-style: none; margin: 0; padding: 0; }
.mp-etapas { display: flex; flex-direction: column; gap: 10px; }
.mp-etapa-t { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mp-etapa-t small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.mp-etapa-n { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.mp-etapa.ok .mp-etapa-n { background: var(--tone-buy); border-color: var(--tone-buy); color: #fff; }
.mp-etapas ol { display: flex; flex-direction: column; gap: 3px; padding-left: 9px; border-left: 2px solid var(--border); margin-left: 9px; }
.mp-etapa.ok ol { border-left-color: color-mix(in srgb, var(--tone-buy) 50%, var(--border)); }
.mp-paso-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 11px; background: none; color: var(--text-2); text-align: left; cursor: pointer; font: inherit; transition: background .15s, transform .15s; }
.mp-paso-btn:hover { background: color-mix(in srgb, var(--surface) 80%, transparent); transform: translateX(2px); }
.mp-paso-btn.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), 0 6px 16px -10px rgb(0 0 0 / .35); }
.mp-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 15px; background: var(--surface); border: 1px solid var(--border); transition: background .3s, border-color .3s; }
.mp-paso-btn.on .mp-dot { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.mp-paso-btn.est-hecho .mp-dot { background: var(--tone-buy); border-color: var(--tone-buy); color: #fff; font-size: 14px; font-weight: 800; }
.mp-paso-btn.est-empezado .mp-dot { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); border-style: dashed; }
.mp-paso-btn.mp-pop .mp-dot { animation: mpPop .6s cubic-bezier(.3, 1.6, .5, 1); }
.mp-paso-t { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.mp-paso-t small { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.mp-add { opacity: .8; }
.mp-add .mp-dot { border-style: dashed; color: var(--accent); }
.mp-etapa-fin { margin-top: 2px; }
.mp-fin-btn .mp-dot { font-size: 16px; }
.mp-fin-btn.listo { background: color-mix(in srgb, var(--tone-buy) 12%, transparent); color: var(--text); }
.mp-fin-btn.listo .mp-dot { animation: mpLatido 1.8s ease-in-out infinite; }
.mp-rail, .mp-main { min-width: 0; }
.mp-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mp-paso { min-width: 0; }
.mp-entra-der { animation: mpEntraDer .38s cubic-bezier(.2, .8, .2, 1) both; }
.mp-entra-izq { animation: mpEntraIzq .38s cubic-bezier(.2, .8, .2, 1) both; }
.mp-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; margin-bottom: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); }
.mp-hero::after { content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); pointer-events: none; }
.mp-hero-ico { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; background: var(--surface); box-shadow: 0 10px 24px -14px rgb(0 0 0 / .5); animation: mpFlota 4s ease-in-out infinite; }
.mp-hero-t { flex: 1; min-width: 0; }
.mp-kicker { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.mp-hero h3 { margin: 3px 0 4px; font-size: 21px; line-height: 1.2; }
.mp-hero p { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.mp-hero .mp-anillo { width: 60px; height: 60px; position: relative; z-index: 1; }
.mp-estado { flex: none; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); position: relative; z-index: 1; }
.mp-estado.est-hecho { color: var(--tone-buy); border-color: color-mix(in srgb, var(--tone-buy) 40%, var(--border)); }
.mp-cuerpo .as-campos { display: grid; gap: 14px; }
.mp-cuerpo .as-campo { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); transition: border-color .2s, box-shadow .2s; }
.mp-cuerpo .as-campo:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.mp-cuerpo .as-campo .field > span, .mp-cuerpo .as-campo legend { font-weight: 600; font-size: 14px; }
.mp-nuevo { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mp-nuevo .field { flex: 1 1 240px; }
.mp-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 0 4px; border-top: 1px solid var(--border); }
.mp-nav .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-brilla { animation: mpBrilla 1.6s ease-in-out infinite; }
/* El final */
.mp-fin { text-align: center; padding: 26px 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mp-fin > * { animation: mpSube .5s cubic-bezier(.2, .8, .2, 1) both; }
.mp-fin > :nth-child(2) { animation-delay: .08s; } .mp-fin > :nth-child(3) { animation-delay: .16s; } .mp-fin > :nth-child(4) { animation-delay: .24s; }
.mp-fin > :nth-child(5) { animation-delay: .32s; } .mp-fin > :nth-child(6) { animation-delay: .4s; } .mp-fin > :nth-child(n+7) { animation-delay: .48s; }
.mp-fin-emoji { font-size: 64px; line-height: 1; animation: mpBote 1s cubic-bezier(.3, 1.6, .5, 1) both !important; }
.mp-fin h3, .mp-fin h2 { margin: 0; font-size: 26px; line-height: 1.2; max-width: 620px; text-wrap: balance; }
.mp-fin-sub { margin: 0; max-width: 620px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.mp-fin-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0; padding: 0; }
.mp-fin-chips li { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--tone-buy) 13%, transparent); color: var(--tone-buy); }
.mp-fin h4 { margin: 10px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mp-fin-usos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; width: 100%; max-width: 640px; }
.mp-fin-usos > div { display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 14px 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); transition: transform .2s; }
.mp-fin-usos > div:hover { transform: translateY(-3px); }
.mp-fin-usos span { font-size: 24px; }
.mp-fin-usos strong { font-size: 13.5px; }
.mp-fin-usos small { font-size: 11.5px; color: var(--muted); }
.mp-fin.pendiente h3 { font-size: 22px; }
.mp-faltan { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 8px; }
.mp-faltan button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s; }
.mp-faltan button:hover { transform: translateX(4px); border-color: var(--accent); }
.mp-faltan button > span:first-child { font-size: 22px; }
.mp-faltan button > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.mp-faltan small { color: var(--muted); font-size: 12px; }
.as-fin .mp-fin-sub { margin: 0 auto; }
@keyframes mpEntraDer { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes mpEntraIzq { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes mpPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes mpLatido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes mpFlota { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-3deg); } }
@keyframes mpBrilla { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
@keyframes mpSube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mpBote { 0% { opacity: 0; transform: scale(.3) rotate(-20deg); } 70% { transform: scale(1.15) rotate(6deg); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mp *, .mp-fin * { animation: none !important; transition: none !important; } }
:root[data-estilo="espacial"] .mp-rail, :root[data-estilo="espacial"] .mp-cliente { background: rgb(255 255 255 / .04); }
:root[data-estilo="espacial"] .mp-hero { background: linear-gradient(135deg, rgb(255 122 50 / .18), rgb(255 255 255 / .03) 70%); }
/* Móvil: los pasos, en una tira que se desliza arriba. */
@media (max-width: 760px) {
  .mp { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mp-rail { position: static; max-height: none; padding: 10px; overflow: hidden; min-width: 0; }
  .mp-rail-top { padding-bottom: 8px; }
  .mp-etapas { flex-direction: row; overflow-x: auto; gap: 14px; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .mp-etapa { flex: none; scroll-snap-align: start; }
  .mp-etapas ol { flex-direction: row; border-left: 0; margin-left: 0; padding-left: 0; gap: 6px; }
  .mp-paso-btn { width: auto; flex-direction: column; gap: 4px; padding: 6px; min-width: 76px; text-align: center; }
  .mp-paso-btn:hover { transform: none; }
  .mp-paso-t { font-size: 11.5px; max-width: 92px; }
  .mp-paso-t small { display: none; }
  .mp-hero { padding: 14px; gap: 12px; flex-wrap: wrap; }
  .mp-hero-ico { width: 46px; height: 46px; font-size: 24px; border-radius: 14px; }
  .mp-hero h3 { font-size: 18px; }
  .mp-fin h3, .mp-fin h2 { font-size: 21px; }
  .mp-nav .btn { flex: 1 1 140px; }
}

/* ---------- Procesos (de la agencia y de cada cliente) ---------- */
.pr-dlg { width: min(1180px, 96vw); }
.pr-head { flex-wrap: wrap; gap: 10px; }
.pr-head h2 { flex: 1 1 auto; }
.pr-head-t { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.pr-head-t h2 { flex: 0 1 auto; margin: 0; }
.pr-ambitos { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); max-width: 100%; overflow-x: auto; }
.pr-ambito { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.pr-ambito:hover { color: var(--text); }
.pr-ambito.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.pr-amb-cliente label:has(#pr-importar) { display: none !important; }
.pr-badge.comp { background: color-mix(in srgb, #10b981 16%, transparent); color: #047857; }
.pr-compartir { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 14px 6px 8px; font: inherit; font-weight: 600; cursor: pointer; margin-right: 10px; }
.pr-compartir .pr-sw { width: 34px; height: 20px; border-radius: 999px; background: var(--border); position: relative; transition: background .2s; flex: none; }
.pr-compartir .pr-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.pr-compartir.on { border-color: #10b981; background: color-mix(in srgb, #10b981 10%, var(--surface)); }
.pr-compartir.on .pr-sw { background: #10b981; }
.pr-compartir.on .pr-sw::after { transform: translateX(14px); }
.pr-sub { font-size: 14px; font-weight: 500; }
.pr-head-acc { display: flex; gap: 8px; align-items: center; }
.pr-body { padding-top: 6px; }
.pr { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.pr-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.pr-buscar { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); }
.pr-buscar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.pr-buscar input { flex: 1; min-width: 0; border: 0; background: none; padding: 9px 0; font: inherit; font-size: 14px; color: var(--text); outline: none; }
.pr-secs { display: flex; flex-direction: column; gap: 2px; }
.pr-sec { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background .15s; }
.pr-sec:hover { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.pr-sec.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--border); }
.pr-sec-ico { width: 26px; text-align: center; font-size: 17px; }
.pr-sec-t { flex: 1; min-width: 0; }
.pr-sec-n { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.pr-sec.on .pr-sec-n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.pr-sec-nueva { align-self: flex-start; }
.pr-main { min-width: 0; }
.pr-main-head h3 { margin: 0; font-size: 20px; }
.pr-main-head p { margin: 2px 0 14px; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pr-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s; animation: mpSube .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
.pr-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .45); }
.pr-card.vacio { border-style: dashed; background: var(--surface-2); }
.pr-card-ico { font-size: 22px; }
.pr-card strong { font-size: 14.5px; line-height: 1.3; }
.pr-card-txt { font-size: 12.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-card.vacio .pr-card-txt { color: var(--muted); font-style: italic; }
.pr-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.pr-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.pr-badge.v { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.pr-badge.pend { border-style: dashed; color: var(--muted); }
.pr-ficha { animation: mpEntraDer .32s cubic-bezier(.2, .8, .2, 1) both; }
.pr-migas { margin-bottom: 8px; }
.pr-ficha-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; margin-bottom: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.pr-ficha-ico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 26px; background: var(--surface); flex: none; }
.pr-ficha-head > div:nth-child(2) { flex: 1; min-width: 200px; }
.pr-ficha-head h3 { margin: 0; font-size: 21px; line-height: 1.25; }
.pr-ficha-head p { margin: 3px 0 0; }
.pr-ficha-acc { display: flex; gap: 8px; }
.pr-contenido { font-size: 15px; line-height: 1.65; max-width: 820px; }
.pr-contenido ol, .pr-contenido ul { padding-left: 22px; }
.pr-contenido li { margin: 4px 0; }
.pr-contenido h2 { font-size: 17px; margin: 18px 0 6px; }
.pr-contenido a { overflow-wrap: anywhere; }
.pr-contenido .rt-video { margin: 12px 0; }
.pr-vacio { text-align: center; padding: 40px 16px; }
.pr-vacio-ico { font-size: 56px; animation: mpBote 1s cubic-bezier(.3, 1.6, .5, 1) both; }
.pr-vacio h3 { margin: 8px 0 6px; font-size: 21px; }
.pr-vacio p { color: var(--text-2); max-width: 520px; margin: 0 auto 14px; }
.pr-editor { display: flex; flex-direction: column; gap: 12px; }
.pr-editor-fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.pr-area { min-height: 320px; }
.pr-editor-acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-editor-st { margin-right: auto; }
.pr-editor-acc .danger { margin-right: 4px; }
:root[data-estilo="espacial"] .pr-side { background: rgb(255 255 255 / .04); }
:root[data-estilo="espacial"] .pr-card { background: rgb(255 255 255 / .05); }
:root[data-estilo="espacial"] .pr-ficha-head { background: linear-gradient(135deg, rgb(255 122 50 / .16), rgb(255 255 255 / .03) 70%); }
@media (max-width: 760px) {
  .pr { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pr-side { position: static; }
  .pr-secs { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  .pr-sec { width: auto; flex: none; padding: 7px 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
  .pr-sec-t { white-space: nowrap; }
  .pr-editor-fila { grid-template-columns: minmax(0, 1fr); }
  .pr-head-acc { width: 100%; }
  .pr-head-acc .btn:first-child { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .pr-card, .pr-ficha, .pr-vacio-ico { animation: none !important; } }
.pr-migas .link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pr-migas .link:hover { text-decoration: underline; }
/* Acceso a la biblioteca de procesos en el inicio de la agencia */
.ag-procesos { display: flex; align-items: center; gap: 14px; width: 100%; margin: 4px 0 18px; padding: 14px 18px; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 13%, var(--surface)), var(--surface) 65%);
  transition: transform .18s, box-shadow .18s; animation: mpSube .45s cubic-bezier(.2, .8, .2, 1) both; }
.ag-procesos:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -20px rgb(0 0 0 / .5); }
.ag-procesos-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--surface); box-shadow: 0 8px 18px -12px rgb(0 0 0 / .45); }
.ag-procesos-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-procesos-txt strong { font-size: 15.5px; }
.ag-procesos-txt small { font-size: 13px; color: var(--text-2); }
.ag-procesos-ir { flex: none; font-weight: 700; font-size: 13.5px; color: var(--accent); }
:root[data-estilo="espacial"] .ag-procesos { background: linear-gradient(120deg, rgb(255 122 50 / .16), rgb(255 255 255 / .04) 65%); }
@media (max-width: 640px) { .ag-procesos-ir { display: none; } }
/* Ficha de proceso con formato de tarea (Asana) */
.pr-main-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pr-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-filtro { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pr-filtro.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.pr-filtro b { margin-left: 3px; padding: 0 6px; border-radius: 999px; background: var(--st-muy-caliente); color: #fff; font-size: 11px; }
.pr-card { position: relative; }
.pr-card.hecho { opacity: .7; }
.pr-card.hecho strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 40%, transparent); }
.pr-card-resp { position: absolute; top: 12px; right: 12px; }
.pr-badge.f-vencida { color: #fff; background: var(--st-muy-caliente); border-color: transparent; }
.pr-badge.f-hoy { color: #fff; background: var(--tone-buy); border-color: transparent; }
.pr-badge.f-manana, .pr-badge.f-semana { color: var(--tone-buy); border-color: color-mix(in srgb, var(--tone-buy) 40%, var(--border)); }
.pr-av { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #6b3cff)); }
.pr-av.vacio { background: none; border: 1.5px dashed var(--border); color: var(--muted); }
.pr-tarea { max-width: 860px; animation: mpEntraDer .32s cubic-bezier(.2, .8, .2, 1) both; }
.pr-tarea-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.pr-volver { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pr-tarea-acc { display: flex; gap: 6px; align-items: center; }
.pr-hecho { border: 1px solid var(--border); }
.pr-hecho:hover { border-color: var(--tone-buy); color: var(--tone-buy); }
.pr-hecho.on { background: var(--tone-buy); border-color: var(--tone-buy); color: #fff; }
.pr-hecho.mp-pop { animation: mpPop .6s cubic-bezier(.3, 1.6, .5, 1); }
.pr-hecho-aviso { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--tone-buy) 12%, transparent); color: var(--tone-buy); font-weight: 600; font-size: 13.5px; }
.pr-titulo { width: 100%; resize: none; overflow: hidden; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 26px; font-weight: 800; line-height: 1.25; padding: 4px 8px; margin: 0 -8px 10px; }
.pr-titulo:hover { border-color: var(--border); }
.pr-titulo:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.pr-campos { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.pr-campo { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 44px; }
.pr-campo-l { font-size: 13.5px; color: var(--muted); }
.pr-campo-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pr-campo-v select, .pr-campo-v input { font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid transparent; border-radius: 9px; padding: 6px 8px; max-width: 100%; }
.pr-campo-v select:hover, .pr-campo-v input:hover { border-color: var(--border); }
.pr-campo-v select:focus, .pr-campo-v input:focus { outline: none; border-color: var(--accent); }
.pr-campo-v input[type=number] { width: 70px; }
.pr-resp, .pr-fecha, .pr-rep { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-bloque { border-top: 1px solid var(--border); padding: 14px 0 6px; }
.pr-bloque-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pr-bloque-h h4 { margin: 0; font-size: 15px; }
.pr-bloque-h h4 .muted { font-weight: 500; font-size: 13px; margin-left: 4px; }
.pr-contenido[data-pr] { cursor: text; border-radius: 10px; padding: 4px 8px; margin: 0 -8px; }
.pr-contenido[data-pr]:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.pr-sub-barra { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; margin-bottom: 8px; }
.pr-sub-barra span { display: block; height: 100%; background: var(--tone-buy); border-radius: 999px; transition: width .4s; }
.pr-subs { list-style: none; margin: 0; padding: 0; }
.pr-subs li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.pr-subs label { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.pr-subs input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--tone-buy); }
.pr-subs li.ok span { text-decoration: line-through; color: var(--muted); }
.pr-x { flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; opacity: .5; }
.pr-x:hover { opacity: 1; background: var(--surface-2); color: var(--st-muy-caliente); }
.pr-sub-nueva input { width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; background: none; font: inherit; font-size: 14px; color: var(--text); }
.pr-sub-nueva input:focus { outline: none; border-style: solid; border-color: var(--accent); }
.pr-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.pr-tabs button { padding: 7px 14px; border-radius: 10px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pr-tabs button.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.pr-tabs b { margin-left: 4px; font-size: 12px; }
.pr-hilo { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pr-com { display: flex; gap: 10px; animation: mpSube .3s ease both; }
.pr-com-c { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.pr-com-c header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13.5px; }
.pr-com-c header .pr-x { margin-left: auto; }
.pr-com-t { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.pr-act { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--text-2); padding-left: 10px; }
.pr-act-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--border); transform: translateY(-1px); }
.pr-hilo-vacio { font-size: 13.5px; }
.pr-comentar { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.pr-comentar textarea { flex: 1; min-width: 0; border: 0; resize: vertical; background: none; font: inherit; font-size: 14px; color: var(--text); min-height: 44px; }
.pr-comentar textarea:focus { outline: none; }
.pr-comentar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
:root[data-estilo="espacial"] .pr-com-c, :root[data-estilo="espacial"] .pr-comentar { background: rgb(255 255 255 / .05); }
@media (max-width: 640px) {
  .pr-campo { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
  .pr-titulo { font-size: 21px; }
  .pr-comentar { flex-wrap: wrap; }
  .pr-comentar .pr-av { display: none; }
  .pr-comentar .btn { margin-left: auto; }
}
.pr-comentar textarea, .pr-comentar textarea:focus { border: 0 !important; box-shadow: none !important; background: none !important; padding: 4px 2px; }
.pr-campo-v .link { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.pr-campo-v .link:hover { color: var(--st-muy-caliente); }
/* Procesos por proyecto */
.pr-proy-sel { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pr-proy-sel select { font: inherit; font-size: 14px; font-weight: 600; color: var(--text); padding: 8px 10px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); }
.pr-proy { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--cl, var(--accent)); background: color-mix(in srgb, var(--cl, var(--accent)) 13%, transparent); }
.pr-proy::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cl, var(--accent)); }
.pr-proy.general { color: var(--text-2); background: var(--surface-2); }
.pr-proy.general::before { display: none; }
.pr-card-proys { display: flex; flex-wrap: wrap; gap: 4px; }
.pr-proy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-pchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.pr-pchip:hover { border-color: var(--cl, var(--accent)); }
.pr-pchip.on { background: color-mix(in srgb, var(--cl, var(--accent)) 16%, var(--surface)); border-color: var(--cl, var(--accent)); color: var(--text); }
.pr-pchip-check input { accent-color: var(--cl, var(--accent)); }
.pr-pchip-check:has(input:checked) { background: color-mix(in srgb, var(--cl, var(--accent)) 16%, var(--surface)); border-color: var(--cl, var(--accent)); color: var(--text); }
.pr-lote-abrir { margin: -6px 0 12px; }
.pr-lote { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin-bottom: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); animation: mpSube .3s ease both; }
.pr-lote-acc { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Operativa de la agencia ---------- */
.op-dlg { width: min(1280px, 97vw); }
.op-head { flex-wrap: wrap; gap: 10px; }
.op-head h2 { flex: 1 1 auto; }
.op-sub { font-size: 14px; font-weight: 500; }
.op-head-acc { display: flex; gap: 8px; }
.op { position: relative; display: flex; flex-direction: column; gap: 12px; }
.op-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.op-tab { padding: 9px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s; }
.op-tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.op-tab b { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--st-muy-caliente); color: #fff; font-size: 11.5px; }
.op-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.op-filtros select { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.op-buscar { flex: 1 1 200px; max-width: 320px; }
.op-dia-cab { display: flex; flex-wrap: wrap; gap: 8px; }
.op-kpi { padding: 7px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; }
.op-kpi b { font-size: 15px; }
.op-kpi.rojo { color: #fff; background: var(--st-muy-caliente); border-color: transparent; }
.op-kpi.verde { color: var(--tone-buy); border-color: color-mix(in srgb, var(--tone-buy) 40%, var(--border)); }
.op-kpi.ambar { color: #a15c00; border-color: #e7b46a; background: color-mix(in srgb, #f0a73a 14%, transparent); }
.op-grupo { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; animation: mpSube .35s ease both; }
.op-grupo > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; cursor: pointer; font-weight: 700; font-size: 14.5px; list-style: none; }
.op-grupo > summary::-webkit-details-marker { display: none; }
.op-grupo > summary b { font-size: 12px; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); }
.op-grupo.g-vencidas > summary { color: var(--st-muy-caliente); }
.op-grupo.g-vencidas > summary b { background: var(--st-muy-caliente); color: #fff; }
.op-lista { list-style: none; margin: 0; padding: 0; }
.op-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border); }
.op-fila:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.op-check { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border); background: none; color: transparent; font-weight: 900; cursor: pointer; display: grid; place-items: center; font-size: 13px; transition: all .15s; }
.op-check:hover { border-color: var(--tone-buy); color: var(--tone-buy); }
.op-check.on { background: var(--tone-buy); border-color: var(--tone-buy); color: #fff; }
.op-fila.e-hecha .op-fila-t strong { text-decoration: line-through; color: var(--muted); }
.op-fila-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; border: 0; background: none; text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: 0; }
.op-fila-t strong { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.op-fila-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.op-emb { color: var(--muted); font-size: 12px; }
.op-bloq { font-size: 12px; font-weight: 600; color: #a15c00; }
.op-com { font-size: 12px; color: var(--muted); }
.op-estado { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
.op-estado.e-en-curso, .op-est.e-en-curso.on { background: color-mix(in srgb, #3d8bfd 16%, transparent); color: #2563c9; }
.op-estado.e-revision, .op-est.e-revision.on { background: color-mix(in srgb, #9b59d0 16%, transparent); color: #7b3fb3; }
.op-estado.e-bloqueado, .op-est.e-bloqueado.on { background: color-mix(in srgb, #f0a73a 20%, transparent); color: #a15c00; }
.op-estado.e-hecha, .op-est.e-hecha.on { background: color-mix(in srgb, var(--tone-buy) 15%, transparent); color: var(--tone-buy); }
.op-fecha { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.op-fecha.vencida { color: var(--st-muy-caliente); }
.op-fecha.hoy { color: var(--tone-buy); }
.op-vacio { text-align: center; padding: 40px 16px; }
.op-vacio span { font-size: 48px; }
.op-vacio h3 { margin: 6px 0; }
.op-vacio p { color: var(--text-2); }
.op-proys { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.op-proy { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); border-top: 4px solid var(--cl); animation: mpSube .4s ease both; animation-delay: calc(var(--i, 0) * 40ms); }
.op-proy header { display: flex; align-items: center; gap: 8px; }
.op-proy h3 { margin: 0; font-size: 16px; flex: 1; }
.op-proy-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cl); }
.op-sem { font-size: 12px; font-weight: 700; color: var(--text-2); }
.op-proy-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.op-proy-nums div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: var(--surface-2); }
.op-proy-nums b { font-size: 20px; }
.op-proy-nums small { font-size: 11.5px; color: var(--muted); }
.op-proy-nums .rojo b { color: var(--st-muy-caliente); }
.op-proy-nums .ambar b { color: #a15c00; }
.op-barra { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-2); gap: 2px; }
.op-barra span { display: block; height: 100%; background: var(--muted); }
.op-barra .e-en-curso { background: #3d8bfd; } .op-barra .e-revision { background: #9b59d0; } .op-barra .e-bloqueado { background: #f0a73a; } .op-barra .e-hecha { background: var(--tone-buy); } .op-barra .e-pendiente { background: color-mix(in srgb, var(--muted) 60%, transparent); }
.op-proy-venc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.op-proy-venc li { display: flex; flex-direction: column; font-size: 13px; }
.op-proy-venc .link { background: none; border: 0; padding: 0; text-align: left; font: inherit; color: var(--st-muy-caliente); font-weight: 600; cursor: pointer; }
.op-proy-venc small { color: var(--muted); font-size: 11.5px; }
.op-proy > .btn { align-self: flex-start; }
.op-ayuda { margin: 0; }
.op-tablero { display: grid; grid-template-columns: repeat(var(--op-ncol, 3), minmax(220px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.op-col { display: flex; flex-direction: column; gap: 8px; min-height: 200px; padding: 10px; border-radius: 14px; background: var(--surface-2); border: 2px dashed transparent; transition: border-color .15s, background .15s; }
.op-col.sobre { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.op-col header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13.5px; padding: 2px 4px; }
.op-col header b { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--surface); }
.op-col-lista { display: flex; flex-direction: column; gap: 8px; }
.op-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); cursor: grab; transition: transform .15s, box-shadow .15s; }
.op-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgb(0 0 0 / .5); }
.op-card.arrastrando { opacity: .45; }
.op-card strong { font-size: 13.5px; line-height: 1.3; }
.op-card footer { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.op-col-vacia { text-align: center; color: var(--muted); margin: 8px 0; }
.op-personas { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.op-persona { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font: inherit; color: var(--text); text-align: left; cursor: pointer; animation: mpSube .35s ease both; animation-delay: calc(var(--i, 0) * 40ms); }
.op-persona:hover { border-color: var(--accent); }
.op-persona-t { display: flex; flex-direction: column; gap: 6px; }
.op-barra-p { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.op-barra-p span { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); border-radius: 999px; }
.op-barra-p span.v { background: var(--st-muy-caliente); }
.op-persona-n { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.op-persona-n .rojo { color: var(--st-muy-caliente); }
.op-ficha-fondo { position: fixed; inset: 0; background: rgb(0 0 0 / .25); z-index: 5; animation: fiestaFondo .2s ease; }
.op-ficha { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 6; overflow-y: auto; padding: 18px 20px; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -20px 0 50px -20px rgb(0 0 0 / .45); animation: opEntra .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes opEntra { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.op-ficha-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.op-ficha-h h3 { margin: 0; }
.op-ficha-t { margin: 4px 0 14px; font-size: 22px; line-height: 1.25; }
.op-estados { display: flex; flex-wrap: wrap; gap: 6px; }
.op-est { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.op-est.on { border-color: transparent; }
.op-est.e-pendiente.on { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.op-notas { font-size: 14px; line-height: 1.55; }
.op-ficha-pie { margin-top: 14px; }
.op-form { display: flex; flex-direction: column; gap: 12px; }
.op-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.op-form-acc { display: flex; justify-content: flex-end; gap: 8px; }
.ag-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 4px 0 18px; }
.ag-accesos .ag-procesos { margin: 0; }
/* Operativa y Biblioteca de procesos, protagonistas en Inicio: arriba del todo, grandes y con el botón a la vista. */
.ag-accesos-top { margin: 0 0 22px; gap: 14px; }
.ag-accesos-top .ag-procesos { padding: 20px 22px; border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 70%); }
.ag-accesos-top .ag-procesos-ico { width: 58px; height: 58px; border-radius: 16px; font-size: 30px; }
.ag-accesos-top .ag-procesos-txt strong { font-size: 18px; }
.ag-accesos-top .ag-procesos-txt small { font-size: 13.5px; }
.ag-accesos-top .ag-procesos-ir { padding: 9px 16px; border-radius: 999px; background: var(--accent); color: #fff; box-shadow: 0 8px 18px -10px var(--accent); }
/* El botón de la Operativa, siempre en la barra de arriba (en Inicio y en cualquier embudo), con su nombre a la vista. */
.topbar .tb-btn.tb-operativa { padding: 6px 12px 6px 6px !important; color: var(--accent); font-weight: 700; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; }
.topbar .tb-operativa .tb-txt { display: inline !important; position: static; width: auto; height: auto; clip: auto; overflow: visible; }
:root[data-estilo="espacial"] .op-grupo, :root[data-estilo="espacial"] .op-proy, :root[data-estilo="espacial"] .op-card, :root[data-estilo="espacial"] .op-persona { background: rgb(255 255 255 / .05); }
:root[data-estilo="espacial"] .op-ficha { background: #17142c; }
@media (max-width: 760px) {
  .op-fila { grid-template-columns: auto minmax(0, 1fr) auto; }
  .op-fila .op-estado { display: none; }
  .op-fila .pr-av { display: none; }
  .op-tablero { grid-template-columns: repeat(var(--op-ncol, 3), 78vw); scroll-snap-type: x mandatory; }
  .op-col { scroll-snap-align: start; }
  .op-form-fila { grid-template-columns: 1fr; }
  .op-buscar { max-width: none; }
}
/* Operativa a pantalla completa y con más aire */
.dialog.op-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; border: 0; border-radius: 0; }
.op-dlg[open] { display: flex; flex-direction: column; }
.op-dlg .op-head { padding: 18px 32px; flex: none; }
.op-dlg .op-head h2 { font-size: 22px; }
.op-dlg .op-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 32px 40px; }
.op { gap: 20px; max-width: 1800px; margin: 0 auto; width: 100%; }
.op-tabs { gap: 10px; }
.op-tab { padding: 11px 20px; font-size: 15px; }
.op-filtros { gap: 12px; }
.op-filtros select { padding: 10px 12px; font-size: 14.5px; }
.op-dia-cab { gap: 10px; }
.op-kpi { padding: 9px 16px; font-size: 14.5px; }
.op-grupo { border-radius: 16px; }
.op-grupo + .op-grupo { margin-top: 4px; }
.op-grupo > summary { padding: 15px 20px; font-size: 15.5px; }
.op-fila { gap: 16px; padding: 14px 20px; }
.op-fila-t { gap: 6px; }
.op-fila-t strong { font-size: 15px; }
.op-fila-meta { gap: 8px; font-size: 12.5px; }
.op-check { width: 28px; height: 28px; }
.op-estado { font-size: 12.5px; padding: 4px 12px; }
.op-fecha { font-size: 13px; }
.op-proys { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.op-proy { padding: 18px 20px; gap: 14px; }
/* Tablero: columnas anchas que ocupan el alto de la pantalla */
.op-tablero { grid-template-columns: repeat(var(--op-ncol, 3), minmax(280px, 1fr)); gap: 16px; min-height: calc(100dvh - 260px); align-items: stretch; }
.op-col { gap: 12px; padding: 14px; border-radius: 18px; min-height: 100%; }
.op-col header { font-size: 15px; padding: 4px 6px 8px; border-bottom: 1px solid var(--border); }
.op-col header b { font-size: 12.5px; padding: 2px 10px; }
.op-col-lista { gap: 12px; }
.op-card { gap: 10px; padding: 14px 16px; border-radius: 14px; }
.op-card strong { font-size: 15px; line-height: 1.35; }
.op-card-proy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.op-card-proy .op-emb { width: 100%; font-size: 12.5px; }
.op-card .op-bloq { font-size: 12.5px; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, #f0a73a 14%, transparent); }
.op-card footer { padding-top: 10px; border-top: 1px solid var(--border); }
.op-col.e-en-curso header { color: #2563c9; } .op-col.e-revision header { color: #7b3fb3; } .op-col.e-bloqueado header { color: #a15c00; } .op-col.e-hecha header { color: var(--tone-buy); }
.op-personas { gap: 12px; }
.op-persona { padding: 16px 18px; }
.op-ficha { width: min(620px, 100vw); padding: 24px 28px; }
.op-ficha .pr-campo { min-height: 50px; }
@media (max-width: 760px) {
  .op-dlg .op-head { padding: 14px 16px; }
  .op-dlg .op-body { padding: 14px 16px 30px; }
  .op-tablero { grid-template-columns: repeat(var(--op-ncol, 3), 84vw); min-height: calc(100dvh - 300px); }
  .op-fila { gap: 10px; padding: 12px 14px; }
  .op-ficha { padding: 18px 16px; }
}
@media (min-width: 761px) { .op-tablero { grid-template-columns: repeat(var(--op-ncol, 3), minmax(260px, 1fr)); } }
.op-dia-cab { margin-bottom: 4px; }
/* Descripción con formato en las tareas de la Operativa */
.op-desc .op-notas { font-size: 14.5px; line-height: 1.6; }
.op-desc .op-notas ul, .op-desc .op-notas ol { padding-left: 22px; }
/* La descripción se ve como un campo de texto grande: queda claro que se puede escribir (y poner enlaces). */
.op-desc-vacia { width: 100%; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; text-align: left; padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-size: 14.5px; cursor: text; box-shadow: inset 0 1px 3px rgb(0 0 0 / .06); transition: border-color .15s, box-shadow .15s; }
.op-desc-vacia:hover, .op-desc-vacia:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.op-desc-vacia-t { font-size: 15px; color: var(--text-2); font-weight: 600; }
.op-desc-vacia-s { font-size: 13px; }
.op-notas-caja { min-height: 110px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); cursor: text; transition: border-color .15s; }
.op-notas-caja:hover { border-color: var(--accent); }
/* Responsable desde la tarjeta: el avatar es un botón que abre un menú con las personas. */
.op-resp-b { border: 0; background: none; padding: 0; margin-left: auto; cursor: pointer; border-radius: 50%; line-height: 0; }
.op-resp-b:hover .pr-av, .op-resp-b:focus-visible .pr-av { outline: 2px solid var(--accent); outline-offset: 1px; }
.op-resp-menu { position: fixed; z-index: 60; min-width: 220px; max-width: 280px; max-height: 340px; overflow-y: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 18px 40px -16px rgb(0 0 0 / .5); animation: mpSube .18s ease both; }
.op-resp-h { padding: 6px 10px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.op-resp-g { padding: 8px 10px 2px; font-size: 11.5px; color: var(--muted); }
.op-resp-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.op-resp-menu button:hover, .op-resp-menu button:focus-visible { background: var(--surface-2); outline: none; }
.op-resp-menu button.on { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
.op-col-arr { cursor: grab; }
.op-col-arr:active { cursor: grabbing; }
.op-col.col-arrastrando { opacity: .45; }
.op-col.col-antes { box-shadow: -4px 0 0 0 var(--accent); }
.op-col.col-despues { box-shadow: 4px 0 0 0 var(--accent); }
.op-fecha-b { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; border-radius: 999px; }
.op-fecha-b:hover .op-fecha, .op-fecha-b:focus-visible .op-fecha { outline: 2px solid var(--accent); outline-offset: 1px; }
.op-fecha-b.vacia .op-fecha { color: var(--muted); background: none; border: 1px dashed var(--border); opacity: .75; }
.op-card:hover .op-fecha-b.vacia .op-fecha { opacity: 1; }
.op-fecha-menu button { justify-content: space-between; }
.op-fecha-menu button small { color: var(--muted); font-size: 12px; }
.op-fecha-otra { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 14px; border-top: 1px solid var(--border); margin-top: 4px; }
.op-fecha-otra input { font: inherit; font-size: 13px; padding: 4px 6px; }
.op-resp-sin { border-top: 1px solid var(--border) !important; margin-top: 4px; border-radius: 0 0 10px 10px !important; }
.op-editor .er { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.op-editor .er:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.op-editor .er-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.op-editor .er-toolbar button { border: 0; background: none; padding: 6px 9px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.op-editor .er-toolbar button:hover { background: var(--surface); color: var(--text); }
.op-editor .er-area { min-height: 220px; max-height: 50vh; overflow-y: auto; padding: 12px 14px; border: 0; border-radius: 0; font-size: 14.5px; line-height: 1.6; outline: none; }
.op-editor .er-area ul, .op-editor .er-area ol { padding-left: 22px; }
.op-desc .op-form-acc { margin-top: 10px; }
.op-card-desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Inicio de la agencia: leyenda del donut que lleva a cada cliente */
.ag-hero-salud { align-items: center; }
.ag-don-lado { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ag-don-ley { gap: 6px; }
.ag-don-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .12); background: rgb(255 255 255 / .06); color: rgb(255 255 255 / .92); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background .15s, transform .15s, border-color .15s; }
.ag-don-btn i { flex: none; width: 12px; height: 12px; border-radius: 4px; margin: 0; }
.ag-don-btn span { flex: 1; }
.ag-don-btn b { font-size: 12px; font-weight: 700; opacity: .75; }
.ag-don-btn:not(:disabled):hover { background: rgb(255 255 255 / .14); transform: translateX(3px); border-color: rgb(255 255 255 / .3); }
.ag-don-btn.on { background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .45); }
.ag-don-btn:disabled { opacity: .5; cursor: default; }
.ag-don-btn.rojo i { background: var(--ag-rojo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ag-rojo) 30%, transparent); }
.ag-don-btn.ambar i { background: var(--ag-ambar); }
.ag-don-btn.verde i { background: var(--ag-verde); }
.ag-don-btn.rojo:not(:disabled) { animation: agLatido 2.4s ease-in-out infinite; }
@keyframes agLatido { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ag-rojo) 0%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ag-rojo) 22%, transparent); } }
.ag-don-quien { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.ag-don-quien button { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 8px 12px; border-radius: 10px; border: 0; border-left: 3px solid var(--ag-ambar); background: rgb(0 0 0 / .22); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.ag-don-quien .rojo button { border-left-color: var(--ag-rojo); }
.ag-don-quien button:hover { background: rgb(0 0 0 / .35); }
.ag-don-quien strong { font-size: 13.5px; }
.ag-don-quien span { font-size: 12.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-filtro-salud { margin: -4px 0 12px; font-size: 14px; color: var(--text-2); }
.ag-filtro-salud .link { background: none; border: 0; padding: 0; margin-left: 8px; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.ag-cli.ag-resalta { animation: agResalta 2s ease; }
@keyframes agResalta { 0%, 60% { box-shadow: 0 0 0 4px var(--accent), 0 20px 40px -20px rgb(0 0 0 / .5); } 100% { box-shadow: none; } }

/* Operativa: cabecera con «Volver al inicio» y el resumen del día */
.op-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; flex: none; padding: 18px 32px; border-bottom: 1px solid var(--border);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 55%); }
.op-volver { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .15s, border-color .15s; }
.op-volver:hover { transform: translateX(-3px); border-color: var(--accent); }
.op-volver span { font-size: 17px; line-height: 1; }
.op-head-t { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 14px; }
.op-head-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: var(--surface); box-shadow: 0 10px 24px -14px rgb(0 0 0 / .5); flex: none; }
.op-head h2 { margin: 0; font-size: 24px; }
.op-sub { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.op-sub-fecha { font-weight: 600; margin-right: 4px; }
.op-sub-pill { padding: 2px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-weight: 700; font-size: 12px; }
.op-sub-pill.rojo { background: var(--st-muy-caliente); border-color: transparent; color: #fff; }
.op-sub-pill.verde { color: var(--tone-buy); border-color: color-mix(in srgb, var(--tone-buy) 40%, var(--border)); }
.op-sub-pill.ambar { color: #a15c00; border-color: #e7b46a; }
.op-sub-txt { margin-left: 4px; color: var(--muted); }
.op-tabs { padding: 5px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); width: fit-content; gap: 4px; }
.op-tab { border: 0; background: none; border-radius: 12px; }
.op-tab.on { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.op-col { border-top: 4px solid var(--muted); }
.op-col.e-en-curso { border-top-color: #3d8bfd; } .op-col.e-revision { border-top-color: #9b59d0; } .op-col.e-bloqueado { border-top-color: #f0a73a; } .op-col.e-hecha { border-top-color: var(--tone-buy); }
.op-card { border-left: 3px solid var(--cl-card, transparent); }
:root[data-estilo="espacial"] .op-head { background: linear-gradient(120deg, rgb(255 122 50 / .18), #17142c 60%); }
:root[data-estilo="espacial"] .op-volver, :root[data-estilo="espacial"] .op-head-ico { background: rgb(255 255 255 / .08); }
@media (max-width: 760px) {
  .op-head { padding: 12px 16px; gap: 10px; }
  .op-head-t { order: 3; flex-basis: 100%; }
  .op-head-acc { margin-left: auto; }
  .op-head-ico { width: 42px; height: 42px; font-size: 21px; }
  .op-head h2 { font-size: 20px; }
  .op-sub-txt { display: none; }
  .op-tabs { width: 100%; }
  .ag-don-quien { max-width: none; }
}
@media (max-width: 760px) {
  .op-volver { padding: 8px 12px; font-size: 13px; }
  .op-head-acc .btn { padding: 8px 12px; font-size: 13px; }
  .ag-hero-salud { flex-wrap: wrap; }
}
/* Tablero: «✓» para completar sin abrir la tarjeta */
.op-card-t { display: flex; align-items: flex-start; gap: 10px; }
.op-card-t .op-check { flex: none; margin-top: 1px; }
.op-col.e-hecha .op-card strong { text-decoration: line-through; color: var(--muted); }
.op-check.hecho-anim { animation: mpPop .5s cubic-bezier(.3, 1.6, .5, 1); }
/* Operativa: «bloqueada» es una marca (con su motivo), no una columna */
.op-card.is-bloq, .op-fila.is-bloq { box-shadow: inset 4px 0 0 #f0a73a; }
.op-bloquear { color: #a15c00; }
.op-col.e-revision { border-top-color: #9b59d0; }
/* Operativa · Calendario del mes (arrastrar una tarea a otro día cambia su fecha) */
.op-cal-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.op-cal-cab h3 { margin: 0 6px; font-size: 20px; min-width: 170px; text-align: center; }
.op-cal-ayuda { margin-left: auto; }
.op-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.op-cal-dow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); padding: 0 6px 2px; }
.op-cal-dia { min-height: 118px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: background .15s, border-color .15s; }
.op-cal-dia.fuera { background: var(--surface-2); opacity: .6; }
.op-cal-dia.hoy { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.op-cal-dia.sobre, .op-cal-sin.sobre { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: var(--accent); }
.op-cal-n { font-size: 13px; font-weight: 800; color: var(--text-2); }
.op-cal-dia.hoy .op-cal-n { color: var(--accent); }
.op-cal-larga { display: none; }
.op-cal-ts { display: flex; flex-direction: column; gap: 3px; max-height: 190px; overflow-y: auto; }
.op-cal-t { box-sizing: border-box; cursor: grab; user-select: none; font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; border-left: 3px solid var(--cl); background: color-mix(in srgb, var(--cl) 10%, var(--surface)); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-cal-t:hover, .op-cal-t:focus-visible { background: color-mix(in srgb, var(--cl) 20%, var(--surface)); outline: none; }
.op-cal-t.hecha { opacity: .55; text-decoration: line-through; }
.op-cal-t.vencida { box-shadow: inset 0 0 0 1px var(--error); color: var(--error); font-weight: 700; }
.op-cal-t.is-bloq { box-shadow: inset 0 0 0 1px #f0a73a; }
.op-cal-sin { margin-top: 14px; border: 1px dashed var(--border); border-radius: 12px; padding: 10px 12px; }
.op-cal-sin h4 { margin: 0 0 8px; font-size: 14px; }
.op-cal-sin .op-cal-ts { flex-direction: row; flex-wrap: wrap; max-height: none; }
.op-cal-sin .op-cal-t { max-width: 280px; }
#op-embudo { min-width: 0; }
/* Móvil: agenda (solo los días con tareas, con su fecha larga) */
@media (max-width: 760px) {
  .op-cal { grid-template-columns: 1fr; gap: 8px; }
  .op-cal-dow, .op-cal-dia:not(.con):not(.hoy) { display: none; }
  .op-cal-dia { min-height: 0; }
  .op-cal-dia.fuera { opacity: 1; }
  .op-cal-larga { display: inline-block; }
  .op-cal-larga::first-letter { text-transform: uppercase; }
  .op-cal-corta { display: none; }
  .op-cal-ts { max-height: none; }
  .op-cal-t { white-space: normal; font-size: 13.5px; padding: 6px 8px; }
  .op-cal-ayuda { display: none; }
}
/* Comentarios de la preclase: configuración (preguntas por clase) y moderación (Leads → Comentarios) */
.com-cfg { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.com-cfg-clases { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.com-cfg-clase { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.com-cfg-clase legend { font-weight: 800; padding: 0 6px; }
.com-cfg-lista { display: flex; flex-direction: column; gap: 6px; }
.com-cfg-q { display: flex; gap: 6px; align-items: center; }
.com-cfg-q input { flex: 1; min-width: 0; }
.com-cfg-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface-2); }
.com-cfg-clase [data-com-add] { align-self: flex-start; }
.com-mod { display: flex; flex-direction: column; gap: 12px; }
.com-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.com-filtros input[type=search] { flex: 1 1 200px; min-width: 0; }
.com-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.com-item { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.com-item.destacado { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.com-item.oculto { opacity: .6; background: var(--surface-2); }
.com-item header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.com-chip { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); }
.com-chip.dest { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.com-chip.oc { background: color-mix(in srgb, var(--muted) 25%, transparent); }
.com-preg { margin: 0; }
.com-texto { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.com-resp { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 8px; font-size: 14px; }
.com-resp p { margin: 2px 0 0; white-space: pre-line; }
.com-responder { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.com-responder textarea { width: 100%; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.com-acc { flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Accesos rápidos del proyecto (menú lateral → panel con tarjetas) */
.sb-atajos { margin-top: 2px; }
.sb-atajos + .sb-title { margin-top: 10px; }
.at-dlg { width: min(860px, 96vw); }
.at-buscar { margin-bottom: 14px; }
.at-grupo + .at-grupo { margin-top: 18px; }
.at-grupo h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.at-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; min-width: 0; transition: border-color .15s, box-shadow .15s, transform .15s; }
.at-card:hover, .at-card:focus-visible { border-color: var(--accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-1px); outline: none; }
.at-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--surface-2); }
.at-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.at-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-txt small { color: var(--text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-ir { color: var(--text-2); font-weight: 800; }
.at-lock { font-size: 13px; }
.at-vacio { text-align: center; padding: 26px 12px; border: 1px dashed var(--border); border-radius: 14px; }
.at-vacio p { margin: 4px 0; }
.at-vacio-ico { font-size: 34px; }
.at-rapido { margin-top: 18px; padding: 12px; border-radius: 14px; background: var(--surface-2); display: grid; grid-template-columns: 2fr 1.3fr auto auto; gap: 8px; align-items: center; }
.at-rapido-t { grid-column: 1 / -1; font-weight: 800; font-size: 13.5px; }
.at-rapido input { min-width: 0; }
.at-rapido .error { grid-column: 1 / -1; margin: 0; }
.at-edit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.at-edit-fila { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.at-edit-campos { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1.6fr; gap: 6px; align-items: center; }
.at-edit-campos input { min-width: 0; }
.at-edit-acc { display: flex; gap: 2px; }
.at-edit-pie { margin-top: 12px; justify-content: flex-end; gap: 8px; align-items: center; }
@media (max-width: 640px) {
  .at-rapido { grid-template-columns: 1fr; }
  .at-edit-campos { grid-template-columns: 1fr; }
  .at-grid { grid-template-columns: 1fr; }
}
/* Operativa · tableros de cada proyecto (General + los creados) y editor de columnas */
.op-tab-def { font-size: .8em; margin-left: 2px; }
/* Operativa: los tableros en una columna a la izquierda y el abierto a la derecha, con su cabecera */
.op-con-lat { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 18px; align-items: start; }
.op-lat { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 10px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface)); }
.op-lat-t { margin: 0 4px; display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.op-lat-t span { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); letter-spacing: 0; }
.op-lat-lista, .op-lat-acc { display: flex; flex-direction: column; gap: 4px; }
.op-lat-acc { padding-top: 8px; border-top: 1px dashed var(--border); }
.op-tab-b { position: relative; width: 100%; font: inherit; font-weight: 650; font-size: 14px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; display: flex; gap: 10px; align-items: center; text-align: left; transition: background .15s, color .15s, border-color .15s; }
.op-tab-b:hover { background: var(--surface-2); color: var(--text); }
.op-lat-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); font-size: 15px; }
.op-lat-nom { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; overflow-wrap: anywhere; }
.op-tab-b b { font-size: 11.5px; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--text-2); text-align: center; }
.op-tab-b.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--text); }
.op-tab-b.on::before { content: ''; position: absolute; left: -11px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.op-tab-b.on .op-lat-ico { background: var(--accent); }
.op-tab-b.on b { background: var(--accent); color: #fff; }
.op-tab-nuevo { color: var(--accent); }
.op-tab-nuevo .op-lat-ico { background: transparent; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); }
.op-lat-main { min-width: 0; }
.op-tab-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.op-tab-cab-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 19px; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.op-tab-cab h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.op-tab-cab-n { font-size: 12.5px; color: var(--muted); font-weight: 650; padding: 2px 9px; border-radius: 99px; background: var(--surface-2); }
@media (max-width: 900px) {
  .op-con-lat { grid-template-columns: 1fr; gap: 12px; }
  .op-lat { position: static; flex-direction: row; align-items: center; padding: 8px; overflow-x: auto; }
  .op-lat-t { display: none; }
  .op-lat-lista, .op-lat-acc { flex-direction: row; }
  .op-lat-acc { padding: 0 0 0 8px; border-top: 0; border-left: 1px dashed var(--border); }
  .op-tab-b { width: auto; flex: none; padding: 7px 10px; }
  .op-lat-nom { white-space: nowrap; display: block; }
  .op-lat-ico { width: 26px; height: 26px; }
  .op-tab-b.on::before { display: none; }
}
.op-tab-defecto.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.op-col.e-c0 { border-top-color: var(--muted); } .op-col.e-c1 { border-top-color: #3d8bfd; } .op-col.e-c2 { border-top-color: #9b59d0; }
.op-col.e-c3 { border-top-color: #f0a73a; } .op-col.e-c4 { border-top-color: #2ec2b4; } .op-col.e-c5 { border-top-color: #e5568a; }
.op-te { border: 1px solid var(--border); border-radius: 16px; padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.op-te-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.op-te-h h3 { margin: 0; }
.op-te-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.op-te-cols { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.op-te-cols li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); }
.op-te-cols li input[data-tc="nombre"] { flex: 1 1 200px; min-width: 0; }
.op-te-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface); }
.op-te [data-op="te-add"] { align-self: flex-start; }
.op-te-pie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.op-te-pie .spacer { flex: 1; }
/* Operativa · tableros con etiquetas, prioridad, checklist y tareas que se repiten (diseño con animaciones) */
.op-col { --colc: var(--muted); }
.op-col.e-c0 { --colc: #8c857e; } .op-col.e-c1 { --colc: #3d7ef0; } .op-col.e-c2 { --colc: #8e5bd8; }
.op-col.e-c3 { --colc: #f2a23a; } .op-col.e-c4 { --colc: #14a3a3; } .op-col.e-c5 { --colc: #e0568f; }
.op-col.e-pendiente { --colc: #8c857e; } .op-col.e-revision { --colc: #8e5bd8; } .op-col.e-hecha { --colc: #2fa86b; }
.op-tablero .op-col { border: 1px solid color-mix(in srgb, var(--colc) 18%, var(--border)); border-top: 0; position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--colc) 11%, var(--surface-2)) 0, var(--surface-2) 180px);
  animation: mpSube .4s cubic-bezier(.2, .8, .2, 1) both; transition: box-shadow .2s, background .2s, transform .2s; }
.op-tablero .op-col:nth-child(2) { animation-delay: 60ms; } .op-tablero .op-col:nth-child(3) { animation-delay: 120ms; }
.op-tablero .op-col:nth-child(4) { animation-delay: 180ms; } .op-tablero .op-col:nth-child(n+5) { animation-delay: 240ms; }
.op-tablero .op-col::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--colc), color-mix(in srgb, var(--colc) 40%, transparent)); }
.op-tablero .op-col header { color: var(--text); gap: 8px; justify-content: flex-start; border-bottom-color: color-mix(in srgb, var(--colc) 20%, var(--border)); }
.op-col-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--colc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--colc) 20%, transparent); flex: none; }
.op-col-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .01em; }
.op-tablero .op-col header b { background: color-mix(in srgb, var(--colc) 16%, var(--surface)); color: color-mix(in srgb, var(--colc) 75%, var(--text)); }
.op-tablero .op-col.sobre { border-color: var(--colc); background: color-mix(in srgb, var(--colc) 14%, var(--surface-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--colc) 22%, transparent), 0 18px 40px -24px var(--colc); transform: translateY(-2px); }
.op-tablero .op-col.sobre .op-col-vacia { border-color: var(--colc); color: var(--colc); }
.op-col-vacia { padding: 22px 10px; border: 2px dashed color-mix(in srgb, var(--colc) 30%, var(--border)); border-radius: 14px; font-size: 13px; transition: border-color .2s, color .2s; }

.op-card2 { position: relative; overflow: hidden; border-radius: 14px; border-color: color-mix(in srgb, var(--border) 80%, transparent); box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 6px 16px -12px rgb(0 0 0 / .25);
  animation: opCardIn .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s, opacity .2s; }
.op-card2:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(0 0 0 / .06), 0 18px 34px -18px rgb(0 0 0 / .45); border-color: color-mix(in srgb, var(--portada, var(--accent)) 45%, var(--border)); }
.op-card2.con-portada { padding-top: 18px; }
.op-card2.con-portada::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--portada), color-mix(in srgb, var(--portada) 45%, #fff)); }
.op-card2.arrastrando { opacity: .9; transform: rotate(2.5deg) scale(1.03); box-shadow: 0 26px 50px -20px rgb(0 0 0 / .55); cursor: grabbing; }
.op-card2.is-bloq { border-color: color-mix(in srgb, #f0a73a 55%, var(--border)); }
.op-card2.es-hecha { opacity: .72; }
.op-card2.es-hecha strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); color: var(--text-2); }
.op-card2.es-hecha:hover { opacity: 1; }
.op-card-t { display: flex; align-items: flex-start; gap: 10px; }
.op-card-t strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.op-card-t .op-check { flex: none; margin-top: -1px; }
.op-card2 .op-check:hover { transform: scale(1.12); }
.op-card2 footer { flex-wrap: wrap; justify-content: flex-start; gap: 6px 8px; }
.op-card2 footer .op-card-proy { flex: 1 1 auto; }
.op-card2 footer .pr-av { margin-left: auto; }
.op-card2 .op-fecha { padding: 3px 9px; border-radius: 999px; background: var(--surface-2); }
.op-card2 .op-fecha.vencida { background: color-mix(in srgb, var(--st-muy-caliente) 13%, transparent); }
.op-card2 .op-fecha.hoy { background: color-mix(in srgb, var(--tone-buy) 14%, transparent); }
.op-card-etqs { display: flex; flex-wrap: wrap; gap: 5px; }
.op-etq { --etq: #7d7f86; display: inline-flex; align-items: center; max-width: 100%; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.35; letter-spacing: .01em;
  color: color-mix(in srgb, var(--etq) 78%, #000); background: color-mix(in srgb, var(--etq) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--etq) 30%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-etq::before { content: ''; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--etq); flex: none; }
:root[data-theme="dark"] .op-etq { color: color-mix(in srgb, var(--etq) 55%, #fff); background: color-mix(in srgb, var(--etq) 22%, transparent); }
.op-prio { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; }
.op-prio.p-alta { background: linear-gradient(135deg, #e5484d, #f2783a); box-shadow: 0 4px 12px -6px #e5484d; }
.op-prio.p-media { background: color-mix(in srgb, #f2a23a 20%, var(--surface)); color: #a15c00; }
.op-prio.p-baja { background: color-mix(in srgb, #3d7ef0 15%, var(--surface)); color: #2a5fc4; }
:root[data-theme="dark"] .op-prio.p-media { color: #f6c27a; } :root[data-theme="dark"] .op-prio.p-baja { color: #9cbcf7; }
.op-rep { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, #8e5bd8 14%, transparent); font-size: 12px; }
.op-card2:hover .op-rep { animation: opGira 1s ease; }
.op-ck-mini { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.op-ck-mini b { font-weight: 700; white-space: nowrap; }
.op-ck-mini.completa { color: var(--tone-buy); }
.op-ck-barra { position: relative; flex: 1; display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.op-ck-barra i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.op-ck-mini.completa .op-ck-barra i, .op-ck-barra.lleno i { background: linear-gradient(90deg, #2fa86b, #5ccf93); }
.op-ck-barra.grande { height: 8px; margin: 2px 0 8px; }

/* Completar: destello verde, el check «salta» y la tarjeta se va */
.op-card2.completando { animation: opCompleta .45s cubic-bezier(.4, 0, .2, 1) forwards; pointer-events: none; }
.op-card2.completando .op-check { background: var(--tone-buy); border-color: var(--tone-buy); color: #fff; animation: opPop .35s ease; }
.op-card2.recien { animation: opCardIn .5s cubic-bezier(.2, .8, .2, 1) both, opBrilla 2.2s ease .3s 1; }
@keyframes opCardIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes opCompleta { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone-buy) 60%, transparent); } 35% { transform: scale(1.03); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone-buy) 30%, transparent); background: color-mix(in srgb, var(--tone-buy) 12%, var(--surface)); } 100% { transform: translateX(30px) scale(.92); opacity: 0; } }
@keyframes opPop { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes opBrilla { 0%, 100% { box-shadow: 0 6px 16px -12px rgb(0 0 0 / .25); } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, #8e5bd8 45%, transparent), 0 14px 30px -14px #8e5bd8; } }
@keyframes opGira { to { transform: rotate(360deg); } }

/* Filtro por etiqueta */
.op-fetqs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.op-fchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; }
.op-fchip:first-child { padding-right: 12px; }
.op-fchip:hover { transform: translateY(-1px); border-color: var(--accent); }
.op-fchip .op-etq { border: 0; }
.op-fchip b { font-size: 11.5px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); text-align: center; }
.op-fchip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }

/* Ficha: prioridad, etiquetas, se repite y checklist */
.op-prios { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.op-prio-b { padding: 6px 12px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.op-prio-b:hover { color: var(--text); }
.op-prio-b.on { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px -4px rgb(0 0 0 / .35); }
.op-prio-b.p-alta.on { background: linear-gradient(135deg, #e5484d, #f2783a); color: #fff; }
.op-prio-b.p-media.on { color: #a15c00; } .op-prio-b.p-baja.on { color: #2a5fc4; }
.op-etqs-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.op-etqs-v > .op-etq { cursor: pointer; }
.op-etqs-v > .op-etq:hover { text-decoration: line-through; }
.op-etq-add { padding: 3px 11px; border-radius: 999px; border: 1.5px dashed var(--border); background: none; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.op-etq-add:hover { border-color: var(--accent); color: var(--accent); }
.op-etq-picker { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); animation: opCardIn .25s ease both; }
.op-etq-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.op-etq-opt { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; transition: transform .15s; }
.op-etq-opt .op-etq { cursor: pointer; opacity: .55; transition: opacity .15s, box-shadow .15s; }
.op-etq-opt:hover { transform: translateY(-1px); }
.op-etq-opt:hover .op-etq { opacity: .85; }
.op-etq-opt.on .op-etq { opacity: 1; box-shadow: 0 0 0 2px var(--etq); }
.op-etq-opt.on .op-etq::after { content: '✓'; margin-left: 6px; }
.op-etq-x { border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.op-etq-x:hover { color: var(--st-muy-caliente); background: var(--surface); }
.op-etq-nueva { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.op-etq-nueva input { flex: 1 1 180px; min-width: 0; }
.op-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.op-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); background: var(--sw); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw) 50%, transparent); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.op-sw:hover { transform: scale(1.15); }
.op-sw.on { transform: scale(1.15); box-shadow: 0 0 0 2px var(--sw); }
.op-rep-v { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.op-rep-v input[type=number] { width: 80px; }
.op-rep-txt { flex-basis: 100%; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #8e5bd8 10%, transparent); color: var(--text-2); font-size: 12.5px; }
.op-ck-lista { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.op-ck-lista li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; transition: background .15s; animation: opCardIn .25s ease both; }
.op-ck-lista li:hover { background: var(--surface-2); }
.op-ck-lista label { flex: 1; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.4; }
.op-ck-lista input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--tone-buy); flex: none; }
.op-ck-lista li.hecho span { text-decoration: line-through; color: var(--muted); }
.op-ck-x { border: 0; background: none; color: var(--muted); cursor: pointer; opacity: 0; padding: 2px 6px; border-radius: 6px; transition: opacity .15s; }
.op-ck-lista li:hover .op-ck-x, .op-ck-x:focus-visible { opacity: 1; }
.op-ck-x:hover { color: var(--st-muy-caliente); }
.op-ck-add { display: flex; gap: 8px; }
.op-ck-add input { flex: 1; min-width: 0; }

/* Aviso flotante («Se ha creado la siguiente…») */
.op-toast { position: fixed; left: 50%; bottom: 28px; z-index: 20; transform: translateX(-50%); max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px;
  background: linear-gradient(135deg, #2a2440, #3b2f5c); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 20px 40px -16px rgb(0 0 0 / .6); animation: opToast .4s cubic-bezier(.2, .9, .3, 1.2) both; transition: opacity .5s, transform .5s; }
.op-toast.fuera { opacity: 0; transform: translate(-50%, 16px); }
@keyframes opToast { from { opacity: 0; transform: translate(-50%, 24px) scale(.95); } to { opacity: 1; transform: translate(-50%, 0); } }
:root[data-estilo="espacial"] .op-card2 { background: rgb(255 255 255 / .06); }
@media (max-width: 760px) {
  .op-card2:hover { transform: none; }
  .op-ck-x { opacity: 1; }
  .op-toast { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .op-card2, .op-card2.recien, .op-tablero .op-col, .op-toast, .op-etq-picker, .op-ck-lista li { animation: none !important; }
  .op-card2.completando { animation: none !important; opacity: .4; }
  .op-card2, .op-card2:hover, .op-card2.arrastrando, .op-tablero .op-col.sobre { transform: none; }
}
.op-tablero.quieto .op-col, .op-tablero.quieto .op-card2:not(.recien):not(.llega) { animation: none; }
/* «Se repite» con día concreto (Operativa y Procesos) */
.rep-ed { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rep-l { font-size: 13px; color: var(--text-2); }
.rep-n { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.rep-n input { width: 76px; }
.rep-dias { display: inline-flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.rep-dsem { width: 32px; height: 32px; border-radius: 9px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.rep-dsem:hover { color: var(--text); background: var(--surface); }
.rep-dsem.on { background: linear-gradient(135deg, #8e5bd8, #b07ae6); color: #fff; box-shadow: 0 4px 12px -6px #8e5bd8; transform: translateY(-1px); }
.op-rep-alinear { align-self: flex-start; }
@media (max-width: 760px) { .rep-dsem { width: 30px; height: 30px; } }
/* Destinatarios de los informes */
.inf-dest-dlg { width: min(560px, 96vw); }
.inf-dest-dlg .dialog-body { display: flex; flex-direction: column; gap: 12px; }
.inf-dest-h { margin: 4px 0 0; font-size: 15px; }
.inf-dest-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inf-dest-lista li { padding: 8px 12px; border-radius: 10px; background: var(--surface-2); display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; }
.inf-dest-dlg textarea { width: 100%; font: inherit; font-size: 14px; }
.inf-dest-pie { justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.inf-dest-pie > span { flex: 1; }
/* Alta de cliente: los pasos hechos se pueden volver a ver y desmarcar; las etapas, volver a abrir */
.crm-paso.hecho.abierto { opacity: 1; }
.crm-paso.hecho.abierto .crm-cuerpo p { display: block; }
.crm-hecho-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.crm-hecho-acc .btn { padding: 4px 10px; }
.cl-pasos-rail li { padding: 0; }
.cl-rail-b { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-weight: 700; font-size: 13px; }
button.cl-rail-b { cursor: pointer; transition: background .15s; }
button.cl-rail-b:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Operativa · importar un tablero */
.op-imp-cols { display: flex; flex-wrap: wrap; gap: 8px; }
.op-imp-col { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border-top: 3px solid var(--muted); min-width: 140px; }
.op-imp-col.hecha { border-top-color: var(--tone-buy); }
.op-imp-col span { font-size: 12.5px; color: var(--text-2); }
/* ---------- Alta de cliente · conexiones (CRM, Meta, Zoom, SendFlow) ---------- */
.g-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.g-rail-i { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.g-rail-i:hover { transform: translateY(-1px); border-color: var(--accent); }
.g-rail-i b { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-size: 17px; }
.g-rail-i span { display: flex; flex-direction: column; min-width: 0; font-weight: 700; font-size: 13.5px; color: var(--text); }
.g-rail-i small { font-weight: 600; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-rail-i.activo { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.g-rail-i.hecho b, .g-rail-i.e-ok b { background: var(--tone-buy); color: #fff; }
.g-rail-i.e-ok small { color: var(--tone-buy); }
.g-rail-i.e-elegido small { color: var(--accent); }
.g-rail-i.e-ko small { color: var(--st-muy-caliente); }
.g-rail-i.e-nada { opacity: .75; }
span.g-rail-i { cursor: default; }
.g-etapa { display: flex; flex-direction: column; gap: 16px; }
.g-etapa.entra { animation: mpSube .3s ease both; }
.g-hero { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(135deg, color-mix(in srgb, var(--cl) 12%, var(--surface)), var(--surface) 60%); }
.g-hero-ico { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: var(--surface); box-shadow: 0 6px 18px -10px rgb(0 0 0 / .4); }
.g-hero h3 { margin: 0 0 4px; font-size: 19px; }
.g-hero p { margin: 0 0 8px; color: var(--text-2); line-height: 1.5; }
.g-hero > div { flex: 1; min-width: 0; }
.g-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.g-opcion { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.g-opcion:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.g-opcion.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: 0 10px 26px -18px var(--accent); }
.g-opcion-ico { font-size: 26px; }
.g-opcion strong { font-size: 15px; }
.g-opcion small { color: var(--text-2); font-size: 13px; line-height: 1.45; }
.g-opcion-ok { position: absolute; top: 12px; right: 12px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800; }
.g-sinpasos p { margin: 0; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--tone-buy) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone-buy) 30%, transparent); font-size: 14.5px; }
.g-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.g-paso { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.g-etapa.entra .g-paso { animation: mpSube .3s ease both; animation-delay: calc(var(--i, 0) * 30ms); }
.g-paso-cab { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.g-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); font-weight: 800; font-size: 14px; color: var(--text-2); transition: all .2s; }
.g-tit { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; }
.g-donde { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 11.5px; font-weight: 700; }
.g-chev { flex: none; color: var(--muted); transition: transform .2s; }
.g-paso.abierto .g-chev { transform: rotate(180deg); }
.g-paso.actual { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.g-paso.actual .g-num { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.g-paso.hecho:not(.abierto) { background: color-mix(in srgb, var(--tone-buy) 5%, var(--surface)); }
.g-paso.hecho .g-num { border-color: var(--tone-buy); background: var(--tone-buy); color: #fff; }
.g-paso.hecho:not(.abierto) .g-tit { color: var(--text-2); }
.g-paso.revisar { border-color: var(--st-muy-caliente); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-muy-caliente) 18%, transparent); }
.g-paso-cuerpo { padding: 0 18px 16px 60px; animation: mpSube .25s ease both; }
.g-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; line-height: 1.55; }
.g-lista li::marker { color: var(--accent); font-weight: 800; }
.g-ruta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; vertical-align: middle; }
.g-ruta b { padding: 2px 9px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 700; white-space: nowrap; }
.g-ruta i { font-style: normal; color: var(--muted); font-weight: 800; }
.g-valor { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border)); width: fit-content; max-width: 100%; }
.g-valor code { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; background: none; }
.g-valores { display: flex; flex-direction: column; gap: 2px; }
.g-copiar { flex: none; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.g-copiar:hover { border-color: var(--accent); color: var(--accent); }
.g-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.g-chips span { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-size: 12.5px; font-weight: 600; }
.g-aviso { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #f0a73a 13%, transparent); border: 1px solid color-mix(in srgb, #f0a73a 35%, transparent); font-size: 13.5px; line-height: 1.5; }
.g-ok { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--tone-buy) 10%, transparent); font-size: 13.5px; }
.g-nota { margin: 10px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.55; }
.g-acc { margin-top: 14px; display: flex; gap: 8px; }
.g-comprobar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 16px 18px; border-radius: 16px; border: 2px dashed var(--border); background: var(--surface); }
.g-comprobar h4 { margin: 0 0 2px; font-size: 15px; }
.g-comprobar p { margin: 0; }
.g-comprobar > .g-res, .g-comprobar > .crm-error { grid-column: 1 / -1; }
.g-comprobar.ok { border-style: solid; border-color: var(--tone-buy); background: color-mix(in srgb, var(--tone-buy) 6%, var(--surface)); }
.g-comprobar.ko { border-style: solid; border-color: var(--st-muy-caliente); }
.g-res.ok { margin: 0; font-weight: 700; color: var(--tone-buy); }
.g-nav { display: flex; gap: 8px; align-items: center; }
.g-nav .spacer { flex: 1; }
.g-resumen { list-style: none; padding: 0; margin: 12px auto; display: flex; flex-direction: column; gap: 6px; max-width: 520px; text-align: left; }
.g-resumen li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
.g-resumen em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); }
.g-resumen .e-ok em { color: var(--tone-buy); }
.g-resumen .e-elegido em { color: var(--accent); }
.cl-cx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 10px; }
.cl-cx-i { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; }
.cl-cx-i small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.cl-cx-i.e-ok small { color: var(--tone-buy); } .cl-cx-i.e-elegido small { color: var(--accent); } .cl-cx-i.e-ko small { color: var(--st-muy-caliente); }
.cl-cx-i:hover { border-color: var(--accent); }
@media (max-width: 760px) {
  .g-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-rail-i { padding: 8px; gap: 6px; }
  .g-rail-i b { width: 28px; height: 28px; font-size: 15px; }
  .g-paso-cuerpo { padding: 0 14px 14px 16px; }
  .g-comprobar { grid-template-columns: 1fr; }
  .cl-cx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-hero { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .g-etapa.entra, .g-etapa.entra .g-paso, .g-paso-cuerpo { animation: none; } }
/* Cuenta → Conexiones: de dónde salen Meta, Zoom y SendFlow del cliente */
.cx-fuentes { display: flex; flex-direction: column; gap: 10px; }
.cx-fuente { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.cx-fuente-t { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.cx-fuente-t span { font-size: 20px; }
.cx-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.cx-seg { justify-self: start; }
.cx-seg button { white-space: nowrap; padding: 7px 14px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.cx-seg button:hover { color: var(--text); }
.cx-seg button.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px -6px var(--accent); }
.cx-fuente-acc { display: flex; gap: 6px; }
.cx-fuente-res { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 600; }
.cx-fuente-res.ok { color: var(--tone-buy); } .cx-fuente-res.ko { color: var(--st-muy-caliente); }
@media (max-width: 760px) { .cx-fuente { grid-template-columns: 1fr; } }
/* Operativa · selectores en píldora */
.op-sel { --sel: var(--accent); position: relative; display: inline-flex; align-items: center; gap: 0; height: 44px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 6px 16px -14px rgb(0 0 0 / .4); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
.op-sel:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--sel) 50%, var(--border)); box-shadow: 0 10px 22px -16px rgb(0 0 0 / .5); }
.op-sel:focus-within { border-color: var(--sel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sel) 20%, transparent); }
.op-sel-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 15px; transition: background .15s; }
.op-sel select, .op-filtros .op-sel select, :root .op-filtros .op-sel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent !important; background-image: none !important; box-shadow: none; padding: 0 22px 0 10px; height: 100%; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--text); cursor: pointer; outline: none; max-width: 240px; text-overflow: ellipsis; }
.op-sel-chev { position: absolute; right: 14px; pointer-events: none; font-size: 11px; color: var(--muted); }
.op-sel.activo { border-color: color-mix(in srgb, var(--sel) 55%, var(--border)); background: color-mix(in srgb, var(--sel) 8%, var(--surface)); }
.op-sel.activo .op-sel-ico { background: var(--sel); color: #fff; box-shadow: 0 4px 10px -4px var(--sel); }
.op-sel select option { font-weight: 500; color: var(--text); background: var(--surface); }
.op-filtros .op-buscar { height: 44px; border-radius: 999px; }
/* Operativa · «＋» en cada columna */
.op-col-mas { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 0; background: color-mix(in srgb, var(--colc, var(--accent)) 14%, transparent); color: color-mix(in srgb, var(--colc, var(--accent)) 80%, var(--text)); font: inherit; font-size: 16px; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform .15s, background .15s; }
.op-col-mas:hover { transform: scale(1.12); background: color-mix(in srgb, var(--colc, var(--accent)) 26%, transparent); }
.op-add-b { width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--colc, var(--accent)) 35%, var(--border)); background: transparent; color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.op-add-b:hover { background: var(--surface); color: var(--text); border-color: var(--colc, var(--accent)); }
.op-add { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--colc, var(--accent)); box-shadow: 0 10px 24px -18px rgb(0 0 0 / .5); animation: opCardIn .25s ease both; }
.op-add textarea { width: 100%; resize: none; border: 0; outline: none; background: transparent; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); }
.op-add-acc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Operativa · completar: check que salta, ráfaga y la tarjeta llega a «Hecho» */
.op-card2 { overflow: visible; }
.op-card2.con-portada::before { border-radius: 14px 14px 0 0; }
.op-card2.completando { overflow: visible; animation: opCompleta2 .7s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes opCompleta2 {
  0% { transform: none; }
  25% { transform: scale(1.04); background: color-mix(in srgb, var(--tone-buy) 18%, var(--surface)); border-color: var(--tone-buy); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone-buy) 25%, transparent); }
  60% { transform: scale(1.02); background: color-mix(in srgb, var(--tone-buy) 14%, var(--surface)); border-color: var(--tone-buy); }
  100% { transform: translateX(40px) scale(.9); opacity: 0; }
}
.op-card2.completando .op-check { background: var(--tone-buy); border-color: var(--tone-buy); color: #fff; animation: opPop2 .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes opPop2 { 0% { transform: scale(.6); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
.op-burst { position: absolute; left: 30px; top: 30px; width: 0; height: 0; pointer-events: none; z-index: 2; }
.op-burst i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--tone-buy); animation: opChispa .6s ease-out forwards; }
.op-burst i:nth-child(3n) { background: #f2a23a; } .op-burst i:nth-child(3n+1) { background: #3d7ef0; }
@keyframes opChispa { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.3); opacity: 0; } }
.op-card2.llega { animation: opLlega .9s cubic-bezier(.2, .9, .3, 1.2) both !important; }
@keyframes opLlega {
  0% { opacity: 0; transform: translateY(-14px) scale(.85); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone-buy) 60%, transparent); }
  45% { opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 8px color-mix(in srgb, var(--tone-buy) 25%, transparent); border-color: var(--tone-buy); }
  100% { transform: none; box-shadow: 0 6px 16px -12px rgb(0 0 0 / .25); }
}
.op-tablero.quieto .op-card2.llega { animation: opLlega .9s cubic-bezier(.2, .9, .3, 1.2) both !important; }
@media (prefers-reduced-motion: reduce) { .op-card2.completando, .op-card2.llega, .op-burst i, .op-add { animation: none !important; } }

/* Operativa: reordenar dentro de una columna (raya donde va a caer, destello al colocarla y ↑/↓ en la ficha) */
.op-col-lista > .op-card.hueco-antes { box-shadow: 0 -7px 0 -4px var(--colc, var(--accent)); }
.op-col-lista.hueco-final { box-shadow: inset 0 -3px 0 0 var(--colc, var(--accent)); border-radius: 10px; }
.op-card.movida { animation: op-movida .7s ease-out; }
@keyframes op-movida { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--colc, var(--accent)) 55%, transparent); transform: scale(1.02); } 100% { box-shadow: 0 0 0 0 transparent; transform: none; } }
.op-pos { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.op-pos-b { width: 28px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: 14px; cursor: pointer; }
.op-pos-b:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.op-pos-b:disabled { opacity: .3; cursor: default; }
.op-pos-n { font-size: 12px; color: var(--muted); padding: 0 6px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .op-card.movida { animation: none; } }

/* Operativa: el círculo de completar se ve apagado (borde y check tenues) y se enciende en verde al pasar o al estar hecha */
.op-check { color: var(--muted); border-color: color-mix(in srgb, var(--muted) 75%, transparent); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.op-check svg { display: block; opacity: .8; transition: opacity .15s, transform .15s; }
.op-check:hover, .op-check:focus-visible { color: var(--tone-buy); border-color: var(--tone-buy); background: color-mix(in srgb, var(--tone-buy) 14%, transparent); }
.op-check:hover svg, .op-check:focus-visible svg { opacity: 1; transform: scale(1.08); }
.op-check.on, .op-card2.completando .op-check { color: #fff; background: var(--tone-buy); border-color: var(--tone-buy); }
.op-check.on svg, .op-card2.completando .op-check svg { opacity: 1; }
/* Texto de ayuda encima del tablero: con aire */
.op-ayuda { margin: 14px 2px 18px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); border: 1px dashed var(--border); color: var(--text-2); font-size: 13px; line-height: 1.55; }

/* Operativa: pestañas de tableros que se arrastran y nombre de la tarea editable */
.op-tab-b[draggable="true"] { cursor: grab; }
.op-tab-b.arrastrando { opacity: .45; cursor: grabbing; }
.op-tab-b.tab-antes { box-shadow: 0 -3px 0 0 var(--accent); }
.op-tab-b.tab-despues { box-shadow: 0 3px 0 0 var(--accent); }
@media (max-width: 900px) { .op-tab-b.tab-antes { box-shadow: -3px 0 0 0 var(--accent); } .op-tab-b.tab-despues { box-shadow: 3px 0 0 0 var(--accent); } }
.op-ficha-t { display: flex; align-items: flex-start; gap: 8px; }
.op-titulo-b { flex: none; border: 0; background: none; cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 8px; opacity: .45; transition: opacity .15s, background .15s; }
.op-titulo-b:hover, .op-titulo-b:focus-visible { opacity: 1; background: var(--surface-2); }
.op-titulo-ed { display: flex; gap: 8px; align-items: center; margin: 6px 0 12px; flex-wrap: wrap; }
.op-titulo-ed input { flex: 1; min-width: 180px; font-size: 17px; font-weight: 700; }

/* Enlaces a otras tareas y tableros («@») */
a.enlace-int { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); line-height: 1.5; cursor: pointer; white-space: normal; }
/* Cada tipo con su color y su etiqueta delante, para que se vea si es una tarea, un tablero o una persona. */
a.enlace-int::before { content: '📝 Tarea'; font-size: .78em; font-weight: 700; padding-right: 5px; margin-right: 1px; border-right: 1px solid currentColor; opacity: .85; }
a.enlace-int.e-tablero { --enl: #2f7fd8; color: var(--enl); background: color-mix(in srgb, var(--enl) 12%, transparent); border-color: color-mix(in srgb, var(--enl) 32%, transparent); }
a.enlace-int.e-tablero::before { content: '🗂️ Tablero'; }
a.enlace-int.e-persona { --enl: #2e9a62; color: var(--enl); background: color-mix(in srgb, var(--enl) 12%, transparent); border-color: color-mix(in srgb, var(--enl) 32%, transparent); cursor: default; }
a.enlace-int.e-persona::before { content: '@'; border-right: 0; padding-right: 0; font-size: .95em; }
a.enlace-int:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
a.enlace-int.e-tablero:hover, a.enlace-int.e-persona:hover { background: color-mix(in srgb, var(--enl) 20%, transparent); }
.arroba-lista { position: absolute; z-index: 30; max-height: 300px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 40px -16px rgb(0 0 0 / .35); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.arroba-lista[hidden] { display: none; }
.arroba-h, .mention-sep { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 8px 4px; }
.arroba-lista button { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; border: 0; background: none; border-radius: 10px; padding: 7px 8px; cursor: pointer; color: var(--text); font: inherit; font-size: 14px; }
.arroba-lista button small { grid-column: 2; color: var(--muted); font-size: 12px; }
.arroba-lista button.activo, .arroba-lista button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.arroba-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-ico { width: 24px; text-align: center; }

/* Biblioteca de procesos: crear desde cero o importando una tarea de un tablero */
.pr-crear { display: flex; flex-direction: column; gap: 16px; }
.pr-crear-h { display: flex; align-items: center; gap: 12px; }
.pr-crear-h h3 { margin: 0; }
.pr-crear-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pr-crear-op { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 22px; border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pr-crear-op:hover, .pr-crear-op:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 30px -20px var(--accent); }
.pr-crear-op strong { font-size: 16px; }
.pr-crear-ico { font-size: 28px; line-height: 1; }
.pr-crear-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pr-crear-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-crear-t { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.pr-crear-t:hover, .pr-crear-t:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.pr-vaciar { margin-left: auto; color: var(--st-muy-caliente, #d33); }

/* Operativa: ancho de cada columna arrastrando su borde derecho */
.op-tablero .op-col { position: relative; }
.op-col-ancho { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 3; touch-action: none; }
.op-col-ancho::after { content: ''; position: absolute; top: 14px; bottom: 14px; right: 3px; width: 3px; border-radius: 3px; background: var(--colc, var(--accent)); opacity: 0; transition: opacity .15s; }
.op-col:hover .op-col-ancho::after { opacity: .35; }
.op-col-ancho:hover::after, .op-col.ajustando .op-col-ancho::after { opacity: 1; }
.op-col.ajustando { user-select: none; }

@media (max-width: 760px) { .op-col-ancho { display: none; } }

/* Operativa: chip para elegir su diseño (clásico o espacial), arriba a la derecha */
.op-estilo { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); isolation: isolate; }
.op-estilo button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; color: var(--muted); white-space: nowrap; transition: color .25s; }
.op-estilo button[aria-checked="true"] { color: var(--text); }
.op-estilo-bola { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--surface); box-shadow: 0 2px 8px rgb(0 0 0 / .15); transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), background .3s; }
.op-estilo[data-on="espacial"] .op-estilo-bola { transform: translateX(100%); background: linear-gradient(135deg, #2b2f6b, #6b3fa0); }
.op-estilo[data-on="espacial"] button[aria-checked="true"] { color: #fff; }
.op-estilo button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .op-estilo button { padding: 6px 10px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .op-estilo-bola { transition: none; } }
.op-head-acc { align-items: center; flex-wrap: wrap; }

/* Biblioteca de procesos en solo lectura (perfil «Solo Operativa»): se consulta, sin controles para cambiar nada. */
.pr-lectura #pr-nuevo, .pr-lectura label:has(#pr-importar), .pr-lectura [data-pr="nuevo"], .pr-lectura [data-pr="seccion"], .pr-lectura [data-pr="vaciar"],
.pr-lectura [data-pr="lote"], .pr-lectura .pr-lote-abrir, .pr-lectura [data-pr="borrar"], .pr-lectura [data-pr="hecho"], .pr-lectura [data-pr="editar-desc"],
.pr-lectura [data-pr="sin-fecha"], .pr-lectura [data-pr="rep-alinear"], .pr-lectura .pr-sub-nueva, .pr-lectura .pr-x, .pr-lectura .pr-comentar { display: none !important; }
.pr-lectura .pr-tarea :is(input, select, textarea, .pr-pchip, [data-rep-ed]) { pointer-events: none; }
.pr-lectura .pr-tarea :is(select, input[type="date"]) { appearance: none; border-color: transparent; background: none; }
.pr-lectura [data-pr="editar-desc-click"] { cursor: default; }

/* Perfil «Solo Operativa»: fuera los embudos, el lanzamiento y sus datos; solo su Inicio, la Operativa y su cuenta. */
body.solo-operativa :is(#sidebar, .topbar .lanz-only, .tb-lanz, .notif-wrap, #inicio, #dashboard, #sin-embudos, #empty-state, #aviso-2fa, .config-only, .admin-only) { display: none !important; }
body:not(.solo-operativa) #solo-op { display: none !important; }
body.solo-operativa .app-body { display: block; }

/* Operativa: proyecto por defecto (estrella junto al cliente) y filtro de tiempo del tablero. */
.op-proy-def { border: 1px dashed var(--border); background: none; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.op-proy-def:hover { border-color: var(--accent); color: var(--accent); }
.op-proy-def.on { border-style: solid; border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.op-rangos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.op-rangos-l { font-size: 15px; margin-right: 2px; }
.op-rango { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.op-rango:hover { border-color: var(--accent); color: var(--text); }
.op-rango.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.op-rangos-nota { margin-left: 4px; }

/* Inicio de trabajo (sin métricas): fuera el periodo y las cifras; dentro la Operativa, sus tareas y sus embudos. */
body:not(.inicio-trabajo) #inicio-trabajo { display: none; }
body.inicio-trabajo :is(#inicio .inicio-cab-acc, #inicio-total, #inicio-alertas, #inicio-anuncios, #inicio-embudos, #inicio .inicio-dos, #inicio-agencia) { display: none !important; }
#inicio-trabajo > .card { margin-bottom: 16px; }
.it-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.it-tarea { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.it-tarea:hover { border-color: var(--accent); transform: translateY(-1px); }
.it-tarea strong { grid-column: 1; }
.it-tarea .small { grid-column: 1; }
.it-tarea .op-fecha { grid-column: 2; grid-row: 1 / span 2; }
.it-embudos { display: flex; flex-wrap: wrap; gap: 8px; }
.it-embudo { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; }
.it-embudo:hover { border-color: var(--accent); color: var(--accent); }
body.en-inicio .sin-embudos-op { display: none !important; }

/* «Ver como»: barra fija arriba mientras se mira el dashboard como otra persona. */
.vercomo-barra { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 9px 16px; background: #5b3fd6; color: #fff; font-size: 14px; box-shadow: 0 6px 20px -10px rgb(0 0 0 / .5); }
.vercomo-barra em { opacity: .85; }
.vercomo-barra .btn { background: #fff; color: #3a2a8c; border-color: #fff; font-weight: 700; }

/* Bienvenida (primer acceso): elegir contraseña propia. Pantalla completa, cálida y clara. */
.bv { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; background: linear-gradient(145deg, #1b1438 0%, #2b1d4f 45%, #4a2a3c 100%); }
.bv-fondo { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.bv-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: bvFlota 14s ease-in-out infinite alternate; }
.bv-blob.b1 { width: 420px; height: 420px; background: #ff7a32; top: -120px; left: -100px; }
.bv-blob.b2 { width: 360px; height: 360px; background: #7b5cff; bottom: -120px; right: -80px; animation-delay: -5s; }
.bv-blob.b3 { width: 260px; height: 260px; background: #ff4f8b; top: 40%; left: 60%; opacity: .35; animation-delay: -9s; }
@keyframes bvFlota { to { transform: translate(40px, 30px) scale(1.08); } }
.bv-card { position: relative; width: min(460px, 100%); padding: 30px 30px 26px; border-radius: 26px; background: rgb(255 255 255 / .97); color: #241c33; box-shadow: 0 40px 90px -30px rgb(0 0 0 / .65); animation: bvEntra .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bvEntra { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.bv-pasos { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 22px; }
.bv-pasos li { flex: 1; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 12px; background: #f3eff8; color: #8a8199; font-size: 12.5px; font-weight: 600; }
.bv-pasos li b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ddd5ea; color: #fff; font-size: 12px; flex: none; }
.bv-pasos li.on { background: #fff1e8; color: #c2551b; }
.bv-pasos li.on b { background: #ff7a32; }
.bv-pasos li.hecho { background: #e9f7ef; color: #2e8a57; }
.bv-pasos li.hecho b { background: #34b06a; }
.bv-ico { display: inline-block; font-size: 44px; line-height: 1; animation: bvSaluda 1.6s ease-in-out .3s 2; transform-origin: 70% 80%; }
@keyframes bvSaluda { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 75% { transform: rotate(-8deg); } }
.bv-card h1 { margin: 10px 0 6px; font-size: 26px; letter-spacing: -.01em; }
.bv-sub { margin: 0 0 20px; color: #5d5470; font-size: 15px; line-height: 1.55; }
.bv-campo { display: block; margin: 0 0 8px; }
.bv-campo > span:first-child { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #3b3150; }
.bv-input { position: relative; display: block; }
.bv-input input { width: 100%; box-sizing: border-box; padding: 13px 46px 13px 14px; border-radius: 14px; border: 1.5px solid #e2dcea; background: #faf8fc; font: inherit; font-size: 16px; color: #241c33; transition: border-color .15s, box-shadow .15s; }
.bv-input input:focus { outline: none; border-color: #ff7a32; box-shadow: 0 0 0 4px rgb(255 122 50 / .15); background: #fff; }
.bv-ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 18px; cursor: pointer; padding: 6px; border-radius: 10px; }
.bv-ojo:hover { background: #f1ecf7; }
.bv-fuerza { height: 6px; border-radius: 999px; background: #eee9f4; overflow: hidden; margin: 4px 0 4px; }
.bv-fuerza i { display: block; height: 100%; width: 0; border-radius: 999px; background: #e0574f; transition: width .25s ease, background .25s; }
.bv-fuerza i[data-nivel="2"] { background: #f0a43a; }
.bv-fuerza i[data-nivel="3"] { background: #6bbf59; }
.bv-fuerza i[data-nivel="4"] { background: #2e9a62; }
.bv-fuerza-txt { margin: 0 0 6px; font-size: 12px; color: #8a8199; min-height: 1em; }
.bv-reglas { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bv-reglas li { font-size: 13px; color: #8a8199; transition: color .2s; }
.bv-reglas li::before { content: '○ '; }
.bv-reglas li.ok { color: #2e8a57; font-weight: 600; }
.bv-reglas li.ok::before { content: '✓ '; }
.bv-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fdecec; color: #b3261e; font-size: 14px; }
.bv-boton { width: 100%; padding: 14px 18px; border: 0; border-radius: 14px; background: linear-gradient(120deg, #ff7a32, #ff4f8b); color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 14px 30px -14px rgb(255 79 139 / .8); transition: transform .15s, opacity .2s, box-shadow .2s; }
.bv-boton:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgb(255 79 139 / .9); }
.bv-boton:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.bv-nota { margin: 14px 0 0; text-align: center; color: #8a8199; font-size: 12.5px; line-height: 1.5; }
.bv-ok { text-align: center; padding: 18px 0 8px; animation: bvEntra .4s ease both; }
.bv-ok-ico { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 6px; border-radius: 50%; background: linear-gradient(135deg, #34b06a, #2e9a62); color: #fff; font-size: 38px; font-weight: 800; animation: bvPop .5s cubic-bezier(.2, 1.4, .4, 1) both; box-shadow: 0 16px 34px -14px rgb(46 154 98 / .8); }
@keyframes bvPop { from { transform: scale(.3); opacity: 0; } }
@media (max-width: 420px) { .bv-card { padding: 24px 18px 20px; } .bv-pasos li span { display: none; } .bv-pasos li { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .bv-blob, .bv-ico, .bv-card, .bv-ok, .bv-ok-ico { animation: none; } }

/* 🏆 Qué funcionó (Análisis → Comparar) */
.qf-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 12px 0; }
.qf-campos textarea { width: 100%; min-height: 76px; }
.qf-no span { color: var(--danger, #c0392b); }
.qf-acc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Tablero de un embudo (Operativa): sus tareas se crean en Plan → Tareas del lanzamiento. */
.op-tablero.es-embudo .op-add-b, .op-tablero.es-embudo .op-col-mas { display: none; }

/* Plan → Imágenes con IA */
#imagenes-body { display: grid; gap: 18px; }
.ia-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 26px 28px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 65%); }
.ia-hero-eti { display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.ia-hero h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.01em; }
.ia-hero p { margin: 0 0 14px; color: var(--muted); line-height: 1.5; }
.ia-progreso { height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin-bottom: 6px; }
.ia-progreso span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #f5b942)); border-radius: inherit; transition: width .4s ease; }
.ia-flujo { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ia-flujo li:not(.ia-flecha) { display: grid; justify-items: center; gap: 2px; min-width: 88px; padding: 14px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); text-align: center; }
.ia-flujo li.dest { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ia-flujo b { font-size: 28px; line-height: 1; }
.ia-flujo span { font-weight: 700; font-size: 14px; }
.ia-flujo small { font-size: 11px; color: var(--muted); }
.ia-flecha { color: var(--muted); font-size: 20px; }
.ia-marca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.ia-marca-col { display: grid; gap: 12px; align-content: start; padding: 20px 24px; }
.ia-marca-col + .ia-marca-col { border-left: 1px solid var(--border); }
.ia-marca h4 { margin: 0; font-size: 15px; }
.ia-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.ia-sw { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 6px 12px 6px 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.ia-sw i { grid-row: span 2; width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgba(0,0,0,.12); }
.ia-sw b { font-size: 13px; }
.ia-sw small { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; text-transform: uppercase; }
.ia-fuentes { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; }
.ia-fuentes span { display: grid; }
.ia-fuentes small { font-size: 11px; color: var(--muted); }
.ia-fuentes b { font-size: 18px; }
.ia-logo-fila { display: flex; gap: 12px; align-items: center; }
.ia-logo-img { flex: none; width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 14px 14px; border: 1px dashed var(--border-strong); overflow: hidden; font-size: 11px; color: var(--muted); }
.ia-logo-img img { max-width: 88%; max-height: 88%; object-fit: contain; }
.ia-logo-fila input { flex: 1; min-width: 0; }
.ia-atajo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-radius: var(--radius); border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); font-size: 14px; }
.ia-paso { display: grid; gap: 18px; padding: 22px 24px 24px; }
.ia-paso-cab { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.ia-paso-cab > div { flex: 1 1 260px; }
.ia-paso-cab h3 { margin: 3px 0 4px; font-size: 18px; }
.ia-paso-cab p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.ia-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ia-hecho { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.ia-hecho:hover { border-color: var(--border-strong); color: var(--text); }
.ia-hecho.on { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.hecha { opacity: .72; }
.hecha .ia-lienzo { filter: saturate(.6); }
.ia-pieza { display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); transition: transform .15s, box-shadow .15s; }
.ia-pieza:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ia-grupo { display: flex; align-items: center; gap: 8px; margin: 4px 0 -6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ia-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
/* Vista previa cuadrada de la imagen */
.ia-lienzo { container-type: inline-size; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--ia-fondo, #14213d); color: var(--ia-texto, #f4efe3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ia-l-in { height: 100%; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; gap: 3cqw; padding: 6cqw 6cqw 5cqw; text-align: center; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ia-acento, #b3261e) 14%, transparent), transparent 65%); }
.ia-l-logo { display: flex; align-items: center; gap: 4cqw; font-size: 4.2cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.ia-l-logo::before, .ia-l-logo::after { content: ''; width: 9cqw; height: 1px; background: var(--ia-linea, currentColor); opacity: .6; }
.ia-l-logo img { max-height: 10cqw; max-width: 50cqw; object-fit: contain; }
.ia-l-centro { display: grid; align-content: center; justify-items: center; gap: 2cqw; }
.ia-l-tit { font-family: var(--ia-fuente, Georgia, 'Times New Roman', serif); font-weight: 700; font-size: 8.4cqw; line-height: 1.12; overflow-wrap: anywhere; }
.ia-lienzo mark { display: inline-block; padding: .5cqw 3cqw; margin: .6cqw 0; background: var(--ia-acento, #b3261e); color: #fff; border-radius: 1.4cqw; transform: rotate(-2deg); font-family: var(--ia-fuente, Georgia, serif); font-weight: 800; }
.ia-l-dest { font-size: 9cqw; line-height: 1.15; }
.ia-l-mock { display: flex; align-items: center; gap: 2cqw; padding: 1.5cqw 4cqw; border-radius: 99px; background: rgba(255,255,255,.1); font-size: 3.6cqw; }
.ia-l-mock span { font-size: 9cqw; line-height: 1; }
.ia-l-mock small { font-size: 3.6cqw; opacity: .8; max-width: 50cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-l-sub { font-size: 4.2cqw; opacity: .85; }
.ia-lienzo.grande { box-shadow: 0 18px 40px rgba(0,0,0,.25); }
@media (max-width: 760px) {
  .ia-hero, .ia-marca { grid-template-columns: 1fr; }
  .ia-hero { padding: 20px; }
  .ia-marca-col + .ia-marca-col { border-left: 0; border-top: 1px solid var(--border); }
  .ia-flujo li:not(.ia-flecha) { min-width: 0; flex: 1; padding: 12px 6px; }
  .ia-paso { padding: 18px 16px 20px; }
  .ia-galeria { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Operativa → «Añadir a mi calendario» y panel «📅 Mi calendario» */
.op-tab.op-tab-cal { margin-left: auto; }
.op-tab-cal.conectado .op-cal-ok { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; background: #1f9d55; color: #fff; font-size: 11px; }
.op-cal-b { border: 0; background: none; padding: 2px 4px; border-radius: 8px; font-size: 14px; line-height: 1; cursor: pointer; opacity: .45; transition: opacity .15s, background .15s; }
.op-card:hover .op-cal-b, .op-cal-b:focus-visible { opacity: 1; }
.op-cal-b:hover { background: var(--surface-2); }
.op-cal-v { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.op-cal-hora { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.op-cal-hora input { width: auto; padding: 5px 8px; }
.op-cal-cambiar { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--accent); text-decoration: underline; cursor: pointer; }
.op-cal-menu button { display: flex; align-items: center; gap: 10px; }
.op-cal-ico { font-size: 18px; }
.op-cal-nota { margin: 6px 8px 4px; font-size: 12px; color: var(--muted); }
.op-cal-panel { display: grid; gap: 18px; align-content: start; }
.op-cal-sec { display: grid; gap: 10px; }
.op-cal-sec h4 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.op-cal-sec h4 small { font-weight: 500; color: var(--muted); }
.op-cal-sec p { margin: 0; }
.op-cal-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 800; }
.op-cal-opc { display: grid; gap: 8px; }
.op-cal-opcion { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.op-cal-opcion:hover { border-color: var(--border-strong); }
.op-cal-opcion b { flex: 1; font-size: 14px; }
.op-cal-opcion small { color: #1f9d55; font-weight: 700; }
.op-cal-opcion.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.op-cal-enlace { display: flex; gap: 8px; }
.op-cal-enlace input { flex: 1; min-width: 0; font-size: 12px; }
.op-cal-pasos { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.op-cal-sec .btn { justify-self: start; }
.op-cal-aviso { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--muted); }

/* Dos formas de escribir a un lead: 💬 WhatsApp (gratis) y 📨 Plantilla (de pago, la envía GHL) */
.envio-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.btn .envio-precio { font-size: 10.5px; font-weight: 600; opacity: .85; margin-left: 2px; }
.btn.plantilla { background: var(--accent, #4f46e5); border-color: var(--accent, #4f46e5); color: #fff; padding: 6px 10px; }
.btn.plantilla.sent { background: transparent; color: var(--accent, #4f46e5); }
.btn.plantilla:disabled { background: var(--surface-2); border-color: var(--border); color: var(--text-2); }
.nota-envios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; margin: 0 0 12px; }
.nota-envios:empty { display: none; }
.envio-op { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 13px; line-height: 1.45; }
.envio-op strong { font-size: 13.5px; }
.envio-gratis { color: var(--wa); }
.envio-pago { color: var(--accent, #4f46e5); }
.pl-lista { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; }
.pl-op { display: flex; gap: 8px; align-items: center; padding: 4px 0; cursor: pointer; }
.pl-avisos { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.cx-pl { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.cx-pl code { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
@media (max-width: 640px) { .cx-pl { grid-template-columns: 1fr auto; } .cx-pl code { grid-column: 1 / -1; grid-row: 2; max-width: none; } }

/* Envío masivo de plantillas: casillas, barra, coste y gasto/retorno */
.sin-pl .sel-col { display: none; }
.sel-col { width: 34px; text-align: center; }
.sel-col input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }
table.leads tr.sel td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.f-conds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; }
.f-cond { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.f-cond span { opacity: .6; margin-left: 3px; }
.pl-masivo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin: 0 0 12px; border: 1px dashed var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); font-size: 13.5px; }
.pl-masivo .spacer { flex: 1; }
.pl-coste { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); margin: 4px 0 12px; }
.pl-coste span { font-size: 12.5px; color: var(--text-2); }
.pl-coste strong { font-size: 26px; line-height: 1.1; }
.pl-coste small { color: var(--text-2); }
.pl-progreso { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.pl-barra { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pl-barra i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.pl-gasto { margin: 0 0 12px; }
.pl-gasto-in { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pl-gasto-in.compacto { margin-top: 12px; }
.pl-g-t { font-weight: 700; margin-bottom: 8px; }
.pl-g-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pl-g-kpis > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.pl-g-kpis span { font-size: 12px; color: var(--text-2); }
.pl-g-kpis strong { font-size: 19px; }
.pl-g-kpis small { font-size: 11.5px; color: var(--text-2); }
.hoy-pl-masivo { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 4px 0 10px; }
.cx-pl { grid-template-columns: 1fr 92px auto auto; }
.cx-pl-precio { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.cx-pl-precio input { width: 60px; }
@media (max-width: 640px) { .cx-pl { grid-template-columns: 1fr 92px auto; } }

/* ---------- Cabecera del embudo: dónde estás y qué puedes hacer (P1) ---------- */
.ctx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 14px; margin: 0 0 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.ctx-izq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ctx-emb { font-weight: 700; font-size: 15px; white-space: nowrap; }
.ctx-sep { color: var(--text-2); }
.ctx-lanz select { font-weight: 700; font-size: 15px; padding: 6px 30px 6px 10px; border-radius: 10px; max-width: 320px; }
.ctx-fase { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.ctx-fase.tone-info { background: color-mix(in srgb, #3b82f6 14%, var(--surface)); color: color-mix(in srgb, #3b82f6 75%, var(--text)); }
.ctx-fase.tone-buy { background: color-mix(in srgb, var(--wa) 16%, var(--surface)); color: color-mix(in srgb, var(--wa) 80%, var(--text)); }
.ctx-acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctx-btn { padding: 7px 12px; font-size: 13.5px; }
.ctx-chip { border: 1px solid color-mix(in srgb, #d97706 55%, var(--border)); background: color-mix(in srgb, #f59e0b 14%, var(--surface)); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ctx-chip[aria-expanded="true"] { background: color-mix(in srgb, #f59e0b 26%, var(--surface)); }
.ctx-pend-panel { margin: -6px 0 14px; display: grid; gap: 8px; }
.ctx-pend-panel > .notice { margin: 0; }
.ctx-mas { position: relative; }
.ctx-mas > summary { list-style: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 6px 12px; }
.ctx-mas > summary::-webkit-details-marker { display: none; }
.ctx-mas-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 260px; padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .14); display: grid; gap: 2px; }
.ctx-mas-item { display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.ctx-mas-item:hover, .ctx-mas-item:focus-visible { background: var(--surface-2); }
.ctx-mas-item small { color: var(--text-2); font-size: 11.5px; }
.ctx-informes { display: grid; gap: 2px; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.ctx-informes[hidden] { display: none; }
.ctx-mas-t { font-size: 11.5px; font-weight: 700; color: var(--text-2); padding: 4px 10px; }
.ctx-informes [data-informe-status] { padding: 0 10px; }

/* ---------- Menos capas antes del contenido (P4) y detalles (P8) ---------- */
details.ayuda-vista { display: block; padding: 0; }
details.ayuda-vista > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-size: 14px; }
details.ayuda-vista > summary::-webkit-details-marker { display: none; }
details.ayuda-vista .ayuda-que { margin-left: auto; font-size: 12px; color: var(--text-2); font-weight: 600; }
details.ayuda-vista[open] .ayuda-que { visibility: hidden; }
details.ayuda-vista .ayuda-cuerpo { display: flex; align-items: center; gap: 14px; padding: 0 14px 12px; }
details.ayuda-vista .ayuda-cuerpo p { flex: 1; margin: 0; }
details.ayuda-vista.plegada:not([open]) { background: transparent; border-style: dashed; margin-bottom: 10px; }
details.ayuda-vista.plegada:not([open]) > summary { padding: 6px 12px; font-size: 13px; color: var(--text-2); }
details.ayuda-vista.plegada .ayuda-cuerpo .btn { display: none; }
.nota-envios { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.nota-envios .envio-op { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 7px 12px; font-size: 12.5px; cursor: help; }
.nota-envios .envio-op strong { font-size: 13px; }
/* Subpestañas en una sola fila que se desliza */
.subviews, .subviews:not(.msubs), .subviews.msubs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: thin; padding-top: 3px; padding-bottom: 6px; }
.subviews > * { flex: 0 0 auto; }
/* La barra de arriba ya solo tiene lo general: con texto visible */
@media (min-width: 900px) {
  .topbar .tb-auditor .tb-txt, .topbar .tb-ajustes .tb-txt, .topbar .tb-procesos .tb-txt { display: inline !important; position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .topbar .tb-auditor, .topbar .tb-ajustes, .topbar .tb-procesos { padding: 6px 10px 6px 6px; }
}
.brand #brand-nombre { white-space: nowrap; }
.ctx-lanz select { max-width: 260px; }

/* ---------- La Agencia en el lateral (P5) y menús ordenados (P6) ---------- */
#btn-agencia { display: none !important; } /* sigue existiendo (lo abren otros botones), pero ya no flota */
.sb-agencia .sb-ico { background: color-mix(in srgb, #6b4fc8 14%, var(--surface)); }
.tb-menu-t { display: block; padding: 6px 10px 4px; font-size: 11.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.tb-ajustes { --tb: #8a5a2b; }
.tb-procesos { --tb: #2f6fb0; }
.hoy-mensajes { margin: 10px 0 0; text-align: right; font-size: 13px; }
#mensajes-dialog .wa-plantillas > summary { display: none; }
#mensajes-dialog .wa-plantillas { border: 0; padding: 0; background: none; }
@media (max-width: 1520px) { .ctx-que { display: none; } }
.ctx-izq { flex: 1 1 auto; }

/* ---------- Móvil de verdad (P7): ☰ con embudos y herramientas, y pestañas fijas abajo ---------- */
.tb-menu-movil, .sb-herr, .nav-movil, .nav-mas { display: none; }
@media (max-width: 900px) {
  .tb-menu-movil { display: inline-grid; place-items: center; width: 40px; height: 40px; font-size: 20px; flex: none; }
  .topbar { flex-wrap: nowrap !important; gap: 8px; }
  .topbar .brand { min-width: 0; flex: 1 1 auto; }
  .brand #brand-nombre { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #role-badge { display: none; }
  .topbar-controls { flex-wrap: nowrap !important; width: auto !important; flex: none; }
  .topbar :is(.tb-auditor, .tb-operativa, .tb-procesos, .tb-menu-ajustes) { display: none !important; }
  .cliente-pick { display: none !important; }
  /* El menú lateral es un panel que sale con ☰ */
  .sidebar { position: fixed !important; inset: 0 auto 0 0; width: min(86vw, 330px); z-index: 80; flex-direction: column !important; gap: 4px !important; overflow-y: auto; overflow-x: hidden !important; padding: 18px 14px 28px !important; background: var(--bg); box-shadow: 0 0 40px rgba(0, 0, 0, .25); transform: translateX(-108%); transition: transform .22s ease; }
  body.menu-movil .sidebar { transform: none; }
  body.menu-movil { overflow: hidden; }
  .sidebar .sb-title { display: block !important; margin-top: 8px; }
  .sidebar .sb-item, .sidebar .sb-add { flex: none !important; min-width: 0 !important; width: 100%; }
  .sidebar .sb-row { width: 100%; }
  .sb-item.active::before { display: none; }
  .sb-fondo { position: fixed; inset: 0; z-index: 75; background: rgb(0 0 0 / .38); }
  .sb-fondo[hidden] { display: none; }
  .sb-herr { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
  /* Pestañas: abajo, fijas */
  .views { display: none !important; }
  .nav-movil:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08); }
  .nm-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; min-width: 0; }
  .nm-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nm-item svg { width: 20px; height: 20px; }
  .nm-item.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .nm-mas-ico { font-size: 20px; line-height: 20px; }
  .nav-mas:not([hidden]) { display: grid; gap: 2px; position: fixed; left: 10px; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 61; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); max-height: 60vh; overflow-y: auto; }
  .nm-mas-item { display: grid; grid-template-columns: 24px 1fr; align-items: center; column-gap: 10px; text-align: left; padding: 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
  .nm-mas-item small { grid-column: 2; font-weight: 400; font-size: 12px; color: var(--text-2); }
  .nm-mas-item.on { background: var(--surface-2); color: var(--accent); }
  .nm-mas-item svg { width: 20px; height: 20px; }
  body:not(.en-inicio) .container { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  /* Cabecera del embudo, compacta */
  .ctx-bar { padding: 8px 10px; gap: 8px; }
  .ctx-izq { flex: 1 1 100%; }
  .ctx-lanz { flex: 1 1 auto; min-width: 0; }
  .ctx-lanz select { max-width: none; width: 100%; }
  .ctx-acc { width: 100%; }
  .ctx-acc .ctx-btn { flex: 1 1 auto; justify-content: center; }
  .ctx-mas-panel { right: 0; left: auto; min-width: min(300px, 86vw); }
}
@media (max-width: 900px) {
  .sidebar .sb-items { flex-direction: column !important; overflow: visible; }
  .sidebar .sb-add { width: 100%; margin-top: 4px; }
  .sidebar .sb-add .sb-txt { display: flex !important; }
  .topbar .tb-menu:not([open]) .tb-menu-panel { display: none !important; } /* cerrado no ocupa (sin desplazamiento lateral) */
  .ctx-sep { display: none; }
}
/* Operativa: el título de la columna se cambia pulsándolo */
.op-col-ren { cursor: text; border-radius: 6px; padding: 1px 4px; margin: -1px -4px; }
.op-col-ren:hover, .op-col-ren:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 50%, transparent); }
.op-col-input { width: 100%; font: inherit; font-weight: 700; padding: 2px 6px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--text); }

/* ---------- Métricas → Vídeos y conversión (visual) ---------- */
.cv-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.cv-hero:empty { display: none; }
.cv-hero-card { --t: var(--accent); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 18px 18px 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--t) 25%, var(--border)); background: linear-gradient(140deg, color-mix(in srgb, var(--t) 12%, var(--surface)), var(--surface) 70%); }
.cv-hero-card::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: color-mix(in srgb, var(--t) 10%, transparent); }
.cv-t-buy { --t: var(--tone-buy); } .cv-t-vip { --t: var(--tone-vip); } .cv-t-live { --t: var(--tone-live); } .cv-t-accent { --t: var(--accent); }
.cv-hero-ico { font-size: 22px; margin-bottom: 4px; }
.cv-hero-et { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.cv-hero-card strong { font-size: 32px; line-height: 1.1; color: var(--t); }
.cv-hero-card small { font-size: 12.5px; color: var(--text-2); position: relative; z-index: 1; }

.cv-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-bottom: 8px; }
.cv-video { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); padding: 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgb(0 0 0 / 4%); transition: box-shadow .2s, transform .2s; }
.cv-video:hover { box-shadow: 0 10px 24px rgb(0 0 0 / 8%); transform: translateY(-2px); }
.cv-video header { display: flex; align-items: center; gap: 10px; }
.cv-video header div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cv-video header small { font-size: 12px; color: var(--muted); }
.cv-video-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); font-size: 18px; flex: none; }
.cv-h3 { font-size: 14px; margin: 22px 0 12px; }
.cv-h3 .muted { font-weight: 400; }
.cv-directo { background: var(--surface-2); border-radius: var(--radius); padding: 18px; margin-bottom: 10px; }
.cv-directo-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cv-pill { font-size: 12.5px; padding: 4px 12px; border-radius: 999px; background: var(--surface); }
.cv-pill small { color: var(--muted); }

.cv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cv-grid > .metric-card { margin-bottom: 0; }
/* Setter y «Qué predice la compra»: todo el ancho, con las filas repartidas en dos columnas */
.cv-grid > .cv-ancho { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .cv-lift #lift-table { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
  .cv-lift #lift-table > p, .cv-lift #lift-table > .cv-vacio { grid-column: 1 / -1; }
  .cv-setter #setter-table { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
  .cv-setter #setter-table > .cv-vacio { grid-column: 1 / -1; }
  .cv-setter .cv-h4 { margin-top: 0; }
}
.cv-barras { display: flex; flex-direction: column; gap: 10px; }
.cv-fila { --b: var(--accent); display: grid; grid-template-columns: minmax(120px, 1.1fr) 1.4fr auto; align-items: center; gap: 12px; }
.cv-et { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.cv-et small { font-size: 11.5px; color: var(--muted); }
.cv-barra { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cv-barra span { display: block; height: 100%; border-radius: 999px; background: var(--b); transition: width .6s ease; }
.cv-val { font-size: 16px; min-width: 56px; text-align: right; }
.cv-base { --b: var(--muted); }
.cv-fuerte { --b: var(--tone-buy); } .cv-flojo { --b: var(--border-strong); }
.cv-st-muy-caliente { --b: var(--st-muy-caliente); } .cv-st-caliente { --b: var(--st-caliente); } .cv-st-templado { --b: var(--st-templado); } .cv-st-frio { --b: var(--st-frio); }
.cv-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.cv-vs > div:not(.cv-vs-x) { border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.cv-vs-a { background: color-mix(in srgb, var(--wa) 12%, var(--surface)); }
.cv-vs-b { background: var(--surface-2); }
.cv-vs span { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.cv-vs strong { font-size: 28px; line-height: 1.1; }
.cv-vs small { font-size: 11.5px; color: var(--muted); }
.cv-vs-x { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cv-vs-x b { font-size: 20px; color: var(--tone-buy); }
.cv-vs-x small { font-size: 11px; color: var(--muted); }
.cv-h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); margin: 18px 0 10px; }
.cv-mas { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; }
.cv-mas > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--accent); }
.cv-mas[open] > summary { margin-bottom: 10px; }
.cv-trafico { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.cv-comp { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; }
.cv-comp h4 { margin: 0 0 8px; font-size: 14px; }
.cv-leyenda { display: flex; gap: 14px; font-size: 12px; margin-bottom: 10px; }
.cv-leyenda span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--b); }
.cv-leyenda small { color: var(--muted); }
.cv-l-a, .cv-a { --b: var(--accent); } .cv-l-b, .cv-b { --b: var(--tone-info, #3a7bd5); }
.cv-par { display: grid; grid-template-columns: minmax(110px, 1fr) 1.2fr auto auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; border-top: 1px solid var(--border); }
.cv-par:first-of-type { border-top: 0; }
.cv-par-barras { display: flex; flex-direction: column; gap: 3px; }
.cv-par-barras .cv-barra { height: 7px; background: var(--surface); }
.cv-par-n { font-size: 11.5px; text-align: right; line-height: 1.25; color: var(--text-2); }
.cv-dif { font-size: 11.5px; font-weight: 700; min-width: 38px; text-align: right; }
/* Anillo, curva de retención, embudo y detalles */
.cv-anillo { --p: 0; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-3, var(--border)) 0); }
.cv-anillo b { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 12px; }
.cv-curva { width: 100%; height: auto; display: block; overflow: visible; }
.cv-curva-eje { stroke: var(--border); stroke-dasharray: 3 4; }
.cv-curva-linea { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: cvTrazo 1.1s ease forwards; }
.cv-curva-punto { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.cv-curva-n { font-size: 12px; font-weight: 700; fill: var(--text); text-anchor: middle; }
.cv-curva-x { font-size: 10.5px; fill: var(--muted); text-anchor: middle; }
@keyframes cvTrazo { to { stroke-dashoffset: 0; } }
.cv-video-pie { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.cv-chip-ok { background: color-mix(in srgb, var(--tone-buy) 14%, var(--surface)); color: var(--tone-buy); }
.cv-chip-mal { background: color-mix(in srgb, var(--st-muy-caliente) 10%, var(--surface)); color: var(--st-muy-caliente); }
.cv-vivo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e0362c; margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 0 rgb(224 54 44 / 50%); animation: cvLatido 1.8s infinite; }
@keyframes cvLatido { 70% { box-shadow: 0 0 0 8px rgb(224 54 44 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(224 54 44 / 0%); } }
.cv-funnel { display: flex; flex-direction: column; align-items: stretch; }
.cv-funnel-fila { --b: var(--accent); display: grid; grid-template-columns: 1fr minmax(150px, 34%); gap: 14px; align-items: center; }
.cv-funnel-bar { justify-self: center; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px; border-radius: 12px; color: #fff; background: linear-gradient(90deg, rgb(255 255 255 / 14%), rgb(0 0 0 / 8%)), var(--b); box-shadow: 0 6px 16px color-mix(in srgb, var(--b) 25%, transparent); animation: cvAbre .8s ease both; white-space: nowrap; }
.cv-funnel-bar strong { font-size: 18px; }
.cv-funnel-et { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; }
.cv-funnel-et small { font-size: 12px; color: var(--muted); font-weight: 400; }
.cv-funnel-paso { display: grid; grid-template-columns: 1fr minmax(150px, 34%); gap: 14px; }
.cv-funnel-paso span { justify-self: center; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 3px 0; }
.cv-compra { --b: var(--tone-buy); }
.cv-vacio { display: flex; gap: 12px; align-items: center; padding: 18px; border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); font-size: 13px; }
.cv-vacio span { font-size: 26px; }
.cv-vacio p { margin: 0; }
@keyframes cvAbre { from { transform: scaleX(.3); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.cv-barra span { transform-origin: left; animation: cvCrece .9s ease both; }
@keyframes cvCrece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cv-card { border-radius: calc(var(--radius) + 2px); }
.cv-card > h2 .muted { display: block; width: 100%; font-size: 12.5px; margin-top: -6px; }
@media (prefers-reduced-motion: reduce) { .cv-curva-linea, .cv-funnel-bar, .cv-barra span, .cv-vivo { animation: none; stroke-dashoffset: 0; } }

@media (max-width: 600px) {
  .cv-funnel-fila, .cv-funnel-paso { grid-template-columns: 1fr; gap: 4px; }
  .cv-funnel-et { text-align: center; margin-bottom: 4px; }
  .cv-funnel-bar { min-height: 40px; }
  .cv-hero { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cv-hero-card { padding: 14px; }
  .cv-hero-card strong { font-size: 24px; }
  .cv-grid { grid-template-columns: 1fr; }
  .cv-fila { grid-template-columns: 1fr auto; }
  .cv-fila .cv-barra { grid-column: 1 / -1; grid-row: 2; }
  .cv-vs strong { font-size: 22px; }
  .cv-par { grid-template-columns: 1fr 1fr auto; }
  .cv-dif { display: none; }
}

/* LabIA: logo (SVG en línea; «Lab» con el color del texto) y su enlace del lateral */
.labia-logo { display: inline-block; height: 1.25em; width: auto; vertical-align: -0.28em; overflow: visible; }
.sb-labia { flex-direction: column; align-items: flex-start; gap: 2px; margin: 10px 0 18px; padding-top: 12px; padding-bottom: 12px; text-decoration: none; border: 1px solid var(--border); background: linear-gradient(135deg, color-mix(in srgb, #ff6a2a 8%, var(--surface)), color-mix(in srgb, #a855f7 6%, var(--surface))); }
.sb-labia:hover { border-color: color-mix(in srgb, #ff6a2a 45%, var(--border)); }
.sb-labia .labia-logo { height: 26px; }
.sb-labia-sub { font-size: 12px; color: var(--muted); padding-left: 2px; }
.cx-labia .labia-logo { height: 20px; margin-left: 6px; }
.rs-cab strong .labia-logo { height: 18px; margin-left: 6px; vertical-align: -4px; }
.rs-abrir { white-space: nowrap; }

/* Directo en «Consumo de vídeos»: duración media y % hasta el final, en grande */
.cv-video-vivo .cv-anillo { background: conic-gradient(#e0362c calc(var(--p) * 1%), var(--surface-3, var(--border)) 0); }
.cv-dir-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.cv-dir-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.cv-dir-stat span { font-size: 12px; color: var(--muted); font-weight: 600; }
.cv-dir-stat strong { font-size: 24px; line-height: 1.15; }
.cv-dir-stat small { font-size: 11.5px; color: var(--muted); }
.cv-directo-cab { gap: 8px; }
.cv-directo-cab strong { margin-right: auto; }

/* Vistas «con IA» (Emails, Páginas, Grupo de WhatsApp): por dónde empezar, primera vez y recomendaciones plegadas */
.st-empieza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border)); font-size: 14px; }
.st-primera, .st-antes { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.st-primera > summary, .st-antes > summary { cursor: pointer; padding: 10px 14px; font-size: 14px; list-style-position: inside; }
.st-primera-txt { padding: 0 16px 12px; font-size: 14px; line-height: 1.55; }
.st-primera-txt p { margin: 6px 0; }
.st-primera-txt ol { margin: 6px 0; padding-left: 20px; }
.st-antes-in { display: grid; gap: 8px; padding: 0 12px 12px; }
.pg-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-acciones .btn.primary { flex: 1 1 auto; }
.st-luego { margin: 4px 0 0; display: flex; gap: 8px; align-items: center; }
.em-panel .st-paso-cab { margin-bottom: 10px; }
.em-top { flex-direction: column; align-items: stretch; }

/* ---------- Prompt para ChatGPT (debajo del de Claude) ---------- */
.ia-gpt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; border: 1px dashed color-mix(in srgb, #10a37f 45%, var(--border)); background: color-mix(in srgb, #10a37f 6%, transparent); }
.ia-gpt-q { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.btn.btn-gpt { border-color: color-mix(in srgb, #10a37f 55%, var(--border)); color: #0b7a5f; background: var(--surface); }
.btn.btn-gpt:hover { background: color-mix(in srgb, #10a37f 12%, var(--surface)); }
:root[data-theme="dark"] .btn.btn-gpt { color: #5fd4b0; }
.an-gpt .an-mas-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-vert { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ia-acciones .btn-gpt { white-space: nowrap; }

/* ---------- Procesos del cliente: «Nuevo proceso» paso a paso ---------- */
.pr-asis { max-width: 760px; }
.pr-asis-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; counter-reset: none; }
.pr-asis-pasos li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--muted); position: relative; }
.pr-asis-pasos li::before { content: ''; position: absolute; top: 14px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--border); }
.pr-asis-pasos li:first-child::before { display: none; }
.pr-asis-pasos li.hecho::before, .pr-asis-pasos li.on::before { background: var(--accent); }
.pr-asis-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--surface-2); border: 2px solid var(--border); color: var(--muted); position: relative; z-index: 1; }
.pr-asis-pasos li.on .pr-asis-n { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
.pr-asis-pasos li.hecho .pr-asis-n { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: var(--accent); color: var(--accent); }
.pr-asis-pasos li.on .pr-asis-t { color: var(--text); font-weight: 700; }
.pr-asis-caja { padding: 22px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 18px 40px -30px rgba(0,0,0,.35); animation: prAsisEntra .25s ease both; }
@keyframes prAsisEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pr-asis-paso { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.pr-asis-tit { margin: 4px 0 4px; font-size: 22px; }
.pr-asis-campo { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.pr-asis-campo .field { display: flex; flex-direction: column; gap: 6px; }
.pr-asis-campo :is(input, textarea, select) { width: 100%; box-sizing: border-box; }
.pr-asis-campo .rep-ed { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-asis-campo .rep-ed select, .pr-asis-campo .rep-ed input { width: auto; }
.pr-asis-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pr-asis-persona { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.pr-asis-persona:hover { border-color: var(--accent); }
.pr-asis-persona.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.pr-asis-acc { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.pr-asis-resumen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pr-asis-resumen > li { display: grid; grid-template-columns: 28px 110px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.pr-asis-r-k { font-weight: 700; color: var(--muted); font-size: 13px; padding-top: 2px; }
.pr-asis-r-v ol { margin: 0; padding-left: 18px; }
@media (max-width: 640px) {
  .pr-asis-t { display: none; }
  .pr-asis-resumen > li { grid-template-columns: 28px minmax(0, 1fr); }
  .pr-asis-r-k { grid-column: 2; }
  .pr-asis-r-v { grid-column: 2; }
}

/* ---------- Logo AlquimIA (barra de arriba y login) ---------- */
.aq-logo { display: inline-flex; align-items: center; gap: 7px; flex: none; line-height: 1; }
.aq-flask { width: 30px; height: 30px; flex: none; }
.aq-txt { font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--text); }
.aq-txt b { font-weight: 800; background: linear-gradient(180deg, #ffab00, #ff4b00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sep { width: 1px; height: 22px; background: var(--border); flex: none; }
.brand-sep:has(+ #brand-nombre:empty) { display: none; }
.topbar .brand #brand-nombre { color: var(--muted); font-weight: 600; }
.login-card::before { display: none; }
.aq-logo-login { align-self: center; gap: 10px; margin-bottom: 6px; }
.aq-logo-login .aq-flask { width: 46px; height: 46px; }
.aq-logo-login .aq-txt { font-size: 34px; color: #fff; }
@media (max-width: 640px) {
  .topbar .aq-txt { font-size: 18px; }
  .topbar .aq-flask { width: 26px; height: 26px; }
  .topbar .brand-sep, .topbar .brand #brand-nombre { display: none; }
}
.cx-url-fila { display: flex; gap: 8px; align-items: center; }
.cx-url-fila input { flex: 1 1 auto; min-width: 0; }
.cx-url-fila .btn { flex: none; }

/* ---------- Onboarding: burbujas, primeros pasos, ayuda y vista sencilla (public/js/onboarding.js) ---------- */
.onb { position: fixed; inset: 0; z-index: 9000; }
.onb-velo { position: absolute; inset: 0; background: transparent; }
.onb-velo.lleno { background: rgb(15 12 30 / .55); backdrop-filter: blur(2px); animation: onbAparece .2s ease both; }
.onb-foco { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgb(15 12 30 / .58), 0 0 0 3px var(--accent), 0 0 24px 6px color-mix(in srgb, var(--accent) 45%, transparent); pointer-events: none; transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.onb-burbuja { position: fixed; width: min(360px, calc(100vw - 24px)); box-sizing: border-box; padding: 18px 18px 14px; border-radius: 18px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 24px 60px -12px rgb(0 0 0 / .45); animation: onbSube .28s cubic-bezier(.2,.8,.2,1) both; transition: top .25s ease, left .25s ease; }
.onb-burbuja.centro { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); padding: 26px 24px 18px; animation: onbAparece .25s ease both; }
.onb-burbuja.abajo-fijo { top: auto !important; left: 12px !important; right: 12px; bottom: 12px; width: auto; transform: none; }
.onb-burbuja.arriba-fijo { top: 12px !important; bottom: auto; left: 12px !important; right: 12px; width: auto; transform: none; }
.onb-burbuja.abajo-fijo .onb-flecha, .onb-burbuja.arriba-fijo .onb-flecha { display: none; }
.onb-flecha { position: absolute; top: -8px; width: 16px; height: 16px; margin-left: -8px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
.onb-burbuja.arriba .onb-flecha { top: auto; bottom: -8px; transform: rotate(225deg); }
.onb-cont { margin: 0 0 4px; font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.onb-burbuja h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.onb-burbuja.centro h3 { font-size: 24px; }
.onb-txt p { margin: 0 0 6px; line-height: 1.5; color: var(--text-2, var(--text)); }
.onb-acc { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; }
.onb-acc .onb-saltar { margin-right: auto; color: var(--muted); font-size: 13px; }
.onb-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.onb-rol { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.onb-rol:hover, .onb-rol:focus-visible { border-color: var(--accent); }
.onb-rol small { color: var(--muted); font-size: 12px; line-height: 1.35; }
@keyframes onbAparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes onbSube { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .onb-burbuja, .onb-velo.lleno, .onb-foco { animation: none; transition: none; } }

/* Primeros pasos: pastilla abajo a la izquierda que se abre en una lista */
.onb-pasos { position: fixed; left: 16px; bottom: 16px; z-index: 800; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
.onb-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 650; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.onb-pill b { color: var(--accent); }
.onb-pill-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border); }
.onb-pill-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ffb020); transition: width .4s ease; }
.onb-panel { display: none; width: min(340px, calc(100vw - 32px)); padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: onbSube .22s ease both; }
.onb-pasos.abierto .onb-panel { display: block; }
.onb-panel header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.onb-panel ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.onb-panel li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.onb-panel li.ok { opacity: .65; }
.onb-panel li.ok .onb-p-txt { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 40%, transparent); }
.onb-check { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.onb-panel li.ok .onb-check { background: #10b981; border-color: #10b981; }
.onb-p-txt { flex: 1 1 auto; display: flex; flex-direction: column; font-weight: 600; font-size: 14px; }
.onb-p-txt small { font-weight: 500; color: var(--muted); font-size: 12px; }
.onb-panel footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.onb-panel footer button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.onb-panel footer button:hover { color: var(--text); }
.onb-confeti { position: fixed; inset: 0; z-index: 9500; pointer-events: none; width: 100vw; height: 100vh; }
body.solo-operativa .onb-pasos, #portal:not([hidden]) ~ * .onb-pasos { left: 16px; }
@media (max-width: 760px) { .onb-pasos { left: 12px; bottom: 76px; } }

/* Menú del botón «Ayuda» */
.onb-menu { position: fixed; z-index: 8500; width: 300px; padding: 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: onbSube .18s ease both; }
.onb-menu-t { margin: 4px 8px 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.onb-menu button { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.onb-menu button:hover, .onb-menu button:focus-visible { background: var(--surface-2); }
.onb-menu button > span:first-child { font-size: 18px; line-height: 1.2; }
.onb-menu strong { display: block; font-size: 14px; }
.onb-menu small { color: var(--muted); font-size: 12px; }

/* Vista previa del superadmin («Ver como usuario nuevo») */
.onb-preview { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 8800; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: min(760px, calc(100vw - 24px)); padding: 8px 10px 8px 14px; border-radius: 14px; background: #4c1d95; color: #fff; font-size: 13px; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5); }
.onb-preview .btn { background: rgb(255 255 255 / .14); color: #fff; border-color: rgb(255 255 255 / .25); }
.onb-preview .btn.primary { background: #fff; color: #4c1d95; }

/* Vista sencilla: hasta terminar los primeros pasos, sin las pestañas avanzadas */
.vs-mas { display: none; font: inherit; font-size: 13px; font-weight: 650; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 999px; padding: 6px 12px; margin: auto 0 auto 6px; cursor: pointer; white-space: nowrap; flex: none; }
body.vista-sencilla .vs-mas { display: inline-flex; }
body.vista-sencilla :is([data-view-grupo="analisis"], .subview-tab[data-view="automatizaciones"], .subview-tab[data-view="objetivos"], .subview-tab[data-view="comparar"]) { display: none !important; }
.eq-onb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.eq-onb.ok { color: #059669; }
.eq-onb-barra { width: 46px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.eq-onb-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ffb020); }
.eq-onb.ok .eq-onb-barra i { background: #10b981; }
@media (max-width: 760px) {
  .onb-preview { bottom: 70px; width: calc(100vw - 24px); box-sizing: border-box; gap: 6px; padding: 6px 8px; font-size: 11.5px; border-radius: 12px; }
  .onb-preview > span { flex: 1 1 100%; text-align: center; }
  .onb-preview .btn { padding: 5px 9px; font-size: 12px; }
  .onb-pasos { bottom: 130px; }
}
body:has(.onb) .onb-preview { display: none; } /* durante una burbuja, el aviso de vista previa no tapa nada */
.equipo-table [data-eq="onb-reiniciar"] { display: block; margin-top: 3px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.equipo-table [data-eq="onb-reiniciar"]:hover { color: var(--accent); }

/* Asistente de procesos: categorías, paso a paso y ejemplos */
.pr-asis-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pr-asis-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.pr-asis-cat:hover { border-color: var(--accent); transform: translateY(-1px); }
.pr-asis-cat.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.pr-asis-cat-ico { font-size: 24px; line-height: 1; }
.pr-asis-cat strong { font-size: 14.5px; }
.pr-asis-cat small { color: var(--muted); font-size: 12px; }
.pr-asis-cat[data-asis-cat="nueva"] { border-style: dashed; }
.pr-asis-cat[data-asis-cat="nueva"] .pr-asis-cat-ico { color: var(--accent); font-weight: 700; }
.pr-asis-oblig { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.pr-asis-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-asis-lista li { display: flex; align-items: center; gap: 10px; }
.pr-asis-num { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: 13px; color: #fff; background: var(--accent); }
.pr-asis-lista input { flex: 1 1 auto; min-width: 0; }
.pr-asis-campo > .btn.small { align-self: flex-start; }
.pr-asis-ej { margin-top: 14px; border-radius: 12px; background: color-mix(in srgb, #ffb020 10%, var(--surface)); border: 1px solid color-mix(in srgb, #ffb020 35%, var(--border)); padding: 10px 14px; }
.pr-asis-ej summary { cursor: pointer; font-weight: 650; font-size: 13.5px; }
.pr-asis-ej p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2, var(--text)); }
@media (max-width: 640px) { .pr-asis-cats { grid-template-columns: 1fr 1fr; } }

/* ---------- LabIA (Hoy → LabIA): pipeline del setter IA ---------- */
.subview-labia { display: inline-flex; align-items: center; }
.sv-labia-logo .labia-logo { height: 20px; width: auto; display: block; }
.cl-labia-logo .labia-logo { height: 18px; width: auto; vertical-align: -4px; }
.cl-labia-chk { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; }
/* Cabecera con el logo de LabIA, como su imagen: fondo de noche azul-violeta y el logo grande con brillo. */
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; padding: 26px 28px !important; border-radius: 20px; color: #f4f2ff;
  background: radial-gradient(ellipse 60% 120% at 62% 30%, rgb(76 40 160 / .55), transparent 70%), radial-gradient(ellipse 50% 90% at 20% 90%, rgb(40 30 120 / .45), transparent 70%), #070a1f; box-shadow: 0 18px 40px -20px rgb(20 10 60 / .8); }
.lb-head-txt { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lb-head-txt p { margin: 0; color: #c9c6e6; max-width: 420px; }
.lb-logo .labia-logo { height: 54px; width: auto; display: block; color: #f4f2ff; filter: drop-shadow(0 0 14px rgb(255 120 40 / .35)); }
.lb-head .btn { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .22); }
.lb-promo { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.lb-promo-cab h3 { margin: 0 0 4px; font-size: 20px; }
.lb-promo-cab p { margin: 0; }
.lb-ventajas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.lb-ventajas li { display: flex; gap: 12px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, #ff7a2f 9%, var(--surface)), color-mix(in srgb, #a855f7 8%, var(--surface))); border: 1px solid var(--border); }
.lb-ventaja-ico { font-size: 26px; line-height: 1; }
.lb-ventajas strong { display: block; margin-bottom: 4px; }
.lb-ventajas p { margin: 0; font-size: 13.5px; color: var(--muted); }
.lb-promo-acc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 600px) { .lb-head { padding: 20px !important; } .lb-logo .labia-logo { height: 42px; } }
.lb-head-acc { display: flex; gap: 8px; }
.lb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; }
.lb-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--card, var(--bg)); }
.lb-kpi strong { font-size: 30px; line-height: 1.1; }
.lb-kpi span { font-weight: 650; }
.lb-kpi small { color: var(--muted); font-size: 12px; }
.lb-kpi-ico { font-size: 22px; }
.lb-kpi.ia { background: linear-gradient(135deg, color-mix(in srgb, #22d3ee 14%, transparent), color-mix(in srgb, #a855f7 14%, transparent)); }
.lb-kpi.equipo { background: color-mix(in srgb, #ff7a2f 14%, transparent); border-color: color-mix(in srgb, #ff7a2f 45%, transparent); }
.lb-pipe h3, .lb-tocan h3, .lb-setter h3 { margin: 0 0 12px; }
.lb-etapas { display: flex; flex-direction: column; gap: 8px; }
.lb-etapa { display: grid; grid-template-columns: 28px minmax(120px, 230px) 1fr 44px; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; }
.lb-etapa.t-ia { background: color-mix(in srgb, #22d3ee 8%, transparent); }
.lb-etapa.t-equipo { background: color-mix(in srgb, #ff7a2f 9%, transparent); }
.lb-et-ico { font-size: 18px; text-align: center; }
.lb-et-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-et-bar { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.lb-et-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffa53a, #ff4d1f); transition: width .5s ease; }
.lb-etapa.t-ia .lb-et-bar i { background: linear-gradient(90deg, #22d3ee, #a855f7); }
.lb-etapa strong { text-align: right; font-size: 18px; }
.lb-leads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-lead { display: grid; grid-template-columns: minmax(120px, 1.2fr) 1.5fr auto auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; }
.lb-lead-nom { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; text-align: left; color: inherit; cursor: pointer; }
.lb-lead-nom:hover { color: var(--accent); text-decoration: underline; }
.lb-lead-et { font-size: 13px; color: var(--muted); }
.lb-lead-et b { color: #c2410c; }
.lb-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.lb-mini div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lb-mini strong { font-size: 22px; }
.lb-mini span { font-size: 12px; color: var(--muted); }
.lb-vista > .card, #lb-cuerpo > .card { margin-bottom: 14px; padding: 18px 20px; }
@media (max-width: 700px) {
  .lb-etapa { grid-template-columns: 24px 1fr 60px 34px; }
  .lb-lead { grid-template-columns: 1fr auto; }
  .lb-lead-et, .lb-lead > .muted { grid-column: 1 / -1; }
}

/* ---------- Configuración · Resumen (categorías y «¡Enhorabuena!») ---------- */
#config-dialog.cfg-en-resumen .cfg-a-resumen, #config-dialog.cfg-en-resumen .cfg-main-head h3 { display: none; }
.cfg-nav-resumen { margin-bottom: 6px; }
.hub-hero { display: flex; gap: 20px; align-items: center; padding: 20px 22px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); border: 1px solid var(--border); }
.hub-hero.ok { background: linear-gradient(135deg, color-mix(in srgb, #10b981 14%, var(--surface)), var(--surface)); }
.hub-anillo { --tam: 92px; width: var(--tam); height: var(--tam); flex: none; }
.hub-anillo span { width: 72px; height: 72px; font-size: 20px; }
.hub-hero-txt h3 { margin: 0 0 4px; font-size: 20px; }
.hub-hero-txt p { margin: 0 0 10px; }
.hub-hero-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.hub-grupo { margin: 18px 0 8px; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hub-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.hub-cat { position: relative; display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; text-align: left; padding: 14px 14px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.hub-cat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.hub-cat-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-size: 26px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.hub-cat-txt { display: flex; flex-direction: column; min-width: 0; }
.hub-cat-txt strong { font-size: 15px; }
.hub-cat-txt small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.hub-cat-est { font-size: 12px; font-weight: 700; color: var(--muted); }
.hub-cat.falta .hub-cat-est { color: #dc2626; }
.hub-cat.warn .hub-cat-est { color: #b45309; }
.hub-cat.ok .hub-cat-est { color: #059669; }
.hub-cat.ok .hub-cat-ico { background: color-mix(in srgb, #10b981 14%, transparent); }
.hub-cat-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--border); }
.hub-cat-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ffb020); }
.hub-cat.ok .hub-cat-bar i { background: #10b981; }
.hub-fiesta { position: relative; text-align: center; padding: 28px 20px 22px; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, #10b981 16%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface))); border: 1px solid var(--border); }
.hub-fiesta canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hub-fiesta-ico { font-size: 54px; display: block; animation: hub-salto 1.2s ease 2; }
.hub-fiesta h3 { margin: 6px 0; font-size: 24px; }
.hub-fiesta p { margin: 0 auto 14px; max-width: 520px; }
@keyframes hub-salto { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-8deg); } }
.hub-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.hub-bloque { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.hub-bloque:first-child { grid-column: 1 / -1; }
.hub-bloque-cab { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.hub-bloque-cab .hub-cat-ico { width: 38px; height: 38px; font-size: 20px; border-radius: 12px; }
.hub-bloque-cab strong { flex: 1; font-size: 15px; }
.hub-ir { font-size: 12px; color: var(--accent); font-weight: 650; white-space: nowrap; }
.hub-bloque-cab:hover .hub-ir { text-decoration: underline; }
.hub-filas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hub-fila { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.hub-fila-l { font-weight: 650; font-size: 13px; }
.hub-fila-v { font-size: 13px; overflow-wrap: anywhere; }
.hub-copiar-todo { align-self: flex-start; }
.hub-pie { text-align: center; margin: 16px 0 4px; }
@media (max-width: 600px) {
  .hub-hero { flex-direction: column; text-align: center; }
  .hub-hero-acc { justify-content: center; }
  .hub-fila { grid-template-columns: 1fr auto; }
  .hub-fila-l { grid-column: 1 / -1; }
  .hub-bloques { grid-template-columns: 1fr; }
}
#config-dialog.cfg-en-resumen #cfg-listo { display: none; }

/* ---------- Botón «Configuración» de la cabecera del embudo (grande, con el % listo) ---------- */
.ctx-config { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: 14px; cursor: pointer; font: inherit; color: var(--text); text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); box-shadow: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.ctx-config:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface)); }
.ctx-config-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); font-size: 18px; }
.ctx-config-t { display: flex; flex-direction: column; line-height: 1.15; }
.ctx-config-t strong { font-size: 14px; font-weight: 750; }
.ctx-config-t small { font-size: 12px; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-config-anillo { --p: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--muted) 25%, transparent) 0); }
.ctx-config-anillo[hidden] { display: none; }
.ctx-config-anillo span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 10px; font-weight: 800; }
.ctx-config-anillo:not([hidden]) + .ctx-config-ico { display: none; }
.ctx-config.lista { border-color: color-mix(in srgb, #10b981 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, #10b981 12%, var(--surface)), var(--surface)); }
.ctx-config.lista .ctx-config-anillo { background: conic-gradient(#10b981 calc(var(--p) * 1%), color-mix(in srgb, var(--muted) 25%, transparent) 0); }
.ctx-config.lista .ctx-config-anillo span { color: #10b981; }
.ctx-config.incompleta { animation: ctx-config-pulso 2.4s ease-in-out 3; }
@keyframes ctx-config-pulso { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); } }
.ctx-config-aviso { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; cursor: pointer; font: inherit; color: inherit; text-align: left;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); }
.ctx-config-aviso[hidden] { display: none; }
.ctx-config-aviso:hover { border-color: var(--accent); }
.cca-ico { font-size: 24px; }
.cca-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cca-txt small { color: var(--muted); }
.cca-btn { flex: none; padding: 8px 14px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .ctx-config.incompleta { animation: none; } }
@media (max-width: 700px) {
  .ctx-config { width: 100%; justify-content: center; }
  .ctx-config-t small { max-width: none; }
  .ctx-config-aviso { flex-wrap: wrap; }
  .cca-btn { width: 100%; text-align: center; }
}

/* ---------- 📈 Inteligencia de negocio ---------- */
body:not(.en-negocio) #negocio { display: none; }
body.en-negocio #inicio, body.en-negocio #solo-op { display: none !important; }
.negocio { display: flex; flex-direction: column; gap: 16px; }
.ng-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ng-cab h2 { margin: 0 0 2px; font-size: 24px; }
.ng-cab p { margin: 0; }
.ng-periodo select { padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 650; }
.ng-cuerpo { display: flex; flex-direction: column; gap: 16px; }
.ng-vacio { text-align: center; padding: 40px 24px; }
.ng-vacio-ico { font-size: 52px; display: block; }
.ng-vacio h3 { margin: 10px 0 6px; font-size: 20px; }
.ng-vacio p { max-width: 560px; margin: 0 auto; }
.ng-calc { margin-top: 12px !important; font-weight: 650; }
.ng-progreso { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid var(--border); font-size: 13.5px; }
.ng-barra { display: block; height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.ng-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ffb020); transition: width .4s ease; }
.ng-aviso { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); border: 1px solid color-mix(in srgb, #d97706 40%, var(--border)); }
.ng-aviso.suave { background: color-mix(in srgb, #10b981 8%, var(--surface)); border-color: var(--border); }
.ng-pocos { font-size: 11.5px; font-weight: 650; color: #b45309; background: color-mix(in srgb, #f59e0b 16%, transparent); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.ng-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (min-width: 1500px) { .ng-kpis { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 700px) { .ng-kpis { grid-template-columns: repeat(2, 1fr); } }
.ng-kpi { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.ng-kpi-ico { font-size: 22px; }
.ng-kpi-t { font-size: 13px; font-weight: 650; color: var(--muted); }
.ng-kpi strong { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.ng-kpi small { font-size: 12px; color: var(--muted); }
.ng-delta.up { color: #059669; font-weight: 700; }
.ng-delta.down { color: #dc2626; font-weight: 700; }
.ng-delta span { font-weight: 450; color: var(--muted); }
.ng-bien { color: #059669 !important; font-weight: 650; }
.ng-mal { color: #dc2626 !important; font-weight: 650; }
.ng-sec h3 { margin: 0 0 12px; font-size: 17px; }
.ng-sec h4 { margin: 16px 0 8px; font-size: 14px; }
.ng-sec.card { padding: 18px 20px; }
.ng-recos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ng-reco { display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.ng-reco-ico { font-size: 26px; }
.ng-reco p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.ng-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.ng-grande { margin: 0 0 12px; }
.ng-grande strong { font-size: 26px; margin-right: 6px; }
.ng-barras { display: flex; flex-direction: column; gap: 6px; }
.ng-barra-f { display: grid; grid-template-columns: 110px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; }
.ng-barra-f b { text-align: right; }
.ng-momentos, .ng-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.ng-momentos div, .ng-mini div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ng-momentos strong, .ng-mini strong { font-size: 20px; }
.ng-momentos span, .ng-mini span { font-size: 12px; color: var(--muted); }
.ng-caminos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ng-caminos li span { font-weight: 650; }
.ng-caminos li b { margin-left: 8px; font-weight: 500; color: var(--muted); font-size: 13px; }
.ng-serie { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 18px; overflow-x: auto; }
.ng-mes { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.ng-roas { font-size: 10.5px; font-weight: 700; color: var(--muted); height: 16px; }
.ng-cols { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.ng-cols i { width: 40%; min-height: 2px; border-radius: 5px 5px 0 0; }
.ng-cols i.f, .ng-leyenda i.f { background: linear-gradient(180deg, #34c38f, #0f9f6e); }
.ng-cols i.v, .ng-leyenda i.v { background: color-mix(in srgb, var(--accent) 70%, #fff); }
.ng-mes-t { font-size: 10.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.ng-leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.ng-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.ng-tabla tbody tr { cursor: pointer; }
.sin-enlaces .ng-tabla tbody tr { cursor: default; }
.ng-tabla tr.mejor td { background: color-mix(in srgb, #10b981 7%, transparent); }
.ng-tabla tr.pierde td { background: color-mix(in srgb, #dc2626 6%, transparent); }
.ng-emb { display: block; }
.ng-tend.up { color: #059669; font-weight: 700; }
.ng-tend.down { color: #dc2626; font-weight: 700; }
@media (max-width: 600px) {
  .ng-kpi strong { font-size: 24px; }
  .ng-dos { grid-template-columns: 1fr; }
  .ng-barra-f { grid-template-columns: 90px 1fr 32px; }
}

/* ---------- Móvil: «Todo» con todas las secciones y sus páginas; subpestañas sin esconder ---------- */
@media (max-width: 900px) {
  .nav-mas:not([hidden]) { display: flex !important; flex-direction: column; gap: 6px; left: 8px !important; right: 8px !important; max-height: 72vh !important; padding: 12px !important; border-radius: 20px !important; }
  body.nm-abierto::after { content: ''; position: fixed; inset: 0; z-index: 59; background: rgb(0 0 0 / .32); }
  .nm-mas-t { margin: 2px 4px 4px; font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .nm-sec { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 14px; background: var(--surface-2, color-mix(in srgb, var(--text) 4%, transparent)); }
  .nm-sec-cab { display: grid; grid-template-columns: 24px 1fr; align-items: center; column-gap: 10px; text-align: left; padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
  .nm-sec-cab svg { width: 20px; height: 20px; }
  .nm-sec-cab small { grid-column: 2; font-weight: 400; font-size: 12px; color: var(--text-2); }
  .nm-sec-cab.on { color: var(--accent); }
  .nm-pags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 4px 40px; }
  .nm-pag { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
  .nm-pag.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
  .nm-pag .labia-logo { height: 16px; vertical-align: -3px; }
  .nm-ver-todas { align-self: center; margin-top: 4px; }
  /* Las subpestañas de cada sección, todas a la vista (en varias líneas si hace falta), no en una fila cortada. */
  .subviews, .subviews:not(.msubs), .subviews.msubs { flex-wrap: wrap !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; margin: 0 0 14px !important; padding: 0 !important; }
  .subviews .subview-tab { padding: 6px 10px; font-size: 12.5px; flex: none; }
}

/* Agencia → Clientes: una fila por cliente (color e iniciales, conexiones en iconos, LabIA, Entrar) y Ajustes plegados */
.cl-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.cl-cab h3 { margin: 0; font-size: 20px; }
.cl-cab p { margin: 2px 0 0; }
.cl-filas { display: flex; flex-direction: column; gap: 10px; }
.cl-fila { position: relative; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--cl) 9%, var(--surface)), var(--surface) 45%); overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cl-fila::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--cl); }
.cl-fila:hover { border-color: color-mix(in srgb, var(--cl) 45%, var(--border)); box-shadow: 0 6px 22px -12px color-mix(in srgb, var(--cl) 70%, transparent); }
.cl-fila.actual { border-color: color-mix(in srgb, var(--cl) 60%, var(--border)); }
.cl-main { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 20px; flex-wrap: wrap; }
.cl-av { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 16px; letter-spacing: .5px; color: #fff; background: linear-gradient(135deg, var(--cl), color-mix(in srgb, var(--cl) 60%, #000)); box-shadow: 0 4px 14px -6px var(--cl); }
.cl-quien { display: flex; flex-direction: column; gap: 3px; min-width: 150px; flex: 1 1 180px; }
.cl-quien strong { font-size: 16.5px; line-height: 1.2; }
.cl-quien small { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.cl-aqui { color: var(--tone-buy); font-weight: 700; }
.cl-tag { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-weight: 700; }
.cl-falta { color: var(--st-muy-caliente); font-weight: 700; }
.cl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
button.cl-chip:hover { border-color: var(--accent); color: var(--text); }
.cl-chip b { font-size: 12px; }
.cl-chip.e-ok { background: color-mix(in srgb, var(--tone-buy) 13%, var(--surface)); border-color: color-mix(in srgb, var(--tone-buy) 40%, var(--border)); color: var(--text); }
.cl-chip.e-ok b { color: var(--tone-buy); }
.cl-chip.e-elegido b { color: var(--accent); }
.cl-chip.e-ko { background: color-mix(in srgb, var(--st-muy-caliente) 12%, var(--surface)); border-color: color-mix(in srgb, var(--st-muy-caliente) 45%, var(--border)); }
.cl-chip.e-ko b { color: var(--st-muy-caliente); }
.cl-chip.e-nada { opacity: .55; }
.cl-chip.e-pend { border-style: dashed; }
.cl-sw { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; flex: none; transition: background .15s, border-color .15s; }
.cl-sw input { position: absolute; opacity: 0; pointer-events: none; }
.cl-sw-pista { width: 34px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 45%, transparent); position: relative; transition: background .15s; flex: none; }
.cl-sw-pista::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.cl-sw:has(input:checked) { border-color: color-mix(in srgb, #ff6a2a 50%, var(--border)); background: color-mix(in srgb, #ff6a2a 10%, var(--surface)); }
.cl-sw input:checked + .cl-sw-pista { background: linear-gradient(90deg, #ffa53a, #ff4d1f); }
.cl-sw input:checked + .cl-sw-pista::after { transform: translateX(14px); }
.cl-sw input:focus-visible + .cl-sw-pista { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-sw:not(:has(input:checked)) .cl-labia-logo { opacity: .5; filter: grayscale(.7); }
.cl-sw .labia-logo { height: 20px; width: auto; display: block; }
.cl-btns { display: flex; gap: 8px; margin-left: auto; flex: none; }
.cl-chev { display: inline-block; transition: transform .18s; }
.cl-fila.abierta .cl-chev { transform: rotate(180deg); }
.cl-ajustes { border-top: 1px dashed var(--border); padding: 14px 16px 16px 20px; background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); animation: cl-abre .18s ease-out; }
@keyframes cl-abre { from { opacity: 0; transform: translateY(-4px); } }
.cl-aj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; align-items: start; }
.cl-ajustes .cl-nombre { font-weight: 700; font-size: 14px; border: 1px solid var(--border); background: var(--surface); padding: 8px 10px; }
.cl-codigo { display: inline-block; padding: 8px 10px; }
.cl-aj-nota { grid-column: 1 / -1; margin: 0; }
.cl-aviso { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--st-muy-caliente) 10%, var(--surface)); font-size: 13px; }
.cl-ajustes .cl-acciones { margin-top: 14px; }
.cl-ajustes .btn.danger { background: transparent; color: var(--st-muy-caliente); border: 1px solid color-mix(in srgb, var(--st-muy-caliente) 45%, var(--border)); box-shadow: none; }
.cl-nuevo { margin-top: 18px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); animation: cl-abre .18s ease-out; }
.cl-nuevo-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cl-nuevo-cab h3 { margin: 0; }
@media (max-width: 700px) {
  .cl-main { gap: 10px 12px; padding: 12px 12px 12px 16px; }
  .cl-quien { flex-basis: calc(100% - 60px); }
  .cl-chips { order: 3; width: 100%; }
  .cl-sw { order: 4; }
  .cl-btns { order: 5; margin-left: auto; }
}

/* Inteligencia de negocio por producto: selector de arriba, tarjetas de producto y ficha de cada uno */
.ng-prods { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.ng-prod-tab { position: relative; display: flex; align-items: center; gap: 10px; flex: none; min-width: 150px; padding: 10px 14px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.ng-prod-tab:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ng-prod-tab.on { border-color: var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); box-shadow: 0 8px 22px -14px var(--accent); }
.ng-prod-tab > span:last-of-type { display: flex; flex-direction: column; min-width: 0; }
.ng-prod-tab strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.ng-prod-tab small { font-size: 12px; color: var(--muted); font-weight: 650; }
.ng-pt-ico { font-size: 22px; }
.ng-pt-barra { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--accent), #ffb020); border-radius: 0 3px 3px 0; }
.ng-sec h3 small { font-weight: 500; font-size: 13px; }
.ng-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ng-pcard { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; border: 1px solid var(--border); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.ng-pcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.ng-pcard-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ng-pcard-cab strong { font-size: 15.5px; }
.ng-pcard-recos { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; white-space: nowrap; }
.ng-pcard-cifra { display: flex; flex-direction: column; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ng-pcard-cifra .ng-delta { font-size: 12px; letter-spacing: 0; }
.ng-pcard-cuota { display: flex; flex-direction: column; gap: 4px; }
.ng-pcard-cuota small { font-size: 12px; color: var(--muted); }
.ng-pcard-datos { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.ng-pcard-datos b { color: var(--text); }
.ng-pcard-ver { font-size: 13px; font-weight: 700; color: var(--accent); }
.ng-spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.ng-spark i { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #34c38f, #0f9f6e); opacity: .85; }
.ng-phero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 24px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), radial-gradient(70% 120% at 100% 100%, color-mix(in srgb, #10b981 14%, transparent), transparent 60%), var(--surface); }
.ng-phero-t { display: flex; gap: 16px; align-items: center; min-width: 0; flex: 1 1 320px; }
.ng-phero-ico { font-size: 34px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); flex: none; }
.ng-phero h3 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.02em; }
.ng-phero p { margin: 0 0 6px; color: var(--muted); font-size: 13.5px; }
.ng-anillo { --p: 0; width: 120px; height: 120px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--muted) 22%, transparent) 0); }
.ng-anillo > div { width: 92px; height: 92px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ng-anillo strong { font-size: 22px; line-height: 1; }
.ng-anillo span { font-size: 10.5px; color: var(--muted); max-width: 70px; line-height: 1.2; margin-top: 3px; }
.ng-flujo { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(150px, auto) 28px minmax(0, 1fr); gap: 8px; align-items: stretch; margin-bottom: 14px; }
.ng-flujo-c { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ng-flujo-c h4 { margin: 0; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ng-flujo-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ng-flujo-l li { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 650; }
.ng-flujo-l li b { color: var(--accent); }
.ng-flujo-vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 14px; border-radius: 14px; border: 1px dashed var(--border); color: var(--muted); font-size: 12.5px; line-height: 1.4; min-height: 92px; }
.ng-flujo-vacio span { font-size: 20px; opacity: .8; }
.ng-flujo-f { align-self: center; justify-self: center; margin-top: 22px; color: var(--muted); font-size: 18px; }
.ng-flujo-yo { align-self: stretch; margin-top: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3px; padding: 14px 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), color-mix(in srgb, var(--accent) 6%, var(--surface))); }
.ng-flujo-yo span { font-size: 22px; }
.ng-flujo-yo strong { font-size: 15px; }
.ng-flujo-yo small { color: var(--muted); font-size: 12px; }
.ng-objetivo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, #10b981 35%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, #10b981 12%, var(--surface)), var(--surface)); }
.ng-objetivo-t { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; }
.ng-objetivo-t > span { font-size: 26px; }
.ng-objetivo-t small { display: block; font-size: 12px; color: var(--muted); }
.ng-objetivo-t strong { font-size: 17px; }
.ng-objetivo-d { display: flex; flex-direction: column; gap: 5px; flex: 2 1 260px; }
.ng-objetivo-d strong { font-size: 24px; line-height: 1; color: #10b981; }
.ng-objetivo-d > span:not(.ng-barra) { font-size: 12.5px; color: var(--muted); }
.ng-objetivo .ng-barra i { background: linear-gradient(90deg, #10b981, #34d399); }
@media (max-width: 700px) {
  .ng-flujo { grid-template-columns: 1fr; }
  .ng-flujo-f { margin: 0; transform: rotate(90deg); }
  .ng-flujo-yo { margin-top: 0; }
}
.ng-cols i.f.solo { width: 60%; }
@media (max-width: 700px) {
  .ng-anillo { width: 96px; height: 96px; } .ng-anillo > div { width: 74px; height: 74px; } .ng-anillo strong { font-size: 18px; }
  .ng-phero { padding: 16px; } .ng-phero h3 { font-size: 21px; }
}

/* Inteligencia de negocio: invitación a poner los productos, ofertas y «también compran» */
.ng-cta-cat { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 12px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ng-cta-cat > span { font-size: 28px; }
.ng-cta-cat > div { flex: 1 1 280px; }
.ng-cta-cat p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.sin-enlaces .ng-cta-cat { display: none; }
.ng-ofertas { display: flex; flex-direction: column; gap: 10px; }
.ng-oferta { display: grid; grid-template-columns: minmax(140px, 220px) 1fr minmax(120px, auto); gap: 12px; align-items: center; }
.ng-oferta-n { display: flex; flex-direction: column; }
.ng-oferta-n small, .ng-oferta-c small { color: var(--muted); font-size: 12px; }
.ng-oferta-c { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; }
.ng-oferta.normal .ng-barra i { background: linear-gradient(90deg, #10b981, #34d399); }
.ng-tambien { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; font-size: 13px; }
.ng-tambien span { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.ng-tambien span b { color: var(--accent); margin-left: 4px; }
@media (max-width: 700px) { .ng-oferta { grid-template-columns: 1fr; gap: 4px; } .ng-oferta-c { align-items: flex-start; } }

/* Mi negocio → 📦 Productos */
.pd-dlg { width: min(860px, 96vw); }
.pd-dlg .dialog-body { display: flex; flex-direction: column; gap: 16px; }
.pd-intro { padding: 18px 20px; border-radius: 18px; background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--surface-2); border: 1px solid var(--border); }
.pd-intro h3 { margin: 0 0 4px; font-size: 18px; }
.pd-intro p { margin: 0; color: var(--muted); font-size: 13.5px; }
.pd-pasos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pd-pasos li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.pd-pasos li b { position: absolute; top: 10px; right: 12px; font-size: 12px; color: var(--muted); }
.pd-pasos li span { font-size: 22px; }
.pd-pasos li strong { font-size: 14px; }
.pd-pasos li small { font-size: 12px; color: var(--muted); }
.pd-lista { display: flex; flex-direction: column; gap: 10px; }
.pd-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.pd-card.falta { border-color: color-mix(in srgb, #f59e0b 45%, var(--border)); }
.pd-card-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 24px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.pd-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pd-card-t strong { font-size: 16px; }
.pd-card-precio { font-weight: 750; font-size: 15px; }
.pd-card-precio small { font-weight: 500; color: var(--muted); font-size: 12px; }
.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-tag, .pd-chip { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 650; }
.pd-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; }
.pd-falta { color: #b45309; font-weight: 650; font-size: 12.5px; }
.pd-ok { color: #059669; font-weight: 650; font-size: 12.5px; }
.pd-aviso { color: #b45309; font-size: 12.5px; }
.pd-aviso-ok { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #10b981 12%, var(--surface)); border: 1px solid color-mix(in srgb, #10b981 35%, var(--border)); font-weight: 650; }
.pd-vacio { text-align: center; padding: 26px 16px; }
.pd-vacio > span { font-size: 44px; }
.pd-vacio h3 { margin: 6px 0 4px; }
.pd-nuevo { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; border-radius: 16px; border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); background: transparent; color: var(--accent); font: inherit; font-weight: 750; font-size: 15px; cursor: pointer; }
.pd-nuevo:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pd-nuevo span { font-size: 20px; }
.pd-ed-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-ed-cab h3 { margin: 0; font-size: 19px; }
.pd-paso { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 14px 16px 16px; }
.pd-paso.hecho { border-color: color-mix(in srgb, #10b981 30%, var(--border)); }
.pd-paso header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.pd-num { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 14px; background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); color: var(--accent); }
.pd-paso.hecho .pd-num { background: color-mix(in srgb, #10b981 20%, var(--surface-2)); color: #059669; }
.pd-paso h4 { margin: 3px 0 2px; font-size: 15px; }
.pd-paso h4 small { font-weight: 500; color: var(--muted); }
.pd-paso header p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.pd-paso-c { display: flex; flex-direction: column; gap: 10px; padding-left: 42px; }
.pd-in { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; }
.pd-in:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); border-color: var(--accent); }
.pd-tipos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pd-tipo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pd-tipo span { font-size: 20px; }
.pd-tipo strong { font-size: 13.5px; }
.pd-tipo small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.pd-tipo.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.pd-precio { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pd-eur { position: relative; display: inline-flex; align-items: center; }
.pd-eur .pd-in { width: 150px; padding-right: 30px; font-weight: 750; font-size: 17px; }
.pd-eur > span { position: absolute; right: 12px; color: var(--muted); font-weight: 700; }
.pd-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pd-seg button { padding: 9px 14px; border: 0; background: var(--surface-2); color: var(--text-2); font: inherit; font-weight: 650; cursor: pointer; }
.pd-seg button + button { border-left: 1px solid var(--border); }
.pd-seg button.on { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--text); }
.pd-nota { margin: 0; font-size: 13px; color: var(--muted); }
.pd-ofertas { display: flex; flex-direction: column; gap: 8px; }
.pd-oferta { display: grid; grid-template-columns: 30px 1.2fr auto 1.6fr auto; gap: 10px; align-items: end; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); border: 1px solid var(--border); }
.pd-oferta-ico { font-size: 20px; align-self: center; }
.pd-oferta label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-oferta label small { font-size: 11.5px; color: var(--muted); font-weight: 650; }
.pd-oferta .pd-eur .pd-in { width: 110px; font-size: 15px; }
.pd-embs { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-emb { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font: inherit; font-weight: 650; cursor: pointer; }
.pd-emb.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--text); }
.pd-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #dc2626 10%, var(--surface)); border: 1px solid color-mix(in srgb, #dc2626 35%, var(--border)); font-weight: 650; }
.pd-pie { position: sticky; bottom: -16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 0; background: var(--surface); border-top: 1px solid var(--border); }
.pd-pie .danger { color: var(--st-muy-caliente); }
@media (max-width: 700px) {
  .pd-pasos { grid-template-columns: 1fr; }
  .pd-tipos { grid-template-columns: 1fr 1fr; }
  .pd-paso-c { padding-left: 0; }
  .pd-oferta { grid-template-columns: 1fr; }
  .pd-oferta-ico { display: none; }
  .pd-card { flex-wrap: wrap; }
}

/* Configuración → Oferta: más visual (cifras arriba, añadir con un clic, agrupado por categorías y la oferta completa) */
.of-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 18px; align-items: center; padding: 18px 20px; margin-bottom: 10px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--surface); }
.of-hero h3 { margin: 0 0 6px; font-size: 20px; }
.of-hero p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.of-hero .of-resumen { display: flex; flex-direction: column; gap: 10px; padding: 0; background: none; border: 0; }
.of-res-cifras { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 8px; }
.of-res-cifras > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.of-res-cifras span { font-size: 18px; }
.of-res-cifras strong { font-size: 22px; line-height: 1.15; letter-spacing: -.02em; }
.of-res-cifras small { font-size: 11.5px; color: var(--muted); }
.of-res-cifras small b { color: var(--accent); }
.of-res-valor { background: color-mix(in srgb, #10b981 10%, var(--surface-2)) !important; border-color: color-mix(in srgb, #10b981 30%, var(--border)) !important; }
.of-res-barra { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--border); }
.of-res-barra i.e, .of-res-ley i.e { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.of-res-barra i.b, .of-res-ley i.b { background: linear-gradient(90deg, var(--accent), #ffb020); }
.of-res-ley { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.of-res-ley i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; }
.of-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.of-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.of-pick:hover { transform: translateY(-2px); border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.of-pick span { font-size: 24px; }
.of-pick strong { font-size: 13px; }
.of-pick strong::before { content: '＋ '; color: var(--accent); }
.of-pick small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.of-picker[data-of-picker="bonus"] { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.of-grupo { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: 13px; }
.of-grupo:first-child { margin-top: 0; }
.of-grupo span { font-size: 17px; }
.of-grupo small { color: var(--muted); }
.of-grupo b { margin-left: auto; font-size: 12px; padding: 1px 9px; border-radius: 99px; background: var(--surface-2); color: var(--text-2); }
.of-vacio { margin: 0; padding: 16px; text-align: center; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); font-size: 13px; }
.of-garantia { display: flex; flex-direction: column; gap: 10px; }
.of-gar-q { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.of-gar-ico { font-size: 20px; }
.of-gar-q strong { flex: 1 1 200px; font-size: 14px; }
.of-seg { display: inline-flex; gap: 6px; }
.of-seg button { padding: 8px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font: inherit; font-weight: 700; cursor: pointer; }
.of-seg button.on[data-v="si"] { background: color-mix(in srgb, #10b981 18%, var(--surface)); border-color: #10b981; color: var(--text); }
.of-seg button.on[data-v="no"] { background: color-mix(in srgb, var(--muted) 18%, var(--surface)); border-color: var(--muted); color: var(--text); }
.of-stack-sec { margin-top: 18px; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface)); }
.of-stack-sec h3 { margin: 0 0 12px; font-size: 17px; }
.of-stack { display: flex; flex-direction: column; gap: 10px; }
.of-st-g h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13.5px; }
.of-st-g h4 span { font-size: 18px; }
.of-st-g h4 small { font-weight: 500; color: var(--muted); }
.of-st-g ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.of-st-g li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.of-st-g li::before { content: '✓'; color: #10b981; font-weight: 800; margin-right: -2px; }
.of-st-g li > span { flex: 1; display: flex; flex-direction: column; }
.of-st-g li small { color: var(--muted); font-size: 12px; }
.of-st-g li b { white-space: nowrap; }
.of-st-g.bonus li { background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.of-st-sep { margin-top: 6px; font-weight: 800; font-size: 14px; }
.of-st-gar { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #10b981 10%, var(--surface)); border: 1px solid color-mix(in srgb, #10b981 30%, var(--border)); font-weight: 650; }
.of-st-total { display: grid; grid-template-columns: auto auto auto auto; justify-content: end; align-items: baseline; gap: 6px 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13px; color: var(--muted); }
.of-st-total strong { font-size: 20px; color: var(--text); }
.of-st-total.con-precio strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.of-st-total strong.precio { text-decoration: none; color: var(--accent); font-size: 24px; }
#config-dialog .of-fila { grid-template-columns: 42px 200px minmax(0, 1fr) 110px 36px; grid-template-areas: "ico tipo nom val del" "ico det det det ."; }
#config-dialog .of-fila-bonus { grid-template-areas: "ico tipo nom val del" ". det det det ." ". hasta obj obj ." ". ven ven ven ."; }
#config-dialog .of-fila > .of-ico { grid-area: ico; align-self: start; }
#config-dialog .of-fila > .of-tipo-box, #config-dialog .of-fila-bonus > .of-tipo { grid-area: tipo; }
#config-dialog .of-fila > .of-nombre { grid-area: nom; font-weight: 650; }
#config-dialog .of-fila > .of-valor { grid-area: val; }
#config-dialog .of-fila > .of-del { grid-area: del; }
#config-dialog .of-fila > .of-detalle { grid-area: det; }
#config-dialog .of-fila > .of-hasta { grid-area: hasta; }
#config-dialog .of-fila > .of-obj { grid-area: obj; }
#config-dialog .of-fila > .of-obj label { min-width: 0; flex: 1; }
#config-dialog .of-fila > .of-ventana { grid-area: ven; }
@media (max-width: 1000px) {
  #config-dialog .of-fila, #config-dialog .of-fila-bonus { grid-template-areas: none; }
  #config-dialog .of-fila > * { grid-area: auto; }
  .of-hero { grid-template-columns: 1fr; }
  #config-dialog .of-fila, #config-dialog .of-fila-bonus { grid-template-columns: 40px 1fr auto; }
  #config-dialog .of-fila > :not(.of-ico):not(.of-del) { grid-column: 2 / 3; }
  #config-dialog .of-fila .of-del { grid-column: 3; grid-row: 1; }
  #config-dialog .of-ventana, #config-dialog .of-obj { grid-column: 1 / -1; }
}

/* Configuración guiada: «Paso N de M» arriba de cada apartado, bloques numerados y anterior / siguiente abajo */
.cfg-guia { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), var(--surface); }
.cfg-guia-ico { width: 52px; height: 52px; flex: none; display: grid; place-items: center; font-size: 26px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.cfg-guia-t { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cfg-guia-t > small:first-child { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cfg-guia-t strong { font-size: 18px; line-height: 1.2; }
.cfg-guia-t > span:not(.cfg-guia-barra) { font-size: 13px; color: var(--muted); }
.cfg-guia-t > small:last-child { font-size: 12px; color: var(--muted); }
.cfg-guia-barra { display: block; height: 7px; margin-top: 4px; border-radius: 99px; background: var(--border); overflow: hidden; max-width: 360px; }
.cfg-guia-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #10b981); transition: width .4s ease; }
.cfg-guia-ahora { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 16px; text-align: left; max-width: 280px; animation: cfg-latido 2.6s ease-in-out 2; }
.cfg-guia-ahora small { font-size: 11px; font-weight: 700; opacity: .85; }
@keyframes cfg-latido { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); } }
.tab-panel.cfg-guiado { counter-reset: none; }
.cfg-paso { position: relative; transition: border-color .2s, box-shadow .2s; }
.cfg-paso-n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 800; background: var(--surface-2); color: var(--text-2); border: 2px solid var(--border); order: -1; }
.cfg-paso.paso-ok .cfg-paso-n { background: #10b981; border-color: #10b981; color: #fff; }
.cfg-paso.paso-actual { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.cfg-paso.paso-actual .cfg-paso-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.cfg-paso.paso-actual .cfg-sec-head h3::after { content: '👉 Estás aquí'; margin-left: 8px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); vertical-align: middle; }
.cfg-guia-pie { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.cfg-guia-pie > :first-child { justify-self: start; }
.cfg-guia-pie > :last-child { justify-self: end; }
.cfg-guia-pie-n { display: flex; gap: 5px; }
.cfg-guia-pie-n i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.cfg-guia-pie-n i.hecho { background: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.cfg-guia-pie-n i.aqui { width: 22px; border-radius: 99px; background: var(--accent); }
@media (max-width: 700px) {
  .cfg-guia-ahora { max-width: none; width: 100%; }
  .cfg-guia-pie { grid-template-columns: 1fr 1fr; }
  .cfg-guia-pie-n { display: none; }
}
/* En la configuración guiada: sin número duplicado, sin la lista repetida y «lo que falta» más tranquilo (en chips) */
.cfg-guiado .cfg-sec-num:not(.cfg-sec-ico) { display: none; }
.cfg-guiado > details.guia.cfg-ayuda { display: none; }
.cfg-guiado > .cfg-pend { padding: 12px 14px; border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--border)); border-left: 4px solid #f59e0b; background: color-mix(in srgb, #f59e0b 7%, var(--surface)); box-shadow: none; }
.cfg-guiado > .cfg-pend .cfg-pend-cab { margin-bottom: 8px; }
.cfg-guiado > .cfg-pend .cfg-pend-cab strong { color: var(--text); font-size: 14px; }
.cfg-guiado > .cfg-pend .cfg-pend-ico { font-size: 17px; }
.cfg-guiado > .cfg-pend .cfg-pend-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-guiado > .cfg-pend .cfg-pend-item { width: auto; padding: 5px 12px 5px 5px; border-radius: 99px; font-size: 13px; }
.cfg-guiado > .cfg-pend .cfg-pend-item::before { width: 20px; height: 20px; font-size: 11px; background: #f59e0b; }
.cfg-guiado > .cfg-pend .cfg-pend-ir { display: none; }

/* Inteligencia de negocio: «Mejora tus datos» y «Añadir producto» bien visible */
.ng-cal-cab { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ng-cal-cab h3 { margin: 0 0 4px; }
.ng-cal-cab p { margin: 0; font-size: 13.5px; }
.ng-cal-anillo { width: 92px; height: 92px; --c: #10b981; background: conic-gradient(#10b981 calc(var(--p) * 1%), color-mix(in srgb, var(--muted) 22%, transparent) 0); }
.ng-cal-anillo > div { width: 70px; height: 70px; }
.ng-cal-anillo strong { font-size: 19px; }
.ng-cal-lista { display: flex; flex-direction: column; gap: 8px; }
.ng-cal-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.ng-cal-ico { width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.ng-cal-item strong { font-size: 14px; }
.ng-cal-item p { margin: 2px 0; font-size: 12.5px; color: var(--muted); }
.ng-cal-item small { font-size: 12px; color: #059669; font-weight: 650; }
.ng-cal-item > small.muted { color: var(--muted); font-weight: 500; max-width: 180px; text-align: right; }
.ng-cal-ok { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.ng-cal-ok span { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, #10b981 12%, var(--surface)); color: #059669; font-weight: 650; }
.ng-prod-nuevo { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
.ng-prod-nuevo .ng-pt-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); font-size: 18px; font-weight: 800; }
.ng-prod-nuevo strong { color: var(--accent); }
.ng-pcard-nuevo { border: 2px dashed color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); align-items: flex-start; justify-content: center; }
.ng-pcard-nuevo:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.ng-pcard-mas { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; font-size: 28px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ffb020)); box-shadow: 0 8px 20px -10px var(--accent); }
.ng-pcard-nuevo strong { font-size: 16px; }
.ng-pcard-nuevo small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 700px) { .ng-cal-item { grid-template-columns: 36px 1fr; } .ng-cal-item > :last-child { grid-column: 1 / -1; justify-self: start; } }
/* Ciclo de compra y segunda compra con cifras grandes, % por tramo y «Cómo acortarlo» */
.ng-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ng-cifra { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.ng-cifra strong { font-size: 22px; letter-spacing: -.02em; line-height: 1.15; }
.ng-cifra span { font-size: 12px; color: var(--muted); }
.ng-cifra.destaca { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ng-cifra.destaca strong { font-size: 26px; color: var(--accent); }
.ng-barra-f b small { font-weight: 500; color: var(--muted); font-size: 11px; margin-left: 4px; }
.ng-ciclo .ng-barra-f, .ng-segunda .ng-barra-f { grid-template-columns: 110px 1fr 70px; }
.ng-sugs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ng-sug { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, #10b981 30%, var(--border)); background: color-mix(in srgb, #10b981 7%, var(--surface)); }
.ng-sug > span { font-size: 22px; }
.ng-sug strong { font-size: 13.5px; }
.ng-sug p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* ---------- Otra persona editando la configuración (Tomar el control) ---------- */
.tc-dlg { width: min(440px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.tc-body { padding: 28px 26px 22px; text-align: center; }
.tc-avatar { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 0 6px var(--accent-soft); animation: tc-pulso 2.4s ease-in-out infinite; }
.tc-dlg.tc-fuera .tc-avatar { background: var(--surface-3); color: var(--text); animation: none; }
@keyframes tc-pulso { 50% { box-shadow: 0 0 0 12px var(--accent-soft); } }
.tc-body h2 { margin: 0 0 8px; font-size: 1.2rem; }
.tc-texto { margin: 0 0 6px; color: var(--text-2); line-height: 1.5; }
.tc-nota { margin: 0 0 18px; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.tc-nota:empty { display: none; }
.tc-acciones { display: flex; flex-direction: column; gap: 8px; }
.tc-acciones .btn { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .tc-avatar { animation: none; } }
@media (max-width: 640px) {
  .dialog.tc-dlg { width: calc(100vw - 32px); max-width: 440px; height: fit-content; max-height: calc(100dvh - 32px); margin: auto; border: 1px solid var(--border); border-radius: 18px; }
}

/* ---------- Configuración: una sola tarjeta grande con el % (sin el botón repetido arriba) ---------- */
.ctx-config.en-aviso { display: none !important; }
.ctx-config-aviso { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 18px 22px; margin: 0 0 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 60%); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--accent) 60%, transparent); transition: transform .15s ease, box-shadow .15s ease; }
.ctx-config-aviso:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--accent) 70%, transparent); }
.cca-anillo { --p: 0; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--muted) 22%, transparent) 0); }
.cca-anillo > span { display: flex; align-items: baseline; justify-content: center; gap: 1px; line-height: 62px; width: 62px; height: 62px; border-radius: 50%; background: var(--surface); font-size: 13px; font-weight: 700; color: var(--accent); }
.cca-anillo b { font-size: 22px; font-weight: 850; line-height: 1; }
.ctx-config-aviso .cca-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cca-eyebrow { font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-config-aviso .cca-txt strong { font-size: 17px; line-height: 1.25; }
.cca-barra { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.cca-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.ctx-config-aviso .cca-txt small { color: var(--text-2); font-size: 13px; line-height: 1.4; }
.ctx-config-aviso .cca-btn { padding: 12px 18px; border-radius: 12px; font-size: 14.5px; box-shadow: 0 8px 18px -10px var(--accent); white-space: nowrap; }
@media (max-width: 700px) {
  .ctx-config-aviso { grid-template-columns: auto 1fr; gap: 12px 14px; padding: 16px; }
  .cca-anillo { width: 64px; height: 64px; }
  .cca-anillo > span { width: 52px; height: 52px; line-height: 52px; }
  .cca-anillo b { font-size: 19px; }
  .ctx-config-aviso .cca-txt strong { font-size: 15.5px; }
  .ctx-config-aviso .cca-btn { grid-column: 1 / -1; width: 100%; text-align: center; }
}

/* ---------- Móvil: barra fija arriba con lo importante de cada pestaña ---------- */
@media (max-width: 900px) {
  /* La cabecera del embudo: una fila compacta que se queda arriba (lanzamiento, pendientes, ⚙️, actualizar, ⋯) */
  #ctx-bar { position: sticky; top: var(--fija-1, 0px); z-index: 30; flex-wrap: nowrap; padding: 6px 6px 6px 10px; gap: 6px; box-shadow: 0 8px 20px -14px rgb(0 0 0 / .35); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  #ctx-bar .ctx-izq { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
  #ctx-bar .ctx-lanz select { font-size: 14.5px; padding: 7px 28px 7px 10px; }
  body:not(.embudo-vsl):not(.embudo-meteo):not(.embudo-directa) #ctx-emb { display: none; }
  #ctx-bar .ctx-emb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 15px; }
  #ctx-bar .ctx-fase { display: none; }
  #ctx-bar .ctx-acc { width: auto; flex: none; flex-wrap: nowrap; gap: 4px; }
  #ctx-bar .ctx-acc .ctx-btn { flex: none; padding: 7px 10px; }
  #btn-reload { font-size: 0; }
  #btn-reload > span { font-size: 17px; }
  #ctx-pend { padding: 5px 9px; }
  #ctx-pend .cp-txt { display: none; }
  #ctx-bar .ctx-config:not(.en-aviso) { width: auto; padding: 3px; border-radius: 12px; }
  #ctx-bar .ctx-config .ctx-config-t { display: none; }
  #ctx-bar .ctx-config .ctx-config-ico { width: 32px; height: 32px; }
  #ctx-bar .ctx-config .ctx-config-anillo { width: 34px; height: 34px; }
  #ctx-bar .ctx-config .ctx-config-anillo span { width: 27px; height: 27px; font-size: 9px; }
  .ctx-pend-panel { position: relative; z-index: 29; }
  /* El control clave de cada pestaña, debajo de la cabecera */
  #vsl-rango, #dir-rango, .pb-rango, #view-leads .filters, .vl-filters, .ll-toolbar, .tareas-toolbar, .cal-toolbar, .hoy-motivos {
    position: sticky; top: var(--fija-2, 0px); z-index: 25; }
  #vsl-rango, #dir-rango, .pb-rango { flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; padding: 8px 10px; border-radius: 14px; box-shadow: 0 8px 20px -14px rgb(0 0 0 / .35); scrollbar-width: none; }
  :is(#vsl-rango, #dir-rango, .pb-rango) .field.inline { width: auto !important; flex: none; }
  :is(#vsl-rango, #dir-rango, .pb-rango) .field.inline > span { display: none; }
  :is(#vsl-rango, #dir-rango, .pb-rango) .vr-texto { flex: none; white-space: nowrap; font-size: 12.5px; }
  :is(#vsl-rango, #dir-rango, .pb-rango) .btn { flex: none; white-space: nowrap; padding: 7px 10px; }
  #view-leads .filters, .vl-filters { flex-wrap: nowrap !important; overflow-x: auto; gap: 6px; margin-left: -4px; margin-right: -4px; padding: 8px 4px; background: var(--bg); box-shadow: 0 10px 14px -14px rgb(0 0 0 / .4); scrollbar-width: none; }
  :is(#view-leads .filters, .vl-filters) > * { flex: none; }
  :is(#view-leads .filters, .vl-filters) input[type="search"] { width: 64vw; max-width: 340px; }
  :is(#view-leads .filters, .vl-filters) select { max-width: 60vw; }
  .ll-toolbar, .tareas-toolbar, .cal-toolbar { background: var(--bg); padding-top: 8px; padding-bottom: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ll-toolbar > *, .tareas-toolbar > * { flex: none; }
  .ll-toolbar #ll-fuente { display: none; }
  .hoy-motivos { flex-wrap: nowrap !important; overflow-x: auto; margin-left: -14px; margin-right: -14px; padding: 8px 14px; background: var(--surface); box-shadow: 0 10px 14px -14px rgb(0 0 0 / .4); scrollbar-width: none; }
  .hoy-motivos > * { flex: none; }
  :is(#vsl-rango, #dir-rango, .pb-rango, #view-leads .filters, .vl-filters, .ll-toolbar, .tareas-toolbar, .cal-toolbar, .hoy-motivos)::-webkit-scrollbar { display: none; }
  /* Inicio e Inteligencia de negocio: el periodo, fijo arriba */
  .inicio-cab, .ng-cab { display: contents; }
  .inicio-cab-acc, .ng-periodo { position: sticky; top: var(--fija-1, 0px); z-index: 25; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 14px -14px rgb(0 0 0 / .4); scrollbar-width: none; }
  .inicio-cab-acc .field.inline { width: auto !important; flex: none; }
  .inicio-cab-acc .field.inline > span { display: none; }
  .inicio-cab-acc .btn { flex: none; white-space: nowrap; }
  .ng-periodo select { flex: 1; }

  /* ---------- Las subpestañas, abajo: las principales + «☰ Todas» ---------- */
  .sub-oculta { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  .sub-movil:not([hidden]) { display: flex; gap: 4px; position: fixed; left: 8px; right: 8px; bottom: calc(var(--nm-h, 64px) + 6px); z-index: 58; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: 0 10px 28px -12px rgb(0 0 0 / .35); }
  .sm-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; border: 0; border-radius: 12px; background: none; color: var(--text-2); font: inherit; font-size: 11.5px; font-weight: 650; line-height: 1.2; cursor: pointer; }
  .sm-item span { max-width: 100%; }
  .sm-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sm-item svg { width: 18px; height: 18px; flex: none; }
  .sm-item.on { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 6px 14px -8px var(--accent); }
  .sm-item.on svg { color: currentColor; }
  .sm-item .labia-logo, .sm-op .labia-logo { height: 15px; width: auto; vertical-align: -3px; }
  .sm-todas { flex: 0 0 64px; position: relative; color: var(--text); background: var(--surface-2); }
  .sm-todas b { position: absolute; top: 2px; right: 6px; font-size: 10px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); }
  .sm-ham { font-size: 17px; line-height: 18px; }
  .sub-mas:not([hidden]) { display: flex; flex-direction: column; gap: 8px; position: fixed; left: 8px; right: 8px; bottom: calc(var(--nm-h, 64px) + var(--sm-h, 52px) + 12px); z-index: 61; padding: 12px; max-height: 60vh; overflow-y: auto; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 16px 44px rgb(0 0 0 / .25); }
  body.sm-abierto::after { content: ''; position: fixed; inset: 0; z-index: 57; background: rgb(0 0 0 / .32); }
  .sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .sm-op { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 650; text-align: left; cursor: pointer; }
  .sm-op span { line-height: 1.25; }
  .sm-op svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
  .sm-op.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
  body.con-sub-movil:not(.en-inicio) .container { padding-bottom: calc(86px + var(--sm-h, 52px) + 10px + env(safe-area-inset-bottom)); }
}

/* ---------- Móvil: la cabecera de AlquimIA, fija arriba en todas las pantallas; la barra de abajo, siempre ---------- */
@media (max-width: 900px) {
  .topbar { position: sticky !important; top: 0; z-index: 40; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  body.con-nav-movil .container { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  body.con-nav-movil.con-sub-movil .container { padding-bottom: calc(86px + var(--sm-h, 52px) + 10px + env(safe-area-inset-bottom)); }
}

/* ---------- Cabecera de AlquimIA: en el diseño clásico, siempre «espacial» (oscura, con estrellas, como LabIA) ---------- */
:root:not([data-estilo="espacial"]) .topbar {
  --bg: #05060f; --surface: #0f1130; --surface-2: #161a40; --surface-3: #1e2352;
  --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .2);
  --text: #eef0ff; --text-2: #c7cbe8; --muted: #a3a8c9;
  --accent: #ff7a18; --accent-2: #ff9a3c; --accent-ink: #ffffff; --accent-soft: rgba(255, 122, 24, .14);
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(1px 1px at 22% 24%, rgb(255 255 255 / .9) 50%, transparent 52%),
    radial-gradient(1px 1px at 68% 70%, rgb(255 255 255 / .75) 50%, transparent 52%),
    radial-gradient(1px 1px at 47% 82%, rgb(199 210 254 / .6) 50%, transparent 52%),
    radial-gradient(1px 1px at 86% 18%, rgb(224 231 255 / .7) 50%, transparent 52%),
    radial-gradient(1px 1px at 9% 78%, rgb(255 255 255 / .5) 50%, transparent 52%),
    radial-gradient(420px 150px at 0% 0%, #142a4a 0%, transparent 70%),
    linear-gradient(90deg, #080b18 0%, #070914 55%, #0a0d1d 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
:root:not([data-estilo="espacial"]) .topbar .tb-menu-panel { background: #17142c; border-color: rgb(255 255 255 / .12); box-shadow: 0 24px 60px -12px rgb(0 0 0 / .8); }
:root:not([data-estilo="espacial"]) .topbar .badge { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); color: var(--text-2); }

/* ---------- LabIA en el menú lateral: tarjeta con fondo espacial (como su cabecera) ---------- */
.sb-item.sb-labia {
  color: #eef0ff; border: 1px solid rgb(255 255 255 / .08); border-radius: 14px; box-shadow: 0 10px 24px -14px rgb(8 11 24 / .8);
  background:
    radial-gradient(1px 1px at 18% 30%, rgb(255 255 255 / .9) 50%, transparent 52%),
    radial-gradient(1px 1px at 72% 22%, rgb(224 231 255 / .75) 50%, transparent 52%),
    radial-gradient(1px 1px at 58% 78%, rgb(255 255 255 / .6) 50%, transparent 52%),
    radial-gradient(1px 1px at 90% 64%, rgb(199 210 254 / .7) 50%, transparent 52%),
    radial-gradient(1px 1px at 35% 88%, rgb(255 255 255 / .5) 50%, transparent 52%),
    radial-gradient(160px 90px at 0% 0%, #163055 0%, transparent 75%),
    linear-gradient(135deg, #0a0e1f 0%, #070914 60%, #120b2a 100%);
}
.sb-item.sb-labia:hover { border-color: rgb(255 154 60 / .55); box-shadow: 0 12px 28px -12px rgb(255 122 24 / .35); }
.sb-item.sb-labia .sb-labia-sub { color: #a3a8c9; }

/* ---------- Mi cuenta → Cambiar contraseña ---------- */
.cuenta-clave { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); scroll-margin-top: 12px; }
.cuenta-clave .cfg-h3 { margin-top: 0; }
.cuenta-clave.resaltar { animation: cuenta-clave-luz 1.6s ease; }
@keyframes cuenta-clave-luz { 0%, 60% { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } }
.cuenta-st-ok { color: #0f9f6e; font-weight: 650; }
.cuenta-st-mal { color: var(--error); font-weight: 600; }