:root {
  /* ---- Attio/Twenty: base neutra, un solo acento ----
     Reemplaza la paleta "Forja" (Papel/Tinta + 2 acentos Cobalto/Ascua) --
     el cliente vio Forja en vivo y la rechazó ("colores raros", pills
     pastel/sólidos que no le cerraban). Investigación de esta sesión sobre
     el código fuente real de twenty.com y Attio: el color va en el TEXTO
     del pill, no en el fondo -- fondo casi blanco (luminosidad >=93%) +
     texto oscuro saturado. Un solo acento, usado solo para interacción
     (foco, links, botón primario), nunca decorativo. */
  --bg: #FFFFFF;
  --bg-alt: #FBFBFB;
  --panel: #FFFFFF;
  --border: #EEEFF1;
  --text: #101112;
  --muted: #6e6f73;

  --accent-torre: #266DF0;
  --accent-torre-fill: #266DF0;
  --accent-torre-fill-hover: #1d57c4;
  --accent-torre-soft: #E5EEFF;
  /* La voz de Turno ya no cambia de color -- "un solo acento" fue regla
     explícita del research aprobado. .voice-turno queda como hook
     estructural por si a futuro se necesita diferenciar sin usar color. */
  --accent-turno: var(--accent-torre);
  --accent-turno-fill: var(--accent-torre-fill);
  --accent-turno-fill-hover: var(--accent-torre-fill-hover);
  --accent-turno-soft: var(--accent-torre-soft);

  --accent: var(--accent-torre);
  --accent-hover: var(--accent-torre);
  --accent-fill: var(--accent-torre-fill);
  --accent-fill-hover: var(--accent-torre-fill-hover);
  --accent-soft: var(--accent-torre-soft);

  --accent-system: var(--accent-torre);
  --accent-system-hover: var(--accent-torre-fill);
  --accent-system-soft: var(--accent-torre-soft);

  /* Pills de estado -- fórmula fondo-casi-blanco + texto-oscuro-saturado,
     sacada del código real de Attio (docs.attio.com/sdk/components/badge). */
  --good-bg: #E0FCED;
  --good-text: #007D53;
  --warn-bg: #FFF3CC;
  --warn-text: #874D00;
  --bad-bg: #FFEBEB;
  --bad-text: #BA2525;
  --neutral-bg: #F1F2F3;
  --neutral-text: #505155;

  --accent-mint: var(--good-text);
  --funnel-1: color-mix(in srgb, var(--accent-system) 14%, white);
  --funnel-2: color-mix(in srgb, var(--accent-system) 38%, white);
  --funnel-3: color-mix(in srgb, var(--accent-system) 68%, white);
  --funnel-4: var(--accent-system);
  --funnel-lost: #b0b0bc;
  --danger: var(--bad-text);
  --overdue: var(--bad-bg);
  --overdue-text: var(--bad-text);
  --today: var(--warn-bg);
  --today-text: var(--warn-text);
  --sidebar-bg: #FBFBFB;
  --sidebar-text: #6e6f73;
  --sidebar-text-active: #101112;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 2px rgba(16,17,18,0.04);

  /* ---- Tokens de ESTRUCTURA (no de color) ----
     Son los que hacen que un skin no sea solo otra paleta: tipografía,
     densidad, radios, ancho del panel lateral y tamaño de los numerales.
     El bloque :root de acá es la estructura "Neutro", la actual; cada
     skin de más abajo pisa los que necesita. */
  --font-ui: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --base-size: 15px;
  --base-leading: 1.5;
  --panel-pad: 18px 20px;
  --card-pad: 16px 18px;
  --card-radius: var(--radius);
  --stat-min: 150px;
  --stat-gap: 14px;
  --stat-size: 24px;
  --stat-weight: 700;
  --label-transform: uppercase;
  --label-tracking: 0.05em;
  --sidebar-width: 232px;
  --nav-radius: 10px;
  --stack-pad: 14px 16px;
  --stack-min: 280px;
  --row-pad: 8px 12px;
  --row-radius: 8px;

  /* Muestras del selector de apariencia (Configuración → Apariencia).
     Viven acá y no sueltas en las tarjetas porque la regla del proyecto
     es que ningún hex literal salga de :root. Son las tres tintas que
     representan a cada skin: fondo, panel y acento. */
  /* El QR necesita fondo claro sí o sí para que la cámara lo lea, en
     cualquier tema y en modo oscuro también. */
  --qr-paper: #FFFFFF;

  --skin-neutro-a: #FBFBFB;
  --skin-neutro-b: #FFFFFF;
  --skin-neutro-c: #266DF0;
  --skin-moderno-a: #16161E;
  --skin-moderno-b: #26262F;
  --skin-moderno-c: #A79CFF;
  --skin-suave-a: #F1EDF8;
  --skin-suave-b: #FFFFFF;
  --skin-suave-c: #8B6BD4;
  --skin-futurista-a: #0B1226;
  --skin-futurista-b: #16224A;
  --skin-futurista-c: #5CC8FF;
}

/* ---- selector de apariencia (Configuración → Apariencia) ---- */
.skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.skin-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.skin-card:hover { border-color: var(--accent); }
.skin-card[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.skin-swatch {
  display: flex;
  height: 46px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.skin-swatch span { flex: 1; }
.skin-swatch span:last-child { flex: 0 0 34%; }
.skin-card-name { font-weight: 600; font-size: 13px; }
.skin-card-hint { font-size: 12px; color: var(--muted); line-height: 1.35; }
.skin-mode-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---- marcador en el celular ---- */
.qr-pair { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin: 14px 0 4px; }
.qr-paper {
  background: var(--qr-paper);
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  line-height: 0;
  flex-shrink: 0;
}
.qr-steps { margin: 0; padding-left: 20px; font-size: 13px; color: var(--muted); max-width: 42ch; }
.qr-steps li { margin-bottom: 6px; }
.qr-steps strong { color: var(--text); }

.dial-lead { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.dial-name { font-size: 20px; font-weight: 600; }
.dial-phone { font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.dial-meta { font-size: 13px; color: var(--muted); }
.btn-dial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px;
  font-size: 18px;
  font-weight: 600;
  border-radius: var(--radius);
  background: var(--accent-fill);
  color: white;   /* mismo criterio que .btn.primary: el relleno del acento ya garantiza 3:1 */
  border: none;
  text-decoration: none;
  cursor: pointer;
}
.btn-dial:hover { background: var(--accent-fill-hover); }
.dial-timer {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  font-size: 15px;
}
.dial-timer-value { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dial-hint { font-size: 13px; color: var(--muted); margin-top: 10px; }
.queue-dial-note {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--good-bg);
  color: var(--good-text);
  font-size: 13px;
}
.panel-subtitle {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.skin-swatch[data-skin-preview="neutro"] span:nth-child(1) { background: var(--skin-neutro-a); }
.skin-swatch[data-skin-preview="neutro"] span:nth-child(2) { background: var(--skin-neutro-b); }
.skin-swatch[data-skin-preview="neutro"] span:nth-child(3) { background: var(--skin-neutro-c); }
.skin-swatch[data-skin-preview="moderno"] span:nth-child(1) { background: var(--skin-moderno-a); }
.skin-swatch[data-skin-preview="moderno"] span:nth-child(2) { background: var(--skin-moderno-b); }
.skin-swatch[data-skin-preview="moderno"] span:nth-child(3) { background: var(--skin-moderno-c); }
.skin-swatch[data-skin-preview="futurista"] span:nth-child(1) { background: var(--skin-futurista-a); }
.skin-swatch[data-skin-preview="futurista"] span:nth-child(2) { background: var(--skin-futurista-b); }
.skin-swatch[data-skin-preview="futurista"] span:nth-child(3) { background: var(--skin-futurista-c); }
.skin-swatch[data-skin-preview="suave"] span:nth-child(1) { background: var(--skin-suave-a); }
.skin-swatch[data-skin-preview="suave"] span:nth-child(2) { background: var(--skin-suave-b); }
.skin-swatch[data-skin-preview="suave"] span:nth-child(3) { background: var(--skin-suave-c); }

/* Oscuro por preferencia del sistema (mientras no haya elegido nada a
   mano con el botón claro/oscuro -- ahí manda [data-theme] de abajo, no
   esto) y oscuro elegido a mano son el mismo bloque de valores, repetido
   una vez por cada selector -- CSS no permite combinar "media O
   atributo" sin repetir las propiedades. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0C0D;
    --bg-alt: #1B1C1F;
    --panel: #1B1C1F;
    --border: #2F3033;
    --text: #F1F2F3;
    --muted: #A2A4A7;

    --accent-torre: #7c93ff;
    --accent-torre-fill: #266DF0;
    --accent-torre-fill-hover: #4a7ff5;
    --accent-torre-soft: #1D2E55;
    --accent-turno: var(--accent-torre);
    --accent-turno-fill: var(--accent-torre-fill);
    --accent-turno-fill-hover: var(--accent-torre-fill-hover);
    --accent-turno-soft: var(--accent-torre-soft);

    --accent-hover: var(--accent-torre);
    --accent-soft: var(--accent-torre-soft);
    --accent-system: var(--accent-torre);
    --accent-system-hover: var(--accent-torre-fill);
    --accent-system-soft: var(--accent-torre-soft);

    --good-bg: #1D4034;
    --good-text: #4ADE9C;
    --warn-bg: #3A2D12;
    --warn-text: #FFC94A;
    --bad-bg: #4E1B28;
    --bad-text: #FF8A8A;
    --neutral-bg: #2F3033;
    --neutral-text: #A2A4A7;

    --accent-mint: var(--good-text);
    --funnel-1: color-mix(in srgb, var(--accent-system) 18%, #0B0C0D);
    --funnel-2: color-mix(in srgb, var(--accent-system) 42%, #0B0C0D);
    --funnel-3: color-mix(in srgb, var(--accent-system) 70%, #0B0C0D);
    --funnel-4: var(--accent-system);
    --funnel-lost: #55555f;
    --danger: var(--bad-text);
    --overdue: var(--bad-bg);
    --overdue-text: var(--bad-text);
    --today: var(--warn-bg);
    --today-text: var(--warn-text);
    --sidebar-bg: #1B1C1F;
    --sidebar-text: #A2A4A7;
    --sidebar-text-active: #F1F2F3;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  }
}

:root[data-theme="dark"] {
  --bg: #0B0C0D;
  --bg-alt: #1B1C1F;
  --panel: #1B1C1F;
  --border: #2F3033;
  --text: #F1F2F3;
  --muted: #A2A4A7;

  --accent-torre: #7c93ff;
  --accent-torre-fill: #266DF0;
  --accent-torre-fill-hover: #4a7ff5;
  --accent-torre-soft: #1D2E55;
  --accent-turno: var(--accent-torre);
  --accent-turno-fill: var(--accent-torre-fill);
  --accent-turno-fill-hover: var(--accent-torre-fill-hover);
  --accent-turno-soft: var(--accent-torre-soft);

  --accent-hover: var(--accent-torre);
  --accent-soft: var(--accent-torre-soft);
  --accent-system: var(--accent-torre);
  --accent-system-hover: var(--accent-torre-fill);
  --accent-system-soft: var(--accent-torre-soft);

  --good-bg: #1D4034;
  --good-text: #4ADE9C;
  --warn-bg: #3A2D12;
  --warn-text: #FFC94A;
  --bad-bg: #4E1B28;
  --bad-text: #FF8A8A;
  --neutral-bg: #2F3033;
  --neutral-text: #A2A4A7;

  --accent-mint: var(--good-text);
  --funnel-1: color-mix(in srgb, var(--accent-system) 18%, #0B0C0D);
  --funnel-2: color-mix(in srgb, var(--accent-system) 42%, #0B0C0D);
  --funnel-3: color-mix(in srgb, var(--accent-system) 70%, #0B0C0D);
  --funnel-4: var(--accent-system);
  --funnel-lost: #55555f;
  --danger: var(--bad-text);
  --overdue: var(--bad-bg);
  --overdue-text: var(--bad-text);
  --today: var(--warn-bg);
  --today-text: var(--warn-text);
  --sidebar-bg: #1B1C1F;
  --sidebar-text: #A2A4A7;
  --sidebar-text-active: #F1F2F3;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
}

/* =====================================================================
   Temas (skins): tres identidades completas, no tres paletas
   ---------------------------------------------------------------------
   El claro/oscuro sigue viviendo en [data-theme]. El tema es un segundo
   eje, [data-skin], y cada uno cambia cuatro cosas además del color:
   tipografía, densidad, radios y disposición (ancho del panel lateral,
   cuántas tarjetas entran por fila, cuánto respira cada panel).

   Sin tema elegido no hay atributo y manda el bloque :root: ese es
   "Neutro", el look actual que el cliente ya aprobó.

     · Moderno        -- denso, plano, grafito y violeta. Linear/Vercel.
     · Suave          -- aire, curvas grandes, lavanda cálido. Menos filas
                         por pantalla, todo más grande y más redondo.
     · Futurista      -- vidrio y profundidad: paneles translúcidos con
                         desenfoque, filo iluminado y azul eléctrico.

   La variante clara lleva :not([data-theme="dark"]) para no empatar en
   especificidad con el bloque oscuro base: sin eso ganaría el que esté
   más abajo en el archivo, no el que corresponde.

   Ojo: si en Configuración → Marca hay un color cargado, applyBranding()
   lo escribe inline sobre :root y pisa el acento del tema, salvo que en
   Apariencia se marque "usar el acento de la paleta".
   ===================================================================== */

/* =========================== MODERNO ================================ */

:root[data-skin="moderno"] {
  --base-size: 14px;
  --base-leading: 1.45;
  --radius: 6px;
  --radius-sm: 4px;
  --card-radius: 6px;
  --panel-pad: 14px 16px;
  --card-pad: 12px 14px;
  --stat-min: 132px;
  --stat-gap: 10px;
  --stat-size: 22px;
  --stat-weight: 600;
  --label-tracking: 0.07em;
  --sidebar-width: 206px;
  --nav-radius: 6px;
  --stack-pad: 12px 14px;
  --stack-min: 228px;
  --row-pad: 7px 10px;
  --row-radius: 6px;
}
:root[data-skin="moderno"]:not([data-theme="dark"]) {
  --bg: #FCFCFD;
  --bg-alt: #F6F6F9;
  --panel: #FFFFFF;
  --border: #E7E7EF;
  --text: #16151C;
  --muted: #6B6A7B;
  --accent-torre: #5B4BD6;
  --accent-torre-fill: #5B4BD6;
  --accent-torre-fill-hover: #4839B5;
  --accent-torre-soft: #EDEAFD;
  --good-bg: #E7F8EF;
  --good-text: #04795B;
  --warn-bg: #FDF1D6;
  --warn-text: #8A5A00;
  --bad-bg: #FDEAEE;
  --bad-text: #B3223E;
  --neutral-bg: #F1F1F6;
  --neutral-text: #56556A;
  --funnel-1: color-mix(in srgb, var(--accent-system) 14%, var(--bg));
  --funnel-2: color-mix(in srgb, var(--accent-system) 38%, var(--bg));
  --funnel-3: color-mix(in srgb, var(--accent-system) 68%, var(--bg));
  --funnel-lost: #ADACC0;
  --sidebar-bg: #F6F6F9;
  --sidebar-text: #6B6A7B;
  --sidebar-text-active: #16151C;
  --shadow-card: none;
}
:root[data-skin="moderno"][data-theme="dark"] {
  --bg: #0C0C11;
  --bg-alt: #16161E;
  --panel: #16161E;
  --border: #26262F;
  --text: #ECECF2;
  --muted: #9E9DB0;
  --accent-torre: #A79CFF;
  --accent-torre-fill: #5B4BD6;
  --accent-torre-fill-hover: #6E5FE6;
  --accent-torre-soft: #241F49;
  --good-bg: #14342A;
  --good-text: #4FE0A5;
  --warn-bg: #382B12;
  --warn-text: #FFCE5C;
  --bad-bg: #47182A;
  --bad-text: #FF8FA8;
  --neutral-bg: #26262F;
  --neutral-text: #9E9DB0;
  --funnel-1: color-mix(in srgb, var(--accent-system) 18%, var(--bg));
  --funnel-2: color-mix(in srgb, var(--accent-system) 42%, var(--bg));
  --funnel-3: color-mix(in srgb, var(--accent-system) 70%, var(--bg));
  --funnel-lost: #4E4D60;
  --sidebar-bg: #16161E;
  --sidebar-text: #9E9DB0;
  --sidebar-text-active: #ECECF2;
  --shadow-card: none;
}
/* Estructura propia: todo plano, la jerarquía la da el borde y no la
   sombra; el numeral del KPI pasa arriba del rótulo. */
:root[data-skin="moderno"] .panel,
:root[data-skin="moderno"] .stat-card,
:root[data-skin="moderno"] .stack-card { box-shadow: none; }
:root[data-skin="moderno"] .stat-card { display: flex; flex-direction: column-reverse; gap: 2px; }
:root[data-skin="moderno"] .stat-label { margin-top: 0; font-size: 10px; }
:root[data-skin="moderno"] .stat-card-featured { border-left-width: 2px; }
:root[data-skin="moderno"] .panel h2 { font-size: 12px; margin-bottom: 10px; }
:root[data-skin="moderno"] .nav-item { padding: 7px 10px; font-size: 13px; }
:root[data-skin="moderno"] .badge-solid { border-radius: 4px; }

/* ============================ SUAVE ================================= */

:root[data-skin="suave"] {
  --base-size: 15px;
  --base-leading: 1.62;
  --radius: 16px;
  --radius-sm: 12px;
  --card-radius: 20px;
  --panel-pad: 26px 28px;
  --card-pad: 22px 24px;
  --stat-min: 196px;
  --stat-gap: 18px;
  --stat-size: 32px;
  --stat-weight: 600;
  --label-transform: none;
  --label-tracking: 0;
  --sidebar-width: 262px;
  --nav-radius: 999px;
  --stack-pad: 20px 22px;
  --stack-min: 330px;
  --row-pad: 14px 18px;
  --row-radius: 16px;
}
:root[data-skin="suave"]:not([data-theme="dark"]) {
  --bg: #F8F6FC;
  --bg-alt: #F1EDF8;
  --panel: #FFFFFF;
  --border: #E8E2F3;
  --text: #241F31;
  --muted: #6E6880;
  --accent-torre: #7A5AC4;
  --accent-torre-fill: #8B6BD4;
  --accent-torre-fill-hover: #7A5AC4;
  --accent-torre-soft: #F0EAFC;
  --good-bg: #E6F6EC;
  --good-text: #2F7048;
  --warn-bg: #FCF1DE;
  --warn-text: #8A5A17;
  --bad-bg: #FBE9EC;
  --bad-text: #A83A50;
  --neutral-bg: #F2EFF7;
  --neutral-text: #5D5670;
  --funnel-1: color-mix(in srgb, var(--accent-system) 12%, var(--bg));
  --funnel-2: color-mix(in srgb, var(--accent-system) 34%, var(--bg));
  --funnel-3: color-mix(in srgb, var(--accent-system) 62%, var(--bg));
  --funnel-lost: #BBB3CB;
  --sidebar-bg: #F1EDF8;
  --sidebar-text: #6E6880;
  --sidebar-text-active: #241F31;
  --shadow-card: 0 12px 28px -20px rgba(36,31,49,0.45);
}
:root[data-skin="suave"][data-theme="dark"] {
  --bg: #17141F;
  --bg-alt: #1F1B2A;
  --panel: #221E2E;
  --border: #322B44;
  --text: #F0EBF8;
  --muted: #A79FBC;
  --accent-torre: #C7B2F7;
  --accent-torre-fill: #8B6BD4;
  --accent-torre-fill-hover: #9E82E2;
  --accent-torre-soft: #2E2542;
  --good-bg: #1E3A2B;
  --good-text: #8AE0AC;
  --warn-bg: #3A3018;
  --warn-text: #F2CE7E;
  --bad-bg: #3E212C;
  --bad-text: #F0A0B0;
  --neutral-bg: #322B44;
  --neutral-text: #A79FBC;
  --funnel-1: color-mix(in srgb, var(--accent-system) 16%, var(--bg));
  --funnel-2: color-mix(in srgb, var(--accent-system) 38%, var(--bg));
  --funnel-3: color-mix(in srgb, var(--accent-system) 66%, var(--bg));
  --funnel-lost: #5B5370;
  --sidebar-bg: #1F1B2A;
  --sidebar-text: #A79FBC;
  --sidebar-text-active: #F0EBF8;
  --shadow-card: 0 14px 30px -22px rgba(0,0,0,0.8);
}
/* Estructura propia: sin bordes duros -- las tarjetas flotan sobre el
   fondo con sombra larga, y todo lo que se toca es una píldora. */
:root[data-skin="suave"] .panel,
:root[data-skin="suave"] .stat-card,
:root[data-skin="suave"] .stack-card { border-color: transparent; }
:root[data-skin="suave"] .stat-card {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 55%, var(--panel)), var(--panel));
}
:root[data-skin="suave"] .stat-label { margin-top: 0; font-size: 13px; font-weight: 500; }
:root[data-skin="suave"] .stat-card-featured { border-left: none; box-shadow: inset 0 0 0 1px var(--accent-system), var(--shadow-card); }
:root[data-skin="suave"] .panel h2 { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text); }
:root[data-skin="suave"] .btn,
:root[data-skin="suave"] .badge-solid,
:root[data-skin="suave"] .stage-tab { border-radius: 999px; }
:root[data-skin="suave"] .list-row { border-color: transparent; background: var(--bg-alt); }

/* ========================== FUTURISTA =============================== */
/* Vidrio, profundidad y luz: paneles translúcidos con desenfoque detrás,
   filo superior iluminado, azul eléctrico y cian sobre azul profundo.
   Reemplaza al tema retrofuturista (monoespaciado y a escuadra), que se
   retiró por pedido del cliente.

   Todo el efecto sale de tokens: las translucideces se arman con
   color-mix() sobre --panel/--accent, nunca con un color suelto. */

:root[data-skin="futurista"] {
  --base-size: 15px;
  --base-leading: 1.55;
  --radius: 14px;
  --radius-sm: 10px;
  --card-radius: 16px;
  --panel-pad: 20px 22px;
  --card-pad: 18px 20px;
  --stat-min: 172px;
  --stat-gap: 14px;
  --stat-size: 30px;
  --stat-weight: 600;
  --label-transform: uppercase;
  --label-tracking: 0.13em;
  --sidebar-width: 244px;
  --nav-radius: 12px;
  --stack-pad: 18px 20px;
  --stack-min: 300px;
  --row-pad: 12px 16px;
  --row-radius: 12px;
}
:root[data-skin="futurista"]:not([data-theme="dark"]) {
  --bg: #EFF4FD;
  --bg-alt: #E4EBFA;
  --panel: #FFFFFF;
  --border: #D5E1F5;
  --text: #0D1B33;
  --muted: #5B6C88;
  --accent-torre: #0B62D6;
  --accent-torre-fill: #1273EE;
  --accent-torre-fill-hover: #0B62D6;
  --accent-torre-soft: #DCEBFE;
  --good-bg: #DBF5EC;
  --good-text: #05715A;
  --warn-bg: #FCEFD5;
  --warn-text: #7F5600;
  --bad-bg: #FDE6EA;
  --bad-text: #B02141;
  --neutral-bg: #E8EEFA;
  --neutral-text: #4E5E79;
  --funnel-1: color-mix(in srgb, var(--accent-system) 12%, var(--bg));
  --funnel-2: color-mix(in srgb, var(--accent-system) 36%, var(--bg));
  --funnel-3: color-mix(in srgb, var(--accent-system) 66%, var(--bg));
  --funnel-lost: #A9B6CC;
  --sidebar-bg: #E4EBFA;
  --sidebar-text: #5B6C88;
  --sidebar-text-active: #0D1B33;
  --shadow-card: 0 14px 30px -22px rgba(13,27,51,0.55);
}
:root[data-skin="futurista"][data-theme="dark"] {
  --bg: #050A18;
  --bg-alt: #0B1226;
  --panel: #0E1730;
  --border: #21305A;
  --text: #E8F0FF;
  --muted: #8FA3C8;
  --accent-torre: #5CC8FF;
  --accent-torre-fill: #1F6BE8;
  --accent-torre-fill-hover: #3A85F5;
  --accent-torre-soft: #12244C;
  --good-bg: #0C3A34;
  --good-text: #4FE6C2;
  --warn-bg: #3A2F10;
  --warn-text: #FFD25C;
  --bad-bg: #451827;
  --bad-text: #FF8DA6;
  --neutral-bg: #1A2647;
  --neutral-text: #8FA3C8;
  --funnel-1: color-mix(in srgb, var(--accent-system) 18%, var(--bg));
  --funnel-2: color-mix(in srgb, var(--accent-system) 42%, var(--bg));
  --funnel-3: color-mix(in srgb, var(--accent-system) 70%, var(--bg));
  --funnel-lost: #47557C;
  --sidebar-bg: #0A1128;
  --sidebar-text: #8FA3C8;
  --sidebar-text-active: #E8F0FF;
  --shadow-card: 0 18px 40px -26px rgba(0,0,0,0.9);
}

/* Fondo con dos halos de luz: da profundidad sin cargar ninguna pantalla
   en particular. Se apoya en --accent, así sigue al color activo. */
:root[data-skin="futurista"] body {
  background-image:
    radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--accent-system) 16%, transparent), transparent 70%),
    radial-gradient(900px 520px at 92% 4%, color-mix(in srgb, var(--good-text) 11%, transparent), transparent 72%);
  background-attachment: fixed;
}

/* Vidrio: fondo translúcido + desenfoque de lo que queda atrás. El filo
   superior iluminado es lo que le da el volumen. */
:root[data-skin="futurista"] .panel,
:root[data-skin="futurista"] .stat-card,
:root[data-skin="futurista"] .stack-card {
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: color-mix(in srgb, var(--accent-system) 22%, var(--border));
  position: relative;
}
:root[data-skin="futurista"] .panel::before,
:root[data-skin="futurista"] .stat-card::before,
:root[data-skin="futurista"] .stack-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-system) 65%, transparent), transparent);
  pointer-events: none;
}

:root[data-skin="futurista"] .stat-card {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  overflow: hidden;
}
:root[data-skin="futurista"] .stat-label { margin-top: 0; font-size: 10px; }
:root[data-skin="futurista"] .stat-value {
  background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--accent-system) 55%, var(--text)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-skin="futurista"] .stat-card-featured {
  border-left: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-system) 45%, transparent), var(--shadow-card);
}
:root[data-skin="futurista"] .stat-card-featured .stat-value {
  background: linear-gradient(180deg, var(--accent-system), color-mix(in srgb, var(--accent-system) 45%, var(--text)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:root[data-skin="futurista"] .panel h2 { font-size: 11px; letter-spacing: 0.14em; }

/* Menú lateral: el activo se ilumina desde la izquierda en vez de
   pintarse de gris. */
:root[data-skin="futurista"] .sidebar {
  background: color-mix(in srgb, var(--sidebar-bg) 70%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
:root[data-skin="futurista"] .nav-item {
  border-left-color: transparent;
  letter-spacing: 0.01em;
}
:root[data-skin="futurista"] .nav-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-system) 26%, transparent), transparent);
  border-left-color: var(--accent-system);
  color: var(--sidebar-text-active);
}

:root[data-skin="futurista"] .btn.primary {
  background: linear-gradient(135deg, var(--accent-fill), color-mix(in srgb, var(--accent-fill) 55%, var(--good-text)));
  border-color: transparent;
}
:root[data-skin="futurista"] .badge-solid { border-radius: 999px; }
:root[data-skin="futurista"] .stage-tab { border-radius: 999px; }
:root[data-skin="futurista"] .list-row {
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  border-color: color-mix(in srgb, var(--accent-system) 16%, var(--border));
}
:root[data-skin="futurista"] .list-row:hover {
  border-color: color-mix(in srgb, var(--accent-system) 48%, var(--border));
}

@media (prefers-reduced-transparency: reduce) {
  :root[data-skin="futurista"] .panel,
  :root[data-skin="futurista"] .stat-card,
  :root[data-skin="futurista"] .stack-card,
  :root[data-skin="futurista"] .sidebar,
  :root[data-skin="futurista"] .list-row {
    background: var(--panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---- paleta de gráficas (Histórico → Gráficas) ----
   Paleta categórica de referencia del skill de dataviz, validada contra
   CVD (daltonismo) en orden fijo -- no se puede reordenar ni ciclar. */
.viz-root {
  --viz-series-1: #2a78d6;  /* azul */
  --viz-series-2: #eb6834;  /* naranja */
  --viz-series-3: #1baf7a;  /* aqua */
  --viz-series-other: #b0b0bc;
  --viz-text-primary: var(--text);
  --viz-text-secondary: var(--muted);
  --viz-grid: var(--border);
}
:root[data-theme="dark"] .viz-root {
  --viz-series-1: #3987e5;
  --viz-series-2: #d95926;
  --viz-series-3: #199e70;
  --viz-series-other: #55555f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .viz-root {
    --viz-series-1: #3987e5;
    --viz-series-2: #d95926;
    --viz-series-3: #199e70;
    --viz-series-other: #55555f;
  }
}

.viz-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--viz-text-secondary);
}
.viz-legend-item { display: flex; align-items: center; gap: 5px; }
.viz-legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

.viz-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.viz-bar-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--viz-text-secondary);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viz-bar-track {
  flex: 1;
  background: var(--viz-grid);
  border-radius: 4px;
  height: 18px;
  min-width: 40px;
}
.viz-bar-fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 2px;
  transition: width 0.25s ease;
}
.viz-bar-value {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 0 7px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.viz-donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.viz-donut-center-value { font-size: 20px; font-weight: 700; fill: var(--viz-text-primary); }
.viz-donut-center-label { font-size: 10px; fill: var(--viz-text-secondary); }
.viz-donut-slice { cursor: pointer; }

.viz-empty { color: var(--muted); font-size: 13px; padding: 12px 0; }

.lead-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
}
.lead-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-system);
}
.lead-tag-remove {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
}
.lead-tag-remove:hover { opacity: 1; }
.lead-tag-input {
  font-family: inherit;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px dashed var(--border);
  background: var(--bg);
  color: var(--text);
  width: 90px;
}

.mfa-qr {
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  width: fit-content;
  margin: 10px 0;
}
.mfa-qr svg { display: block; width: 180px; height: 180px; }

.gamify-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--today);
  color: var(--today-text);
  vertical-align: middle;
}
.gamify-badge .icon-inline { width: 11px; height: 11px; vertical-align: 0; }

* { box-sizing: border-box; }

.login-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(560px 380px at 50% 0%, var(--accent-soft) 0%, transparent 70%),
    var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 16px;
}

.login-overlay.hidden { display: none; }

.login-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 360px;
}

.login-box .btn { margin-top: 10px; margin-right: 8px; }

.login-content {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.login-brand {
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
}

.login-brand .brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 20px;
  box-shadow: var(--shadow-card);
}
.login-brand .brand-mark.has-logo {
  max-width: 220px;
  box-shadow: none;
}


.login-heading {
  font-size: 25px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.login-heading .brand-name {
  font-size: inherit;
  font-weight: 700;
  color: var(--accent);
}

.login-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 8px 0 28px;
  max-width: 300px;
  line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  text-align: left;
}

.login-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.login-form input {
  font-family: inherit;
  font-size: 14.5px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-submit {
  padding: 12px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  margin-top: 4px;
}

.login-error {
  color: var(--danger);
  font-size: 13px;
  margin: 0;
}

/* ---- challenge MFA, recuperación de contraseña, contacto de pendiente ---- */

.mfa-code-input {
  font-size: 22px;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.link-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 4px;
  text-decoration: underline;
}

.link-btn:hover { color: var(--text); }

#pendingContact {
  color: var(--muted);
  font-size: 13px;
}

#dataErrorOverlay details {
  text-align: left;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 10px;
}

#dataErrorOverlay summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.user-email-label {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body {
  margin: 0;
  /* La familia sale de --font-ui: así un skin puede cambiar la tipografía
     de toda la app sin tocar una sola regla de componente. */
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: var(--base-leading);   /* default del navegador (~1.2) se sentía apretado en notas/párrafos largos */
  font-size: var(--base-size);
}

h1, h2, h3, .stat-value, .type-display {
  font-family: var(--font-display);
  font-weight: 600;
}

.mono, .type-mono, code {
  font-family: var(--font-mono);
}

/* ---- controles de formulario base (todo lo que no tiene una clase propia) ---- */

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

input:not([type="checkbox"]):not([type="file"]):not([type="color"]),
select,
textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:not([type="checkbox"]):not([type="file"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-system);
  box-shadow: 0 0 0 3px var(--accent-system-soft);
}

input[type="color"] {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 2px;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ---- sidebar ---- */

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 24px;
  border-right: 1px solid var(--border);
  transition: width 0.18s ease, padding 0.18s ease;
}

.sidebar-collapse-toggle {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
}
.sidebar-collapse-toggle:hover { background: var(--neutral-bg); color: var(--text); }
.sidebar-collapse-toggle svg { width: 13px; height: 13px; transition: transform 0.18s ease; }
.sidebar-collapse-toggle:focus-visible { outline: 2px solid var(--accent-system); outline-offset: 1px; }

.sidebar.collapsed { width: 64px; padding-left: 10px; padding-right: 10px; }
.sidebar.collapsed .sidebar-collapse-toggle { align-self: center; }
.sidebar.collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .global-search-trigger span,
.sidebar.collapsed .user-email-label,
.sidebar.collapsed .role-badge,
.sidebar.collapsed .btn-label { display: none; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0; }
.sidebar.collapsed .nav-item,
.sidebar.collapsed .global-search-trigger,
.sidebar.collapsed #btnLogout { justify-content: center; padding: 9px; }
.sidebar.collapsed .sidebar-footer { align-items: center; }
/* Colapsado, el ítem activo pierde su única otra pista (el label en negrita)
   -- el lavado gris neutro contra un sidebar casi del mismo tono quedaba
   invisible. Acá sí usa el acento: es la única señal que le queda. */
.sidebar.collapsed .nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-collapse-toggle svg { transition: none; }
}

/* Overlay del drawer mobile -- oculto siempre salvo que JS le agregue
   .visible al abrir el panel (ver style.css @media max-width:900px para
   el resto del drawer, y app.js para el toggle). Definido fuera de la
   media query porque el botón que lo dispara (hamburguesa) solo existe
   ahí, así que en escritorio nunca se activa igual. */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 999;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--accent-fill);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  overflow: hidden;
}
/* Logo real (Configuración → Marca): puede venir en cualquier aspect ratio
   -- cuadrado, badge horizontal ancho, vertical. Antes se forzaba dentro
   del mismo cuadrado de acento pensado para la inicial de respaldo
   (object-fit:contain sobre un box 30x30/52x52 fijo), lo que dejaba un
   logo ancho reducido a una tira diminuta con franjas del color de acento
   alrededor -- se leía "roto". Con logo real el marco se vuelve
   transparente y sin recorte: alto fijo (mismo que el box normal), ancho
   libre según la proporción real de la imagen. */
.brand-mark.has-logo {
  width: auto;
  max-width: 120px;
  background: transparent;
  border-radius: 0;
}
.brand-mark img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.brand-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--sidebar-text);
  padding: 10px 12px;
  border-radius: var(--nav-radius);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.nav-item:hover { background: var(--neutral-bg); }

/* Attio/Twenty: el ítem activo del sidebar es un lavado gris neutro, no
   el acento de color -- el acento se reserva para interacción (foco,
   links, CTA), nunca para decorar la navegación. */
.nav-item.active {
  background: var(--neutral-bg);
  border-left-color: transparent;
  color: var(--text);
  font-weight: 500;
}

.nav-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.nav-icon svg { width: 18px; height: 18px; }
.icon-inline { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; flex-shrink: 0; }

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
}
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: block; }

/* ---- content ---- */

.content {
  flex: 1;
  padding: 24px 32px 48px;
  min-width: 0;
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.content-header h1 {
  font-size: 22px;
  margin: 0;
}

.page.hidden { display: none; }

.btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn:hover { border-color: var(--muted); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--accent-system); outline-offset: 1px; }

.btn.small { padding: 6px 10px; font-size: 12.5px; }

.btn.primary {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: white;
  font-weight: 600;
}

.btn.primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.btn.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.btn.primary:active { transform: translateY(1px) scale(.98); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn.primary:active { transform: none; }
}

.sidebar .btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--sidebar-text);
}

.sidebar .btn.ghost:hover { background: var(--accent-system-soft); border-color: var(--border); }

.btn.danger {
  color: var(--danger);
  border-color: var(--danger);
}
.btn.danger:hover { background: var(--overdue); border-color: var(--danger); }

.file-btn { display: inline-flex; align-items: center; justify-content: center; }

.logo-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px; margin-bottom: 12px; cursor: pointer;
  border: 1.5px dashed var(--border); border-radius: var(--radius);
  background: var(--bg); transition: border-color 0.15s ease, background 0.15s ease;
}
.logo-dropzone:hover { border-color: var(--accent-system, var(--accent)); background: var(--accent-system-soft, var(--accent-soft)); }
.logo-dropzone img#cfgLogoPreview { max-width: 100%; max-height: 96px; object-fit: contain; border-radius: 8px; }
.logo-dropzone-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.logo-dropzone-icon { font-size: 20px; color: var(--accent-system, var(--accent)); }
.logo-dropzone-hint { font-size: 11.5px; }
.logo-dropzone-filename { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---- dashboard stat cards ---- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--stat-min), 1fr));
  gap: var(--stat-gap);
  margin-bottom: 24px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--shadow-card);
}

.stat-card-featured {
  border-left: 2px solid var(--accent-system);
}

.stat-card-featured .stat-value { color: var(--accent-system); }

.stat-value {
  font-size: var(--stat-size);
  font-weight: var(--stat-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
  font-weight: 500;
}

.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ---- Supervisión en vivo: card por agente en vez de tabla ancha -- la
   tabla llegó a 13 columnas y necesitaba scroll horizontal para verse
   completa, mismo problema que cualquier tabla que crece a la derecha en
   vez de hacia abajo. ---- */
.agent-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}

.agent-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.agent-card:hover { border-color: var(--muted); box-shadow: var(--shadow-card); }
@media (prefers-reduced-motion: reduce) { .agent-card { transition: none; } }

.agent-card-head { display: flex; align-items: center; gap: 10px; }

.agent-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--neutral-bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.agent-card-head-info { min-width: 0; flex: 1; }
.agent-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-card-team { font-size: 12px; color: var(--muted); }

.agent-card-status-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.agent-card-lead {
  font-size: 12.5px;
  color: var(--muted);
  padding: 6px 8px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
}

.agent-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.agent-metric { display: flex; flex-direction: column; gap: 2px; }
.agent-metric-value { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.agent-metric-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.agent-card-spark { padding-top: 2px; }
.agent-card-spark .spark-row { height: 24px; width: 100%; }
.agent-card-empty { grid-column: 1 / -1; }

/* ---- tablas anchas -> cards apiladas en mobile ----
   Mismo lenguaje visual que .agent-card de arriba (Supervisión en vivo,
   Equipo → Personas), generalizado a columnas label:valor para tablas que
   no tienen la forma fija de "agente" (Leads, Histórico, Dashboard,
   Comparar períodos). Oculto por default -- solo aparece <=900px, ver
   media query responsive más abajo, junto con .table-wrap--cards. */
.stack-card-grid.force-visible {
  display: grid !important;   /* admin/supervisor: cuadrícula de Leads a cualquier ancho, no solo <=900px */
  grid-template-columns: repeat(auto-fill, minmax(var(--stack-min), 1fr));   /* 3-4 columnas en desktop en vez de 1 sola apilada */
}

.stack-card-grid {
  display: none;
  grid-template-columns: 1fr;
  gap: 10px;
}
.stack-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--stack-pad);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.stack-card.clickable { cursor: pointer; }
.stack-card.clickable:hover { border-color: var(--muted); box-shadow: var(--shadow-card); }
.stack-card-select-input {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.bulk-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bulk-actions-bar #leadsBulkCount {
  font-weight: 600;
  margin-right: 4px;
}
@media (prefers-reduced-motion: reduce) { .stack-card { transition: none; } }
.stack-card-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.stack-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  padding: 5px 0;
}
.stack-card-label { color: var(--muted); flex-shrink: 0; }
.stack-card-value { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

.detail-side-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.file-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.file-row a { color: var(--text); text-decoration: none; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row a:hover { color: var(--accent-system); }
.file-row-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; flex-shrink: 0; }
.file-row-remove:hover { color: var(--danger); }

.csv-mapping-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 12px 0;
}
.csv-mapping-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.csv-mapping-row select { font-size: 13px; padding: 6px 8px; }

/* ---- búsqueda global ---- */

.global-search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.global-search-trigger svg { width: 15px; height: 15px; flex-shrink: 0; }
.global-search-trigger span:nth-child(2) { flex: 1; text-align: left; }
.global-search-trigger .kbd {
  font-size: 10.5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--muted);
}
.global-search-trigger:hover { border-color: var(--accent-system); }

#globalSearchOverlay { align-items: flex-start; padding-top: 12vh; }

.global-search-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

#globalSearchInput {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 18px;
  font-size: 15px;
}
#globalSearchInput:focus { box-shadow: none; }

.global-search-results { max-height: 50vh; overflow-y: auto; padding: 6px; }
.global-search-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 8px 10px 4px;
}
.global-search-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
}
.global-search-row:hover, .global-search-row.active { background: var(--accent-system-soft); }
.global-search-row .gs-sub { font-size: 12px; color: var(--muted); }
.global-search-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }

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

.panel h2 {
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.panel-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.panel-head-row h2 { margin: 0 0 12px; }
.panel-head-row .board-filter { margin-bottom: 12px; max-width: 260px; }

/* ---- pipeline funnel ---- */

.funnel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funnel-row {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.funnel-stage-name { color: var(--muted); }

.funnel-bar-track {
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
  height: 22px;
}

.funnel-bar-fill {
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  color: white;
  font-size: 11px;
  font-weight: 600;
  min-width: 24px;
  transition: width 0.2s ease;
}

.funnel-value {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- line chart (revenue over time) ---- */

.line-chart-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}

.line-chart svg { width: 100%; height: auto; display: block; }
.line-chart-path { fill: none; stroke: var(--accent-system); stroke-width: 2; }
.line-chart-area { fill: var(--accent-system-soft); stroke: none; }
.line-chart-dot { fill: var(--accent-system); }

/* ---- generic list rows (dashboard + seguimientos page) ---- */

.list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--row-pad);
  border-radius: var(--row-radius);
  border: 1px solid var(--border);
  font-size: 14px;
  cursor: pointer;
  background: var(--bg);
}

.cal-soon-row { cursor: default; gap: 10px; flex-wrap: wrap; }
.cal-soon-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* .gs-sub sin esta regla queda inline (span) y se pega en el mismo renglón
   que el título -- exactamente el bug de "Lead — fecha Agente · tel ·
   Badge" todo corrido en una sola línea larga. Bloque + margen chico separa
   "qué/cuándo" de "quién/estado" en cualquier .list-row (Próximas citas,
   Citas armadas hoy para mañana, Mis citas de Mi día). */
.list-row .gs-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.list-row > div:first-child { min-width: 0; }

.list-row.overdue { background: var(--overdue); color: var(--overdue-text); border-color: transparent; }
.list-row.today { background: var(--today); color: var(--today-text); border-color: transparent; }

.cal-soon-card.overdue { background: var(--overdue); color: var(--overdue-text); border-color: transparent; }
.cal-soon-card.today { background: var(--today); color: var(--today-text); border-color: transparent; }
.cal-soon-actions { margin-top: 8px; }

.list-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 8px 0;
}

/* ---- formulario web page ---- */

.warning-box {
  background: var(--today);
  color: var(--today-text);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}

.warning-box code {
  background: rgba(0,0,0,0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

.warning-box .how-to { margin-top: 10px; }
.warning-box .how-to summary { cursor: pointer; font-weight: 600; }
.warning-box .how-to summary:hover { text-decoration: underline; }
.warning-box .how-to ol { margin: 10px 0 2px; padding-left: 20px; }
.warning-box .how-to li { margin-bottom: 6px; line-height: 1.5; }
.warning-box .how-to a { color: inherit; text-decoration: underline; }

#formConfigForm label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

#formConfigForm input {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.code-output {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}

.copy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.copy-status {
  font-size: 13px;
  color: var(--accent-system);
}

/* ---- lead detail page ---- */

.detail-back { margin-bottom: 12px; }

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.detail-header h2 { margin: 0; font-size: 20px; }

#detailForm label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

#detailForm input, #detailForm select, #detailForm textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

/* ---- stage tabs (leads page) ---- */

.leads-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.stage-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.search-input {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  min-width: 240px;
}

.stage-tab {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}

.stage-tab.active {
  background: var(--accent-system-soft);
  border-color: var(--accent-system);
  color: var(--accent-system);
  font-weight: 600;
}

/* ---- histórico: selector de rango ---- */

.hist-range-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hist-range-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hist-range-presets .btn.active {
  background: var(--accent-system-soft);
  border-color: var(--accent-system);
  color: var(--accent-system);
  font-weight: 600;
}

.hist-range-custom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hist-range-custom .search-input {
  min-width: 0;
  border-radius: 8px;
}

@media (max-width: 720px) {
  .hist-range-row { flex-direction: column; align-items: stretch; }
  .hist-range-custom { flex-wrap: wrap; }
}

/* ---- Histórico: comparar períodos ---- */

.compare-ranges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.compare-range-block h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.compare-range-block .hist-range-custom { margin-top: 8px; }

.compare-quick-fill {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.stat-compare-b {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.delta {
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 11.5px;
}

.delta.good { color: var(--success, #1e8a4c); background: color-mix(in srgb, var(--success, #1e8a4c) 12%, transparent); }
.delta.bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.delta.flat { color: var(--muted); }

@media (max-width: 720px) {
  .compare-ranges { grid-template-columns: 1fr; }
}

/* ---- botón flotante: reportar error/sugerencia ---- */

.fab-feedback {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--accent-torre-fill);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  z-index: 60;
  transition: transform 0.15s ease, background 0.15s ease;
}
.fab-feedback:hover { background: var(--accent-torre-fill-hover); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .fab-feedback { transition: none; } }

/* ---- bandeja de tickets (dueño) ---- */

.ticket-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ticket-card-actions {
  margin-top: 10px;
}
.ticket-card-actions .search-input {
  max-width: 220px;
}

/* ---- celda de tabla que no debe romper el layout con texto largo
   (ej. nombre de campaña) -- corta con "..." y el título completo queda
   en el tooltip nativo del navegador ---- */
.cell-clamp {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- tutorial guiado ---- */

.tour-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.55);
  z-index: 900;
}

.tour-target-highlight {
  position: relative;
  z-index: 901;
  outline: 3px solid var(--accent-torre);
  outline-offset: 3px;
  border-radius: 10px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-torre) 25%, transparent);
}

.tour-tooltip {
  position: fixed;
  z-index: 902;
  max-width: 320px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.tour-step-count {
  margin: 0 0 4px;
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tour-tooltip h3 { margin: 0 0 6px; font-size: 15px; }
.tour-tooltip p:not(.tour-step-count) { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tour-actions-right { display: flex; gap: 8px; }

@media (max-width: 720px) {
  .tour-tooltip { left: 16px !important; right: 16px; max-width: none; }
}

/* ---- calendario: grilla mensual de citas ---- */

.cal-month-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cal-month-nav h2 {
  text-transform: capitalize;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0;
}

.cal-month-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 14px 0 6px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  font-weight: 600;
}

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-day-cell {
  min-height: 64px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: var(--bg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.cal-day-cell:hover { border-color: var(--accent-system); }
.cal-day-empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day-empty:hover { border-color: transparent; }

.cal-day-today { border-color: var(--accent-system); box-shadow: inset 0 0 0 1px var(--accent-system); }
.cal-day-selected { background: var(--accent-soft); border-color: var(--accent-system); }

.cal-day-num { font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-day-today .cal-day-num, .cal-day-selected .cal-day-num { color: var(--accent-system); }

.cal-day-count {
  align-self: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-appt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.cal-appt-card {
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--shadow-card);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.cal-appt-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px -6px rgba(22,36,28,0.25); }

.cal-appt-card-time { font-size: 13px; font-weight: 700; color: var(--text); }
.cal-appt-card-name { font-size: 14px; font-weight: 600; color: var(--text); }
.cal-appt-card-sub { font-size: 12px; color: var(--muted); }
.cal-appt-card .stage-badge { align-self: flex-start; margin-top: 6px; }

.cal-appt-card-confirmada { border-left-color: var(--accent-system); }
.cal-appt-card-cumplida { border-left-color: var(--accent-mint); }
.cal-appt-card-cancelada { border-left-color: var(--danger); }
.cal-appt-card-no_asistio { border-left-color: var(--today-text); }

@media (max-width: 720px) {
  .cal-month-dow span:nth-child(n) { font-size: 10px; }
}

/* ---- data table ---- */

.table-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}

.data-table td {
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;   /* números/fechas no bailan de ancho entre filas */
}

.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: var(--bg); }
.data-table tbody tr:last-child td { border-bottom: none; }

.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--text); }
.data-table th.sort-active { color: var(--text); }
.sort-arrow { margin-left: 4px; font-size: 9px; }

.data-table td.cell-inline { cursor: default; padding: 8px 12px; }

.inline-stage-select {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  background: var(--accent-system-soft);
  color: var(--accent-system);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.inline-stage-select:hover, .inline-stage-select:focus { border-color: var(--accent-system); outline: none; }

.inline-date-input {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  font-size: 11.5px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.inline-date-input.overdue { background: var(--overdue); color: var(--overdue-text); }
.inline-date-input.today { background: var(--today); color: var(--today-text); }
.inline-text-input { min-width: 220px; }

.color-picker-row { display: flex; align-items: center; gap: 8px; }
.color-hex-label { font-family: monospace; font-size: 12.5px; color: var(--muted); }
.inline-date-input:hover { border-color: var(--border); }
.inline-date-input:focus { border-color: var(--accent-system); outline: none; }

#cfgLogoPreview {
  max-height: 56px;
  max-width: 180px;
}

.team-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
}

/* Voz de Turno: adentro de #page-cola el acento primario pasa de Cobalto
   (Torre, default) a Ascua. El "chrome" (--accent-system, sidebar) no se
   toca a propósito -- la identidad del sidebar es constante en toda la app. */
.voice-turno {
  --accent: var(--accent-turno);
  --accent-hover: var(--accent-turno);
  --accent-fill: var(--accent-turno-fill);
  --accent-fill-hover: var(--accent-turno-fill-hover);
  --accent-soft: var(--accent-turno-soft);
}

.stage-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--accent-system-soft);
  color: var(--accent-system);
}
.stage-badge.online { background: var(--accent-soft); color: var(--accent); }
.stage-badge.goal-met { background: var(--accent-fill); color: white; }

/* Modificadores semánticos por estado real (Leads, Productos, Publicidad) —
   sin esto todo .stage-badge se ve idéntico sin importar el valor. */
.stage-badge.won { background: var(--accent-fill); color: white; }

/* ---- Forja: la ficha entra con un movimiento, no un corte plano ----
   #page-lead-detail ya es una .page como cualquier otra (mismo mecanismo
   de navegación) -- CSS reinicia la animación solo con que pase de
   display:none a block, sin necesitar JS nuevo. */
#page-lead-detail:not(.hidden) {
  animation: forja-panel-in .32s cubic-bezier(.16,1,.3,1);
}
@keyframes forja-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: none; }
}
.lead-tab-panel.active {
  animation: forja-fade-in .18s ease;
}
@keyframes forja-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pill-hero {
  animation: forja-pop-in .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes forja-pop-in {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #page-lead-detail:not(.hidden), .lead-tab-panel.active, .pill-hero {
    animation: none;
  }
}

/* ---- Forja: tabs de la ficha del lead (Contacto / Resultado) ----
   Cortan el scroll de una sola columna larga -- ver blueprint Forja §9
   paso 6/7. Head, tags, banner DNC y resumen de notas quedan afuera de
   este bloque, persistentes, a propósito. */
.lead-tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.lead-tab-btn {
  background: none; border: none; cursor: pointer;
  padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.lead-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.lead-tab-panel { display: none; }
.lead-tab-panel.active { display: block; }

/* ---- Forja: sparkline de ritmo horario (Supervisión en vivo) ---- */
.spark-row { display: flex; align-items: flex-end; gap: 2px; height: 28px; width: 90px; }
.spark-bar { flex: 1; min-width: 2px; background: var(--accent-torre); border-radius: 2px 2px 0 0; opacity: .85; }

/* ---- Forja: 3 tratamientos de pill, cada uno para su contexto ----
   chip-dot: Supervisión, escaneo rápido -- punto + texto, sin fondo.
   badge-solid: tablas de Torre (Leads/Productos/Publicidad/Equipo) --
   rectángulo redondeado sólido, más autoritario que un pill suave.
   pill-hero: badge principal de estado dentro de la ficha del lead --
   pill grande con highlight interior, textura táctil. */

.chip-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.chip-dot .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.chip-dot.online .dot { background: var(--good-text); animation: forja-breathe 2.2s ease-in-out infinite; }
.chip-dot.offline .dot { background: var(--muted); }
@media (prefers-reduced-motion: reduce) { .chip-dot.online .dot { animation: none; } }
@keyframes forja-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }

/* Fórmula Attio/Twenty: fondo casi blanco + texto oscuro saturado.
   El color vive en 2 palabras (el texto), nunca en un bloque de fondo. */
.badge-solid {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  white-space: nowrap;
  color: var(--neutral-text);
  background: var(--neutral-bg);
}
.badge-solid.won, .badge-solid.active { background: var(--good-bg); color: var(--good-text); }
.badge-solid.lost { background: var(--bad-bg); color: var(--bad-text); }
.badge-solid.exhausted, .badge-solid.inactive { background: var(--neutral-bg); color: var(--neutral-text); }
.badge-solid.scheduled { background: var(--warn-bg); color: var(--warn-text); }
.badge-solid.managing, .badge-solid.new { background: var(--accent-soft); color: var(--accent); }

.pill-hero {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: var(--neutral-text);
  background: var(--neutral-bg);
}
.pill-hero.won, .pill-hero.active { background: var(--good-bg); color: var(--good-text); }
.pill-hero.lost { background: var(--bad-bg); color: var(--bad-text); }
.pill-hero.exhausted, .pill-hero.inactive { background: var(--neutral-bg); color: var(--neutral-text); }
.pill-hero.scheduled { background: var(--warn-bg); color: var(--warn-text); }
.pill-hero.managing, .pill-hero.new { background: var(--accent-soft); color: var(--accent); }
.pill-hero.urgent { animation: forja-pulse-hero 1.8s ease-in-out infinite; }
.pill-hero.urgent::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .pill-hero.urgent { animation: none; } }
@keyframes forja-pulse-hero {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}
.stage-badge.lost { background: var(--overdue); color: var(--overdue-text); }
.stage-badge.exhausted { background: var(--bg); color: var(--muted); }
.stage-badge.scheduled { background: var(--today); color: var(--today-text); }
.stage-badge.managing, .stage-badge.new { background: var(--accent-system-soft); color: var(--accent-system); }
.stage-badge.active { background: var(--accent-system-soft); color: var(--accent-system); }
.stage-badge.inactive { background: var(--bg); color: var(--muted); }

.followup-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.followup-pill.overdue { background: var(--overdue); color: var(--overdue-text); }
.followup-pill.today { background: var(--today); color: var(--today-text); }

.table-empty {
  padding: 24px 16px;
  color: var(--muted);
  text-align: center;
}

/* ---- modal ---- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10;
}

.modal-overlay.hidden { display: none; }

.modal {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Para contenido largo (ej: Documentación) — el ancho angosto por defecto
   es para altas rápidas de pocos campos, no para textareas de varios párrafos. */
.modal.wide { max-width: 640px; }

.modal h2 { margin-top: 0; font-size: 18px; }

.modal label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Sin el ".modal" adelante esto solo funcionaba dentro de un modal — el
   formulario de la Cola no es un modal y el checkbox de "nota importante"
   quedaba apilado arriba del texto en vez de al lado. */
label.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

label.checkbox-label input { width: auto; }

.modal input, .modal select, .modal textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

/* ---- Configuración ---- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 20px;
}

.form-grid label, #configForm label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

#configForm input[type="text"],
#configForm input[type="time"],
#configForm input[type="number"] {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

#configForm input[type="color"] {
  width: 100%;
  height: 38px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.referred-by-results {
  position: relative;
  z-index: 5;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 160px;
  overflow-y: auto;
}
.referred-by-result {
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.referred-by-result:hover { background: var(--accent-soft); }
.referred-by-result .gs-sub { display: block; font-size: 11px; color: var(--muted); }
.referred-by-selected {
  font-size: 12px;
  color: var(--accent-system);
  margin-top: 4px;
}

.form-grid textarea, .form-grid select {
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}

.field-hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.activity-section {
  margin-bottom: 12px;
}

.activity-title {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.activity-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Ya no necesita tope de alto ni scroll interno -- la timeline
     compacta de abajo (.activity-timeline) reemplazó la lista larga que
     sí lo necesitaba. Un tope acá la volvía a apretar sin motivo. */
}

/* Forja: timeline compacta -- cada evento es un <details>, colapsado por
   defecto (solo ícono + resumen + fecha en una línea), el texto completo
   aparece recién al abrirlo. Reemplaza el bloque viejo de <div> apilados
   que obligaba a scrollear todo para leer una nota vieja. */
.activity-timeline { display: flex; flex-direction: column; gap: 6px; }
.activity-row {
  font-size: 13.5px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid transparent;
}
.activity-row summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.activity-row summary:hover { background: var(--bg-alt); border-radius: 8px; }
.activity-row summary::-webkit-details-marker { display: none; }
.activity-row summary::before {
  content: "›";
  color: var(--muted);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.activity-row[open] summary::before { transform: rotate(90deg); }
.activity-icon { flex-shrink: 0; font-size: 15px; }
.activity-summary {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5;
}
.activity-detail { padding: 0 14px 14px 40px; font-size: 13px; line-height: 1.6; }
.activity-detail p { margin: 0 0 6px; }

.activity-date {
  color: var(--muted);
  flex-shrink: 0;
}

.activity-empty {
  font-size: 12.5px;
  color: var(--muted);
  padding: 4px 0;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.modal-actions-right {
  display: flex;
  gap: 8px;
}

.hidden { display: none !important; }

/* ---- planificador (tablero) ---- */

.board-filter {
  max-width: 220px;
}

/* El resto del planificador/kanban de la agencia (.board, .board-column,
   .task-card, .task-chip...) se reemplazó por Calendario en la
   reconversión a call center -- confirmado sin ninguna referencia en
   index.html/app.js, se borra en vez de dejarlo pudrirse. .board-filter
   de arriba sí sigue vivo (los selects de filtro de Leads/Calendario lo
   reusan) por eso queda.

   (el viejo breakpoint de acá era del Planificador/kanban de la agencia —
   ya no existe, se reemplazó por Calendario. Lo único real que tenía,
   .panel-grid, se movió al breakpoint de abajo.) */

/* El mini-calendario del planificador (.calendar, .calendar-cell,
   .cal-task...) también era del viejo kanban -- reemplazado por la
   grilla mensual real de Calendario (.cal-month-grid/.cal-day-cell más
   abajo), sin ninguna referencia en index.html/app.js. Se borra. */

/* =====================================================================
   Fase 2 — CRM call center: cola de llamadas, ficha de lead, utilidades
   ===================================================================== */

.muted { color: var(--muted); }

.panel-hint {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 6px 0 0;
}

.panel-hint.warn {
  color: var(--warning, #a3701f);
}

.error {
  color: var(--danger);
  font-size: 13px;
  margin: 8px 0 0;
}
.error.hidden { display: none; }

.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-badge {
  align-self: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-system-soft);
  color: var(--accent-system);
}

.content-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sidebar-topbar { display: none; }   /* solo aparece en mobile (cabecera del drawer), ver media query */
.sidebar-logout-mobile { display: none; }   /* redundante con el footer del drawer, que en mobile ahora se muestra completo */
.mobile-topbar { display: none; }   /* barra fija con el botón hamburguesa -- solo aparece en mobile, ver media query */

/* ---- cola de llamadas ---- */

.queue-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

.queue-bar-left, .queue-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-pill.online { background: var(--accent-soft); color: var(--accent); }
.status-pill.online .dot { animation: forja-breathe 2.2s ease-in-out infinite; }
.status-pill.busy { background: var(--today); color: var(--today-text); }
.status-pill.paused { background: var(--overdue); color: var(--overdue-text); }
@media (prefers-reduced-motion: reduce) { .status-pill .dot { animation: none; } }

.queue-depth {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lease-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.lease-badge.hidden { display: none; }
.lease-badge.warning { background: var(--today); color: var(--today-text); }
.lease-badge.expired {
  background: var(--overdue);
  color: var(--overdue-text);
  animation: lease-pulse 1.1s ease-in-out infinite;
}
@keyframes lease-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.queue-alert {
  background: var(--accent-soft);
  color: var(--text);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.queue-alert.hidden { display: none; }
.queue-alert.info { background: var(--accent-soft); color: var(--text); }
.queue-alert.ok { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.queue-alert.error { background: var(--overdue); color: var(--overdue-text); font-weight: 600; }

.queue-empty {
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
}

/* ---- ficha de lead (usada en la Cola y en Leads → detalle) ---- */

.lead-card { align-items: start; }
.lead-card-main { display: flex; flex-direction: column; }

.detail-extra-actions { margin: 14px 0; }

.lead-card-head {
  /* Antes el nombre y los badges peleaban en la misma fila — con un
     nombre largo (2-3 líneas) los badges quedaban pegados al medio del
     texto. Apilados, el nombre siempre respira solo arriba. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.lead-card-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.badge-row .stage-badge {
  /* Secundarios a propósito: la jerarquía es nombre primero, estado después. */
  font-size: 11px;
  padding: 2px 8px;
  background: var(--bg);
  color: var(--muted);
}
/* No tenía estilo propio en ningún lado — el badge de DNC se veía igual
   que cualquier otro (verde, normal), sin alertar de nada. */
.stage-badge.danger { background: var(--overdue); color: var(--overdue-text); font-weight: 700; }

.danger-box {
  background: var(--overdue);
  color: var(--overdue-text);
}

.lead-summary-notes {
  margin: 14px 0;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.lead-summary-notes p { margin: 2px 0 0; font-size: 13.5px; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 20px;
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.contact-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;   /* deja que el teléfono/email largo trunque en vez de romper la grilla */
}

.contact-label {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.contact-value {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: break-word;   /* el callback (fecha + hora + agente) es largo — que baje de línea, no que se corte ilegible */
}

.lead-assignment-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
  padding: 8px 10px;
  background: var(--neutral-bg, var(--panel));
  border: 1px solid var(--border);
  border-radius: 8px;
}
.lead-assignment-box .lead-assign-select {
  min-width: 160px;
}

.lead-zone-input {
  font-size: 14.5px;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  min-width: 0;
}
.contact-value.cb-overdue { color: var(--overdue-text); font-weight: 700; }
.contact-value.cb-today { color: var(--today-text); font-weight: 700; }

.contact-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Botón "Llamar" por Twilio en la Cola -- aparte del <a href="tel:"> de
   arriba, que sigue igual. Sin telefonía configurada queda deshabilitado
   con .telephony-status explicando por qué (ver docs/telefonia-twilio.md). */
.telephony-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.telephony-status { font-size: 12.5px; color: var(--muted); }
.telephony-status.error { color: var(--bad-text); }
.telephony-status.ok { color: var(--good-text); }

.result-form { margin-top: 4px; }
.result-form h3 {
  /* Mismo lenguaje que .panel h2 en el resto de la app (mayúsculas,
     tenue) — antes era un h3 normal, se sentía como un componente aparte. */
  font-size: 13px;
  margin: 0 0 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ---- Cola: botones Contestó / No contestó, filtran el select de resultado ---- */
.answer-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.answer-btn {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.answer-btn:hover { border-color: var(--muted); }

.answer-btn.active[data-answer="contesto"] {
  background: var(--good-bg);
  border-color: var(--good-text);
  color: var(--good-text);
}

.answer-btn.active[data-answer="no_contesto"] {
  background: var(--bad-bg);
  border-color: var(--bad-text);
  color: var(--bad-text);
}

.appt-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 12px;
  margin-bottom: 12px;
}
.appt-fields.hidden { display: none; }

.disposition-hint {
  font-size: 12.5px;
  color: var(--accent-system);
  margin: -4px 0 10px;
}
.disposition-hint.hidden { display: none; }

.result-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.readonly-box {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: var(--radius);
}

.note-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.note-form textarea { width: 100%; box-sizing: border-box; }

.pinned-note { background: var(--accent-soft); border-color: transparent; }

.activity-who { font-size: 11.5px; color: var(--muted); }
.activity-row.note.important { border-left: 3px solid var(--accent-system); }

/* ---- leads: paginado ---- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
}
.pager-label { font-size: 13px; color: var(--muted); }

.not-clickable { cursor: default; }
.not-clickable:hover { background: transparent !important; }

/* ---- importación CSV ---- */

.csv-batch-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.csv-map-select { width: 100%; box-sizing: border-box; }

/* ---- calendario: citas / turnos / francos (Fase 4) ---- */

.lead-picker-results {
  position: relative;
  margin-top: -8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  max-height: 220px;
  overflow-y: auto;
}
.lead-picker-results.hidden { display: none; }

.lead-picker-row {
  padding: 8px 12px;
  font-size: 13.5px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.lead-picker-row:last-child { border-bottom: none; }
.lead-picker-row:hover { background: var(--accent-soft); }

.lead-picker-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--muted);
}

.shifts-table th, .shifts-table td { text-align: center; }
.shifts-table th:first-child, .shifts-table td:first-child { text-align: left; }
.shift-cell input[type="checkbox"] { cursor: pointer; }

.btn-delete-dayoff { color: var(--danger); border-color: var(--danger); }
.btn-delete-dayoff:hover { background: var(--overdue); }

/* ---- scripts y objeciones (Fase 6) ---- */

.scripts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}

/* La card ya no es un botón gigante de "editar" -- antes CUALQUIER click
   la abría, y el pedido era justo lo contrario: poder leer el guion en
   medio de una llamada sin arriesgarse a mandarla al editor sin querer.
   Ahora la card solo muestra contenido; "Editar" es la única acción. */
.script-card { display: flex; flex-direction: column; gap: 8px; }
.script-card-actions { margin-top: auto; padding-top: 6px; }

.script-content {
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.script-content.expanded { -webkit-line-clamp: unset; overflow: visible; }
.btn-toggle-script { align-self: flex-start; padding: 0; border: none; background: none; color: var(--accent); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.btn-toggle-script:hover { text-decoration: underline; }

/* =====================================================================
   Responsive — la agente trabaja en PC, el supervisor puede entrar desde
   el celular. Breakpoints reales, no solo el shell apilado que había.
   ===================================================================== */

@media (max-width: 1200px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .appt-fields { grid-template-columns: 1fr; }
  .csv-batch-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }

  /* ---- barra fija + drawer ----
     La fila horizontal de solo-íconos con scroll lateral se reemplaza por
     un menú hamburguesa: .mobile-topbar queda fija arriba (fuera del
     <aside>, así se ve siempre) y .sidebar pasa a ser un panel que se
     desliza desde la izquierda con los nav-item completos (ícono + label,
     igual que en escritorio) sobre un overlay que lo cierra al tocarlo. */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 500;
  }
  .mobile-topbar .brand-mark { width: 26px; height: 26px; font-size: 12px; }
  .mobile-topbar .brand-mark.has-logo { max-width: 96px; }
  .mobile-topbar .brand-name { font-size: 15px; }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
  }
  .mobile-menu-toggle:hover { background: var(--neutral-bg); }
  .mobile-menu-toggle:focus-visible { outline: 2px solid var(--accent-system); outline-offset: 1px; }
  .mobile-menu-toggle svg { width: 20px; height: 20px; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(300px, 85vw);
    max-width: 300px;
    padding: 14px;
    gap: 14px;
    border-right: 1px solid var(--border);
    border-bottom: none;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  /* .sidebar.collapsed (fuera de media query, especificidad 0,2,0) le gana
     al ancho de arriba (0,1,0) sin importar el orden. Si alguien colapsó
     el sidebar en escritorio, ese estado queda guardado en localStorage y
     viaja también al celular: el drawer se abriría angosto (64px) con el
     contenido desbordando. En mobile no existe "colapsado", el drawer
     siempre muestra todo. */
  .sidebar.collapsed { width: min(300px, 85vw); padding-left: 14px; padding-right: 14px; }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .global-search-trigger span,
  .sidebar.collapsed .user-email-label,
  .sidebar.collapsed .role-badge,
  .sidebar.collapsed .btn-label { display: revert; }
  .sidebar.collapsed .nav-item,
  .sidebar.collapsed .global-search-trigger,
  .sidebar.collapsed #btnLogout { justify-content: flex-start; padding: 11px 12px; }
  .sidebar.collapsed .sidebar-footer { align-items: stretch; }
  .sidebar.collapsed .nav-item.active { background: var(--neutral-bg); color: var(--text); }

  .sidebar-overlay.visible {
    display: block;
  }

  /* El header interno del <aside> (logo + botón cerrar) hace de cabecera
     del drawer -- la barra fija de afuera queda tapada detrás del panel
     mientras está abierto, así que necesita su propio cierre visible. */
  .sidebar-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-brand { padding: 0; }
  .mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
  }
  .mobile-menu-close:hover { background: var(--neutral-bg); color: var(--text); }
  .mobile-menu-close:focus-visible { outline: 2px solid var(--accent-system); outline-offset: 1px; }
  .mobile-menu-close svg { width: 16px; height: 16px; }
  /* Salir/tema mobile quedaban duplicados con el footer del drawer (que
     ahora sí se muestra completo, con label) -- un solo lugar para cada
     acción. */
  .sidebar-logout-mobile { display: none; }

  .sidebar-nav {
    flex-direction: column;
    overflow-x: visible;
    gap: 2px;
    padding-bottom: 0;
  }
  /* min 44px de alto -- mínimo táctil recomendado. */
  .nav-item { flex-shrink: 0; min-height: 44px; padding: 11px 12px; }
  .nav-label { display: inline; }
  .global-search-trigger { display: none; }
  .sidebar-footer { display: flex; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
  /* Colapsar el sidebar no tiene sentido en mobile (ya es un drawer a
     todo lo alto, no una columna angosta) -- el botón quedaba visible sin
     hacer nada útil. */
  .sidebar-collapse-toggle { display: none; }

  .content { padding: 16px; }
  .content-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .content-header-actions { width: 100%; }
  .content-header-actions .btn { flex: 1; }

  .queue-bar { flex-direction: column; align-items: stretch; }
  .queue-bar-left, .queue-bar-right { justify-content: space-between; }

  .contact-grid { grid-template-columns: 1fr; }
  .csv-batch-fields { grid-template-columns: 1fr; }
  .leads-toolbar { flex-direction: column; align-items: stretch; }
  .search-input { min-width: 0; width: 100%; box-sizing: border-box; }
  .panel-grid { grid-template-columns: 1fr; }

  .table-wrap { overflow-x: auto; }
  .data-table { min-width: 640px; }
  /* Tablas anchas puntuales (Leads, Histórico, Dashboard, Comparar
     períodos) -- en vez de obligar a scrollear de costado, se listan
     como cards apiladas (mismo lenguaje visual que .agent-card). El
     <table> de escritorio se oculta y el grid de cards, generado en el
     mismo render, ocupa su lugar. Ver .stack-card-grid más abajo. */
  .table-wrap.table-wrap--cards { display: none; }
  .stack-card-grid { display: grid; }
}

/* El "@media (prefers-reduced-motion: reduce) { .sidebar {transition:none} }"
   de más arriba queda antes que la regla del drawer en el archivo -- con
   igual especificidad, en CSS gana la que aparece después, así que sin
   este bloque el transition:transform del drawer pisaría la preferencia
   de movimiento reducido en mobile. Combinando ambas condiciones acá
   (después de las dos) se asegura que gane siempre que corresponda. */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ---- vendedor: pantalla de citas ---- */

.vendedor-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.vendedor-tab {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.vendedor-tab:hover { border-color: var(--accent-system); color: var(--text); }
.vendedor-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent-system);
  color: var(--accent-system);
}
.vendedor-tab:focus-visible { outline: 2px solid var(--accent-system); outline-offset: 2px; }

.citas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.cita-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.cita-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px -6px rgba(16,17,18,0.1); }
.cita-card.closed { opacity: 0.7; }
.cita-card.overdue { border-color: var(--bad-text); background: var(--bad-bg); }

.cita-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cita-header > div { min-width: 0; }
.cita-header strong { font-size: 15px; color: var(--text); }
.cita-phone { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

.cita-body { display: flex; flex-direction: column; gap: 8px; }
.cita-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--text); }
.cita-meta .label { color: var(--muted); font-weight: 500; }

.cita-demo-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text);
}
.cita-demo-info .label { color: var(--muted); font-weight: 500; }

.cita-footer { display: flex; justify-content: flex-end; padding-top: 4px; }
.cita-footer .btn { min-width: 120px; }

/* ---- vendedor: calendario de visitas agrupado por día ---- */
.vendedor-cal-day { margin-bottom: 16px; }
.vendedor-cal-day:last-child { margin-bottom: 0; }
.vendedor-cal-day-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.status-pill.success { background: var(--good-bg); color: var(--good-text); }
.status-pill.warning { background: var(--warn-bg); color: var(--warn-text); }
.status-pill.danger { background: var(--bad-bg); color: var(--bad-text); }

@media (max-width: 480px) {
  .result-actions { flex-direction: column; align-items: stretch; }
  .queue-bar-right { flex-direction: column; align-items: stretch; }
}