/* ============================================================================
   DEMO · crm · estilos de "Run it all from one place" (2.1 Roof Intelligent)
   Browser frame claro con tabs Measure/Pipeline. Acto 1: foto satelital con
   el contorno del techo trazandose (draw-on + vertices que sellan) y chips
   de medicion. Acto 2: pipeline de 4 columnas con la tarjeta viajando sola.
   Acento teal (specialty 02), --go SOLO para el estado firmado.
   Colores SIEMPRE por tokens.
   ========================================================================== */

.demo--crm .demo__cluster { width: min(37rem, 100%); padding: 1.2rem 1rem 1.8rem; }

/* ---- browser frame ---------------------------------------------------------- */
.demo--crm .crm-browser {
  width: min(560px, 100%);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-scene);
}
.demo--crm .crm-browser.is-on { opacity: 1; transform: none; }

.demo--crm .crm-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.demo--crm .crm-browser__dots { display: flex; gap: 0.32rem; }
.demo--crm .crm-browser__dots i { width: 8px; height: 8px; border-radius: 50%; }
.demo--crm .crm-browser__dots i:nth-child(1) { background: var(--violet); }
.demo--crm .crm-browser__dots i:nth-child(2) { background: var(--teal); }
.demo--crm .crm-browser__dots i:nth-child(3) { background: var(--amber); }
.demo--crm .crm-browser__url {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.16rem 0.6rem;
}

/* ---- top: titulo + tabs ------------------------------------------------------ */
.demo--crm .crm-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem 0.5rem;
}
.demo--crm .crm-title { display: grid; line-height: 1.25; min-width: 0; }
.demo--crm .crm-title b {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo--crm .crm-title small {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.demo--crm .crm-tabs { margin-left: auto; display: flex; gap: 0.3rem; flex: none; }
.demo--crm .crm-tab {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 560;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.14s var(--ease);
}
.demo--crm .crm-tab.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* ---- stack: aerial y board comparten la misma celda (altura estable) -------- */
.demo--crm .crm-stack { display: grid; margin: 0 0.75rem 0.75rem; }
.demo--crm .crm-stack > * { grid-area: 1 / 1; }

/* ---- vista satelital --------------------------------------------------------- */
.demo--crm .crm-aerial {
  position: relative;
  aspect-ratio: 28 / 17; /* matchea ops-aerial.webp (1120x680), overlay 1:1 */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-scene);
}
.demo--crm .crm-aerial.is-on { opacity: 1; transform: none; }
/* salida del beat swap: invisible pero sigue reservando la celda del grid */
.demo--crm .crm-aerial.is-gone {
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  visibility: hidden;
  transition: opacity 0.38s cubic-bezier(0.55, 0, 0.85, 0.36),
    transform 0.38s cubic-bezier(0.55, 0, 0.85, 0.36),
    visibility 0s linear 0.38s;
}
.demo--crm .crm-aerial__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 1.4s var(--ease-out);
}
.demo--crm .crm-aerial.is-on .crm-aerial__img { transform: scale(1); }

/* trazado del contorno: draw-on por dashoffset + relleno al sellar */
.demo--crm .crm-trace { position: absolute; inset: 0; }
.demo--crm .crm-trace svg { width: 100%; height: 100%; display: block; }
.demo--crm .crm-trace path {
  fill: none;
  stroke: #fff;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 3px rgba(17, 17, 16, 0.45));
}
.demo--crm .crm-trace__roof {
  stroke-width: 2.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  fill: var(--teal);
  fill-opacity: 0;
  transition: stroke-dashoffset 1.55s var(--ease), fill-opacity 0.6s var(--ease-out);
}
.demo--crm .crm-trace.is-on .crm-trace__roof { stroke-dashoffset: 0; }
.demo--crm .crm-trace.is-filled .crm-trace__roof { fill-opacity: 0.18; }
.demo--crm .crm-trace__ridge {
  stroke-width: 1.6;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0.85;
  transition: stroke-dashoffset 0.55s var(--ease-out) 0.1s;
}
.demo--crm .crm-trace.is-filled .crm-trace__ridge { stroke-dashoffset: 0; }

/* vertices que sellan con POP (delay inline sigue el avance del trazo) */
.demo--crm .crm-verts { position: absolute; inset: 0; pointer-events: none; }
.demo--crm .crm-verts i {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--teal);
  box-shadow: 0 1px 4px rgba(17, 17, 16, 0.4);
  opacity: 0;
  transform: scale(0.3);
  /* el delay va inline por vertice (sigue el avance del trazo) */
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--crm .crm-verts.is-on i { opacity: 1; transform: scale(1); }

/* chips sobre la foto: etiqueta de direccion y mediciones */
.demo--crm .crm-addr {
  position: absolute;
  left: 3%;
  top: 5%;
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  text-transform: none;
  letter-spacing: 0.04em;
}
.demo--crm .crm-meas {
  position: absolute;
  box-shadow: var(--shadow-lift);
}
.demo--crm .crm-meas--sqft {
  left: 49%;
  top: 46%;
  transform: translate(-50%, -50%) translateY(6px) scale(0.9);
  font-size: 0.66rem;
  padding: 0.28rem 0.7rem;
}
.demo--crm .crm-meas--sqft.is-on { transform: translate(-50%, -50%); }
.demo--crm .crm-meas--pitch,
.demo--crm .crm-meas--waste {
  background: var(--paper-raised);
  color: var(--ink);
}
.demo--crm .crm-meas--pitch { right: 3.5%; top: 22%; }
.demo--crm .crm-meas--waste { right: 3.5%; top: 64%; }

/* ---- pipeline ---------------------------------------------------------------- */
.demo--crm .crm-board {
  display: grid;
  gap: 0.5rem;
  /* llena la celda que reserva el aerial: lanes estira, la tira va abajo */
  grid-template-rows: minmax(0, 1fr) auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-scene);
}
.demo--crm .crm-board.is-on { opacity: 1; visibility: visible; transform: none; }
.demo--crm .crm-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}
.demo--crm .crm-col {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.4rem;
  display: grid;
  align-content: start;
  gap: 0.4rem;
  min-height: 148px;
  /* entrada en cascada cuando el board hace .is-on */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-scene);
}
.demo--crm .crm-col:nth-child(1) { transition-delay: 0ms; }
.demo--crm .crm-col:nth-child(2) { transition-delay: 110ms; }
.demo--crm .crm-col:nth-child(3) { transition-delay: 220ms; }
.demo--crm .crm-col:nth-child(4) { transition-delay: 330ms; }
.demo--crm .crm-board.is-on .crm-col { opacity: 1; transform: none; }
.demo--crm .crm-col__head {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 560;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.08rem 0.1rem;
  white-space: nowrap;
  min-width: 0;
  transition: color 0.3s var(--ease);
}
.demo--crm .crm-col__head.is-go { color: var(--go); }
.demo--crm .crm-count {
  margin-left: auto;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 0.52rem;
}
.demo--crm .crm-col--signed .crm-count {
  background: color-mix(in srgb, var(--go) 14%, transparent);
  color: var(--go);
}
.demo--crm .crm-count.is-pop { animation: crm-pop 0.32s var(--ease-out); }
@keyframes crm-pop { 40% { transform: scale(1.3); } }

/* ---- la tarjeta del lead ------------------------------------------------------ */
.demo--crm .crm-card {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  padding: 0.38rem 0.45rem 0.42rem;
  display: grid;
  gap: 0.14rem;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.32s var(--ease-out), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--crm .crm-card.is-on { opacity: 1; transform: none; }
.demo--crm .crm-card__row { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.demo--crm .crm-card__row b {
  font-size: 0.6rem;
  font-weight: 620;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo--crm .crm-card small {
  font-family: var(--font-mono);
  font-size: 0.47rem;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo--crm .crm-card__tags { display: flex; flex-wrap: wrap; gap: 0.2rem; min-width: 0; }
.demo--crm .crm-tag {
  --dm-accent: var(--teal);
  font-size: 0.44rem;
  padding: 0.12rem 0.4rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.demo--crm .crm-tag--amt {
  --dm-accent: var(--teal);
  color: #fff;
  background: var(--dm-accent);
  font-weight: 620;
}
.demo--crm .crm-card__check {
  margin-left: auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--go);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  font-style: normal;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--crm .crm-card__check.is-on { opacity: 1; transform: scale(1); }
.demo--crm .crm-card__check svg {
  width: 8px;
  height: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* vuelo entre columnas: arco corto, aterriza y se reparenta */
.demo--crm .crm-card.is-hop {
  z-index: 5;
  box-shadow: 0 14px 28px rgba(17, 17, 16, 0.18);
  animation: crm-hop 0.65s var(--ease-scene) forwards;
}
@keyframes crm-hop {
  0% { transform: translate(0, 0) scale(1); }
  45% { transform: translate(calc(var(--hx) * 0.5), calc(var(--hy) * 0.5 - 8px)) scale(1.05); }
  100% { transform: translate(var(--hx), var(--hy)) scale(1); }
}

/* hueco fantasma donde aterriza */
.demo--crm .crm-drop {
  border: 1.5px dashed transparent;
  border-radius: 10px;
  min-height: 46px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.demo--crm .crm-drop.is-hot {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 7%, transparent);
}

/* boton que aprieta el cursor */
.demo--crm .crm-btn {
  justify-self: center;
  background: var(--teal);
  color: #fff;
  border-radius: 9px;
  padding: 0.3rem 0.55rem;
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  transition: opacity 0.3s var(--ease-out),
    transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--crm .crm-btn.is-on { opacity: 1; transform: none; }
.demo--crm .crm-btn.is-pressed { transform: translateY(2px) scale(0.95); }

/* ---- tira resumen (la oficina entera, una pantalla) -------------------------- */
.demo--crm .crm-strip {
  background: var(--slate);
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-scene);
}
.demo--crm .crm-strip.is-on { opacity: 1; transform: none; }
.demo--crm .crm-strip span { display: grid; justify-items: center; line-height: 1.2; min-width: 0; }
.demo--crm .crm-strip b {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal-bright);
}
.demo--crm .crm-strip small {
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* ---- notas flotantes ---------------------------------------------------------- */
.demo--crm .crm-note--quote { top: 6.4rem; right: -0.4rem; }
.demo--crm .crm-note--signed { bottom: -0.3rem; right: -0.4rem; }

/* ---- movil -------------------------------------------------------------------- */
@media (max-width: 720px) {
  .demo--crm .demo__cluster { padding: 0.9rem 0.2rem 2rem; }
  .demo--crm .crm-stack { margin: 0 0.5rem 0.55rem; }
  .demo--crm .crm-top { padding: 0.5rem 0.55rem 0.45rem; }
  .demo--crm .crm-title b { font-size: 0.72rem; }
  .demo--crm .crm-tab { font-size: 0.5rem; padding: 0.18rem 0.45rem; }
  .demo--crm .crm-lanes { gap: 0.3rem; }
  .demo--crm .crm-col { padding: 0.3rem; min-height: 132px; }
  .demo--crm .crm-col__head { font-size: 0.42rem; letter-spacing: 0.05em; }
  /* en columnas angostas el texto de la tarjeta envuelve, no se trunca
     (overflow visible: el ellipsis del desktop cortaria cada linea) */
  .demo--crm .crm-card__row b {
    font-size: 0.48rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .demo--crm .crm-card small {
    font-size: 0.42rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .demo--crm .crm-tag { font-size: 0.38rem; padding: 0.1rem 0.28rem; letter-spacing: 0.02em; }
  .demo--crm .crm-btn { font-size: 0.46rem; padding: 0.26rem 0.45rem; }
  .demo--crm .crm-meas--pitch { right: 2.5%; top: 18%; }
  .demo--crm .crm-meas--waste { right: 2.5%; top: 66%; }
  .demo--crm .crm-strip small { font-size: 0.4rem; letter-spacing: 0.06em; }
  .demo--crm .crm-note--quote { top: 2.2rem; right: -0.1rem; }
  .demo--crm .crm-note--signed { bottom: -1.2rem; right: -0.1rem; }
}