/* Captador de Casos — widget (overlay para sitio en claro) */
#ccl-root{
  --ccl-brand:#2F6FB0;
  --ccl-brand-ink:#1B4E85;
  --ccl-brand-tint:#E7F0FA;
  --ccl-brand-soft:#6BA4D8;
  --ccl-ink:#16233A;
  --ccl-ink-soft:#55647B;
  --ccl-surface:#ffffff;
  --ccl-surface-2:#F5F8FC;
  --ccl-border:#DCE6F1;
  --ccl-wa:#12A150;
  --ccl-wa-ink:#0E8A44;
  --ccl-amber:#9A6206;
  --ccl-amber-tint:#FBEED3;
  --ccl-bot:#EEF3F9;
  --ccl-shadow:0 20px 55px rgba(20,35,58,.24);
  --ccl-shadow-sm:0 8px 22px rgba(20,35,58,.16);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  line-height:1.5;
}
#ccl-root, #ccl-root *{ box-sizing:border-box; }
#ccl-root button{ font-family:inherit; margin:0; }

/* ---- nudge ---- */
#ccl-root .ccl-nudge{
  position:fixed; right:22px; bottom:96px; z-index:2147483000;
  max-width:238px; background:var(--ccl-surface); color:var(--ccl-ink);
  border:1px solid var(--ccl-border); border-radius:16px 16px 4px 16px;
  padding:13px 15px; font-size:14px; box-shadow:var(--ccl-shadow-sm);
  animation:cclPop .4s ease both;
}
#ccl-root.ccl-left .ccl-nudge{ right:auto; left:22px; border-radius:16px 16px 16px 4px; }
#ccl-root .ccl-nudge b{ color:var(--ccl-brand-ink); }
#ccl-root .ccl-nudge-x{
  position:absolute; top:-9px; right:-9px; width:23px; height:23px; border-radius:50%;
  border:1px solid var(--ccl-border); background:var(--ccl-surface); color:var(--ccl-ink-soft);
  cursor:pointer; font-size:12px; line-height:1; display:grid; place-items:center; padding:0;
}

/* ---- launcher ---- */
#ccl-root .ccl-launch{
  position:fixed; right:22px; bottom:22px; z-index:2147483000;
  width:62px; height:62px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(145deg,var(--ccl-brand),var(--ccl-brand-ink)); color:#fff;
  box-shadow:var(--ccl-shadow); display:grid; place-items:center;
}
#ccl-root.ccl-left .ccl-launch{ right:auto; left:22px; }
#ccl-root .ccl-launch svg{ width:29px; height:29px; }
#ccl-root .ccl-launch::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  animation:cclRing 2.4s ease-out infinite;
}
#ccl-root .ccl-launch-dot{
  position:absolute; top:-3px; right:-3px; min-width:22px; height:22px; padding:0 6px;
  background:#e5484d; color:#fff; border-radius:999px; font-size:12px; font-weight:800;
  display:grid; place-items:center; border:2px solid var(--ccl-surface);
}

/* ---- panel ---- */
#ccl-root .ccl-panel{
  position:fixed; right:20px; bottom:20px; z-index:2147483001;
  width:min(374px, calc(100vw - 40px)); height:min(582px, calc(100vh - 40px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--ccl-surface); border:1px solid var(--ccl-border); border-radius:22px;
  box-shadow:var(--ccl-shadow); animation:cclRise .28s cubic-bezier(.2,.8,.2,1) both;
}
#ccl-root.ccl-left .ccl-panel{ right:auto; left:20px; }
#ccl-root .ccl-panel[hidden]{ display:none; }

#ccl-root .ccl-head{
  flex:none; position:relative; padding:15px; color:#fff;
  background:linear-gradient(135deg,var(--ccl-brand),var(--ccl-brand-ink));
  display:flex; align-items:center; gap:12px;
}
#ccl-root .ccl-ava{
  width:42px; height:42px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.18); font-size:22px;
}
#ccl-root .ccl-head-t{ display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0; }
#ccl-root .ccl-head-t strong{ font-size:15.5px; }
#ccl-root .ccl-status{ font-size:12.5px; opacity:.92; display:flex; align-items:center; gap:6px; }
#ccl-root .ccl-status i{ width:8px; height:8px; border-radius:50%; background:#5df08a; }
#ccl-root .ccl-close{
  flex:none; width:32px; height:32px; border-radius:9px; border:0; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; font-size:16px; line-height:1;
}
#ccl-root .ccl-close:hover{ background:rgba(255,255,255,.28); }
#ccl-root .ccl-progress{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(255,255,255,.2); }
#ccl-root .ccl-progress i{ display:block; height:100%; width:0; background:#fff; transition:width .45s ease; }

#ccl-root .ccl-body{
  flex:1; overflow-y:auto; padding:18px 15px 10px;
  display:flex; flex-direction:column; gap:11px; background:var(--ccl-surface-2);
}
#ccl-root .ccl-row{ display:flex; animation:cclFade .32s ease both; }
#ccl-root .ccl-row.bot{ justify-content:flex-start; }
#ccl-root .ccl-row.user{ justify-content:flex-end; }
#ccl-root .ccl-msg{ max-width:82%; padding:11px 14px; font-size:14.3px; border-radius:16px; }
#ccl-root .ccl-row.bot .ccl-msg{ background:var(--ccl-bot); color:var(--ccl-ink); border-bottom-left-radius:5px; }
#ccl-root .ccl-row.user .ccl-msg{ background:var(--ccl-brand); color:#fff; border-bottom-right-radius:5px; }
#ccl-root .ccl-msg b{ font-weight:700; }

#ccl-root .ccl-note{
  align-self:flex-start; max-width:88%; font-size:13px; display:flex; gap:9px;
  background:var(--ccl-amber-tint); color:var(--ccl-amber); border-radius:13px; padding:10px 13px;
  animation:cclFade .32s ease both;
}
#ccl-root .ccl-note svg{ flex:none; width:17px; height:17px; margin-top:1px; }

#ccl-root .ccl-typing{ display:flex; gap:4px; padding:14px 15px; }
#ccl-root .ccl-typing span{ width:7px; height:7px; border-radius:50%; background:var(--ccl-ink-soft); opacity:.5; animation:cclBlink 1.2s infinite; }
#ccl-root .ccl-typing span:nth-child(2){ animation-delay:.2s; }
#ccl-root .ccl-typing span:nth-child(3){ animation-delay:.4s; }

#ccl-root .ccl-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; padding:2px 0 6px; animation:cclFade .3s ease both; }
#ccl-root .ccl-chip{
  border:1px solid var(--ccl-brand-soft); background:var(--ccl-surface); color:var(--ccl-brand-ink);
  border-radius:999px; padding:9px 14px; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background .15s, transform .1s;
}
#ccl-root .ccl-chip:hover{ background:var(--ccl-brand-tint); }
#ccl-root .ccl-chip:active{ transform:scale(.96); }

#ccl-root .ccl-form{
  background:var(--ccl-surface); border:1px solid var(--ccl-border); border-radius:16px;
  padding:14px; display:flex; flex-direction:column; gap:10px; animation:cclFade .3s ease both;
}
#ccl-root .ccl-form label{ font-size:12.5px; font-weight:700; color:var(--ccl-ink-soft); }
#ccl-root .ccl-field{
  width:100%; border:1px solid var(--ccl-border); background:var(--ccl-surface-2); color:var(--ccl-ink);
  border-radius:11px; padding:12px 13px; font-size:15px; font-family:inherit;
}
#ccl-root .ccl-field:focus{ outline:2px solid var(--ccl-brand); outline-offset:1px; border-color:transparent; }
#ccl-root .ccl-consent{ display:flex; gap:9px; align-items:flex-start; font-size:12px; color:var(--ccl-ink-soft); line-height:1.4; }
#ccl-root .ccl-consent input{ margin-top:2px; width:16px; height:16px; accent-color:var(--ccl-brand); }
#ccl-root .ccl-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
#ccl-root .ccl-err{ color:#e5484d; font-size:12.5px; font-weight:600; display:none; }
#ccl-root .ccl-err.show{ display:block; }
#ccl-root .ccl-submit{
  border:0; cursor:pointer; font-weight:700; font-size:15px; color:#fff;
  background:var(--ccl-brand); border-radius:12px; padding:13px; margin-top:2px;
}
#ccl-root .ccl-submit:hover{ background:var(--ccl-brand-ink); }
#ccl-root .ccl-submit[disabled]{ opacity:.6; cursor:default; }

#ccl-root .ccl-wa{
  display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  background:var(--ccl-wa); color:#fff; font-weight:700; font-size:15px;
  border-radius:13px; padding:14px; margin:2px 0 4px; animation:cclFade .3s ease both;
  box-shadow:var(--ccl-shadow-sm);
}
#ccl-root .ccl-wa:hover{ background:var(--ccl-wa-ink); }
#ccl-root .ccl-wa svg{ width:21px; height:21px; }
#ccl-root .ccl-restart{
  background:none; border:0; color:var(--ccl-ink-soft); font-size:12.5px; cursor:pointer;
  text-decoration:underline; align-self:center; padding:6px; margin-top:2px;
}
#ccl-root .ccl-privacy{
  flex:none; text-align:center; font-size:11px; color:var(--ccl-ink-soft);
  padding:7px; background:var(--ccl-surface); border-top:1px solid var(--ccl-border);
}

@media (max-width:480px){
  #ccl-root .ccl-panel{ right:12px; left:12px; bottom:12px; width:auto; height:min(80vh, 640px); }
  #ccl-root .ccl-nudge{ display:none; }
}

@keyframes cclFade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@keyframes cclRise{ from{opacity:0; transform:translateY(22px) scale(.97)} to{opacity:1; transform:none} }
@keyframes cclPop{ from{opacity:0; transform:translateY(8px) scale(.94)} to{opacity:1; transform:none} }
@keyframes cclBlink{ 0%,60%,100%{opacity:.35} 30%{opacity:.9} }
@keyframes cclRing{ 0%{box-shadow:0 0 0 0 rgba(47,111,176,.45)} 70%{box-shadow:0 0 0 16px rgba(47,111,176,0)} 100%{box-shadow:0 0 0 0 rgba(47,111,176,0)} }
@media (prefers-reduced-motion:reduce){ #ccl-root *{ animation:none !important; transition:none !important; } }