/* Secuencias automáticas de las escenas secundarias (piloto: «Tú apruebas. Nora actualiza.» de la home).
   Todo va bajo .sec-crm / .sec-*: no toca las reglas del hero ni las de otras escenas.
   Sin JS (o antes de que cargue) queda el estado final legible: dos propuestas aprobadas por Paula y registradas.
   Con JS, js/secuencias.js pinta cada cuadro solo con transform, opacity y stroke-dashoffset. */

.sec-crm { position: relative; }
.sec-crm__ventana { position: relative; }
.sec-crm__largo { white-space: nowrap; }

/* Escenario: dos columnas en escritorio; en móvil, pila de tarjetas (ver más abajo) */
.sec-crm__escenario { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sec-crm__propuesta { position: relative; transform-origin: 50% 0; }
.sec-crm__hecha { display: none; }

/* Destino: realce cian (lo que hace Nora) mientras la propuesta está en curso */
.sec-crm__destino { position: relative; }
.sec-crm__realce { position: absolute; inset: -1px; border-radius: 9px; border: 1.5px solid var(--cian); box-shadow: 0 0 0 4px rgba(6, 182, 212, .14); opacity: 0; pointer-events: none; }
.sec-crm [data-sec-chip] { transform-origin: 0 50%; }

/* Marco de confirmación de la tarjeta */
.sec-crm__marco-ok { position: absolute; inset: -1px; border-radius: 12px; border: 1px solid #B7DFCC; box-shadow: 0 0 0 3px rgba(36, 99, 79, .06); pointer-events: none; }

/* Aprobación representada: es Paula, no Nora. «Por aprobar» y «Aprobado por Paula» comparten lugar */
.sec-crm__quien { display: grid; align-items: center; min-height: 28px; }
.sec-crm__quien > * { grid-area: 1 / 1; }
.sec-crm__espera { display: flex; opacity: 0; }
.sec-crm__aprobacion { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--app-texto); }
.sec-crm__aprobacion .avatar { width: 24px; height: 24px; font-size: 10px; }
.sec-crm__ejemplo { color: var(--app-mutado); font-weight: 400; }

/* Botón → barra de escritura → confirmación: una sola pieza que se transforma */
.sec-crm__accion { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-control); background: var(--app-azul); color: var(--blanco); font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.sec-crm__avance { position: absolute; inset: 0; background: #34529F; transform-origin: 0 50%; transform: scaleX(0); z-index: -1; }
.sec-crm__brillo { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22) 50%, transparent); opacity: 0; z-index: -1; }
.sec-crm__ok { position: absolute; inset: 0; border-radius: inherit; background: var(--ok-fondo); border: 1px solid #B7DFCC; z-index: -1; }
.sec-crm__texto { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; opacity: 0; }
.sec-crm__texto[data-sec-texto="registrada"] { opacity: 1; }
.sec-crm__texto--ok { color: var(--ok-texto); font-weight: 600; }
.sec-crm__girador { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; flex-shrink: 0; }

/* Check dibujado (trazo con pathLength=1) */
.sec-check { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sec-check path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* Resumen de la vuelta */
.sec-crm__resumen { position: relative; isolation: isolate; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; font-size: 13px; line-height: 20px; color: var(--app-mutado); }
.sec-crm__resumen b { font-weight: 600; color: var(--app-texto); font-variant-numeric: tabular-nums; display: inline-block; }
.sec-crm__resumen-fondo { position: absolute; inset: 0; border-radius: 999px; background: var(--ok-fondo); border: 1px solid #B7DFCC; z-index: -1; }
.sec-crm__resumen .sec-check { color: var(--ok-texto); width: 14px; height: 14px; }
.sec-crm__sep { color: #A3AFBF; }

/* Cursor de Paula (representa su aprobación) */
.sec-cursor { position: absolute; left: 0; top: 0; z-index: 5; display: inline-flex; align-items: flex-start; gap: 2px; pointer-events: none; opacity: 0; transform-origin: 3px 2px; }
.sec-cursor__flecha { width: 18px; height: 18px; fill: var(--tinta); stroke: var(--blanco); stroke-width: 1.2; }
.sec-cursor span { font-family: var(--f-app); font-size: 11px; line-height: 15px; padding: 1px 6px; border-radius: 5px; background: var(--tinta); color: var(--blanco); margin-top: 12px; }

/* Con JS: el cursor y las piezas animadas se controlan por estilo en línea */
.sec-crm[data-sec-vivo] .sec-crm__propuesta { will-change: transform, opacity; }

/* Móvil: composición propia. Una columna; la propuesta activa delante y la siguiente asomando detrás.
   Al confirmarse, la primera se condensa en una fila «Registrada» y la segunda pasa al frente. */
@media (max-width: 760px) {
  .sec-crm .ventana-crm__marco { min-height: 0; }
  .sec-crm__largo { display: none; }
  .sec-crm__escenario { grid-template-columns: minmax(0, 1fr); }
  .sec-crm[data-sec-vivo] .sec-crm__escenario { grid-template-areas: "pila"; gap: 0; padding-bottom: var(--sec-desp, 58px); }
  .sec-crm[data-sec-vivo] .sec-crm__escenario > * { grid-area: pila; }
  .sec-crm[data-sec-vivo] .sec-crm__propuesta[data-sec-propuesta="2"] { transform-origin: 50% 100%; }
  .sec-crm[data-sec-vivo] .sec-crm__hecha { display: flex; align-self: start; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 10px; background: var(--ok-fondo); border: 1px solid #B7DFCC; color: var(--app-texto); font-weight: 500; opacity: 0; }
  .sec-crm__hecha .sec-check { color: var(--ok-texto); }
  .sec-crm__hecha-tipo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sec-crm .rotulo-ejemplo { white-space: nowrap; }
  .sec-crm__hecha-estado { margin-left: auto; color: var(--ok-texto); font-weight: 600; white-space: nowrap; }

  /* Texto ≥ 14 px en toda la escena */
  .sec-crm .app-nota, .sec-crm .rotulo-ejemplo, .sec-crm .app-destino, .sec-crm .app-destino__rotulo, .sec-crm .crm, .sec-crm .app-evidencia,
  .sec-crm .propuesta__cambio, .sec-crm__aprobacion, .sec-crm__espera .app-plazo, .sec-crm__accion, .sec-crm__resumen, .sec-crm__hecha, .sec-cursor span,
  .sec-crm .app-nota time { font-size: 14px; }
  .sec-crm .propuesta__cambio, .sec-crm .app-destino { line-height: 20px; }
  .sec-crm .rotulo-ejemplo { line-height: 22px; }
  .sec-crm .propuesta { padding: 14px; gap: 10px; }
  .sec-crm__aprobacion .avatar { width: 28px; height: 28px; font-size: 12px; }
  .sec-crm .ventana-crm__contenido { gap: 12px; }
  .sec-crm__accion { min-height: 44px; }
}
/* El título se acorta antes que la fila «Registrada en HubSpot»: a 390–400 px «Datos de ejemplo» quedaba pegado */
@media (max-width: 400px) {
  .sec-crm .ventana-crm__h .sec-crm__corto { display: none; }
}
@media (max-width: 380px) {
  .sec-crm__corto { display: none; }
}

/* ── Escenas automáticas del resto del sitio (Pro y equipo de la home, /producto, /equipos) ──
   Mismo sistema que el CRM: capas apiladas sin saltos de maqueta, estados indicados sin controles y estado final
   legible sin JS. Los botones de las escenas son ilustración (no se pulsan) y no llevan roles de control. */
.sec-pila { display: grid; grid-template-columns: minmax(0, 1fr); }
[data-sec-vivo] .sec-pila > * { grid-area: 1 / 1; }
.sec-girador { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; flex-shrink: 0; display: inline-block; }
.sec-girador--nora { color: var(--cian-profundo); }

/* Indicador de estado (antes, pasos que se pulsaban): misma estética, sin interacción */
.sec-indicador { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.sec-indicador__paso { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 1rem 0 .85rem; border-radius: 999px; font-weight: 500; font-size: .9375rem; color: var(--gris-oscuro); }
.sec-indicador__paso::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; flex-shrink: 0; }
.sec-indicador__paso.activo { background: #E8EEFF; color: var(--azul); font-weight: 600; }
.sec-indicador__paso.activo::before { background: var(--cian-profundo); border-color: var(--cian-profundo); }
.escenario .sec-indicador__paso { color: var(--sobre-azul); }
.escenario .sec-indicador__paso.activo { background: rgba(255, 255, 255, .12); color: var(--blanco); }
.escenario .sec-indicador__paso.activo::before { background: var(--cian); border-color: var(--cian); }
.sin-js .sec-indicador { display: none; }

/* Pestañas con subrayado que viaja (sin JS: la pestaña activa lleva su borde de siempre) */
.sec-tabs, .sec-reunion__tabs { position: relative; }
.sec-tabs__subrayado, .sec-reunion__subrayado { position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; background: var(--app-azul); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
[data-sec-vivo] .sec-tabs .app-tab.activo, [data-sec-vivo] .sec-reunion__tabs .app-tab.activo { border-color: transparent; }

/* Segmento con píldora que viaja (filtro por cuenta ilustrado) */
.sec-segmento { position: relative; }
.sec-segmento__op { position: relative; z-index: 1; display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 6px; color: var(--app-mutado); min-height: 28px; }
.sec-segmento__op.activo { color: var(--app-texto); background: var(--blanco); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.equipo__filtro .sec-segmento__op { min-height: 32px; padding: 4px 12px; }
.pg-crm__filtro .sec-segmento__op { min-height: 36px; padding: 6px 14px; }
.sec-segmento__marca { display: none; position: absolute; left: 0; top: 2px; bottom: 2px; width: 100px; border-radius: 6px; background: var(--blanco); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); transform-origin: 0 50%; }
[data-sec-vivo] .sec-segmento__marca { display: block; }
[data-sec-vivo] .sec-segmento__op.activo { background: transparent; box-shadow: none; }

/* Home · Pro: cabezal de la línea de tiempo, realce del compromiso y hilo con dos tramos */
.sec-reunion__cabezal { position: absolute; left: 0; top: 2px; width: 2px; height: 22px; margin-left: -1px; border-radius: 1px; background: var(--cian-profundo); opacity: 0; pointer-events: none; }
.sec-reunion .compromiso { position: relative; }
.sec-reunion__realce { position: absolute; inset: -1px; border-radius: 10px; border: 1px solid #67E8F9; box-shadow: 0 0 0 3px rgba(6, 182, 212, .12); opacity: 0; pointer-events: none; }
.sec-reunion .hilo__trazo { stroke-dasharray: 1; }
.sec-reunion .hilo__punta { cx: 0; cy: 0; }
.sec-reunion__procesando { display: none; }
[data-sec-vivo] .sec-reunion__procesando { display: flex; align-self: start; }
.sec-reunion .app-marcador { display: inline-block; }

/* /producto · Ejecuta la venta: quién habla y barra de proceso */
.sec-habla { position: absolute; inset: 0; z-index: 1; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--cian), inset 0 0 0 4px rgba(6, 182, 212, .25); opacity: 0; pointer-events: none; }
/* El anillo es un span dentro del retrato: no hereda la etiqueta del nombre (.pg-mosaico__persona span), que lo
   oscurecía y lo desplazaba. Quien habla se resalta, no se apaga */
.pg-mosaico__persona > .sec-habla { inset: 0; padding: 0; background: none; border-radius: 8px; }
.sec-venta__barra { height: 4px; margin-top: 6px; border-radius: 2px; background: rgba(6, 182, 212, .18); overflow: hidden; }
.sec-venta__barra span { display: block; height: 100%; background: var(--cian); transform-origin: 0 50%; }
.sec-venta .pg-mosaico { transform-origin: 50% 0; }
.sec-dia .app-marcador, .sec-dia .app-categoria, .sec-dia .app-estado { transform-origin: 0 50%; }

/* Acciones del CRM (/producto Teams y /equipos): estados apilados en el pie, realce del destino y marcos */
.sec-accion { position: relative; }
.sec-accion__marco { position: absolute; inset: -1px; border-radius: 12px; border: 1px solid #B9DFCF; pointer-events: none; }
.sec-accion__marco--error { border-color: var(--error-borde); opacity: 0; }
.sec-destino { position: relative; }
.sec-destino__realce { position: absolute; inset: -1px; border-radius: 9px; border: 1.5px solid var(--cian); box-shadow: 0 0 0 4px rgba(6, 182, 212, .14); opacity: 0; pointer-events: none; }
.sec-destino .crm { transform-origin: 0 50%; }
.sec-pie__estado { display: none; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sec-pie__estado[data-sec-estado="registrada"] { display: flex; }
.sec-pie__estado--error { align-items: flex-start; }
[data-sec-vivo] .pg-accion__pie.sec-pie { display: grid; grid-template-columns: minmax(0, 1fr); }
[data-sec-vivo] .sec-pie > .sec-pie__estado { display: flex; grid-area: 1 / 1; }
[data-sec-vivo] .sec-pie > .sec-pie__estado[hidden] { display: none; }
.sec-pie__boton { cursor: default; }
.app-boton.sec-pie__boton:hover { background: var(--app-azul); border-color: var(--app-azul); }
.app-boton.sec-pie__boton:not(.app-boton--primario):hover { background: var(--blanco); border-color: #CED8E4; }

/* Móvil: texto relevante ≥ 14 px en las escenas automáticas */
@media (max-width: 760px) {
  .sec-reunion .cita cite, .sec-reunion .compromiso__meta, .sec-reunion .doc__lista li, .sec-reunion .app-tab, .sec-reunion .borrador__texto, .sec-reunion .app-nota,
  .sec-equipo .tabla-equipo td, .sec-equipo .estados-lider, .sec-equipo .app-nota, .sec-equipo .sec-segmento__op,
  .sec-dia .app-fila__sub, .sec-dia .app-tab, .sec-dia .pg-borrador__cabeza, .sec-dia .app-nota, .sec-dia .app-estado, .sec-dia .app-categoria,
  .sec-venta .app-estado, .sec-venta .app-nota, .sec-venta .pg-doc, .sec-venta .app-fila__sub,
  .sec-sistemas .app-fila__sub, .sec-sistemas .app-estado, .sec-sistemas .app-nota, .sec-sistemas .app-destino, .sec-sistemas .app-destino__rotulo, .sec-sistemas .app-ruta,
  .sec-equipos .app-fila__sub, .sec-equipos .app-estado, .sec-equipos .app-nota, .sec-equipos .app-destino, .sec-equipos .app-destino__rotulo, .sec-equipos .app-ruta, .sec-equipos .app-error, .sec-equipos .sec-segmento__op,
  .sec-indicador__paso { font-size: 14px; }
  .sec-reunion [data-sec-tabs] { overflow: hidden; }
  .sec-indicador { margin-top: 1.25rem; }
}
/* /equipos en móvil: el título no cabe en una línea con «Teams» y «Escena de demostración», y el aviso quedaba
   cortado por el borde. El aviso pasa a una segunda línea, alineado con el título */
@media (max-width: 420px) {
  .sec-equipos > .app__cabeza { flex-wrap: wrap; height: auto; min-height: 48px; padding-block: 9px; row-gap: 4px; }
  .sec-equipos > .app__cabeza .app__titulo { white-space: nowrap; }
  .sec-equipos > .app__cabeza .pg-ejemplo { margin-left: 28px; }
}
/* «Termina»: la pantalla de proceso ocupa el centro de su capa, no la esquina superior */
[data-sec-vivo].sec-venta [data-sec-vista="terminada"] { align-self: center; padding: 0 8%; }

/* Acciones del CRM en móvil: la misma pila del CRM de la home. La activa delante, la siguiente asoma detrás; al
   registrarse, la primera se condensa en una fila «Registrada» y la segunda pasa al frente */
.sec-hecha { display: none; }
@media (max-width: 760px) {
  [data-sec-vivo] .sec-lista { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "pila"; gap: 0; padding-bottom: var(--sec-desp, 58px); }
  [data-sec-vivo] .sec-lista > * { grid-area: pila; align-self: start; }
  [data-sec-vivo] .sec-lista > [data-sec-accion] ~ [data-sec-accion] { transform-origin: 50% 100%; }
  [data-sec-vivo] .sec-hecha { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 10px; background: var(--ok-fondo); border: 1px solid #B7DFCC; color: var(--app-texto); font-size: 14px; font-weight: 500; opacity: 0; }
  .sec-hecha .sec-check { color: var(--ok-texto); }
  .sec-hecha__tipo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .sec-hecha__estado { margin-left: auto; color: var(--ok-texto); font-weight: 600; white-space: nowrap; }
  /* Pendiente: rótulo y botón en la misma fila */
  .sec-pie__estado[data-sec-estado="pendiente"] { flex-wrap: nowrap; }
  .sec-pie__estado > .app-estado { min-width: 0; white-space: normal; }
  .sec-pie__boton { flex-shrink: 0; }
}