/* Demo: CRM con IA para una agencia de seguros (prefijo sg-). Se apoya en el kit dx (dx.css) y toma la piel de
   Elio for Insurance, el CRM que construimos: lienzo crema, tarjetas cálidas con filo durazno, dock con grupos, encabezados
   «Elio · <módulo>», bandas de urgencia, insignias de línea (ACA, Medicare, Vida) y de etapa, semáforo de score,
   temperatura (Frío, Tibio, Hot), foco del contacto con chat y ficha, comparador de cotizaciones, formalización por estado
   y el «Hoy» del dueño. Verde solo para lo logrado (aprobado, emitido, registrada). */
.dx[data-demo="seguros"]{--sg-card:#fffdfb;--sg-edge:rgba(229,97,45,.13);--sg-p50:#fff5f0;--sg-p100:#fcddd3;--sg-p200:#f9bba7;
  --sg-p300:#f4a58a;--sg-p400:#ef8c6d;--sg-p500:#e5612d;--sg-p600:#cc4f22;--sg-p700:#b33d18;--sg-cream:#efe3d7;
  --sg-g400:#9ca3af;--sg-g500:#6b7280;--sg-g600:#4b5563;--sg-g900:#111827;--sg-teal:#147d64;--sg-teal-bg:#d5f5e8;
  --sg-grad:linear-gradient(100deg,#f59e0b 0%,#e5612d 44%,#f40655 100%)}
.sg-sw{display:inline-grid}
.sg-sw > *{grid-area:1/1}

/* Ventana y dock como en el producto: lienzo con halo, dock blanco con grupos y el «e.» en durazno */
.dx[data-demo="seguros"] .dx-app{grid-template-columns:92px minmax(0,1fr);
  background:radial-gradient(700px 300px at 96% -10%,rgba(244,6,85,.06),transparent 62%),radial-gradient(560px 260px at 4% -8%,rgba(245,158,11,.06),transparent 60%)}
.dx[data-demo="seguros"] .dx-side{gap:2px;padding:10px 6px;border-radius:24px;background:rgba(255,255,255,.82);border:1px solid var(--sg-cream);box-shadow:0 18px 30px -20px rgba(118,74,40,.35)}
.dx[data-demo="seguros"] .dx-logo{margin-bottom:2px;font-size:18px;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--sg-p500)}
.dx[data-demo="seguros"] .dx-grp{display:block;width:100%;padding:6px 0 2px;border-top:1px solid var(--sg-cream);font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--sg-g400)}
.dx[data-demo="seguros"] .dx-grp:first-of-type{border-top:0}
.dx[data-demo="seguros"] .dx-nav{gap:2px;padding:6px 3px;border-radius:14px;font-size:9px;color:var(--sg-g400)}
.dx[data-demo="seguros"] .dx-nav > span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx[data-demo="seguros"] .dx-nav svg{width:16px;height:16px}
.dx[data-demo="seguros"] .dx-nav.is-on{background:linear-gradient(135deg,var(--sg-p400),var(--sg-p500));color:#fff;box-shadow:0 8px 16px -8px rgba(229,97,45,.6)}

/* Piezas comunes: encabezado de módulo, píldoras, insignias y el orbe de Elio */
.sg-ph{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 14px}
.sg-ph-t{min-width:0;flex:1 1 auto}
.sg-eye{margin:0;font-size:9.5px;font-weight:650;letter-spacing:.2em;text-transform:uppercase;color:var(--sg-p500)}
.sg-h1{display:flex;align-items:center;gap:7px;margin-top:2px;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--sg-g900)}
.sg-h1 svg{width:20px;height:20px;color:var(--sg-p500)}
.sg-sub{margin:3px 0 0;font-size:11.5px;color:var(--sg-g600)}
.sg-pill{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:99px;font-size:9.5px;font-weight:650;white-space:nowrap;background:#f3f4f6;color:var(--sg-g600)}
.sg-pill.amber{background:#fef3c7;color:#92400e}.sg-pill.ok{background:var(--dx-ok-bg);color:var(--dx-ok)}
.sg-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:99px;font-size:10px;font-weight:650;white-space:nowrap;box-shadow:inset 0 0 0 1px currentColor}
.sg-badge.b-urgent{background:#fef2f2;color:#b91c1c;box-shadow:inset 0 0 0 1px rgba(220,38,38,.2)}
.sg-badge.b-peach{background:var(--sg-p50);color:var(--sg-p700);box-shadow:inset 0 0 0 1px rgba(229,97,45,.22)}
.sg-badge.b-warn{background:#fffbeb;color:#b45309;box-shadow:inset 0 0 0 1px rgba(217,119,6,.2)}
.sg-badge.b-ok{background:var(--dx-ok-bg);color:var(--dx-ok);box-shadow:inset 0 0 0 1px rgba(19,122,70,.2)}
.sg-orb{position:relative;display:block;flex:none;width:28px;height:28px;border-radius:50%;background:conic-gradient(from 120deg,var(--sg-p300),var(--sg-p500),#f40655,var(--sg-p400),var(--sg-p300));box-shadow:0 0 0 4px rgba(229,97,45,.12)}
.sg-orb::after{content:"";position:absolute;inset:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.sg-gic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:14px;background:var(--sg-grad);color:#fff;box-shadow:0 6px 14px -8px rgba(229,97,45,.8)}
.sg-gic svg{width:18px;height:18px}
.sg-gic.s{width:24px;height:24px;border-radius:9px}.sg-gic.s svg{width:13px;height:13px}
.sg-hero{position:relative;min-height:min-content;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:22px;overflow:hidden;border:1px solid rgba(229,97,45,.18);
  background:radial-gradient(420px 220px at 100% -20%,rgba(244,6,85,.13),transparent 64%),radial-gradient(300px 170px at 0% 120%,rgba(245,158,11,.12),transparent 60%),linear-gradient(135deg,#fff5ef 0%,#fdeadf 52%,#fce7ee 100%)}

/* 1 · Ventas: barra del asistente y embudo por urgencia (tres bandas) */
.dx-screen[data-screen="ventas"]{grid-template-rows:auto auto minmax(0,1fr);align-content:stretch;gap:12px}
.sg-seg{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:rgba(243,244,246,.85)}
.sg-seg > span{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:99px;font-size:10.5px;font-weight:650;color:var(--sg-g500)}
.sg-seg > span.on{background:#fff;color:var(--sg-g900);box-shadow:0 1px 2px rgba(17,24,39,.08)}
.sg-seg svg{width:12px;height:12px}
.sg-asst{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 10px;border-radius:16px;background:#fff;border:1px solid #e5e7eb}
.sg-bot{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:8px;background:var(--sg-grad);color:#fff}
.sg-bot svg{width:13px;height:13px}
.sg-asst > b{font-size:12px;font-weight:700;color:var(--sg-g900);white-space:nowrap}
.sg-live{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 7px;border-radius:99px;background:var(--sg-teal-bg);color:var(--sg-teal);font-size:9.5px;font-weight:650;white-space:nowrap}
.sg-live i{width:6px;height:6px;border-radius:50%;background:currentColor}
.sg-hint{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden;font-size:11px;color:var(--sg-g500);white-space:nowrap;text-overflow:ellipsis}
.sg-hint svg{width:12px;height:12px;flex:none;color:var(--sg-p500)}
.sg-filt{display:inline-flex;gap:4px;margin-left:auto}
.sg-filt span{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;background:#fff;border:1px solid #f3f4f6;font-size:10.5px;font-weight:650;color:var(--sg-g500)}
.sg-filt span.on{background:var(--sg-p100);border-color:transparent;color:var(--sg-p700)}
.sg-bands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0}
.sg-band{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;padding:10px;border-radius:20px;border:1px solid var(--sg-cream);background:#fff;overflow:hidden}
.sg-band.b-urgent{background:rgba(254,242,242,.85);border-color:#fecaca}
.sg-band.b-soon{background:rgba(255,251,235,.8);border-color:#fde68a}
.sg-band header{display:flex;align-items:center;gap:7px}
.sg-bdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--sg-p400)}
.b-urgent .sg-bdot{background:#ef4444}.b-soon .sg-bdot{background:#f59e0b}
.sg-band header b{min-width:0;overflow:hidden;font-size:12px;font-weight:700;color:var(--sg-g900);white-space:nowrap;text-overflow:ellipsis}
.sg-bn{padding:1px 7px;border-radius:99px;background:rgba(255,255,255,.75);font-size:10.5px;font-weight:650;color:var(--sg-g600)}
.sg-bsub{margin:2px 0 8px 16px;font-size:10.5px;color:var(--sg-g400)}
.sg-cards{display:grid;gap:7px;min-height:0}
.sg-more{margin-top:auto;padding:6px 2px 0;font-size:10.5px;font-weight:650;color:var(--sg-g500)}
/* la banda recorta lo que no cabe, como una lista que sigue más abajo */
.sg-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.9) 70%);pointer-events:none}
.b-urgent::after{background:linear-gradient(180deg,transparent,#fef3f3 70%)}.b-soon::after{background:linear-gradient(180deg,transparent,#fffbec 70%)}
.sg-band .sg-more{position:relative;z-index:1}
/* tarjeta del contacto */
.sg-lead{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:9px 10px;border-radius:14px;background:var(--sg-card);border:1px solid var(--sg-edge);box-shadow:0 1px 2px rgba(76,29,12,.05),0 14px 30px -22px rgba(76,29,12,.22);font-size:11px}
.sg-lead.is-hot{border-color:var(--sg-p300);box-shadow:0 0 0 3px rgba(229,97,45,.15),0 14px 30px -22px rgba(76,29,12,.3)}
.sg-lead-t{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.sg-lead-n{min-width:0}
.sg-lead-n p{display:flex;align-items:center;gap:5px;margin:0;min-width:0}
.sg-lead-n b{min-width:0;overflow:hidden;font-size:12.3px;font-weight:650;color:var(--sg-g900);white-space:nowrap;text-overflow:ellipsis}
.sg-msg{display:grid;place-items:center;flex:none;width:15px;height:15px;border-radius:50%;background:var(--sg-p50);color:var(--sg-p500)}
.sg-msg svg{width:9px;height:9px}
.sg-unread{width:6px;height:6px;border-radius:50%;flex:none;background:var(--sg-p500)}
.sg-lead-n .sg-badges{flex-wrap:wrap;gap:4px;margin-top:4px}
.sg-line,.sg-stage{display:inline-flex;align-items:center;height:16px;padding:0 7px;border-radius:99px;font-size:9.5px;font-weight:650;white-space:nowrap}
.sg-line.l-aca{background:#dbeafe;color:#1d4ed8}.sg-line.l-med{background:#ccfbef;color:#0f6f5c}.sg-line.l-vida{background:#ede9fe;color:#6d28d9}
.sg-stage.st-new{background:#f3f4f6;color:var(--sg-g600)}.sg-stage.st-con{background:#e0f2fe;color:#0369a1}
.sg-stage.st-quo{background:#fef3c7;color:#b45309}.sg-stage.st-pay{background:#ffedd5;color:#c2410c}
/* semáforo: score con anillo de calor, canal arriba a la izquierda y punto del tiempo en cola abajo a la derecha */
.sg-sig{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 2px #2dd4bf}
.sg-sig b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#14b8a6;color:#fff;font-size:9.5px;font-weight:700}
.sg-sig.h-hi{box-shadow:0 0 0 2px #f87171}.sg-sig.h-hi b{background:#ef4444}
.sg-sig.h-mid{box-shadow:0 0 0 2px #fbbf24}.sg-sig.h-mid b{background:#f59e0b}
.sg-sig-ch{position:absolute;left:-3px;top:-3px;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#fff;color:var(--sg-g600);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.sg-sig-ch svg{width:8px;height:8px}
.sg-sig-dot{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;border:2px solid #fff;background:#22c55e}
.sg-sig-dot.d-amber{background:#f59e0b}.sg-sig-dot.d-red{background:#ef4444}
.sg-note{display:-webkit-box;margin:0;overflow:hidden;font-size:10.8px;line-height:1.35;color:var(--sg-g500);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sg-chips{display:flex;gap:4px}
.sg-chip{padding:1px 6px;border-radius:6px;font-size:9.5px;font-weight:700}
.sg-chip.c-cotización{background:#effcf6;color:var(--sg-teal)}.sg-chip.c-nsf{background:#fef2f2;color:#dc2626}.sg-chip.c-soa{background:#f5f3ff;color:#7c3aed}
.sg-lead-f{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-top:6px;border-top:1px solid #f6f0ea}
.sg-sla{font-size:10.5px;font-weight:600;color:var(--sg-g400);font-variant-numeric:tabular-nums}
.sg-sla.u-urgent{color:#ef4444}.sg-sla.u-soon{color:#d97706}
.sg-who{display:inline-flex;align-items:center;gap:3px;max-width:60%;height:18px;padding:0 7px;border-radius:99px;background:#f3f4f6;font-size:9.5px;font-weight:650;color:var(--sg-g600);white-space:nowrap}
.sg-who svg{width:11px;height:11px;color:var(--sg-p500)}
.sg-temp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.sg-temp span{height:16px;border-radius:99px;font-size:9px;font-weight:700;line-height:16px;text-align:center;text-transform:uppercase;letter-spacing:.02em}
.sg-temp .t-cold{background:#eff6ff;color:#2563eb}.sg-temp .t-warm{background:#fffbeb;color:#b45309}.sg-temp .t-hot{background:#fef2f2;color:#dc2626}
.sg-temp .t-cold.on{background:#2563eb;color:#fff}.sg-temp .t-warm.on{background:#f59e0b;color:#fff}.sg-temp .t-hot.on{background:#dc2626;color:#fff}
/* con el teléfono a la vista (paso 1), las bandas le dejan espacio para no quedar tapadas */
@media (min-width:761px){
  .sg-bands{transition:padding-right .5s var(--ease)}
  .dx-win:has(.dx-phone:not(.is-off)) .sg-bands{padding-right:252px}
  .dx-win:has(.dx-phone:not(.is-off)) .sg-hint{display:none}
}

/* 2 a 4 · Foco del contacto: chat protagonista y ficha con pestañas */
.dx-screen[data-screen="ficha"],.dx-screen[data-screen="cotizacion"]{grid-template-rows:auto minmax(0,1fr);align-content:stretch;gap:10px}
.sg-fhead{display:flex;align-items:center;gap:12px;min-width:0}
.sg-back{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:99px;background:#fff;border:1px solid #e5e7eb;font-size:11px;font-weight:650;color:#374151;white-space:nowrap}
.sg-back svg{width:13px;height:13px;transform:scaleX(-1)}
.sg-fname{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.sg-fname b{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--sg-g900)}
.sg-fname > span{overflow:hidden;font-size:11px;color:var(--sg-g500);white-space:nowrap;text-overflow:ellipsis}
.sg-fname .sg-sw{display:inline-grid;vertical-align:bottom}
.sg-focus{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);min-height:0;border-radius:22px;background:#fff;border:1px solid var(--sg-cream);box-shadow:0 22px 44px -30px rgba(76,29,12,.35);overflow:hidden}
.sg-focus.is-wide{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr)}
.sg-fchat{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid #f3f4f6}
.sg-fch{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid #f3f4f6}
.sg-fch .sp{flex:1}
.sg-stsel{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 8px;border-radius:99px;background:#e0f2fe;color:#0369a1;font-size:10px;font-weight:650;white-space:nowrap}
.sg-stsel svg{width:11px;height:11px}
.sg-hum{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--sg-g500);white-space:nowrap}
.sg-hum svg{width:12px;height:12px}
.sg-thread{flex:1;min-height:0;justify-content:flex-end;border-radius:0;padding:10px 12px}
.sg-thread .dx-msg{max-width:80%}
.sg-compose{display:flex;align-items:center;gap:8px;margin:8px 10px 10px;padding:6px 6px 6px 12px;border-radius:16px;background:#fdfaf6;border:1px solid var(--sg-cream);font-size:11.5px;color:var(--sg-g400)}
.sg-compose span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sg-compose i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sg-grad);color:#fff}
.sg-compose i svg{width:13px;height:13px}
.sg-fpanel{display:flex;flex-direction:column;min-width:0;min-height:0}
.sg-fp-h{padding:10px 12px 9px;border-bottom:1px solid #f3f4f6}
.sg-fp-h > p{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 7px}
.sg-fp-h > p b{font-size:12.3px;font-weight:650;color:var(--sg-g900)}
.sg-fp-h > p small{font-size:10px;color:var(--sg-g500)}
.sg-fp-acts{display:flex;flex-wrap:wrap;gap:5px}
.sg-fp-acts .dx-btn{height:27px;padding:0 10px;font-size:11px}
.sg-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:3px 6px;border-bottom:1px solid #f3f4f6}
.sg-tabs > span{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;height:24px;font-size:10px;font-weight:550;color:var(--sg-g400)}
.sg-tabs > span > span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sg-tabs svg{width:12px;height:12px;flex:none}
.sg-tabs > span.on{color:var(--sg-p600)}
.sg-tabs > span.on::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:2px;border-radius:2px;background:var(--sg-p500)}
.sg-fp-b{display:grid;gap:9px;align-content:start;min-height:0;padding:10px 12px;overflow:hidden}
.sg-ctas{display:flex;align-items:center;gap:6px}
.sg-cta{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:99px;border:1px solid var(--sg-p200);background:var(--sg-p50);font-size:10px;font-weight:650;color:var(--sg-p700)}
.sg-cta svg{width:11px;height:11px}
.sg-how{display:inline-flex;align-items:center;gap:3px;margin-left:auto;font-size:9.5px;color:var(--sg-g400)}
.sg-how svg{width:11px;height:11px}
.sg-summ{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border-radius:12px;overflow:hidden;background:#f3f4f6;border:1px solid #f3f4f6}
.sg-summ > div{display:grid;grid-template-columns:minmax(0,1fr);padding:5px 8px;background:#fff;min-width:0}
.sg-summ > div > span{font-size:9px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--sg-g400)}
.sg-summ b{overflow:hidden;font-size:11.5px;font-weight:650;color:var(--sg-g900);white-space:nowrap;text-overflow:ellipsis}
.sg-summ b b{font-size:inherit}
.sg-pre{padding:9px 10px;border-radius:12px;border:1px solid var(--sg-p100);background:#fff}
.sg-pre-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;margin:0 0 7px}
.sg-pre-h b{font-size:11.5px;font-weight:650;color:var(--sg-g900)}
.sg-consent{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:600;color:var(--dx-ok)}
.sg-consent svg{width:10px;height:10px}
.sg-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.sg-f{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;min-width:0;padding:5px 8px;border-radius:9px;background:#fdfaf6;border:1px solid transparent;opacity:.4;transition:opacity .4s,background-color .4s,border-color .4s}
.sg-f:last-child{grid-column:1/-1}
.sg-f span{font-size:9.5px;color:var(--sg-g500)}
.sg-f b{overflow:hidden;font-size:11.5px;font-weight:650;color:var(--sg-g900);white-space:nowrap;text-overflow:ellipsis}
.sg-f b,.sg-f em{visibility:hidden}
.sg-f em{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:9px;color:var(--sg-p700)}
.sg-f em svg{width:9px;height:9px}
.sg-f em.by-call{color:#374151}
.sg-f.is-in{opacity:1;background:#fff;border-color:var(--sg-p200)}
.sg-f.is-in b,.sg-f.is-in em{visibility:visible}
.sg-f[data-src="call"].is-in{border-color:#d1d5db}
.sg-elio{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border-radius:14px;border:1px solid var(--sg-p200);background:rgba(255,255,255,.95);box-shadow:0 10px 22px -16px rgba(229,97,45,.55)}
.sg-elio p{margin:0;font-size:11px;line-height:1.38;color:#374151}
.sg-elio .sg-elio-h{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-p500)}
.sg-calllog{display:flex;align-items:center;gap:7px;margin:0;padding:6px 9px;border-radius:10px;background:#fdfaf6;font-size:10.5px;color:var(--sg-g600)}
.sg-calllog > svg{width:13px;height:13px;flex:none;color:var(--sg-p500)}
.sg-calllog > span{flex:1;min-width:0}
.sg-calllog b{color:var(--sg-g900)}
.sg-calllog.is-in{animation:dxNew .6s var(--ease) both}

/* Teléfono Elio: lo usa el asesor desde el navegador (sin IA que hable ni grabación) */
.sg-soft{position:absolute;left:128px;bottom:22px;z-index:5;width:262px;border-radius:24px;background:#fff;box-shadow:0 30px 60px -24px rgba(17,24,39,.45),0 0 0 1px rgba(17,24,39,.06);animation:sgSoft .5s var(--spring) both}
@keyframes sgSoft{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.sg-soft-t{display:flex;align-items:center;justify-content:space-between;margin:0;padding:10px 14px 0;font-size:12.5px;color:var(--sg-g900)}
.sg-soft-t svg{width:14px;height:14px;color:var(--sg-g400)}
.sg-soft-in{display:grid;justify-items:center;margin:8px 10px 10px;padding:12px 12px 10px;border-radius:20px;border:1px solid #e5e7eb;background:linear-gradient(180deg,#fff,rgba(255,245,240,.6) 55%,#f9fafb)}
.sg-soft-st{display:flex;align-items:center;gap:6px;margin:0;font-size:9px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--sg-g400)}
.sg-soft-st i{width:7px;height:7px;border-radius:50%;background:#14b8a6}
.sg-soft-av{display:grid;place-items:center;width:52px;height:52px;margin-top:10px;border-radius:50%;background:linear-gradient(135deg,var(--sg-p400),var(--sg-p500));color:#fff;font-size:20px;font-weight:700;box-shadow:0 8px 16px -8px rgba(229,97,45,.7);animation:sgRing 1.6s ease-out infinite}
@keyframes sgRing{0%{box-shadow:0 0 0 0 rgba(229,97,45,.45)}100%{box-shadow:0 0 0 12px rgba(229,97,45,0)}}
.sg-soft-n{margin-top:8px;font-size:14px;font-weight:650;color:var(--sg-g900)}
.sg-soft-p{font-size:11.5px;color:var(--sg-g500)}
.sg-soft-s{display:grid;justify-items:center;gap:1px;min-height:34px;margin:8px 0 0;font-size:11px;font-weight:550;color:var(--sg-g600)}
.sg-soft-s b{font-size:13px;font-weight:650;color:var(--sg-p600)}
.sg-soft-b{display:flex;align-items:center;gap:14px;margin-top:8px}
.sg-soft-mic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid #e5e7eb;color:#374151}
.sg-soft-mic svg{width:16px;height:16px}
.sg-soft-hang{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#dc2626;color:#fff;box-shadow:0 10px 18px -10px rgba(220,38,38,.9)}
.sg-soft-hang svg{width:20px;height:20px}
.sg-soft-cb{margin-top:9px;padding:4px 10px;border-radius:99px;background:var(--sg-p50);font-size:10px;font-weight:650;color:var(--sg-p700)}

/* En escritorio cada pantalla ocupa justo el alto de la ventana (menos el relleno de .dx-main): lo que no cabe se recorta
   dentro de su panel y la pantalla no se desplaza */
@media (min-width:761px){
  html.js-motion .dx[data-demo="seguros"] .dx-screen.is-on{height:calc(var(--dx-h,560px) - 34px)}
}

/* 4 · Cotización: comparar planes (prima, subsidio, neta estimada y beneficios) y enviar */
.sg-cmp{padding:10px 11px;border-radius:14px;border:1px solid #f3f4f6;background:#fff}
.sg-cmp-h{display:flex;align-items:center;gap:8px}
.sg-cmp-h > svg{width:15px;height:15px;color:var(--sg-p500);flex:none}
.sg-cmp-h p{display:grid;margin:0}
.sg-cmp-h b{font-size:9.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-g400)}
.sg-cmp-h span{font-size:10.5px;color:var(--sg-g500)}
.sg-qchips{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0 6px}
.sg-qchips span{padding:2px 8px;border-radius:99px;font-size:10px;font-weight:650;background:var(--sg-p500);color:#fff}
.sg-qt{display:grid}
.sg-qr{display:grid;grid-template-columns:72px repeat(3,minmax(0,1fr));gap:6px;align-items:start;padding:5px 0;border-bottom:1px solid #f9fafb;font-size:11px;color:#374151;transition:opacity .35s,transform .45s var(--spring)}
.sg-qr:last-child{border-bottom:0}
.sg-ql{font-weight:550;color:var(--sg-g500)}
.sg-qr > b{font-weight:550;font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-qr.is-net > b{font-weight:700;color:var(--sg-teal)}
.sg-qr ul{display:grid;gap:1px;margin:0;padding-left:12px;font-size:10.3px;line-height:1.3}
.sg-qhead{border-bottom-color:#f3f4f6}
.sg-qhead .sg-ql{font-size:9.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-g400)}
.sg-qh{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;min-width:0;padding:4px 6px;margin:-4px -6px 0;border-radius:10px;transition:background-color .35s,box-shadow .35s}
.sg-qh b{font-size:10.8px;font-weight:650;line-height:1.2;color:#1f2937;overflow-wrap:anywhere}
.sg-qh > span{font-size:9.5px;color:var(--sg-g400);overflow-wrap:anywhere}
.sg-qh.is-pick{background:var(--sg-p50);box-shadow:inset 0 0 0 1.5px var(--sg-p300)}
.sg-qh.is-pick b{color:var(--sg-p600)}
.sg-pick{display:inline-flex;align-items:center;gap:3px;justify-self:start;margin-top:2px;padding:1px 6px;border-radius:99px;background:#1f2937;color:#fff;font-style:normal;font-size:9px;font-weight:650;white-space:nowrap;animation:sgPop .45s var(--spring) both}
.sg-pick svg{width:9px;height:9px}
@keyframes sgPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
html.js-motion .sg-qh:not(.is-in),html.js-motion .sg-qr[data-qr]:not(.is-in){opacity:0;transform:translateY(6px)}
.sg-fine{margin:6px 0 0;font-size:9.8px;line-height:1.35;color:var(--sg-g400)}
.sg-send{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.sg-send-n{display:inline-flex;align-items:center;gap:4px;min-width:0;font-size:10.5px;color:var(--sg-g500)}
.sg-send-n svg{width:12px;height:12px;flex:none}
/* «Tu turno» a la derecha del botón: no tapa el comparador */
.sg-send .dx-hint::after{left:calc(100% + 10px);top:50%;bottom:auto;transform:translateY(-50%)}
.sg-sent{display:flex;align-items:center;gap:6px;flex:1 1 100%;margin:0;font-size:11px;font-weight:650;color:var(--dx-ok)}
.sg-sent svg{width:15px;height:15px}
.sg-file{display:flex;align-items:center;gap:8px;max-width:100%;margin:-2px -4px 6px;padding:8px 10px;border-radius:7px;background:rgba(17,27,33,.06)}
.sg-file > svg{width:26px;height:26px;padding:5px;border-radius:6px;background:var(--dx-bad);color:#fff;flex:none}
.sg-file > span{display:grid;min-width:0}
.sg-file b{font-size:12px;font-weight:600;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-msg .sg-file small{margin:0;font-size:10px;text-align:left}

/* 5 · Formalización: encabezado de marca y kanban por estado de la aseguradora */
.dx-screen[data-screen="formalizacion"]{grid-template-rows:auto minmax(0,1fr);align-content:stretch;gap:12px}
.sg-fhero{align-items:center}
.sg-path{margin:4px 0 0;font-size:10.5px;color:var(--sg-g500)}
.sg-path b{font-weight:650;color:#374151}
.sg-fk{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:9px;min-height:0;overflow-x:auto;scrollbar-width:none}
.sg-fk::-webkit-scrollbar{display:none}
.sg-fcol{display:flex;flex-direction:column;min-width:0;min-height:0;border-radius:20px;border:1px solid #e5e7eb;background:rgba(249,250,251,.85);overflow:hidden}
.sg-fcol header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 9px;border-bottom:1px solid #f3f4f6}
.sg-fn{padding:1px 7px;border-radius:99px;background:#fff;font-size:10.5px;font-weight:650;color:var(--sg-g500)}
.sg-fcards{display:grid;gap:7px;align-content:start;padding:7px}
.sg-sub-c{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;padding:8px 9px;border-radius:14px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 2px rgba(17,24,39,.05);font-size:10.5px}
.sg-sub-c b{overflow:hidden;font-size:11.8px;font-weight:650;color:var(--sg-g900);white-space:nowrap;text-overflow:ellipsis}
.sg-sub-c > span{overflow:hidden;color:var(--sg-g500);white-space:nowrap;text-overflow:ellipsis}
.sg-sub-c small{font-size:9.5px;color:var(--sg-g400)}
.sg-pol{margin:3px 0 1px;font-size:10.3px;font-weight:600;color:var(--sg-p600)}
.sg-sub-c.is-hot{border-color:var(--sg-p300);box-shadow:0 0 0 3px rgba(229,97,45,.14)}
.sg-sub-c.is-done{border-color:color-mix(in srgb,var(--dx-ok) 35%,transparent);box-shadow:0 0 0 3px rgba(19,122,70,.12)}
.sg-pol.is-in{animation:sgPop .45s var(--spring) both}

/* 6 · Hoy: saludo con el orbe, indicadores del dueño y lo que depende de ti */
.sg-hhero{gap:14px;padding:14px 18px}
.sg-hhero > .sg-orb{width:42px;height:42px;margin-top:4px}
.sg-hhero > .sg-orb::after{inset:11px}
.sg-date{margin:2px 0 0;font-size:11px;color:var(--sg-g500)}
.sg-hi{margin-top:3px;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--sg-g900)}
.sg-hi span{background:linear-gradient(100deg,#e5612d,#f40655);-webkit-background-clip:text;background-clip:text;color:transparent}
.sg-lede{margin:6px 0 0;max-width:560px;font-size:12.5px;line-height:1.45;color:var(--sg-g600)}
.sg-lede b{font-weight:650;color:var(--sg-g900)}
.sg-hchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sg-hchips > span{display:grid;padding:6px 12px;border-radius:14px;border:1px solid var(--sg-p100);background:rgba(255,245,240,.7)}
.sg-hchips small{font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-p600)}
.sg-hchips b{font-size:17px;font-weight:700;color:var(--sg-g900)}
.sg-hchips .c-com{border-color:#c6f7e2;background:rgba(239,252,246,.75)}
.sg-hchips .c-com small{color:var(--sg-teal)}
.sg-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.sg-kpi{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;min-width:0;padding:9px 11px;border-radius:16px;background:var(--sg-card);border:1px solid var(--sg-edge);box-shadow:0 1px 2px rgba(76,29,12,.05),0 14px 30px -24px rgba(76,29,12,.25)}
.sg-kpi > span{overflow:hidden;font-size:8.8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sg-g400);white-space:nowrap;text-overflow:ellipsis}
.sg-kpi b{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--sg-g900)}
.sg-kpi em{overflow:hidden;font-style:normal;font-size:10.5px;color:#0f8a68;white-space:nowrap;text-overflow:ellipsis}
.sg-kpi em.warn{color:#d97706}.sg-kpi em.sg-mut{color:var(--sg-g400)}
.sg-kpi em.is-in{animation:sgPop .45s var(--spring) both}
.sg-trow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);gap:9px}
.sg-tile{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:3px;min-width:0;padding:12px 14px;border-radius:20px;background:var(--sg-card);border:1px solid var(--sg-edge);overflow:hidden}
.sg-tile.t-red{border-color:#fee2e2;background:linear-gradient(135deg,#fef2f2,#fff 55%,rgba(254,242,242,.5))}
.sg-tic{display:grid;place-items:center;width:28px;height:28px;margin-bottom:5px;border-radius:10px;background:#fee2e2;color:#dc2626}
.sg-tic svg{width:15px;height:15px}
.sg-tic.ok{background:#f0fdf4;color:#16a34a}
.sg-tile > b{font-size:14px;font-weight:700;line-height:1.2;color:var(--sg-g900)}
.sg-tile > p{margin:0;font-size:11px;color:var(--sg-g600)}
.sg-go{display:inline-flex;align-items:center;gap:3px;margin-top:5px;font-size:11px;font-weight:650;color:var(--sg-p600)}
.t-red .sg-go{color:#dc2626}
.sg-go svg{width:12px;height:12px}
.sg-nh{display:flex;align-items:center;gap:7px;margin:0 0 6px}
.sg-nh b{font-size:12.5px;font-weight:700;color:var(--sg-g900)}
.sg-feed{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.sg-feed li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:start;gap:7px;font-size:10.8px;line-height:1.35;color:#374151}
.sg-feed p{margin:0}
.sg-feed small{padding-top:1px;font-size:9.5px;font-weight:650;color:var(--sg-g400);white-space:nowrap}
.sg-fi{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:var(--sg-p50);color:var(--sg-p500)}
.sg-fi svg{width:11px;height:11px}
.sg-feed li.is-in{animation:dxNew .6s var(--ease) both}

.sg-exec{padding:12px 14px;border-radius:20px;background:var(--sg-card);border:1px solid var(--sg-edge)}
.sg-exec-h{display:block;margin-top:1px;font-size:13.5px;font-weight:700;color:var(--sg-g900)}
.sg-exec-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.sg-exec-g > div{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:1px;min-width:0;padding:9px 11px;border-radius:14px;border:1px solid #f3f4f6;background:rgba(249,250,251,.8)}
.sg-ex-t{display:flex;align-items:center;gap:5px;margin:0;font-size:9.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-p600)}
.sg-ex-t svg{width:12px;height:12px}
.sg-ex-t.t-teal{color:#0f8a68}.sg-ex-t.t-amber{color:#d97706}
.sg-exec-g > div > b{margin-top:3px;font-size:19px;font-weight:700;color:var(--sg-g900)}
.sg-exec-g > div > span{font-size:10.8px;color:var(--sg-g500)}
.sg-exec-g ul{display:flex;flex-wrap:wrap;gap:2px 10px;margin:5px 0 0;padding:0;list-style:none;font-size:10.3px;color:var(--sg-g600)}
.sg-exec-g li{display:flex;gap:4px}
.sg-exec-g li b{font-weight:650}

/* Celular: el dock baja como en la app (sin rótulos de grupo y con desplazamiento lateral); la pantalla se desplaza sola */
@media (max-width:760px){
  .dx[data-demo="seguros"] .dx-app{grid-template-columns:1fr}
  .dx[data-demo="seguros"] .dx-side{justify-content:flex-start;gap:2px;overflow:hidden;border-radius:18px}
  .dx[data-demo="seguros"] .dx-grp{display:none}
  .dx[data-demo="seguros"] .dx-nav{flex:none;width:58px;padding:5px 2px}
  .sg-h1{font-size:18px}.sg-h1 svg{width:17px;height:17px}
  .dx-screen[data-screen="ventas"]{grid-template-rows:none;align-content:start}
  .sg-asst{flex-wrap:wrap}
  .sg-filt{margin-left:0}
  .sg-bands{grid-template-columns:1fr}
  .sg-band::after{display:none}
  /* teléfono más bajo: la tarjeta nueva de «Urge intervención» queda entera a la vista */
  .dx-phone.sg-phone{height:290px}
  .dx-screen[data-screen="ficha"],.dx-screen[data-screen="cotizacion"]{grid-template-rows:none;align-content:start}
  .sg-focus,.sg-focus.is-wide{grid-template-columns:1fr}
  .sg-fchat{border-right:0;border-bottom:1px solid #f3f4f6}
  .sg-thread{height:178px;flex:none}
  .sg-compose{display:none}
  .sg-fp-b{overflow:visible}
  .sg-summ{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-soft{left:12px;right:12px;bottom:76px;width:auto;border-radius:20px}
  .sg-soft-t,.sg-soft-cb,.sg-soft-p{display:none}
  .sg-soft-in{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;justify-items:start;gap:2px 10px;margin:8px;padding:9px 10px}
  .sg-soft-st{grid-column:1/-1}
  .sg-soft-av{grid-row:2/4;width:38px;height:38px;margin:0;font-size:15px}
  .sg-soft-n{margin:0;font-size:13px}
  .sg-soft-s{grid-column:2;justify-items:start;min-height:0;margin:0}
  .sg-soft-b{grid-column:3;grid-row:2/4;margin:0;gap:8px}
  .sg-soft-mic{width:32px;height:32px}.sg-soft-hang{width:40px;height:40px}
  .sg-qr{grid-template-columns:58px repeat(3,minmax(0,1fr));gap:5px;font-size:10.3px}
  .sg-qh{padding:3px 4px;margin:-3px -4px 0}
  .sg-qh b{font-size:10px}
  .sg-qr > b{font-size:10px}
  .sg-send .dx-hint::after{left:50%;top:calc(100% + 8px);bottom:auto;transform:translateX(-50%)}
  .dx-screen[data-screen="formalizacion"]{grid-template-rows:auto auto;align-content:start}
  .sg-fk{grid-auto-columns:minmax(178px,1fr)}
  .sg-path{display:none}
  .sg-hhero > .sg-orb{display:none}
  .sg-hi{font-size:21px}
  .sg-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .sg-trow{grid-template-columns:1fr}
  .sg-exec-g{grid-template-columns:1fr}
}