/* Secciones de agentes (5 Ventas · 6 Clientes · 7 Operaciones) · v3 (02-10-2026) · diseño aprobado por el dueño en la sección 5 */

/* ---------- Cabecera de la sección: titular a la izquierda, apoyo a la derecha ---------- */
.v-cab{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:64px; align-items:end; margin-bottom:56px; }
.v-cab-izq{ display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.v-cab-der{ display:flex; flex-direction:column; gap:14px; max-width:520px; justify-self:end; padding-bottom:6px; }

/* ---------- Pestañas: carril gris con tarjetas (la activa en blanco con su barra de progreso) ---------- */
.pt-rail{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px; padding:6px; background:var(--nieve); border:1px solid var(--linea); border-radius:16px; margin-bottom:32px; }
.pt-tab{ position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; row-gap:2px; align-items:center; text-align:left;
  padding:13px 14px 17px; border-radius:11px; color:var(--tinta-60); transition:background .25s, box-shadow .25s; }
.pt-tab:hover{ background:rgba(255,255,255,.65); }
.pt-ico{ grid-row:1 / span 2; width:36px; height:36px; border-radius:9px; background:var(--blanco); border:1px solid var(--linea); display:grid; place-items:center; color:var(--tinta-45); transition:all .25s; }
.pt-ico .ico{ width:17px; height:17px; }
.pt-n{ font-size:11.5px; font-weight:500; color:var(--tinta-30); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.pt-t{ font-size:13.8px; font-weight:500; line-height:1.25; letter-spacing:-.005em; }
.pt-barra{ position:absolute; left:14px; right:14px; bottom:7px; height:2px; border-radius:2px; background:transparent; overflow:hidden; }
.pt-barra i{ display:block; height:100%; width:0; background:var(--verde); }
.pt-tab[aria-selected="true"]{ background:var(--blanco); box-shadow:var(--sombra-2); color:var(--tinta); }
.pt-tab[aria-selected="true"] .pt-ico{ background:var(--verde-agua); border-color:transparent; color:var(--verde-osc); }
.pt-tab[aria-selected="true"] .pt-n{ color:var(--tinta-45); }
.pt-tab[aria-selected="true"] .pt-barra{ background:var(--linea); }
.late-punto{ display:none; }

/* ---------- Panel: demo a la izquierda, texto a la derecha ---------- */
.pt-panel{ display:none; }
.pt-panel.act{ display:block; animation:entra .5s var(--ease) both; }
html:not(.js) .pt-rail{ display:none; }
html:not(.js) .pt-panel{ display:block; margin-top:72px; }
.pt-grid{ display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:56px; align-items:start; }

.escenario-t{ position:relative; }
.escenario-t .pausa{ right:14px; bottom:14px; }
.esc-fija{ position:absolute; top:0; left:0; transform-origin:top left; }

/* Texto de la pestaña */
.pt-txt{ display:flex; flex-direction:column; gap:24px; padding-top:6px; }
.pt-tit{ display:flex; flex-direction:column; gap:12px; }
.pt-num{ font-size:13px; font-weight:500; color:var(--tinta-30); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.pt-parati{ display:flex; flex-direction:column; gap:10px; }
.pt-parati ul{ border-top:1px solid var(--linea); }
.pt-parati li{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--linea); font-size:15.5px; line-height:1.45; color:var(--tinta-80); }
.pt-parati .ok{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--verde-agua); color:var(--verde-osc); display:grid; place-items:center; margin-top:0; }
.pt-parati .ok .ico{ width:12px; height:12px; stroke-width:2.6; }
.pt-cuenta{ background:var(--nieve); border-radius:16px; padding:20px 22px 22px; display:flex; flex-direction:column; gap:12px; }
.pc-cifras{ display:flex; gap:28px; flex-wrap:wrap; }
.pc-cifras span{ display:flex; align-items:baseline; gap:7px; }
.pc-cifras b{ font-size:34px; font-weight:500; letter-spacing:-.035em; line-height:1; color:var(--tinta); }
.pc-cifras em{ font-style:normal; font-size:13px; color:var(--tinta-45); }
.pt-cuenta p{ font-size:14.2px; line-height:1.55; color:var(--tinta-60); }

/* ---------- Cierre de la sección ---------- */
.v-cierre{ margin-top:96px; padding-top:40px; border-top:1px solid var(--linea); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:center; }
.v-cierre .sub{ max-width:660px; }
.v-cierre-cta{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.v-aclara{ margin-top:32px; max-width:920px; font-size:12.5px; }

/* =====================================================================
   PIEZAS DE INTERFAZ (reutilizables en las 6 demos)
   ===================================================================== */
/* Logo del canal flotando (refs B03: icono de app en su tarjeta) */
.logo-canal{ position:absolute; z-index:6; width:54px; height:54px; border-radius:15px; display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(10,10,10,.35), 0 0 0 4px rgba(255,255,255,.9); }
.logo-canal .ico{ width:30px; height:30px; }
.logo-canal.wa{ background:#25d366; color:#fff; }

/* Móvil (pantalla sin marco, refs B07) */
.movil{ position:absolute; z-index:3; display:flex; flex-direction:column; background:#fff; border-radius:34px; overflow:hidden; box-shadow:0 2px 4px rgba(10,10,10,.05), 0 30px 70px -28px rgba(10,10,10,.42), 0 0 0 1px rgba(10,10,10,.06); }
.m-barra{ height:34px; flex:none; padding:0 24px 0 44px; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:600; color:#111b21; }
.m-iconos{ display:flex; align-items:center; gap:5px; color:#111b21; }
.m-senal{ width:16px; height:10px; background:linear-gradient(currentColor,currentColor) 0 100%/3px 40% no-repeat, linear-gradient(currentColor,currentColor) 4.3px 100%/3px 60% no-repeat, linear-gradient(currentColor,currentColor) 8.6px 100%/3px 80% no-repeat, linear-gradient(currentColor,currentColor) 12.9px 100%/3px 100% no-repeat; }
.m-wifi{ width:14px; height:10px; background:radial-gradient(circle at 50% 100%, currentColor 0 2px, transparent 2.6px 4px, currentColor 4.6px 6.2px, transparent 6.8px 8.4px, currentColor 9px 10.6px, transparent 11.2px); clip-path:polygon(0 0,100% 0,50% 100%); }
.m-bat{ width:22px; height:11px; border:1.4px solid currentColor; border-radius:3.5px; position:relative; opacity:.9; }
.m-bat::before{ content:''; position:absolute; inset:1.4px; right:5px; background:currentColor; border-radius:1.5px; }

/* WhatsApp */
.wa-cab{ height:58px; flex:none; display:flex; align-items:center; gap:9px; padding:0 14px 0 6px; border-bottom:1px solid rgba(11,20,26,.07); color:#111b21; }
.wa-cab > .ico{ width:20px; height:20px; color:#3b4a54; stroke-width:1.7; }
.wa-cab .wa-atras{ width:24px; height:24px; color:#111b21; }
.wa-avatar{ width:36px; height:36px; border-radius:50%; background:#dfe5e7; display:grid; place-items:center; flex:none; color:#fff; }
.wa-avatar .ico{ width:20px; height:20px; stroke-width:2.2; }
.wa-quien{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.wa-quien b{ font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-estado{ font-size:12px; color:#667781; }
.wa-estado.activo{ color:#00a884; }
.wa-cuerpo{ flex:1; min-height:0; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:10px 10px 6px;
  background-color:#efeae2; background-image:radial-gradient(circle at 1px 1px, rgba(84,101,111,.09) 1px, transparent 1.5px); background-size:14px 14px; }
.wa-pista{ display:flex; flex-direction:column; gap:5px; will-change:transform; }
.wa-fecha{ align-self:center; background:#fff; color:#54656f; font-size:11.5px; padding:5px 11px; border-radius:7px; box-shadow:0 1px .5px rgba(11,20,26,.13); margin-bottom:6px; }
.wa-msg{ position:relative; max-width:84%; padding:6px 8px 7px 9px; border-radius:8px; font-size:13.4px; line-height:1.38; color:#111b21; box-shadow:0 1px .5px rgba(11,20,26,.13); display:flow-root; }
.wa-msg p{ display:inline; }
.wa-msg.cli{ align-self:flex-start; background:#fff; border-top-left-radius:0; }
.wa-msg.age{ align-self:flex-end; background:#d9fdd3; border-top-right-radius:0; }
.wa-msg.cli::before, .wa-msg.age::before{ content:''; position:absolute; top:0; width:8px; height:11px; background:inherit; }
.wa-msg.cli::before{ left:-7px; clip-path:polygon(100% 0, 0 0, 100% 100%); }
.wa-msg.age::before{ right:-7px; clip-path:polygon(0 0, 100% 0, 0 100%); }
.wa-meta{ float:right; margin:7px 0 -5px 10px; font-size:10.5px; color:#667781; display:inline-flex; align-items:center; gap:3px; font-variant-numeric:tabular-nums; }
.wa-tick{ width:16px; height:11px; stroke:#8696a0; stroke-width:1.5; transition:stroke .3s; }
.wa-msg.leido .wa-tick{ stroke:#53bdeb; }
.wa-audio{ width:252px; padding:7px 9px 7px 7px; }
.wa-audio-fila{ display:flex; align-items:center; gap:8px; }
.wa-yo{ position:relative; width:38px; height:38px; border-radius:50%; background:#dfe5e7; color:#fff; display:grid; place-items:center; flex:none; order:-1; }
.wa-yo > .ico{ width:22px; height:22px; stroke-width:2.2; }
.wa-yo i{ position:absolute; right:-3px; bottom:-2px; width:16px; height:16px; display:grid; place-items:center; color:#00a884; }
.wa-yo i .ico{ width:13px; height:13px; stroke-width:2.4; }
.wa-transcrito{ display:block!important; margin-top:6px; padding-top:6px; border-top:1px solid rgba(11,20,26,.07); font-size:12.4px; line-height:1.4; color:#3b4a54; font-style:italic; }
.wa-play{ width:26px; height:26px; display:grid; place-items:center; color:#8696a0; flex:none; }
.wa-play .ico{ width:18px; height:18px; }
.wa-onda{ flex:1; height:24px; background:#8696a0; -webkit-mask:var(--onda) center/100% 100% no-repeat; mask:var(--onda) center/100% 100% no-repeat;
  --onda:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='9' width='2' height='6' rx='1'/%3E%3Crect x='4' y='6' width='2' height='12' rx='1'/%3E%3Crect x='8' y='3' width='2' height='18' rx='1'/%3E%3Crect x='12' y='8' width='2' height='8' rx='1'/%3E%3Crect x='16' y='5' width='2' height='14' rx='1'/%3E%3Crect x='20' y='10' width='2' height='4' rx='1'/%3E%3Crect x='24' y='7' width='2' height='10' rx='1'/%3E%3Crect x='28' y='2' width='2' height='20' rx='1'/%3E%3Crect x='32' y='6' width='2' height='12' rx='1'/%3E%3Crect x='36' y='9' width='2' height='6' rx='1'/%3E%3Crect x='40' y='4' width='2' height='16' rx='1'/%3E%3Crect x='44' y='8' width='2' height='8' rx='1'/%3E%3Crect x='48' y='5' width='2' height='14' rx='1'/%3E%3Crect x='52' y='10' width='2' height='4' rx='1'/%3E%3Crect x='56' y='6' width='2' height='12' rx='1'/%3E%3Crect x='60' y='3' width='2' height='18' rx='1'/%3E%3Crect x='64' y='8' width='2' height='8' rx='1'/%3E%3Crect x='68' y='6' width='2' height='12' rx='1'/%3E%3Crect x='72' y='9' width='2' height='6' rx='1'/%3E%3Crect x='76' y='5' width='2' height='14' rx='1'/%3E%3Crect x='80' y='7' width='2' height='10' rx='1'/%3E%3Crect x='84' y='10' width='2' height='4' rx='1'/%3E%3Crect x='88' y='6' width='2' height='12' rx='1'/%3E%3Crect x='92' y='4' width='2' height='16' rx='1'/%3E%3Crect x='96' y='8' width='2' height='8' rx='1'/%3E%3Crect x='100' y='10' width='2' height='4' rx='1'/%3E%3Crect x='104' y='7' width='2' height='10' rx='1'/%3E%3Crect x='108' y='9' width='2' height='6' rx='1'/%3E%3Crect x='112' y='10' width='2' height='4' rx='1'/%3E%3Crect x='116' y='11' width='2' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E"); }
.wa-dur{ font-size:11px; color:#667781; }

.wa-audio .wa-dur{ display:block; margin:-2px 0 0 80px; }
.wa-audio .wa-meta{ position:static; float:right; margin:4px 0 -4px 10px; }
.wa-escribe{ align-self:flex-start; display:flex; gap:4px; padding:11px 13px; background:#fff; }
.wa-escribe i{ width:7px; height:7px; border-radius:50%; background:#8696a0; animation:waPunto 1.2s infinite ease-in-out; }
.wa-escribe i:nth-child(2){ animation-delay:.15s; } .wa-escribe i:nth-child(3){ animation-delay:.3s; }
@keyframes waPunto{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-3px); opacity:1; } }
.wa-pie{ flex:none; display:flex; align-items:center; gap:6px; padding:6px 8px 10px; background:#efeae2; }
.wa-campo{ flex:1; height:42px; border-radius:21px; background:#fff; display:flex; align-items:center; gap:10px; padding:0 12px; color:#8696a0; box-shadow:0 1px .5px rgba(11,20,26,.1); }
.wa-campo span{ flex:1; font-size:14.5px; }
.wa-campo .ico{ width:20px; height:20px; stroke-width:1.7; }
.wa-mic{ width:42px; height:42px; border-radius:50%; background:#00a884; color:#fff; display:grid; place-items:center; flex:none; }
.wa-mic .ico{ width:19px; height:19px; stroke-width:2; }

/* Ventana de «tu app» (la app que va con el agente: estilo de las apps de ROI Master, radio 5px) */
.app{ position:absolute; z-index:2; background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--linea); box-shadow:var(--sombra-3); display:flex; flex-direction:column; }
.app-cab{ height:46px; flex:none; display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--linea); }
.app-logo{ width:26px; height:26px; border-radius:6px; background:var(--tinta); color:#fff; font-size:10.5px; font-weight:600; display:grid; place-items:center; letter-spacing:.02em; }
.app-miga{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tinta-45); white-space:nowrap; }
.app-miga b{ font-weight:500; color:var(--tinta); }
.app-miga .ico{ width:13px; height:13px; }
.app-cab-der{ margin-left:auto; display:flex; align-items:center; gap:14px; color:var(--tinta-45); }
.app-cab-der .ico{ width:16px; height:16px; }
.app-yo{ width:26px; height:26px; border-radius:50%; background:var(--verde-agua); color:var(--verde-osc); font-size:10px; font-weight:600; display:grid; place-items:center; }
.app-cuerpo{ flex:1; min-height:0; display:flex; }
.app-lado{ width:52px; flex:none; border-right:1px solid var(--linea); display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:12px; background:#fcfcfd; }
.app-lado span{ width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:var(--tinta-45); }
.app-lado span.act{ background:var(--nieve-2); color:var(--tinta); }
.app-lado .ico{ width:17px; height:17px; }
.vacio{ color:var(--tinta-30); font-weight:400; }

/* Ficha del contacto */
.ficha{ flex:1; min-width:0; padding:16px 20px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.fi-cab{ display:flex; align-items:center; gap:12px; }
.fi-avatar{ width:44px; height:44px; border-radius:50%; background:var(--nieve-2); color:var(--verde-osc); display:grid; place-items:center; flex:none; font-size:14px; font-weight:600; transition:background .4s; }
.fi-avatar span{ opacity:0; transition:opacity .4s; }
.fi-avatar.con-nombre{ background:var(--verde-agua); }
.fi-avatar.con-nombre span{ opacity:1; }
.fi-quien{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.fi-nombre{ font-size:17px; font-weight:600; letter-spacing:-.015em; border-radius:4px; }
.fi-nombre .vacio{ font-weight:500; color:var(--tinta-60); }
.fi-origen{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--tinta-60); white-space:nowrap; }
.fi-origen .ico{ width:13px; height:13px; }
.fi-nuevo{ margin-left:auto; align-self:flex-start; font-size:11px; font-weight:500; padding:4px 9px; border-radius:999px; background:var(--verde-agua); color:var(--verde-osc); }
.fi-etapas{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.fi-etapas li{ display:flex; flex-direction:column; gap:6px; font-size:11.5px; color:var(--tinta-30); }
.fi-etapas i{ height:4px; border-radius:2px; background:var(--nieve-2); transition:background .5s; }
.fi-etapas li.hecho{ color:var(--tinta-80); font-weight:500; }
.fi-etapas li.hecho i{ background:var(--verde); }
.fi-bloque{ display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--linea); padding-top:12px; }
.fi-datos{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin:0; }
.fi-datos dt{ font-size:11.5px; color:var(--tinta-45); margin-bottom:2px; }
.fi-datos dd{ margin:0; font-size:13.2px; font-weight:500; color:var(--tinta); border-radius:4px; min-height:19px; }
.fi-filtro{ display:flex; flex-direction:column; gap:4px; }
.fi-filtro li{ display:flex; justify-content:space-between; align-items:center; font-size:12.6px; padding:6px 10px; border-radius:6px; background:var(--nieve); transition:background .4s; }
.fi-filtro span{ color:var(--tinta-60); }
.fi-filtro b{ display:inline-flex; align-items:center; gap:5px; font-weight:500; color:var(--tinta); }
.fi-filtro b .ico{ width:13px; height:13px; color:var(--verde-osc); stroke-width:2.6; }
.fi-filtro li:not(.ok) b{ display:none; }
.fi-filtro li:not(.ok)::after{ content:'Pendiente'; color:var(--tinta-30); font-size:12px; }
.fi-filtro li.ok{ background:var(--verde-agua); }
.fi-visita:not(.lista) .fi-cita{ display:none; }
.fi-visita:not(.lista)::after{ content:'Sin visita todavía'; font-size:12.5px; color:var(--tinta-30); padding:12px; border:1px dashed var(--linea-fuerte); border-radius:8px; }
.fi-visita.lista .fi-cita{ animation:entra .45s var(--ease) both; }
.fi-cita{ display:flex; align-items:center; gap:12px; padding:9px 12px 9px 9px; border-radius:8px; border:1px solid var(--linea); }
.fi-dia{ width:42px; height:44px; border-radius:6px; background:var(--verde-agua); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--verde-osc); flex:none; line-height:1.1; }
.fi-dia b{ font-size:17px; color:var(--tinta); letter-spacing:-.02em; }
.fi-cita > span:nth-child(2){ display:flex; flex-direction:column; gap:2px; font-size:13.4px; min-width:0; }
.fi-cita em{ font-style:normal; font-size:12px; color:var(--tinta-60); }
.fi-recu{ margin-left:auto; display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--tinta-60); white-space:nowrap; }
.fi-recu .ico{ width:13px; height:13px; }

/* Aviso flotante y dato que viaja */
.toast{ position:absolute; z-index:7; display:flex; align-items:center; gap:11px; padding:10px 18px 10px 10px; background:#fff; border-radius:12px; border:1px solid var(--linea); box-shadow:var(--sombra-3); }
.toast-ico{ width:32px; height:32px; border-radius:50%; background:var(--verde); color:var(--tinta); display:grid; place-items:center; flex:none; }
.toast-ico .ico{ width:15px; height:15px; stroke-width:2.6; }
.toast b{ display:block; font-size:13.5px; font-weight:600; }
.toast em{ font-style:normal; font-size:12px; color:var(--tinta-60); }
.vuela{ position:absolute; top:0; left:0; z-index:9; padding:5px 11px; border-radius:999px; background:var(--tinta); color:#fff; font-size:12.5px; font-weight:500; white-space:nowrap; pointer-events:none; box-shadow:0 8px 20px -8px rgba(10,10,10,.5); }

/* ---------- Demo 01: colocación en la escena fija (860 × 650) ---------- */
.d-v1 .movil{ left:46px; top:40px; width:318px; height:640px; }
.d-v1 .logo-canal{ left:18px; top:14px; }
.d-v1 .app{ left:384px; top:30px; width:458px; height:660px; }
.d-v1 .toast{ left:258px; top:646px; }

/* ---------- Tableta ---------- */
@media (max-width:1180px){
  .pt-grid{ grid-template-columns:minmax(0,1fr) 320px; gap:40px; }
  .pt-tab{ grid-template-columns:1fr; padding:12px 12px 16px; }
  .pt-ico{ grid-row:auto; margin-bottom:8px; }
}
/* ---------- Móvil: la escena deja de escalarse y se apila ---------- */
@media (max-width:899px){
  .v-cab{ grid-template-columns:1fr; gap:22px; margin-bottom:36px; }
  .v-cab-der{ justify-self:start; }
  .pt-rail{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:-16px; border-radius:0; border-inline:0; padding:6px 16px; gap:6px; }
  .pt-rail::-webkit-scrollbar{ display:none; }
  .pt-tab{ flex:0 0 172px; scroll-snap-align:center; grid-template-columns:32px 1fr; padding:11px 12px 15px; }
  .pt-ico{ grid-row:1 / span 2; width:32px; height:32px; margin:0; }
  .pt-grid{ grid-template-columns:1fr; gap:32px; }
  .escenario-t{ margin-inline:-6px; }
  .esc-fija{ position:relative; transform:none!important; width:auto!important; height:auto!important; padding:72px 12px 20px; display:flex; flex-direction:column; gap:16px; }
  .esc-fija .movil, .esc-fija .app, .esc-fija .toast{ position:relative; left:auto!important; top:auto!important; }
  .esc-fija .movil{ width:100%!important; max-width:340px; height:540px!important; margin-inline:auto; }
  .esc-fija .logo-canal{ left:16px!important; top:12px!important; }
  .esc-fija .app{ width:100%!important; height:auto!important; }
  .esc-fija .app-lado{ display:none; }
  .esc-fija .toast{ align-self:center; }
  .ficha{ padding:16px; }
  .fi-datos{ grid-template-columns:1fr 1fr; }
  .v-cierre{ grid-template-columns:1fr; gap:24px; margin-top:72px; }
}

/* ---------- Demo 02: precio orientativo y agenda (dos partes) ---------- */
.app.partes .app-miga.miga-b, .app.partes.parte-b .miga-a{ display:none; }
.app.partes.parte-b .miga-b{ display:flex; }
.app.partes.parte-b .lado-a{ background:none; color:var(--tinta-45); }
.app.partes.parte-b .lado-b{ background:var(--nieve-2); color:var(--tinta); }
.modulos{ flex:1; min-width:0; padding:14px 18px 16px; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.pasos-2{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--nieve); border-radius:8px; }
.pasos-2 li{ display:flex; align-items:center; justify-content:center; gap:8px; height:30px; border-radius:6px; font-size:12.5px; font-weight:500; color:var(--tinta-45); transition:all .35s; }
.pasos-2 b{ width:18px; height:18px; border-radius:50%; background:var(--nieve-2); color:var(--tinta-60); display:grid; place-items:center; font-size:10.5px; font-weight:600; transition:all .35s; }
.app:not(.parte-b) .pasos-2 .p-a, .app.parte-b .pasos-2 .p-b{ background:#fff; color:var(--tinta); box-shadow:var(--sombra-1); }
.app:not(.parte-b) .pasos-2 .p-a b, .app.parte-b .pasos-2 .p-b b{ background:var(--verde); color:var(--tinta); }
.app.parte-b .pasos-2 .p-a b{ background:var(--verde-agua); color:var(--verde-osc); }
.app.parte-b .mod-precio, .app:not(.parte-b) .mod-agenda{ display:none; }
.app.parte-b .mod-agenda, .app:not(.parte-b) .mod-precio{ animation:entra .5s var(--ease) both; }
.mod{ display:flex; flex-direction:column; gap:12px; min-height:0; }
.mp-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mp-cab > b{ font-size:16px; font-weight:600; letter-spacing:-.015em; border-radius:4px; }
.chip-ok{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; color:var(--verde-osc); background:var(--verde-agua); padding:4px 9px; border-radius:999px; white-space:nowrap; }
.chip-ok .ico{ width:11px; height:11px; stroke-width:2.6; }
.mp-chips{ display:flex; flex-wrap:wrap; gap:6px; min-height:26px; }
.mp-chips li{ font-size:12px; padding:4px 10px; border-radius:6px; background:var(--nieve); color:var(--tinta-80); }
.mp-caja{ border:1px solid var(--linea); border-radius:8px; padding:4px 12px; }
.mp-fila{ display:flex; justify-content:space-between; gap:12px; font-size:12.8px; padding:7px 0; color:var(--tinta-60); }
.mp-fila + .mp-fila{ border-top:1px solid var(--linea); }
.mp-fila b{ font-weight:500; color:var(--tinta); white-space:nowrap; }
.mp-aj b{ color:var(--verde-osc); }
.mp-comp{ display:flex; flex-direction:column; gap:2px; }
.mp-comp .rotulo{ margin-bottom:2px; }
.mp-res{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:8px; background:var(--tinta); color:#fff; }
.mp-res span{ font-size:11.5px; color:rgba(255,255,255,.6); }
.mp-res b{ font-size:22px; font-weight:500; letter-spacing:-.02em; }
.mp-res em{ font-style:normal; font-size:11.5px; color:var(--verde); }
/* Agenda de la semana */
.ag-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ag-quien{ display:flex; align-items:center; gap:9px; }
.ag-quien b{ display:block; font-size:13.5px; font-weight:600; }
.ag-quien em{ font-style:normal; font-size:11.5px; color:var(--tinta-60); }
.fi-avatar.mini{ width:32px; height:32px; font-size:11px; }
.ag-semana{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--tinta-80); border:1px solid var(--linea); border-radius:6px; padding:4px 6px; }
.ag-semana .ico{ width:13px; height:13px; color:var(--tinta-45); }
.ag{ --fila:22px; display:grid; grid-template-columns:36px 1fr; }
.ag-horas{ display:flex; flex-direction:column; padding-top:26px; }
.ag-horas span{ height:var(--fila); font-size:10px; color:var(--tinta-30); transform:translateY(-6px); }
.ag-dias{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border-left:1px solid var(--linea); }
.ag-dia{ position:relative; height:calc(var(--fila) * 11 + 26px); border-right:1px solid var(--linea);
  background:linear-gradient(var(--linea) 1px, transparent 1px) 0 26px / 100% var(--fila); }
.ag-dia > b{ display:flex; align-items:baseline; justify-content:center; gap:4px; height:26px; font-size:11px; font-weight:500; color:var(--tinta-45); background:#fff; }
.ag-dia > b i{ font-style:normal; font-size:13px; font-weight:600; color:var(--tinta-80); }
.ag-dia.hoy > b i{ color:var(--verde-osc); }
.ag-ev, .ag-libre{ position:absolute; left:3px; right:3px; top:calc(26px + var(--h) * var(--fila) + 2px); height:calc(var(--d) * var(--fila) - 4px); border-radius:4px; font-size:10px; line-height:1.2; padding:3px 5px; overflow:hidden; }
.ag-ev{ background:var(--nieve-2); color:var(--tinta-60); border-left:2px solid var(--tinta-15); }
.ag-libre{ border:1.5px dashed var(--verde); color:var(--verde-osc); font-weight:600; display:grid; place-items:center; background:rgba(60,193,160,.06); }
.ag-ev.reserva{ background:var(--verde); color:var(--tinta); border-left-color:var(--tinta); z-index:2; box-shadow:0 6px 16px -6px rgba(47,163,135,.6); }
.ag-ev.reserva b{ display:block; font-weight:600; }
.ag-pie{ display:flex; flex-direction:column; gap:6px; font-size:11.8px; color:var(--tinta-60); border-top:1px solid var(--linea); padding-top:10px; }
.ag-pie span{ display:flex; align-items:center; gap:7px; }
.ag-pie .ico{ width:13px; height:13px; color:var(--verde-osc); }
@media (max-width:899px){
  .app.partes .mod-precio, .app.partes .mod-agenda{ display:flex!important; animation:none; }
  .app.partes .pasos-2{ display:none; }
  .app.partes .mod-agenda{ border-top:1px solid var(--linea); padding-top:14px; }
  .app.partes .miga-b{ display:none!important; } .app.partes .miga-a{ display:flex!important; }
  .scroll-auto, .fi-scroll, .pr-hoja{ flex:none!important; max-height:460px; }
  .pr-hoja{ padding-bottom:18px; margin:10px 10px 0; max-height:520px; }
  .pr-barra{ position:static; margin:10px; }
  .wa-cab > .ico:not(.wa-atras){ display:none; }
  .ag-dia{ font-size:9px; }
  .ag-ev, .ag-libre{ font-size:9px; padding:2px 3px; }
}

/* ---------- v3 · piezas añadidas con los guiones del Copy ---------- */
.ejemplo{ position:absolute; top:14px; right:14px; z-index:9; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-60);
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px); border:1px solid var(--linea); border-radius:999px; padding:5px 11px; }
.wa-msg.sigue{ margin-top:-2px; }
.wa-msg.sigue::before{ display:none; }
.wa-msg.sigue.age{ border-top-right-radius:8px; }
.wa-msg.sigue.cli{ border-top-left-radius:8px; }
/* Ficha: cabecera fija y cuerpo que se desplaza hasta el dato nuevo */
.ficha{ padding:0; gap:0; }
.fi-fija{ padding:16px 20px 14px; display:flex; flex-direction:column; gap:14px; border-bottom:1px solid var(--linea); }
.fi-scroll{ flex:1; min-height:0; overflow:hidden; padding:4px 20px 24px; display:flex; flex-direction:column; gap:0; position:relative; }
.fi-scroll .fi-bloque{ border-top:0; padding-top:14px; }
.fi-scroll .fi-bloque + .fi-bloque{ border-top:1px solid var(--linea); margin-top:14px; }
.fi-nombre span:has(~ span:not(.oculto)){ display:none; }
.fi-nombre .fi-ph{ font-weight:500; }
.ico-wa{ color:#25d366; }
.fi-lista{ display:flex; flex-direction:column; margin:0; }
.fi-lista > div{ display:grid; grid-template-columns:86px 1fr; gap:10px; padding:6px 0; }
.fi-lista > div + div{ border-top:1px dashed var(--linea); }
.fi-lista dt{ font-size:11.5px; color:var(--tinta-45); padding-top:1px; }
.fi-lista dd{ margin:0; font-size:12.8px; line-height:1.4; font-weight:500; color:var(--tinta); border-radius:4px; }
.fi-bloque-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fi-visita.lista .fi-cita{ align-items:flex-start; }
.fi-cita > span:nth-child(2) em{ display:block; }
.fi-visita .fi-recu{ margin-left:0; font-size:12px; color:var(--tinta-80); }
.fi-visita:not(.lista) .fi-recu{ display:none; }
.fi-hist{ display:flex; flex-direction:column; gap:7px; position:relative; }
.fi-hist li{ display:grid; grid-template-columns:42px 1fr; gap:8px; font-size:12px; line-height:1.4; color:var(--tinta-60); }
.fi-hist time{ font-variant-numeric:tabular-nums; color:var(--tinta-45); font-weight:500; }

/* Demo 02 · v3: tabla de ajustes, comparables, cuenta y cita */
.mod.scroll-auto{ flex:1; min-height:0; overflow:hidden; position:relative; padding-bottom:16px; }
.mp-tabla{ display:flex; flex-direction:column; }
.mp-tabla .rotulo{ margin-bottom:4px; }
.mp-aj{ display:grid; grid-template-columns:1fr 40px 132px; gap:8px; align-items:center; font-size:12px; padding:5px 0; border-top:1px solid var(--linea); color:var(--tinta-60); }
.mp-aj em{ font-style:normal; text-align:right; color:var(--tinta-80); }
.mp-aj b{ font-weight:500; color:var(--tinta-45); font-size:11.5px; }
.mp-aj b.si{ color:var(--verde-osc); }
.mp-cp{ display:grid; grid-template-columns:1fr 40px 72px 66px; gap:8px; align-items:center; font-size:11.8px; padding:5px 0; border-top:1px solid var(--linea); color:var(--tinta-60); }
.mp-cp em, .mp-cp i{ font-style:normal; text-align:right; }
.mp-cp b{ font-weight:500; color:var(--tinta); text-align:right; }
.mp-cp i{ color:var(--tinta-45); }
.mp-cp.media span{ font-weight:500; color:var(--tinta-80); }
.mp-cp.media i{ color:var(--tinta); font-weight:600; }
.mp-cuenta{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--tinta-60); background:var(--nieve); border-radius:8px; padding:9px 12px; }
.mp-cuenta i{ font-style:normal; color:var(--verde-osc); font-weight:600; }
.mp-cuenta b{ color:var(--tinta); font-weight:600; }
.mp-res em{ color:rgba(255,255,255,.7); line-height:1.4; margin-top:2px; }
.ag-dia::after{ content:''; position:absolute; left:0; right:0; top:calc(26px + 5 * var(--fila)); height:calc(3 * var(--fila));
  background:repeating-linear-gradient(135deg, rgba(10,10,10,.035) 0 4px, transparent 4px 8px); pointer-events:none; }
.ag-cita{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--tinta-60); padding:10px 12px; border:1px solid var(--verde-20); background:var(--verde-agua); border-radius:8px; }
.ag-cita > b{ font-size:13px; color:var(--tinta); font-weight:600; }
.ag-cita b.tnum{ color:var(--tinta); font-weight:600; }
.ag-cita .rotulo{ color:var(--verde-osc); }

.ag-ev{ white-space:nowrap; text-overflow:ellipsis; }
.ag-ev[style*="--d:2"], .ag-ev[style*="--d:1.5"]{ white-space:normal; }
.ag-ev.reserva{ min-height:18px; font-size:9.5px; padding:2px 5px; display:flex; gap:4px; align-items:center; }
.ag-ev.reserva b{ display:inline; }
.ag-libre{ font-size:9.5px; }

/* ---------- Demo 03: el presupuesto que se escribe solo ---------- */
.wa-avatar.marca{ background:var(--tinta); color:#fff; font-size:12px; font-weight:600; }
.wa-msg.age.wa-audio .wa-yo{ order:3; }
.wa-msg.age .wa-transcrito{ border-top-color:rgba(11,20,26,.09); }
.wa-fotos{ padding:3px; }
.fotos{ display:grid; grid-template-columns:1fr 1fr; gap:3px; width:206px; }
.fotos i{ position:relative; height:96px; border-radius:6px; overflow:hidden; }
.fotos .f1{ background:linear-gradient(rgba(0,0,0,.14) 1px, transparent 1px) 0 0/15px 15px, linear-gradient(90deg, rgba(0,0,0,.14) 1px, transparent 1px) 0 0/15px 15px, linear-gradient(160deg,#efe5cf,#d9cba8); }
.fotos .f2{ background:radial-gradient(ellipse 70% 34% at 50% 74%, #fbfbf8 0 62%, #d8d3c8 64%, transparent 66%), linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px) 0 0/12px 12px, linear-gradient(180deg,#cfe0dc,#a9c0bb); }
.fotos .f3{ background:repeating-linear-gradient(45deg, #b98e6a 0 13px, #a87d5a 13px 14px, #c39b77 14px 27px, #a87d5a 27px 28px); }
.fotos .f4{ background:linear-gradient(180deg,#e8e6e1,#b9b5ad); }
.fotos .f4::before{ content:""; position:absolute; left:18%; right:18%; top:40%; height:8px; border-radius:4px; background:#8a7f72; box-shadow:0 18px 0 #8a7f72; }
.fotos .f4 b{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(11,20,26,.45); color:#fff; font-size:20px; font-weight:500; }
.wa-fotos .wa-meta{ position:absolute; right:10px; bottom:7px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); margin:0; float:none; }
.wa-fotos .wa-meta .wa-tick{ stroke:#fff; }
.pr-zona{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--nieve); position:relative; }
.pr-hoja{ flex:1; min-height:0; overflow:hidden; margin:12px 12px 0; padding:18px 18px 190px; background:#fff; border:1px solid var(--linea); border-bottom:0; border-radius:6px 6px 0 0; position:relative; display:flex; flex-direction:column; gap:12px; }
.pr-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding-bottom:12px; border-bottom:2px solid var(--tinta); }
.pr-cab > div:first-child{ display:flex; flex-direction:column; }
.pr-empresa{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.pr-cab span{ font-size:11px; color:var(--tinta-45); }
.pr-num{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.pr-num b{ font-size:12.5px; font-weight:600; }
.pr-borrador{ font-size:9.5px!important; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ambar)!important; background:var(--ambar-fondo); padding:2px 7px; border-radius:4px; }
.pr-datos{ display:flex; flex-direction:column; gap:5px; margin:0; }
.pr-datos div{ display:grid; grid-template-columns:62px 1fr; gap:8px; font-size:11.3px; line-height:1.4; }
.pr-datos dt{ color:var(--tinta-45); }
.pr-datos dd{ margin:0; color:var(--tinta-80); }
.pr-tabla{ width:100%; border-collapse:separate; border-spacing:0; font-size:10.6px; line-height:1.32; table-layout:fixed; }
.pr-tabla th{ text-align:left; font-weight:500; color:var(--tinta-45); font-size:9.8px; text-transform:uppercase; letter-spacing:.05em; padding:5px 3px; border-bottom:1px solid var(--linea-fuerte); }
.pr-tabla th:nth-child(1){ width:20px; } .pr-tabla th:nth-child(3){ width:34px; } .pr-tabla th:nth-child(4){ width:22px; } .pr-tabla th:nth-child(5){ width:46px; } .pr-tabla th:nth-child(6){ width:52px; }
.pr-tabla th:nth-child(n+3), .pr-tabla td:nth-child(n+3){ text-align:right; }
.pr-tabla td:nth-child(4){ text-align:left; padding-left:5px; }
.pr-tabla tr.tot td:nth-child(2), .pr-tabla tr.cap td:nth-child(2){ text-align:left; }
.pr-tabla td{ padding:5px 3px; border-bottom:1px solid var(--linea); color:var(--tinta-80); vertical-align:top; }
.pr-tabla td:first-child{ color:var(--tinta-45); }
.pr-tabla tr.cap td{ font-weight:600; color:var(--tinta); padding-top:9px; border-bottom-color:var(--linea-fuerte); }
.pr-tabla tr.tot td{ color:var(--tinta-60); font-style:italic; background:#fafafb; }
.pr-tabla tr.tot td:last-child{ font-style:normal; font-weight:600; color:var(--tinta); }
.pr-tabla tr.revisar td{ background:var(--ambar-fondo); }
.pr-tabla em{ font-style:normal; color:var(--ambar); font-weight:500; }
.pr-marca{ display:block; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ambar); margin-bottom:1px; }
.pr-tabla tr.off{ transform:none; }
.pr-totales{ display:flex; flex-direction:column; gap:3px; margin-left:auto; width:84%; font-size:11.5px; }
.pr-totales div{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; color:var(--tinta-60); }
.pr-totales b{ font-weight:500; color:var(--tinta); }
.pr-totales .total{ border-top:2px solid var(--tinta); padding-top:7px; margin-top:3px; font-size:14px; }
.pr-totales .total span, .pr-totales .total b{ color:var(--tinta); font-weight:700; }
.pr-totales .aparte{ font-size:10.5px; }
.pr-totales .aparte em{ font-style:normal; color:var(--ambar); text-align:right; }
.pr-nota{ font-size:10.8px; line-height:1.45; color:var(--tinta-60); background:var(--nieve); border-radius:6px; padding:8px 10px; }
.pr-nota b{ color:var(--tinta-80); font-weight:600; }
.pr-revisar{ display:flex; flex-direction:column; gap:6px; border:1px solid #f1d9a8; background:var(--ambar-fondo); border-radius:6px; padding:9px 11px; font-size:11px; line-height:1.45; color:var(--tinta-80); }
.pr-revisar .rotulo{ display:flex; align-items:center; gap:6px; color:var(--ambar); }
.pr-revisar .ico{ width:13px; height:13px; }
.pr-cond{ display:flex; flex-direction:column; gap:4px; margin:0; }
.pr-cond div{ display:grid; grid-template-columns:96px 1fr; gap:8px; font-size:11px; }
.pr-cond dt{ color:var(--tinta-45); }
.pr-cond dd{ margin:0; color:var(--tinta-80); }
.pr-barra{ position:absolute; left:12px; right:12px; bottom:12px; padding:11px 13px; background:#fff; border:1px solid var(--linea-fuerte); border-radius:8px; box-shadow:0 -10px 30px -12px rgba(10,10,10,.28); display:grid; grid-template-columns:1fr auto; gap:9px 10px; align-items:center; }
.pr-estado{ display:flex; align-items:center; gap:9px; }
.pr-punto{ width:9px; height:9px; border-radius:50%; background:#e0a63a; box-shadow:0 0 0 4px var(--ambar-fondo); flex:none; animation:latido 1.6s infinite; }
@keyframes latido{ 50%{ box-shadow:0 0 0 7px rgba(253,243,225,.6); } }
.pr-estado b{ display:block; font-size:12.5px; font-weight:600; }
.pr-estado em{ font-style:normal; font-size:10.8px; color:var(--tinta-60); display:block; }
.pr-estado b{ white-space:nowrap; }
.pr-botones{ display:flex; gap:6px; }
.pr-btn{ font-size:11.5px; font-weight:500; padding:7px 11px; border-radius:5px; border:1px solid var(--linea-fuerte); color:var(--tinta-80); }
.pr-btn.prim{ background:var(--tinta); color:#fff; border-color:var(--tinta); }
.pr-guardado{ grid-column:1 / -1; display:flex; flex-direction:column; gap:4px; font-size:10.5px; color:var(--tinta-60); border-top:1px dashed var(--linea); padding-top:8px; }
.pr-guardado span{ display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-guardado .ico{ width:12px; height:12px; flex:none; }
.ico-drive{ width:13px!important; height:12px!important; }

/* ---------- Demo 04: seguimiento de la propuesta y la lista de cada mañana ---------- */
.wa-doc{ padding:4px 4px 6px; max-width:86%; }
.doc{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:6px; background:rgba(11,20,26,.05); margin-bottom:5px; }
.doc-ico{ width:34px; height:40px; border-radius:4px; background:#e5534b; color:#fff; font-size:9.5px; font-weight:700; display:grid; place-items:center; flex:none; letter-spacing:.04em; }
.doc-txt{ display:flex; flex-direction:column; min-width:0; }
.doc-txt b{ font-size:12.8px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-txt em{ font-style:normal; font-size:11px; color:#667781; }
.wa-doc p{ padding:0 5px; }
.wa-doc .wa-meta{ margin-right:4px; }
.sg-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.sg-cab > div{ display:flex; flex-direction:column; gap:2px; }
.sg-cab b{ font-size:16px; font-weight:600; letter-spacing:-.015em; }
.sg-cab em{ font-style:normal; font-size:12px; color:var(--tinta-60); }
.sg-estado i{ font-style:normal; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; display:inline-block; }
.sg-estado .seg, .e-seg{ background:var(--ambar-fondo); color:var(--ambar); }
.sg-estado .apl, .e-apl{ background:#e8eef6; color:#3b5b85; }
.e-si{ background:var(--verde-agua); color:var(--verde-osc); }
.e-no{ background:var(--nieve-2); color:var(--tinta-45); }
.sg-datos > div{ grid-template-columns:96px 1fr; }
.sg-linea{ display:flex; flex-direction:column; gap:6px; }
.sg-linea ol{ display:flex; flex-direction:column; position:relative; }
.sg-linea li{ display:grid; grid-template-columns:22px 1fr; gap:8px; padding:6px 0; position:relative; }
.sg-linea li::before{ content:""; position:absolute; left:6px; top:22px; bottom:-6px; width:2px; background:var(--nieve-2); }
.sg-linea li:last-child::before{ display:none; }
.sg-linea li > i{ width:14px; height:14px; border-radius:50%; border:2px solid var(--tinta-15); background:#fff; margin-top:2px; transition:all .4s; }
.sg-linea li.hecho > i{ border-color:var(--verde); background:var(--verde); box-shadow:inset 0 0 0 3px #fff; }
.sg-linea li span{ display:flex; flex-direction:column; gap:1px; }
.sg-linea b{ font-size:12.6px; font-weight:600; color:var(--tinta-45); transition:color .4s; }
.sg-linea li.hecho b{ color:var(--tinta); }
.sg-linea em{ font-style:normal; font-size:11.8px; color:var(--tinta-60); }
.sg-linea small{ font-size:11.3px; color:var(--tinta-45); }
.sg-linea li:not(.hecho) em, .sg-linea li:not(.hecho) small{ opacity:.45; }
.sg-final{ display:flex; flex-direction:column; gap:4px; padding:11px 13px; border-radius:8px; background:#eef3f9; border:1px solid #d6e1ee; font-size:11.8px; color:var(--tinta-60); }
.sg-final b{ font-size:13px; color:#2c4a72; font-weight:600; }
.sg-final span{ display:flex; align-items:center; gap:6px; }
.sg-final .ico{ width:13px; height:13px; color:#3b5b85; }
.mn-cab{ display:flex; flex-direction:column; gap:3px; }
.mn-cab b{ font-size:17px; font-weight:600; letter-spacing:-.015em; }
.mn-llamar{ display:flex; flex-direction:column; gap:6px; }
.mn-llamar li{ display:grid; grid-template-columns:28px 1fr; gap:10px; padding:7px 10px; border:1px solid var(--linea); border-radius:8px; background:#fff; }
.mn-tel{ width:30px; height:30px; border-radius:50%; background:var(--verde-agua); color:var(--verde-osc); display:grid; place-items:center; }
.mn-tel .ico{ width:14px; height:14px; }
.mn-llamar span{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mn-llamar b{ display:flex; justify-content:space-between; gap:8px; font-size:12.6px; font-weight:600; }
.mn-llamar b i{ font-style:normal; font-weight:500; color:var(--tinta-60); }
.mn-llamar em{ font-style:normal; font-size:11.3px; color:var(--tinta-60); }
.mn-llamar small{ font-size:11.3px; color:var(--tinta-80); line-height:1.4; margin-top:2px; }
.mn-tabla{ display:flex; flex-direction:column; }
.mn-tabla .rotulo{ margin-bottom:4px; }
.mn-fila{ display:grid; grid-template-columns:1fr 58px 132px; gap:8px; align-items:center; padding:4px 0; border-top:1px solid var(--linea); font-size:11.8px; }
.mn-fila span{ display:flex; flex-direction:column; color:var(--tinta); font-weight:500; min-width:0; }
.mn-fila span em{ font-style:normal; font-weight:400; font-size:10.8px; color:var(--tinta-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mn-fila b{ font-weight:500; text-align:right; }
.mn-fila i{ font-style:normal; font-size:10.3px; font-weight:600; padding:3px 7px; border-radius:999px; justify-self:start; line-height:1.25; }
.mn-resumen{ display:flex; flex-direction:column; gap:6px; font-size:11px; color:var(--tinta-60); }
.mn-resumen b{ color:var(--tinta); }
.mn-barra{ display:flex; height:8px; border-radius:4px; overflow:hidden; gap:2px; }
.mn-barra i{ display:block; height:100%; }
.mn-barra .e-si{ background:var(--verde); } .mn-barra .e-seg{ background:#e8b04f; } .mn-barra .e-apl{ background:#7d98bf; } .mn-barra .e-no{ background:var(--tinta-15); }

/* ---------- Demo 05: contrato, firma y fianza ---------- */
.ct-cab{ display:flex; flex-direction:column; gap:2px; padding-bottom:10px; border-bottom:2px solid var(--tinta); }
.ct-cab b{ font-size:15px; font-weight:600; letter-spacing:-.01em; margin-top:3px; }
.ct-cab em{ font-style:normal; font-size:12px; color:var(--tinta-60); }
.ct-campos{ display:flex; flex-direction:column; }
.ct-campos > div{ display:grid; grid-template-columns:88px 1fr; grid-template-rows:auto auto; column-gap:10px; padding:6px 0; border-bottom:1px dashed var(--linea); }
.ct-campos span{ grid-row:1 / span 2; font-size:11.3px; color:var(--tinta-45); line-height:1.35; }
.ct-campos b{ font-size:12.3px; font-weight:500; color:var(--tinta); border-radius:4px; line-height:1.4; }
.ct-campos i{ font-style:normal; font-size:10.3px; color:var(--verde-osc); }
.ct-campos i::before{ content:"\2190  "; }
.ct-clausulas{ display:flex; flex-direction:column; gap:5px; }
.ct-clausulas ol{ display:flex; flex-direction:column; gap:3px; padding-left:16px; list-style:decimal; font-size:11.8px; color:var(--tinta-80); }
.ct-revision{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; border:1px dashed #e7c98d; background:var(--ambar-fondo); font-size:12.3px; font-weight:500; }
.ct-revision .ct-pend{ display:flex; align-items:center; gap:9px; color:var(--ambar); }
.ct-revision .ct-ok{ display:none; align-items:center; gap:7px; color:var(--verde-osc); }
.ct-revision .ct-ok .ico{ width:14px; height:14px; stroke-width:2.6; }
.ct-revision.hecho{ border-style:solid; border-color:var(--verde-20); background:var(--verde-agua); }
.ct-revision.hecho .ct-pend{ display:none; }
.ct-revision.hecho .ct-ok{ display:flex; }
.ct-pasos{ display:flex; flex-direction:column; }
.ct-pasos li{ display:grid; grid-template-columns:22px 1fr auto; grid-template-rows:auto auto; column-gap:8px; padding:7px 0; position:relative; }
.ct-pasos li::before{ content:""; position:absolute; left:6px; top:24px; bottom:-7px; width:2px; background:var(--nieve-2); }
.ct-pasos li.hecho::before{ background:var(--verde-20); }
.ct-pasos li:last-child::before{ display:none; }
.ct-pasos li > i{ width:14px; height:14px; border-radius:50%; border:2px solid var(--tinta-15); background:#fff; margin-top:2px; transition:all .4s; grid-row:1 / span 2; }
.ct-pasos li.hecho > i{ border-color:var(--verde); background:var(--verde); box-shadow:inset 0 0 0 3px #fff; }
.ct-pasos li.hecho > i.esp{ border-color:#e0a63a; background:#e0a63a; }
.ct-pasos b{ font-size:12.6px; font-weight:500; color:var(--tinta-45); transition:color .4s; }
.ct-pasos li.hecho b{ color:var(--tinta); }
.ct-pasos time{ font-size:11.3px; color:var(--tinta-45); white-space:nowrap; }
.ct-pasos small{ grid-column:2 / span 2; font-size:11px; color:var(--tinta-60); }
.ct-pasos li:not(.hecho) time, .ct-pasos li:not(.hecho) small{ opacity:.4; }
.ct-persona{ display:flex; gap:7px; align-items:flex-start; font-size:11.5px; color:var(--tinta-60); background:var(--nieve); border-radius:6px; padding:8px 10px; }
.ct-persona .ico{ width:13px; height:13px; margin-top:2px; flex:none; }
.ct-archivo{ display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--tinta-60); }
.ct-archivo span:not(.rotulo){ display:flex; gap:7px; align-items:flex-start; line-height:1.4; }
.ct-archivo .ico{ width:12px; height:12px; flex:none; margin-top:2px; }

/* ---------- Demo 06: venta en el chat y panel del lanzamiento ---------- */
.wa-enlace{ padding:4px 4px 6px; max-width:88%; }
.enl-img{ display:flex; flex-direction:column; justify-content:space-between; height:96px; border-radius:6px 6px 0 0; padding:12px 14px;
  background:radial-gradient(120% 120% at 100% 0%, #3cc1a0 0%, #1f7a62 45%, #0f3b31 100%); color:#fff; }
.enl-img b{ font-size:19px; line-height:1.05; font-weight:700; letter-spacing:-.02em; }
.enl-img i{ font-style:normal; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }
.enl-txt{ display:flex; flex-direction:column; gap:3px; padding:8px 8px 4px; background:rgba(11,20,26,.04); border-radius:0 0 6px 6px; }
.enl-txt b{ font-size:12.6px; font-weight:600; }
.enl-txt em{ font-style:normal; font-size:11.5px; color:#54656f; line-height:1.35; }
.enl-btn{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px; padding:7px; border-radius:6px; background:#fff; color:#027eb5; font-size:12.5px; font-weight:600; border:1px solid rgba(11,20,26,.08); }
.enl-btn .ico{ width:14px; height:14px; }
.lz{ gap:14px; }
.lz-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.lz-kpis > div{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--linea); border-radius:8px; background:#fff; }
.lz-kpis span{ font-size:11px; color:var(--tinta-45); }
.lz-kpis b{ font-size:22px; font-weight:500; letter-spacing:-.03em; line-height:1.1; border-radius:4px; }
.lz-kpis b small{ font-size:12px; font-weight:400; color:var(--tinta-60); letter-spacing:0; }
.lz-kpis em{ font-style:normal; font-size:11px; color:var(--tinta-60); border-radius:4px; }
.lz-kpis .cierre{ background:var(--tinta); border-color:var(--tinta); }
.lz-kpis .cierre span, .lz-kpis .cierre em{ color:rgba(255,255,255,.65); }
.lz-kpis .cierre b{ color:#fff; }
.lz-lista{ display:flex; flex-direction:column; }
.lz-lista .rotulo{ margin-bottom:4px; }
.lz-fila{ display:grid; grid-template-columns:26px 92px 1fr; gap:8px; align-items:center; padding:5px 0; border-top:1px solid var(--linea); }
.lz-fila.yo{ background:linear-gradient(90deg, rgba(60,193,160,.08), transparent 70%); }
.lz-av{ width:26px; height:26px; border-radius:50%; background:var(--nieve-2); color:var(--tinta-60); font-size:9.5px; font-weight:600; display:grid; place-items:center; }
.lz-fila > span:nth-child(2){ display:flex; flex-direction:column; min-width:0; }
.lz-fila b{ font-size:11.8px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lz-fila em{ font-style:normal; font-size:10.5px; color:var(--tinta-45); }
.lz-est i{ font-style:normal; font-size:10.6px; line-height:1.35; display:inline-flex; align-items:baseline; gap:6px; padding:0; background:none; color:var(--tinta-80); }
.lz-est i::before{ content:""; width:7px; height:7px; border-radius:50%; flex:none; background:var(--tinta-15); transform:translateY(-1px); }
.lz-est i.e-si{ color:var(--verde-osc); font-weight:600; } .lz-est i.e-si::before{ background:var(--verde); }
.lz-est i.e-seg::before{ background:#e0a63a; }
.lz-est i:has(~ i:not(.oculto)){ display:none; }
.lz-pagina{ display:flex; flex-direction:column; gap:6px; }
.lz-pagina ul{ display:flex; flex-direction:column; gap:4px; }
.lz-pagina li{ display:flex; gap:7px; align-items:flex-start; font-size:11.3px; line-height:1.4; color:var(--tinta-45); padding:5px 8px; border-radius:6px; background:var(--nieve); transition:all .4s; }
.lz-pagina li .ico{ width:12px; height:12px; flex:none; margin-top:2px; opacity:.3; stroke-width:2.6; }
.lz-pagina li.usado{ background:var(--verde-agua); color:var(--tinta-80); }
.lz-pagina li.usado .ico{ opacity:1; color:var(--verde-osc); }

/* ---------- Secciones 6 y 7: titular a dos tonos y cierre con línea extra ---------- */
.v-cierre-txt{ display:flex; flex-direction:column; gap:14px; }
.s-agentes + .s-agentes{ padding-top:clamp(40px, 5vw, 72px); }

/* ---------- Pantallas pequeñas (secciones Canales y Lo que no es) ---------- */
.mini{ position:relative; z-index:2; width:360px; max-width:calc(100% - 32px); background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--linea); box-shadow:0 2px 4px rgba(10,10,10,.04), 0 24px 50px -24px rgba(10,10,10,.35); }
.mini-cab{ height:52px; display:flex; align-items:center; gap:9px; padding:0 12px; border-bottom:1px solid var(--linea); }
.mini-cab .wa-avatar{ width:32px; height:32px; }
.mini-logo{ margin-left:auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; flex:none; }
.mini-logo .ico, .mini-logo svg{ width:17px; height:17px; }
.mini-logo.wa{ background:#25d366; } .mini-logo.mail{ background:#2f6fed; }
.mini-logo.ig{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.mini-wa .wa-cuerpo{ height:262px; padding:8px 10px; }
.mini-wa .wa-msg{ font-size:12.6px; }