/* ==========================================================
   DistriPRONTO · Asistente Comercial Premium
   ========================================================== */

/* Todo lo demás queda encapsulado en #dp-assistant. */
#dp-assistant{
  --dp-bg:#ffffff;
  --dp-surface:#f6f8fb;
  --dp-border:#e5e9f0;
  --dp-text:#101828;
  --dp-muted:#667085;
  --dp-accent:#0b63f6;
  --dp-accent-2:#00a6ff;
  --dp-success:#16a34a;
  --dp-radius:22px;

  width:min(780px,calc(100vw - 32px));
  max-height:min(820px,90vh);
  overflow:auto;
  background:var(--dp-bg);
  color:var(--dp-text);
  border:1px solid rgba(16,24,40,.08);
  border-radius:var(--dp-radius);
  box-shadow:0 28px 80px rgba(16,24,40,.24);
  position:relative;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-align:left;
  overscroll-behavior:contain;
  -webkit-font-smoothing:antialiased;
}

#dp-assistant *,
#dp-assistant *::before,
#dp-assistant *::after{box-sizing:border-box}

#dp-assistant button,
#dp-assistant input,
#dp-assistant select{font:inherit}

#dp-assistant .dp-top{
  padding:26px 28px 18px;
  border-bottom:1px solid var(--dp-border);
  background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
  position:sticky;
  top:0;
  z-index:3;
}

#dp-assistant .dp-brandrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-right:34px;
}

#dp-assistant .dp-brand{display:flex;align-items:center;gap:12px}

#dp-assistant .dp-mark{
  width:44px;height:44px;flex:0 0 44px;
  border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--dp-accent),var(--dp-accent-2));
  color:#fff;
  font-weight:900;
  font-size:19px;
  letter-spacing:-1px;
  box-shadow:0 8px 24px rgba(11,99,246,.25);
}

#dp-assistant .dp-brand strong{
  display:block;
  font-size:17px;
  line-height:1.2;
  letter-spacing:-.2px;
}

#dp-assistant .dp-brand small{
  display:block;
  color:var(--dp-muted);
  font-size:12px;
  line-height:1.35;
  margin-top:2px;
}

#dp-assistant .dp-status{
  font-size:12px;
  color:var(--dp-muted);
  white-space:nowrap;
}

#dp-assistant .dp-status-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:999px;
  background:var(--dp-success);
  margin-right:6px;
}

#dp-assistant .dp-progress{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
}

#dp-assistant .dp-progress span{
  height:4px;
  flex:1;
  border-radius:99px;
  background:#e9eef5;
  transition:.25s ease;
}

#dp-assistant .dp-progress span.active{
  background:linear-gradient(90deg,var(--dp-accent),var(--dp-accent-2));
}

#dp-assistant .dp-body{padding:28px}

#dp-assistant .dp-step{
  display:none;
  animation:dpIn .22s ease;
}

#dp-assistant .dp-step.active{display:block}

@keyframes dpIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

#dp-assistant .dp-eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dp-accent);
  margin-bottom:8px;
}

#dp-assistant h2{
  margin:0;
  color:var(--dp-text);
  font-size:clamp(24px,3.5vw,34px);
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:800;
}

#dp-assistant .dp-lead{
  font-size:15px;
  line-height:1.65;
  color:var(--dp-muted);
  margin:12px 0 22px;
  max-width:650px;
}

#dp-assistant .dp-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

#dp-assistant .dp-card{
  appearance:none;
  width:100%;
  min-height:94px;
  text-align:left;
  cursor:pointer;
  padding:17px;
  border-radius:16px;
  border:1px solid var(--dp-border);
  background:#fff;
  color:var(--dp-text);
  transition:.18s ease;
  display:flex;
  gap:13px;
  align-items:flex-start;
}

#dp-assistant .dp-card-wide{grid-column:1/-1}

#dp-assistant .dp-card:hover,
#dp-assistant .dp-card:focus-visible{
  border-color:rgba(11,99,246,.55);
  box-shadow:0 8px 24px rgba(16,24,40,.08);
  transform:translateY(-1px);
  outline:none;
}

#dp-assistant .dp-icon{
  width:39px;height:39px;flex:0 0 39px;
  border-radius:11px;
  display:grid;place-items:center;
  background:var(--dp-surface);
  color:var(--dp-accent);
  font-size:18px;
  font-weight:800;
}

#dp-assistant .dp-card strong{
  display:block;
  font-size:14px;
  line-height:1.3;
  margin-bottom:4px;
}

#dp-assistant .dp-card small{
  display:block;
  color:var(--dp-muted);
  line-height:1.4;
  font-size:12px;
}

#dp-assistant .dp-stack{display:grid;gap:10px}

#dp-assistant .dp-choice{
  appearance:none;
  width:100%;
  cursor:pointer;
  border:1px solid var(--dp-border);
  background:#fff;
  border-radius:14px;
  padding:15px 16px;
  text-align:left;
  color:inherit;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  transition:.18s ease;
}

#dp-assistant .dp-choice:hover,
#dp-assistant .dp-choice:focus-visible{
  border-color:var(--dp-accent);
  background:#f8fbff;
  outline:none;
}

#dp-assistant .dp-choice strong{font-size:14px}
#dp-assistant .dp-choice small{color:var(--dp-muted)}

#dp-assistant .dp-inputlabel{
  font-weight:700;
  font-size:13px;
  display:block;
  margin:18px 0 7px;
}

#dp-assistant .dp-inputlabel span{
  font-weight:400;
  color:var(--dp-muted);
}

#dp-assistant .dp-input,
#dp-assistant .dp-select{
  width:100%;
  border:1px solid var(--dp-border);
  border-radius:13px;
  background:#fff;
  padding:14px 15px;
  color:var(--dp-text);
  outline:none;
}

#dp-assistant .dp-input:focus,
#dp-assistant .dp-select:focus{
  border-color:var(--dp-accent);
  box-shadow:0 0 0 3px rgba(11,99,246,.10);
}

#dp-assistant .dp-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:22px;
  flex-wrap:wrap;
}

#dp-assistant .dp-btn{
  appearance:none;
  border:0;
  border-radius:13px;
  padding:13px 18px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

#dp-assistant .dp-btn-primary{
  background:var(--dp-accent);
  color:#fff;
  box-shadow:0 8px 22px rgba(11,99,246,.22);
}

#dp-assistant .dp-btn-primary:hover{filter:brightness(.97)}

#dp-assistant .dp-btn-secondary{
  background:var(--dp-surface);
  color:var(--dp-text);
}

#dp-assistant .dp-summary{
  border:1px solid var(--dp-border);
  border-radius:17px;
  background:var(--dp-surface);
  padding:17px;
  margin-top:18px;
}

#dp-assistant .dp-summary-row{
  display:grid;
  grid-template-columns:145px 1fr;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid #e7ebf1;
  font-size:13px;
}

#dp-assistant .dp-summary-row:last-child{border-bottom:0}
#dp-assistant .dp-summary-row span{color:var(--dp-muted)}
#dp-assistant .dp-summary-row strong{overflow-wrap:anywhere}

#dp-assistant .dp-note{
  margin-top:16px;
  padding:12px 14px;
  border-radius:12px;
  background:#f0f9ff;
  color:#344054;
  font-size:12px;
  line-height:1.5;
}

#dp-assistant .dp-footer{
  padding:14px 28px 22px;
  color:var(--dp-muted);
  font-size:11px;
  text-align:center;
}

#dp-assistant .dp-back{margin-bottom:17px}

#dp-assistant .dp-back button,
#dp-assistant .dp-skip{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  color:var(--dp-muted);
  cursor:pointer;
}

#dp-assistant .dp-back button{font-size:12px}

#dp-assistant .dp-skip{
  display:block;
  margin:18px auto 0;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Mobile */
@media (max-width:640px){
  .draggable-container{
    width:100% !important;
    max-width:100% !important;
  }

  #dp-assistant{
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    border-radius:18px;
  }

  #dp-assistant .dp-top{padding:18px 17px 14px}
  #dp-assistant .dp-body{padding:21px 17px}
  #dp-assistant .dp-grid{grid-template-columns:1fr}
  #dp-assistant .dp-card-wide{grid-column:auto}
  #dp-assistant .dp-status{display:none}
  #dp-assistant .dp-summary-row{grid-template-columns:1fr;gap:3px}
  #dp-assistant .dp-actions{display:grid;grid-template-columns:1fr}
  #dp-assistant .dp-btn{width:100%}
  #dp-assistant .dp-brand small{font-size:11px}
}

/* Reduce animations if the visitor requests it. */
@media (prefers-reduced-motion:reduce){
  #dp-assistant *,
  #dp-assistant *::before,
  #dp-assistant *::after{
    scroll-behavior:auto !important;
    animation:none !important;
    transition:none !important;
  }
}