/* Futuristic chat theme - UAG */
:root{
  --uag-primary:#78232F;  /* vino UAG */
  --uag-accent:#FF8A26;   /* naranja UAG */
  --bg:#0E0B10;
  --panel:#15111A;
  --soft:#1E1824;
  --text:#EFE9F4;
  --muted:#BFAEC9;
  --glow: 0 0 12px rgba(255,138,38,.55), 0 0 28px rgba(120,35,47,.35);
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;background:#CCC; color:var(--text)}
.header{
  background: linear-gradient(90deg, var(--uag-primary), #4e1720);
  color:#fff; padding:14px 20px; box-shadow:var(--glow); position:sticky; top:0; z-index:10
}
.container{max-width:1100px;margin:auto;padding:20px}
.card{
  background:linear-gradient(180deg, var(--panel), var(--soft));
  border:1px solid #2a2030; border-radius:14px; box-shadow: 0 8px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03)
}
.inputs{display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.input{flex:1; min-width:240px}
.input label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px}
.input input{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #382637; outline:none;
  background:#120E16; color:var(--text); transition:border .2s, box-shadow .2s
}
.input input:focus{border-color:var(--uag-accent); box-shadow:var(--glow)}
#chatWindow{
  height:520px; overflow:auto; padding:18px; display:flex; flex-direction:column; gap:10px;
}
.msg{max-width:78%; padding:12px 14px; border-radius:12px; line-height:1.35; position:relative; word-wrap:anywhere}
.msg.user{ align-self:flex-end; background:linear-gradient(180deg, #1e1a20, #241d28); border:1px solid #3a2f40 }
.msg.ai{ align-self:flex-start; background:linear-gradient(180deg, #121015, #1a141f); border:1px solid #2f2432 }
.msg .label{font-size:.75rem; color:var(--muted); margin-bottom:4px}
.msg.ai::after{ content:""; position:absolute; left:-6px; top:14px; width:10px; height:10px; border-left:1px solid #2f2432; border-bottom:1px solid #2f2432; background:#141016; transform:rotate(45deg) }
.msg.user::after{ content:""; position:absolute; right:-6px; top:14px; width:10px; height:10px; border-right:1px solid #3a2f40; border-bottom:1px solid #3a2f40; background:#211b24; transform:rotate(45deg) }
.composer{display:flex; gap:10px; margin-top:12px}
.composer input{ flex:1; padding:12px 14px; border-radius:12px; border:1px solid #3a2f40; background:#120E16; color:var(--text) }
.btn{
  padding:12px 16px; border:none; border-radius:12px; cursor:pointer; color:#fff; font-weight:600; letter-spacing:.2px;
  background:linear-gradient(180deg, var(--uag-accent), #E87308);
  box-shadow: var(--glow); transition: transform .06s ease-in
}
.btn:active{ transform: translateY(1px) }
.typing{color:var(--muted); font-style:italic; animation: pulse 1.4s infinite}
@keyframes pulse{0%{opacity:.4}50%{opacity:1}100%{opacity:.4}}
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#201722; border:1px solid #3a2330; color:#f5e9f1; font-size:.82rem }
.badge .dot{width:8px; height:8px; border-radius:50%; background:var(--uag-accent); box-shadow:0 0 10px rgba(255,138,38,.9)}
.footer-note{color:var(--muted); font-size:.8rem; margin-top:8px}
.form-intro{display:flex; gap:12px; flex-wrap:wrap}
.form-intro .input{min-width:260px}

/* ===== Header fijo con blur y glow ===== */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(90deg, rgba(43,10,10,.85), rgba(62,14,14,.85));
  border-bottom: 1px solid rgba(255,138,38,.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.header-blur {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 120px at 10% 0%, rgba(255,138,38,.25), transparent 60%),
    radial-gradient(1200px 120px at 90% 0%, rgba(120,35,47,.25), transparent 60%);
  filter: blur(12px);
  opacity: .9;
}

.header-inner {
  position: relative;
  display: flex;
  justify-content: center; /* Centramos el contenido */
  align-items: center;
  padding: 14px 28px;
}

/* Logo + título */
.logo-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Logo UAG */
.uag-logo {
  width: 48px; height: 48px;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 0 14px rgba(255,138,38,.55);
  animation: softPulse 3.6s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}
.uag-logo:hover { transform: scale(1.06); }

/* Título con glow */
.title-glow {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  text-shadow:
    0 0 10px rgba(255,138,38,.8),
    0 0 22px rgba(255,138,38,.45);
  animation: glowWave 6s ease-in-out infinite;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Estado al hacer scroll */
.app-header.is-scrolled {
  background: linear-gradient(90deg, rgba(43,10,10,.92), rgba(62,14,14,.92));
  border-bottom-color: rgba(255,138,38,.5);
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}

/* Espaciador para contenido */
.header-spacer { height: 76px; }

/* Responsivo */
@media (max-width: 768px) {
  .header-inner { padding: 12px 16px; }
  .uag-logo { width: 40px; height: 40px; }
  .title-glow { font-size: 1.25rem; }
  .header-spacer { height: 68px; }
}

/* Animaciones */
@keyframes softPulse {
  0%,100% { box-shadow: 0 0 12px rgba(255,138,38,.45); }
  50%     { box-shadow: 0 0 18px rgba(255,138,38,.85); }
}
@keyframes glowWave {
  0%,100% { text-shadow: 0 0 10px rgba(255,138,38,.8), 0 0 22px rgba(255,138,38,.45); }
  50%     { text-shadow: 0 0 16px rgba(255,138,38,1), 0 0 30px rgba(255,138,38,.7); }
}