/* ============================================================
   DEMO IA FISCAL — STREAMING CHAT
   Usa los tokens de :root del index principal (--o, --bg2, --w, etc.)
   Easing canónico: cubic-bezier(.16,1,.3,1)
   ============================================================ */

.dia-sec{ position:relative; overflow:hidden; }
.dia-sec::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(at 18% 22%, rgba(249,115,22,.08), transparent 55%),
    radial-gradient(at 82% 78%, rgba(154,52,18,.06), transparent 55%);
}
.dia-sec .container{ position:relative; z-index:2; }

/* ============================================================
   BANNER
   ============================================================ */
.dia-banner{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px;
  margin:0 auto 28px;
  background:rgba(249,115,22,.06);
  border:1px solid rgba(249,115,22,.22);
  border-radius:100px;
  font-family:"DM Sans",sans-serif; font-size:13px; font-weight:500;
  color:var(--ob);
  position:relative; left:50%; transform:translateX(-50%);
}
.dia-banner .dia-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--o);
  box-shadow:0 0 0 0 rgba(249,115,22,.55);
  animation:diaDot 1.8s ease-out infinite;
}
@keyframes diaDot{
  0%{ box-shadow:0 0 0 0 rgba(249,115,22,.55); }
  70%{ box-shadow:0 0 0 14px rgba(249,115,22,0); }
  100%{ box-shadow:0 0 0 0 rgba(249,115,22,0); }
}

/* ============================================================
   GRID PRINCIPAL
   ============================================================ */
.dia-shell{
  display:grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap:24px;
  margin-top:48px;
  align-items:stretch;
}
.dia-shell > *{ min-width:0; max-width:100%; }

/* ============================================================
   PANEL CHAT
   ============================================================ */
.dia-chat{
  background:linear-gradient(180deg, rgba(15,15,26,.85), rgba(10,10,18,.85));
  border:1px solid var(--bd2);
  border-radius:24px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow);
  min-height:560px;
  min-width:0;
}
.dia-chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--bd);
  background:rgba(255,255,255,.02);
}
.dia-chat-id{ display:flex; align-items:center; gap:12px; }
.dia-avatar{
  width:38px; height:38px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.dia-avatar svg{ width:100%; height:100%; display:block; }
.dia-avatar-bot{
  box-shadow:0 6px 18px -6px rgba(249,115,22,.55);
}
.dia-avatar-user{
  width:32px; height:32px; border-radius:50%;
  background:var(--glass);
  border:1px solid var(--bd2);
  color:var(--w);
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:13px;
  letter-spacing:0;
}
.dia-chat-meta{ display:flex; flex-direction:column; line-height:1.2; }
.dia-chat-meta strong{
  font-family:Syne,sans-serif; font-weight:700; font-size:14px;
  color:var(--w); letter-spacing:-.2px;
}
.dia-status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--gd); margin-top:2px;
  font-family:"DM Sans",sans-serif;
}
.dia-status-dot{
  width:6px; height:6px; border-radius:50%;
  background:#22C55E;
  box-shadow:0 0 8px rgba(34,197,94,.7);
}

/* Pause/play toggle */
.dia-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:var(--glass); border:1px solid var(--bd2);
  border-radius:100px;
  color:var(--g); font-size:12.5px; font-weight:600;
  font-family:"DM Sans",sans-serif;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.dia-toggle svg{ width:13px; height:13px; }
.dia-toggle .dia-ico-play{ display:none; }
.dia-toggle.is-paused .dia-ico-pause{ display:none; }
.dia-toggle.is-paused .dia-ico-play{ display:block; }
.dia-toggle:hover{ color:var(--w); border-color:rgba(249,115,22,.4); background:var(--glass-h); }
.dia-toggle:focus-visible{ outline:2px solid var(--o); outline-offset:2px; }

/* ============================================================
   STREAM (mensajes)
   ============================================================ */
.dia-stream{
  flex:1;
  padding:24px 22px;
  overflow-y:auto;
  scroll-behavior:smooth;
  display:flex; flex-direction:column; gap:18px;
  min-height:380px;
  max-height:560px;
  min-width:0;
}
.dia-stream::-webkit-scrollbar{ width:8px; }
.dia-stream::-webkit-scrollbar-track{ background:transparent; }
.dia-stream::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.08); border-radius:8px; }
.dia-stream::-webkit-scrollbar-thumb:hover{ background:rgba(249,115,22,.3); }
.dia-stream:focus-visible{ outline:2px solid var(--o); outline-offset:-4px; border-radius:16px; }

.dia-msg{
  display:flex; gap:12px;
  align-items:flex-start;
  opacity:0; transform:translateY(12px);
  animation:diaSlide .55s cubic-bezier(.16,1,.3,1) forwards;
}
.dia-msg-user{ flex-direction:row-reverse; }
.dia-msg .dia-avatar{ margin-top:2px; }

.dia-bubble{
  max-width:78%;
  padding:14px 18px;
  border-radius:18px;
  font-family:"DM Sans",sans-serif;
  font-size:14.5px; line-height:1.65;
  color:var(--w);
  position:relative;
}
.dia-msg-user .dia-bubble{
  background:linear-gradient(135deg, rgba(249,115,22,.18), rgba(154,52,18,.16));
  border:1px solid rgba(249,115,22,.28);
  border-top-right-radius:6px;
}
.dia-msg-bot .dia-bubble{
  background:rgba(255,255,255,.04);
  border:1px solid var(--bd2);
  border-top-left-radius:6px;
}
.dia-bubble p{ margin:0 0 10px; }
.dia-bubble p:last-child{ margin-bottom:0; }
.dia-bubble strong{ color:var(--w); font-weight:700; }
.dia-bubble em{ color:var(--ob); font-style:italic; }
.dia-bubble code{
  font-family:"JetBrains Mono",monospace; font-size:12.5px;
  background:rgba(255,255,255,.06);
  padding:1px 6px; border-radius:6px;
  color:var(--ob);
}
.dia-bubble .dia-cursor{
  display:inline-block; width:2px; height:1em;
  background:var(--o); margin-left:2px;
  vertical-align:text-bottom;
  animation:diaBlink 1s steps(2) infinite;
}
@keyframes diaSlide{
  to{ opacity:1; transform:translateY(0); }
}
@keyframes diaBlink{
  50%{ opacity:0; }
}

/* ============================================================
   TYPING INDICATOR (3 dots)
   ============================================================ */
.dia-typing{
  display:inline-flex; gap:5px; align-items:center;
  padding:14px 18px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--bd2);
  border-radius:18px; border-top-left-radius:6px;
}
.dia-typing span{
  width:7px; height:7px; border-radius:50%;
  background:var(--gd);
  animation:diaTyping 1.2s ease-in-out infinite;
}
.dia-typing span:nth-child(2){ animation-delay:.18s; }
.dia-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes diaTyping{
  0%,80%,100%{ transform:translateY(0); opacity:.4; }
  40%{ transform:translateY(-4px); opacity:1; }
}

/* ============================================================
   BLOQUE CITA (normativa)
   ============================================================ */
.dia-cite{
  margin:10px 0;
  padding:10px 14px 10px 14px;
  background:rgba(249,115,22,.05);
  border-left:3px solid var(--o);
  border-radius:8px;
  font-size:13.5px; line-height:1.6;
  color:var(--g);
  opacity:0;
  animation:diaCiteIn .5s cubic-bezier(.16,1,.3,1) forwards;
}
.dia-cite-art{
  display:block;
  font-family:Syne,sans-serif; font-weight:700; font-size:13px;
  color:var(--ob);
  letter-spacing:.2px; margin-bottom:2px;
}
.dia-cite-desc{ font-style:italic; color:var(--g); }
@keyframes diaCiteIn{
  from{ opacity:0; transform:translateX(-6px); }
  to{ opacity:1; transform:translateX(0); }
}

/* ============================================================
   BLOQUE CÁLCULO (tabla compacta)
   ============================================================ */
.dia-calc{
  margin:12px 0;
  border:1px solid var(--bd2);
  border-radius:12px;
  overflow:hidden;
  background:rgba(0,0,0,.25);
}
.dia-calc-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px;
  font-family:"JetBrains Mono",monospace; font-size:13px;
  border-bottom:1px solid var(--bd);
  opacity:0; transform:translateY(4px);
  animation:diaRowIn .35s cubic-bezier(.16,1,.3,1) forwards;
}
.dia-calc-row:last-child{ border-bottom:none; }
.dia-calc-row span:first-child{ color:var(--g); }
.dia-calc-row span:last-child{ color:var(--w); font-weight:600; }
.dia-calc-row.is-total{
  background:rgba(249,115,22,.08);
  border-top:1px solid rgba(249,115,22,.25);
}
.dia-calc-row.is-total span:last-child{ color:var(--ob); font-weight:700; }
@keyframes diaRowIn{
  to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   FOOTER CHAT (input deshabilitado + CTA)
   ============================================================ */
.dia-chat-foot{
  display:flex; gap:12px; align-items:center;
  padding:16px 18px;
  border-top:1px solid var(--bd);
  background:rgba(255,255,255,.015);
  min-width:0;
}
.dia-input{
  flex:1;
  min-width:0;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:var(--glass); border:1px solid var(--bd2);
  border-radius:100px;
  color:var(--gd);
  cursor:not-allowed;
}
.dia-input svg{ width:14px; height:14px; flex-shrink:0; opacity:.6; }
.dia-input input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  font-family:"DM Sans",sans-serif; font-size:13.5px;
  color:var(--g);
}
.dia-input input::placeholder{ color:var(--gd); }
.dia-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px;
  background:linear-gradient(135deg, var(--o), var(--od));
  color:#fff;
  border-radius:100px;
  font-family:Syne,sans-serif; font-weight:700; font-size:13.5px;
  letter-spacing:.2px;
  box-shadow:0 0 24px rgba(249,115,22,.3);
  transition:all .3s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}
.dia-cta svg{ width:14px; height:14px; }
.dia-cta:hover{ transform:translateY(-2px); box-shadow:0 0 40px rgba(249,115,22,.5); }
.dia-cta:focus-visible{ outline:2px solid var(--ob); outline-offset:3px; }

/* ============================================================
   ASIDE — PREGUNTAS
   ============================================================ */
.dia-side{
  background:linear-gradient(180deg, rgba(15,15,26,.6), rgba(10,10,18,.7));
  border:1px solid var(--bd);
  border-radius:24px;
  padding:24px 22px;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow);
  min-width:0;
}
.dia-side-title{
  font-family:Syne,sans-serif; font-weight:700; font-size:15px;
  letter-spacing:-.2px;
  color:var(--w); margin:0 0 4px;
}
.dia-side-sub{
  font-size:12.5px; color:var(--gd); margin:0 0 18px;
}
.dia-questions{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
  flex:1;
  min-width:0;
}
.dia-question{
  display:flex; align-items:flex-start; gap:10px;
  width:100%;
  padding:12px 14px;
  background:var(--glass); border:1px solid var(--bd2);
  border-radius:14px;
  color:var(--g);
  font-family:"DM Sans",sans-serif;
  font-size:13.5px; line-height:1.4; text-align:left;
  cursor:pointer;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.dia-question:hover{
  color:var(--w); border-color:rgba(249,115,22,.35);
  background:var(--glass-h);
  transform:translateX(2px);
}
.dia-question:focus-visible{ outline:2px solid var(--o); outline-offset:2px; }
.dia-question.is-active{
  color:var(--w);
  background:linear-gradient(135deg, rgba(249,115,22,.12), rgba(154,52,18,.08));
  border-color:rgba(249,115,22,.45);
  box-shadow:0 8px 24px -12px rgba(249,115,22,.5);
}
.dia-question-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex-shrink:0;
  border-radius:7px;
  background:rgba(249,115,22,.12);
  border:1px solid rgba(249,115,22,.25);
  color:var(--ob);
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:11px;
}
.dia-question.is-active .dia-question-num{
  background:linear-gradient(135deg, var(--o), var(--od));
  color:#fff; border-color:transparent;
}
.dia-question-text{ flex:1; min-width:0; }

.dia-side-foot{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--bd);
  font-size:11.5px; line-height:1.5; color:var(--gd);
}
.dia-side-foot svg{ width:14px; height:14px; flex-shrink:0; margin-top:2px; opacity:.7; }

/* ============================================================
   LIGHT MODE OVERRIDES
   ============================================================ */
html[data-theme="light"] .dia-banner{
  background:rgba(249,115,22,.08);
  border-color:rgba(249,115,22,.3);
  color:var(--od);
}
html[data-theme="light"] .dia-chat,
html[data-theme="light"] .dia-side{
  background:rgba(255,255,255,.92);
  border-color:rgba(15,23,42,.08);
  box-shadow:0 30px 80px -20px rgba(15,23,42,.12);
}
html[data-theme="light"] .dia-chat-head,
html[data-theme="light"] .dia-chat-foot{
  background:rgba(15,23,42,.02);
  border-color:rgba(15,23,42,.06);
}
html[data-theme="light"] .dia-chat-meta strong,
html[data-theme="light"] .dia-bubble,
html[data-theme="light"] .dia-bubble strong,
html[data-theme="light"] .dia-side-title{ color:#0F172A; }
html[data-theme="light"] .dia-status,
html[data-theme="light"] .dia-side-sub,
html[data-theme="light"] .dia-side-foot,
html[data-theme="light"] .dia-input input,
html[data-theme="light"] .dia-question{
  color:#475569;
}
html[data-theme="light"] .dia-toggle{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.1);
  color:#475569;
}
html[data-theme="light"] .dia-toggle:hover{ color:#0F172A; }
html[data-theme="light"] .dia-msg-user .dia-bubble{
  background:linear-gradient(135deg, rgba(249,115,22,.1), rgba(154,52,18,.06));
  border-color:rgba(249,115,22,.25);
  color:#0F172A;
}
html[data-theme="light"] .dia-msg-bot .dia-bubble{
  background:rgba(255,255,255,.85);
  border-color:rgba(15,23,42,.08);
  color:#0F172A;
}
html[data-theme="light"] .dia-bubble code{
  background:rgba(249,115,22,.1); color:#9A3412;
}
html[data-theme="light"] .dia-bubble em{ color:#9A3412; }
html[data-theme="light"] .dia-typing{
  background:rgba(255,255,255,.85);
  border-color:rgba(15,23,42,.08);
}
html[data-theme="light"] .dia-typing span{ background:#94A3B8; }
html[data-theme="light"] .dia-cite{
  background:rgba(249,115,22,.06);
  color:#475569;
}
html[data-theme="light"] .dia-cite-art{ color:#9A3412; }
html[data-theme="light"] .dia-cite-desc{ color:#475569; }
html[data-theme="light"] .dia-calc{
  background:rgba(15,23,42,.02);
  border-color:rgba(15,23,42,.08);
}
html[data-theme="light"] .dia-calc-row{ border-color:rgba(15,23,42,.06); }
html[data-theme="light"] .dia-calc-row span:first-child{ color:#64748B; }
html[data-theme="light"] .dia-calc-row span:last-child{ color:#0F172A; }
html[data-theme="light"] .dia-calc-row.is-total{
  background:rgba(249,115,22,.08);
  border-top-color:rgba(249,115,22,.3);
}
html[data-theme="light"] .dia-calc-row.is-total span:last-child{ color:#9A3412; }
html[data-theme="light"] .dia-input{
  background:rgba(15,23,42,.03);
  border-color:rgba(15,23,42,.1);
}
html[data-theme="light"] .dia-question{
  background:rgba(15,23,42,.02);
  border-color:rgba(15,23,42,.08);
}
html[data-theme="light"] .dia-question:hover{ color:#0F172A; }
html[data-theme="light"] .dia-question.is-active{
  color:#0F172A;
  background:linear-gradient(135deg, rgba(249,115,22,.1), rgba(154,52,18,.04));
  border-color:rgba(249,115,22,.4);
}
html[data-theme="light"] .dia-avatar-user{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.1);
  color:#0F172A;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .dia-shell{
    grid-template-columns:minmax(0,1fr);
  }
  .dia-chat,
  .dia-side{
    width:100%;
    max-width:100%;
  }
  .dia-side{
    order:-1;
  }
  .dia-questions{
    flex-direction:row;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:6px;
    margin:0 -4px;
    scroll-snap-type:x mandatory;
  }
  .dia-questions::-webkit-scrollbar{ height:4px; }
  .dia-questions::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.08); border-radius:8px; }
  .dia-question{
    flex:0 0 auto;
    min-width:min(240px, 82vw);
    scroll-snap-align:start;
  }
  .dia-side-foot{ display:none; }
}
@media (max-width: 640px){
  .dia-chat{ min-height:520px; border-radius:18px; }
  .dia-side{ border-radius:18px; padding:18px 16px; }
  .dia-stream{ padding:18px 16px; max-height:480px; }
  .dia-bubble{ max-width:88%; font-size:14px; padding:12px 14px; }
  .dia-chat-foot{ flex-direction:column; align-items:stretch; gap:10px; }
  .dia-cta{ justify-content:center; }
  .dia-toggle-label{ display:none; }
  .dia-toggle{ padding:8px 10px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .dia-msg,
  .dia-cite,
  .dia-calc-row,
  .dia-banner .dia-dot{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .dia-typing{ display:none; }
  .dia-bubble .dia-cursor{ display:none; }
  .dia-stream{ scroll-behavior:auto; }
}