/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Panel del comercial · capa de diseño (27-10-2026)
   Va DESPUÉS de estilo.css y solo en las páginas del comercial (<body class="comercial">). No toca el panel de Ismael:
   todas las clases y modificadores nuevos llevan el prefijo cm- (estilo.css ya usa .casilla, .venta, .hecho, .siguiente,
   .cita…). Del panel reutiliza sus colores (:root) y .boton. Móvil primero (390 px, una mano, entre llamadas);
   escritorio desde 1024 px. Guía completa: DISENO.md.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

body.comercial {
  /* Superficies */
  --cm-lienzo: #f4f5f7;          /* fondo de página: las tarjetas blancas se separan solas */
  --cm-tarjeta: #ffffff;
  --cm-linea: #e6e8ec;
  --cm-linea-fuerte: #d5d9df;
  /* Tinta: el «azul noche» de kesury.com. Siguiente llamada, precio, modo llamada y entrada */
  --cm-tinta: #0b1324;
  --cm-tinta-2: #16213a;
  --cm-tinta-linea: rgba(255, 255, 255, .14);
  --cm-tinta-tenue: #aab4c6;     /* 8,9:1 sobre la tinta */
  --cm-tinta-acento: #9db8ff;    /* 9,5:1 sobre la tinta */
  /* Texto (el --tenue del panel baja a 4,4:1 sobre el lienzo; este no) */
  --cm-tenue: #5b6474;           /* 5,5:1 sobre el lienzo · 6:1 sobre blanco */
  /* Tonos de estado (fondos suaves; el texto, siempre el oscuro de su familia) */
  --cm-verde-tono: #e8f6ee;
  --cm-verde-texto: #166534;
  --cm-oro: #e0a526;             /* solo marcas (barra «estimada»), siempre con su leyenda */
  --cm-oro-tono: #fdf6e3;
  --cm-oro-texto: #7a4b00;
  --cm-rojo-tono: #fdf0f0;
  --cm-gris-marca: #334155;      /* llamada hecha (barra del día) */
  --cm-pista: #e1e4ea;           /* lo que falta (barras) */
  /* Forma y movimiento */
  --cm-radio: 16px;
  --cm-radio-m: 12px;
  --cm-sombra: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .03);
  --cm-sombra-media: 0 6px 20px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);
  --cm-sombra-alta: 0 24px 60px rgba(11, 19, 36, .28), 0 2px 8px rgba(11, 19, 36, .10);
  --cm-cabecera: 56px;
  --cm-pie: 76px;                /* barra de abajo (pestañas o Llamar) */
  --cm-curva: cubic-bezier(.2, .8, .2, 1);
  background: var(--cm-lienzo);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body.comercial :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) { html:has(body.comercial) { scroll-behavior: smooth; } }
.cm-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-i.cm-p { width: 16px; height: 16px; }
.cm-i.cm-g { width: 22px; height: 22px; }
.cm-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-tenue { color: var(--cm-tenue); }

/* ── Botones (sobre .boton del panel) ─────────────────────────────────────────────────────────────────────────── */
body.comercial .boton { min-height: 48px; padding: 10px 16px; border-radius: var(--cm-radio-m); font-size: 15px; font-weight: 650; gap: 8px; border-color: var(--cm-linea-fuerte); transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
body.comercial .boton:active { transform: scale(.98); }
body.comercial .boton.verde { background: var(--verde); border-color: var(--verde); color: #fff; }
body.comercial .boton.verde:hover { background: #166534; border-color: #166534; color: #fff; }
body.comercial .boton.principal:hover { color: #fff; }
body.comercial .boton[aria-disabled="true"], body.comercial .boton:disabled { background: #e9ecf1; border-color: #e9ecf1; color: var(--cm-tenue); cursor: not-allowed; transform: none; opacity: 1; }
.boton.cm-grande { min-height: 54px; font-size: 16px; padding: 12px 18px; }
.boton.cm-claro { background: transparent; border-color: rgba(255, 255, 255, .32); color: #fff; }
.boton.cm-claro:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.boton.cm-blanco { background: #fff; border-color: #fff; color: var(--acento-oscuro); }
.boton.cm-blanco:hover { background: #eef3ff; border-color: #eef3ff; color: var(--acento-oscuro); }
.boton.cm-sutil { background: var(--cm-tarjeta); }

/* ── Cabecera ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.cm-cabecera {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  height: calc(var(--cm-cabecera) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 16px;
  background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--cm-linea);
  transition: background-color .25s, color .25s;
}
.cm-marca { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--texto); font-weight: 760; font-size: 19px; letter-spacing: -.025em; white-space: nowrap; }
.cm-marca:hover { color: var(--texto); }
.cm-marca small { font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--acento-oscuro); background: var(--acento-claro); padding: 4px 7px; border-radius: 6px; line-height: 1; }
.cm-atras { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-left: -8px; padding: 0 10px 0 4px; border-radius: 10px; color: var(--texto); font-weight: 650; font-size: 16px; }
.cm-atras:hover { background: var(--gris-claro); color: var(--texto); }
.cm-cabecera .cm-atras + .cm-marca { display: none; }
.cm-nav-arriba { display: none; }
.cm-estado-llamada { display: none; }
.cm-yo { position: relative; margin-left: auto; }
.cm-yo > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border-radius: 22px; cursor: pointer; }
.cm-yo > summary::-webkit-details-marker { display: none; }
.cm-yo-nombre { display: none; font-size: 14px; font-weight: 600; color: var(--suave); }
.cm-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cm-tinta); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.cm-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 248px; padding: 8px; background: #fff; border: 1px solid var(--cm-linea); border-radius: 14px; box-shadow: var(--cm-sombra-alta); color: var(--texto); }
.cm-menu p { margin: 6px 10px 10px; font-size: 13px; color: var(--cm-tenue); }
.cm-menu p strong { display: block; color: var(--texto); font-size: 15px; }
.cm-menu .boton { width: 100%; justify-content: flex-start; border: 0; }
.cm-menu .boton:hover { background: var(--gris-claro); }

/* ── Pestañas de abajo (móvil; en escritorio pasan a la cabecera) ──────────────────────────────────────────────── */
.cm-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--cm-linea);
}
.cm-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border-radius: 14px; color: var(--cm-tenue); font-size: 12px; font-weight: 650; }
.cm-nav a:hover { color: var(--texto); }
.cm-nav-icono { position: relative; display: inline-grid; place-items: center; width: 56px; height: 30px; border-radius: 15px; transition: background-color .2s; }
.cm-nav a[aria-current="page"] { color: var(--texto); }
.cm-nav a[aria-current="page"] .cm-nav-icono { background: var(--acento-claro); color: var(--acento-oscuro); }
.cm-burbuja { position: absolute; top: -2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acento); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #fff; }

/* ── Página ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.cm-main { max-width: 760px; margin: 0 auto; padding: 20px 16px calc(var(--cm-pie) + 36px + env(safe-area-inset-bottom)); }
.cm-ceja { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; line-height: 1.3; font-weight: 750; letter-spacing: .085em; text-transform: uppercase; color: var(--cm-tenue); }
.cm-ceja::before { content: ""; flex: none; width: 14px; height: 2px; border-radius: 1px; background: currentColor; opacity: .55; }
.cm-ceja.cm-sin-raya::before { display: none; }
.cm-titulo { margin: 0; font-size: 30px; line-height: 1.08; letter-spacing: -.03em; font-weight: 780; text-wrap: balance; }
.cm-sub { margin: 6px 0 0; color: var(--cm-tenue); font-size: 15px; }
.cm-cabeza-pagina { margin: 0 0 18px; }
.cm-volver-escritorio { display: none !important; align-items: center; gap: 4px; min-height: 44px; margin: -10px 0 4px; font-weight: 650; font-size: 15px; color: var(--cm-tenue); }
.cm-volver-escritorio:hover { color: var(--texto); }

/* Aviso tras guardar («Subido a Ismael» + Deshacer) */
.cm-aviso {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px;
  background: var(--cm-tinta); color: #fff; border-radius: 14px; box-shadow: var(--cm-sombra-media); font-size: 15px;
  animation: cm-entrar .35s var(--cm-curva) both;
}
.cm-aviso[hidden] { display: none; }
.cm-aviso .cm-i { color: #4ade80; margin-top: 1px; }
.cm-aviso p { margin: 0; flex: 1; font-weight: 650; }
.cm-aviso p span { display: block; color: var(--cm-tinta-tenue); font-size: 14px; font-weight: 500; }
.cm-aviso a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px -6px -12px 0; padding: 0 6px; color: var(--cm-tinta-acento); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; align-self: center; }
.cm-aviso a:focus-visible { outline-color: #fff; }
.cm-aviso.cm-error { background: var(--rojo-claro); color: var(--rojo); border: 1px solid #f5cccc; box-shadow: none; }

/* ── Hoy: el día ──────────────────────────────────────────────────────────────────────────────────────────────── */
.cm-dia { margin: 16px 0 0; }
.cm-dia-cifras { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.cm-dia-cifras strong { font-size: 17px; letter-spacing: -.01em; }
.cm-dia-cifras span { color: var(--cm-tenue); font-size: 14px; }
.cm-barra-dia { display: flex; gap: 2px; height: 10px; margin: 0; padding: 0; list-style: none; }
.cm-barra-dia li { flex: 1; background: var(--cm-pista); transform-origin: left; }
.cm-barra-dia li:first-child { border-radius: 5px 0 0 5px; }
.cm-barra-dia li:last-child { border-radius: 0 5px 5px 0; }
.cm-barra-dia li.cm-hecha { background: var(--cm-gris-marca); animation: cm-llenar .5s var(--cm-curva) both; }
.cm-barra-dia li.cm-bien { background: var(--verde); animation: cm-llenar .5s var(--cm-curva) both; }
.cm-barra-dia li:nth-child(2) { animation-delay: .05s; } .cm-barra-dia li:nth-child(3) { animation-delay: .1s; } .cm-barra-dia li:nth-child(4) { animation-delay: .15s; }
.cm-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--suave); }
.cm-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.cm-leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--cm-pista); }
.cm-leyenda i.cm-hecha { background: var(--cm-gris-marca); } .cm-leyenda i.cm-bien, .cm-leyenda i.cm-cobrada { background: var(--verde); } .cm-leyenda i.cm-estimada { background: var(--cm-oro); }
.cm-leyenda b { color: var(--texto); }

/* Siguiente llamada: la tarjeta oscura, lo único grande de la pantalla */
.cm-siguiente {
  position: relative; margin: 22px 0 26px; padding: 18px 18px 16px; border-radius: 22px; color: #fff; overflow: hidden;
  background: radial-gradient(130% 120% at 100% 0%, #1d2d52 0%, var(--cm-tinta) 58%);
  box-shadow: 0 14px 34px rgba(11, 19, 36, .26), 0 2px 6px rgba(11, 19, 36, .12);
  animation: cm-entrar .45s var(--cm-curva) both;
}
.cm-siguiente::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); pointer-events: none; }
.cm-siguiente-arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.cm-siguiente .cm-ceja { margin: 0; color: var(--cm-tinta-tenue); white-space: nowrap; }
.cm-siguiente .cm-ceja b { color: #fff; font-size: 13px; letter-spacing: .04em; }
.cm-cuenta-atras { flex: none; padding: 4px 10px; border-radius: 999px; background: rgba(74, 222, 128, .14); color: #86efac; font-size: 13px; font-weight: 700; white-space: nowrap; }
.cm-abierto { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--cm-tinta-tenue); white-space: nowrap; }
.cm-siguiente-meta .cm-abierto { margin-left: 2px; }
.cm-abierto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
.cm-abierto.cm-cerrado::before { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.cm-siguiente h2 { margin: 0; font-size: 25px; line-height: 1.12; letter-spacing: -.025em; font-weight: 760; }
.cm-siguiente h2 a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; }
.cm-siguiente-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 0; color: var(--cm-tinta-tenue); font-size: 15px; }
.cm-gancho { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid var(--cm-tinta-linea); font-size: 16px; font-weight: 600; line-height: 1.35; }
.cm-gancho .cm-i { color: var(--cm-tinta-acento); margin-top: 1px; }
.cm-gancho > span { display: flex; flex-direction: column; }
.cm-gancho small { order: -1; margin: 0 0 2px; font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-tinta-tenue); }
.cm-siguiente-nota { margin: 10px 2px 0; font-size: 14px; color: var(--cm-tinta-tenue); }
.cm-acciones { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin: 16px 0 0; }
.cm-acciones .boton { width: 100%; }
.cm-siguiente :focus-visible { outline-color: #fff; }

/* Al volver de una llamada: «¿Cómo fue con …?» */
.cm-volviendo { position: relative; margin: 16px 0 0; padding: 18px; border-radius: 22px; color: #fff; background: linear-gradient(160deg, #2f6df0 0%, var(--acento-oscuro) 100%); box-shadow: 0 14px 34px rgba(29, 78, 216, .28); animation: cm-entrar .4s var(--cm-curva) both; }
.cm-volviendo[hidden] { display: none; }
.cm-volviendo-arriba { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: #dbe6ff; }
.cm-volviendo-arriba::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: cm-latido 1.6s ease-in-out infinite; }
.cm-volviendo-arriba b { color: #fff; }
.cm-volviendo h2 { margin: 6px 0 0; font-size: 26px; line-height: 1.1; letter-spacing: -.025em; font-weight: 780; }
.cm-volviendo-botones { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin: 14px 0 0; }
.cm-volviendo-botones .boton { width: 100%; }
.cm-volviendo-nada { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 0 -8px; padding: 0; border: 0; background: none; color: #dbe6ff; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cm-volviendo :focus-visible { outline-color: #fff; }
.cm-volviendo + .cm-siguiente { margin-top: 16px; }

/* Secciones de Hoy */
.cm-seccion { margin: 0 0 24px; }
.cm-bloque + .cm-seccion { margin-top: 28px; }
.cm-seccion-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.cm-seccion-cabeza h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 750; letter-spacing: .085em; text-transform: uppercase; color: var(--cm-tenue); }
.cm-seccion-cabeza h2::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: currentColor; opacity: .55; }
.cm-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e6e9ee; color: var(--suave); font-size: 12px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cm-seccion-cabeza > span { font-size: 13px; color: var(--cm-tenue); }
.cm-seccion.cm-urgente .cm-seccion-cabeza h2 { color: var(--rojo); }
.cm-seccion.cm-urgente .cm-seccion-cabeza h2 .cm-n { background: var(--rojo-claro); color: var(--rojo); }

/* Lista de filas (agenda, por llamar, mis negocios) */
.cm-lista { margin: 0; padding: 0; list-style: none; background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); border-radius: var(--cm-radio); box-shadow: var(--cm-sombra); overflow: hidden; }
.cm-fila { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 0; border-top: 1px solid var(--cm-linea); }
.cm-fila:first-child { border-top: 0; }
.cm-fila:hover { background: #fafbfc; }
.cm-fila-enlace { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; min-height: 72px; padding: 14px 4px 14px 16px; color: var(--texto); }
.cm-fila-enlace:hover { color: var(--texto); }
.cm-hora { flex: none; width: 50px; padding-top: 1px; font-size: 16px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cm-hora small { display: block; margin-top: 1px; font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--cm-tenue); }
.cm-hora.cm-verde small { color: var(--cm-verde-texto); }
.cm-hora.cm-tarde, .cm-hora.cm-tarde small { color: var(--rojo); }
.cm-fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cm-fila-nombre { font-size: 16px; font-weight: 680; letter-spacing: -.01em; line-height: 1.25; }
.cm-fila-nombre span { font-weight: 500; color: var(--cm-tenue); }
.cm-fila-linea { font-size: 14px; color: var(--suave); line-height: 1.35; }
.cm-fila-linea.cm-gancho-linea { color: var(--texto); font-weight: 600; }
.cm-fila-linea.cm-gancho-linea::before { content: "→ "; color: var(--acento); font-weight: 700; }
.cm-llamar-redondo { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cm-verde-tono); color: var(--verde); transition: background-color .15s, transform .1s; }
.cm-llamar-redondo:hover { background: #d4eedf; color: var(--verde); }
.cm-llamar-redondo:active { transform: scale(.94); }
.cm-flecha { flex: none; align-self: center; color: #9aa3b2; }
.cm-resultado { font-size: 14px; color: var(--suave); }

/* Chips de estado (pocas palabras, siempre con texto: el color nunca va solo) */
.cm-chip-estado { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; background: #eceef2; color: var(--suave); }
.cm-chip-estado.verde { background: var(--cm-verde-tono); color: var(--cm-verde-texto); }
.cm-chip-estado.oro { background: var(--cm-oro-tono); color: var(--cm-oro-texto); }
.cm-chip-estado.rojo { background: var(--cm-rojo-tono); color: var(--rojo); }
.cm-chip-estado.azul { background: var(--acento-claro); color: var(--acento-oscuro); }

/* Tarjetas sueltas (pendiente de clientes, ventas) */
.cm-tarjeta { background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); border-radius: var(--cm-radio); box-shadow: var(--cm-sombra); padding: 16px; }
.cm-tarjeta + .cm-tarjeta { margin-top: 10px; }
.cm-tarjeta-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cm-tarjeta-cabeza a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 -8px; color: var(--texto); font-weight: 680; font-size: 16px; }
.cm-tarjeta-cabeza p { margin: 2px 0 0; font-size: 14px; color: var(--cm-tenue); }
.cm-pasos { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.cm-pasos li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--cm-oro-tono); color: var(--cm-oro-texto); }
.cm-pasos li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.cm-pasos li.cm-ok { background: var(--cm-verde-tono); color: var(--cm-verde-texto); }
.cm-pasos li.cm-ok::before, .cm-chip.cm-casilla input:checked + span::before {
  border: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.cm-pasos li.cm-luego { background: #eceef2; color: var(--suave); }

/* Hechas hoy (plegable) */
.cm-plegable { background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); border-radius: var(--cm-radio); box-shadow: var(--cm-sombra); }
.cm-plegable > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; cursor: pointer; font-weight: 650; }
.cm-plegable > summary::-webkit-details-marker { display: none; }
.cm-plegable > summary > span:first-child { flex: 1; }
.cm-plegable > summary::after { content: ""; width: 8px; height: 8px; margin: -4px 4px 0 0; border-right: 2px solid var(--cm-tenue); border-bottom: 2px solid var(--cm-tenue); transform: rotate(45deg); transition: transform .2s var(--cm-curva); }
.cm-plegable[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.cm-plegable .cm-lista { border: 0; border-top: 1px solid var(--cm-linea); border-radius: 0 0 var(--cm-radio) var(--cm-radio); box-shadow: none; }

/* Vacío (Hoy sin llamadas, Mis ventas sin ventas…) */
.cm-vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 24px; padding: 22px 18px; border-radius: var(--cm-radio); background: var(--cm-tarjeta); border: 1px dashed var(--cm-linea-fuerte); }
.cm-vacio strong { font-size: 17px; }
.cm-vacio p { margin: 0; font-size: 15px; color: var(--suave); }

/* Tu mes (resumen pequeño) */
.cm-mes-mini { display: block; padding: 16px; border-radius: var(--cm-radio); background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); box-shadow: var(--cm-sombra); color: var(--texto); }
.cm-mes-mini:hover { color: var(--texto); border-color: var(--cm-linea-fuerte); }
.cm-mes-mini .cm-ceja { margin-bottom: 6px; }
.cm-mes-mini strong { display: block; font-size: 30px; line-height: 1.1; letter-spacing: -.03em; font-weight: 780; }
.cm-mes-mini p { margin: 4px 0 0; font-size: 14px; color: var(--suave); }
.cm-mes-mini p b { color: var(--cm-verde-texto); }
.cm-mes-mini .cm-ir { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--acento); font-weight: 650; font-size: 14px; }

/* ── Ficha del negocio ────────────────────────────────────────────────────────────────────────────────────────── */
.cm-ficha-cabeza { margin: 0 0 14px; }
.cm-estado { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.cm-gancho-ficha { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 16px; font-weight: 650; line-height: 1.35; }
.cm-gancho-ficha .cm-i { color: var(--acento); margin-top: 1px; }
.cm-contacto { margin: 16px 0 0; background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); border-radius: var(--cm-radio); box-shadow: var(--cm-sombra); overflow: hidden; }
.cm-contacto-fila { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 14px; border-top: 1px solid var(--cm-linea); color: var(--texto); }
.cm-contacto-fila:first-child { border-top: 0; }
.cm-contacto-fila > .cm-i { color: var(--cm-tenue); }
.cm-contacto-fila > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-contacto-fila strong { font-size: 16px; font-weight: 680; }
.cm-contacto-fila span { font-size: 13.5px; color: var(--cm-tenue); line-height: 1.35; }
.cm-contacto-fila .cm-tel { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -4px; font-size: 19px; font-weight: 720; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--texto); }
.cm-contacto-fila .cm-tel:hover { color: var(--acento-oscuro); }
/* Enlace dentro de la línea: 44 px de toque sin mover la línea (relleno y margen negativos) */
.cm-contacto-fila .cm-tel-otro { display: inline-block; padding: 13px 2px; margin: -13px -2px; color: var(--acento-oscuro); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-contacto-fila > .cm-enlaces { flex-direction: row; flex-wrap: wrap; gap: 0 18px; }
.cm-enlaces a { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; font-weight: 650; font-size: 14.5px; }
.cm-enlaces .cm-i { width: 14px; height: 14px; }
.cm-abierto-punto { display: inline-block; width: 8px; height: 8px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px var(--cm-verde-tono); vertical-align: middle; }
.cm-acciones-carril { display: none; grid-template-columns: 1.5fr 1fr; gap: 10px; margin: 12px 0 0; }
.cm-acciones-carril .boton { width: 100%; }

/* Índice de la ficha: saltar de un bloque a otro en plena llamada */
.cm-indice {
  position: sticky; top: calc(var(--cm-cabecera) + env(safe-area-inset-top)); z-index: 20;
  display: flex; gap: 6px; margin: 0 -16px 14px; padding: 8px 16px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  background: rgba(244, 245, 247, .97); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.cm-indice::-webkit-scrollbar { display: none; }
.cm-indice a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; scroll-snap-align: start; background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); color: var(--suave); font-size: 14.5px; font-weight: 650; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.cm-indice a:hover { color: var(--texto); border-color: var(--cm-linea-fuerte); }
.cm-indice a[aria-current] { background: var(--cm-tinta); border-color: var(--cm-tinta); color: #fff; }
.cm-indice a .cm-i { width: 16px; height: 16px; }
.cm-indice-titulo, .cm-atajo { display: none; }

/* Bloques de la ficha */
.cm-bloque { scroll-margin-top: 128px; margin: 0 0 14px; padding: 20px 18px; background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); border-radius: var(--cm-radio); box-shadow: var(--cm-sombra); }
.cm-bloque-cabeza { margin: 0 0 14px; }
.cm-bloque-cabeza h2 { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 750; }
.cm-bloque-cabeza .cm-ceja { margin: 0 0 4px; }
.cm-bloque h3 { margin: 22px 0 10px; font-size: 12.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-tenue); }
.cm-clave { margin: 0 0 14px; font-size: 22px; line-height: 1.28; letter-spacing: -.018em; font-weight: 700; text-wrap: balance; }
.cm-clave mark { background: linear-gradient(transparent 60%, #fde68a 60%); color: inherit; padding: 0 1px; }

.cm-prueba { padding: 14px; border-radius: var(--cm-radio-m); background: var(--cm-lienzo); }
.cm-prueba-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 680; }
.cm-prueba-titulo span { font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-tenue); }
.cm-prueba-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-lado { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 10px; background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); color: var(--texto); }
a.cm-lado:hover { border-color: var(--cm-linea-fuerte); color: var(--texto); }
.cm-lado small { font-size: 12.5px; font-weight: 650; color: var(--cm-tenue); }
.cm-lado b { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 760; }
.cm-lado.cm-mal b { color: var(--rojo); }
.cm-lado .cm-abrir { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 650; color: var(--acento); }
.cm-lado .cm-abrir .cm-i { width: 14px; height: 14px; }
.cm-prueba-pie { display: flex; align-items: flex-start; gap: 8px; margin: 10px 2px 0; font-size: 13.5px; color: var(--suave); line-height: 1.4; }
.cm-prueba-pie .cm-i { width: 16px; height: 16px; margin-top: 1px; color: var(--verde); }
.cm-ademas { margin: 14px 0 0; padding: 0; list-style: none; }
.cm-ademas li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--cm-linea); font-size: 15.5px; line-height: 1.4; }
.cm-ademas li:first-child { border-top: 0; }
.cm-ademas li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); opacity: .8; }
.cm-ojo { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--cm-radio-m); background: var(--cm-oro-tono); border: 1px solid #f1e2b8; color: #5c4306; }
.cm-ojo p { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 750; font-size: 14px; letter-spacing: .02em; }
.cm-ojo ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.45; }
.cm-ojo li + li { margin-top: 4px; }

/* Desplegable dentro de un bloque («Cómo lo cuenta Ismael», «La frase de Ismael», «Generar otra») */
.cm-desplegable { margin: 14px 0 0; border-top: 1px solid var(--cm-linea); }
.cm-desplegable > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-weight: 650; font-size: 15px; color: var(--acento-oscuro); }
.cm-desplegable > summary::-webkit-details-marker { display: none; }
.cm-desplegable > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--cm-curva); }
.cm-desplegable[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.cm-cita { margin: 0 0 10px; padding: 2px 0 2px 14px; border-left: 3px solid var(--acento); font-size: 16px; line-height: 1.5; color: var(--texto); }

/* Sus números */
.cm-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.cm-cifra { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--cm-radio-m); background: var(--cm-lienzo); }
.cm-cifra b { font-size: 25px; line-height: 1.1; letter-spacing: -.025em; font-weight: 780; white-space: nowrap; }
.cm-cifra span { font-size: 13.5px; color: var(--suave); line-height: 1.3; }
.cm-cifra em { font-style: normal; font-size: 12.5px; color: var(--cm-tenue); }
.cm-hechos { margin: 12px 0 0; }
.cm-hechos div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--cm-linea); font-size: 15px; }
.cm-hechos dt { color: var(--suave); }
.cm-hechos dd { margin: 0; text-align: right; font-weight: 650; }
.cm-hechos dd.cm-mal { color: var(--rojo); }
.cm-cuenta { margin: 16px 0 0; padding: 16px; border-radius: 14px; background: linear-gradient(180deg, #f1f6ff 0%, #ffffff 100%); border: 1px solid #d9e5fc; }
.cm-cuenta .cm-ceja { color: var(--acento-oscuro); }
.cm-cuenta-pregunta { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.cm-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-campo { display: flex; flex-direction: column; gap: 4px; }
.cm-campo label { font-size: 13px; font-weight: 650; color: var(--suave); }
.cm-entrada { display: flex; align-items: center; border: 1px solid var(--cm-linea-fuerte); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cm-entrada:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
body.comercial .cm-entrada input { border: 0; outline: 0; background: transparent; padding: 10px 4px 10px 12px; font-size: 21px; font-weight: 720; letter-spacing: -.01em; min-height: 48px; }
.cm-entrada span { padding: 0 12px 0 2px; color: var(--cm-tenue); font-size: 14px; font-weight: 650; white-space: nowrap; }
.cm-cuenta-resultado { display: flex; flex-direction: column; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid #d9e5fc; }
.cm-cuenta-resultado span { font-size: 14px; color: var(--suave); }
.cm-cuenta-resultado strong { font-size: 32px; line-height: 1.1; letter-spacing: -.03em; font-weight: 800; color: var(--texto); }
.cm-cuenta-resultado small { margin-top: 4px; font-size: 14px; color: var(--suave); }
.cm-regla { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 13.5px; color: var(--cm-tenue); line-height: 1.4; }
.cm-regla .cm-i { width: 16px; height: 16px; margin-top: 1px; }

/* Precio y oferta */
.cm-precio { position: relative; padding: 18px; border-radius: 18px; color: #fff; background: radial-gradient(140% 140% at 100% 0%, #1d2d52 0%, var(--cm-tinta) 60%); overflow: hidden; }
.cm-precio .cm-ceja { color: var(--cm-tinta-tenue); }
.cm-precio-cifra { margin: 2px 0 0; font-size: 34px; line-height: 1.05; letter-spacing: -.035em; font-weight: 800; }
.cm-precio-cifra small { font-size: 18px; font-weight: 650; letter-spacing: -.01em; color: var(--cm-tinta-tenue); }
.cm-incluye { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.cm-incluye li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--cm-tinta-linea); font-size: 13.5px; font-weight: 600; }
.cm-incluye li .cm-i { width: 14px; height: 14px; color: #4ade80; }
.cm-precio-lineas { margin: 14px 0 0; padding: 0; list-style: none; }
.cm-precio-lineas li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cm-tinta-linea); font-size: 15px; }
.cm-precio-lineas li span { color: var(--cm-tinta-tenue); }
.cm-precio-lineas li b { text-align: right; font-weight: 650; }
.cm-precio .cm-desplegable { border-top-color: var(--cm-tinta-linea); }
.cm-precio .cm-desplegable > summary { color: var(--cm-tinta-acento); }
.cm-precio .cm-cita { border-left-color: var(--cm-tinta-acento); color: #fff; }
.cm-precio .cm-calla { margin: 0; font-size: 14px; color: var(--cm-tinta-tenue); }
.cm-precio :focus-visible { outline-color: #fff; }
.cm-haremos { margin: 0; padding: 0; list-style: none; counter-reset: h; }
.cm-haremos li { display: grid; grid-template-columns: 28px 1fr; gap: 2px 10px; padding: 12px 0; border-top: 1px solid var(--cm-linea); }
.cm-haremos li:first-child { border-top: 0; padding-top: 2px; }
.cm-haremos li::before { counter-increment: h; content: counter(h); grid-row: span 2; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acento-claro); color: var(--acento-oscuro); font-size: 13px; font-weight: 750; }
.cm-haremos b { font-size: 16px; font-weight: 680; }
.cm-haremos span { font-size: 14.5px; color: var(--suave); line-height: 1.4; }
.cm-gana { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px; border-radius: 14px; background: var(--cm-verde-tono); color: #0f3d22; }
.cm-gana .cm-i { color: var(--verde); margin-top: 2px; }
.cm-gana p { margin: 0; font-size: 15px; line-height: 1.45; }
.cm-gana strong { display: block; font-size: 20px; letter-spacing: -.02em; color: #0b2e19; }

/* Pegas y respuestas */
.cm-pegas { margin: 0; padding: 0; list-style: none; }
.cm-pega { border-top: 1px solid var(--cm-linea); }
.cm-pegas li:first-child .cm-pega { border-top: 0; }
.cm-pega > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 0; cursor: pointer; font-size: 16.5px; font-weight: 680; letter-spacing: -.01em; }
.cm-pega > summary::-webkit-details-marker { display: none; }
.cm-pega > summary > span:first-child { flex: 1; }
.cm-pega > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 6px 0 0; border-right: 2px solid var(--cm-tenue); border-bottom: 2px solid var(--cm-tenue); transform: rotate(45deg); transition: transform .2s var(--cm-curva); }
.cm-pega[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.cm-pega[open] > summary { color: var(--acento-oscuro); }
.cm-pega-cuerpo { padding: 0 0 16px; }
.cm-pega-cuerpo p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.cm-pega-cuerpo .cm-cita { margin-bottom: 10px; }
.cm-pega-cuerpo ul { margin: 6px 0 0; padding-left: 20px; font-size: 15px; color: var(--suave); }
.cm-pega-cuerpo .cm-ir { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 650; }
.cm-probable { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--acento-claro); color: var(--acento-oscuro); font-size: 11.5px; font-weight: 750; letter-spacing: .02em; }
.cm-salida { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--cm-lienzo); font-size: 15px; line-height: 1.45; }
.cm-salida b { display: block; margin-bottom: 2px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cm-tenue); }

/* Su demo */
.cm-demo-estado { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 7px 12px 7px 10px; border-radius: 12px; background: var(--cm-verde-tono); color: var(--cm-verde-texto); font-size: 14px; font-weight: 650; line-height: 1.35; }
.cm-demo-estado::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); animation: cm-latido 1.6s ease-in-out infinite; }
.cm-demo-estado.cm-quieta { background: #eceef2; color: var(--suave); }
.cm-demo-estado.cm-quieta::before { background: #9aa3b2; animation: none; }
.cm-demo-codigo { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--cm-lienzo); }
.cm-demo-codigo small { display: block; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-tenue); }
.cm-demo-codigo b { font-size: 34px; line-height: 1.1; letter-spacing: .14em; font-weight: 800; font-variant-numeric: tabular-nums; }
.cm-demo-codigo a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.cm-demo-botones { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0 0; }
@media (min-width: 480px) { .cm-demo-botones { grid-template-columns: 1.4fr 1fr; } }
.cm-demo-botones .boton { width: 100%; }
.cm-dictar { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--suave); }
.cm-dictar b { color: var(--texto); }
.cm-demo-pie { margin: 10px 0 0; font-size: 13.5px; color: var(--cm-tenue); line-height: 1.45; }
.cm-demo-form { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.cm-demo-form label { font-size: 13px; font-weight: 650; color: var(--suave); margin-top: 6px; }
.cm-demo-form input { min-height: 48px; border-radius: 12px; }
.cm-demo-form .boton { margin-top: 10px; }
.cm-demo-texto { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--suave); }

/* Todo el estudio */
.cm-estudio { margin: 0; padding: 0; list-style: none; }
.cm-estudio details { border-top: 1px solid var(--cm-linea); }
.cm-estudio li:first-child details { border-top: 0; }
.cm-estudio summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font-size: 16px; font-weight: 650; }
.cm-estudio summary::-webkit-details-marker { display: none; }
.cm-estudio summary > span:first-child { flex: 1; }
.cm-estudio summary small { font-size: 13px; font-weight: 600; color: var(--cm-tenue); }
.cm-estudio summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 6px 0 0; border-right: 2px solid var(--cm-tenue); border-bottom: 2px solid var(--cm-tenue); transform: rotate(45deg); transition: transform .2s var(--cm-curva); }
.cm-estudio details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.cm-texto { padding: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--suave); overflow-wrap: anywhere; }
.cm-texto p { margin: 0 0 8px; }
.cm-texto ul, .cm-texto ol { margin: 0 0 8px; padding-left: 20px; }
.cm-texto li + li { margin-top: 4px; }
.cm-texto strong { color: var(--texto); }

/* Historial */
.cm-historial { margin: 0; padding: 0; list-style: none; }
.cm-historial li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 16px 24px; font-size: 15px; }
.cm-historial li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--acento); box-sizing: border-box; }
.cm-historial li::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 2px; background: var(--cm-linea); }
.cm-historial li:last-child { padding-bottom: 0; }
.cm-historial li:last-child::after { display: none; }
.cm-historial li.cm-kesury::before { border-color: #9aa3b2; }
.cm-historial time { font-size: 13px; color: var(--cm-tenue); font-weight: 600; }

/* Subir a Ismael (en la ficha, para dudas) */
body.comercial .cm-subir textarea { border-radius: 12px; border-color: var(--cm-linea-fuerte); font-size: 16px; padding: 12px; }
.cm-subir .boton { margin-top: 10px; }

/* Barra de abajo de la ficha: Llamar y Cómo fue, siempre al alcance del pulgar */
.cm-barra-llamar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--cm-linea);
}
.cm-barra-llamar .boton { width: 100%; }

/* ── Modo «en llamada»: la cabecera pasa a tinta con el tiempo, y «Cómo fue» manda ───────────────────────────── */
.cm-en-curso { display: none !important; }
body.en-llamada .cm-en-curso { display: inline-flex !important; grid-column: 1 / -1; }
body.en-llamada .cm-en-reposo { display: none !important; }
body.en-llamada .cm-cabecera { background: var(--cm-tinta); border-bottom-color: var(--cm-tinta); color: #fff; }
body.en-llamada .cm-cabecera .cm-atras, body.en-llamada .cm-cabecera .cm-marca { color: #fff; }
body.en-llamada .cm-cabecera .cm-atras:hover { background: rgba(255, 255, 255, .08); }
body.en-llamada .cm-cabecera .cm-marca small { background: rgba(255, 255, 255, .12); color: #fff; }
body.en-llamada .cm-cabecera :focus-visible { outline-color: #fff; }
body.en-llamada .cm-avatar { background: #fff; color: var(--cm-tinta); }
body.en-llamada .cm-estado-llamada { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 15px; font-weight: 650; white-space: nowrap; }
.cm-estado-llamada::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #4ade80; animation: cm-latido 1.6s ease-in-out infinite; }
.cm-estado-llamada b { font-variant-numeric: tabular-nums; font-weight: 750; }
.cm-estado-llamada span { overflow: hidden; text-overflow: ellipsis; color: var(--cm-tinta-tenue); font-weight: 550; }
body.en-llamada .cm-indice { background: var(--cm-tinta); }
body.en-llamada .cm-indice a { background: rgba(255, 255, 255, .06); border-color: var(--cm-tinta-linea); color: #dfe5ef; }
body.en-llamada .cm-indice a:hover { color: #fff; }
body.en-llamada .cm-indice a[aria-current] { background: #fff; border-color: #fff; color: var(--cm-tinta); }
body.en-llamada .cm-indice :focus-visible { outline-color: #fff; }
body.en-llamada .cm-ficha-cabeza .cm-contacto { display: none; }

/* ── Hoja «Cómo fue» (abajo en el móvil; centrada en escritorio). Sin JS se abre con #como-fue (:target) ──────── */
.cm-hoja { display: none; }
.cm-hoja:target, .cm-hoja.abierta { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
html.cm-js .cm-hoja:target:not(.abierta) { display: none; }
.cm-hoja-fondo { position: absolute; inset: 0; background: rgba(11, 19, 36, .5); animation: cm-aparecer .2s ease both; }
.cm-hoja-panel {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 600px; max-height: calc(100% - 28px - env(safe-area-inset-top));
  background: var(--cm-tarjeta); border-radius: 24px 24px 0 0; box-shadow: var(--cm-sombra-alta);
  animation: cm-subir .32s var(--cm-curva) both;
}
.cm-hoja-panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: #d5d9df; }
.cm-hoja-cabeza { display: flex; align-items: flex-start; gap: 10px; padding: 24px 12px 10px 20px; }
.cm-hoja-cabeza > div { flex: 1; min-width: 0; }
.cm-hoja-cabeza h2 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -.025em; font-weight: 780; }
.cm-hoja-cabeza h2:focus { outline: none; }
.cm-hoja-cabeza p { margin: 3px 0 0; font-size: 14.5px; color: var(--cm-tenue); }
.cm-cerrar { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--suave); background: var(--gris-claro); }
.cm-cerrar:hover { background: #e5e7eb; color: var(--texto); }
.cm-hoja-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; }
.cm-hoja-pie { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cm-linea); background: var(--cm-tarjeta); }
.cm-hoja-pie label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 650; color: var(--suave); }
body.comercial .cm-hoja-pie input[type=text] { border-radius: 12px; border-color: var(--cm-linea-fuerte); font-size: 16px; padding: 11px 12px; }
.cm-hoja-pie .boton { width: 100%; margin-top: 10px; }
.cm-grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.cm-grupo + .cm-grupo { margin-top: 18px; }
.cm-grupo legend { padding: 0; margin: 0 4px 8px; font-size: 12px; font-weight: 750; letter-spacing: .085em; text-transform: uppercase; color: var(--cm-tenue); }
.cm-opciones { display: grid; gap: 8px; }
.cm-opciones.cm-dos { grid-template-columns: 1fr 1fr; }
.cm-opcion { position: relative; }
.cm-radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.cm-opcion-cabeza {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px;
  border: 1.5px solid var(--cm-linea); border-radius: 16px; background: var(--cm-tarjeta); cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.cm-opcion-cabeza:hover { border-color: var(--cm-linea-fuerte); }
.cm-opcion-cabeza::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cm-linea-fuerte); background: #fff; box-sizing: border-box; transition: border .15s, background-color .15s; }
.cm-opcion-cabeza > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-opcion-cabeza b { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.cm-opcion-cabeza small { font-size: 13.5px; color: var(--cm-tenue); line-height: 1.35; margin-top: 1px; }
.cm-opcion-cabeza .cm-i { color: var(--cm-tenue); }
.cm-opciones.cm-dos .cm-opcion-cabeza { position: relative; height: 100%; align-items: flex-start; padding: 12px 36px 12px 14px; }
.cm-opciones.cm-dos .cm-opcion-cabeza::before { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
.cm-opciones.cm-dos .cm-opcion { display: flex; }
.cm-opciones.cm-dos .cm-opcion-cabeza { flex: 1; }
.cm-radio:checked + .cm-opcion-cabeza { border-color: var(--acento); background: var(--acento-claro); box-shadow: inset 0 0 0 1px var(--acento); }
.cm-radio:checked + .cm-opcion-cabeza::before { border: 7px solid var(--acento); }
.cm-opciones.cm-dos .cm-radio:checked + .cm-opcion-cabeza::before { border-width: 6px; }
.cm-radio:focus-visible + .cm-opcion-cabeza { outline: 2px solid var(--acento); outline-offset: 2px; }
.cm-opcion-venta .cm-radio:checked + .cm-opcion-cabeza { border-color: var(--verde); background: var(--cm-verde-tono); box-shadow: inset 0 0 0 1px var(--verde); }
.cm-opcion-venta .cm-radio:checked + .cm-opcion-cabeza::before { border-color: var(--verde); }
.cm-opcion-venta .cm-opcion-cabeza .cm-i { color: var(--verde); }
.cm-opcion-detalle { display: none; margin: 8px 0 4px; padding: 14px; border-radius: 14px; background: var(--cm-lienzo); }
.cm-radio:checked ~ .cm-opcion-detalle { display: block; animation: cm-entrar .25s var(--cm-curva) both; }
.cm-etiqueta { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--suave); }
.cm-grupo legend.cm-etiqueta { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--suave); }
.cm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-chip { position: relative; display: inline-flex; }
.cm-chip input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.cm-chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cm-linea-fuerte); background: #fff; font-size: 15px; font-weight: 650; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.cm-chip span:hover { border-color: #b9bfc9; }
.cm-chip input:checked + span { background: var(--cm-tinta); border-color: var(--cm-tinta); color: #fff; }
.cm-chip input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.cm-chip.cm-casilla span { padding-left: 12px; }
.cm-chip.cm-casilla span::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 5px; border: 2px solid currentColor; box-sizing: border-box; opacity: .55; }
.cm-chip.cm-casilla input:checked + span { background: var(--cm-verde-tono); border-color: #b5e2c6; color: var(--cm-verde-texto); }
.cm-chip.cm-casilla input:checked + span::before { opacity: 1; -webkit-mask-size: 14px; mask-size: 14px; }
.cm-otro-dia { display: none; margin: 10px 0 0; }
.cm-cuando:has(input[value="otro"]:checked) .cm-otro-dia { display: block; }
body.comercial .cm-otro-dia input { min-height: 48px; border-radius: 12px; }
.cm-filas-venta { display: grid; gap: 16px; }
.cm-paso-numero { display: flex; align-items: stretch; border: 1px solid var(--cm-linea-fuerte); border-radius: 12px; background: #fff; overflow: hidden; }
.cm-paso-numero:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.cm-paso-numero button { flex: none; width: 52px; border: 0; background: var(--gris-claro); color: var(--texto); font: inherit; font-size: 22px; font-weight: 600; cursor: pointer; }
.cm-paso-numero button:hover { background: #e5e7eb; }
body.comercial .cm-paso-numero input { flex: 1; min-width: 0; border: 0; outline: 0; text-align: center; font-size: 22px; font-weight: 760; letter-spacing: -.01em; padding: 10px 4px; min-height: 52px; }
.cm-paso-numero span { align-self: center; padding: 0 12px 0 0; color: var(--cm-tenue); font-size: 14px; font-weight: 650; white-space: nowrap; }
.cm-ayuda { margin: 6px 2px 0; font-size: 13px; color: var(--cm-tenue); }
.cm-comision-previa { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #b5e2c6; }
.cm-comision-previa .cm-i { color: var(--verde); }
.cm-comision-previa p { margin: 0; font-size: 14px; color: var(--suave); line-height: 1.35; }
.cm-comision-previa strong { display: block; font-size: 22px; letter-spacing: -.02em; color: var(--texto); }
.cm-confirmar { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--cm-linea-fuerte); cursor: pointer; font-size: 15px; font-weight: 650; line-height: 1.35; }
body.comercial .cm-confirmar input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--verde); padding: 0; }

/* ── Mis ventas ───────────────────────────────────────────────────────────────────────────────────────────────── */
.cm-hero { padding: 20px 18px; border-radius: 22px; background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); box-shadow: var(--cm-sombra-media); }
.cm-hero-cifra { margin: 2px 0 0; font-size: 54px; line-height: 1; letter-spacing: -.045em; font-weight: 800; }
.cm-hero-sub { margin: 8px 0 0; font-size: 15px; color: var(--suave); }
.cm-reparto { display: flex; gap: 2px; height: 12px; margin: 16px 0 0; }
.cm-reparto span { display: block; min-width: 6px; }
.cm-reparto span:first-child { border-radius: 6px 0 0 6px; }
.cm-reparto span:last-child { border-radius: 0 6px 6px 0; }
.cm-reparto .cm-cobrada { background: var(--verde); }
.cm-reparto .cm-estimada { background: var(--cm-oro); }
.cm-proxima-venta { margin: 12px 0 0; padding: 20px 18px; border-radius: 22px; color: #fff; background: radial-gradient(130% 130% at 100% 0%, #1d2d52 0%, var(--cm-tinta) 60%); box-shadow: 0 14px 34px rgba(11, 19, 36, .2); }
.cm-proxima-venta .cm-ceja { color: var(--cm-tinta-tenue); }
.cm-proxima-cifra { margin: 2px 0 0; font-size: 44px; line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.cm-proxima-venta > p:not(.cm-ceja):not(.cm-proxima-cifra) { margin: 8px 0 0; font-size: 15px; color: var(--cm-tinta-tenue); }
.cm-tramo { margin: 18px 0 0; }
.cm-tramo-texto { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 14px; color: #dfe5ef; }
.cm-tramo-texto b { color: #fff; }
.cm-tramo ol { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 2px; height: 10px; margin: 0; padding: 0; list-style: none; }
.cm-tramo li { background: rgba(255, 255, 255, .16); }
.cm-tramo li:first-child { border-radius: 5px 0 0 5px; }
.cm-tramo li:last-child { border-radius: 0 5px 5px 0; background: rgba(157, 184, 255, .35); }
.cm-tramo li.cm-ok { background: #fff; }
.cm-tramo-ejes { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 12px; color: var(--cm-tinta-tenue); }
.cm-mini-cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 18px 0 0; border-radius: 12px; overflow: hidden; background: var(--cm-tinta-linea); }
.cm-mini-cifras div { padding: 10px 12px; background: rgba(11, 19, 36, .55); }
.cm-mini-cifras dt { font-size: 12.5px; color: var(--cm-tinta-tenue); }
.cm-mini-cifras dd { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.cm-escalera { margin: 14px 0 0; }
.cm-peldanos { position: relative; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: end; gap: 2px; height: 120px; margin: 22px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--cm-linea-fuerte); }
.cm-peldano { position: relative; height: calc(var(--p) / 40 * 100%); max-width: 24px; justify-self: center; width: 100%; border-radius: 4px 4px 0 0; background: var(--cm-pista); transform-origin: bottom; animation: cm-crecer .6s var(--cm-curva) both; }
.cm-peldano.cm-ok { background: var(--acento); }
.cm-peldano.cm-proxima { background: #c9d9fb; box-shadow: inset 0 0 0 2px var(--acento); }
.cm-peldano:nth-child(n+5) { animation-delay: .06s; } .cm-peldano:nth-child(n+9) { animation-delay: .12s; } .cm-peldano:nth-child(n+13) { animation-delay: .18s; }
.cm-peldano[data-tip]:hover::after, .cm-peldano[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 6px 10px; border-radius: 8px; background: var(--cm-tinta); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none;
}
.cm-peldano:first-child[data-tip]:hover::after, .cm-peldano:first-child[data-tip]:focus-visible::after { left: 0; transform: none; }
.cm-peldano:last-child[data-tip]:hover::after, .cm-peldano:last-child[data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
.cm-marca-peldano { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 11.5px; font-weight: 750; color: var(--suave); white-space: nowrap; }
.cm-peldano:last-child .cm-marca-peldano { left: auto; right: 0; transform: none; }
.cm-peldano.cm-ok .cm-marca-peldano { color: var(--acento-oscuro); }
.cm-ejes { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 11.5px; color: var(--cm-tenue); text-align: center; }
.cm-ejes li { white-space: nowrap; }
.cm-tramos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--suave); }
.cm-tramos b { color: var(--texto); }
.cm-escalera-frase { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--acento-claro); color: #1e3a8a; font-size: 15px; line-height: 1.45; }
.cm-escalera-frase strong { color: #172554; }
.cm-venta { display: flex; flex-direction: column; padding: 16px; }
.cm-venta-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cm-venta-cabeza h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.cm-venta-cabeza p { margin: 2px 0 0; font-size: 14px; color: var(--cm-tenue); }
.cm-venta-importes { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid var(--cm-linea); }
.cm-venta .cm-pasos { margin-bottom: 14px; }
.cm-venta-importes dl { margin: 0; font-size: 14px; color: var(--suave); }
.cm-venta-importes dl div { display: flex; gap: 6px; }
.cm-venta-importes dd { margin: 0; color: var(--texto); font-weight: 650; }
.cm-venta-comision { margin: 0; text-align: right; }
.cm-venta-comision small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cm-tenue); }
.cm-venta-comision b { font-size: 24px; letter-spacing: -.025em; font-weight: 800; }
.cm-venta-comision b.cm-cobrada { color: var(--cm-verde-texto); }
.cm-reglas { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--suave); }
.cm-reglas li + li { margin-top: 6px; }

/* ── Mis negocios ─────────────────────────────────────────────────────────────────────────────────────────────── */
.cm-buscar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 14px; min-height: 50px; border-radius: 14px; background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); box-shadow: var(--cm-sombra); color: var(--cm-tenue); }
.cm-buscar:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
body.comercial .cm-buscar input { border: 0; outline: 0; padding: 12px 0; background: transparent; font-size: 16px; }
.cm-filtros { display: flex; gap: 6px; margin: 0 -16px 16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.cm-filtros::-webkit-scrollbar { display: none; }
.cm-filtros a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); color: var(--suave); font-size: 14.5px; font-weight: 650; }
.cm-filtros a span { font-size: 12.5px; color: var(--cm-tenue); font-variant-numeric: tabular-nums; }
.cm-filtros a[aria-current] { background: var(--cm-tinta); border-color: var(--cm-tinta); color: #fff; }
.cm-filtros a[aria-current] span { color: var(--cm-tinta-tenue); }
.cm-lista.cm-negocios .cm-fila-enlace { align-items: center; min-height: 68px; }

/* ── Entrar ───────────────────────────────────────────────────────────────────────────────────────────────────── */
body.comercial.cm-pagina-entrar { background: var(--cm-tarjeta); }
.cm-entrar { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.cm-entrar-marca { position: relative; padding: calc(18px + env(safe-area-inset-top)) 20px 26px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #1d2d52 0%, var(--cm-tinta) 60%); overflow: hidden; }
.cm-entrar-marca .cm-marca { color: #fff; }
.cm-entrar-marca .cm-marca small { background: rgba(255, 255, 255, .12); color: #fff; }
.cm-entrar-lema { margin: 18px 0 0; font-size: 30px; line-height: 1.08; letter-spacing: -.035em; font-weight: 800; }
.cm-entrar-lema span { display: block; color: var(--cm-tinta-acento); }
.cm-entrar-puntos { display: none; }
.cm-entrar-form { flex: 1; width: 100%; max-width: 440px; margin: 0 auto; padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); }
.cm-entrar-form h1 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -.025em; font-weight: 780; }
.cm-entrar-form > p { margin: 8px 0 0; color: var(--suave); font-size: 16px; }
.cm-entrar-campos { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 0; }
.cm-entrar-campos label { font-size: 14px; font-weight: 650; color: var(--suave); }
body.comercial .cm-entrar-campos input[type=email] { min-height: 54px; border-radius: 14px; font-size: 17px; padding: 12px 14px; border-color: var(--cm-linea-fuerte); }
.cm-entrar-campos .boton { width: 100%; margin-top: 8px; }
.cm-entrar-ayuda { margin: 18px 0 0; font-size: 14px; color: var(--cm-tenue); line-height: 1.5; }
.cm-entrar-ayuda a { font-weight: 650; }
.cm-entrar-enlaces { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 10px 0 0; }
.cm-entrar-enlaces form { margin: 0; }
.cm-entrar-enlaces a, .cm-entrar-enlaces button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--acento); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; }
.cm-otp { position: relative; }
body.comercial .cm-otp input { width: 100%; min-height: 64px; border-radius: 14px; border-color: var(--cm-linea-fuerte); text-align: center; font-size: 30px; font-weight: 750; letter-spacing: .5em; padding: 10px 0 10px .5em; font-variant-numeric: tabular-nums; }
.cm-otp-celdas { display: none; }
html.cm-js .cm-otp-celdas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; pointer-events: none; }
html.cm-js body.comercial .cm-otp input { position: absolute; inset: 0; z-index: 1; opacity: 0; min-height: 0; height: 100%; caret-color: transparent; }
.cm-otp-celdas span { display: grid; place-items: center; height: 62px; border-radius: 14px; border: 1.5px solid var(--cm-linea-fuerte); background: #fff; font-size: 28px; font-weight: 780; font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.cm-otp-celdas span.activa { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.cm-otp-celdas span.llena { border-color: #9aa3b2; }

/* ── Escritorio ───────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) { .cm-carril { display: contents; } }
@media (min-width: 720px) {
  .cm-main { padding-top: 28px; }
  .cm-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cm-hoja:target, .cm-hoja.abierta { align-items: center; padding: 24px; }
  .cm-hoja-panel { border-radius: 24px; max-height: min(860px, calc(100% - 48px)); animation-name: cm-aparecer-escala; }
  .cm-hoja-panel::before { display: none; }
  .cm-hoja-cabeza { padding: 22px 16px 10px 24px; }
  .cm-hoja-cuerpo { padding: 4px 24px 18px; }
  .cm-hoja-pie { padding: 14px 24px 18px; border-radius: 0 0 24px 24px; }
}
@media (min-width: 1024px) {
  body.comercial { --cm-pie: 0px; }
  .cm-cabecera { padding: 0 24px; gap: 20px; }
  .cm-cabecera .cm-atras { display: none; }
  .cm-cabecera .cm-atras + .cm-marca { display: inline-flex; }
  .cm-nav-arriba { display: flex; gap: 4px; margin-left: 12px; }
  .cm-nav-arriba a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--suave); font-size: 15px; font-weight: 650; }
  .cm-nav-arriba a:hover { background: var(--gris-claro); color: var(--texto); }
  .cm-nav-arriba a[aria-current] { background: var(--cm-tinta); color: #fff; }
  .cm-nav-arriba a .cm-n { background: var(--acento); color: #fff; font-weight: 700; }
  body.en-llamada .cm-nav-arriba a { color: #dfe5ef; }
  body.en-llamada .cm-nav-arriba a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  body.en-llamada .cm-nav-arriba a[aria-current] { background: rgba(255, 255, 255, .14); color: #fff; }
  body.en-llamada .cm-estado-llamada { margin-left: auto; }
  body.en-llamada .cm-estado-llamada + .cm-yo { margin-left: 8px; }
  .cm-yo-nombre { display: inline; }
  body.en-llamada .cm-yo-nombre { color: #dfe5ef; }
  .cm-nav, .cm-barra-llamar { display: none; }
  .cm-main { max-width: 1200px; padding: 32px 32px 64px; }
  .cm-main.cm-estrecha { max-width: 860px; }
  .cm-volver-escritorio { display: inline-flex !important; }
  .cm-titulo { font-size: 36px; }

  /* Hoy: la lista a la izquierda; lo pendiente, lo hecho y el mes a la derecha */
  .cm-hoy { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
  .cm-hoy-lado { position: sticky; top: calc(var(--cm-cabecera) + 24px); }
  .cm-siguiente { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0 28px; padding: 24px 26px; margin-top: 4px; }
  .cm-siguiente > *:not(.cm-acciones) { grid-column: 1; }
  .cm-siguiente h2 { font-size: 30px; }
  .cm-siguiente > .cm-acciones { grid-column: 2; grid-row: 1 / span 5; align-self: center; grid-template-columns: 1fr; margin: 0; }

  /* Ficha: carril fijo a la izquierda (quién, llamar, índice) y los bloques a la derecha */
  .cm-ficha { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: start; }
  .cm-carril { position: sticky; top: calc(var(--cm-cabecera) + 20px); max-height: calc(100vh - var(--cm-cabecera) - 36px); overflow-y: auto; scrollbar-width: thin; padding: 2px; margin: -2px; }
  .cm-ficha-cabeza .cm-titulo { font-size: 30px; }
  .cm-acciones-carril { display: grid; }
  .cm-indice { position: static; flex-direction: column; gap: 2px; margin: 16px 0 0; padding: 8px; overflow: visible; border-radius: var(--cm-radio); background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); box-shadow: var(--cm-sombra); -webkit-mask-image: none; mask-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cm-indice-titulo { display: flex; margin: 6px 10px 4px; }
  .cm-indice a { justify-content: flex-start; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; }
  .cm-indice a:hover { background: var(--gris-claro); }
  .cm-atajo { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: auto; border-radius: 6px; border: 1px solid var(--cm-linea); font-size: 12px; color: var(--cm-tenue); font-weight: 650; }
  .cm-indice a[aria-current] .cm-atajo { border-color: rgba(255, 255, 255, .25); color: var(--cm-tinta-tenue); }
  body.en-llamada .cm-indice { background: var(--cm-tarjeta); }
  body.en-llamada .cm-indice a { background: transparent; color: var(--suave); }
  body.en-llamada .cm-indice a:hover { background: var(--gris-claro); color: var(--texto); }
  body.en-llamada .cm-indice a[aria-current] { background: var(--cm-tinta); color: #fff; }
  body.en-llamada .cm-indice :focus-visible { outline-color: var(--acento); }
  body.en-llamada .cm-ficha-cabeza .cm-contacto { display: block; }
  .cm-bloque { padding: 24px 26px; scroll-margin-top: 88px; }
  .cm-bloque-cabeza h2 { font-size: 23px; }
  .cm-clave { font-size: 25px; }
  .cm-prueba-lados { gap: 10px; }
  .cm-precio { padding: 22px 24px; }
  .cm-precio-cifra { font-size: 40px; }
  .cm-dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

  /* Ventas: la cifra del mes y la próxima venta, lado a lado */
  .cm-ventas-arriba { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .cm-ventas-arriba .cm-proxima-venta { margin: 0; }
  .cm-ventas-arriba .cm-hero { display: flex; flex-direction: column; }
  .cm-ventas-arriba .cm-hero .cm-reparto { margin-top: auto; }
  .cm-ventas-arriba .cm-hero .cm-hero-sub { margin-bottom: 20px; }
  .cm-hero-cifra { font-size: 64px; }
  .cm-peldanos { height: 130px; }
  .cm-ventas-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
  .cm-ventas-lista .cm-tarjeta + .cm-tarjeta { margin-top: 0; }

  /* Entrar: la marca a la izquierda, el formulario a la derecha */
  .cm-entrar { flex-direction: row; min-height: calc(100vh - 31px); }
  .cm-entrar-marca { flex: 0 0 46%; display: flex; flex-direction: column; padding: 40px 56px 56px; }
  .cm-entrar-lema { margin-top: auto; font-size: 50px; max-width: 16ch; }
  .cm-entrar-puntos { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; max-width: 30rem; }
  .cm-entrar-puntos li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; color: #dfe5ef; }
  .cm-entrar-puntos li .cm-i { color: #4ade80; margin-top: 2px; }
  .cm-entrar-form { display: flex; flex-direction: column; justify-content: center; padding: 48px; max-width: 520px; }
  .cm-entrar-form h1 { font-size: 34px; }
}
@media (min-width: 1280px) {
  .cm-ficha { grid-template-columns: 380px minmax(0, 1fr); gap: 40px; }
}

/* ── Movimiento (y respeto a quien no lo quiere) ──────────────────────────────────────────────────────────────── */
@keyframes cm-entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cm-subir { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cm-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-aparecer-escala { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cm-llenar { from { transform: scaleX(0); } to { transform: none; } }
@keyframes cm-crecer { from { transform: scaleY(0); } to { transform: none; } }
@keyframes cm-latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  body.comercial *, body.comercial *::before, body.comercial *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (forced-colors: active) {
  .cm-barra-dia li.cm-hecha, .cm-barra-dia li.cm-bien, .cm-peldano.cm-ok, .cm-reparto span, .cm-tramo li.cm-ok { background: CanvasText; }
  .cm-radio:checked + .cm-opcion-cabeza, .cm-chip input:checked + span { outline: 3px solid Highlight; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Libre (0020, 27-10): Mi lista en bandejas con una sugerencia que se puede quitar, la hoja «Cómo fue» con tres salidas
   grandes (Cerrado · Pospuesto · Descartado) y el simulador de Mis ventas. Mismos tokens y piezas; nada nuevo choca.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Mi lista: el día (solo lo hecho), la sugerencia, filtros y bandejas ──────────────────────────────────────── */
.cm-barra-dia li.cm-fuera { background: #9aa3b2; animation: cm-llenar .5s var(--cm-curva) both; }
.cm-leyenda i.cm-fuera { background: #9aa3b2; }
.cm-siguiente[hidden] { display: none; }
.cm-sugerencia-pie { display: flex; gap: 22px; margin: 8px 0 -8px; padding: 0; }
.cm-sugerencia-pie a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cm-tinta-acento); font-size: 14px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.cm-sugerencia-pie a:hover { color: #fff; }
.cm-hoy .cm-buscar { margin-top: 4px; }
.cm-seccion[hidden] { display: none; }
.cm-bandeja-nota { margin: -4px 2px 10px; font-size: 13.5px; color: var(--cm-tenue); }
.cm-seccion-cabeza > span a { display: inline-block; padding: 13px 2px; margin: -13px -2px; font-weight: 650; }
.cm-atras { white-space: nowrap; }
body.en-llamada .cm-cabecera .cm-atras { padding-right: 6px; }
.cm-seccion-cabeza .cm-orden { white-space: nowrap; }
.cm-seccion-cabeza .cm-orden a { color: var(--cm-tenue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cm-seccion-cabeza .cm-orden a[aria-current] { color: var(--texto); font-weight: 700; text-decoration: none; }
.cm-hora.cm-fecha { width: 58px; font-size: 14px; line-height: 1.2; color: var(--cm-oro-texto); }
.cm-hora.cm-fecha small { color: var(--cm-oro-texto); opacity: .85; text-transform: none; font-size: 12px; letter-spacing: 0; }
.cm-hora.cm-fecha.cm-hoy, .cm-hora.cm-fecha.cm-hoy small { color: var(--acento-oscuro); }
[data-bandeja="descartados"] .cm-fila-linea { color: var(--cm-tenue); }
.cm-plegable .cm-ver-mas { margin: 0; padding: 12px 16px; font-size: 13.5px; color: var(--cm-tenue); border-top: 1px solid var(--cm-linea); }
.cm-plegable .cm-ver-mas a { font-weight: 650; }

/* ── Hoja «Cómo fue»: tres salidas grandes, cada una con su color ─────────────────────────────────────────────── */
.cm-opciones.cm-tres .cm-opcion-cabeza { min-height: 72px; padding: 14px 16px; }
.cm-opciones.cm-tres .cm-opcion-cabeza b { font-size: 18px; }
.cm-opciones.cm-tres .cm-opcion-cabeza .cm-i { width: 24px; height: 24px; }
.cm-opcion-pospuesto .cm-opcion-cabeza .cm-i { color: var(--cm-oro-texto); }
.cm-opcion-pospuesto .cm-radio:checked + .cm-opcion-cabeza { border-color: var(--cm-oro); background: var(--cm-oro-tono); box-shadow: inset 0 0 0 1px var(--cm-oro); }
.cm-opcion-pospuesto .cm-radio:checked + .cm-opcion-cabeza::before { border-color: var(--cm-oro-texto); }
.cm-opcion-descartado .cm-radio:checked + .cm-opcion-cabeza { border-color: var(--cm-tinta); background: #eceef2; box-shadow: inset 0 0 0 1px var(--cm-tinta); }
.cm-opcion-descartado .cm-radio:checked + .cm-opcion-cabeza::before { border-color: var(--cm-tinta); }
.cm-opcion-detalle .cm-ayuda { margin-top: 10px; }
.cm-recordar { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--cm-linea); }
body.comercial .cm-recordar input { width: 100%; min-height: 48px; border-radius: 12px; border-color: var(--cm-linea-fuerte); font-size: 16px; padding: 10px 12px; }
.cm-ojo .cm-reabrir { margin: 10px 0 2px; }
.cm-ojo .cm-reabrir .boton { background: #fff; }

/* ── Mis ventas: el simulador ─────────────────────────────────────────────────────────────────────────────────── */
.cm-simulador { margin: 14px 0 0; }
.cm-ticket { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; color: var(--cm-tenue); font-weight: 650; }
.cm-ticket a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cm-linea-fuerte); background: #fff; color: var(--suave); font-size: 14.5px; font-weight: 650; }
.cm-ticket a[aria-current] { background: var(--cm-tinta); border-color: var(--cm-tinta); color: #fff; }
.cm-simulador-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cm-simulador-tarjetas li { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 12px 12px 10px; border-radius: var(--cm-radio-m); background: var(--cm-lienzo); }
.cm-simulador-tarjetas b { font-size: 26px; line-height: 1; letter-spacing: -.03em; font-weight: 800; }
.cm-simulador-tarjetas b + span { margin: 2px 0 8px; font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--cm-tenue); }
.cm-simulador-tarjetas strong { font-size: 18px; letter-spacing: -.02em; font-weight: 780; color: var(--cm-verde-texto); white-space: nowrap; }
.cm-simulador-tarjetas small { margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--cm-tenue); }
.cm-deslizador { display: none; margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg, #f1f6ff 0%, #ffffff 100%); border: 1px solid #d9e5fc; }
html.cm-js .cm-deslizador { display: block; }
.cm-deslizador label { display: block; margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.cm-deslizador label b { color: var(--acento-oscuro); font-size: 17px; }
body.comercial .cm-deslizador input[type=range] { display: block; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--acento); cursor: pointer; }
.cm-deslizador-resultado { display: flex; flex-direction: column; margin: 4px 0 0; }
.cm-deslizador-resultado strong { font-size: 32px; line-height: 1.1; letter-spacing: -.03em; font-weight: 800; }
.cm-deslizador-resultado span { font-size: 14px; color: var(--suave); }
.cm-deslizador-resultado span b { color: var(--texto); }

@media (min-width: 720px) {
  .cm-simulador-tarjetas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cm-simulador-tarjetas strong { font-size: 19px; }
}
@media (min-width: 1024px) {
  .cm-hoy .cm-filtros { margin-left: 0; margin-right: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
}

/* ── Ismael (0021, 28-10): la pestaña de mensajes, el aviso en Mi lista, el chat y «Mandar demo» en un toque ────── */
.cm-burbuja { position: absolute; top: -4px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cm-rojo, #d9342b); color: #fff; font-size: 11px; font-weight: 750; line-height: 18px; text-align: center; }
.cm-aviso-enlace { color: #fff; text-decoration: none; }
.cm-aviso-enlace:hover { color: #fff; }
.cm-aviso-enlace .cm-aviso-ir { display: inline-flex; align-items: center; gap: 4px; align-self: center; margin-left: auto; color: var(--cm-tinta-acento, #9fc0ff); font-weight: 650; white-space: nowrap; }
.cm-chat { display: grid; gap: 10px; margin: 0 0 16px; }
.cm-chat-dia { justify-self: center; margin: 6px 0 0; padding: 2px 10px; border-radius: 999px; background: #e9edf5; color: var(--cm-tenue); font-size: 12px; font-weight: 650; }
.cm-burbuja-chat { max-width: 88%; padding: 10px 14px; border-radius: 16px; background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.cm-burbuja-chat.cm-mia { justify-self: end; background: var(--cm-tinta); color: #fff; border-color: var(--cm-tinta); }
.cm-burbuja-chat small { display: block; margin-top: 4px; font-size: 12px; color: var(--cm-tenue); white-space: normal; }
.cm-burbuja-chat.cm-mia small { color: rgba(255, 255, 255, .72); }
.cm-burbuja-chat a { font-weight: 650; }
.cm-burbuja-chat.cm-mia a { color: #fff; }
.cm-burbuja-chat.cm-nuevo { border-color: #b7c9f8; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.cm-subir .cm-chat { margin-bottom: 12px; }
.cm-escribir { position: sticky; bottom: calc(var(--cm-pie, 64px) + 8px + env(safe-area-inset-bottom)); display: grid; gap: 8px; padding: 12px; background: var(--cm-tarjeta); border: 1px solid var(--cm-linea); border-radius: var(--cm-radio, 16px); box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
body.comercial .cm-escribir textarea { min-height: 72px; border-radius: 12px; }
.cm-demo-botones.cm-tres { grid-template-columns: 1fr; }
.cm-demo-botones form { display: contents; }
.cm-ojo.cm-ojo-verde { background: var(--cm-verde-tono, #e8f7ee); border-color: #b5e2c6; color: var(--cm-verde-texto, #176b3a); }
.cm-ojo.cm-ojo-verde p { color: var(--cm-verde-texto, #176b3a); }
@media (min-width: 480px) {
  .cm-demo-botones.cm-tres { grid-template-columns: 1fr 1fr; }
  .cm-demo-botones.cm-tres > a:last-child:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) { .cm-escribir { bottom: 16px; } }