/* ============================================================
   LA DEMO: el CRM por dentro
   Patrones de shadcn/ui llevados a CSS plano: barra lateral,
   buscador con atajo, pestañas, tabla de datos con badges y
   avatares, y dos vistas reales (tabla y tablero).
   Nada de esto es una imagen: funciona.
   ============================================================ */
.ui {
  --ui-bg:     #ffffff;
  --ui-soft:   #f7f9fc;
  --ui-line:   #e7ecf5;
  --ui-line-2: #d8e0ee;
  --ui-ink:    #0b1220;
  --ui-ink-2:  #5b6779;
  --ui-ink-3:  #5f6c83;   /* pasa 4.5:1 sobre blanco y sobre el gris del panel */
  --ui-blue:   #1657ff;

  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  background: var(--ui-bg); color: var(--ui-ink);
  font-family: var(--f-body); font-size: 13px; line-height: 1.45;
  letter-spacing: 0; position: relative;
  /* Alto fijo: si cada pantalla mide lo suyo, la página pega un salto al
     cambiar de menú y marea. Manda la más alta y las demás rellenan.
     La fila va atada a ese alto (minmax(0,1fr)): sin eso Oportunidades
     pedía 770px, se salía del marco y el pie de la tabla salía cortado. */
  height: 700px;
  grid-template-rows: minmax(0, 1fr);
}
@media (max-width: 900px) { .ui { height: auto; min-height: 560px; } }

/* ---------------- Barra lateral ---------------- */
.ui__side {
  background: var(--ui-soft); border-right: 1px solid var(--ui-line);
  padding: .9rem .7rem; display: grid; grid-template-rows: 1fr auto; gap: .8rem;
}
/* Con el menú entero dentro, la barra necesita poder desplazarse */
.ui__side > div:first-child { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.ui__ws {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .55rem; border-radius: 10px; background: #fff;
  border: 1px solid var(--ui-line); box-shadow: 0 1px 2px rgba(11,18,32,.05);
}
.ui__ws-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--ui-blue); display: grid; place-items: center; flex: none; }
.ui__ws-mark svg { width: 15px; height: 15px; color: #fff; }
.ui__ws b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.ui__ws span { display: block; font-size: 11px; color: var(--ui-ink-3); }
.ui__ws-chev { margin-left: auto; width: 14px; height: 14px; color: var(--ui-ink-3); flex: none; }

.ui__nav { display: grid; gap: 1px; align-content: start; }
.ui__nav-lb {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ui-ink-3); padding: .45rem .6rem .22rem;
}
.ui__nav a {
  display: flex; align-items: center; gap: .55rem;
  padding: .42rem .6rem; border-radius: 8px; color: var(--ui-ink-2); font-weight: 500;
  cursor: pointer; transition: background .18s ease, color .18s ease;
}
.ui__nav a svg { width: 16px; height: 16px; flex: none; }
.ui__nav a:hover { background: #eef2f9; color: var(--ui-ink); }
.ui__nav a.on { background: #fff; color: var(--ui-ink); box-shadow: 0 1px 2px rgba(11,18,32,.06); }
.ui__nav a.on svg { color: var(--ui-blue); }
.ui__badge {
  margin-left: auto; background: var(--ui-blue); color: #fff;
  font-size: 10px; font-weight: 600; padding: .1rem .38rem; border-radius: 999px;
}
.ui__badge--ia { background: linear-gradient(120deg, #1657ff, #7c3aed); }
.ui__badge--soft { background: #e2e9f6; color: var(--ui-ink-2); }
.ui__badge--live { background: rgba(14,159,110,.14); color: #0a7d56; }
.ui__me { display: flex; align-items: center; gap: .6rem; padding: .7rem .55rem 0; border-top: 1px solid var(--ui-line); min-width: 0; }
.ui__me > div { min-width: 0; }
.ui__me span:not(.av) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui__me b { font-size: 12px; font-weight: 600; display: block; }
.ui__me span { font-size: 11px; color: var(--ui-ink-3); }

/* Avatares con iniciales: nada de fotos de archivo */
.av {
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: #fff; letter-spacing: .01em; line-height: 1;
  text-shadow: 0 1px 1px rgba(11,18,32,.25);
}
.av--a { background: linear-gradient(140deg, #1657ff, #4b83ff); }
.av--b { background: linear-gradient(140deg, #0e9f6e, #34c98d); }
.av--c { background: linear-gradient(140deg, #d97706, #f0a83c); }
.av--d { background: linear-gradient(140deg, #7c3aed, #a274f5); }
.av--e { background: linear-gradient(140deg, #0f766e, #2aa39a); }
.av--sm { width: 23px; height: 23px; font-size: 10.5px; }

/* ---------------- Cabecera ---------------- */
.ui__main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
/* Sin esto los hijos del grid se niegan a encoger y desbordan en móvil */
.ui__main > * { min-width: 0; }
.ui__top {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--ui-line);
}
.ui__crumb { display: flex; align-items: center; gap: .35rem; font-size: 12px; color: var(--ui-ink-3); }
.ui__crumb b { color: var(--ui-ink); font-weight: 600; }
.ui__search {
  margin-left: auto; display: flex; align-items: center; gap: .45rem;
  background: var(--ui-soft); border: 1px solid var(--ui-line);
  border-radius: 9px; padding: .38rem .55rem; min-width: 0; width: 190px; cursor: text;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ui__search:hover { border-color: var(--ui-line-2); }
.ui__search svg { width: 14px; height: 14px; color: var(--ui-ink-3); }
.ui__search span { font-size: 12px; color: var(--ui-ink-3); }
.kbd {
  margin-left: auto; display: inline-flex; gap: 2px; align-items: center;
  font-family: var(--f-mono); font-size: 10px; color: var(--ui-ink-3);
  background: #fff; border: 1px solid var(--ui-line); border-bottom-width: 2px;
  border-radius: 5px; padding: .08rem .3rem;
}
.ui__team { display: flex; }
.ui__team .av { margin-left: -5px; box-shadow: 0 0 0 2px #fff; }
.ui__team .av:first-child { margin-left: 0; }
.ui__new {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--ui-blue); color: #fff; font-size: 12px; font-weight: 600;
  padding: .45rem .75rem; border-radius: 9px; border: 0; cursor: pointer;
  box-shadow: 0 6px 14px -8px rgba(22,87,255,.9);
  transition: background .18s ease, transform .18s ease;
}
.ui__new:hover { background: #0b3fcc; transform: translateY(-1px); }
.ui__new svg { width: 13px; height: 13px; }

/* ---------------- KPIs ---------------- */
.ui__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding: .8rem .9rem 0; }
.ui__kpis--flat { padding: 0; }
.kpi { border: 1px solid var(--ui-line); border-radius: 12px; padding: .65rem .75rem 1.25rem; background: #fff; position: relative; overflow: hidden; }
.kpi__lb { display: flex; align-items: center; gap: .3rem; font-size: 11px; color: var(--ui-ink-3); }
.kpi__v { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 700; letter-spacing: -.03em; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.kpi__d { font-size: 10.5px; font-weight: 650; padding: .05rem .3rem; border-radius: 999px; }
.kpi__d--up { color: #0a7d56; background: rgba(14,159,110,.12); }
.kpi__d--flat { color: var(--ui-ink-3); background: #eef2f9; }
.kpi__spark { position: absolute; right: 0; bottom: 0; left: 0; height: 18px; opacity: .45; pointer-events: none; }
.kpi__spark svg { width: 100%; height: 100%; display: block; }

/* ---------------- Pestañas y filtros ---------------- */
.ui__bar { display: flex; align-items: center; gap: .5rem; padding: .8rem .9rem .6rem; flex-wrap: wrap; }
.tabs2 { display: flex; gap: 2px; background: var(--ui-soft); border: 1px solid var(--ui-line); border-radius: 10px; padding: 2px; }
.tab2 {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--f-body); font-size: 12px; font-weight: 600; color: var(--ui-ink-2);
  padding: .35rem .7rem; border-radius: 8px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.tab2:hover { color: var(--ui-ink); }
.tab2.on { background: #fff; color: var(--ui-ink); box-shadow: 0 1px 3px rgba(11,18,32,.12); }
.tab2 i { font-style: normal; color: var(--ui-ink-3); margin-left: .25rem; font-size: 11px; }
.tab2.on i { color: var(--ui-blue); }

.seg { margin-left: auto; display: flex; gap: 2px; background: var(--ui-soft); border: 1px solid var(--ui-line); border-radius: 9px; padding: 2px; }
.seg button {
  border: 0; background: transparent; cursor: pointer; color: var(--ui-ink-3);
  padding: .3rem .45rem; border-radius: 7px; display: grid; place-items: center;
  transition: background .18s ease, color .18s ease;
}
.seg button svg { width: 15px; height: 15px; }
.seg button.on { background: #fff; color: var(--ui-ink); box-shadow: 0 1px 3px rgba(11,18,32,.12); }

/* ---------------- Tabla de datos ---------------- */
.ui__view { padding: 0 .9rem; min-height: 0; overflow: auto; scrollbar-width: thin; }
.ui__view[hidden] { display: none; }
.scr { min-height: 0; display: flex; flex-direction: column; }
.scr > .ui__view { flex: 1; padding-bottom: 3.4rem; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.tbl th {
  text-align: left; font-weight: 500; font-size: 11px; color: var(--ui-ink-3);
  padding: .45rem .55rem; border-bottom: 1px solid var(--ui-line); white-space: nowrap;
}
.tbl th:last-child, .tbl td:last-child { text-align: right; }
.tbl td { padding: .62rem .55rem; border-bottom: 1px solid var(--ui-line); vertical-align: middle; }
.tbl tbody tr { transition: background .15s ease; }
.tbl tbody tr:hover { background: var(--ui-soft); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .who { display: flex; align-items: center; gap: .5rem; }
.tbl .who b { font-weight: 600; letter-spacing: -.01em; }
.tbl .who span:not(.av) { display: block; font-size: 11px; color: var(--ui-ink-3); margin-top: .08rem; }
.tbl .num { font-family: var(--f-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .when { color: var(--ui-ink-3); font-size: 11.5px; white-space: nowrap; }
.dotmenu { color: var(--ui-ink-3); cursor: pointer; padding: .1rem .2rem; border-radius: 6px; }
.dotmenu:hover { background: #eef2f9; color: var(--ui-ink); }
.dotmenu svg { width: 15px; height: 15px; }

/* Casillas al estilo del sistema */
.cbx {
  appearance: none; width: 15px; height: 15px; border: 1px solid var(--ui-line-2);
  border-radius: 4px; background: #fff; cursor: pointer; position: relative; display: block;
  transition: background .15s ease, border-color .15s ease;
}
.cbx:checked { background: var(--ui-blue); border-color: var(--ui-blue); }
.cbx:checked::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(42deg); }

/* Insignias */
.bdg {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: 10.5px; font-weight: 600; padding: .16rem .45rem; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.bdg::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.bdg--wa   { color: #0a7d56; background: rgba(14,159,110,.10); border-color: rgba(14,159,110,.22); }
.bdg--web  { color: #0b3fcc; background: rgba(22,87,255,.09);  border-color: rgba(22,87,255,.2); }
.bdg--tel  { color: #9a6510; background: rgba(214,154,44,.12);  border-color: rgba(214,154,44,.26); }
.bdg--auto { color: #6d28d9; background: rgba(124,58,237,.09);  border-color: rgba(124,58,237,.2); }
.bdg--new  { color: #0b3fcc; background: rgba(22,87,255,.09);  border-color: rgba(22,87,255,.2); }
.bdg--warm { color: #9a6510; background: rgba(214,154,44,.12);  border-color: rgba(214,154,44,.26); }
.bdg--won  { color: #0a7d56; background: rgba(14,159,110,.10); border-color: rgba(14,159,110,.22); }

/* ---------------- Tablero ---------------- */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding-bottom: .3rem; }
.col > header { display: flex; align-items: center; gap: .4rem; padding: 0 .2rem .45rem; font-size: 11.5px; color: var(--ui-ink-3); }
.col > header b { color: var(--ui-ink); font-weight: 600; }
.col > header i { font-style: normal; margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; }
.col__list { display: grid; gap: .45rem; }
.deal {
  border: 1px solid var(--ui-line); border-radius: 11px; background: #fff;
  padding: .55rem .6rem; display: grid; gap: .3rem;
  box-shadow: 0 1px 2px rgba(11,18,32,.04);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  cursor: grab;
}
.deal:hover { border-color: var(--ui-line-2); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(11,18,32,.45); }
.deal__top { display: flex; align-items: center; gap: .4rem; }
.deal__top b { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.deal p { margin: 0; font-size: 11px; color: var(--ui-ink-3); }
.deal__foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .1rem; }
.deal__foot .num { font-family: var(--f-mono); font-size: 12px; font-weight: 650; }

/* ---------------- Pie de la app ---------------- */
.ui__foot {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; border-top: 1px solid var(--ui-line);
  font-size: 11.5px; color: var(--ui-ink-3);
}
.ui__pag { margin-left: auto; display: flex; gap: .25rem; }
.ui__pag button {
  border: 1px solid var(--ui-line); background: #fff; color: var(--ui-ink-2);
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer; display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
}
.ui__pag button.on { background: var(--ui-blue); border-color: var(--ui-blue); color: #fff; }
.ui__pag button svg { width: 13px; height: 13px; }

/* El atributo hidden no oculta si la regla declara un display: hay que
   decirlo aparte o el elemento sigue ahí. */
.ui [hidden], .ui__toast[hidden] { display: none !important; }

/* ---------------- Aviso emergente ---------------- */
.ui__toast {
  position: absolute; right: .9rem; bottom: 3.2rem; z-index: 5;
  display: flex; align-items: center; gap: .55rem;
  background: #0b1220; color: #fff; border-radius: 11px;
  padding: .55rem .75rem; font-size: 12px; white-space: nowrap;
  box-shadow: 0 18px 40px -18px rgba(11,18,32,.7);
  opacity: 0; transform: translateY(12px);
  animation: uiToast 9s 2.5s cubic-bezier(.16,1,.3,1) infinite;
}
.ui__toast i { width: 7px; height: 7px; border-radius: 999px; background: #2fd98c; flex: none; box-shadow: 0 0 0 3px rgba(47,217,140,.25); }
.ui__toast b { font-weight: 600; }
@keyframes uiToast {
  0%, 100% { opacity: 0; transform: translateY(12px); }
  5%, 28%  { opacity: 1; transform: translateY(0); }
  34%      { opacity: 0; transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) { .ui__toast { animation: none; opacity: 1; transform: none; } }

/* ---------------- Paleta de comandos ---------------- */
.cmdk {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: start center;
  visibility: hidden;
  padding-top: 8%; background: rgba(11,18,32,.28); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.cmdk.open { opacity: 1; pointer-events: auto; visibility: visible; }
.cmdk__box {
  width: min(92%, 400px); background: #fff; border: 1px solid var(--ui-line);
  border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(11,18,32,.5); overflow: hidden;
  transform: translateY(-8px) scale(.98); transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.cmdk.open .cmdk__box { transform: none; }
.cmdk__in { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; border-bottom: 1px solid var(--ui-line); }
.cmdk__in svg { width: 15px; height: 15px; color: var(--ui-ink-3); }
.cmdk__in span { font-size: 13px; color: var(--ui-ink-3); }
.cmdk__in span::after { content: ""; display: inline-block; width: 1px; height: 14px; background: var(--ui-ink); margin-left: 1px; vertical-align: -3px; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.cmdk__list { padding: .35rem; display: grid; gap: 1px; }
.cmdk__sec { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ui-ink-3); padding: .45rem .6rem .25rem; }
.cmdk__it { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: 9px; font-size: 12.5px; color: var(--ui-ink-2); }
.cmdk__it svg { width: 15px; height: 15px; color: var(--ui-ink-3); }
.cmdk__it.on { background: var(--ui-soft); color: var(--ui-ink); }
.cmdk__it .kbd { margin-left: auto; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .ui { grid-template-columns: 56px minmax(0, 1fr); }
  .ui__search { width: 150px; }
  .ui__ws b, .ui__ws span, .ui__ws-chev, .ui__nav a span, .ui__nav-lb, .ui__me div { display: none; }
  .ui__ws { justify-content: center; padding: .45rem; }
  .ui__nav a { justify-content: center; padding: .55rem; }
  .ui__me { justify-content: center; }
  .ui__badge { display: none; }
  .ui__search { min-width: 0; }
  .ui__search span, .ui__search .kbd { display: none; }
  .board { grid-template-columns: 1fr 1fr; }
  .col:last-child { display: none; }
}
@media (max-width: 620px) {
  .ui__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:last-child { display: none; }
  .ui__top { gap: .5rem; padding: .6rem .7rem; }
  .ui__search { width: auto; flex: 1; }
  .ui__crumb { display: none; }
  .tbl .hide-sm { display: none; }
  /* En pantalla estrecha se queda lo que importa: quién y cuánto.
     Solo en la tabla de oportunidades: ahí la 1ª columna es la casilla
     y la última el menú. En contactos la 1ª es el nombre y no se toca. */
  #v-tabla .tbl th:first-child, #v-tabla .tbl td:first-child,
  #v-tabla .tbl th:last-child,  #v-tabla .tbl td:last-child { display: none; }
  .ui__view { overflow-x: auto; }
  .ui__team { display: none; }
  /* El de la cabecera se queda en icono (no cabe); el de captación
     conserva su texto, que ahí es la acción principal. */
  .ui__top .ui__new { font-size: 0; padding: .45rem .5rem; gap: 0; }
  .ui__top .ui__new svg { width: 15px; height: 15px; }
  .ads__go .ui__new { font-size: 12px; }
  /* Solo quién y cuánto: la fase ya se ve en el tablero */
  #v-tabla .tbl th:nth-child(5), #v-tabla .tbl td:nth-child(5) { display: none; }
  /* La bandeja pasa a una sola columna: primero la lista, luego el hilo */
  .ibx { grid-template-columns: 1fr; }
  .ibx__list { border-right: 0; border-bottom: 1px solid var(--ui-line); max-height: 148px; }
  .ibx__thread { max-height: 210px; }
  .ui__kpis { padding-right: .9rem; }
  .kpi__v { font-size: 17px; }
  .board { grid-template-columns: 1fr; }
  .col:nth-child(n+2) { display: none; }
  .ui__toast { left: .9rem; right: .9rem; white-space: normal; }
  /* Las cuatro pestañas no caben en 306px: se arrastran de lado en vez
     de salirse del marco y quedar cortadas. El degradado del final avisa
     de que hay más. */
  .tabs2 {
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .tabs2::-webkit-scrollbar { display: none; }
  .tab2 { flex: none; }
}


/* ============================================================
   CAPTACIÓN CON IA
   El CRM ya sabe cuántos contactos entran y cuántos cierran, así
   que la estimación no es un invento: sale de sus propios ratios.
   Dos modos, automático y manual, y el número siempre delante.
   ============================================================ */
.scr[hidden] { display: none; }

.ads { padding: .9rem .9rem 1.1rem; display: grid; gap: .8rem; align-content: start; }
.ads__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ads__head h4 { font-family: var(--f-display); font-size: 14px; letter-spacing: -.02em; margin: 0; }
.ads__ia {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: linear-gradient(120deg, #1657ff, #7c3aed);
  padding: .16rem .45rem; border-radius: 999px;
}
.ads__mode { margin-left: auto; display: flex; gap: 2px; background: var(--ui-soft); border: 1px solid var(--ui-line); border-radius: 9px; padding: 2px; }
.ads__mode button {
  border: 0; background: transparent; cursor: pointer; font-family: var(--f-body);
  font-size: 11.5px; font-weight: 600; color: var(--ui-ink-2);
  padding: .32rem .7rem; border-radius: 7px; transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ads__mode button.on { background: #fff; color: var(--ui-ink); box-shadow: 0 1px 3px rgba(11,18,32,.12); }

.ads__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: .7rem; }
@media (max-width: 780px) { .ads__grid { grid-template-columns: 1fr; } }

.ads__panel { border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; padding: .85rem .9rem; display: grid; gap: .85rem; align-content: start; }
.ads__lb { font-size: 11px; color: var(--ui-ink-3); display: block; margin-bottom: .35rem; }

/* Objetivo con paso a paso */
.step { display: flex; align-items: center; gap: .5rem; }
.step button {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--ui-line-2);
  background: #fff; color: var(--ui-ink); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.step button:hover { background: var(--ui-soft); border-color: var(--ui-blue); color: var(--ui-blue); }
.step b { font-family: var(--f-display); font-size: 22px; letter-spacing: -.03em; min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.step span { font-size: 12px; color: var(--ui-ink-2); }

/* Inversión */
.ads__inv { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ads__inv b { font-family: var(--f-display); font-size: 22px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ads__inv i { font-style: normal; font-size: 11px; color: var(--ui-ink-3); }
.ads input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--ui-blue), #5b8cff) 0 / var(--fill, 0%) 100% no-repeat, var(--ui-line);
}
.ads input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ui-blue); box-shadow: 0 2px 6px rgba(11,18,32,.22);
  cursor: grab; transition: transform .15s ease;
}
.ads input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }
.ads input[type="range"]::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 2px solid var(--ui-blue); }

/* Canales */
.chans { display: flex; gap: .35rem; flex-wrap: wrap; }
.chan {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  border: 1px solid var(--ui-line-2); border-radius: 999px; padding: .3rem .6rem;
  font-size: 11.5px; font-weight: 600; color: var(--ui-ink-2); background: #fff;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.chan.on { border-color: var(--ui-blue); color: var(--ui-blue); background: rgba(22,87,255,.07); }
.chan i { width: 7px; height: 7px; border-radius: 999px; background: currentColor; font-style: normal; }

/* Recomendación de la IA */
.ads__ai {
  border: 1px solid rgba(22,87,255,.28); border-radius: 12px;
  background: linear-gradient(160deg, rgba(22,87,255,.06), rgba(124,58,237,.05));
  padding: .9rem; display: grid; gap: .7rem; align-content: start;
}
.ads__say { font-size: 13px; line-height: 1.5; color: var(--ui-ink); margin: 0; transition: opacity .25s ease; }
.ads__say.fade { opacity: .25; }
.ads__say b { font-weight: 700; }
.ads__say .up { color: #0a7d57; }
.ads__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.num2 { background: #fff; border: 1px solid var(--ui-line); border-radius: 10px; padding: .45rem .5rem; text-align: center; }
.num2 b { display: block; font-family: var(--f-display); font-size: 15px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.num2 span { display: block; font-size: 10px; color: var(--ui-ink-3); margin-top: .1rem; }
.ads__go { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ads__go .ui__new { padding: .5rem .85rem; }
.ads__ghost {
  border: 1px solid var(--ui-line-2); background: #fff; color: var(--ui-ink-2);
  font-family: var(--f-body); font-size: 12px; font-weight: 600;
  padding: .5rem .8rem; border-radius: 9px; cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.ads__ghost:hover { border-color: var(--ui-blue); color: var(--ui-blue); }
.ads__fine { font-size: 10.5px; color: var(--ui-ink-3); margin: 0; }

/* Los ratios que la IA está usando, a la vista */
.ads__base { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.base { border: 1px solid var(--ui-line); border-radius: 10px; padding: .5rem .55rem; background: var(--ui-soft); }
.base b { display: block; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.base span { display: block; font-size: 10px; color: var(--ui-ink-3); margin-top: .1rem; }
.base em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #0a7d57; }
@media (max-width: 620px) {
  .ads__nums, .ads__base { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Registro de lo que hace en automático */
.log { display: grid; gap: .3rem; }
.log__it { display: flex; align-items: center; gap: .45rem; font-size: 11.5px; color: var(--ui-ink-2); }
.log__it i { width: 6px; height: 6px; border-radius: 999px; background: #2fd98c; flex: none; font-style: normal; }
.log__it time { margin-left: auto; color: var(--ui-ink-3); font-size: 10.5px; font-family: var(--f-mono); }
.log--big .log__it { align-items: flex-start; padding: .4rem .1rem; border-bottom: 1px solid var(--ui-line); }
.log--big .log__it:last-child { border-bottom: 0; }
.log--big .log__it i { margin-top: .35rem; }
/* El texto va envuelto en su propio span: si los trozos cuelgan sueltos
   del flex, cada <b> se convierte en un elemento más y le entra el gap. */
.log--big .log__it > span { flex: 1; min-width: 0; }
.log--big .log__it b { color: var(--ui-ink); font-weight: 650; }


/* ============================================================
   EL RESTO DE LA APP
   Todas las entradas de la barra lateral llevan a algo que
   funciona. Piezas compartidas primero (panel, interruptor,
   pastilla vacía) y luego cada pantalla.
   ============================================================ */
/* Estas piezas fijan su propio display, así que el atributo hidden
   del HTML no basta: hay que apagarlas a mano. */
.ui__foot[hidden], .ui__new[hidden], .ui__bar[hidden] { display: none; }

.pad { padding: .9rem .9rem 1.1rem; display: grid; gap: .7rem; align-content: start; }
.pn { border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; padding: .7rem .8rem; display: grid; gap: .5rem; align-content: start; min-width: 0; }
.pn--soft { background: var(--ui-soft); }
.pn__h { display: flex; align-items: center; gap: .45rem; }
.pn__h b { font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; }
.pn__h > span { margin-left: auto; font-size: 10.5px; color: var(--ui-ink-3); font-family: var(--f-mono); white-space: nowrap; }
.pn__h svg { width: 15px; height: 15px; color: var(--ui-blue); flex: none; }

/* Interruptor: la pieza que hace que esto se sienta una app */
.sw {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 34px; height: 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ui-line-2); transition: background .2s ease;
}
.sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(11,18,32,.32);
  transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.sw:checked { background: var(--ui-blue); }
.sw:checked::after { transform: translateX(14px); }
.sw:focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 2px; }

.rowsw { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--ui-line); }
.rowsw:last-child { border-bottom: 0; }
.rowsw > div { min-width: 0; }
.rowsw b { display: block; font-size: 12px; font-weight: 600; }
.rowsw span { display: block; font-size: 10.5px; color: var(--ui-ink-3); }
.rowsw .sw { margin-left: auto; }

/* ---------------- Inicio ---------------- */
.hoy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: .7rem; }
.hoy__col { display: grid; gap: .7rem; align-content: start; }
@media (max-width: 780px) { .hoy { grid-template-columns: 1fr; } }

.todo { display: grid; gap: .1rem; }
.todo label { display: flex; align-items: flex-start; gap: .5rem; padding: .42rem .1rem; border-bottom: 1px solid var(--ui-line); cursor: pointer; }
.todo label:last-child { border-bottom: 0; }
.todo .cbx { margin-top: 1px; }
.todo b { font-size: 12px; font-weight: 600; display: block; }
.todo span { font-size: 10.5px; color: var(--ui-ink-3); display: block; }
.todo input:checked ~ div b { text-decoration: line-through; color: var(--ui-ink-3); font-weight: 500; }

.agd { display: grid; gap: .35rem; }
.agd__it { display: flex; align-items: center; gap: .55rem; font-size: 12px; }
.agd__h { font-family: var(--f-mono); font-size: 11px; color: var(--ui-blue); font-weight: 600; flex: none; }
.agd__it b { font-weight: 600; }
.agd__it span { color: var(--ui-ink-3); font-size: 10.5px; margin-left: auto; white-space: nowrap; }

/* ---------------- Contactos ---------------- */
.flt { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.flt .chan { font-size: 11px; }

/* ---------------- Bandeja ---------------- */
.ibx { display: grid; grid-template-columns: 210px minmax(0, 1fr); border: 1px solid var(--ui-line); border-radius: 12px; overflow: hidden; min-height: 372px; }
.ibx__list { border-right: 1px solid var(--ui-line); background: var(--ui-soft); display: grid; align-content: start; overflow: auto; max-height: 414px; }
.ibx__c {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .5rem; align-items: center;
  padding: .55rem .6rem; cursor: pointer; border: 0;
  border-bottom: 1px solid var(--ui-line); border-left: 2px solid transparent;
  text-align: left; background: transparent; font-family: inherit; color: inherit;
  transition: background .16s ease;
}
.ibx__c:hover { background: #eef2f9; }
.ibx__c.on { background: #fff; border-left-color: var(--ui-blue); }
.ibx__c .av { grid-row: span 2; }
.ibx__c b { font-size: 12px; font-weight: 620; display: flex; align-items: center; gap: .3rem; }
.ibx__c b time { margin-left: auto; font-size: 10px; color: var(--ui-ink-3); font-family: var(--f-mono); font-weight: 400; }
.ibx__c p { margin: 0; font-size: 10.5px; color: var(--ui-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx__c i { font-style: normal; width: 7px; height: 7px; border-radius: 999px; background: #2fd98c; flex: none; }

.ibx__pane { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; background: #fff; }
.ibx__top { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-bottom: 1px solid var(--ui-line); }
.ibx__top b { font-size: 12.5px; font-weight: 650; }
.ibx__top .bdg { margin-left: auto; }
.ibx__thread { padding: .7rem; display: grid; gap: .4rem; align-content: start; overflow: auto; max-height: 360px; }
.ibx__thread[hidden] { display: none; }
.tmsg { max-width: 78%; border-radius: 12px; padding: .45rem .6rem; font-size: 12px; line-height: 1.45; position: relative; }
.tmsg time { display: block; font-size: 9.5px; color: var(--ui-ink-3); margin-top: .15rem; font-family: var(--f-mono); }
.tmsg--in { justify-self: start; background: var(--ui-soft); border: 1px solid var(--ui-line); border-bottom-left-radius: 4px; }
.tmsg--out { justify-self: end; background: rgba(22,87,255,.08); border: 1px solid rgba(22,87,255,.2); border-bottom-right-radius: 4px; }
.tmsg--bot { background: rgba(124,58,237,.07); border-color: rgba(124,58,237,.22); }
.tmsg--out time { color: #4a68b8; }   /* 4,05:1 se quedaba corto a 9,5px */
.tmsg__by { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6d28d9; margin-bottom: .12rem; }
.ibx__reply { display: flex; align-items: center; gap: .45rem; padding: .5rem .6rem; border-top: 1px solid var(--ui-line); background: var(--ui-soft); }
.ibx__reply span { flex: 1; font-size: 11.5px; color: var(--ui-ink-3); background: #fff; border: 1px solid var(--ui-line); border-radius: 999px; padding: .35rem .7rem; }
.ibx__reply em { font-style: normal; font-size: 10.5px; color: var(--ui-ink-3); }

/* ---------------- Automatizaciones ---------------- */
.fl__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fl__head h4 { font-family: var(--f-display); font-size: 14px; letter-spacing: -.02em; margin: 0; }
.fl__won {
  margin-left: auto; display: flex; align-items: baseline; gap: .35rem;
  font-size: 11px; color: var(--ui-ink-3);
}
.fl__won b { font-family: var(--f-display); font-size: 17px; letter-spacing: -.03em; color: #0a7d56; font-variant-numeric: tabular-nums; }

.fl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: .7rem; }
@media (max-width: 860px) { .fl { grid-template-columns: 1fr; } }
.fl__list { display: grid; gap: .4rem; align-content: start; }
.fl__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .15rem .55rem;
  border: 1px solid var(--ui-line); border-radius: 11px; background: #fff;
  padding: .55rem .6rem; cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.fl__card:hover { border-color: var(--ui-line-2); }
.fl__card.on { border-color: var(--ui-blue); box-shadow: 0 0 0 3px rgba(22,87,255,.09); }
.fl__card.off { opacity: .5; }
.fl__ico { grid-row: span 2; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(22,87,255,.09); color: var(--ui-blue); align-self: start; }
.fl__ico svg { width: 15px; height: 15px; }
.fl__card b { font-size: 12px; font-weight: 650; letter-spacing: -.01em; }
.fl__card .sw { grid-row: span 2; align-self: center; }
.fl__st { display: flex; align-items: center; gap: .45rem; font-size: 10.5px; color: var(--ui-ink-3); font-family: var(--f-mono); flex-wrap: wrap; }
.fl__st em { font-style: normal; color: #0a7d56; font-weight: 600; }

.fl__canvas { border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-soft); padding: .8rem; display: grid; gap: .45rem; align-content: start; }
.fl__ttl { display: flex; align-items: center; gap: .4rem; font-size: 11px; color: var(--ui-ink-3); }
.fl__ttl b { color: var(--ui-ink); font-size: 12.5px; font-weight: 650; }
.node {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .55rem;
  background: #fff; border: 1px solid var(--ui-line); border-radius: 10px;
  padding: .5rem .6rem; position: relative;
}
.node + .node { margin-top: 12px; }
.node + .node::before { content: ""; position: absolute; left: 21px; top: -13px; width: 2px; height: 13px; background: var(--ui-line-2); }
.node + .node::after {
  content: ""; position: absolute; left: 18px; top: -13px; width: 8px; height: 8px; border-radius: 999px;
  background: var(--ui-blue); opacity: 0; animation: flPulse 2.6s ease-in-out infinite;
}
.node:nth-child(3)::after { animation-delay: .25s; }
.node:nth-child(4)::after { animation-delay: .5s; }
.node:nth-child(5)::after { animation-delay: .75s; }
@keyframes flPulse { 0%, 70%, 100% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 30% { opacity: 0; transform: translateY(13px); } }
@media (prefers-reduced-motion: reduce) { .node + .node::after { animation: none; } }
.node__ico { grid-row: span 2; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--ui-soft); color: var(--ui-ink-2); align-self: start; }
.node__ico svg { width: 14px; height: 14px; }
.node--go .node__ico { background: rgba(22,87,255,.1); color: var(--ui-blue); }
.node--win .node__ico { background: rgba(14,159,110,.12); color: #0a7d56; }
.node b { font-size: 11.5px; font-weight: 650; }
.node span { font-size: 10.5px; color: var(--ui-ink-3); }
.node q { grid-column: 2; font-size: 11px; color: var(--ui-ink-2); font-style: italic; quotes: "«" "»"; display: block; margin-top: .2rem; }
.fl__more {
  display: flex; align-items: center; gap: .45rem; font-size: 11px; color: var(--ui-ink-2);
  background: #fff; border: 1px dashed var(--ui-line-2); border-radius: 10px; padding: .5rem .6rem;
}
.fl__more b { color: var(--ui-ink); font-weight: 650; }
.fl__more svg { width: 14px; height: 14px; color: var(--ui-blue); flex: none; }

/* ---------------- Informes ---------------- */
.rep { display: grid; gap: .7rem; }
.rep__chart { border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; padding: .7rem .5rem .3rem; }
.rep__chart svg { width: 100%; height: auto; display: block; }
.rep__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .7rem; }
@media (max-width: 780px) { .rep__grid { grid-template-columns: 1fr; } }
.bars { display: grid; gap: .5rem; }
.bar { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: .5rem; align-items: center; font-size: 11.5px; }
.bar span { color: var(--ui-ink-2); }
.bar i { height: 8px; border-radius: 999px; background: var(--ui-line); display: block; position: relative; overflow: hidden; }
.bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--ui-blue), #5b8cff); transition: width .8s cubic-bezier(.16,1,.3,1); }
.bar b { font-family: var(--f-mono); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---------------- Ajustes ---------------- */
.setg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; align-items: start; }
@media (max-width: 780px) { .setg { grid-template-columns: 1fr; } }
.tmpl { border: 1px solid var(--ui-line); border-radius: 10px; padding: .45rem .55rem; background: var(--ui-soft); }
.tmpl b { display: block; font-size: 11px; color: var(--ui-ink-3); font-weight: 600; margin-bottom: .15rem; }
.tmpl p { margin: 0; font-size: 11.5px; color: var(--ui-ink-2); }
/* El margen negativo pega la coma al chip: si no, parece una errata */
.tmpl p em { font-style: normal; color: var(--ui-blue); background: rgba(22,87,255,.09); border-radius: 4px; padding: 0 .22rem; margin: 0 -.12rem; }
.hrs { display: grid; gap: .25rem; }
.hr { display: flex; align-items: center; gap: .5rem; font-size: 11.5px; }
.hr b { width: 30px; font-weight: 600; }
.hr span { font-family: var(--f-mono); font-size: 11px; color: var(--ui-ink-2); }
.hr .bdg { margin-left: auto; }

/* ---------------- Módulos: aquí se ve que hay más ---------------- */
.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 860px) { .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mods { grid-template-columns: 1fr; } }
.mod {
  border: 1px solid var(--ui-line); border-radius: 11px; background: #fff; padding: .6rem .65rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .15rem .5rem; align-items: center;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mod:hover { border-color: var(--ui-line-2); }
.mod.is-on { border-color: rgba(22,87,255,.35); background: linear-gradient(160deg, rgba(22,87,255,.05), rgba(22,87,255,0)); }
.mod__ico { grid-row: span 2; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--ui-soft); color: var(--ui-ink-2); align-self: start; }
.mod.is-on .mod__ico { background: rgba(22,87,255,.1); color: var(--ui-blue); }
.mod__ico svg { width: 15px; height: 15px; }
.mod b { font-size: 12px; font-weight: 650; letter-spacing: -.01em; }
.mod span { font-size: 10.5px; color: var(--ui-ink-3); }
.mod .sw { grid-row: span 2; align-self: center; }
.mods__note { display: flex; align-items: center; gap: .5rem; font-size: 11.5px; color: var(--ui-ink-2); }
.mods__note svg { width: 15px; height: 15px; color: var(--ui-blue); flex: none; }
.mods__note b { color: var(--ui-ink); font-weight: 650; }

/* Aviso que sale al tocar cosas (activar módulo, apagar flujo) */
.ui__note {
  position: absolute; left: 50%; bottom: .9rem; z-index: 7; transform: translate(-50%, 14px);
  background: #0b1220; color: #fff; border-radius: 999px; padding: .45rem .85rem;
  font-size: 11.5px; box-shadow: 0 18px 40px -18px rgba(11,18,32,.7);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
  max-width: calc(100% - 1.8rem); text-align: center;
}
.ui__note.show { opacity: 1; transform: translate(-50%, 0); }
.ui__note b { font-weight: 650; }