/* ============================================================
   FACTURANOVO IA — estilos de la sección/chat
   Reutiliza tokens.css, base.css, components.css. No pisa clases
   globales: todo va prefijado con .ia- para aislar el módulo.
   ============================================================ */

.ia-hero{padding-top:clamp(120px,16vw,168px);padding-bottom:20px;}
.ia-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:var(--r-pill);
  background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  color:var(--cyan-400);font-size:.78rem;font-weight:600;letter-spacing:.02em;
  margin-bottom:18px;
}
.ia-badge svg{width:14px;height:14px;}
.ia-badge .dot{width:7px;height:7px;border-radius:50%;background:#4ce07a;box-shadow:0 0 8px #4ce07a;flex-shrink:0;}
.ia-badge.is-demo .dot{background:#ffb84c;box-shadow:0 0 8px #ffb84c;}

/* ---------- Chat shell ---------- */
.ia-chat-wrap{
  max-width:760px;margin:36px auto 0;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.ia-chat-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--glass-border);
  background:rgba(255,255,255,.03);
}
.ia-chat-avatar{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:var(--font-display);font-weight:700;
}
.ia-chat-head-info{flex:1;min-width:0;}
.ia-chat-head-info h3{font-size:.98rem;color:#fff;margin:0;font-family:var(--font-display);}
.ia-status{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--ink-400);margin-top:2px;}
.ia-status .dot{width:7px;height:7px;border-radius:50%;background:#4ce07a;box-shadow:0 0 6px #4ce07a;}
.ia-status.is-demo .dot{background:#ffb84c;box-shadow:0 0 6px #ffb84c;}
.ia-chat-clear{
  border:1px solid var(--glass-border);background:transparent;color:var(--ink-300);
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background var(--dur-fast),color var(--dur-fast);
}
.ia-chat-clear:hover{background:rgba(255,255,255,.08);color:#fff;}
.ia-chat-clear svg{width:16px;height:16px;}

.ia-chat-body{
  height:min(58vh,520px);min-height:340px;
  overflow-y:auto;
  padding:20px;
  display:flex;flex-direction:column;gap:14px;
  scroll-behavior:smooth;
}
.ia-msg{max-width:84%;display:flex;flex-direction:column;gap:6px;animation:iaFadeIn .25s var(--ease-out);}
@keyframes iaFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.ia-msg.bot{align-self:flex-start;}
.ia-msg.user{align-self:flex-end;align-items:flex-end;}
.ia-bubble{
  padding:12px 16px;border-radius:16px;font-size:.92rem;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;
}
.ia-msg.bot .ia-bubble{
  background:rgba(255,255,255,.06);border:1px solid var(--glass-border);color:var(--ink-100);
  border-bottom-left-radius:4px;
}
.ia-msg.user .ia-bubble{
  background:var(--grad-brand);color:#fff;border-bottom-right-radius:4px;
}
.ia-msg-time{font-size:.68rem;color:var(--ink-500);padding:0 4px;}

.ia-typing{display:flex;gap:4px;align-items:center;padding:12px 16px;}
.ia-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-400);animation:iaBounce 1.1s infinite ease-in-out;}
.ia-typing span:nth-child(2){animation-delay:.15s;}
.ia-typing span:nth-child(3){animation-delay:.3s;}
@keyframes iaBounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}

/* Quick reply chips */
.ia-quick{display:flex;flex-wrap:wrap;gap:8px;padding:2px 20px 16px;}
.ia-quick-btn{
  border:1px solid var(--glass-border);background:rgba(255,255,255,.04);
  color:var(--ink-200,#dfe4f5);padding:9px 14px;border-radius:var(--r-pill);
  font-size:.8rem;font-weight:500;transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.ia-quick-btn:hover{background:rgba(255,255,255,.1);border-color:var(--blue-400);transform:translateY(-1px);}

/* Recommendation card inside chat */
.ia-reco{
  border:1px solid var(--glass-border);background:rgba(255,255,255,.05);
  border-radius:var(--r-md);padding:14px 16px;margin-top:2px;max-width:84%;align-self:flex-start;
}
.ia-reco strong{color:#fff;display:block;margin-bottom:6px;font-size:.88rem;}
.ia-reco p{font-size:.85rem;color:var(--ink-300);margin:0 0 10px;}
.ia-reco-actions{display:flex;flex-wrap:wrap;gap:8px;}
.ia-reco-actions .btn{padding:8px 14px;font-size:.78rem;}

/* Input bar */
.ia-chat-input{
  display:flex;align-items:flex-end;gap:10px;
  padding:14px 16px;border-top:1px solid var(--glass-border);
  background:rgba(255,255,255,.03);
}
.ia-chat-input textarea{
  flex:1;resize:none;background:rgba(255,255,255,.05);
  border:1px solid var(--glass-border);border-radius:14px;
  color:#fff;padding:11px 14px;font-family:var(--font-body);font-size:.9rem;
  line-height:1.4;max-height:120px;min-height:44px;
}
.ia-chat-input textarea::placeholder{color:var(--ink-500);}
.ia-chat-input textarea:focus{outline:none;border-color:var(--blue-400);}
.ia-send-btn{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:var(--grad-brand);display:flex;align-items:center;justify-content:center;color:#fff;
  transition:transform var(--dur-fast),opacity var(--dur-fast);
}
.ia-send-btn svg{width:19px;height:19px;}
.ia-send-btn:hover{transform:translateY(-2px);}
.ia-send-btn:disabled{opacity:.5;transform:none;cursor:not-allowed;}
.ia-char-count{font-size:.68rem;color:var(--ink-500);text-align:right;padding:0 16px 10px;}

/* Error / offline notice */
.ia-error-box{
  margin:0 20px 16px;padding:12px 14px;border-radius:12px;
  background:rgba(255,180,76,.1);border:1px solid rgba(255,180,76,.3);
  font-size:.82rem;color:#ffdba3;display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;
}
.ia-error-box a{flex-shrink:0;}

/* Mobile */
@media (max-width:640px){
  .ia-chat-wrap{margin:24px -4px 0;border-radius:var(--r-lg);}
  .ia-chat-body{height:56vh;padding:16px;}
  .ia-msg{max-width:92%;}
  .ia-reco{max-width:92%;}
  .ia-quick{padding:2px 16px 14px;}
  .ia-chat-input{padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));}
}

/* Solutions grid on the service page */
.ia-sol-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--grad-brand);color:#fff;font-size:1.4rem;margin-bottom:14px;
}