/* ══════════════════════════════════════════════════════════════════════════════
   Sistema de diseño del panel comercial (ronda ux-r1, 18/10/2026)
   Va ÚLTIMO, después de style.css y precall.css. Reemplaza a tema.css.
   Espec: jueces/ux-r1/SISTEMA-DE-DISENO.md
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px; --fs-hero: 40px;

  --bg-sidebar: #0a0a0b;
  --bg:         #0e0f11;
  --surface:    #16171a;
  --surface-2:  #1c1d21;
  --surface-3:  #24262b;

  --line:   rgba(255, 255, 255, .06);
  --line-2: rgba(255, 255, 255, .10);
  --line-3: rgba(255, 255, 255, .16);
  --shine:  inset 0 1px 0 rgba(255, 255, 255, .035);

  --tx-1: #edebe7;
  --tx-2: #a9aaae;
  --tx-3: #858891;
  --tx-inv: #06210f;

  --brand:       #7ee2b3;
  --brand-hover: #9aebc6;
  --brand-press: #66d4a1;
  --brand-soft:  rgba(126, 226, 179, .10);
  --brand-line:  rgba(126, 226, 179, .28);
  --brand-glow:  0 0 0 1px rgba(126,226,179,.35), 0 0 24px -4px rgba(126,226,179,.35);

  /* Estados: cada color significa una sola cosa */
  --ok: #7ee2b3;     --ok-bg: rgba(126,226,179,.12);   --ok-line: rgba(126,226,179,.28);
  --toca: #f3c26b;   --toca-bg: rgba(243,194,107,.12); --toca-line: rgba(243,194,107,.30);
  --mal: #f2877e;    --mal-bg: rgba(242,135,126,.12);  --mal-line: rgba(242,135,126,.30);
  --auto: #8db4ff;   --auto-bg: rgba(141,180,255,.10); --auto-line: rgba(141,180,255,.26);
  --martin: #c2a5f6; --martin-bg: rgba(194,165,246,.12); --martin-line: rgba(194,165,246,.28);
  --neutro: #9a9ca3; --neutro-bg: rgba(255,255,255,.05); --neutro-line: rgba(255,255,255,.08);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;

  --sh-card:  var(--shine), 0 0 0 1px var(--line);
  --sh-raise: var(--shine), 0 0 0 1px var(--line-2), 0 8px 24px -12px rgba(0,0,0,.7);
  --sh-pop:   0 0 0 1px var(--line-2), 0 16px 40px -12px rgba(0,0,0,.75);
  --focus:    0 0 0 2px var(--bg), 0 0 0 4px var(--brand);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms; --t: 160ms; --t-slow: 240ms;

  --row-h: 56px;
  --sidebar-w: 224px;

  /* Las variables viejas (style.css, precall.css) apuntan a las nuevas: las pantallas
     del bot de follow-up viejo heredan la paleta sin tocar sus plantillas. */
  --surface2:   var(--surface-2);
  --border:     var(--line-2);
  --accent:     var(--brand);
  --accent-dim: var(--brand-soft);
  --text:       var(--tx-1);
  --text-muted: var(--tx-3);
  --danger:     var(--mal);
  --warning:    var(--toca);
  --info:       var(--auto);
  --radius:     var(--r-md);
}

/* ── 2. Base ─────────────────────────────────────────────────────────────────── */
html { color-scheme: dark; }
body {
  font-family: var(--font-sans); font-size: var(--fs-md); line-height: 20px; color: var(--tx-1);
  background: radial-gradient(900px 320px at 30% -120px, rgba(126,226,179,.055), transparent 70%), var(--bg);
  background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1 { font-size: var(--fs-xl); line-height: 26px; font-weight: 600; letter-spacing: -.015em; }
h2 { font-size: var(--fs-lg); line-height: 22px; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; }
a { color: var(--brand); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--brand-hover); text-decoration: none; }
::selection { background: rgba(126,226,179,.28); color: var(--tx-1); }
strong { font-weight: 600; }
code, kbd, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

*:focus { outline: none; }
*:focus-visible { box-shadow: var(--focus); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); border: 3px solid transparent; background-clip: padding-box; }

.text-muted, .subtitle, .hint { color: var(--tx-3); }
.tx-1 { color: var(--tx-1); } .tx-2 { color: var(--tx-2); } .tx-3 { color: var(--tx-3); }
.c-ok { color: var(--ok); } .c-toca { color: var(--toca); } .c-mal { color: var(--mal); } .c-auto { color: var(--auto); } .c-martin { color: var(--martin); }
.recorte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block; }
.ti { line-height: 1; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(126,226,179,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(126,226,179,0); }
  100% { box-shadow: 0 0 0 0 rgba(126,226,179,0); }
}
@keyframes pulse-mal {
  0%   { box-shadow: 0 0 0 0 rgba(242,135,126,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(242,135,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,135,126,0); }
}
@keyframes flash { from { background: var(--brand-soft); } to { background: transparent; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: -200px 0; } to { background-position: 200px 0; } }
@keyframes entrar-abajo { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes entrar-derecha { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes barra { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.girando { display: inline-block; animation: girar .8s linear infinite; }

/* ── 3. Menú lateral ─────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); background: var(--bg-sidebar); border-right: 1px solid var(--line);
  padding: 16px 0 12px; display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 20px 6px; border-bottom: 0; }
.sidebar .logo-icon {
  width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 16px;
  color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line);
}
.sidebar .logo-text { font-size: 14px; font-weight: 600; color: var(--tx-1); letter-spacing: -.01em; }
.nav-grupo {
  padding: 18px 20px 6px; font: 500 12px/16px var(--font-sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--tx-3); list-style: none;
}
.sidebar .nav-links { list-style: none; padding: 0 10px; margin: 0; display: flex; flex-direction: column; gap: 1px; }
.sidebar .nav-links li a {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  color: var(--tx-2); font-size: var(--fs-md); font-weight: 500; border-right: 0 !important; background: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar .nav-links li a .ti { font-size: 18px; color: var(--tx-3); transition: color var(--t-fast); }
.sidebar .nav-links li a:hover { background: var(--surface); color: var(--tx-1); text-decoration: none; }
.sidebar .nav-links li a:hover .ti { color: var(--tx-2); }
.sidebar .nav-links li a.active { background: var(--surface-2); color: var(--tx-1); box-shadow: inset 2px 0 0 var(--brand); }
.sidebar .nav-links li a.active .ti { color: var(--brand); }
.sidebar .nav-ajustes li a { height: 32px; font-size: var(--fs-sm); font-weight: 400; }
.sidebar .nav-ajustes li a .ti { font-size: 16px; }
.nav-atajo { margin-left: auto; display: none; }
.sidebar .nav-links li a:hover .nav-atajo { display: inline-flex; }
.sidebar .nav-links li a:hover .nav-atajo + .nav-cuenta { margin-left: 6px; }
.nav-cuenta {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
  background: var(--toca-bg); color: var(--toca); box-shadow: inset 0 0 0 1px var(--toca-line);
  font: 600 12px/20px var(--font-sans); text-align: center; font-variant-numeric: tabular-nums;
}
.sistema { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); margin-left: 0; }
.sistema .nav-grupo { padding-top: 0; }
.sistema ul { list-style: none; margin: 0; padding: 0; }
.sistema li a {
  display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); line-height: 16px; color: var(--tx-2);
  padding: 4px 20px; transition: background var(--t-fast);
}
.sistema li a:hover { background: var(--surface); color: var(--tx-1); }
.sistema .sis-nombre { flex: 1; min-width: 0; }
.sistema .sis-valor { color: var(--tx-3); font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--neutro); flex: none; display: inline-block; }
.punto.vivo { background: var(--ok); animation: pulse 2s var(--ease) infinite; }
.punto.prueba { background: var(--toca); }
.punto.trabado { background: var(--mal); animation: pulse-mal 2s var(--ease) infinite; }
.nav-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 20px 0; }
.nav-pie a, .nav-pie button {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--tx-3);
  background: none; border: 0; cursor: pointer; font-family: inherit; padding: 4px 0;
}
.nav-pie a:hover, .nav-pie button:hover { color: var(--tx-1); }

/* ── 4. Contenido y encabezado ───────────────────────────────────────────────── */
.main-content { margin-left: var(--sidebar-w); padding: 28px 40px 80px; max-width: 1440px; flex: 1; min-width: 0; }
.franja-modo {
  display: flex; align-items: center; gap: 10px; min-height: 32px; margin: -28px -40px 24px; padding: 6px 40px;
  background: var(--toca-bg); color: var(--toca); font-size: var(--fs-sm); border-bottom: 1px solid var(--toca-line);
}
.franja-modo .ti { font-size: 16px; }
.franja-modo a { color: var(--toca); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.back-link {
  display: inline-flex; align-items: center; gap: 4px; color: var(--tx-3); font-size: var(--fs-sm); margin-bottom: 10px;
}
.back-link:hover { color: var(--tx-1); }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-header h1 { font-size: var(--fs-xl); line-height: 26px; font-weight: 600; margin: 0 0 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-header .subtitle { font-size: var(--fs-sm); line-height: 18px; color: var(--tx-2); }
.header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.en-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--tx-3); white-space: nowrap; }
.en-vivo .punto { width: 7px; height: 7px; }
.en-vivo.trabado { color: var(--mal); }
.en-vivo.trabado .punto { background: var(--mal); animation: pulse-mal 2s var(--ease) infinite; }

details.como-funciona { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--tx-2); max-width: 760px; }
details.como-funciona > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--tx-3); list-style: none; user-select: none;
  transition: color var(--t-fast);
}
details.como-funciona > summary::-webkit-details-marker { display: none; }
details.como-funciona > summary:hover { color: var(--tx-1); }
details.como-funciona > summary .ti { font-size: 14px; transition: transform var(--t) var(--ease); }
details.como-funciona[open] > summary .ti-chevron-down { transform: rotate(180deg); }
details.como-funciona > div { margin-top: 8px; padding: 10px 12px; background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--sh-card); line-height: 20px; animation: entrar-abajo var(--t) var(--ease); }
details.como-funciona > div p + p { margin-top: 6px; }

/* ── 5. Tarjetas ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 0; border-radius: var(--r-md); box-shadow: var(--sh-card);
  padding: 18px 20px; margin-bottom: 16px;
}
.card h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card h3 .ti { font-size: 18px; color: var(--tx-3); }
.card-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-cabeza h3 { margin: 0; }
.seccion-titulo {
  display: flex; align-items: center; gap: 8px; margin: 28px 0 10px; font-size: var(--fs-xs); line-height: 16px;
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3);
}
.seccion-titulo .cuenta-mono { font-family: var(--font-mono); letter-spacing: 0; color: var(--tx-2); }
.seccion-titulo .ti { font-size: 15px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; align-items: start; }
.dos-columnas > .card, .dos-columnas > div > .card:last-child { margin-bottom: 0; }

/* ── 6. Chips de estado ──────────────────────────────────────────────────────── */
.chip, .pill {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 22px; padding: 0 8px;
  border-radius: var(--r-xs); border: 0; font: 500 12px/1 var(--font-sans); white-space: nowrap; vertical-align: middle;
  color: var(--c, var(--neutro)); background: var(--cb, var(--neutro-bg)); box-shadow: inset 0 0 0 1px var(--cl, var(--neutro-line));
}
.chip::before, .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip .ti { font-size: 13px; margin: 0 -2px; }
.chip.chip-icono::before { display: none; }
.chip-lg { height: 28px; padding: 0 10px; font-size: var(--fs-sm); }
.chip-ok, .pill-on    { --c: var(--ok);     --cb: var(--ok-bg);     --cl: var(--ok-line); }
.chip-toca            { --c: var(--toca);   --cb: var(--toca-bg);   --cl: var(--toca-line); }
.chip-mal, .pill-mal, .pill-error { --c: var(--mal); --cb: var(--mal-bg); --cl: var(--mal-line); }
.chip-auto, .pill-espera, .pill-esperando, .pill-procesando { --c: var(--auto); --cb: var(--auto-bg); --cl: var(--auto-line); }
.chip-martin, .pill-martin { --c: var(--martin); --cb: var(--martin-bg); --cl: var(--martin-line); }
.chip-neutro, .pill-vacia, .pill-cancelada, .pill-terminada { --c: var(--neutro); --cb: var(--neutro-bg); --cl: var(--neutro-line); }
.chip-prueba, .pill-prueba { --c: var(--toca); --cb: transparent; --cl: transparent; border: 1px dashed var(--toca-line); }
.chip-vivo::before { animation: pulse 2s infinite; }
.chip-dato { --c: var(--tx-2); font-family: var(--font-sans); font-weight: 400; }
.chip-dato::before { display: none; }
.chip-mut { font-size: var(--fs-xs); color: var(--tx-3); }

/* Post llamada: la clave del estado decide el color (post.py no se toca) */
.est-p-aprobado, .est-p-cerrado { --c: var(--ok); --cb: var(--ok-bg); --cl: var(--ok-line); }
.est-p-martin, .est-p-borrador  { --c: var(--toca); --cb: var(--toca-bg); --cl: var(--toca-line); }
.est-p-molesto                  { --c: var(--mal); --cb: var(--mal-bg); --cl: var(--mal-line); }
.est-p-conversando              { --c: var(--auto); --cb: var(--auto-bg); --cl: var(--auto-line); }
/* Rescate */
.est-r-agendo, .est-r-ofrecida, .est-r-link { --c: var(--ok); --cb: var(--ok-bg); --cl: var(--ok-line); }
.est-r-martin                    { --c: var(--martin); --cb: var(--martin-bg); --cl: var(--martin-line); }
.est-r-molesto, .est-r-sin_entregar { --c: var(--mal); --cb: var(--mal-bg); --cl: var(--mal-line); }
/* Azul = el sistema trabaja ("Mandando…", "Contestó, lo charla el bot"). "Le escribimos, no contestó" es espera: gris. */
.est-r-enviando, .est-r-respondio { --c: var(--auto); --cb: var(--auto-bg); --cl: var(--auto-line); }
.est-r-enviado, .est-r-seguimiento { --c: var(--neutro); --cb: var(--neutro-bg); --cl: var(--neutro-line); }

/* ── 7. Botones ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--r-sm); border: 0; font: 500 13px/1 var(--font-sans); cursor: pointer; white-space: nowrap;
  background: var(--surface-2); color: var(--tx-1); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast), transform var(--t-fast);
}
.btn .ti { font-size: 16px; }
.btn:hover { background: var(--surface-3); color: var(--tx-1); box-shadow: inset 0 0 0 1px var(--line-3); text-decoration: none; border-color: transparent; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; gap: 5px; }
.btn-sm .ti { font-size: 14px; }
.btn-lg { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-primary, .btn-success {
  background: var(--brand); color: var(--tx-inv); font-weight: 600; box-shadow: none; border: 0;
}
.btn-primary:hover, .btn-success:hover { background: var(--brand-hover); color: var(--tx-inv); box-shadow: var(--brand-glow); }
.btn-primary:active, .btn-success:active { background: var(--brand-press); }
.btn-secondary { background: var(--surface-2); color: var(--tx-1); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-fantasma, .btn-ghost { background: transparent; color: var(--tx-2); box-shadow: none; }
.btn-fantasma:hover, .btn-ghost:hover { background: var(--surface-2); color: var(--tx-1); box-shadow: none; }
.btn-danger, .btn-peligro { background: var(--mal-bg); color: var(--mal); box-shadow: inset 0 0 0 1px var(--mal-line); }
.btn-danger:hover, .btn-peligro:hover { background: rgba(242,135,126,.2); color: var(--mal); box-shadow: inset 0 0 0 1px var(--mal); }
.btn kbd, .btn-primary kbd { margin-left: 4px; }
.btn-primary kbd { background: rgba(6,33,15,.12); color: var(--tx-inv); box-shadow: inset 0 0 0 1px rgba(6,33,15,.2); }
.btn-link {
  background: none; border: 0; padding: 0 6px; height: 24px; color: var(--tx-2); font: 500 12px/1 var(--font-sans);
  text-decoration: none; cursor: pointer; border-radius: var(--r-xs); display: inline-flex; align-items: center; gap: 4px;
}
.btn-link:hover { color: var(--tx-1); background: var(--surface-2); }

.btn-icono {
  flex: none; width: 28px; height: 28px; padding: 0; border-radius: var(--r-xs); border: 0; cursor: pointer;
  display: inline-grid; place-items: center; background: transparent; color: var(--tx-3); font-size: 15px;
  box-shadow: none; transition: background var(--t-fast), color var(--t-fast);
}
.btn-icono .ti { font-size: 16px; }
.btn-icono:hover:not(:disabled) { background: var(--surface-3); color: var(--tx-1); border-color: transparent; }
.btn-icono:disabled { opacity: .3; cursor: default; }
.btn-icono.quitar:hover:not(:disabled), [data-sacar].btn-icono:hover, [data-sacar-paso].btn-icono:hover, [data-borrar]:hover { color: var(--mal); background: var(--mal-bg); }

kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 4px; background: var(--surface-3); color: var(--tx-2); box-shadow: inset 0 0 0 1px var(--line-2);
  font: 500 12px/1 var(--font-mono);
}
.botones-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.en-linea { display: inline; margin: 0; }

/* ── 8. Formularios ──────────────────────────────────────────────────────────── */
.input, .select-input, select.input, .textarea, textarea.input {
  width: 100%; min-height: 36px; padding: 7px 12px; background: var(--surface-2); color: var(--tx-1);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); font: 400 14px/20px var(--font-sans);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--tx-3); opacity: 1; }
.input:hover, .select-input:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select-input:focus, .textarea:focus, textarea.input:focus {
  outline: none; border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft);
}
.input:disabled, .textarea:disabled, .select-input:disabled { opacity: .55; cursor: not-allowed; }
.select-input, select.input {
  width: auto; appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a9aaae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
select.input { width: 100%; }
.select-input option, select.input option { background: var(--surface-3); color: var(--tx-1); }
.textarea, textarea.input { line-height: 22px; padding: 8px 12px; }
textarea.campo-auto { resize: none; overflow: hidden; min-height: 40px; }
textarea.campo-largo { min-height: 110px; }
input[type="file"].input { padding: 6px; font-size: 13px; color: var(--tx-2); }
input[type="file"].input::file-selector-button {
  margin-right: 10px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-xs); cursor: pointer;
  background: var(--surface-3); color: var(--tx-1); font: 500 12px var(--font-sans);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
.form-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.form-group label, label.etiqueta, .etiqueta {
  display: block; font: 500 13px/18px var(--font-sans); color: var(--tx-2); text-transform: none; letter-spacing: 0; margin: 0;
}
.hint { display: block; font-size: var(--fs-xs); line-height: 16px; color: var(--tx-3); margin-top: 0; }
.input-num { width: 80px !important; font-family: var(--font-mono); }
.opcion { display: flex; gap: 10px; align-items: flex-start; font-weight: normal; margin: 8px 0; cursor: pointer; }
.opcion input { margin-top: 4px; }
.buscador { position: relative; display: inline-flex; align-items: center; }
.buscador .ti { position: absolute; left: 10px; color: var(--tx-3); font-size: 16px; pointer-events: none; }
.buscador .input { padding-left: 34px; padding-right: 34px; min-height: 32px; height: 32px; font-size: 13px; width: 260px; }
.buscador kbd { position: absolute; right: 8px; }
.buscador .input:focus + kbd { display: none; }

/* Barra "Guardar cambios": flota abajo y aparece solo si hay cambios */
.barra-guardar {
  position: fixed; left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2); bottom: 20px; z-index: 40;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; width: min(560px, calc(100vw - var(--sidebar-w) - 48px)); max-width: none;
  padding: 8px 8px 8px 16px; background: var(--surface-3); border: 0; border-radius: var(--r-md); box-shadow: var(--sh-pop);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.barra-guardar:has(.aviso-sucio), .barra-guardar:has(.aviso-error), .barra-guardar.mostrar {
  transform: translate(-50%, 0); opacity: 1; pointer-events: auto;
}
.barra-guardar > span { font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 8px; }
.barra-guardar .botones-fila { flex-wrap: nowrap; }
.aviso-sucio { color: var(--toca); }
.aviso-ok { color: var(--ok); }
.aviso-error { color: var(--mal); }
.aviso-sucio::before, .aviso-ok::before, .aviso-error::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 8px; vertical-align: middle;
}
.subtitle .aviso-error::before, .hint.aviso-error::before { display: none; }

/* ── 9. Pestañas y control segmentado ────────────────────────────────────────── */
.filtros { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filtros-izq { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tabs, .segmentado {
  display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border-radius: var(--r-sm);
  box-shadow: var(--sh-card); flex-wrap: wrap;
}
.tab {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; border: 0;
  background: none; color: var(--tx-2); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.tab:hover { color: var(--tx-1); text-decoration: none; background: var(--surface-2); }
.tab.tab-on { background: var(--surface-3); color: var(--tx-1); box-shadow: var(--sh-raise); }
.tab .contador, .contador {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--neutro-bg);
  color: var(--tx-3); font: 600 12px/18px var(--font-sans); text-align: center; font-variant-numeric: tabular-nums;
}
.tab.hay .contador, .contador.toca { background: var(--toca-bg); color: var(--toca); }
.tab-solo {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-sm);
  color: var(--tx-2); font-size: var(--fs-sm); font-weight: 500; background: var(--surface); box-shadow: var(--sh-card);
}
.tab-solo:hover { color: var(--tx-1); background: var(--surface-2); }
.tab-solo.tab-on { color: var(--tx-1); background: var(--surface-3); box-shadow: var(--sh-raise); }
.tab-solo.hay .contador { background: var(--toca-bg); color: var(--toca); }
.tab-prueba, .tab-solo.tab-prueba { background: transparent; box-shadow: none; border: 1px dashed var(--line-3); color: var(--tx-3); }
.tab-prueba.tab-on { border-color: var(--toca-line); color: var(--toca); background: transparent; }

.pestanas, .pestanas-seccion {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 20px; align-items: center;
}
.pestana, .pestanas-seccion .pestana {
  position: relative; background: none; border: 0; color: var(--tx-3); padding: 10px 12px; font: 500 14px/20px var(--font-sans);
  cursor: pointer; border-bottom: 0; transition: color var(--t-fast);
}
.pestana::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--brand); transform: scaleX(0); transition: transform var(--t) var(--ease);
}
.pestana:hover { color: var(--tx-1); text-decoration: none; }
.pestana.on, .pestanas-seccion .pestana-on { color: var(--tx-1); font-weight: 500; }
.pestana.on::after, .pestanas-seccion .pestana-on::after { transform: scaleX(1); }
.pestanas-seccion .en-vivo { margin-left: auto; order: 9; }

/* ── 10. Métricas y embudo ───────────────────────────────────────────────────── */
.metricas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.metrica {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 76px;
  padding: 12px 16px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-card); color: var(--tx-1);
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
a.metrica:hover { box-shadow: var(--shine), 0 0 0 1px var(--line-3); color: var(--tx-1); text-decoration: none; }
.metrica-flecha {
  position: absolute; top: 10px; right: 12px; font-size: 14px; color: var(--tx-3);
  opacity: 0; transform: translate(-2px, 2px); transition: opacity var(--t-fast), transform var(--t-fast);
}
a.metrica:hover .metrica-flecha { opacity: 1; transform: none; }
.metrica-etq { font-size: var(--fs-xs); line-height: 16px; color: var(--tx-3); display: flex; align-items: center; gap: 6px; }
.metrica-etq .ti { font-size: 14px; }
.metrica-num { font: 600 28px/32px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.metrica-sub { font-size: var(--fs-xs); color: var(--tx-3); }
.metrica.m-toca .metrica-num { color: var(--toca); }
.metrica.m-ok .metrica-num { color: var(--ok); }
.metrica.m-mal .metrica-num { color: var(--mal); }

.embudo { padding: 16px 20px; }
.embudo-etapas { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.etapa { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: var(--r-sm); color: var(--tx-1); min-width: 110px; transition: background var(--t-fast); }
a.etapa:hover { background: var(--surface-2); color: var(--tx-1); text-decoration: none; }
.etapa-num { font: 600 28px/32px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.etapa-etq { font-size: var(--fs-xs); color: var(--tx-3); }
.etapa.e-ok .etapa-num { color: var(--ok); }
.conector { flex: 1; min-width: 56px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 0 4px; }
.conector-pct { font: 500 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--tx-2); }
.conector-linea { width: 100%; height: 1px; background: linear-gradient(90deg, var(--line-2), var(--line-3)); position: relative; }
.conector-linea::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left: 5px solid var(--line-3); }
.embudo-pie { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--tx-3); display: flex; gap: 6px; flex-wrap: wrap; }
.embudo-pie a { color: var(--tx-2); }
.embudo-pie a:hover { color: var(--tx-1); }
.embudo-pie .mono { color: var(--tx-1); }
.embudo-pie .mal { color: var(--mal); }

/* ── 11. Listas (filas) ──────────────────────────────────────────────────────── */
.lista { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-card); overflow: hidden; margin-bottom: 16px; }
.lista-cabeza, .fila { display: grid; align-items: center; gap: 14px; padding: 0 16px; }
.lista-cabeza {
  height: 34px; font-size: var(--fs-xs); line-height: 16px; font-weight: 500; color: var(--tx-3);
  border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012);
}
.fila {
  position: relative; min-height: var(--row-h); padding-top: 8px; padding-bottom: 8px; color: var(--tx-1);
  border-bottom: 1px solid var(--line); transition: background var(--t-fast) var(--ease);
}
.fila:last-child { border-bottom: 0; }
.fila:hover { background: var(--surface-2); }
.fila.sel { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--brand); }
.fila.destello { animation: flash 1.2s var(--ease); }
.fila.fila-atencion { box-shadow: inset 2px 0 0 var(--toca); }
.fila.fila-atencion.sel { box-shadow: inset 2px 0 0 var(--brand); }
.fila:target { background: var(--surface-2); }
.fila > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-link { color: var(--tx-1); font-weight: 500; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.fila-link:hover { color: var(--tx-1); }
.fila-nombre { color: var(--tx-1); font-weight: 500; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila a:not(.fila-link), .fila button, .fila form, .fila .encima { position: relative; z-index: 1; }
.fila-sub { font-size: var(--fs-sm); line-height: 18px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-sub.mono { font-size: var(--fs-xs); }
.fila-nota { font-size: var(--fs-xs); line-height: 16px; color: var(--tx-3); display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-nota .ti { margin-right: 4px; vertical-align: -2px; }
.fila-nota.c-toca { color: var(--toca); }
.fila-nota.c-mal { color: var(--mal); }
.fila-nota .ti { font-size: 13px; }
.fila-estado { align-items: flex-start; }
.fila-estado > * { max-width: 100%; }
.pais {
  display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 4px; vertical-align: 1px;
  background: var(--surface-3); color: var(--tx-2); font: 500 12px/1 var(--font-mono); letter-spacing: .02em;
}
.fila .fuerte { font-weight: 500; font-size: var(--fs-md); }
.fila-estado { align-items: flex-start; }
.fila-estado > form { margin-top: 2px; }
.fila-ultimo .ult-quien { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--tx-3); }
.fila-ultimo .ult-texto { font-size: var(--fs-sm); color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-ultimo .vacio-fila, .vacio-fila { font-size: var(--fs-sm); color: var(--tx-3); font-style: italic; }
.quien-punto { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; }
.quien-punto.q-lead { background: var(--toca); }
.quien-punto.q-bot { background: var(--brand); }
.quien-punto.q-martin { background: var(--martin); }
.hace { font: 400 12px/16px var(--font-sans); color: var(--tx-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hace.tarde { color: var(--toca); }
.fila-wa { opacity: 0; transition: opacity var(--t-fast); color: var(--tx-2); }
.fila:hover .fila-wa, .fila.sel .fila-wa, .fila-wa:focus-visible { opacity: 1; }
.fila-wa:hover { color: var(--brand) !important; }
.fila-accion { align-items: flex-end !important; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--surface-3); color: var(--tx-2); font: 600 12px/1 var(--font-sans); letter-spacing: .02em;
}
.avatar.espera { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--toca); color: var(--toca); }
.avatar.chico { width: 24px; height: 24px; font-size: 12px; letter-spacing: 0; }

/* Leads */
.fila-leads, .cabeza-leads { grid-template-columns: 32px minmax(160px, 1.5fr) 150px minmax(130px, .9fr) minmax(0, 2fr) 70px 28px; }
/* Post: Persona · Llamada · Programa · Estado · Acción */
.fila-post, .cabeza-post { grid-template-columns: 32px minmax(150px, 1.4fr) 110px minmax(0, 1.2fr) minmax(0, 1.2fr) 170px; }
/* Rescate */
.fila-rescate, .cabeza-rescate { grid-template-columns: 32px minmax(160px, 1.3fr) minmax(0, 1.3fr) minmax(0, 2fr) 64px; }
.fila-cola, .cabeza-cola { grid-template-columns: 28px 32px minmax(160px, 1.4fr) minmax(0, 1.3fr) 200px; }
.col-pos { font: 500 13px/1 var(--font-mono); color: var(--tx-3); font-variant-numeric: tabular-nums; }
.fila-proximo { box-shadow: inset 2px 0 0 var(--brand) !important; }
.col-mover { display: flex !important; flex-direction: row !important; gap: 2px !important; margin: 0; justify-content: flex-end; }

/* Grupos por día */
.grupo { margin-bottom: 14px; }
.grupo > summary {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3);
  background: var(--bg); cursor: pointer; list-style: none; user-select: none;
}
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary .ti { font-size: 14px; transition: transform var(--t) var(--ease); }
.grupo:not([open]) > summary .ti-chevron-down { transform: rotate(-90deg); }
.grupo > summary:hover { color: var(--tx-1); }
.grupo > summary .contador { letter-spacing: 0; }
.grupo[open] > .lista { animation: entrar-abajo var(--t) var(--ease); }

/* "Te esperan" / "Te toca a vos" */
.te-esperan { padding: 0; overflow: hidden; box-shadow: var(--shine), 0 0 0 1px var(--toca-line); position: relative; }
.te-esperan::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--toca); }
.te-esperan-cabeza { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px 19px; font-weight: 600; font-size: var(--fs-md); color: var(--toca); }
.te-esperan-cabeza .ti { font-size: 18px; }
.te-esperan-cabeza .texto-sec { color: var(--tx-3); font-weight: 400; font-size: var(--fs-sm); }
.espera-fila {
  display: grid; grid-template-columns: 32px minmax(140px, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr) 70px auto; gap: 14px; align-items: center;
  min-height: 52px; padding: 6px 16px 6px 19px; border-top: 1px solid var(--line); transition: background var(--t-fast);
}
.espera-fila:hover, .espera-fila.sel { background: var(--surface-2); }
.espera-fila.sel { box-shadow: inset 2px 0 0 var(--brand); }
.espera-fila > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.espera-fila .nombre { font-weight: 500; color: var(--tx-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.espera-fila .motivo { font-size: var(--fs-sm); color: var(--toca); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.espera-fila .cita { font-size: var(--fs-sm); color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
.espera-fila .acciones { display: flex; flex-direction: row; gap: 6px; justify-content: flex-end; }

/* Línea del día */
.linea-dia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-md); color: var(--tx-2); margin: 0 0 16px; }
.linea-dia .mono { color: var(--tx-1); font-weight: 500; }
.linea-dia .sep { color: var(--tx-3); }
.linea-dia .c-toca .mono, .linea-dia .c-toca { color: var(--toca); }
.linea-dia .c-ok .mono { color: var(--ok); }

/* Próxima llamada */
.proxima {
  position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  min-height: 120px; padding: 18px 22px; margin-bottom: 20px; border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--sh-raise); overflow: hidden;
}
.proxima::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand) 30%, var(--brand) 60%, transparent);
  opacity: .7;
}
.proxima::after {
  content: ""; position: absolute; top: -80px; right: -60px; width: 280px; height: 200px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(126,226,179,.08), transparent);
}
.proxima-izq { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 380px; }
.etq { font-size: var(--fs-xs); line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.proxima-nombre { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 18px; font-weight: 600; }
.proxima-nombre a { color: var(--tx-1); }
.proxima-nombre a:hover { color: var(--brand); }
.proxima-nombre .lugar { font-size: var(--fs-sm); font-weight: 400; color: var(--tx-3); }
.proxima-horas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--tx-2); }
.proxima-horas .mono { color: var(--tx-1); font-weight: 500; }
.cuenta-hero { font: 600 40px/44px var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--tx-1); margin-top: 4px; }
.cuenta-hero .cuenta-pre { font: 400 16px/1 var(--font-sans); color: var(--tx-3); letter-spacing: 0; margin-right: 6px; }
.cuenta-hero.pronto, .cuenta.pronto { color: var(--toca); }
.proxima-resumen { font-size: var(--fs-sm); line-height: 20px; color: var(--tx-2); max-width: 680px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proxima-acciones { display: flex; flex-direction: column; gap: 8px; align-items: stretch; position: relative; z-index: 1; }
.proxima-chica { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: var(--fs-md); color: var(--tx-2); flex-wrap: wrap; }
.proxima-chica .ti { font-size: 20px; color: var(--tx-3); }
.proxima-chica a { color: var(--tx-1); font-weight: 500; }

/* ── 12. Avisos y franjas ────────────────────────────────────────────────────── */
.franja {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px;
  border-radius: var(--r-md); font-size: var(--fs-sm); margin-bottom: 16px;
  background: var(--neutro-bg); box-shadow: inset 0 0 0 1px var(--neutro-line); color: var(--tx-1);
}
.franja-texto { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 300px; line-height: 20px; }
.franja-texto > .ti { font-size: 18px; flex: none; margin-top: 1px; }
.franja-toca { background: var(--toca-bg); box-shadow: inset 0 0 0 1px var(--toca-line); }
.franja-toca .franja-texto > .ti, .franja-toca strong { color: var(--toca); }
.franja-mal { background: var(--mal-bg); box-shadow: inset 0 0 0 1px var(--mal-line); }
.franja-mal .franja-texto > .ti, .franja-mal strong { color: var(--mal); }
.franja-ok { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.franja-ok .franja-texto > .ti, .franja-ok strong { color: var(--ok); }
.aviso-atencion { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; background: var(--toca-bg); color: var(--tx-1); box-shadow: inset 0 0 0 1px var(--toca-line); }

/* Avisos flotantes */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 12px 14px; overflow: hidden;
  background: var(--surface-3); border-radius: var(--r-md); box-shadow: var(--sh-pop); font-size: var(--fs-sm); line-height: 20px;
  color: var(--tx-1); pointer-events: auto; animation: entrar-derecha 200ms var(--ease);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.toast.saliendo { opacity: 0; transform: translateX(16px); }
.toast > .ti { font-size: 18px; flex: none; margin-top: 1px; color: var(--ok); }
.toast-error > .ti { color: var(--mal); }
.toast-info > .ti, .toast-nuevo > .ti { color: var(--auto); }
.toast > span { flex: 1; min-width: 0; }
.toast .toast-accion { font-weight: 600; color: var(--brand); background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 0 4px; }
.toast .btn-icono { width: 24px; height: 24px; margin: -2px 0; }
.toast[data-auto="si"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ok); opacity: .6;
  transform-origin: left; animation: barra 4s linear forwards;
}

/* Estados vacíos */
.vacio, .empty-state.card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px 20px !important; text-align: center; color: var(--tx-3); }
.vacio-icono { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; margin-bottom: 6px; }
.vacio-icono .ti { font-size: 28px; color: var(--tx-3); }
.vacio-icono.ok .ti { color: var(--ok); }
.vacio-titulo { font-size: var(--fs-md); font-weight: 500; color: var(--tx-1); }
.vacio-texto { font-size: var(--fs-sm); color: var(--tx-3); max-width: 420px; }
.vacio .btn { margin-top: 8px; }

/* Esqueleto (se llena solo) */
.esqueleto { display: flex; flex-direction: column; gap: 8px; }
.esqueleto i {
  display: block; height: 10px; border-radius: 4px; width: 100%;
  background: linear-gradient(90deg, var(--surface-3) 0, #2c2e34 60px, var(--surface-3) 120px) var(--surface-3);
  background-size: 400px 100%; animation: shimmer 1.4s linear infinite;
}
.esqueleto i:nth-child(2) { width: 62%; }
.esqueleto span { font-size: var(--fs-xs); color: var(--tx-3); margin-top: 2px; }

/* ── 13. Línea de tiempo ─────────────────────────────────────────────────────── */
details.tiempo > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
details.tiempo > summary::-webkit-details-marker { display: none; }
.tiempo-prox { font-size: var(--fs-sm); color: var(--tx-1); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tiempo-prox .mono { color: var(--tx-1); }
.tiempo-ver { font-size: var(--fs-xs); color: var(--tx-3); display: inline-flex; align-items: center; gap: 4px; }
.tiempo-ver .ti { transition: transform var(--t) var(--ease); }
details.tiempo[open] .tiempo-ver .ti { transform: rotate(180deg); }
details.tiempo > summary:hover .tiempo-ver { color: var(--tx-1); }
.tiempo-grupo { margin-top: 14px; }
.tiempo-grupo-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 500; margin-bottom: 6px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--line-2); }
.linea-tiempo li { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 8px; padding: 3px 0 3px 18px; font-size: var(--fs-sm); line-height: 18px; color: var(--tx-2); }
.linea-tiempo li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tx-3); box-shadow: 0 0 0 3px var(--surface);
}
.linea-tiempo li.ev-msg::before { background: var(--brand); }
.linea-tiempo li.ev-espera::before { background: var(--auto); }
.linea-tiempo li.ev-decide::before { background: var(--martin); }
.linea-tiempo li.ev-error::before { background: var(--mal); }
.linea-tiempo .t-hora { font: 400 12px/18px var(--font-mono); color: var(--tx-3); font-variant-numeric: tabular-nums; }

/* ── 14. Charla ──────────────────────────────────────────────────────────────── */
.chat { display: flex; flex-direction: column; gap: 10px; margin-top: 0; }
.burbuja {
  position: relative; max-width: 72%; padding: 8px 12px 6px; border-radius: 12px; background: var(--surface-2);
  font-size: 14px; line-height: 20px; animation: entrar-abajo var(--t) var(--ease) backwards;
}
.burbuja.seguido { margin-top: -6px; }
.burbuja-lead { align-self: flex-start; border-bottom-left-radius: 4px; margin-left: 32px; }
.burbuja-bot, .burbuja-martin { align-self: flex-end; border-bottom-right-radius: 4px; }
.burbuja-bot { background: #11231b; box-shadow: inset 0 0 0 1px var(--brand-line); }
.burbuja-martin { background: #1f1930; box-shadow: inset 0 0 0 1px var(--martin-line); }
.burbuja-simulada { background: transparent !important; box-shadow: none !important; border: 1px dashed var(--toca-line); }
.burbuja-quien { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; color: var(--tx-3); margin-bottom: 2px; font-weight: 500; }
.burbuja-bot .burbuja-quien { color: var(--brand); }
.burbuja-bot .burbuja-quien .ti { font-size: 12px; }
.burbuja-martin .burbuja-quien { color: var(--martin); }
.burbuja-texto { white-space: pre-wrap; word-break: break-word; }
.burbuja-pie { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font: 400 12px/16px var(--font-mono); color: var(--tx-3); }
.burbuja-pie .ti { font-size: 14px; }
.burbuja-pie .ti.leido { color: var(--auto); }
.burbuja-pie .no-salio { font-family: var(--font-sans); color: var(--toca); margin-right: auto; }
.burbuja-avatar { position: absolute; left: -32px; top: 0; }
.chat-dia, .chat-separador { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 12px; color: var(--tx-3); text-align: center; }
.chat-dia::before, .chat-dia::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.chat-antes span { font-style: italic; }

/* ── 15. Ficha del lead ──────────────────────────────────────────────────────── */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.charla-card { padding: 0; overflow: visible; margin-bottom: 0; }
.charla-cabeza {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: rgba(22,23,26,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.charla-cabeza .avatar { width: 36px; height: 36px; font-size: 13px; }
.charla-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.charla-quien h1 { font-size: 17px; line-height: 22px; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.charla-quien .sub { font-size: var(--fs-xs); color: var(--tx-3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.charla-quien .sub .mono { color: var(--tx-2); }
.charla-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.charla-aviso { padding: 6px 16px; font-size: var(--fs-xs); color: var(--tx-3); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; }
.charla-aviso .ti { font-size: 14px; }
.charla-franja { padding: 12px 16px 0; }
.charla-franja .franja { margin-bottom: 0; }
.charla-scroll { max-height: calc(100vh - 260px); min-height: 280px; overflow-y: auto; padding: 16px; scroll-behavior: smooth; }
.charla-vacia { padding: 32px 16px; }
.compositor { padding: 12px 16px 16px; border-top: 1px solid var(--line); }

.para-llamada { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 2px; margin: -2px; }
.para-llamada .card { margin-bottom: 0; padding: 16px; }
.bloque-titulo { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 8px; }
.bloque-titulo .ti { font-size: 14px; }
.hora-grande { font: 600 20px/26px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-1); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hora-grande .dia { font: 500 14px/20px var(--font-sans); color: var(--tx-2); }
.hora-sec { font-size: var(--fs-sm); color: var(--tx-3); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hora-sec .mono { color: var(--tx-2); }
.cuenta { font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--tx-2); }
.que-hacer-card { display: flex; gap: 10px; align-items: flex-start; }
.que-hacer-card > .ti { font-size: 20px; color: var(--brand); flex: none; margin-top: 1px; }
.que-hacer-card .frase { font-size: 14px; font-weight: 500; line-height: 20px; }
.que-hacer-card form { margin-top: 8px; }
.ultimo-lead { font-size: var(--fs-sm); color: var(--tx-3); margin-top: 8px; line-height: 18px; }
.ultimo-lead q { color: var(--tx-2); font-style: italic; }
.resumen-ia { background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--fs-sm); line-height: 20px; white-space: pre-wrap; color: var(--tx-1); }
.kv { display: grid; grid-template-columns: minmax(90px, 40%) 1fr; gap: 6px 12px; font-size: var(--fs-sm); line-height: 18px; margin: 0; }
.kv dt { color: var(--tx-3); overflow-wrap: anywhere; }
.kv dd { margin: 0; color: var(--tx-1); overflow-wrap: anywhere; }
details.plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--tx-1); user-select: none; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary > .ti:first-child { font-size: 18px; color: var(--tx-3); }
details.plegable > summary .resumen-sec { color: var(--tx-3); font-size: var(--fs-xs); display: block; }
details.plegable > summary .flecha { margin-left: auto; color: var(--tx-3); transition: transform var(--t) var(--ease); }
details.plegable[open] > summary .flecha { transform: rotate(180deg); }
details.plegable > .plegable-cuerpo { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; animation: entrar-abajo var(--t) var(--ease); }
.control-bot { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); color: var(--tx-2); }

/* Compositor: borrador de la IA */
.borrador-ia { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.borrador-ia > .hint { font-size: var(--fs-xs); }
.borrador-arriba { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.borrador-caja {
  display: flex; flex-direction: column; gap: 8px; align-self: flex-end; width: min(100%, 640px);
  padding: 10px 12px; border-radius: 12px; border-bottom-right-radius: 4px; border: 1px dashed var(--brand-line);
  background: rgba(126,226,179,.035); animation: entrar-abajo var(--t) var(--ease);
}
.borrador-caja .borrador-etq { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--brand); font-weight: 500; }
.borrador-caja textarea.input { background: var(--surface); }
.borrador-que { font-size: var(--fs-xs); color: var(--tx-3); }

/* ── 16. Rescate ─────────────────────────────────────────────────────────────── */
.campana { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 16px; min-height: 48px; }
.campana-linea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-md); color: var(--tx-2); min-width: 0; }
.campana-linea .estado { font-weight: 600; color: var(--tx-1); display: inline-flex; align-items: center; gap: 8px; }
.campana-linea .sep { color: var(--tx-3); }
.campana-linea .mono { color: var(--tx-1); }
.campana-extra { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--tx-3); }
.campana-extra .aviso-error { color: var(--mal); }
.campana.trabada { box-shadow: var(--shine), 0 0 0 1px var(--mal-line); background: linear-gradient(0deg, var(--mal-bg), var(--mal-bg)), var(--surface); }
.campana.trabada .estado { color: var(--mal); }
.nota-cola { font-size: var(--fs-sm); color: var(--tx-3); margin: 0 0 10px; }
.seguimientos-pend { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); padding: 12px 16px; }
.ver-mas { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--tx-3); }
.lista-cuidados { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--tx-2); font-size: var(--fs-sm); }
.lista-cuidados li::marker { color: var(--brand); }
.fila-topes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--tx-2); }
.fila-topes .input-num { width: 64px !important; display: inline-block; margin: 0; }
.muestras { display: flex; flex-direction: column; gap: 8px; }
.muestras .burbuja { max-width: 100%; }

/* ── 17. Ajustes: bot, recursos, conexión ────────────────────────────────────── */
.secciones-bot { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
.seccion { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 20px; }
.seccion-cabeza h3 { margin-bottom: 2px; }
.seccion-cabeza p { font-size: var(--fs-sm); color: var(--tx-3); line-height: 18px; }
.lista-editable { display: flex; flex-direction: column; gap: 6px; }
.item-lista { display: flex; gap: 4px; align-items: flex-start; }
.item-lista textarea { flex: 1; }
.item-lista .btn-icono { margin-top: 4px; opacity: 0; transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast); }
.item-lista:hover .btn-icono, .item-lista:focus-within .btn-icono, .item-lista .btn-icono:focus-visible { opacity: 1; }
@media (hover: none) { .item-lista .btn-icono { opacity: 1; } }
.agregar-item {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  background: none; border: 1px dashed var(--line-3); color: var(--tx-2); border-radius: var(--r-full);
  cursor: pointer; font: 500 13px var(--font-sans); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.agregar-item:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }
.regla-fija { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--tx-2); line-height: 20px; background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 12px; }
.regla-fija > .ti { font-size: 16px; color: var(--tx-3); margin-top: 2px; flex: none; }
.regla-fija strong { color: var(--tx-1); }
.lista-recursos { display: flex; flex-direction: column; gap: 8px; }
.recurso { border: 0; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t-fast); }
.recurso:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.recurso > summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.recurso > summary::-webkit-details-marker { display: none; }
.recurso[open] > summary { border-bottom: 1px solid var(--line); }
.recurso-pausado { opacity: .6; }
.recurso-icono { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-3); color: var(--tx-2); font-size: 18px; flex: none; }
.recurso-nuevo { margin-top: 8px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); border: 0; outline: 1px dashed var(--line-3); outline-offset: -1px; }
.recurso-nuevo .recurso-icono { background: var(--brand-soft); color: var(--brand); }
.recurso-nombre { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.recurso-nombre .text-muted { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-recurso { padding: 14px; }
.form-recurso .input { background: var(--surface); }
.recurso > .recurso-acciones { padding: 0 14px 14px; }
.recurso-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.tipos-recurso { display: flex; gap: 6px; flex-wrap: wrap; }
.tipo-recurso {
  display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); cursor: pointer; font-size: 13px !important; color: var(--tx-2) !important; margin: 0 !important;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.tipo-recurso input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-recurso .ti { font-size: 16px; }
.tipo-recurso:hover { border-color: var(--line-3); color: var(--tx-1) !important; }
.tipo-recurso:has(input:checked) { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand) !important; }
.tipo-recurso:has(input:focus-visible) { box-shadow: var(--focus); }
.columna { display: flex; flex-direction: column; gap: 20px; }
.boton-probar { align-self: flex-start; margin-top: 6px; width: auto; }

.modo-linea { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.modo-linea .modo-estado { display: flex; flex-direction: column; gap: 4px; max-width: 680px; }
.modo-linea .modo-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--tx-1); }
.modo-linea.real .modo-titulo { color: var(--ok); }
.modo-linea.prueba .modo-titulo { color: var(--toca); }
.modo-linea .aviso-ghl, .modo-linea .previos { flex-basis: 100%; margin: 0; font-size: var(--fs-sm); }
.modo-linea .aviso-ghl { color: var(--toca); display: flex; gap: 8px; align-items: flex-start; }
.estado-wa { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 4px 0 16px; flex-wrap: wrap; }
.estado-wa .punto { width: 8px; height: 8px; background: var(--neutro); box-shadow: none; }
.estado-wa.on .punto { background: var(--ok); animation: pulse 2s var(--ease) infinite; box-shadow: none; }
.estado-wa.off .punto { background: var(--toca); }
.estado-wa .numero { font: 500 16px/22px var(--font-mono); color: var(--tx-1); }
.estado-wa .perfil { color: var(--tx-3); font-size: var(--fs-sm); }
.qr-caja { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.qr-caja img { width: 320px; height: 320px; max-width: 100%; background: #fff; border-radius: var(--r-md); padding: 12px; image-rendering: pixelated; }
.pasos-qr { flex: 1 1 200px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--tx-2); font-size: var(--fs-sm); }
.conexion-botones { display: flex; gap: 10px; margin-bottom: 12px; }
.conexion-pie { display: flex; justify-content: flex-end; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }

/* ── 18. Mensajes automáticos (flujos) ───────────────────────────────────────── */
.lista-flujos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.flujo-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--tx-1); margin-bottom: 0; padding: 14px 18px; transition: box-shadow var(--t-fast), background var(--t-fast); }
.flujo-card:hover { box-shadow: var(--shine), 0 0 0 1px var(--line-3); color: var(--tx-1); }
.flujo-card .flujo-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.flujo-card .flujo-nombre { font-weight: 600; font-size: 15px; }
.flujo-der { display: flex; align-items: center; gap: 14px; flex: none; }
.flujo-der .mono { font-size: var(--fs-sm); color: var(--tx-2); }
.mini-pasos { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.mini-paso { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-2); font-size: 13px; color: var(--tx-2); box-shadow: inset 0 0 0 1px var(--line); }
.mini-raya { width: 10px; height: 1px; background: var(--line-2); }
.ic-mensaje { color: var(--brand); } .ic-si { color: var(--martin); } .ic-esperar, .ic-antes_llamada { color: var(--auto); } .ic-disparador { color: var(--toca); }
details.nuevo-flujo { margin-bottom: 16px; }
details.nuevo-flujo > summary { list-style: none; display: inline-flex; }
details.nuevo-flujo > summary::-webkit-details-marker { display: none; }
details.nuevo-flujo[open] > summary { margin-bottom: 10px; }
.nuevo-flujo-fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.nuevo-flujo-fila .input { flex: 1 1 260px; width: auto; }

.flujo-titulo { flex: 1; min-width: 0; }
.input-titulo {
  font-size: 20px; font-weight: 600; letter-spacing: -.015em; background: transparent; border-color: transparent;
  padding: 2px 8px; margin-left: -9px; width: 100%; max-width: 560px; min-height: 34px;
}
.input-titulo:hover { border-color: var(--line-2); background: transparent; }
.input-titulo:focus { border-color: var(--brand-line); background: var(--surface); }
.editor-y-lado { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-bottom: 24px; align-items: start; }
.lado { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
.lado .card { margin-bottom: 0; }
.pasos { display: flex; flex-direction: column; align-items: stretch; max-width: 680px; }
.paso { background: var(--surface); border: 0; border-radius: var(--r-md); box-shadow: var(--sh-card); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow var(--t-fast); }
.paso:focus-within { box-shadow: var(--shine), 0 0 0 1px var(--line-3); }
.paso-mensaje, .paso-si, .paso-esperar, .paso-antes_llamada { border-left: 0; }
.paso-disparador { box-shadow: var(--shine), 0 0 0 1px var(--toca-line); }
.paso-fin { color: var(--tx-3); text-align: center; padding: 10px; flex-direction: row; justify-content: center; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.paso-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.paso-cabeza > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.paso-ic { width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center; background: var(--surface-2); font-size: 15px; box-shadow: inset 0 0 0 1px var(--line); }
.paso-mensaje .paso-ic { color: var(--brand); background: var(--brand-soft); }
.paso-si .paso-ic { color: var(--martin); background: var(--martin-bg); }
.paso-esperar .paso-ic, .paso-antes_llamada .paso-ic { color: var(--auto); background: var(--auto-bg); }
.paso-disparador .paso-ic { color: var(--toca); background: var(--toca-bg); }
.paso-acciones { display: flex; gap: 2px; align-items: center; }
.paso-acciones button {
  width: 28px; height: 28px; border-radius: var(--r-xs); border: 0; background: transparent; color: var(--tx-3);
  cursor: pointer; display: inline-grid; place-items: center; font-size: 15px; transition: background var(--t-fast), color var(--t-fast);
}
.paso-acciones button:hover:not(:disabled) { background: var(--surface-3); color: var(--tx-1); border-color: transparent; }
.paso-acciones button:disabled { opacity: .25; cursor: default; }
.paso-acciones button[data-borrar] { margin-left: 12px; }
.paso-acciones button[data-borrar]:hover { color: var(--mal); background: var(--mal-bg); }
.paso-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--tx-2); font-weight: 400; }
.paso .select-input, .paso .input { width: auto; }
.paso .textarea { width: 100%; resize: vertical; font-family: inherit; min-height: 96px; }
.paso > .text-muted { font-size: var(--fs-xs); }
.vista-previa {
  align-self: flex-end; max-width: 88%; padding: 8px 12px; border-radius: 12px; border-bottom-right-radius: 4px; font-size: 13px; line-height: 20px;
  background: #11231b; box-shadow: inset 0 0 0 1px var(--brand-line); white-space: pre-wrap; color: var(--tx-1);
}
.vista-previa .text-muted { display: flex; align-items: center; gap: 5px; color: var(--brand); font-size: 12px; font-weight: 500; margin-bottom: 2px; }
.aviso-vacio { font-size: var(--fs-xs); color: var(--toca); display: flex; align-items: center; gap: 6px; }
.agregar { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 0; }
.agregar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--line-2); z-index: 0; }
.agregar-btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 24px; min-width: 24px; padding: 0;
  border-radius: var(--r-full); border: 1px solid var(--line-2); background: var(--bg); color: var(--tx-3); cursor: pointer; font: 500 12px var(--font-sans);
  transition: all var(--t) var(--ease); overflow: hidden;
}
.agregar-btn .ti { font-size: 14px; width: 22px; text-align: center; }
.agregar-btn .agregar-txt { max-width: 0; opacity: 0; white-space: nowrap; transition: max-width var(--t) var(--ease), opacity var(--t), padding var(--t); }
.agregar-btn:hover, .agregar-btn:focus-visible, .agregar-btn[aria-expanded="true"] { color: var(--brand); border-color: var(--brand-line); background: var(--surface); }
.agregar-btn:hover .agregar-txt, .agregar-btn:focus-visible .agregar-txt { max-width: 120px; opacity: 1; padding-right: 10px; }
.agregar-menu {
  position: relative; z-index: 2; margin-top: 8px; background: var(--surface-3); border: 0; border-radius: var(--r-md); box-shadow: var(--sh-pop);
  padding: 4px; display: flex; flex-direction: column; min-width: 300px; animation: entrar-abajo var(--t) var(--ease);
}
.agregar-menu button { display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 0; color: var(--tx-1); padding: 8px 10px; border-radius: var(--r-xs); cursor: pointer; font: 400 14px var(--font-sans); }
.agregar-menu button .paso-ic { width: 24px; height: 24px; font-size: 14px; }
.agregar-menu button:hover { background: var(--surface-2); }
.agregar-menu button[data-tipo="mensaje"] .paso-ic { color: var(--brand); background: var(--brand-soft); }
.agregar-menu button[data-tipo="si"] .paso-ic { color: var(--martin); background: var(--martin-bg); }
.agregar-menu button[data-tipo="esperar"] .paso-ic, .agregar-menu button[data-tipo="antes_llamada"] .paso-ic { color: var(--auto); background: var(--auto-bg); }
.resumen-flujo {
  max-width: 680px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 14px; padding: 10px 12px;
  background: var(--surface); border: 0; box-shadow: var(--sh-card); border-radius: var(--r-md); font-size: 13px;
}
.resumen-flujo .momento { background: var(--surface-2); border-radius: var(--r-full); padding: 3px 10px; color: var(--tx-2); }
.resumen-flujo .momento strong { color: var(--tx-1); font-weight: 500; }
.flecha-res { color: var(--tx-3); }
.variables { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--tx-2); }
.variables code {
  font-size: 12px; background: var(--surface-2); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: var(--r-xs);
  padding: 2px 6px; cursor: pointer; color: var(--brand); margin-right: 6px; transition: box-shadow var(--t-fast);
}
.variables code:hover { box-shadow: inset 0 0 0 1px var(--brand-line); }
.form-probar .input, .form-probar .select-input { width: 100%; }

/* Tablas viejas (también las del follow-up viejo) */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 8px 12px; font-size: 12px; font-weight: 500; color: var(--tx-3); text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--line); }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: var(--fs-sm); }
.data-table tr:last-child td { border-bottom: 0; }
.clickable-row { cursor: pointer; transition: background var(--t-fast); }
.clickable-row:hover td { background: var(--surface-2); }
td.recorte { max-width: 380px; display: table-cell; }

/* ── 19. Post llamada ────────────────────────────────────────────────────────── */
.card-toca { box-shadow: var(--shine), 0 0 0 1px var(--toca-line); padding: 0; overflow: hidden; position: relative; }
.card-toca::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--toca); z-index: 2; }
.card-ok { box-shadow: var(--shine), 0 0 0 1px var(--ok-line); padding: 0; overflow: hidden; }
.card-lista { padding: 0; overflow: hidden; }
.card-lista-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.card-lista-cabeza h3 { margin: 0; font-size: 15px; }
.card-toca .card-lista-cabeza h3 { color: var(--toca); }
.card-ok .card-lista-cabeza h3 { color: var(--ok); }
.card-lista .lista, .card-toca .lista, .card-ok .lista { box-shadow: none; border-radius: 0; margin: 0; border-top: 1px solid var(--line); background: transparent; }
details.para-elegir > summary { list-style: none; cursor: pointer; }
details.para-elegir > summary::-webkit-details-marker { display: none; }
details.para-elegir > summary .ti-chevron-down { transition: transform var(--t) var(--ease); }
details.para-elegir:not([open]) > summary .ti-chevron-down { transform: rotate(-90deg); }
.lista-elegir:not(.ver-todos) [data-extra] { display: none; }
.ver-mas-btn { display: flex; justify-content: center; padding: 10px; border-top: 1px solid var(--line); }
.paso-post { border: 0; border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.paso-post-cabeza { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--tx-2); }
.paso-post-cabeza label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--tx-2); }
.paso-post-cabeza .btn-icono { margin-left: auto; }
.paso-post .input-num { width: 70px !important; display: inline-block; margin-left: 0; min-height: 30px; padding: 4px 8px; }
.paso-post textarea.input, .paso-post select.input { background: var(--surface); }
.paso-hecho { opacity: .7; }
.paso-hecho .text-muted { font-size: var(--fs-xs); }
.nota-paso { font-size: var(--fs-xs); }
.programa { font-family: var(--font-sans); font-size: 13px; color: var(--tx-2); }
.icono-gris { color: var(--tx-3); font-size: 16px; cursor: help; }

/* ── 20. Popover de atajos ───────────────────────────────────────────────────── */
.atajos-pop {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  animation: entrar-abajo var(--t) var(--ease);
}
.atajos-caja { width: min(380px, calc(100vw - 32px)); background: var(--surface-3); border-radius: var(--r-lg); box-shadow: var(--sh-pop); padding: 18px 20px; }
.atajos-caja h2 { font-size: 15px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.atajos-caja dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; font-size: var(--fs-sm); color: var(--tx-2); margin: 0; }
.atajos-caja dt { display: flex; gap: 4px; }
.atajos-caja dd { margin: 0; }

/* ── 21. Login ───────────────────────────────────────────────────────────────── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 24px; box-shadow: var(--sh-raise); border-radius: var(--r-lg); animation: entrar-abajo var(--t-slow) var(--ease); }
.login-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 4px; }
.login-logo-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; color: var(--brand); background: var(--brand-soft); box-shadow: var(--brand-glow); }
.login-marca h1 { font-size: 20px; }
.login-marca p { font-size: var(--fs-sm); color: var(--tx-3); margin-top: 2px; }
.login-card .input { width: 100%; }
.login-btn { width: 100%; }
.alert { padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 14px; font-size: var(--fs-sm); border: 0; }
.alert-success { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.alert-error   { background: var(--mal-bg); color: var(--mal); box-shadow: inset 0 0 0 1px var(--mal-line); }
.alert-info    { background: var(--auto-bg); color: var(--auto); box-shadow: inset 0 0 0 1px var(--auto-line); }

/* ── 22. Pantallas del follow-up viejo (heredan, pero que no se rompan) ──────── */
.stat-card { background: var(--surface); border: 0; box-shadow: var(--sh-card); border-radius: var(--r-md); }
.stat-number { font-family: var(--font-mono); font-weight: 600; color: var(--brand); }
.badge-count { background: var(--surface-2); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--font-mono); }
.phase-item, .material-item, .payment-link-card { border-color: var(--line-2); }
.info-box { background: var(--surface-2); border-color: var(--line-2); }
.info-box code { font-family: var(--font-mono); }

/* ── 23. Celular y tablet ────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .ficha { grid-template-columns: minmax(0, 1fr) 320px; }
  .fila-leads, .cabeza-leads { grid-template-columns: 32px minmax(150px, 1.4fr) 140px minmax(120px, .9fr) minmax(0, 1.6fr) 64px 28px; }
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .ficha { grid-template-columns: 1fr; }
  .para-llamada { position: static; max-height: none; overflow: visible; }
  .charla-scroll { max-height: 70vh; }
  .espera-fila { grid-template-columns: 32px minmax(120px, 1fr) minmax(0, 1.4fr) auto; }
  .espera-fila .col-motivo-cita + .col-motivo-cita, .espera-fila .col-hace { display: none; }
}
@media (max-width: 900px) {
  body { flex-direction: column; }
  .sidebar { position: static; width: 100%; min-height: 0; padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .sidebar-logo { padding: 0 16px 6px; }
  .sidebar .nav-links { flex-direction: row; flex-wrap: wrap; gap: 2px; padding: 4px 10px; }
  .sidebar .nav-links li a { height: 32px; padding: 0 10px; }
  .nav-grupo { display: none; }
  .nav-atajo { display: none !important; }
  .sistema { margin-top: 6px; padding-top: 6px; }
  .sistema ul { display: flex; flex-wrap: wrap; }
  .sistema li a { padding: 4px 12px; }
  .nav-pie { display: none; }
  .main-content { margin-left: 0; padding: 16px 16px 80px; }
  .franja-modo { margin: -16px -16px 16px; padding: 6px 16px; }
  .page-header { flex-direction: column; }
  .dos-columnas, .editor-y-lado, .secciones-bot { grid-template-columns: 1fr; }
  .lado { position: static; }
  .agregar-menu { min-width: 0; width: 100%; }
  .barra-guardar { left: 50%; width: calc(100vw - 32px); }
  .lista-cabeza { display: none; }
  /* Filas en celular: cada pieza en su lugar, sin pisarse */
  .fila { column-gap: 12px; row-gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .fila > .avatar { grid-area: av; align-self: start; }
  .fila .fila-estado { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .fila-leads { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "av quien llam" ". estado hace" ". ult ult"; }
  .fila-leads > :nth-child(2) { grid-area: quien; } .fila-leads > :nth-child(3) { grid-area: llam; align-items: flex-end; }
  .fila-leads > :nth-child(4) { grid-area: estado; } .fila-leads > :nth-child(5) { grid-area: ult; }
  .fila-leads > :nth-child(6) { grid-area: hace; align-items: flex-end; } .fila-leads > .fila-wa { display: none; }
  .fila-rescate { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "av quien hace" ". estado estado" ". ult ult"; }
  .fila-rescate > :nth-child(2) { grid-area: quien; } .fila-rescate > :nth-child(3) { grid-area: estado; }
  .fila-rescate > :nth-child(4) { grid-area: ult; } .fila-rescate > :nth-child(5) { grid-area: hace; align-items: flex-end; }
  .fila-cola { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "av quien quien" ". estado mover"; }
  .fila-cola > .col-pos { display: none; } .fila-cola > :nth-child(3) { grid-area: quien; }
  .fila-cola > :nth-child(4) { grid-area: estado; } .fila-cola > :nth-child(5) { grid-area: mover; }
  .fila-post { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "av quien llam" ". info info" ". estado accion"; }
  .fila-post > :nth-child(2) { grid-area: quien; } .fila-post > :nth-child(3) { grid-area: llam; align-items: flex-end; }
  .fila-post > :nth-child(4) { grid-area: info; } .fila-post > :nth-child(5) { grid-area: estado; } .fila-post > :nth-child(6) { grid-area: accion; }
  .espera-fila { grid-template-columns: 32px minmax(0, 1fr); row-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .espera-fila > :not(.avatar) { grid-column: 2; }
  .espera-fila > .avatar { grid-row: 1 / span 2; align-self: start; }
  .espera-fila > .col-hace { display: none; }
  .espera-fila .acciones { justify-content: flex-start; }
  .proxima-acciones { flex-direction: row; flex-wrap: wrap; }
  .cuenta-hero { font-size: 32px; line-height: 36px; }
  .buscador .input { width: 100%; }
  .toasts { right: 16px; bottom: 16px; }
}
@media (max-width: 520px) {
  .metricas { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metrica-num { font-size: 22px; line-height: 26px; }
  .qr-caja img { width: 100%; height: auto; }
  .burbuja { max-width: 86%; }
  .embudo-etapas { flex-direction: column; }
  .conector { flex-direction: row; justify-content: flex-start; padding: 2px 10px; }
  .conector-linea { width: 24px; }
  .flujo-card { flex-direction: column; align-items: flex-start; }
}

/* El pie de "Desconectar" no se ve mientras el botón está escondido */
.conexion-pie:not(:has(button:not([hidden]))) { display: none; }
.card > p.text-muted + form, .card > p.text-muted + ul { margin-top: 12px; }
.card > h3 + p.text-muted { font-size: var(--fs-sm); line-height: 20px; }

.borrador-recursos { display: flex; flex-direction: column; gap: 4px; }
.borrador-recurso { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--tx-2); cursor: pointer; }


/* ══ Ronda ux-r2 (18/10/2026) ═════════════════════════════════════════════════
   Ajustes de jueces/ux-r2/SISTEMA-DE-DISENO.md. Va al final: pisa lo de arriba. */

:root {
  --refresco: var(--tx-3);                       /* indicador de refresco: gris, sin latido */
  --atrasado: var(--toca);                       /* programado que ya tenía que salir: ámbar (pedido de Capi) */
  --burbuja-bot: #11231b;
  --burbuja-plan-line: rgba(126, 226, 179, .22); /* mensaje programado: burbuja del bot con borde punteado */
  --hover-reveal: opacity var(--t-fast) var(--ease);
}

/* 2.1 Mono solo para dígitos en columna. Cifras dentro de frases: Geist con dígitos de ancho fijo (sin el cero tachado). */
.num, .linea-dia .mono, .embudo-pie .mono, .campana-linea .mono, .metrica-sub .mono, .proxima-horas .mono, .hora-sec .mono {
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.linea-dia .num { color: var(--tx-1); font-weight: 600; }
.linea-dia .c-toca .num, .linea-dia a.c-toca { color: var(--toca); }
.linea-dia .c-ok .num, .linea-dia .c-ok { color: var(--ok); }
.linea-dia a.c-toca:hover { text-decoration: underline; text-underline-offset: 3px; }
.embudo-pie .num, .campana-linea .num { color: var(--tx-1); }
.embudo-pie .num.mal { color: var(--mal); }
.cuenta-hero.dia { font-family: var(--font-sans); font-size: 28px; line-height: 34px; letter-spacing: -.01em; }

/* Puntos: el que late queda para lo que manda mensajes de verdad */
.punto.quieto { background: var(--ok); animation: none; }
.en-vivo .punto.quieto { width: 7px; height: 7px; }

/* 3.2 Indicador de refresco: "Actualizado hace 2 s", gris, con el ícono de sincronizar */
.en-vivo.refresco { color: var(--refresco); gap: 6px; }
.en-vivo.refresco .ti { font-size: 13px; }
.en-vivo.refresco .punto { display: none; }

/* Menú: bloque Sistema en un renglón cuando todo anda */
.sistema .sis-ok .sis-nombre { color: var(--tx-2); }
.sistema .sis-resto { padding: 2px 20px 0 34px; font-size: 12px; line-height: 16px; color: var(--tx-3); }
.sistema .sis-valor.c-mal { color: var(--mal); }

/* Franja roja de arriba (bot sin saldo, WhatsApp caído) */
.franja-modo.franja-roja { background: var(--mal-bg); color: var(--mal); border-bottom-color: var(--mal-line); }
.franja-modo.franja-roja a { color: var(--mal); }
.franja-modo.franja-roja strong { color: var(--mal); }
.franja-modo + .franja-modo { margin-top: -24px; }

/* 3.1 Acciones que aparecen al pasar el mouse (o con la fila elegida con J/K) */
.fila .revela { opacity: 0; transition: var(--hover-reveal); }
.fila:hover .revela, .fila.sel .revela, .fila:focus-within .revela { opacity: 1; }
@media (hover: none) { .fila .revela { opacity: 1; } }

/* "Confirmó / No viene": en la fila de Leads reemplaza la nota gris al pasar el mouse */
.confirmo-ctl { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0; }
.btn-mini {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-xs);
  background: var(--surface-3); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--tx-2);
  font: 500 12px/1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn-mini .ti { font-size: 13px; }
.btn-mini:hover { color: var(--tx-1); box-shadow: inset 0 0 0 1px var(--line-3); }
.btn-mini.ok:hover { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.btn-mini.mal:hover { color: var(--mal); background: var(--mal-bg); box-shadow: inset 0 0 0 1px var(--mal-line); }
.fila .revela-fila { display: none; }
.fila:hover .revela-fila, .fila.sel .revela-fila, .fila:focus-within .revela-fila { display: inline-flex; }
.fila:hover .fila-estado > .fila-nota, .fila.sel .fila-estado > .fila-nota, .fila:focus-within .fila-estado > .fila-nota { display: none; }
@media (hover: none) { .fila .revela-fila { display: inline-flex; } .fila:hover .fila-estado > .fila-nota { display: block; } }
.confirmo-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cita-conf { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--tx-1); }
.proxima-horas .confirmo-ctl { margin-left: 4px; }

/* Fila de Leads */
.fila-sub.sin-resumen { font-style: italic; color: var(--tx-3); }
.fila-ultimo .ult-quien.c-toca { color: var(--toca); font-weight: 500; }
.fila-nota.c-ok { color: var(--ok); }

/* 3.6 Estado vacío de una línea (en vez del esqueleto quieto) */
.vacio-linea { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--tx-3); margin: 0; }
.vacio-linea .ti { font-size: 16px; margin-top: 1px; flex: none; }
.charla-vacia-linea { padding: 16px; }

/* 3.7 "Generar con IA" con forma de campo de chat */
.compositor .borrador-disparador {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 16px;
  border-radius: 22px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--tx-3); font-size: 14px; cursor: text; transition: box-shadow var(--t-fast);
}
.compositor .borrador-disparador:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.compositor .borrador-disparador:focus-visible { outline: none; box-shadow: var(--focus); }
.compositor .borrador-disparador .borrador-placeholder { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compositor .borrador-disparador .btn { margin-left: auto; pointer-events: none; }
.compositor .borrador-disparador[data-ocupado] { cursor: progress; color: var(--tx-2); justify-content: flex-start; }

/* Ficha: "‹ 2 de 7 ›" al lado de "← Mi día" */
.ficha-arriba { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ficha-arriba .back-link { margin-bottom: 10px; }
.nav-fichas { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tx-3); margin-bottom: 10px; }
.nav-fichas[hidden] { display: none; }
.nav-fichas .btn-icono { width: 26px; height: 26px; }
.nav-fichas .btn-icono.apagado { opacity: .3; pointer-events: none; }

/* Post llamada, ficha: menú "Más" con Cortar (lejos de Pausar) */
details.menu-mas { position: relative; }
details.menu-mas > summary { list-style: none; cursor: pointer; }
details.menu-mas > summary::-webkit-details-marker { display: none; }
.btn-icono-txt { width: 36px; padding: 0 !important; justify-content: center; }
.menu-mas-caja {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 260px; padding: 4px; margin: 0;
  background: var(--surface-3); border-radius: var(--r-md); box-shadow: var(--sh-pop); display: flex; flex-direction: column;
  animation: entrar-abajo var(--t) var(--ease);
}
.menu-mas-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-xs);
  background: none; color: var(--tx-1); font: 500 14px/20px var(--font-sans); text-align: left; cursor: pointer;
}
.menu-mas-item .ti { font-size: 16px; margin-top: 2px; color: var(--tx-3); }
.menu-mas-item small { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--tx-3); }
.menu-mas-item:hover { background: var(--surface-2); }
.menu-mas-item.peligro { color: var(--mal); }
.menu-mas-item.peligro .ti { color: var(--mal); }

/* 3.3 El plan de mensajes como mensajes, no como formulario */
.plan-mensajes .paso-post { background: none; box-shadow: none; padding: 0; border: 0; display: grid; gap: 6px; margin: 0; }
.plan-mensajes .paso-post + .paso-post, .plan-mensajes #pasos > .paso-post:first-child { margin-top: 18px; }
.plan-mensajes .paso-post-cabeza { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tx-3); min-height: 26px; }
.plan-mensajes .paso-post-cabeza label { font: 500 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); gap: 6px; }
.plan-mensajes .paso-post .input-num { width: 52px !important; height: 26px; min-height: 26px; padding: 0 6px; text-align: center; font-size: 13px; }
.plan-mensajes .paso-cuando { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.plan-mensajes .nota-paso { font-size: 12px; line-height: 16px; color: var(--tx-3); }
.plan-mensajes .paso-post textarea.input {
  background: var(--burbuja-bot); border: 1px dashed var(--burbuja-plan-line);
  border-radius: 12px 12px 4px 12px; padding: 10px 12px; font-size: 14px; line-height: 20px; color: var(--tx-1);
}
.plan-mensajes .paso-post textarea.input:hover:not(:disabled) { border-color: var(--brand-line); }
.plan-mensajes .paso-post textarea.input:focus { border-style: solid; border-color: var(--brand-line); box-shadow: var(--focus); }
.plan-mensajes .paso-post select.input {
  justify-self: start; width: auto; max-width: 100%; height: 26px; min-height: 26px; padding: 0 28px 0 12px; font-size: 12px;
  background-color: var(--surface-2); border-radius: var(--r-full); color: var(--tx-2);
}
.plan-mensajes .paso-post .quitar { margin-left: auto; }
.plan-mensajes .revela-paso { opacity: 0; transition: var(--hover-reveal); }
.plan-mensajes .paso-post:hover .revela-paso, .plan-mensajes .paso-post:focus-within .revela-paso { opacity: 1; }
@media (hover: none) { .plan-mensajes .revela-paso { opacity: 1; } }
.plan-mensajes .paso-hecho { opacity: 1; }
.plan-mensajes .plan-burbuja { justify-self: end; max-width: 92%; animation: none; }
.plan-mensajes .plan-burbuja .burbuja-pie { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* 3.4 Atrasado: el chip solo aparece si panel.js marca el contenedor */
.chip-atrasado { display: none; }
.atrasado > .chip-atrasado, .atrasado .chip-atrasado { display: inline-flex; }
.atrasado .paso-cuando, .atrasado [data-sale-txt], [data-sale].atrasado { color: var(--atrasado); }
.chip-mini { height: 18px; padding: 0 6px; font-size: 11px; }
.card-lista-cabeza h3 .chip { font-size: 12px; font-weight: 500; }

/* Barra flotante del plan: si es borrador se ve siempre ("Aprobar y programar" es la acción del día) */
.barra-guardar.siempre { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.main-content:has(.barra-guardar.siempre) { padding-bottom: 110px; }
.barra-plan .botones-fila { gap: 8px; }

/* Post llamada, lista: "Para cobrar" con WhatsApp a la vista */
.card-ok .fila-post, .card-ok .cabeza-post { grid-template-columns: 32px minmax(150px, 1.4fr) 110px minmax(0, 1.2fr) minmax(0, 1fr) 220px; }
.fila-acciones-h { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-end; gap: 6px; }
.fila-acciones-h form { margin: 0; }

/* Mensajes automáticos: hitos con su hora en vez de la tira de iconitos */
.flujo-card { flex-direction: column; align-items: stretch; gap: 14px; }
.flujo-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hitos { list-style: none; margin: 0; padding: 4px 0 2px; display: flex; gap: 0; overflow-x: auto; }
.hito { position: relative; flex: 1 1 0; min-width: 110px; display: flex; flex-direction: column; gap: 2px; padding-top: 18px; }
.hito::before { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: var(--line-2); }
.hito:first-child::before { left: 4px; }
.hito:last-child::before { right: auto; width: 0; }
.hito-punto { position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--surface); }
.hito-momento { font-size: 13px; line-height: 18px; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.hito-cant { font-size: 12px; line-height: 16px; color: var(--tx-3); }

@media (max-width: 900px) {
  .franja-modo + .franja-modo { margin-top: -16px; }
  .card-ok .fila-post { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .flujo-cabeza { flex-direction: column; align-items: flex-start; }
  .ficha-arriba { flex-wrap: wrap; }
}
/* Leads: la columna Estado tiene chips más largos ("Sin contactar · faltan 19 h", "Respondió: «Si claro»") y el control Confirmó / No viene */
.fila-leads, .cabeza-leads { grid-template-columns: 32px minmax(160px, 1.4fr) 120px minmax(196px, 1fr) minmax(0, 1.5fr) 70px 28px; }
@media (max-width: 1200px) {
  .fila-leads, .cabeza-leads { grid-template-columns: 32px minmax(150px, 1.3fr) 110px minmax(190px, 1fr) minmax(0, 1.3fr) 64px 28px; }
}
@media (max-width: 900px) {
  .fila-leads { grid-template-columns: 32px minmax(0, 1fr) auto; }
}

/* ══ Ronda ux-r3 (18/10/2026) ═════════════════════════════════════════════════
   Ajustes de jueces/ux-r3/SISTEMA-DE-DISENO.md y de los tres jueces. Va al final: pisa lo de arriba.
   Regla del ámbar: el ámbar es "hacé algo hoy". Ninguna lista con más de un tercio de sus filas en ámbar. */

:root {
  /* Control de dos opciones (Confirmó | No viene) */
  --seg-bg: var(--surface-2);
  --seg-line: var(--line-2);
  --seg-on-ok: var(--ok-bg);    --seg-on-ok-line: var(--ok-line);
  --seg-on-mal: var(--mal-bg);  --seg-on-mal-line: var(--mal-line);
  /* Chip que no pide nada: "Sin contactar" lejos de la llamada */
  --chip-quieto-tx: var(--tx-3);
  --chip-quieto-bg: transparent;
  --chip-quieto-line: var(--line-2);
}

/* Cuenta regresiva: quieta y en Geist a más de 15 min ("en 21 h 49 min"); reloj Mono con segundos solo al final */
.cuenta-hero, .cuenta-hero.dia { font: 600 32px/38px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cuenta-hero.reloj { font: 600 40px/44px var(--font-mono); letter-spacing: -.03em; }

/* 3.1 Control "Confirmó | No viene" (reemplaza a las tres pastillas iguales) */
.seg { display: inline-flex; align-items: center; padding: 2px; gap: 2px; border-radius: var(--r-sm); background: var(--seg-bg); box-shadow: inset 0 0 0 1px var(--seg-line); margin: 0; flex: none; }
.seg-op {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border: 0; border-radius: 6px;
  background: none; color: var(--tx-3); font: 500 12px/1 var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.seg-op .ti { font-size: 13px; }
.seg-op:hover { color: var(--tx-1); background: var(--surface-3); }
.seg-op.ok.on  { color: var(--ok);  background: var(--seg-on-ok);  box-shadow: inset 0 0 0 1px var(--seg-on-ok-line); }
.seg-op.mal.on { color: var(--mal); background: var(--seg-on-mal); box-shadow: inset 0 0 0 1px var(--seg-on-mal-line); }
.seg-borrar { display: none; font-weight: 400; color: var(--tx-3); }
.seg-op.on:hover .seg-borrar, .seg-op.on:focus-visible .seg-borrar { display: inline; }
.fila .seg-borrar-que { display: none; }   /* en la fila, corto: "· Borrar" */
.seg-nota { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--tx-3); }
.seg-nota.c-toca { color: var(--toca); }
.proxima-horas .seg { margin-left: 4px; }
.fila .seg.revela-fila { margin-top: 2px; }

/* 3.2 Chip quieto: solo borde, sin fondo ni punto */
.chip.chip-quieto { --c: var(--chip-quieto-tx); --cb: var(--chip-quieto-bg); --cl: var(--chip-quieto-line); }
.chip.chip-quieto::before { display: none; }

/* 3.3 Atraso coherente: un chip por fila. Si panel.js marca el atraso, "Atrasado" (ámbar) reemplaza a "En marcha" (verde) */
.si-atrasado { display: none !important; }
.fila:has([data-sale].atrasado) .si-atrasado, .page-header:has(~ * [data-sale].atrasado) .si-atrasado { display: inline-flex !important; }
.fila:has([data-sale].atrasado) .si-no-atrasado, .page-header:has(~ * [data-sale].atrasado) .si-no-atrasado { display: none !important; }
/* El atrasado sube a "Para hacer hoy": la fila está siempre, se ve solo si panel.js la marca */
.fila-solo-atrasado:not(.atrasado) { display: none !important; }
.solo-si-atrasado:not(:has(.fila.atrasado)) { display: none; }
.fila[data-sale].atrasado { color: var(--tx-1); }

/* 3.4 Buscador en las tres listas, con "/" */
.filtros-der { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.no-coincide { display: none !important; }
body.buscando .lista-elegir [data-extra] { display: grid; }
body.buscando .ver-mas-btn { display: none; }
body.buscando details.grupo:not(:has(.fila-buscable:not(.no-coincide))) { display: none; }
body.buscando section.card:has(.fila-buscable):not(:has(.fila-buscable:not(.no-coincide))) { display: none; }
body.buscando .lista-cobrar .fila.vieja { display: grid; }
.buscar-nada { margin: -4px 0 14px; font-size: 13px; color: var(--tx-3); }

/* 3.5 Paleta Ctrl+K */
.paleta { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding-top: 14vh; background: rgba(0,0,0,.45); }
.paleta-caja { width: min(560px, calc(100vw - 32px)); background: var(--surface-3); border-radius: var(--r-lg); box-shadow: var(--sh-pop); overflow: hidden; animation: entrar-abajo var(--t) var(--ease); }
.paleta-caja input { width: 100%; height: 52px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--tx-1); font: 400 16px/1 var(--font-sans); outline: none; }
.paleta-lista { max-height: 50vh; overflow-y: auto; padding: 4px 0; }
.paleta-grupo { padding: 10px 18px 4px; font: 500 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.paleta-item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; color: var(--tx-2); font-size: 14px; cursor: pointer; }
.paleta-item .ti { font-size: 16px; color: var(--tx-3); }
.paleta-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-item.sel { background: var(--surface-2); color: var(--tx-1); box-shadow: inset 2px 0 0 var(--brand); }
.paleta-item kbd { margin-left: auto; }
.paleta-vacio { padding: 14px 18px; font-size: 13px; color: var(--tx-3); }
.paleta-pie { display: flex; gap: 16px; padding: 8px 18px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--tx-3); }
.paleta-pie kbd { margin-right: 2px; }
/* Pie del menú en dos renglones: "Ctrl K Buscar" arriba (lo nuevo), "Salir" y "? Atajos" abajo */
.nav-pie { flex-wrap: wrap; row-gap: 2px; }
.nav-pie [data-ver-paleta] { order: -1; flex-basis: 100%; }
.nav-pie kbd + kbd { margin-left: 1px; }
/* Chips largos de la columna Estado ("Sin contactar · falta menos de 1 h"): no se salen de su columna */
.fila-estado > .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Menú: "Todo en marcha" abre el detalle hacia arriba */
.sis-detalle { position: relative; }
.sis-detalle > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); line-height: 16px;
  color: var(--tx-2); padding: 4px 20px; transition: background var(--t-fast); user-select: none;
}
.sis-detalle > summary::-webkit-details-marker { display: none; }
.sis-detalle > summary:hover { background: var(--surface); color: var(--tx-1); }
.sis-detalle .sis-flecha { font-size: 13px; color: var(--tx-3); transition: transform var(--t) var(--ease); }
.sis-detalle[open] .sis-flecha { transform: rotate(180deg); }
.sis-pop {
  position: absolute; bottom: calc(100% + 6px); left: 12px; right: 12px; z-index: 40; padding: 4px;
  background: var(--surface-3); border-radius: var(--r-md); box-shadow: var(--sh-pop); display: flex; flex-direction: column;
  animation: entrar-abajo var(--t) var(--ease);
}
.sistema .sis-pop a { padding: 6px 10px; border-radius: var(--r-xs); font-size: 12px; color: var(--tx-2); }
.sistema .sis-pop a:hover { background: var(--surface-2); color: var(--tx-1); }
.sistema .sis-nombre.c-toca, .sistema .sis-valor.c-toca { color: var(--toca); }

/* Post llamada, lista: "Para cobrar" sin la pared */
.card-cobrar .card-lista-cabeza h3 { color: var(--ok); }
.fila-cobrar, .cabeza-cobrar { grid-template-columns: 32px minmax(160px, 1.4fr) minmax(0, 1.1fr) minmax(0, 1.2fr) 150px; }
.fila-cobrar .fila-acciones-h { gap: 4px; }
.wa-icono { color: var(--tx-3); }
.fila:hover .wa-icono, .wa-icono:hover, .wa-icono:focus-visible { color: var(--brand); }
.wa-grande { display: none !important; }
.fila.sel .wa-grande { display: inline-flex !important; }
.fila.sel .wa-icono { display: none; }
.lista-cobrar:not(.ver-viejos) .fila.vieja { display: none; }
.lista-sep {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 16px; margin: 0; border: 0;
  border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); text-align: left;
  font: 500 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3);
}
.lista-sep .contador { letter-spacing: 0; }
.lista-sep-boton { cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.lista-sep-boton:hover { color: var(--tx-1); background: var(--surface-2); }
.lista-sep-boton .ti { font-size: 14px; transition: transform var(--t) var(--ease); }
.lista-cobrar.ver-viejos .lista-sep-boton .ti { transform: rotate(90deg); }
.lista-cobrar:not(.ver-viejos) .lista-sep-boton { border-bottom: 0; }
.lista-sep-vacio { text-transform: none; letter-spacing: 0; font-weight: 400; font-style: italic; }

/* Post llamada, ficha: el plan más liviano. "Día" es un número que se edita al hacer clic;
   el caso de éxito mide lo que su texto (field-sizing, Chrome 123+). */
.plan-mensajes .paso-post .input-num { background: transparent; border-color: transparent; width: 40px !important; font-weight: 600; color: var(--tx-1); }
.plan-mensajes .paso-post .input-num:hover:not(:disabled), .plan-mensajes .paso-post .input-num:focus { background: var(--surface-2); border-color: var(--line-3); }
.plan-mensajes .paso-post select.sel-caso { field-sizing: content; }
.plan-mensajes .paso-post select.sel-caso:has(option[value=""]:checked) { color: var(--tx-3); background-color: transparent; border: 1px dashed var(--line-3); }
.agregar-nota { margin: 0 0 16px; }
.agregar-nota .tx-3 { font-size: 12px; }
.charla-cabeza .en-vivo.refresco { margin-left: auto; font-size: 12px; }

/* Rescate */
span.etapa { cursor: default; }
.fila-cola .fila-estado { justify-content: center; }
.seguimientos-lista { margin: 2px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.card-link-cola { color: inherit; text-decoration: none; transition: box-shadow var(--t-fast); }
.card-link-cola:hover { color: inherit; text-decoration: none; box-shadow: var(--shine), 0 0 0 1px var(--line-3); }

/* WhatsApp: Desconectar en gris; rojo solo al pasar el mouse */
.btn-desconectar:hover { color: var(--mal); background: var(--mal-bg); box-shadow: inset 0 0 0 1px var(--mal-line); }

/* Editor de flujos: Esperar y Si plegados en una línea; los últimos leads arriba, plegables */
.paso.compacto { padding-top: 10px; padding-bottom: 10px; }
.paso.compacto > :not(.paso-cabeza) { display: none; }
.paso-abrir { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.paso-abrir:hover .paso-resumen { color: var(--tx-1); }
.paso-resumen { font-weight: 400; color: var(--tx-2); }
.paso-abrir .ti-chevron-down { font-size: 14px; color: var(--tx-3); transition: transform var(--t) var(--ease); }
.paso.compacto .paso-abrir .ti-chevron-down { transform: rotate(-90deg); }
details.ejecuciones-plegable { margin: 0 0 16px; }
details.ejecuciones-plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx-2); }
details.ejecuciones-plegable > summary::-webkit-details-marker { display: none; }
details.ejecuciones-plegable > summary .ti { transition: transform var(--t) var(--ease); }
details.ejecuciones-plegable[open] > summary .ti-chevron-right { transform: rotate(90deg); }
details.ejecuciones-plegable > .card { margin-top: 10px; }

@media (max-width: 900px) {
  .fila-cobrar { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .cabeza-cobrar { display: none; }
  .filtros-der { width: 100%; }
  .filtros-der .buscador { flex: 1; }
  .sis-pop { left: 0; right: auto; bottom: auto; top: calc(100% + 6px); min-width: 220px; }
}

/* ══ Ronda ux-r4 (18/10/2026) ═════════════════════════════════════════════════
   Ajustes de jueces/ux-r4/SISTEMA-DE-DISENO.md y de los jueces closer, visual y flujo. Va al final: pisa lo de arriba.
   Regla nueva: nada de recuadros adentro de una tarjeta. Regla del ámbar: un mismo atraso se avisa una vez por pantalla. */

:root {
  /* Texto largo dentro de tarjetas (Fathom) */
  --largo-max: 300px;
  /* Fila nueva que entra con el refresco, y fila elegida con J/K */
  --flash: rgba(126, 226, 179, .10);
  --sel-line: inset 2px 0 0 var(--brand);
  /* Instrumento: números grandes */
  --num-hero: 600 32px/36px var(--font-sans);
  --num-unidad: 500 18px/36px var(--font-sans);
  --num-metrica: 600 28px/32px var(--font-sans);
}

/* Sin recuadros adentro de tarjetas: el texto de la IA va suelto, con el relleno de la tarjeta */
.resumen-ia { background: none; padding: 0; border-radius: 0; color: var(--tx-1); }

/* 3.1 El Día del plan entra con tres cifras: sin flechitas, letra normal (las flechas del teclado siguen andando) */
.plan-mensajes .paso-post .input-num {
  width: 5ch !important; min-width: 40px; padding: 0 2px; text-align: center;
  font: 600 13px/26px var(--font-sans); font-variant-numeric: tabular-nums;
  background: transparent; border-color: transparent; color: var(--tx-1);
  appearance: textfield; -moz-appearance: textfield;
}
.input-num { appearance: textfield; -moz-appearance: textfield; }
.input-num::-webkit-inner-spin-button, .input-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fila-topes .input-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; text-align: center; }
/* "DÍA 14   sale el vie 30/10 10:59", sin el punto pegado */
.plan-mensajes .paso-cuando { margin-left: 12px; }

/* 3.2 Texto largo plegado ("Ver todo") */
.largo { margin-top: 12px; }
.largo:not(.abierto) .largo-cuerpo { max-height: var(--largo-max); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.largo.largo-corto:not(.abierto) .largo-cuerpo { max-height: 64px; }
.largo.largo-cero:not(.abierto) .largo-cuerpo { display: none; }
.largo-ver { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border: 0; background: none;
  font: 500 13px/20px var(--font-sans); color: var(--brand); cursor: pointer; }
.largo-ver:hover { text-decoration: underline; text-underline-offset: 3px; }
.largo-ver .ti { font-size: 14px; transition: transform var(--t) var(--ease); }
.largo.abierto .largo-ver { color: var(--tx-3); }
.largo.abierto .largo-ver .ti { transform: rotate(180deg); }

/* 3.3 Resumen de Fathom formateado */
.fathom { font-size: 13px; line-height: 20px; color: var(--tx-2); }
.fathom .f-tit { margin: 14px 0 4px; font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.fathom .f-tit:first-child { margin-top: 0; }
.fathom p { margin: 0 0 4px; }
.fathom .f-item { position: relative; padding-left: 14px; }
.fathom .f-item::before { content: ""; position: absolute; left: 2px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--tx-3); }
.fathom .f-sub { margin-left: 14px; color: var(--tx-3); }
.fathom b { color: var(--tx-1); font-weight: 500; }

/* 3.4 Lo esencial de la llamada, tres renglones */
.kv.esencial { grid-template-columns: 96px 1fr; margin-top: 4px; }
.esencial dd { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Post, ficha: columna derecha en orden de uso. Con un atraso (o si le toca escribir) la charla y el compositor van primero */
.col-der { display: flex; flex-direction: column; min-width: 0; }
.dos-columnas:has([data-sale].atrasado) .col-der > .charla-card { order: -1; }
/* Un solo botón verde a la vista: con un atraso, el de arriba pasa a gris y lo primario queda en la franja */
.page-header:has(~ * [data-sale].atrasado) .wa-cabeza { background: var(--surface-2); color: var(--tx-1); box-shadow: inset 0 0 0 1px var(--line-2); }
/* "Pausar" vive en el menú "⋯" solo mientras hay un atraso */
.menu-mas-item.solo-con-atraso { display: none; }
.page-header:has(~ * [data-sale].atrasado) .menu-mas-item.solo-con-atraso { display: flex; }
.salidas-atraso { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.salidas-atraso form { margin: 0; }
.franja-motivo { display: block; margin-top: 2px; color: var(--tx-2); font-size: 13px; }

/* Post, lista: métricas como tira (como la línea del día de Leads) */
.tira-post { margin-bottom: 20px; }
.tira-post .tira-item { color: var(--tx-2); text-decoration: none; }
.tira-post .tira-item .num { color: var(--tx-1); font-weight: 600; }
.tira-post .tira-item:hover { color: var(--tx-1); text-decoration: underline; text-underline-offset: 3px; }
.tira-post .tira-hoy.m-toca, .tira-post .tira-hoy.m-toca .num { color: var(--toca); }
/* Un atraso, un aviso: en "Con seguimiento" la fila atrasada va en gris con "Arriba, en Para hacer hoy" */
.si-arriba { display: none !important; }
#bloque-seguimiento .fila:has([data-sale].atrasado) .si-arriba { display: inline-flex !important; }
#bloque-seguimiento .fila .si-atrasado { display: none !important; }
#bloque-seguimiento [data-sale].atrasado, #bloque-seguimiento .atrasado [data-sale-txt] { color: var(--tx-3); }

/* Leads: "A quién le toca" arranca con el responsable */
.toca-linea { gap: 4px; }
.toca-linea .toca-quien { font-weight: 500; color: var(--tx-1); }
.toca-linea.c-toca .toca-quien { color: var(--toca); }
.toca-linea.tx-3 .toca-quien { color: var(--tx-2); }
.fila-ultimo .ult-quien .cuenta { white-space: nowrap; }

/* Ficha del lead: "Próximo: … · hoy 17:00 · en 4 h" en un renglón */
.tiempo-prox { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.charla-aviso strong { font-weight: 500; }

/* Rescate: cola con una sola línea de horario; "Cuándo" angosta */
.linea-cola { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; font-size: 13px; line-height: 20px; color: var(--tx-2); }
.linea-cola .ti { font-size: 16px; color: var(--tx-3); margin-top: 2px; }
.fila-cola, .cabeza-cola { grid-template-columns: 28px 32px minmax(160px, 1fr) 140px 200px; }
.fila-cola { align-items: center; }
.fila-cola .fila-estado { justify-content: center; }

/* Menú: "Lo demás anda bien" se abre como "Todo en marcha" */
.sistema .sis-resto-det > summary.sis-resto { list-style: none; display: flex; align-items: center; gap: 6px; padding: 2px 20px 0 34px; cursor: pointer; }
.sistema .sis-resto-det > summary.sis-resto::-webkit-details-marker { display: none; }
.sistema .sis-resto-det > summary.sis-resto:hover { color: var(--tx-1); background: none; }

/* WhatsApp: "Volver a modo prueba" como link chico; el teléfono en Geist */
.btn-volver-prueba { font-size: 13px; color: var(--tx-3); margin-left: auto; align-self: flex-end; }
.estado-wa .numero { font: 500 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Bot: listas editables todas del mismo ancho (el botón de borrar va adentro del campo) */
.item-lista { position: relative; display: block; }
.item-lista textarea { width: 100%; padding-right: 36px; }
.item-lista .btn-icono { position: absolute; right: 4px; top: 4px; margin: 0; }

/* Cuenta regresiva como instrumento: «en 21 h 08 min» con los números grandes y las unidades en gris */
.cuenta-hero.instrumento { font: var(--num-unidad); color: var(--tx-3); letter-spacing: 0; }
.cuenta-hero.instrumento .cu-n { font: var(--num-hero); color: var(--tx-1); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cuenta-hero.instrumento .cu-u { margin: 0 4px; }
.cuenta-hero.instrumento .cu-u:first-child { margin-left: 0; }
.cuenta-hero.instrumento.pronto .cu-n { color: var(--toca); }

/* Sistema vivo: destello en la fila que entra o cambia; la fila elegida con J/K con línea menta */
@keyframes destello { from { background: var(--flash); } to { background: transparent; } }
.fila.destello, .fila.recien { animation: destello 1.2s var(--ease); }
.fila.sel, .espera-fila.sel, .fila.fila-atencion.sel { background: var(--surface-2); box-shadow: var(--sel-line); }
@media (prefers-reduced-motion: reduce) { .fila.destello, .fila.recien { animation: none; } }

@media (max-width: 900px) {
  .fila-cola { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .kv.esencial { grid-template-columns: 1fr; }
}
/* El gris de "dijo «…»" y "Le escribió el automático" le gana al color de la columna */
.fila-ultimo .ult-texto.tx-3, .fila-ultimo .ult-quien.tx-3 { color: var(--tx-3); }
.fila-ultimo .ult-quien.tx-2 { color: var(--tx-2); }

/* ── Ronda ux-r5 ──────────────────────────────────────────────────────────────
   Reglas nuevas: (1) un aviso ámbar una vez por pantalla y por tarjeta; (2) borde punteado solo para «agregar algo que
   todavía no existe»; (3) mono solo para horas y números en columna: dentro de una frase, Geist con cifras fijas (.num). */
:root {
  --num-frase: 500 1em/inherit var(--font-sans);
  /* kbd dentro de un botón que NO es primario */
  --kbd-bg: var(--surface-3);
  --kbd-tx: var(--tx-2);
  --kbd-line: inset 0 0 0 1px var(--line-2);
}
.num-frase { font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* 3.1 Leads, «A quién le toca»: un renglón que no se parte; si no entra, «…» (antes inline-flex: cada pedazo era una columna) */
.fila-ultimo { min-width: 0; }
.fila-ultimo .ult-quien.toca-linea { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-ultimo .ult-quien.toca-linea > * { display: inline; }
.fila-ultimo .ult-texto { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-ultimo .cuenta[hidden] { display: none; }
/* La columna dice «Último mensaje»: un poco más ancha para que el título entre */
.fila-leads, .cabeza-leads { grid-template-columns: 32px minmax(160px, 1.4fr) 120px minmax(196px, 1fr) minmax(0, 1.5fr) 92px 28px; }
@media (max-width: 1200px) {
  .fila-leads, .cabeza-leads { grid-template-columns: 32px minmax(150px, 1.3fr) 110px minmax(190px, 1fr) minmax(0, 1.3fr) 86px 28px; }
}
@media (max-width: 900px) { .fila-leads { grid-template-columns: 32px minmax(0, 1fr) auto; } }
.cabeza-leads > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Línea del día: «3 en Post llamada» en gris con link (el número ámbar ya está en el menú) */
.linea-dia a.link-quieto { color: var(--tx-2); text-decoration: none; }
.linea-dia a.link-quieto .num { color: var(--tx-1); }
.linea-dia a.link-quieto:hover { color: var(--tx-1); text-decoration: underline; text-underline-offset: 3px; }
.linea-dia .tx-2 .num { color: var(--tx-1); }
/* Pestañas de Leads con contador, como Rescate */
.tabs .tab .contador[hidden] { display: none; }

/* 3.2 kbd dentro de un botón gris: legible (el «W» del botón de WhatsApp de la ficha de Post era un rectángulo oscuro) */
.btn-secondary kbd, .btn-fantasma kbd,
.page-header:has(~ * [data-sale].atrasado) .wa-cabeza kbd { background: var(--kbd-bg); color: var(--kbd-tx); box-shadow: var(--kbd-line); }

/* 3.3 «Qué hizo el bot»: qué sigue arriba, cuándo abajo (dos renglones a propósito; nunca un «·» suelto) */
.tiempo-prox { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 0; }
.tiempo-prox > .tiempo-cuando { flex-basis: 100%; display: block; padding-left: 22px; font-size: 13px; line-height: 18px; color: var(--tx-2);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiempo-prox > .tiempo-cuando .cuenta[hidden] { display: none; }

/* 3.4 Aviso del bot en un renglón (la regla completa va en el title) */
.charla-aviso.aviso-un-renglon { font-size: 12px; line-height: 16px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.charla-aviso.aviso-un-renglon > span { overflow: hidden; text-overflow: ellipsis; }

/* 3.5 Rescate: chips solo para Te toca / Lo lleva Martin / Le mandó el link; lo demás, texto gris */
.estado-txt { font-size: 13px; line-height: 20px; color: var(--tx-3); }
.estado-txt.c-mal { color: var(--mal); }
/* «Último mensaje»: la frase del lead arriba (blanco), quién le respondió abajo (gris, 12 px) */
.fila-ultimo .ult-pie { display: block; max-width: 100%; font-size: 12px; line-height: 16px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-rescate .fila-ultimo .ult-texto.tx-1 { font-size: 13px; }
/* Cola: sin «Cuándo» ni la columna de «Mover». El chip va al lado del nombre; las acciones flotan a la derecha al pasar el mouse */
.fila-nombre-linea { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fila-nombre-linea .fila-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-cola, .cabeza-cola { grid-template-columns: 28px 32px minmax(0, 1fr); }
.fila-cola > .fila-estado { position: absolute; right: 148px; top: 50%; transform: translateY(-50%); flex-direction: row; align-items: center; gap: 6px; }
.fila-cola > .col-mover { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 900px) {
  .fila-cola { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .fila-cola > .fila-estado, .fila-cola > .col-mover { position: static; transform: none; }
}

/* 3.6 Punteado solo para «agregar»: lo demás, borde sólido */
.chip-prueba, .pill-prueba { border-style: solid; }
.tab-prueba, .tab-solo.tab-prueba { border-style: solid; border-color: var(--line-2); }
.tab-prueba.tab-on { border-color: var(--toca-line); }
.burbuja-simulada { border-style: solid; }
.plan-mensajes .paso-post textarea.input { border-style: solid; }
.plan-mensajes .paso-post select.sel-caso:has(option[value=""]:checked) { border: 1px solid var(--line-2); }
.borrador-caja { border-style: solid; }

/* 3.7 El punto «En vivo» late (2 s), único movimiento continuo; quieto con reduced-motion */
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.chip-vivo::before, .punto.vivo { animation: latido 2s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .chip-vivo::before, .punto.vivo { animation: none; } }

/* Burbujas: letra de emojis de respaldo (el glifo raro del Día 30) */
.burbuja-texto, .plan-mensajes .paso-post textarea.input { font-family: var(--font-sans), "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }

/* Post, ficha: «Atrasado» una sola vez (la franja y el chip del Día 1). El resto en gris. */
.page-header:has(~ * [data-sale].atrasado) .chip-estado-cabeza { --c: var(--chip-quieto-tx); --cb: var(--chip-quieto-bg); --cl: var(--chip-quieto-line); }
.page-header:has(~ * [data-sale].atrasado) .chip-estado-cabeza::before { display: none; }
.plan-mensajes .atrasado .paso-cuando, .plan-mensajes .atrasado [data-sale-txt] { color: var(--tx-2); }
.plan-mensajes .atrasado .chip-atrasado { color: var(--toca); }
.charla-card [data-sale].atrasado, .charla-card .atrasado [data-sale-txt] { color: var(--tx-2); }
.franja-motivo.motivo-viejo { color: var(--tx-2); }

/* Post, lista: «Con seguimiento» plegado cuando todas sus filas ya están arriba (lo marca panel.js) */
.nota-arriba { display: none; margin-left: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 13px/20px var(--font-sans); color: var(--tx-2); }
.nota-arriba:hover { color: var(--tx-1); }
[data-plegar-si-arriba].todos-arriba .nota-arriba { display: inline; }
[data-plegar-si-arriba].todos-arriba > .lista { display: none; }
/* «Para cobrar» es una lista para trabajar, no un «anda»: título en blanco, el ícono puede quedar menta */
.card-cobrar .card-lista-cabeza h3 { color: var(--tx-1); }
.card-cobrar .card-lista-cabeza h3 .ti { color: var(--ok); }
/* Misma grilla a la izquierda en las tres secciones (avatar, persona) y la columna de acciones del mismo ancho */
.fila-cobrar, .cabeza-cobrar { grid-template-columns: 32px minmax(150px, 1.4fr) minmax(0, 1.3fr) minmax(0, 1.1fr) 170px; align-items: center; }
.fila-post { align-items: center; }

/* WhatsApp y envío: las dos tarjetas del mismo alto; «Desconectar» al pie */
.dos-columnas:has(> .conexion-card) { align-items: stretch; }
.conexion-card { display: flex; flex-direction: column; }
.conexion-card > .conexion-pie { margin-top: auto; }

/* Menú: «Salir» en su renglón, separado por una línea */
.nav-pie .nav-salir { flex-basis: 100%; order: 9; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }

/* Mensajes antes de la llamada: un renglón a los mensajes de Rescate y Post */
.otros-mensajes { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; font-size: 13px; line-height: 20px; color: var(--tx-3); }
.otros-mensajes .ti { font-size: 16px; margin-top: 2px; }
.otros-mensajes a { color: var(--tx-2); }
.otros-mensajes a:hover { color: var(--tx-1); }
/* Editor: cada mensaje una vez. El campo se dibuja como burbuja; la vista previa solo mientras editás ese paso */
.paso-mensaje .textarea { background: var(--burbuja-bot); border: 1px solid var(--burbuja-plan-line); border-radius: 12px 12px 4px 12px;
  padding: 10px 12px; font-size: 14px; line-height: 20px; color: var(--tx-1); }
.paso-mensaje .textarea:focus { border-color: var(--brand-line); box-shadow: var(--focus); outline: none; }
.paso-mensaje .vista-previa { display: none; }
.paso-mensaje:focus-within .vista-previa { display: block; }

/* ══ Ronda ux-r6 (18/10/2026) ═════════════════════════════════════════════════
   jueces/ux-r6/SISTEMA-DE-DISENO.md y los jueces closer, visual y flujo. Va al final: pisa lo de arriba.
   Regla del ámbar: UN BLOQUE, UN ÁMBAR. En cada tarjeta, el ámbar va en una sola cosa: la que pide acción ahora
   (atrasado, o te escribió y nadie le contestó). Título, borde, contadores y fechas en blanco o gris.
   Regla de mono: solo horas en columna. Teléfonos y fechas dentro de una frase, .num (Geist con cifras fijas). */
:root {
  /* Ámbar «falta poco»: va a necesitar a Martin pero todavía no (sin confirmar a menos de 24 h) */
  --toca-suave: rgba(243, 194, 107, .70);
  /* Emojis que Windows 10 no trae (hipótesis del rectángulo del Día 30): Noto Color Emoji de Google Fonts primero */
  --font-emoji: "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji";
}
.c-toca-suave { color: var(--toca-suave); }
.burbuja-texto, .plan-burbuja, .vista-previa, .msj-vista, .plan-mensajes .paso-post textarea.input, .paso-mensaje .textarea {
  font-family: "Geist", var(--font-emoji), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 3.1 Post lista, «Para hacer»: contorno gris como las demás; la barra ámbar solo en la fila que pide acción (.fila-atencion) */
.card-toca { box-shadow: var(--sh-card); }
.card-toca::before { display: none; }
.card-toca .card-lista-cabeza h3 { color: var(--tx-1); }
.card-toca .card-lista-cabeza h3 .ti { color: var(--toca); }
/* La fecha del atraso en gris: en la fila ya están la barra y el chip «Atrasado» */
#bloque-hoy .atrasado [data-sale-txt], #bloque-hoy [data-sale].atrasado .fila-sub { color: var(--tx-2); }
/* 3.2 «hace N d» siempre gris en Post lista (antes ámbar a los 2 días) */
#bloque-hoy .hace.tarde, #bloque-seguimiento .hace.tarde { color: var(--tx-3); }

/* Post lista: UNA grilla para las tres secciones (Persona · Llamada · Qué pasa · Estado · Acción).
   Antes eran tres (sistema.css:531, :1270 y :1405/:1704). En el celular siguen las de 900 px. */
@media (min-width: 901px) {
  .fila-post, .cabeza-post, .fila-cobrar, .cabeza-cobrar, .card-ok .fila-post, .card-ok .cabeza-post {
    grid-template-columns: 32px minmax(170px, 1.3fr) 100px minmax(0, 2fr) 180px 170px;
  }
}
.fila-cobrar { align-items: center; }
/* La tira de números y el buscador en el mismo renglón; «Actualizado» al lado del título */
.tira-fila { margin-bottom: 20px; align-items: center; }
.tira-fila .tira-post { margin: 0; }
.titulo-linea { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.titulo-linea h1 { margin: 0; }
.titulo-linea .en-vivo { font-size: 12px; }

/* 3.4 Post ficha, franja del atraso: el texto arriba (qué pasó, qué pasa si no hacés nada, mirá tu WhatsApp, el dato) y los botones abajo */
.franja:has(> .franja-texto > .franja-atraso:not([hidden])) { flex-direction: column; align-items: flex-start; gap: 0; }
.franja:has(> .franja-texto > .franja-atraso:not([hidden])) > .franja-texto { flex: none; width: 100%; }
.franja-atraso { display: flex; flex-direction: column; gap: 2px; max-width: 72ch; }
.franja-linea { display: block; }
.franja-gris { color: var(--tx-2); }
.franja-dato { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--tx-3); }
.franja .salidas-atraso { margin-top: 10px; padding-left: 28px; }
.franja:has(> .franja-texto > .franja-atraso:not([hidden])) > .botones-fila:empty { display: none; }
/* El Día 1 del plan: «atrasado · ver arriba» en ámbar, sin chip ni fecha (la fecha va una vez, en la franja) */
.plan-mensajes .chip-atrasado, .plan-mensajes .atrasado .chip-atrasado { display: none !important; }
.plan-mensajes .atrasado [data-sale-txt] { color: var(--toca); }
/* En la charla vacía, con un atraso queda solo «Todavía no le escribió nadie.» */
.charla-vacia-linea .sale-plan.atrasado { display: none; }

/* 3.5 La charla arranca en el último mensaje y con aire arriba: el de arriba se lee como «hay más», no como cortado */
.charla-scroll { scroll-padding-top: 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }

/* 3.3 Leads: el resumen en dos renglones (la columna «A quién le toca» ya no repite «A nadie: confirmado») */
.fila-leads .fila-quien .fila-sub:not(.sin-resumen) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 18px; }
/* «Último mensaje» dice de quién: «bot · hace 1 min». Un poco más ancha para que entre en un renglón */
.fila-hace { min-width: 0; }
.hace-linea { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 16px; color: var(--tx-3); }
.hace-quien { color: var(--tx-3); }
@media (min-width: 901px) {
  .fila-leads, .cabeza-leads { grid-template-columns: 32px minmax(160px, 1.3fr) 112px minmax(176px, .8fr) minmax(0, 1.6fr) 104px 28px; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .fila-leads, .cabeza-leads { grid-template-columns: 32px minmax(150px, 1.2fr) 104px minmax(170px, .8fr) minmax(0, 1.4fr) 100px 28px; }
}
/* «Sin confirmar» (texto, no chip) */
.fila-estado .estado-txt.c-toca-suave { font-weight: 500; }
/* Contadores de las pestañas con el lugar reservado: «·» mientras cuenta, «?» si falló */
.tabs .tab .contador.contador-espera, .tabs .tab .contador.contador-fallo { background: var(--neutro-bg); color: var(--tx-3); }

/* Rescate: la cola más angosta (era una tabla de 1.100 px para un número y un nombre) */
.lista:has(> .cabeza-cola), .nota-cola, .linea-cola { max-width: 760px; }

/* Recordatorios: las otras dos tarjetas (Rescate y Post llamada) en vez del renglón de links */
.otros-flujos { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 20px; }
.otros-flujos-tit { margin-top: 8px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.flujo-card-chica { padding: 12px 18px; }
.flujo-card-chica .flujo-nombre { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.flujo-card-chica .flujo-nombre .ti { font-size: 16px; color: var(--tx-3); }
details.nuevo-flujo > summary.btn-sm { height: 30px; }

/* Editor de flujos: el disparador en menta (no pide acción), el campo con alto automático y sin esquina de estirar,
   las variables como chip y los controles al pasar el mouse */
.paso-disparador { box-shadow: var(--shine), 0 0 0 1px var(--brand-line); }
.paso-disparador .paso-ic { color: var(--brand); background: var(--brand-soft); }
.ic-disparador { color: var(--brand); }
.paso .textarea.campo-msj { resize: none; min-height: 44px; overflow: hidden; }
.paso-mensaje:has(> .msj-vista):not(.editando) > textarea.campo-msj { display: none; }
.paso-mensaje.editando > .msj-vista { display: none; }
.msj-vista { background: var(--burbuja-bot); border: 1px solid var(--burbuja-plan-line); border-radius: 12px 12px 4px 12px;
  padding: 10px 12px; font-size: 14px; line-height: 22px; color: var(--tx-1); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
  transition: border-color var(--t-fast); }
.msj-vista:hover { border-color: var(--brand-line); }
.msj-vista:focus-visible { outline: none; box-shadow: var(--focus); }
.var-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; margin: 0 1px; border-radius: 6px; vertical-align: 1px;
  background: var(--surface-3); color: var(--brand); font: 500 12px/20px var(--font-mono); white-space: nowrap; }
.paso-acciones { transition: opacity var(--t-fast) var(--ease); }
.paso:not(:hover):not(:focus-within) .paso-acciones { opacity: 0; }
.pasos .agregar-btn { opacity: 0; transition: opacity var(--t-fast) var(--ease), color var(--t-fast), border-color var(--t-fast); }
.pasos:hover .agregar-btn { opacity: .45; }
.pasos .agregar:hover .agregar-btn, .pasos .agregar:focus-within .agregar-btn, .pasos .agregar-btn[aria-expanded="true"],
.pasos .agregar:nth-last-child(2) .agregar-btn { opacity: 1; }   /* el último «+», antes de «Fin», siempre a la vista */
@media (hover: none) { .paso-acciones, .pasos .agregar-btn { opacity: 1 !important; } }
/* Post llamada (Capi 22/10): progreso del seguimiento, un punto por mensaje del plan */
.seg-linea { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.seg-puntos { display: inline-flex; gap: 3px; }
.seg-puntos i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-3); display: inline-block; }
.seg-puntos i.lleno { background: var(--ok); border-color: var(--ok); }
.seg-resp { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 500; }
.tira-seg { margin-top: 4px; }
.tira-seg .ti { font-size: 14px; vertical-align: -2px; opacity: .8; }

/* Post llamada (Capi 22/10): encabezados que ordenan */
.th-orden { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; border-radius: 4px; }
.th-orden .ti { font-size: 13px; opacity: 0; transition: opacity .15s; }
.th-orden:hover .ti, .th-orden:focus-visible .ti, .th-orden.activo .ti { opacity: 1; }
.th-orden:hover, .th-orden.activo { color: var(--text-1, inherit); }
.th-orden:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* «Con seguimiento»: la acción es solo la flecha, el espacio va a la columna Seguimiento (progreso + respondió + próximo) */
@media (min-width: 901px) {
  #con-plan .fila-post, #con-plan .cabeza-post { grid-template-columns: 32px minmax(150px, 1.2fr) 80px minmax(250px, 2.4fr) 160px 28px; }
}