/* ═══════════════════════════════════════════════════════
   ARCADIA NEXUS IA — Atlantis Tech Design System
   ═══════════════════════════════════════════════════════ */
:root {
  --bg:        #030811;
  --bg2:       #071019;
  --bg3:       #0c1624;
  --bg4:       #132030;
  --border:    rgba(120,200,255,0.08);
  --text:      #d8e8f8;
  --text-m:    #5a7a9a;
  --health:    #00d4ff;          /* Bright Electric Cyan */
  --health-bg: rgba(0,212,255,0.10);
  --legal:     #a8c8e8;          /* Steel Silver */
  --legal-bg:  rgba(168,200,232,0.07);
  --genomic:   #2ecc71;          /* Vibrant Green */
  --genomic-bg:rgba(46,204,113,0.08);
  --veterinary: #f59e0b;          /* Amber/Gold - cuidado animal */
  --veterinary-bg: rgba(245,158,11,0.08);
  --mecanico:    #a855f7;          /* Purple / Amethyst */
  --mecanico-bg: rgba(168,85,247,0.08);
  --electrico:    #eab308;          /* Yellow / Amber */
  --electrico-bg: rgba(234,179,8,0.08);
  --marketing:    #e879f9;          /* Fuchsia / Magenta */
  --marketing-bg: rgba(232,121,249,0.08);
  --logistico:    #f97316;          /* Orange / Coral */
  --logistico-bg: rgba(249,115,22,0.08);
  --crm:          #f43f5e;          /* Rose / Crimson */
  --crm-bg:       rgba(244,63,94,0.08);
  --geologo:      #78a55a;          /* Earthy Green / Geological */
  --geologo-bg:   rgba(120,165,90,0.08);
  --civil:        #0ea5e9;          /* Sky Blue / Civil / Structural */
  --civil-bg:     rgba(14,165,233,0.08);
  --arquitecto:   #14b8a6;          /* Teal / Architectural */
  --arquitecto-bg:rgba(20,184,166,0.08);
  --contador:     #3b82f6;          /* Royal Blue / Accounting */
  --contador-bg:  rgba(59,130,246,0.08);
  --financiero:   #10b981;          /* Emerald / Finance AGI */
  --financiero-bg: rgba(16,185,129,0.08);
  --ambiental:    #22c55e;          /* Vivid Green / Environmental */
  --ambiental-bg: rgba(34,197,94,0.08);
  --ciberseguridad: #06b6d4;        /* Cyan / Cybersecurity */
  --ciberseguridad-bg: rgba(6,182,212,0.08);
  --software:      #6366f1;          /* Indigo / Software Engineering */
  --software-bg:   rgba(99,102,241,0.08);
  --comercial:     #d4af37;          /* Gold / Business MBA */
  --comercial-bg:  rgba(212,175,55,0.08);
  --astronomo:     #9b5de5;          /* Violet / Deep Space Astronomy */
  --astronomo-bg:  rgba(155,93,229,0.08);
  --psiquiatra:     #ff4b91;          /* Vibrant Rose/Pink */
  --psiquiatra-bg:  rgba(255,75,145,0.10);
  --biologo:        #84cc16;          /* Lime / Biology */
  --biologo-bg:     rgba(132,204,22,0.10);
  --nutricionista:  #ff7e47;          /* Coral / Nutritionist */
  --nutricionista-bg: rgba(255,126,71,0.10);
  --fisico:        #00e5ff;          /* Vibrant Electric Cyan/Blue */
  --fisico-bg:     rgba(0,229,255,0.08);
  --matematico:    #c084fc;          /* Lavender / Orchid Purple */
  --matematico-bg: rgba(192,132,252,0.08);
  --quimico:       #2dd4bf;          /* Bright Turquoise / Mint */
  --quimico-bg:    rgba(45,212,191,0.08);
  --economista:    #fb923c;          /* Orange / Amber */
  --economista-bg: rgba(251,146,60,0.08);
  --atlas:         #00f2fe;          /* Cyber Cyan / Holographic Lattice */
  --atlas-bg:      rgba(0,242,254,0.08);
  --accent:    #06b6d4;
  --accent2:   #7be0ff;
  --glow:      rgba(0,212,255,0.15);
  --radius:    12px;
  --transition: .35s cubic-bezier(.4,0,.2,1);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body, input, button, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
}
body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
::selection{background:rgba(77,201,246,.25)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(77,201,246,.12);border-radius:9px}

/* ─── LANDING ─── */
.landing{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.landing-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.landing-bg::before{
  content:'';position:absolute;inset:0;
  background:url('V1gz7.jpg') center/cover no-repeat;
  opacity:.55}
.landing-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,8,17,.55) 0%,rgba(3,8,17,.25) 40%,rgba(3,8,17,.75) 100%)}

/* Atlantis Grid — glowing hex pattern */
.grid-lines{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(77,201,246,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,201,246,.03) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,black 15%,transparent 75%)}

/* Atlantis Orbs — deep ocean bioluminescence */
.orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.3;animation:orbFloat 16s ease-in-out infinite}
.orb-1{width:600px;height:600px;background:radial-gradient(circle,#0a4a8a,#063060);top:-15%;left:-12%;animation-delay:0s}
.orb-2{width:500px;height:500px;background:radial-gradient(circle,#1a6aaa,#0a3a6a);top:25%;right:-15%;animation-delay:-5s}
.orb-3{width:550px;height:550px;background:radial-gradient(circle,#3a5aaa,#1a2a6a);bottom:-18%;left:25%;animation-delay:-10s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,-20px) scale(1.06)}66%{transform:translate(-18px,12px) scale(.94)}}

/* ─── NAV ─── */
.landing-nav{position:relative;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 3rem}
.nav-brand{display:flex;align-items:center;gap:.65rem}
.brand-title{font-family:'Inter',sans-serif;font-size:1.15rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-h);position:relative;display:flex;align-items:center;gap:.7rem}
.brand-title::before{content:'';width:28px;height:2px;background:linear-gradient(90deg,#2e86c1,#48c9b0);border-radius:2px;box-shadow:0 0 8px rgba(46,134,193,.4),0 0 20px rgba(72,201,176,.15);animation:brand-pulse 3s ease-in-out infinite}
.brand-accent{font-weight:300;letter-spacing:.28em;color:#2e86c1;text-shadow:0 0 18px rgba(46,134,193,.15)}
@keyframes brand-pulse{0%,100%{opacity:.6;width:28px}50%{opacity:1;width:36px}}
@keyframes brand-diamond{0%,100%{opacity:.4;transform:rotate(0deg)}50%{opacity:1;transform:rotate(90deg)}}
.nav-pill,.status-pill{display:flex;align-items:center;gap:.5rem;background:rgba(77,201,246,.06);border:1px solid rgba(77,201,246,.15);border-radius:20px;padding:.35rem .9rem;font-size:.72rem;color:var(--accent);letter-spacing:.02em}
.pulse-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse 2s infinite;box-shadow:0 0 8px var(--accent)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ─── HERO — ARCADIA NEXUS IA ─── */
.landing-hero{position:relative;z-index:10;text-align:center;padding:5rem 2rem 2.5rem}
.hero-tag{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-m);margin-bottom:1.5rem;font-weight:500}
.hero-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.8rem,6vw,4.5rem);
  line-height:1.1;
  font-weight:700;
  color:var(--text);
  margin-bottom:1.4rem;
  text-shadow:0 0 60px rgba(77,201,246,.15)}
.hero-accent{
  background:linear-gradient(135deg,#4dc9f6,#7be0ff,#a8c8e8,#8b9cf7);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:300% 300%;
  animation:shimmer 6s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-sub{font-size:.95rem;color:var(--text-m);line-height:1.7;max-width:520px;margin:0 auto}

/* ─── CARDS ─── */
.agents-grid{position:relative;z-index:10;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1150px;margin:3rem auto 0;padding:0 2rem}
.agent-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:linear-gradient(145deg, rgba(7,16,25,0.7) 0%, rgba(10,20,32,0.4) 100%);
  backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:1.6rem 1.8rem;
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.03);
  overflow:hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ── HUD Corner Accents ── */
.agent-card::before,
.agent-card::after {
  content:'';
  position:absolute;
  width:22px;
  height:22px;
  border-color:rgba(77,201,246,0.15);
  border-style:solid;
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none;
  z-index:2;
}
.agent-card::before {
  top:0;left:0;
  border-width:1.5px 0 0 1.5px;
  border-radius:18px 0 0 0;
}
.agent-card::after {
  bottom:0;right:0;
  border-width:0 1.5px 1.5px 0;
  border-radius:0 0 18px 0;
}
.agent-card:hover::before,
.agent-card:hover::after {
  width:32px;
  height:32px;
  border-color:rgba(77,201,246,0.45);
  filter:drop-shadow(0 0 4px rgba(77,201,246,0.25));
}

/* ── Scan Line on Hover ── */
.agent-card .card-scan-line {
  position:absolute;
  left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(77,201,246,0.8),transparent);
  opacity:0;
  top: 0%;
  pointer-events:none;
  z-index:3;
}
.agent-card:hover .card-scan-line {
  opacity:1;
  animation:cardScanDown 1.8s ease-in-out infinite;
}
@keyframes cardScanDown {
  0% { top: 0%; opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100% { top: 100%; opacity:0; }
}

/* ── Ambient Border Pulse (applied after reveal completes) ── */
@keyframes cardAmbientPulse {
  0%,100% { box-shadow:0 0 0 rgba(77,201,246,0); }
  50% { box-shadow:0 0 18px rgba(77,201,246,0.03), inset 0 0 8px rgba(77,201,246,0.02); }
}

/* ── Staggered Reveal Animation ── */
.card-reveal {
  opacity:0;
  transform:translateY(24px) scale(0.97);
  animation:cardRevealUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards,
            cardAmbientPulse 4s ease-in-out 1s infinite;
  animation-delay:calc(var(--reveal-delay, 0ms) + 200ms);
}
@keyframes cardRevealUp {
  to { opacity:1; transform:translateY(0) scale(1); }
}

#cardHealth { border-color: rgba(0,212,255,0.12); }
#cardHealth:hover {
  transform:translateY(-6px);
  border-color:rgba(0,212,255,0.45);
  background:rgba(0,212,255,0.04);
  box-shadow:0 8px 30px rgba(0,212,255,0.15), inset 0 0 12px rgba(0,212,255,0.05);
}

#cardLegal { border-color: rgba(168,200,232,0.12); }
#cardLegal:hover {
  transform:translateY(-6px);
  border-color:rgba(168,200,232,0.45);
  background:rgba(168,200,232,0.03);
  box-shadow:0 8px 30px rgba(168,200,232,0.12), inset 0 0 12px rgba(168,200,232,0.04);
}

#cardGenomic { border-color: rgba(46,204,113,0.12); }
#cardGenomic:hover {
  transform:translateY(-6px);
  border-color:rgba(46,204,113,0.45);
  background:rgba(46,204,113,0.04);
  box-shadow:0 8px 30px rgba(46,204,113,0.15), inset 0 0 12px rgba(46,204,113,0.05);
}

#cardVeterinary { border-color: rgba(245,158,11,0.12); }
#cardVeterinary:hover {
  transform:translateY(-6px);
  border-color:rgba(245,158,11,0.45);
  background:rgba(245,158,11,0.04);
  box-shadow:0 8px 30px rgba(245,158,11,0.15), inset 0 0 12px rgba(245,158,11,0.05);
}

#cardMecanico { border-color: rgba(168,85,247,0.12); }
#cardMecanico:hover {
  transform:translateY(-6px);
  border-color:rgba(168,85,247,0.45);
  background:rgba(168,85,247,0.04);
  box-shadow:0 8px 30px rgba(168,85,247,0.15), inset 0 0 12px rgba(168,85,247,0.05);
}

#cardElectrico { border-color: rgba(234,179,8,0.12); }
#cardElectrico:hover {
  transform:translateY(-6px);
  border-color:rgba(234,179,8,0.45);
  background:rgba(234,179,8,0.04);
  box-shadow:0 8px 30px rgba(234,179,8,0.15), inset 0 0 12px rgba(234,179,8,0.05);
}

#cardMarketing { border-color: rgba(232,121,249,0.12); }
#cardMarketing:hover {
  transform:translateY(-6px);
  border-color:rgba(232,121,249,0.45);
  background:rgba(232,121,249,0.04);
  box-shadow:0 8px 30px rgba(232,121,249,0.15), inset 0 0 12px rgba(232,121,249,0.05);
}

#cardLogistico { border-color: rgba(249,115,22,0.12); }
#cardLogistico:hover {
  transform:translateY(-6px);
  border-color:rgba(249,115,22,0.45);
  background:rgba(249,115,22,0.04);
  box-shadow:0 8px 30px rgba(249,115,22,0.15), inset 0 0 12px rgba(249,115,22,0.05);
}

#cardGeologo { border-color: rgba(120,165,90,0.12); }
#cardGeologo:hover {
  transform:translateY(-6px);
  border-color:rgba(120,165,90,0.45);
  background:rgba(120,165,90,0.04);
  box-shadow:0 8px 30px rgba(120,165,90,0.15), inset 0 0 12px rgba(120,165,90,0.05);
}

#cardCivil { border-color: rgba(14,165,233,0.12); }
#cardCivil:hover {
  transform:translateY(-6px);
  border-color:rgba(14,165,233,0.45);
  background:rgba(14,165,233,0.04);
  box-shadow:0 8px 30px rgba(14,165,233,0.15), inset 0 0 12px rgba(14,165,233,0.05);
}

#cardArquitecto { border-color: rgba(20,184,166,0.12); }
#cardArquitecto:hover {
  transform:translateY(-6px);
  border-color:rgba(20,184,166,0.45);
  background:rgba(20,184,166,0.04);
  box-shadow:0 8px 30px rgba(20,184,166,0.15), inset 0 0 12px rgba(20,184,166,0.05);
}

#cardContador { border-color: rgba(59,130,246,0.12); }
#cardContador:hover {
  transform:translateY(-6px);
  border-color:rgba(59,130,246,0.45);
  background:rgba(59,130,246,0.04);
  box-shadow:0 8px 30px rgba(59,130,246,0.15), inset 0 0 12px rgba(59,130,246,0.05);
}

#cardFinanciero { border-color: rgba(16,185,129,0.12); }
#cardFinanciero:hover {
  transform:translateY(-6px);
  border-color:rgba(16,185,129,0.45);
  background:rgba(16,185,129,0.04);
  box-shadow:0 8px 30px rgba(16,185,129,0.15), inset 0 0 12px rgba(16,185,129,0.05);
}

#cardAmbiental { border-color: rgba(34,197,94,0.12); }
#cardAmbiental:hover {
  transform:translateY(-6px);
  border-color:rgba(34,197,94,0.45);
  background:rgba(34,197,94,0.04);
  box-shadow:0 8px 30px rgba(34,197,94,0.15), inset 0 0 12px rgba(34,197,94,0.05);
}

#cardCiberseguridad { border-color: rgba(6,182,212,0.18); }
#cardCiberseguridad:hover {
  transform:translateY(-6px);
  border-color:rgba(6,182,212,0.5);
  background:rgba(6,182,212,0.05);
  box-shadow:0 8px 30px rgba(6,182,212,0.2), inset 0 0 12px rgba(6,182,212,0.06);
}

#cardSoftware { border-color: rgba(99,102,241,0.18); }
#cardSoftware:hover {
  transform:translateY(-6px);
  border-color:rgba(99,102,241,0.5);
  background:rgba(99,102,241,0.05);
  box-shadow:0 8px 30px rgba(99,102,241,0.2), inset 0 0 12px rgba(99,102,241,0.06);
}

#cardComercial { border-color: rgba(212,175,55,0.18); }
#cardComercial:hover {
  transform:translateY(-6px);
  border-color:rgba(212,175,55,0.5);
  background:rgba(212,175,55,0.05);
  box-shadow:0 8px 30px rgba(212,175,55,0.2), inset 0 0 12px rgba(212,175,55,0.06);
}

#cardAstronomo { border-color: rgba(155,93,229,0.18); }
#cardAstronomo:hover {
  transform:translateY(-6px);
  border-color:rgba(155,93,229,0.5);
  background:rgba(155,93,229,0.05);
  box-shadow:0 8px 30px rgba(155,93,229,0.2), inset 0 0 12px rgba(155,93,229,0.06);
}
.agent-card-industrial {
  background: linear-gradient(145deg, rgba(7,16,25,0.85) 0%, rgba(6,182,212,0.06) 100%) !important;
  border-color: rgba(6,182,212,0.3) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.05) !important;
}
.agent-card-industrial::before,
.agent-card-industrial::after {
  border-color: rgba(6,182,212,0.6) !important;
}
.agent-card-industrial:hover {
  transform: translateY(-6px);
  border-color: rgba(6,182,212,0.6) !important;
  background: linear-gradient(145deg, rgba(7,16,25,0.9) 0%, rgba(6,182,212,0.12) 100%) !important;
  box-shadow: 0 12px 40px rgba(6,182,212,0.25), inset 0 0 20px rgba(6,182,212,0.1) !important;
}
.agent-card-industrial .card-icon {
  background: rgba(6,182,212,0.12) !important;
  border: 1px solid rgba(6,182,212,0.4) !important;
  box-shadow: 0 0 15px rgba(6,182,212,0.25);
  color: #00e5ff !important;
}
.agent-card-industrial .card-enter {
  color: #06b6d4 !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.card-glow{position:absolute;top:-40%;right:-40%;width:200px;height:200px;border-radius:50%;filter:blur(60px);opacity:0;transition:opacity .5s}
.agent-card:hover .card-glow{opacity:.3}
.card-glow-health{background:var(--health)}
.card-glow-legal{background:var(--legal)}
.card-glow-genomic{background:var(--genomic)}
.card-glow-veterinary{background:var(--veterinary)}
.card-glow-mecanico{background:var(--mecanico)}
.card-glow-electrico{background:var(--electrico)}
.card-glow-marketing{background:var(--marketing)}
.card-glow-logistico{background:var(--logistico)}
.card-glow-geologo{background:var(--geologo)}
.card-glow-civil{background:var(--civil)}
.card-glow-arquitecto{background:var(--arquitecto)}
.card-glow-contador{background:var(--contador)}
.card-glow-financiero{background:var(--financiero)}
.card-glow-ambiental{background:var(--ambiental)}
.card-glow-ciberseguridad{background:var(--ciberseguridad)}
.card-glow-software{background:var(--software)}
.card-glow-comercial{background:var(--comercial)}
.card-glow-astronomo{background:var(--astronomo)}
.card-glow-psiquiatra{background:var(--psiquiatra)}
.card-glow-biologo{background:var(--biologo)}
.card-glow-nutricionista{background:var(--nutricionista)}
.card-glow-atlas{background:var(--atlas)}
.card-glow-fisico{background:var(--fisico)}
.card-glow-matematico{background:var(--matematico)}
.card-glow-quimico{background:var(--quimico)}
.card-glow-economista{background:var(--economista)}

.card-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.2rem;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.card-icon-health{background:var(--health-bg);color:var(--health);border:1px solid rgba(0,212,255,0.2)}
.card-icon-legal{background:var(--legal-bg);color:var(--legal);border:1px solid rgba(168,200,232,0.18)}
.card-icon-genomic{background:var(--genomic-bg);color:var(--genomic);border:1px solid rgba(46,204,113,0.2)}
.card-icon-veterinary{background:var(--veterinary-bg);color:var(--veterinary);border:1px solid rgba(245,158,11,0.2)}
.card-icon-mecanico{background:var(--mecanico-bg);color:var(--mecanico);border:1px solid rgba(168,85,247,0.2)}
.card-icon-electrico{background:var(--electrico-bg);color:var(--electrico);border:1px solid rgba(234,179,8,0.2)}
.card-icon-marketing{background:var(--marketing-bg);color:var(--marketing);border:1px solid rgba(232,121,249,0.2)}
.card-icon-logistico{background:var(--logistico-bg);color:var(--logistico);border:1px solid rgba(249,115,22,0.2)}
.card-icon-geologo{background:var(--geologo-bg);color:var(--geologo);border:1px solid rgba(120,165,90,0.2)}
.card-icon-civil{background:var(--civil-bg);color:var(--civil);border:1px solid rgba(14,165,233,0.2)}
.card-icon-arquitecto{background:var(--arquitecto-bg);color:var(--arquitecto);border:1px solid rgba(20,184,166,0.2)}
.card-icon-contador{background:var(--contador-bg);color:var(--contador);border:1px solid rgba(59,130,246,0.2)}
.card-icon-financiero{background:var(--financiero-bg);color:var(--financiero);border:1px solid rgba(16,185,129,0.2)}
.card-icon-ambiental{background:var(--ambiental-bg);color:var(--ambiental);border:1px solid rgba(34,197,94,0.2)}
.card-icon-ciberseguridad{background:var(--ciberseguridad-bg);color:var(--ciberseguridad);border:1px solid rgba(6,182,212,0.2)}
.card-icon-software{background:var(--software-bg);color:var(--software);border:1px solid rgba(99,102,241,0.2)}
.card-icon-comercial{background:var(--comercial-bg);color:var(--comercial);border:1px solid rgba(212,175,55,0.2)}
.card-icon-astronomo{background:var(--astronomo-bg);color:var(--astronomo);border:1px solid rgba(155,93,229,0.2)}
.card-icon-psiquiatra{background:var(--psiquiatra-bg);color:var(--psiquiatra);border:1px solid rgba(255,75,145,0.2)}
.card-icon-biologo{background:var(--biologo-bg);color:var(--biologo);border:1px solid rgba(132,204,22,0.2)}
.card-icon-nutricionista{background:var(--nutricionista-bg);color:var(--nutricionista);border:1px solid rgba(255,126,71,0.2)}
.card-icon-atlas{background:var(--atlas-bg);color:var(--atlas);border:1px solid rgba(0,242,254,0.2)}
.card-icon-fisico{background:var(--fisico-bg);color:var(--fisico);border:1px solid rgba(0,229,255,0.2)}
.card-icon-matematico{background:var(--matematico-bg);color:var(--matematico);border:1px solid rgba(192,132,252,0.2)}
.card-icon-quimico{background:var(--quimico-bg);color:var(--quimico);border:1px solid rgba(45,212,191,0.2)}
.card-icon-economista{background:var(--economista-bg);color:var(--economista);border:1px solid rgba(251,146,60,0.2)}

.agent-card:hover .card-icon {
  transform:scale(1.1);
  box-shadow: 0 0 25px currentColor;
}

.agent-card .card-enter {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-m);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  opacity: 0.8;
}
.agent-card:hover .card-enter {
  opacity: 1;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,0.4);
}
.agent-card h3{font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:600;margin-bottom:.6rem;color:var(--text)}
#cardHealth h3 span{color:var(--health)}
#cardLegal h3 span{color:var(--legal)}
#cardGenomic h3 span{color:var(--genomic)}
#cardVeterinary h3 span{color:var(--veterinary)}
#cardMecanico h3 span{color:var(--mecanico)}
#cardElectrico h3 span{color:var(--electrico)}
#cardMarketing h3 span{color:var(--marketing)}
#cardLogistico h3 span{color:var(--logistico)}
#cardGeologo h3 span{color:var(--geologo)}
#cardCivil h3 span{color:var(--civil)}
#cardArquitecto h3 span{color:var(--arquitecto)}
#cardContador h3 span{color:var(--contador)}
#cardFinanciero h3 span{color:var(--financiero)}
#cardAmbiental h3 span{color:var(--ambiental)}
#cardCiberseguridad h3 span{color:var(--ciberseguridad)}
#cardSoftware h3 span{color:var(--software)}
#cardComercial h3 span{color:var(--comercial)}
#cardAstronomo h3 span{color:var(--astronomo)}
#cardPsiquiatra h3 span{color:var(--psiquiatra)}
#cardBiologo h3 span{color:var(--biologo)}
#cardNutricionista h3 span{color:var(--nutricionista)}
#cardAtlas h3 span{color:var(--atlas)}
#cardFisico h3 span{color:var(--fisico)}
#cardMatematico h3 span{color:var(--matematico)}
#cardQuimico h3 span{color:var(--quimico)}
#cardEconomista h3 span{color:var(--economista)}
.agent-card p{font-size:.82rem;color:var(--text-m);line-height:1.65;margin-bottom:.8rem}
.card-stats{display:flex;gap:1.2rem;margin-bottom:1.2rem}
.card-stats div{display:flex;flex-direction:column}
.card-stats strong{font-size:.9rem;color:var(--text)}
.card-stats small{font-size:.65rem;color:var(--text-m);text-transform:uppercase;letter-spacing:.05em;margin-top:.15rem}
.card-enter{font-size:.78rem;font-weight:500;color:var(--text-m);transition:all var(--transition)}
#cardHealth:hover .card-enter{color:var(--health)}
#cardLegal:hover .card-enter{color:var(--legal)}
#cardGenomic:hover .card-enter{color:var(--genomic)}
#cardVeterinary:hover .card-enter{color:var(--veterinary)}
#cardMecanico:hover .card-enter{color:var(--mecanico)}
#cardElectrico:hover .card-enter{color:var(--electrico)}
#cardMarketing:hover .card-enter{color:var(--marketing)}
#cardLogistico:hover .card-enter{color:var(--logistico)}
#cardGeologo:hover .card-enter{color:var(--geologo)}
#cardCivil:hover .card-enter{color:var(--civil)}
#cardArquitecto:hover .card-enter{color:var(--arquitecto)}
#cardContador:hover .card-enter{color:var(--contador)}
#cardFinanciero:hover .card-enter{color:var(--financiero)}
#cardAmbiental:hover .card-enter{color:var(--ambiental)}
#cardSoftware:hover .card-enter{color:var(--software)}
#cardComercial:hover .card-enter{color:var(--comercial)}
#cardAstronomo:hover .card-enter{color:var(--astronomo)}
#cardPsiquiatra:hover .card-enter{color:var(--psiquiatra)}
#cardBiologo:hover .card-enter{color:var(--biologo)}
#cardNutricionista:hover .card-enter{color:var(--nutricionista)}
#cardAtlas:hover .card-enter{color:var(--atlas)}
#cardFisico:hover .card-enter{color:var(--fisico)}
#cardMatematico:hover .card-enter{color:var(--matematico)}
#cardQuimico:hover .card-enter{color:var(--quimico)}
#cardEconomista:hover .card-enter{color:var(--economista)}

/* ─── FOOTER ─── */
.landing-footer{position:relative;z-index:10;text-align:center;padding:3rem 2rem 2rem;margin-top:auto}
.landing-footer p{font-size:.7rem;letter-spacing:.08em;color:var(--text-m);opacity:.4}

/* ─── CHAT VIEW ─── */
.chat-view{display:flex;flex-direction:column;height:100vh;background:var(--bg);animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.chat-header{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:64px;border-bottom:1px solid var(--border);background:var(--bg2);position:sticky;top:0;z-index:100}
.header-left{display:flex;align-items:center;gap:.8rem}
.back-btn{background:rgba(77,201,246,.05);border:1px solid var(--border);border-radius:8px;color:var(--text-m);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.back-btn:hover{background:rgba(77,201,246,.1);color:var(--text)}
.header-brand{display:flex;align-items:center;gap:.6rem}
.header-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.header-brand h1{font-size:.95rem;font-weight:600}
.header-brand span{font-size:.68rem;color:var(--text-m);letter-spacing:.06em}

/* ─── SIDEBAR ─── */
.chat-main{flex:1;display:grid;grid-template-columns:260px 1fr;overflow:hidden}
.sidebar{background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.sidebar-top{padding:1.2rem;border-bottom:1px solid var(--border)}
.sidebar-top h3{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-m);margin-bottom:.8rem}
.new-btn{width:100%;padding:.6rem;background:linear-gradient(135deg,var(--accent),rgba(77,201,246,.5));color:#030811;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}
.new-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(77,201,246,.25)}
.history-list{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.35rem}
.history-item{position:relative;display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:all .2s;font-size:.78rem;gap:0.5rem;overflow:hidden}
.history-item:hover{background:var(--bg3);border-color:var(--border)}
.history-item.active{background:rgba(77,201,246,0.08);border-color:rgba(77,201,246,0.3);color:var(--accent);}
.history-item.active .hi-title{color:var(--accent2);font-weight:600;}
.history-item .hi-content{flex:1;min-width:0;display:flex;flex-direction:column}
.history-item .hi-title{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.15rem}
.history-item .hi-time{color:var(--text-m);font-size:.65rem}

/* Botones de acción (Renombrar y Eliminar) */
.history-item .hi-actions{display:flex;align-items:center;gap:0.3rem;opacity:0;pointer-events:none;transition:opacity 0.2s ease}
.history-item:hover .hi-actions,
.history-item.active .hi-actions{opacity:1;pointer-events:auto}

.hi-action-btn{background:transparent;border:none;border-radius:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--text-m);cursor:pointer;transition:all 0.2s ease;padding:0}
.hi-action-btn:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.hi-action-btn.edit-btn:hover{color:var(--accent);background:rgba(77,201,246,0.1)}
.hi-action-btn.delete-btn:hover{color:#ff6b6b;background:rgba(255,107,107,0.1)}
.hi-action-btn svg{width:13px;height:13px;stroke:currentColor;fill:none}

/* Modo Edición En Línea */
.history-item.editing{background:var(--bg4);border-color:var(--border);cursor:default}
.hi-edit-input{flex:1;background:rgba(0,0,0,0.25);border:1px solid rgba(77,201,246,0.3);border-radius:4px;color:var(--text);font-family:inherit;font-size:0.78rem;padding:0.2rem 0.4rem;outline:none;width:100%}
.hi-edit-input:focus{border-color:var(--accent);box-shadow:0 0 5px rgba(77,201,246,0.2)}
.hi-edit-actions{display:flex;align-items:center;gap:0.2rem}
.hi-edit-btn{background:transparent;border:none;color:var(--text-m);width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.8rem;border-radius:3px;transition:all 0.2s}
.hi-edit-btn:hover{background:rgba(255,255,255,0.08)}
.hi-edit-btn.confirm-btn:hover{color:#2ecc71;background:rgba(46,204,113,0.1)}
.hi-edit-btn.cancel-btn:hover{color:#e74c3c;background:rgba(231,76,60,0.1)}

/* Modo Confirmar Eliminación */
.history-item.deleting{background:rgba(231,76,60,0.05);border-color:rgba(231,76,60,0.25);cursor:default}
.hi-delete-confirm-text{font-size:0.72rem;color:#ff6b6b;font-weight:500;white-space:nowrap}
.hi-delete-actions{display:flex;gap:0.3rem}
.hi-delete-btn{border:none;border-radius:4px;font-size:0.65rem;font-weight:600;padding:0.2rem 0.4rem;cursor:pointer;transition:all 0.2s}
.hi-delete-btn.confirm-delete-btn{background:#e74c3c;color:#ffffff}
.hi-delete-btn.confirm-delete-btn:hover{background:#c0392b}
.hi-delete-btn.cancel-delete-btn{background:rgba(255,255,255,0.08);color:var(--text-m)}
.hi-delete-btn.cancel-delete-btn:hover{background:rgba(255,255,255,0.15);color:var(--text)}
.sidebar-bottom{padding:.8rem 1.2rem;border-top:1px solid var(--border);font-size:.68rem;color:var(--text-m)}
.sidebar-bottom span{color:var(--accent);font-weight:500}

/* ─── WELCOME ─── */
.chat-content{display:flex;flex-direction:column;overflow:hidden}
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;gap:1.2rem;overflow-y:auto;min-height:0}
.welcome-icon{width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;box-shadow:0 0 50px var(--glow);animation:glow 3s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 30px var(--glow)}50%{box-shadow:0 0 60px rgba(77,201,246,.25)}}
.welcome h2{font-family:'Playfair Display',serif;font-size:1.6rem}
.welcome p{color:var(--text-m);max-width:420px;line-height:1.6;font-size:.88rem}
.examples{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;width:100%;max-width:520px}
.example-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:.75rem .9rem;cursor:pointer;transition:all .2s;text-align:left;font-size:.78rem;color:var(--text-m);line-height:1.5}
.example-card:hover{border-color:rgba(77,201,246,.25);color:var(--text);transform:translateY(-2px);background:rgba(77,201,246,.04)}
.example-card .ec-icon{margin-bottom:.25rem;font-size:.9rem}

/* ─── MESSAGES ─── */
.messages{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.2rem}
.msg-user{display:flex;justify-content:flex-end}
.msg-user .bubble{background:linear-gradient(135deg,rgba(77,201,246,.85),rgba(77,201,246,.55));color:#030811;padding:.8rem 1.1rem;border-radius:16px 16px 4px 16px;max-width:70%;font-family:'Atkinson Hyperlegible',sans-serif;font-size:.9rem;font-weight:500;line-height:1.5}
.msg-agent{display:flex;gap:.6rem}
.agent-avatar{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;margin-top:2px}
.agent-content{background:var(--bg3);border:1px solid var(--border);border-radius:4px 16px 16px 16px;padding:1rem 1.2rem;max-width:82%;font-family:'Atkinson Hyperlegible',sans-serif;font-size:.92rem;line-height:1.7}
.agent-content p {margin-bottom: 0.8rem;}
.agent-content p:last-child {margin-bottom: 0;}
.agent-content h1,.agent-content h2,.agent-content h3{color:var(--accent2);font-family:'Playfair Display',serif;margin:1rem 0 .4rem}
.agent-content h1{font-size:1rem}
.agent-content h2,.agent-content h3{font-size:.92rem}
.agent-content strong{color:#ffffff; font-weight: 700;}
.agent-content blockquote{border-left:3px solid var(--accent);padding-left:.8rem;color:var(--text-m);margin:.5rem 0}
.agent-content ul,.agent-content ol{padding-left:1.3rem; margin-bottom: 0.8rem;}
.agent-content li{margin-bottom:.25rem}
.agent-content code{background:var(--bg4);padding:.1rem .35rem;border-radius:4px;font-size:.8rem}
.agent-content hr{border-color:var(--border);margin:.8rem 0}

/* ─── THINKING ─── */
.thinking{display:flex;gap:.6rem}
.thinking-bubble{background:var(--bg3);border:1px solid var(--border);border-radius:4px 16px 16px 16px;padding:.8rem 1.2rem;display:flex;align-items:center;gap:.5rem}
.thinking-label{font-size:.78rem;color:var(--text-m)}
.thinking-dots span{width:6px;height:6px;background:var(--accent);border-radius:50%;display:inline-block;animation:bounce 1.2s infinite;box-shadow:0 0 6px var(--accent)}
.thinking-dots span:nth-child(2){animation-delay:.2s}
.thinking-dots span:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-7px);opacity:1}}

/* ─── INPUT ─── */
.input-area{padding:1rem 1.5rem;border-top:1px solid var(--border);background:var(--bg2)}
.disclaimer{font-size:.65rem;color:var(--text-m);text-align:center;margin-bottom:.6rem;display:flex;align-items:center;justify-content:center;gap:.3rem}
.disclaimer strong{color:var(--accent)}
.input-wrapper{display:flex;gap:.6rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .6rem .6rem 1rem;transition:border-color .2s}
.input-wrapper:focus-within{border-color:var(--accent);box-shadow:0 0 20px rgba(77,201,246,.06)}

/* Floating Attachment Menu Styles */
.attach-container {
  position: relative;
  display: flex;
  align-items: center;
}

.attach-menu {
  position: absolute;
  bottom: 54px;
  left: 0;
  background: rgba(10, 20, 38, 0.88); /* Obsidian dark transparency */
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(0, 242, 254, 0.2); /* Cyan neon glow border */
  border-radius: 14px;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.5), 
    0 0 20px rgba(0, 242, 254, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: none;
  flex-direction: column;
  padding: 8px;
  gap: 6px;
  z-index: 1000;
  width: 195px;
  transform-origin: bottom left;
  animation: attachMenuShow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes attachMenuShow {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.attach-menu button {
  background: transparent;
  border: none;
  color: var(--text);
  padding: 10px 14px;
  text-align: left;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.attach-menu button:hover {
  background: linear-gradient(90deg, rgba(0, 242, 254, 0.12) 0%, rgba(155, 93, 229, 0.05) 100%);
  color: #00d4ff;
  box-shadow: inset 0 0 0 1px rgba(0, 242, 254, 0.2);
  transform: translateX(4px);
}

.attach-menu .menu-svg-icon {
  width: 18px;
  height: 18px;
  color: var(--text-m);
  transition: color 0.25s ease, filter 0.25s ease;
}

.attach-menu button:hover .menu-svg-icon {
  color: #00d4ff;
  filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.5));
}
textarea{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:'Inter',sans-serif;font-size:.87rem;resize:none;min-height:40px;max-height:120px;line-height:1.5}
textarea::placeholder{color:var(--text-m)}
.send-btn{width:40px;height:40px;background:linear-gradient(135deg,var(--accent),rgba(77,201,246,.55));border:none;border-radius:9px;color:#030811;cursor:pointer;transition:all .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.send-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 16px rgba(77,201,246,.3)}
.send-btn:disabled{opacity:.35;cursor:not-allowed}

/* Webcam Capture Modal Styles (Desktop) */
.webcam-modal {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 17, 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: webcamFadeIn 0.25s ease-out;
}

@keyframes webcamFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.webcam-modal-content {
  background: rgba(12, 22, 36, 0.95);
  border: 1px solid rgba(0, 242, 254, 0.25);
  border-radius: 16px;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(0, 242, 254, 0.15);
  width: 90%;
  max-width: 520px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: webcamSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes webcamSlideUp {
  from { transform: translateY(30px) scale(0.95); }
  to { transform: translateY(0) scale(1); }
}

.webcam-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.webcam-header h3 {
  margin: 0;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
}

.webcam-close-btn {
  color: var(--text-m);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.webcam-close-btn:hover {
  color: #ef4444;
}

.webcam-video-container {
  position: relative;
  background: #030811;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.webcam-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* Mirror camera feed for better UX */
}

.webcam-actions {
  padding: 16px 20px;
  border-top: 1px solid rgba(120, 200, 255, 0.08);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.webcam-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  border: none;
}

.webcam-btn.primary {
  background: linear-gradient(135deg, #00d4ff, rgba(77, 201, 246, 0.7));
  color: #030811;
}

.webcam-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.35);
}

.webcam-btn.secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid rgba(120, 200, 255, 0.1);
}

.webcam-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ─── THEME OVERRIDES (Chat Borders & Colors) ─── */
.theme-health{
  --accent: #0284c7;
  --accent2: #0f2d4a;
  --chat-bg: rgba(255, 255, 255, 0.35);
  --chat-glow: rgba(14, 165, 233, 0.08);
  --chat-border: rgba(14, 165, 233, 0.15);
}

.chat-view.theme-health {
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 50%, #e0f2fe 100%) !important;
  box-shadow:
    inset 0 0 100px rgba(0, 212, 255, 0.12),
    inset 0 0 40px rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(14, 165, 233, 0.18) !important;
  color: #0f2d4a;
}

/* Translucent components for medical theme */
.chat-view.theme-health .chat-header {
  background: rgba(255, 255, 255, 0.45) !important;
  border-bottom: 1px solid rgba(14, 165, 233, 0.15) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
}

.chat-view.theme-health .sidebar {
  background: rgba(255, 255, 255, 0.45) !important;
  border-right: 1px solid rgba(14, 165, 233, 0.15) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
}

.chat-view.theme-health .input-area {
  background: rgba(255, 255, 255, 0.45) !important;
  border-top: 1px solid rgba(14, 165, 233, 0.15) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
}

.chat-view.theme-health .sidebar-top,
.chat-view.theme-health .sidebar-bottom {
  border-color: rgba(14, 165, 233, 0.15) !important;
}

/* Sidebar styles */
.theme-health .sidebar-top h3 {
  color: rgba(7, 29, 48, 0.8) !important;
}

.theme-health .hi-title {
  color: #071d30 !important;
}

.theme-health .hi-time {
  color: rgba(7, 29, 48, 0.7) !important;
}

.theme-health .history-item:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.theme-health .history-item.active {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.theme-health .history-item.active .hi-title {
  color: #071d30 !important;
  font-weight: 600;
}

.theme-health .new-btn {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2) !important;
  transition: all 0.3s ease !important;
}

.theme-health .new-btn:hover {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.35) !important;
  transform: translateY(-1px);
}

/* Header UI Elements */
.theme-health .header-brand h1 {
  color: #071d30 !important;
  text-shadow: none !important;
}

.theme-health .header-brand span {
  color: rgba(7, 29, 48, 0.8) !important;
}

.theme-health .back-btn,
.theme-health .settings-btn {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(14, 165, 233, 0.15) !important;
  color: #071d30 !important;
  transition: all 0.3s ease !important;
}

.theme-health .back-btn:hover,
.theme-health .settings-btn:hover {
  background: rgba(14, 165, 233, 0.15) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
  color: #0284c7 !important;
}

/* Chat bubble overrides */
.theme-health .msg-user .bubble {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.theme-health .agent-content {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(14, 165, 233, 0.18) !important;
  color: #071d30 !important;
  backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.05) !important;
}

.theme-health .agent-content p,
.theme-health .agent-content li {
  color: #0f2d4a !important;
}

.theme-health .agent-content h1,
.theme-health .agent-content h2,
.theme-health .agent-content h3,
.theme-health .agent-content strong {
  color: #071d30 !important;
  text-shadow: none !important;
}

.theme-health .agent-avatar {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  color: #0284c7 !important;
}

.theme-health .header-icon {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  color: #0284c7 !important;
}

/* Input elements */
.theme-health .input-wrapper {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.05) !important;
  backdrop-filter: blur(10px);
}

.theme-health .input-wrapper:focus-within {
  border-color: rgba(2, 132, 199, 0.45) !important;
  box-shadow: 0 0 15px rgba(2, 132, 199, 0.15) !important;
}

.theme-health textarea {
  color: #071d30 !important;
}

.theme-health textarea::placeholder {
  color: rgba(7, 29, 48, 0.5) !important;
}

.theme-health .send-btn {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25) !important;
  transition: all 0.3s ease !important;
}

.theme-health .send-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
  box-shadow: 0 4px 18px rgba(14, 165, 233, 0.4) !important;
  transform: translateY(-1px);
}

.theme-health .disclaimer {
  color: rgba(7, 29, 48, 0.6) !important;
}

.theme-health .disclaimer strong {
  color: #071d30 !important;
}

.theme-health .sidebar-bottom {
  color: rgba(7, 29, 48, 0.65) !important;
}

.theme-health .sidebar-bottom span {
  color: #071d30 !important;
  font-weight: 600;
}

/* Welcome UI */
.theme-health .welcome h2 {
  color: #071d30 !important;
}

.theme-health .welcome p {
  color: rgba(7, 29, 48, 0.8) !important;
}

.theme-health .welcome-icon {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  color: #0284c7 !important;
  box-shadow: 0 0 30px rgba(14, 165, 233, 0.1) !important;
}

.theme-health .example-card {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(14, 165, 233, 0.15) !important;
  color: #071d30 !important;
  transition: all 0.3s ease !important;
}

.theme-health .example-card:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(14, 165, 233, 0.4) !important;
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.1) !important;
  color: #0284c7 !important;
  transform: translateY(-2px);
}

/* Thinking status */
.theme-health .thinking-bubble {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.theme-health .thinking-label {
  color: #071d30 !important;
}

.theme-health .thinking-dots span {
  background: #071d30 !important;
  box-shadow: 0 0 6px rgba(7, 29, 48, 0.3) !important;
}

/* Quota overrides for health theme */
.chat-view.theme-health .quota-pill { background: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.35); }
.chat-view.theme-health .quota-pill.exhausted { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); }
.chat-view.theme-health .quota-text { color: #071d30; }
.chat-view.theme-health .quota-label { color: rgba(7,29,48,0.65); }
.chat-view.theme-health .quota-indicator { background: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.3); }
.chat-view.theme-health .quota-plan-label { color: rgba(7,29,48,0.65) !important; }
.chat-view.theme-health .quota-bar-bg { background: rgba(255,255,255,0.35) !important; }

/* Edit history items for health theme */
.theme-health .history-item.editing { background: rgba(255,255,255,0.3) !important; border-color: rgba(255,255,255,0.35) !important; }
.theme-health .hi-edit-input { background: rgba(255,255,255,0.55); border: 1px solid rgba(28,98,149,0.4); color: #071d30; }
.theme-health .hi-edit-input:focus { border-color: rgba(28,98,149,0.7); box-shadow: 0 0 5px rgba(28,98,149,0.2); }
.theme-health .hi-edit-btn { color: rgba(7,29,48,0.7); }
.theme-health .hi-edit-btn:hover { background: rgba(255,255,255,0.3); color: #071d30; }
.theme-health .hi-action-btn:hover { background: rgba(255,255,255,0.25); color: #071d30; }

/* Settings Dropdown — health theme */
.chat-view.theme-health .settings-menu {
  background: rgba(220, 240, 255, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(28,98,149,0.25);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.chat-view.theme-health .settings-item { color: #1c3d5a; }
.chat-view.theme-health .settings-item:hover { background: rgba(28,98,149,0.12); color: #071d30; }
.chat-view.theme-health .settings-divider { background: rgba(28,98,149,0.2); }
.chat-view.theme-health .settings-item.danger:hover { background: rgba(239,68,68,0.1); color: #dc2626; }

/* Settings Modal — health theme */
.chat-view.theme-health .modal-window {
  background: rgba(220, 240, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(28,98,149,0.25);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.chat-view.theme-health .modal-header { border-bottom: 1px solid rgba(28,98,149,0.2); background: rgba(200,230,255,0.6); }
.chat-view.theme-health .modal-header h2 { color: #071d30; }
.chat-view.theme-health .modal-close-btn { color: rgba(7,29,48,0.6); }
.chat-view.theme-health .modal-close-btn:hover { background: rgba(28,98,149,0.1); color: #071d30; }
.chat-view.theme-health .modal-tabs-sidebar { background: rgba(200,230,255,0.5); border-right: 1px solid rgba(28,98,149,0.2); }
.chat-view.theme-health .modal-tabs-sidebar .tab-btn { color: rgba(7,29,48,0.7); }
.chat-view.theme-health .modal-tabs-sidebar .tab-btn:hover { background: rgba(28,98,149,0.08); color: #071d30; }
.chat-view.theme-health .modal-tabs-sidebar .tab-btn.active { background: rgba(28,98,149,0.15); border-color: rgba(28,98,149,0.35); color: #071d30; }
.chat-view.theme-health .modal-tabs-content { background: rgba(235,248,255,0.8); }
.chat-view.theme-health .tab-content-pane h3 { color: #071d30; }
.chat-view.theme-health .tab-pane-desc,
.chat-view.theme-health .settings-section-title,
.chat-view.theme-health .settings-form-group label { color: rgba(7,29,48,0.65); }
.chat-view.theme-health .settings-input { background: rgba(255,255,255,0.7); border: 1px solid rgba(28,98,149,0.35); color: #071d30; }
.chat-view.theme-health .settings-input:focus { border-color: rgba(28,98,149,0.6); box-shadow: 0 0 5px rgba(28,98,149,0.2); }

/* Settings modal contrast overrides for theme-health */
.chat-view.theme-health #settingsModal {
  --text: #071d30;
  --text-m: #334e68;
  --border: rgba(28, 98, 149, 0.15);
}
.chat-view.theme-health #settingsModal .pricing-card {
  background: rgba(28, 98, 149, 0.05);
}
.chat-view.theme-health #settingsModal .pricing-card.premium {
  background: rgba(28, 98, 149, 0.08);
}
.chat-view.theme-health #settingsModal .pc-features li:before {
  color: #1c6295;
}
.chat-view.theme-health #settingsModal .launch-banner div div {
  color: #071d30 !important;
}
.chat-view.theme-health #settingsModal .launch-banner div div:first-child {
  color: #1e1b4b !important;
}
.chat-view.theme-health #settingsModal .launch-banner div div span,
.chat-view.theme-health #settingsModal .launch-banner div div strong {
  color: #047857 !important;
}
.chat-view.theme-health #settingsModal div[style*="margin-top:20px"] div {
  color: #334e68 !important;
}
.chat-view.theme-health #settingsModal div[style*="margin-top:20px"] div:first-child {
  color: #071d30 !important;
}
.chat-view.theme-health #settingsModal .pc-price span {
  color: #334e68 !important;
}
.chat-view.theme-health #settingsModal .pmc-usdt-address {
  color: #b45309 !important;
}
.chat-view.theme-health #settingsModal .pmc-usdt-copy {
  color: #2563eb !important;
}
.chat-view.theme-health #settingsModal .pmc-usdt-copy:hover {
  color: #1d4ed8 !important;
}
.chat-view.theme-health #settingsModal .pill-free {
  color: #4b5563 !important;
  background: rgba(75, 85, 99, 0.1) !important;
}
.chat-view.theme-health #settingsModal .pill-admin {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.1) !important;
}
.chat-view.theme-health #settingsModal .stat-card {
  background: rgba(0, 0, 0, 0.02);
}
.chat-view.theme-health #settingsModal .tier-bars {
  background: rgba(0, 0, 0, 0.01);
}
.chat-view.theme-health #settingsModal .data-table td {
  border-bottom-color: var(--border);
}
.chat-view.theme-health #settingsModal .data-table th {
  background: rgba(0, 0, 0, 0.03);
}

/* Quota Base Classes */
.quota-pill {
  display: flex; align-items: center; gap: 6px; border-radius: 20px; padding: 5px 12px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
}
.quota-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; display: inline-block; }
.quota-text { font-size: 12px; font-weight: 600; color: #e4e4e7; }
.quota-label { font-size: 11px; color: #71717a; }
.quota-indicator { display: flex; flex-direction: column; width: 100%; padding: 8px 10px; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); }
.quota-plan-label { color: #a1a1aa; }

/* Custom quota banner styling */
.chat-quota-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--text-m);
  margin-bottom: 0.4rem;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease;
  opacity: 0.85;
}
.chat-view.theme-health .chat-quota-banner {
  color: rgba(7, 29, 48, 0.7);
}
.chat-view.theme-legal .chat-quota-banner {
  color: rgba(30, 41, 59, 0.7);
}
.chat-quota-banner .quota-banner-icon {
  font-size: 0.75rem;
}
.chat-quota-banner .quota-banner-link {
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
  margin-left: 2px;
  transition: opacity 0.2s;
}
.chat-view.theme-health .chat-quota-banner .quota-banner-link {
  color: #1c6295;
}
.chat-view.theme-legal .chat-quota-banner .quota-banner-link {
  color: #1d4ed8;
}

.theme-legal{
  --accent: #2c5282;
  --accent2: #1a365d;
  --chat-bg: #fdfcf7; /* Creamy white */
  --chat-glow: rgba(168,200,232,0.45);
  --chat-border: rgba(168,200,232,0.6);
  color: #1e293b;
}
.theme-legal .new-btn{background:linear-gradient(135deg,#2c5282,#4299e1);color:#fff}
.theme-legal .welcome-icon{background:#f1f5f9;border:1px solid rgba(168,200,232,.5);color:#2c5282}
.theme-legal .agent-avatar{background:#f1f5f9;border:1px solid rgba(168,200,232,.4);color:#2c5282}
.theme-legal .header-icon{background:transparent;color:#2c5282}
.theme-legal .msg-user .bubble{background:#bde0fe;color:#0f172a}
.theme-legal .welcome h2, .theme-legal .header-brand span, .theme-legal .welcome p{color:#1e293b}

/* Forzamos opacidad sólida para evitar que el blur mezcle con el fondo oscuro global */
.chat-view.theme-legal .chat-header{background:#fdfcf7 !important; border-bottom:1px solid rgba(168,200,232,0.4); backdrop-filter:none !important;}
.chat-view.theme-legal .sidebar{background:#f8fafc !important; border-right:1px solid rgba(168,200,232,0.4); backdrop-filter:none !important;}
.chat-view.theme-legal .input-area{background:#fdfcf7 !important; border-top:1px solid rgba(168,200,232,0.4); backdrop-filter:none !important;}
.chat-view.theme-legal{
  background:#fdfcf7 !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}
.chat-view.theme-legal::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(168,200,232,0.18) 0%, rgba(191,219,254,0.08) 40%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: legalAmbientPulse 8s ease-in-out infinite;
}
.chat-view.theme-legal::after {
  content: '';
  position: absolute;
  bottom: 5%;
  right: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(253,230,138,0.1) 0%, rgba(254,215,170,0.05) 40%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: legalAmbientPulse 10s ease-in-out infinite reverse;
}

@keyframes legalAmbientPulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

/* Soft glow on agent response cards */
.theme-legal .agent-content{
  background: rgba(241,245,249,0.85);
  border: 1px solid rgba(168,200,232,.3);
  color: #334155;
  box-shadow: 0 1px 12px rgba(168,200,232,0.12), 0 0 30px rgba(191,219,254,0.06);
}
/* Subtle warm glow on headings inside responses */
.theme-legal .agent-content h1,
.theme-legal .agent-content h2,
.theme-legal .agent-content h3,
.theme-legal .agent-content strong {
  color: #0f172a;
  text-shadow: 0 0 20px rgba(168,200,232,0.2);
}

/* Header title warm glow */
.theme-legal .header-brand h1 {
  text-shadow: 0 0 18px rgba(168,200,232,0.25);
}

/* Quota overrides for light theme */
.chat-view.theme-legal .quota-pill { background: rgba(168,200,232,0.15); border: 1px solid rgba(168,200,232,0.4); }
.chat-view.theme-legal .quota-pill.exhausted { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.4); }
.chat-view.theme-legal .quota-text { color: #1e293b; }
.chat-view.theme-legal .quota-label { color: #64748b; }
.chat-view.theme-legal .quota-indicator { background: rgba(241,245,249,0.9); border: 1px solid rgba(168,200,232,0.3); }
.chat-view.theme-legal .quota-plan-label { color: #64748b !important; }
.chat-view.theme-legal .quota-bar-bg { background: rgba(168,200,232,0.3) !important; }

.theme-legal textarea, .theme-legal .hi-title{color:#1e293b}
.theme-legal textarea::placeholder{color:#64748b}
.theme-legal .input-wrapper{background:#ffffff;border:1px solid rgba(168,200,232,0.5)}
.theme-legal .disclaimer, .theme-legal .sidebar-bottom, .theme-legal .hi-time{color:#64748b}
.theme-legal .example-card{background:#f1f5f9;border:1px solid rgba(168,200,232,.3);color:#475569}
.theme-legal .example-card:hover{background:#e2e8f0;color:#1e293b}
.theme-legal .history-item:hover{background:#f1f5f9;border-color:rgba(168,200,232,.3)}
.theme-legal .history-item.active{background:#e0f2fe;border-color:rgba(168,200,232,.6)}
.theme-legal .sidebar-top h3{color:#475569}
.theme-legal .back-btn, .theme-legal .settings-btn{background:#f1f5f9;border-color:rgba(168,200,232,.4);color:#475569}
.theme-legal .back-btn:hover, .theme-legal .settings-btn:hover{background:#e2e8f0;color:#0f172a}
.theme-legal .hi-action-btn:hover{background:rgba(0,0,0,0.08);color:#1e293b}
.theme-legal .thinking-bubble{background:#f1f5f9;border-color:rgba(168,200,232,.3)}
.theme-legal .thinking-label{color:#64748b}

/* Edit history items light theme */
.theme-legal .history-item.editing{background:#f1f5f9;border-color:rgba(168,200,232,0.4)}
.theme-legal .hi-edit-input{background:#ffffff;border:1px solid rgba(168,200,232,0.5);color:#0f172a}
.theme-legal .hi-edit-input:focus{border-color:#2c5282;box-shadow:0 0 5px rgba(168,200,232,0.3)}
.theme-legal .hi-edit-btn{color:#64748b}
.theme-legal .hi-edit-btn:hover{background:rgba(0,0,0,0.05);color:#0f172a}

/* Settings Dropdown and Modal Legal Theme */
.chat-view.theme-legal .settings-menu { background: #ffffff; border-color: rgba(168,200,232,0.4); }
.chat-view.theme-legal .settings-item { color: #475569; }
.chat-view.theme-legal .settings-item:hover { background: #f1f5f9; color: #0f172a; }
.chat-view.theme-legal .settings-divider { background: rgba(168,200,232,0.3); }

.chat-view.theme-legal .modal-window { background: #fdfcf7; border: 1px solid rgba(168,200,232,0.4); }
.chat-view.theme-legal .modal-header { border-bottom: 1px solid rgba(168,200,232,0.4); background: #f8fafc; }
.chat-view.theme-legal .modal-header h2 { color: #1e293b; }
.chat-view.theme-legal .modal-close-btn { color: #64748b; }
.chat-view.theme-legal .modal-close-btn:hover { background: rgba(0,0,0,0.05); color: #0f172a; }
.chat-view.theme-legal .modal-tabs-sidebar { background: #f1f5f9; border-right: 1px solid rgba(168,200,232,0.4); }
.chat-view.theme-legal .modal-tabs-sidebar .tab-btn { color: #475569; }
.chat-view.theme-legal .modal-tabs-sidebar .tab-btn:hover { background: rgba(0,0,0,0.03); color: #0f172a; }
.chat-view.theme-legal .modal-tabs-sidebar .tab-btn.active { background: rgba(168,200,232,0.2); border-color: rgba(168,200,232,0.5); color: #2c5282; }
.chat-view.theme-legal .modal-tabs-content { background: #ffffff; }
.chat-view.theme-legal .tab-content-pane h3 { color: #1e293b; }
.chat-view.theme-legal .tab-pane-desc, .chat-view.theme-legal .settings-section-title, .chat-view.theme-legal .settings-form-group label { color: #64748b; }
.chat-view.theme-legal .settings-input { background: #f8fafc; border: 1px solid rgba(168,200,232,0.5); color: #0f172a; }
.chat-view.theme-legal .settings-input:focus { border-color: #2c5282; box-shadow: 0 0 5px rgba(168,200,232,0.4); }

/* Settings modal contrast overrides for theme-legal */
.chat-view.theme-legal #settingsModal {
  --text: #1e293b;
  --text-m: #475569;
  --border: rgba(168, 200, 232, 0.25);
}
.chat-view.theme-legal #settingsModal .pricing-card {
  background: #f1f5f9;
}
.chat-view.theme-legal #settingsModal .pricing-card.premium {
  background: #f8fafc;
}
.chat-view.theme-legal #settingsModal .pc-features li:before {
  color: #2c5282;
}
.chat-view.theme-legal #settingsModal .launch-banner div div {
  color: #1e293b !important;
}
.chat-view.theme-legal #settingsModal .launch-banner div div:first-child {
  color: #1e1b4b !important;
}
.chat-view.theme-legal #settingsModal .launch-banner div div span,
.chat-view.theme-legal #settingsModal .launch-banner div div strong {
  color: #047857 !important;
}
.chat-view.theme-legal #settingsModal div[style*="margin-top:20px"] div {
  color: #475569 !important;
}
.chat-view.theme-legal #settingsModal div[style*="margin-top:20px"] div:first-child {
  color: #1e293b !important;
}
.chat-view.theme-legal #settingsModal .pc-price span {
  color: #475569 !important;
}
.chat-view.theme-legal #settingsModal .pmc-usdt-address {
  color: #b45309 !important;
}
.chat-view.theme-legal #settingsModal .pmc-usdt-copy {
  color: #2563eb !important;
}
.chat-view.theme-legal #settingsModal .pmc-usdt-copy:hover {
  color: #1d4ed8 !important;
}
.chat-view.theme-legal #settingsModal .pill-free {
  color: #4b5563 !important;
  background: rgba(75, 85, 99, 0.1) !important;
}
.chat-view.theme-legal #settingsModal .pill-admin {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.1) !important;
}
.chat-view.theme-legal #settingsModal .stat-card {
  background: rgba(0, 0, 0, 0.02);
}
.chat-view.theme-legal #settingsModal .tier-bars {
  background: rgba(0, 0, 0, 0.01);
}
.chat-view.theme-legal #settingsModal .data-table td {
  border-bottom-color: var(--border);
}
.chat-view.theme-legal #settingsModal .data-table th {
  background: rgba(0, 0, 0, 0.03);
}

.theme-genomic{
  --accent:var(--genomic);
  --accent2:#a8b8ff;
  --chat-bg: rgba(46,204,113,0.015);
  --chat-glow: rgba(46,204,113,0.25);
  --chat-border: rgba(46,204,113,0.3);
}
.theme-genomic .new-btn{background:linear-gradient(135deg,var(--genomic),rgba(139,156,247,.5))}
.theme-genomic .welcome-icon{background:var(--genomic-bg);border:1px solid rgba(139,156,247,.18);color:var(--genomic)}
.theme-genomic .agent-avatar{background:var(--genomic-bg);border:1px solid rgba(139,156,247,.12);color:var(--genomic)}
.theme-genomic .header-icon{background:var(--genomic-bg);color:var(--genomic)}
.theme-genomic .msg-user .bubble{background:linear-gradient(135deg,rgba(139,156,247,.8),rgba(139,156,247,.5))}

/* Background override ONLY — resto del dark/neon se hereda del base theme */
.chat-view.theme-genomic {
  background: linear-gradient(135deg, #071a0f 0%, #0a2e1a 40%, #03120a 100%) !important;
}

/* ─── THEME VETERINARY ─── */
.theme-veterinary {
  --accent: var(--veterinary);
  --accent2: #fcd34d;
  --chat-bg: rgba(245,158,11,0.015);
  --chat-glow: rgba(245,158,11,0.22);
  --chat-border: rgba(245,158,11,0.3);
}
.theme-veterinary .new-btn { background: linear-gradient(135deg, var(--veterinary), rgba(245,158,11,0.5)); color: #0c0800; }
.theme-veterinary .welcome-icon { background: var(--veterinary-bg); border: 1px solid rgba(245,158,11,.18); color: var(--veterinary); }
.theme-veterinary .agent-avatar { background: var(--veterinary-bg); border: 1px solid rgba(245,158,11,.12); color: var(--veterinary); }
.theme-veterinary .header-icon { background: var(--veterinary-bg); color: var(--veterinary); }
.theme-veterinary .msg-user .bubble { background: linear-gradient(135deg, rgba(245,158,11,.85), rgba(245,158,11,.55)); color: #0c0800; }
.theme-veterinary .header-brand h1 { background: linear-gradient(135deg, var(--veterinary), #fcd34d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-veterinary .header-brand span { color: var(--veterinary); opacity: 0.8; }
.theme-veterinary .back-btn, .theme-veterinary .settings-btn { color: var(--veterinary); }
.theme-veterinary .back-btn:hover, .theme-veterinary .settings-btn:hover { background: var(--veterinary-bg); border-color: var(--veterinary); }
.theme-veterinary .send-btn { background: linear-gradient(135deg, var(--veterinary), #d97706); color: #0c0800; }
.theme-veterinary .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(245,158,11,0.5); transform: scale(1.05); }
.theme-veterinary .input-wrapper { border-color: rgba(245,158,11,0.25); }
.theme-veterinary .input-wrapper:focus-within { border-color: var(--veterinary); box-shadow: 0 0 0 3px rgba(245,158,11,0.1); }
.theme-veterinary .history-item:hover { background: rgba(245,158,11,0.07); }
.theme-veterinary .history-item.active { background: rgba(245,158,11,0.12); border-left: 3px solid var(--veterinary); }
.theme-veterinary .history-item.active .hi-title { color: var(--veterinary); }
.theme-veterinary .agent-content h1, .theme-veterinary .agent-content h2, .theme-veterinary .agent-content h3, .theme-veterinary .agent-content strong { color: var(--veterinary); }
.theme-veterinary .disclaimer strong { color: var(--veterinary); }
.theme-veterinary .quota-pill { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: var(--veterinary); }
.chat-view.theme-veterinary { background: linear-gradient(135deg, #1a0f00 0%, #2d1a00 40%, #0d0800 100%) !important; }

.theme-mecanico {
  --accent: var(--mecanico);
  --accent2: #f472b6;
  --chat-bg: rgba(168,85,247,0.015);
  --chat-glow: rgba(168,85,247,0.22);
  --chat-border: rgba(168,85,247,0.3);
}
.theme-mecanico .new-btn { background: linear-gradient(135deg, var(--mecanico), rgba(168,85,247,0.5)); color: #ffffff; }
.theme-mecanico .welcome-icon { background: var(--mecanico-bg); border: 1px solid rgba(168,85,247,.18); color: var(--mecanico); }
.theme-mecanico .agent-avatar { background: var(--mecanico-bg); border: 1px solid rgba(168,85,247,.12); color: var(--mecanico); }
.theme-mecanico .header-icon { background: var(--mecanico-bg); color: var(--mecanico); }
.theme-mecanico .msg-user .bubble { background: linear-gradient(135deg, rgba(168,85,247,.85), rgba(168,85,247,.55)); color: #ffffff; }
.theme-mecanico .header-brand h1 { background: linear-gradient(135deg, var(--mecanico), #f472b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-mecanico .header-brand span { color: var(--mecanico); opacity: 0.8; }
.theme-mecanico .back-btn, .theme-mecanico .settings-btn { color: var(--mecanico); }
.theme-mecanico .back-btn:hover, .theme-mecanico .settings-btn:hover { background: var(--mecanico-bg); border-color: var(--mecanico); }
.theme-mecanico .send-btn { background: linear-gradient(135deg, var(--mecanico), #7c3aed); color: #ffffff; }
.theme-mecanico .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(168,85,247,0.5); transform: scale(1.05); }
.theme-mecanico .input-wrapper { border-color: rgba(168,85,247,0.25); }
.theme-mecanico .input-wrapper:focus-within { border-color: var(--mecanico); box-shadow: 0 0 0 3px rgba(168,85,247,0.1); }
.theme-mecanico .history-item:hover { background: rgba(168,85,247,0.07); }
.theme-mecanico .history-item.active { background: rgba(168,85,247,0.12); border-left: 3px solid var(--mecanico); }
.theme-mecanico .history-item.active .hi-title { color: var(--mecanico); }
.theme-mecanico .agent-content h1, .theme-mecanico .agent-content h2, .theme-mecanico .agent-content h3, .theme-mecanico .agent-content strong { color: var(--mecanico); }
.theme-mecanico .disclaimer strong { color: var(--mecanico); }
.theme-mecanico .quota-pill { background: rgba(168,85,247,0.12); border: 1px solid rgba(168,85,247,0.3); color: var(--mecanico); }
.chat-view.theme-mecanico { background: linear-gradient(135deg, #18052b 0%, #2b084c 40%, #0c0216 100%) !important; }

.theme-electrico {
  --accent: var(--electrico);
  --accent2: #fcd34d;
  --chat-bg: rgba(234,179,8,0.015);
  --chat-glow: rgba(234,179,8,0.22);
  --chat-border: rgba(234,179,8,0.3);
}
.theme-electrico .new-btn { background: linear-gradient(135deg, var(--electrico), rgba(234,179,8,0.5)); color: #0c0800; }
.theme-electrico .welcome-icon { background: var(--electrico-bg); border: 1px solid rgba(234,179,8,.18); color: var(--electrico); }
.theme-electrico .agent-avatar { background: var(--electrico-bg); border: 1px solid rgba(234,179,8,.12); color: var(--electrico); }
.theme-electrico .header-icon { background: var(--electrico-bg); color: var(--electrico); }
.theme-electrico .msg-user .bubble { background: linear-gradient(135deg, rgba(234,179,8,.85), rgba(234,179,8,.55)); color: #0c0800; }
.theme-electrico .header-brand h1 { background: linear-gradient(135deg, var(--electrico), #fcd34d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-electrico .header-brand span { color: var(--electrico); opacity: 0.8; }
.theme-electrico .back-btn, .theme-electrico .settings-btn { color: var(--electrico); }
.theme-electrico .back-btn:hover, .theme-electrico .settings-btn:hover { background: var(--electrico-bg); border-color: var(--electrico); }
.theme-electrico .send-btn { background: linear-gradient(135deg, var(--electrico), #d97706); color: #0c0800; }
.theme-electrico .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(234,179,8,0.5); transform: scale(1.05); }
.theme-electrico .input-wrapper { border-color: rgba(234,179,8,0.25); }
.theme-electrico .input-wrapper:focus-within { border-color: var(--electrico); box-shadow: 0 0 0 3px rgba(234,179,8,0.1); }
.theme-electrico .history-item:hover { background: rgba(234,179,8,0.07); }
.theme-electrico .history-item.active { background: rgba(234,179,8,0.12); border-left: 3px solid var(--electrico); }
.theme-electrico .history-item.active .hi-title { color: var(--electrico); }
.theme-electrico .agent-content h1, .theme-electrico .agent-content h2, .theme-electrico .agent-content h3, .theme-electrico .agent-content strong { color: var(--electrico); }
.theme-electrico .disclaimer strong { color: var(--electrico); }
.theme-electrico .quota-pill { background: rgba(234,179,8,0.12); border: 1px solid rgba(234,179,8,0.3); color: var(--electrico); }
.chat-view.theme-electrico { background: linear-gradient(135deg, #1a0f00 0%, #2d1a00 40%, #0d0800 100%) !important; }

.theme-marketing {
  --accent: var(--marketing);
  --accent2: #f472b6;
  --chat-bg: rgba(232,121,249,0.015);
  --chat-glow: rgba(232,121,249,0.22);
  --chat-border: rgba(232,121,249,0.3);
}
.theme-marketing .new-btn { background: linear-gradient(135deg, var(--marketing), rgba(232,121,249,0.5)); color: #fff; }
.theme-marketing .welcome-icon { background: var(--marketing-bg); border: 1px solid rgba(232,121,249,.18); color: var(--marketing); }
.theme-marketing .agent-avatar { background: var(--marketing-bg); border: 1px solid rgba(232,121,249,.12); color: var(--marketing); }
.theme-marketing .header-icon { background: var(--marketing-bg); color: var(--marketing); }
.theme-marketing .msg-user .bubble { background: linear-gradient(135deg, rgba(232,121,249,.85), rgba(232,121,249,.55)); color: #fff; }
.theme-marketing .header-brand h1 { background: linear-gradient(135deg, var(--marketing), #f472b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-marketing .header-brand span { color: var(--marketing); opacity: 0.8; }
.theme-marketing .back-btn, .theme-marketing .settings-btn { color: var(--marketing); }
.theme-marketing .back-btn:hover, .theme-marketing .settings-btn:hover { background: var(--marketing-bg); border-color: var(--marketing); }
.theme-marketing .send-btn { background: linear-gradient(135deg, var(--marketing), #c084fc); color: #fff; }
.theme-marketing .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(232,121,249,0.5); transform: scale(1.05); }
.theme-marketing .input-wrapper { border-color: rgba(232,121,249,0.25); }
.theme-marketing .input-wrapper:focus-within { border-color: var(--marketing); box-shadow: 0 0 0 3px rgba(232,121,249,0.1); }
.theme-marketing .history-item:hover { background: rgba(232,121,249,0.07); }
.theme-marketing .history-item.active { background: rgba(232,121,249,0.12); border-left: 3px solid var(--marketing); }
.theme-marketing .history-item.active .hi-title { color: var(--marketing); }
.theme-marketing .agent-content h1, .theme-marketing .agent-content h2, .theme-marketing .agent-content h3, .theme-marketing .agent-content strong { color: var(--marketing); }
.theme-marketing .disclaimer strong { color: var(--marketing); }
.theme-marketing .quota-pill { background: rgba(232,121,249,0.12); border: 1px solid rgba(232,121,249,0.3); color: var(--marketing); }
.chat-view.theme-marketing { background: linear-gradient(135deg, #1f0325 0%, #3a0647 40%, #0d0110 100%) !important; }

.theme-logistico {
  --accent: var(--logistico);
  --accent2: #fb923c;
  --chat-bg: rgba(249,115,22,0.015);
  --chat-glow: rgba(249,115,22,0.22);
  --chat-border: rgba(249,115,22,0.3);
}
.theme-logistico .new-btn { background: linear-gradient(135deg, var(--logistico), rgba(249,115,22,0.5)); color: #fff; }
.theme-logistico .welcome-icon { background: var(--logistico-bg); border: 1px solid rgba(249,115,22,.18); color: var(--logistico); }
.theme-logistico .agent-avatar { background: var(--logistico-bg); border: 1px solid rgba(249,115,22,.12); color: var(--logistico); }
.theme-logistico .header-icon { background: var(--logistico-bg); color: var(--logistico); }
.theme-logistico .msg-user .bubble { background: linear-gradient(135deg, rgba(249,115,22,.85), rgba(249,115,22,.55)); color: #fff; }
.theme-logistico .header-brand h1 { background: linear-gradient(135deg, var(--logistico), #fb923c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-logistico .header-brand span { color: var(--logistico); opacity: 0.8; }
.theme-logistico .back-btn, .theme-logistico .settings-btn { color: var(--logistico); }
.theme-logistico .back-btn:hover, .theme-logistico .settings-btn:hover { background: var(--logistico-bg); border-color: var(--logistico); }
.theme-logistico .send-btn { background: linear-gradient(135deg, var(--logistico), #ea580c); color: #fff; }
.theme-logistico .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(249,115,22,0.5); transform: scale(1.05); }
.theme-logistico .input-wrapper { border-color: rgba(249,115,22,0.25); }
.theme-logistico .input-wrapper:focus-within { border-color: var(--logistico); box-shadow: 0 0 0 3px rgba(249,115,22,0.1); }
.theme-logistico .history-item:hover { background: rgba(249,115,22,0.07); }
.theme-logistico .history-item.active { background: rgba(249,115,22,0.12); border-left: 3px solid var(--logistico); }
.theme-logistico .history-item.active .hi-title { color: var(--logistico); }
.theme-logistico .agent-content h1, .theme-logistico .agent-content h2, .theme-logistico .agent-content h3, .theme-logistico .agent-content strong { color: var(--logistico); }
.theme-logistico .disclaimer strong { color: var(--logistico); }
.theme-logistico .quota-pill { background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.3); color: var(--logistico); }
.chat-view.theme-logistico { background: linear-gradient(135deg, #1f0a00 0%, #361200 40%, #100500 100%) !important; }

/* ─── THEME GEÓLOGO ─── */
.theme-geologo {
  --accent: var(--geologo);
  --glow: rgba(120,165,90,0.15);
  --accent2: #b5d99c;
}
.theme-geologo .new-btn { background: linear-gradient(135deg, var(--geologo), rgba(120,165,90,0.5)); color: #fff; }
.theme-geologo .welcome-icon { background: var(--geologo-bg); border: 1px solid rgba(120,165,90,.18); color: var(--geologo); }
.theme-geologo .agent-avatar { background: var(--geologo-bg); border: 1px solid rgba(120,165,90,.12); color: var(--geologo); }
.theme-geologo .header-icon { background: var(--geologo-bg); color: var(--geologo); }
.theme-geologo .msg-user .bubble { background: linear-gradient(135deg, rgba(120,165,90,.85), rgba(90,140,60,.55)); color: #fff; }
.theme-geologo .header-brand h1 { background: linear-gradient(135deg, var(--geologo), #b5d99c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-geologo .header-brand span { color: var(--geologo); opacity: 0.8; }
.theme-geologo .back-btn, .theme-geologo .settings-btn { color: var(--geologo); }
.theme-geologo .back-btn:hover, .theme-geologo .settings-btn:hover { background: var(--geologo-bg); border-color: var(--geologo); }
.theme-geologo .send-btn { background: linear-gradient(135deg, var(--geologo), #5a8c3c); color: #fff; }
.theme-geologo .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(120,165,90,0.5); transform: scale(1.05); }
.theme-geologo .input-wrapper { border-color: rgba(120,165,90,0.25); }
.theme-geologo .input-wrapper:focus-within { border-color: var(--geologo); box-shadow: 0 0 0 3px rgba(120,165,90,0.1); }
.theme-geologo .history-item:hover { background: rgba(120,165,90,0.07); }
.theme-geologo .history-item.active { background: rgba(120,165,90,0.12); border-left: 3px solid var(--geologo); }
.theme-geologo .history-item.active .hi-title { color: var(--geologo); }
.theme-geologo .agent-content h1, .theme-geologo .agent-content h2, .theme-geologo .agent-content h3, .theme-geologo .agent-content strong { color: var(--geologo); }
.theme-geologo .disclaimer strong { color: var(--geologo); }
.theme-geologo .quota-pill { background: rgba(120,165,90,0.12); border: 1px solid rgba(120,165,90,0.3); color: var(--geologo); }
.chat-view.theme-geologo { background: linear-gradient(135deg, #0a130a 0%, #112011 40%, #060d06 100%) !important; }

.theme-civil {
  --accent: var(--civil);
  --glow: rgba(14,165,233,0.15);
  --accent2: #7dd3fc;
}
.theme-civil .new-btn { background: linear-gradient(135deg, var(--civil), rgba(14,165,233,0.5)); color: #fff; }
.theme-civil .welcome-icon { background: var(--civil-bg); border: 1px solid rgba(14,165,233,.18); color: var(--civil); }
.theme-civil .agent-avatar { background: var(--civil-bg); border: 1px solid rgba(14,165,233,.12); color: var(--civil); }
.theme-civil .header-icon { background: var(--civil-bg); color: var(--civil); }
.theme-civil .msg-user .bubble { background: linear-gradient(135deg, rgba(14,165,233,.85), rgba(3,105,161,.55)); color: #fff; }
.theme-civil .header-brand h1 { background: linear-gradient(135deg, var(--civil), #7dd3fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-civil .header-brand span { color: var(--civil); opacity: 0.8; }
.theme-civil .back-btn, .theme-civil .settings-btn { color: var(--civil); }
.theme-civil .back-btn:hover, .theme-civil .settings-btn:hover { background: var(--civil-bg); border-color: var(--civil); }
.theme-civil .send-btn { background: linear-gradient(135deg, var(--civil), #0369a1); color: #fff; }
.theme-civil .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(14,165,233,0.5); transform: scale(1.05); }
.theme-civil .input-wrapper { border-color: rgba(14,165,233,0.25); }
.theme-civil .input-wrapper:focus-within { border-color: var(--civil); box-shadow: 0 0 0 3px rgba(14,165,233,0.1); }
.theme-civil .history-item:hover { background: rgba(14,165,233,0.07); }
.theme-civil .history-item.active { background: rgba(14,165,233,0.12); border-left: 3px solid var(--civil); }
.theme-civil .history-item.active .hi-title { color: var(--civil); }
.theme-civil .agent-content h1, .theme-civil .agent-content h2, .theme-civil .agent-content h3, .theme-civil .agent-content strong { color: var(--civil); }
.theme-civil .disclaimer strong { color: var(--civil); }
.theme-civil .quota-pill { background: rgba(14,165,233,0.12); border: 1px solid rgba(14,165,233,0.3); color: var(--civil); }
.chat-view.theme-civil { background: linear-gradient(135deg, #051622 0%, #0b253a 40%, #020b12 100%) !important; }

/* ─── THEME ARQUITECTO ─── */
.theme-arquitecto {
  --accent: var(--arquitecto);
  --glow: rgba(20,184,166,0.15);
  --accent2: #2dd4bf;
}
.theme-arquitecto .new-btn { background: linear-gradient(135deg, var(--arquitecto), rgba(20,184,166,0.5)); color: #fff; }
.theme-arquitecto .welcome-icon { background: var(--arquitecto-bg); border: 1px solid rgba(20,184,166,.18); color: var(--arquitecto); }
.theme-arquitecto .agent-avatar { background: var(--arquitecto-bg); border: 1px solid rgba(20,184,166,.12); color: var(--arquitecto); }
.theme-arquitecto .header-icon { background: var(--arquitecto-bg); color: var(--arquitecto); }
.theme-arquitecto .msg-user .bubble { background: linear-gradient(135deg, rgba(20,184,166,.85), rgba(13,148,136,.55)); color: #fff; }
.theme-arquitecto .header-brand h1 { background: linear-gradient(135deg, var(--arquitecto), #5eead4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-arquitecto .header-brand span { color: var(--arquitecto); opacity: 0.8; }
.theme-arquitecto .back-btn, .theme-arquitecto .settings-btn { color: var(--arquitecto); }
.theme-arquitecto .back-btn:hover, .theme-arquitecto .settings-btn:hover { background: var(--arquitecto-bg); border-color: var(--arquitecto); }
.theme-arquitecto .send-btn { background: linear-gradient(135deg, var(--arquitecto), #0d9488); color: #fff; }
.theme-arquitecto .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(20,184,166,0.5); transform: scale(1.05); }
.theme-arquitecto .input-wrapper { border-color: rgba(20,184,166,0.25); }
.theme-arquitecto .input-wrapper:focus-within { border-color: var(--arquitecto); box-shadow: 0 0 0 3px rgba(20,184,166,0.1); }
.theme-arquitecto .history-item:hover { background: rgba(20,184,166,0.07); }
.theme-arquitecto .history-item.active { background: rgba(20,184,166,0.12); border-left: 3px solid var(--arquitecto); }
.theme-arquitecto .history-item.active .hi-title { color: var(--arquitecto); }
.theme-arquitecto .agent-content h1, .theme-arquitecto .agent-content h2, .theme-arquitecto .agent-content h3, .theme-arquitecto .agent-content strong { color: var(--arquitecto); }
.theme-arquitecto .disclaimer strong { color: var(--arquitecto); }
.theme-arquitecto .quota-pill { background: rgba(20,184,166,0.12); border: 1px solid rgba(20,184,166,0.3); color: var(--arquitecto); }
.chat-view.theme-arquitecto { background: linear-gradient(135deg, #041b18 0%, #0d3530 40%, #010c0b 100%) !important; }

/* ─── THEME CONTADOR AUDITOR ─── */
.theme-contador {
  --accent: var(--contador);
  --glow: rgba(59,130,246,0.15);
  --accent2: #60a5fa;
}
.theme-contador .new-btn { background: linear-gradient(135deg, var(--contador), rgba(59,130,246,0.5)); color: #fff; }
.theme-contador .welcome-icon { background: var(--contador-bg); border: 1px solid rgba(59,130,246,.18); color: var(--contador); }
.theme-contador .agent-avatar { background: var(--contador-bg); border: 1px solid rgba(59,130,246,.12); color: var(--contador); }
.theme-contador .header-icon { background: var(--contador-bg); color: var(--contador); }
.theme-contador .msg-user .bubble { background: linear-gradient(135deg, rgba(59,130,246,.85), rgba(37,99,235,.55)); color: #fff; }
.theme-contador .header-brand h1 { background: linear-gradient(135deg, var(--contador), #93c5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-contador .header-brand span { color: var(--contador); opacity: 0.8; }
.theme-contador .back-btn, .theme-contador .settings-btn { color: var(--contador); }
.theme-contador .back-btn:hover, .theme-contador .settings-btn:hover { background: var(--contador-bg); border-color: var(--contador); }
.theme-contador .send-btn { background: linear-gradient(135deg, var(--contador), #2563eb); color: #fff; }
.theme-contador .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(59,130,246,0.5); transform: scale(1.05); }
.theme-contador .input-wrapper { border-color: rgba(59,130,246,0.25); }
.theme-contador .input-wrapper:focus-within { border-color: var(--contador); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.theme-contador .history-item:hover { background: rgba(59,130,246,0.07); }
.theme-contador .history-item.active { background: rgba(59,130,246,0.12); border-left: 3px solid var(--contador); }
.theme-contador .history-item.active .hi-title { color: var(--contador); }
.theme-contador .agent-content h1, .theme-contador .agent-content h2, .theme-contador .agent-content h3, .theme-contador .agent-content strong { color: var(--contador); }
.theme-contador .disclaimer strong { color: var(--contador); }
.theme-contador .quota-pill { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3); color: var(--contador); }
.chat-view.theme-contador { background: linear-gradient(135deg, #05142b 0%, #0c2b5c 40%, #020914 100%) !important; }

/* ─── THEME FINANCIERO ─── */
.theme-financiero {
  --accent: var(--financiero);
  --glow: rgba(16,185,129,0.15);
  --accent2: #34d399;
}
.theme-financiero .new-btn { background: linear-gradient(135deg, var(--financiero), rgba(16,185,129,0.5)); color: #fff; }
.theme-financiero .welcome-icon { background: var(--financiero-bg); border: 1px solid rgba(16,185,129,.18); color: var(--financiero); }
.theme-financiero .agent-avatar { background: var(--financiero-bg); border: 1px solid rgba(16,185,129,.12); color: var(--financiero); }
.theme-financiero .header-icon { background: var(--financiero-bg); color: var(--financiero); }
.theme-financiero .msg-user .bubble { background: linear-gradient(135deg, rgba(16,185,129,.85), rgba(5,150,105,.55)); color: #fff; }
.theme-financiero .header-brand h1 { background: linear-gradient(135deg, var(--financiero), #6ee7b7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-financiero .header-brand span { color: var(--financiero); opacity: 0.8; }
.theme-financiero .back-btn, .theme-financiero .settings-btn { color: var(--financiero); }
.theme-financiero .back-btn:hover, .theme-financiero .settings-btn:hover { background: var(--financiero-bg); border-color: var(--financiero); }
.theme-financiero .send-btn { background: linear-gradient(135deg, var(--financiero), #059669); color: #fff; }
.theme-financiero .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(16,185,129,0.5); transform: scale(1.05); }
.theme-financiero .input-wrapper { border-color: rgba(16,185,129,0.25); }
.theme-financiero .input-wrapper:focus-within { border-color: var(--financiero); box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }
.theme-financiero .history-item:hover { background: rgba(16,185,129,0.07); }
.theme-financiero .history-item.active { background: rgba(16,185,129,0.12); border-left: 3px solid var(--financiero); }
.theme-financiero .history-item.active .hi-title { color: var(--financiero); }
.theme-financiero .agent-content h1, .theme-financiero .agent-content h2, .theme-financiero .agent-content h3, .theme-financiero .agent-content strong { color: var(--financiero); }
.theme-financiero .disclaimer strong { color: var(--financiero); }
.theme-financiero .quota-pill { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: var(--financiero); }
.chat-view.theme-financiero { background: linear-gradient(135deg, #021a11 0%, #063c27 40%, #010a07 100%) !important; }

/* ─── AMBIENTAL THEME ─── */
.theme-ambiental { --accent: var(--ambiental); }
.theme-ambiental .new-btn { background: linear-gradient(135deg, var(--ambiental), rgba(34,197,94,0.5)); color: #fff; }
.theme-ambiental .welcome-icon { background: var(--ambiental-bg); border: 1px solid rgba(34,197,94,.18); color: var(--ambiental); }
.theme-ambiental .agent-avatar { background: var(--ambiental-bg); border: 1px solid rgba(34,197,94,.12); color: var(--ambiental); }
.theme-ambiental .header-icon { background: var(--ambiental-bg); color: var(--ambiental); }
.theme-ambiental .msg-user .bubble { background: linear-gradient(135deg, rgba(34,197,94,.85), rgba(21,128,61,.55)); color: #fff; }
.theme-ambiental .header-brand h1 { background: linear-gradient(135deg, var(--ambiental), #86efac); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-ambiental .header-brand span { color: var(--ambiental); opacity: 0.8; }
.theme-ambiental .back-btn, .theme-ambiental .settings-btn { color: var(--ambiental); }
.theme-ambiental .back-btn:hover, .theme-ambiental .settings-btn:hover { background: var(--ambiental-bg); border-color: var(--ambiental); }
.theme-ambiental .send-btn { background: linear-gradient(135deg, var(--ambiental), #16a34a); color: #fff; }
.theme-ambiental .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(34,197,94,0.5); transform: scale(1.05); }
.theme-ambiental .input-wrapper { border-color: rgba(34,197,94,0.25); }
.theme-ambiental .input-wrapper:focus-within { border-color: var(--ambiental); box-shadow: 0 0 0 3px rgba(34,197,94,0.1); }
.theme-ambiental .history-item:hover { background: rgba(34,197,94,0.07); }
.theme-ambiental .history-item.active { background: rgba(34,197,94,0.12); border-left: 3px solid var(--ambiental); }
.theme-ambiental .history-item.active .hi-title { color: var(--ambiental); }
.theme-ambiental .agent-content h1, .theme-ambiental .agent-content h2, .theme-ambiental .agent-content h3, .theme-ambiental .agent-content strong { color: var(--ambiental); }
.theme-ambiental .disclaimer strong { color: var(--ambiental); }
.theme-ambiental .quota-pill { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: var(--ambiental); }
.chat-view.theme-ambiental { background: linear-gradient(135deg, #021a08 0%, #053d1a 40%, #010a04 100%) !important; }

/* ─── CIBERSEGURIDAD THEME ─── */
.theme-ciberseguridad { --accent: var(--ciberseguridad); }
.theme-ciberseguridad .new-btn { background: linear-gradient(135deg, var(--ciberseguridad), rgba(6,182,212,0.5)); color: #fff; }
.theme-ciberseguridad .welcome-icon { background: var(--ciberseguridad-bg); border: 1px solid rgba(6,182,212,.18); color: var(--ciberseguridad); }
.theme-ciberseguridad .agent-avatar { background: var(--ciberseguridad-bg); border: 1px solid rgba(6,182,212,.12); color: var(--ciberseguridad); }
.theme-ciberseguridad .header-icon { background: var(--ciberseguridad-bg); color: var(--ciberseguridad); }
.theme-ciberseguridad .msg-user .bubble { background: linear-gradient(135deg, rgba(6,182,212,.85), rgba(8,145,178,.55)); color: #fff; }
.theme-ciberseguridad .header-brand h1 { background: linear-gradient(135deg, var(--ciberseguridad), #67e8f9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-ciberseguridad .header-brand span { color: var(--ciberseguridad); opacity: 0.8; }
.theme-ciberseguridad .back-btn, .theme-ciberseguridad .settings-btn { color: var(--ciberseguridad); }
.theme-ciberseguridad .back-btn:hover, .theme-ciberseguridad .settings-btn:hover { background: var(--ciberseguridad-bg); border-color: var(--ciberseguridad); }
.theme-ciberseguridad .send-btn { background: linear-gradient(135deg, var(--ciberseguridad), #0891b2); color: #fff; }
.theme-ciberseguridad .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(6,182,212,0.5); transform: scale(1.05); }
.theme-ciberseguridad .input-wrapper { border-color: rgba(6,182,212,0.25); }
.theme-ciberseguridad .input-wrapper:focus-within { border-color: var(--ciberseguridad); box-shadow: 0 0 0 3px rgba(6,182,212,0.1); }
.theme-ciberseguridad .history-item:hover { background: rgba(6,182,212,0.07); }
.theme-ciberseguridad .history-item.active { background: rgba(6,182,212,0.12); border-left: 3px solid var(--ciberseguridad); }
.theme-ciberseguridad .history-item.active .hi-title { color: var(--ciberseguridad); }
.theme-ciberseguridad .agent-content h1, .theme-ciberseguridad .agent-content h2, .theme-ciberseguridad .agent-content h3, .theme-ciberseguridad .agent-content strong { color: var(--ciberseguridad); }
.theme-ciberseguridad .disclaimer strong { color: var(--ciberseguridad); }
.theme-ciberseguridad .quota-pill { background: rgba(6,182,212,0.12); border: 1px solid rgba(6,182,212,0.3); color: var(--ciberseguridad); }
.chat-view.theme-ciberseguridad { background: linear-gradient(135deg, #020d12 0%, #062533 40%, #010608 100%) !important; }

/* ─── SOFTWARE THEME ─── */
.theme-software { --accent: var(--software); }
.theme-software .new-btn { background: linear-gradient(135deg, var(--software), rgba(99,102,241,0.5)); color: #fff; }
.theme-software .welcome-icon { background: var(--software-bg); border: 1px solid rgba(99,102,241,.18); color: var(--software); }
.theme-software .agent-avatar { background: var(--software-bg); border: 1px solid rgba(99,102,241,.12); color: var(--software); }
.theme-software .header-icon { background: var(--software-bg); color: var(--software); }
.theme-software .msg-user .bubble { background: linear-gradient(135deg, rgba(99,102,241,.85), rgba(79,70,229,.55)); color: #fff; }
.theme-software .header-brand h1 { background: linear-gradient(135deg, var(--software), #a5b4fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-software .header-brand span { color: var(--software); opacity: 0.8; }
.theme-software .back-btn, .theme-software .settings-btn { color: var(--software); }
.theme-software .back-btn:hover, .theme-software .settings-btn:hover { background: var(--software-bg); border-color: var(--software); }
.theme-software .send-btn { background: linear-gradient(135deg, var(--software), #4f46e5); color: #fff; }
.theme-software .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(99,102,241,0.5); transform: scale(1.05); }
.theme-software .input-wrapper { border-color: rgba(99,102,241,0.25); }
.theme-software .input-wrapper:focus-within { border-color: var(--software); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.theme-software .history-item:hover { background: rgba(99,102,241,0.07); }
.theme-software .history-item.active { background: rgba(99,102,241,0.12); border-left: 3px solid var(--software); }
.theme-software .history-item.active .hi-title { color: var(--software); }
.theme-software .agent-content h1, .theme-software .agent-content h2, .theme-software .agent-content h3, .theme-software .agent-content strong { color: var(--software); }
.theme-software .disclaimer strong { color: var(--software); }
.theme-software .quota-pill { background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.3); color: var(--software); }
.chat-view.theme-software { background: linear-gradient(135deg, #090924 0%, #151554 40%, #030311 100%) !important; }

/* ─── COMERCIAL THEME ─── */
.theme-comercial { --accent: var(--comercial); }
.theme-comercial .new-btn { background: linear-gradient(135deg, var(--comercial), rgba(212,175,55,0.5)); color: #000; font-weight:600; }
.theme-comercial .welcome-icon { background: var(--comercial-bg); border: 1px solid rgba(212,175,55,.18); color: var(--comercial); }
.theme-comercial .agent-avatar { background: var(--comercial-bg); border: 1px solid rgba(212,175,55,.12); color: var(--comercial); }
.theme-comercial .header-icon { background: var(--comercial-bg); color: var(--comercial); }
.theme-comercial .msg-user .bubble { background: linear-gradient(135deg, rgba(212,175,55,.85), rgba(184,134,11,.55)); color: #000; font-weight:500; }
.theme-comercial .header-brand h1 { background: linear-gradient(135deg, var(--comercial), #fbe9a7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-comercial .header-brand span { color: var(--comercial); opacity: 0.8; }
.theme-comercial .back-btn, .theme-comercial .settings-btn { color: var(--comercial); }
.theme-comercial .back-btn:hover, .theme-comercial .settings-btn:hover { background: var(--comercial-bg); border-color: var(--comercial); }
.theme-comercial .send-btn { background: linear-gradient(135deg, var(--comercial), #b8860b); color: #000; font-weight:600; }
.theme-comercial .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(212,175,55,0.5); transform: scale(1.05); }
.theme-comercial .input-wrapper { border-color: rgba(212,175,55,0.25); }
.theme-comercial .input-wrapper:focus-within { border-color: var(--comercial); box-shadow: 0 0 0 3px rgba(212,175,55,0.1); }
.theme-comercial .history-item:hover { background: rgba(212,175,55,0.07); }
.theme-comercial .history-item.active { background: rgba(212,175,55,0.12); border-left: 3px solid var(--comercial); }
.theme-comercial .history-item.active .hi-title { color: var(--comercial); }
.theme-comercial .agent-content h1, .theme-comercial .agent-content h2, .theme-comercial .agent-content h3, .theme-comercial .agent-content strong { color: var(--comercial); }
.theme-comercial .disclaimer strong { color: var(--comercial); }
.theme-comercial .quota-pill { background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.3); color: var(--comercial); }
.chat-view.theme-comercial { background: linear-gradient(135deg, #161202 0%, #3a2e0a 40%, #080601 100%) !important; }

/* ─── ASTRONOMO THEME ─── */
.theme-astronomo { --accent: var(--astronomo); }
.theme-astronomo .new-btn { background: linear-gradient(135deg, var(--astronomo), rgba(155,93,229,0.5)); color: #fff; font-weight:600; }
.theme-astronomo .welcome-icon { background: var(--astronomo-bg); border: 1px solid rgba(155,93,229,.18); color: var(--astronomo); }
.theme-astronomo .agent-avatar { background: var(--astronomo-bg); border: 1px solid rgba(155,93,229,.12); color: var(--astronomo); }
.theme-astronomo .header-icon { background: var(--astronomo-bg); color: var(--astronomo); }
.theme-astronomo .msg-user .bubble { background: linear-gradient(135deg, rgba(155,93,229,.85), rgba(128,0,128,.55)); color: #fff; font-weight:500; }
.theme-astronomo .header-brand h1 { background: linear-gradient(135deg, var(--astronomo), #e2c0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-astronomo .header-brand span { color: var(--astronomo); opacity: 0.8; }
.theme-astronomo .back-btn, .theme-astronomo .settings-btn { color: var(--astronomo); }
.theme-astronomo .back-btn:hover, .theme-astronomo .settings-btn:hover { background: var(--astronomo-bg); border-color: var(--astronomo); }
.theme-astronomo .send-btn { background: linear-gradient(135deg, var(--astronomo), #800080); color: #fff; font-weight:600; }
.theme-astronomo .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(155,93,229,0.5); transform: scale(1.05); }
.theme-astronomo .input-wrapper { border-color: rgba(155,93,229,0.25); }
.theme-astronomo .input-wrapper:focus-within { border-color: var(--astronomo); box-shadow: 0 0 0 3px rgba(155,93,229,0.1); }
.theme-astronomo .history-item:hover { background: rgba(155,93,229,0.07); }
.theme-astronomo .history-item.active { background: rgba(155,93,229,0.12); border-left: 3px solid var(--astronomo); }
.theme-astronomo .history-item.active .hi-title { color: var(--astronomo); }
.theme-astronomo .agent-content h1, .theme-astronomo .agent-content h2, .theme-astronomo .agent-content h3, .theme-astronomo .agent-content strong { color: var(--astronomo); }
.theme-astronomo .disclaimer strong { color: var(--astronomo); }
.theme-astronomo .quota-pill { background: rgba(155,93,229,0.12); border: 1px solid rgba(155,93,229,0.3); color: var(--astronomo); }
.chat-view.theme-astronomo { background: linear-gradient(135deg, #0d0614 0%, #1e0b36 40%, #030105 100%) !important; }

/* ─── ATLAS THEME ─── */
.theme-atlas { --accent: var(--atlas); }
.theme-atlas .new-btn { background: linear-gradient(135deg, var(--atlas), rgba(0,242,254,0.5)); color: #000; font-weight:600; }
.theme-atlas .welcome-icon { background: var(--atlas-bg); border: 1px solid rgba(0,242,254,.18); color: var(--atlas); }
.theme-atlas .agent-avatar { background: var(--atlas-bg); border: 1px solid rgba(0,242,254,.12); color: var(--atlas); }
.theme-atlas .header-icon { background: var(--atlas-bg); color: var(--atlas); }
.theme-atlas .msg-user .bubble { background: linear-gradient(135deg, rgba(0,242,254,.85), rgba(0,180,216,.55)); color: #000; font-weight:500; }
.theme-atlas .header-brand h1 { background: linear-gradient(135deg, var(--atlas), #b3f9ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-atlas .header-brand span { color: var(--atlas); opacity: 0.8; }
.theme-atlas .back-btn, .theme-atlas .settings-btn { color: var(--atlas); }
.theme-atlas .back-btn:hover, .theme-atlas .settings-btn:hover { background: var(--atlas-bg); border-color: var(--atlas); }
.theme-atlas .send-btn { background: linear-gradient(135deg, var(--atlas), #00b4d8); color: #000; font-weight:600; }
.theme-atlas .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(0,242,254,0.5); transform: scale(1.05); }
.theme-atlas .input-wrapper { border-color: rgba(0,242,254,0.25); }
.theme-atlas .input-wrapper:focus-within { border-color: var(--atlas); box-shadow: 0 0 0 3px rgba(0,242,254,0.1); }
.theme-atlas .history-item:hover { background: rgba(0,242,254,0.07); }
.theme-atlas .history-item.active { background: rgba(0,242,254,0.12); border-left: 3px solid var(--atlas); }
.theme-atlas .history-item.active .hi-title { color: var(--atlas); }
.theme-atlas .agent-content h1, .theme-atlas .agent-content h2, .theme-atlas .agent-content h3, .theme-atlas .agent-content strong { color: var(--atlas); }
.theme-atlas .disclaimer strong { color: var(--atlas); }
.theme-atlas .quota-pill { background: rgba(0,242,254,0.12); border: 1px solid rgba(0,242,254,0.3); color: var(--atlas); }
.chat-view.theme-atlas { background: linear-gradient(135deg, #020f12 0%, #052a30 40%, #000305 100%) !important; }

.theme-psiquiatra { --accent: var(--psiquiatra); }
.theme-psiquiatra .new-btn { background: linear-gradient(135deg, var(--psiquiatra), rgba(255,75,145,0.5)); color: #fff; font-weight:600; }
.theme-psiquiatra .welcome-icon { background: var(--psiquiatra-bg); border: 1px solid rgba(255,75,145,.18); color: var(--psiquiatra); }
.theme-psiquiatra .agent-avatar { background: var(--psiquiatra-bg); border: 1px solid rgba(255,75,145,.12); color: var(--psiquiatra); }
.theme-psiquiatra .header-icon { background: var(--psiquiatra-bg); color: var(--psiquiatra); }
.theme-psiquiatra .msg-user .bubble { background: linear-gradient(135deg, rgba(255,75,145,.85), rgba(180,0,100,.55)); color: #fff; font-weight:500; }
.theme-psiquiatra .header-brand h1 { background: linear-gradient(135deg, var(--psiquiatra), #ffb3d1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-psiquiatra .header-brand span { color: var(--psiquiatra); opacity: 0.8; }
.theme-psiquiatra .back-btn, .theme-psiquiatra .settings-btn { color: var(--psiquiatra); }
.theme-psiquiatra .back-btn:hover, .theme-psiquiatra .settings-btn:hover { background: var(--psiquiatra-bg); border-color: var(--psiquiatra); }
.theme-psiquiatra .send-btn { background: linear-gradient(135deg, var(--psiquiatra), #b8004b); color: #fff; font-weight:600; }
.theme-psiquiatra .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(255,75,145,0.5); transform: scale(1.05); }
.theme-psiquiatra .input-wrapper { border-color: rgba(255,75,145,0.25); }
.theme-psiquiatra .input-wrapper:focus-within { border-color: var(--psiquiatra); box-shadow: 0 0 0 3px rgba(255,75,145,0.1); }
.theme-psiquiatra .history-item:hover { background: rgba(255,75,145,0.07); }
.theme-psiquiatra .history-item.active { background: rgba(255,75,145,0.12); border-left: 3px solid var(--psiquiatra); }
.theme-psiquiatra .history-item.active .hi-title { color: var(--psiquiatra); }
.theme-psiquiatra .agent-content h1, .theme-psiquiatra .agent-content h2, .theme-psiquiatra .agent-content h3, .theme-psiquiatra .agent-content strong { color: var(--psiquiatra); }
.theme-psiquiatra .disclaimer strong { color: var(--psiquiatra); }
.theme-psiquiatra .quota-pill { background: rgba(255,75,145,0.12); border: 1px solid rgba(255,75,145,0.3); color: var(--psiquiatra); }
.chat-view.theme-psiquiatra { background: linear-gradient(135deg, #18030d 0%, #3a0a20 40%, #050103 100%) !important; }

.theme-biologo { --accent: var(--biologo); }
.theme-biologo .new-btn { background: linear-gradient(135deg, var(--biologo), rgba(132,204,22,0.5)); color: #fff; font-weight:600; }
.theme-biologo .welcome-icon { background: var(--biologo-bg); border: 1px solid rgba(132,204,22,.18); color: var(--biologo); }
.theme-biologo .agent-avatar { background: var(--biologo-bg); border: 1px solid rgba(132,204,22,.12); color: var(--biologo); }
.theme-biologo .header-icon { background: var(--biologo-bg); color: var(--biologo); }
.theme-biologo .msg-user .bubble { background: linear-gradient(135deg, rgba(132,204,22,.85), rgba(70,120,10,.55)); color: #fff; font-weight:500; }
.theme-biologo .header-brand h1 { background: linear-gradient(135deg, var(--biologo), #d7fca1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-biologo .header-brand span { color: var(--biologo); opacity: 0.8; }
.theme-biologo .back-btn, .theme-biologo .settings-btn { color: var(--biologo); }
.theme-biologo .back-btn:hover, .theme-biologo .settings-btn:hover { background: var(--biologo-bg); border-color: var(--biologo); }
.theme-biologo .send-btn { background: linear-gradient(135deg, var(--biologo), #4d7c0f); color: #fff; font-weight:600; }
.theme-biologo .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(132,204,22,0.5); transform: scale(1.05); }
.theme-biologo .input-wrapper { border-color: rgba(132,204,22,0.25); }
.theme-biologo .input-wrapper:focus-within { border-color: var(--biologo); box-shadow: 0 0 0 3px rgba(132,204,22,0.1); }
.theme-biologo .history-item:hover { background: rgba(132,204,22,0.07); }
.theme-biologo .history-item.active { background: rgba(132,204,22,0.12); border-left: 3px solid var(--biologo); }
.theme-biologo .history-item.active .hi-title { color: var(--biologo); }
.theme-biologo .agent-content h1, .theme-biologo .agent-content h2, .theme-biologo .agent-content h3, .theme-biologo .agent-content strong { color: var(--biologo); }
.theme-biologo .disclaimer strong { color: var(--biologo); }
.theme-biologo .quota-pill { background: rgba(132,204,22,0.12); border: 1px solid rgba(132,204,22,0.3); color: var(--biologo); }
.chat-view.theme-biologo { background: linear-gradient(135deg, #0d1a03 0%, #1d330c 40%, #030501) !important; }

.theme-nutricionista { --accent: var(--nutricionista); }
.theme-nutricionista .new-btn { background: linear-gradient(135deg, var(--nutricionista), rgba(255,126,71,0.5)); color: #fff; font-weight:600; }
.theme-nutricionista .welcome-icon { background: var(--nutricionista-bg); border: 1px solid rgba(255,126,71,.18); color: var(--nutricionista); }
.theme-nutricionista .agent-avatar { background: var(--nutricionista-bg); border: 1px solid rgba(255,126,71,.12); color: var(--nutricionista); }
.theme-nutricionista .header-icon { background: var(--nutricionista-bg); color: var(--nutricionista); }
.theme-nutricionista .msg-user .bubble { background: linear-gradient(135deg, rgba(255,126,71,.85), rgba(180,60,20,.55)); color: #fff; font-weight:500; }
.theme-nutricionista .header-brand h1 { background: linear-gradient(135deg, var(--nutricionista), #ffd1b3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-nutricionista .header-brand span { color: var(--nutricionista); opacity: 0.8; }
.theme-nutricionista .back-btn, .theme-nutricionista .settings-btn { color: var(--nutricionista); }
.theme-nutricionista .back-btn:hover, .theme-nutricionista .settings-btn:hover { background: var(--nutricionista-bg); border-color: var(--nutricionista); }
.theme-nutricionista .send-btn { background: linear-gradient(135deg, var(--nutricionista), #d84a1b); color: #fff; font-weight:600; }
.theme-nutricionista .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(255,126,71,0.5); transform: scale(1.05); }
.theme-nutricionista .input-wrapper { border-color: rgba(255,126,71,0.25); }
.theme-nutricionista .input-wrapper:focus-within { border-color: var(--nutricionista); box-shadow: 0 0 0 3px rgba(255,126,71,0.1); }
.theme-nutricionista .history-item:hover { background: rgba(255,126,71,0.07); }
.theme-nutricionista .history-item.active { background: rgba(255,126,71,0.12); border-left: 3px solid var(--nutricionista); }
.theme-nutricionista .history-item.active .hi-title { color: var(--nutricionista); }
.theme-nutricionista .agent-content h1, .theme-nutricionista .agent-content h2, .theme-nutricionista .agent-content h3, .theme-nutricionista .agent-content strong { color: var(--nutricionista); }
.theme-nutricionista .disclaimer strong { color: var(--nutricionista); }
.theme-nutricionista .quota-pill { background: rgba(255,126,71,0.12); border: 1px solid rgba(255,126,71,0.3); color: var(--nutricionista); }
.chat-view.theme-nutricionista { background: linear-gradient(135deg, #1f0b03 0%, #3a1508 40%, #050201) !important; }

/* ⚛️ FISICO THEME ⚛️ */
.theme-fisico { --accent: var(--fisico); }
.theme-fisico .new-btn { background: linear-gradient(135deg, var(--fisico), rgba(0,229,255,0.5)); color: #000; font-weight:600; }
.theme-fisico .welcome-icon { background: var(--fisico-bg); border: 1px solid rgba(0,229,255,.18); color: var(--fisico); }
.theme-fisico .agent-avatar { background: var(--fisico-bg); border: 1px solid rgba(0,229,255,.12); color: var(--fisico); }
.theme-fisico .header-icon { background: var(--fisico-bg); color: var(--fisico); }
.theme-fisico .msg-user .bubble { background: linear-gradient(135deg, rgba(0,229,255,.85), rgba(0,180,210,.55)); color: #000; font-weight:500; }
.theme-fisico .header-brand h1 { background: linear-gradient(135deg, var(--fisico), #a8f5ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-fisico .header-brand span { color: var(--fisico); opacity: 0.8; }
.theme-fisico .back-btn, .theme-fisico .settings-btn { color: var(--fisico); }
.theme-fisico .back-btn:hover, .theme-fisico .settings-btn:hover { background: var(--fisico-bg); border-color: var(--fisico); }
.theme-fisico .send-btn { background: linear-gradient(135deg, var(--fisico), #00b4d2); color: #000; font-weight:600; }
.theme-fisico .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(0,229,255,0.5); transform: scale(1.05); }
.theme-fisico .input-wrapper { border-color: rgba(0,229,255,0.25); }
.theme-fisico .input-wrapper:focus-within { border-color: var(--fisico); box-shadow: 0 0 0 3px rgba(0,229,255,0.1); }
.theme-fisico .history-item:hover { background: rgba(0,229,255,0.07); }
.theme-fisico .history-item.active { background: rgba(0,229,255,0.12); border-left: 3px solid var(--fisico); }
.theme-fisico .history-item.active .hi-title { color: var(--fisico); }
.theme-fisico .agent-content h1, .theme-fisico .agent-content h2, .theme-fisico .agent-content h3, .theme-fisico .agent-content strong { color: var(--fisico); }
.theme-fisico .disclaimer strong { color: var(--fisico); }
.theme-fisico .quota-pill { background: rgba(0,229,255,0.12); border: 1px solid rgba(0,229,255,0.3); color: var(--fisico); }
.chat-view.theme-fisico { background: linear-gradient(135deg, #001217 0%, #002833 40%, #000405) !important; }

/* 🧮 MATEMATICO THEME 🧮 */
.theme-matematico { --accent: var(--matematico); }
.theme-matematico .new-btn { background: linear-gradient(135deg, var(--matematico), rgba(192,132,252,0.5)); color: #fff; font-weight:600; }
.theme-matematico .welcome-icon { background: var(--matematico-bg); border: 1px solid rgba(192,132,252,.18); color: var(--matematico); }
.theme-matematico .agent-avatar { background: var(--matematico-bg); border: 1px solid rgba(192,132,252,.12); color: var(--matematico); }
.theme-matematico .header-icon { background: var(--matematico-bg); color: var(--matematico); }
.theme-matematico .msg-user .bubble { background: linear-gradient(135deg, rgba(192,132,252,.85), rgba(147,51,234,.55)); color: #fff; font-weight:500; }
.theme-matematico .header-brand h1 { background: linear-gradient(135deg, var(--matematico), #f3e8ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-matematico .header-brand span { color: var(--matematico); opacity: 0.8; }
.theme-matematico .back-btn, .theme-matematico .settings-btn { color: var(--matematico); }
.theme-matematico .back-btn:hover, .theme-matematico .settings-btn:hover { background: var(--matematico-bg); border-color: var(--matematico); }
.theme-matematico .send-btn { background: linear-gradient(135deg, var(--matematico), #9333ea); color: #fff; font-weight:600; }
.theme-matematico .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(192,132,252,0.5); transform: scale(1.05); }
.theme-matematico .input-wrapper { border-color: rgba(192,132,252,0.25); }
.theme-matematico .input-wrapper:focus-within { border-color: var(--matematico); box-shadow: 0 0 0 3px rgba(192,132,252,0.1); }
.theme-matematico .history-item:hover { background: rgba(192,132,252,0.07); }
.theme-matematico .history-item.active { background: rgba(192,132,252,0.12); border-left: 3px solid var(--matematico); }
.theme-matematico .history-item.active .hi-title { color: var(--matematico); }
.theme-matematico .agent-content h1, .theme-matematico .agent-content h2, .theme-matematico .agent-content h3, .theme-matematico .agent-content strong { color: var(--matematico); }
.theme-matematico .disclaimer strong { color: var(--matematico); }
.theme-matematico .quota-pill { background: rgba(192,132,252,0.12); border: 1px solid rgba(192,132,252,0.3); color: var(--matematico); }
.chat-view.theme-matematico { background: linear-gradient(135deg, #170024 0%, #2f004a 40%, #050008) !important; }

/* 🧪 QUIMICO THEME 🧪 */
.theme-quimico { --accent: var(--quimico); }
.theme-quimico .new-btn { background: linear-gradient(135deg, var(--quimico), rgba(45,212,191,0.5)); color: #000; font-weight:600; }
.theme-quimico .welcome-icon { background: var(--quimico-bg); border: 1px solid rgba(45,212,191,.18); color: var(--quimico); }
.theme-quimico .agent-avatar { background: var(--quimico-bg); border: 1px solid rgba(45,212,191,.12); color: var(--quimico); }
.theme-quimico .header-icon { background: var(--quimico-bg); color: var(--quimico); }
.theme-quimico .msg-user .bubble { background: linear-gradient(135deg, rgba(45,212,191,.85), rgba(13,148,136,.55)); color: #000; font-weight:500; }
.theme-quimico .header-brand h1 { background: linear-gradient(135deg, var(--quimico), #ccfbf1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-quimico .header-brand span { color: var(--quimico); opacity: 0.8; }
.theme-quimico .back-btn, .theme-quimico .settings-btn { color: var(--quimico); }
.theme-quimico .back-btn:hover, .theme-quimico .settings-btn:hover { background: var(--quimico-bg); border-color: var(--quimico); }
.theme-quimico .send-btn { background: linear-gradient(135deg, var(--quimico), #0d9488); color: #000; font-weight:600; }
.theme-quimico .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(45,212,191,0.5); transform: scale(1.05); }
.theme-quimico .input-wrapper { border-color: rgba(45,212,191,0.25); }
.theme-quimico .input-wrapper:focus-within { border-color: var(--quimico); box-shadow: 0 0 0 3px rgba(45,212,191,0.1); }
.theme-quimico .history-item:hover { background: rgba(45,212,191,0.07); }
.theme-quimico .history-item.active { background: rgba(45,212,191,0.12); border-left: 3px solid var(--quimico); }
.theme-quimico .history-item.active .hi-title { color: var(--quimico); }
.theme-quimico .agent-content h1, .theme-quimico .agent-content h2, .theme-quimico .agent-content h3, .theme-quimico .agent-content strong { color: var(--quimico); }
.theme-quimico .disclaimer strong { color: var(--quimico); }
.theme-quimico .quota-pill { background: rgba(45,212,191,0.12); border: 1px solid rgba(45,212,191,0.3); color: var(--quimico); }
.chat-view.theme-quimico { background: linear-gradient(135deg, #001714 0%, #003630 40%, #000504) !important; }

/* 📊 ECONOMISTA THEME 📊 */
.theme-economista { --accent: var(--economista); }
.theme-economista .new-btn { background: linear-gradient(135deg, var(--economista), rgba(251,146,60,0.5)); color: #fff; font-weight:600; }
.theme-economista .welcome-icon { background: var(--economista-bg); border: 1px solid rgba(251,146,60,.18); color: var(--economista); }
.theme-economista .agent-avatar { background: var(--economista-bg); border: 1px solid rgba(251,146,60,.12); color: var(--economista); }
.theme-economista .header-icon { background: var(--economista-bg); color: var(--economista); }
.theme-economista .msg-user .bubble { background: linear-gradient(135deg, rgba(251,146,60,.85), rgba(217,119,6,.55)); color: #fff; font-weight:500; }
.theme-economista .header-brand h1 { background: linear-gradient(135deg, var(--economista), #ffedd5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.theme-economista .header-brand span { color: var(--economista); opacity: 0.8; }
.theme-economista .back-btn, .theme-economista .settings-btn { color: var(--economista); }
.theme-economista .back-btn:hover, .theme-economista .settings-btn:hover { background: var(--economista-bg); border-color: var(--economista); }
.theme-economista .send-btn { background: linear-gradient(135deg, var(--economista), #d97706); color: #fff; font-weight:600; }
.theme-economista .send-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(251,146,60,0.5); transform: scale(1.05); }
.theme-economista .input-wrapper { border-color: rgba(251,146,60,0.25); }
.theme-economista .input-wrapper:focus-within { border-color: var(--economista); box-shadow: 0 0 0 3px rgba(251,146,60,0.1); }
.theme-economista .history-item:hover { background: rgba(251,146,60,0.07); }
.theme-economista .history-item.active { background: rgba(251,146,60,0.12); border-left: 3px solid var(--economista); }
.theme-economista .history-item.active .hi-title { color: var(--economista); }
.theme-economista .agent-content h1, .theme-economista .agent-content h2, .theme-economista .agent-content h3, .theme-economista .agent-content strong { color: var(--economista); }
.theme-economista .disclaimer strong { color: var(--economista); }
.theme-economista .quota-pill { background: rgba(251,146,60,0.12); border: 1px solid rgba(251,146,60,0.3); color: var(--economista); }
.chat-view.theme-economista { background: linear-gradient(135deg, #1c0a00 0%, #3d1b02 40%, #080300) !important; }


/* Futuristic Chat Outer Glows */
.chat-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg);
  animation: fadeUp .5s ease;
  transition: box-shadow 0.6s ease-in-out, border 0.6s ease-in-out;
}
.chat-view[class*="theme-"] {
  background: radial-gradient(circle at 50% 0%, var(--chat-bg) 0%, var(--bg) 70%);
  box-shadow: inset 0 0 60px var(--chat-glow), inset 0 0 10px rgba(0,0,0,0.5);
  border: 1px solid var(--chat-border);
}
.chat-view[class*="theme-"] .chat-header {
  border-bottom: 1px solid var(--chat-border);
  background: rgba(7, 16, 25, 0.4);
  backdrop-filter: blur(12px);
}
.chat-view[class*="theme-"] .input-area {
  border-top: 1px solid var(--chat-border);
  background: rgba(7, 16, 25, 0.4);
  backdrop-filter: blur(12px);
}
.chat-view[class*="theme-"] .sidebar {
  border-right: 1px solid var(--chat-border);
  background: rgba(7, 16, 25, 0.5);
  backdrop-filter: blur(12px);
}

/* ─── SETTINGS DROPDOWN ─── */
.settings-dropdown {
  position: relative;
}

.settings-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-m);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.settings-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
}

.settings-menu {
  position: absolute;
  top: 130%;
  right: 0;
  background: rgba(10, 10, 12, 0.75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 
    0 16px 36px rgba(0, 0, 0, 0.65), 
    0 8px 16px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 6px;
  width: 180px;
  display: none;
  flex-direction: column;
  gap: 3px;
  z-index: 210;
  transform-origin: top right;
  animation: dropdownOpen 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownOpen {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.settings-menu.open {
  display: flex;
}

.settings-item {
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  transform: translateX(4px);
}

.settings-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 6px;
}

.settings-item.danger {
  color: #f87171;
}

.settings-item.danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ff8585;
}

/* ─── RESPONSIVE ─── */
@media(min-width:861px){
  .msg-user, .msg-agent, .thinking, .welcome {
    width: 100%;
    max-width: 820px;
    align-self: center;
  }
  .input-wrapper, .disclaimer {
    width: 100%;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media(max-width:860px){
  .agents-grid{grid-template-columns:1fr;max-width:400px}
  .chat-main{grid-template-columns:1fr;position:relative}
  .sidebar{
    position:fixed;top:0;left:0;width:280px;height:100vh;z-index:200;
    transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:4px 0 30px rgba(0,0,0,.5);
    background: var(--bg2) !important; /* Force opaque to avoid bleed-through */
    backdrop-filter: none !important;
  }
  .chat-view.theme-legal .sidebar {
    background: #f8fafc !important; /* Force opaque light bg for legal theme */
  }
  .chat-view.theme-veterinary .sidebar {
    background: #1a0f00 !important; /* Force opaque dark-amber bg for veterinary */
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
    z-index:199;
  }
  .sidebar-overlay.open{display:block}
  .landing-nav{padding:1rem .8rem}
  .landing-hero{padding:2.5rem 1rem 1.5rem}
  .examples{grid-template-columns:1fr}
  .msg-user .bubble{max-width:85%}
  .agent-avatar{display:none}
  .agent-content{max-width:100%;flex:1;border-radius:16px}
  .input-area{padding:.75rem}
  .chat-header{padding:0 .8rem}
  .header-brand h1{font-size:.85rem}
  .header-brand span{font-size:.6rem}
  .hide-mobile{display:none !important}
  .brand-title{font-size:.72rem;letter-spacing:.08em;gap:.3rem}
  .nav-brand{gap:.3rem}
  
  /* Mobile settings menu usability enhancements */
  .settings-menu {
    width: 200px;
    padding: 6px;
    border-radius: 14px;
  }
  .settings-item {
    padding: 0.75rem 1rem;
    font-size: 0.84rem;
  }
}

/* ── Tool Badge (Herramientas Ejecutadas) ── */
.tool-badge-wrapper {
  margin-bottom: 10px;
}
.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(77,201,246,0.06);
  border: 1px solid rgba(77,201,246,0.15);
  color: rgba(77,201,246,0.6);
  cursor: pointer;
  list-style: none;
  transition: background 0.2s;
}
.tool-badge:hover {
  background: rgba(77,201,246,0.10);
  color: rgba(77,201,246,0.85);
}
.tool-badge::marker { display: none; }
.tool-badge-wrapper[open] .tool-badge {
  border-color: rgba(77,201,246,0.3);
  color: rgba(77,201,246,0.9);
}
.tool-detail {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(0,10,30,0.4);
  border-radius: 8px;
  border-left: 2px solid rgba(77,201,246,0.25);
}
.tool-detail pre {
  font-size: 0.68rem;
  color: rgba(77,201,246,0.35);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: 'Courier New', monospace;
}

/* ── Grounding Search Indicators (Dynamic Themes) ── */
.grounding-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 6px 0 4px 44px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  width: fit-content;
  animation: groundingFadeIn 0.4s ease-out;
}
@keyframes groundingFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.grounding-dots {
  display: flex;
  align-items: center;
  gap: 3px;
}
.grounding-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: groundingBounce 1.4s ease-in-out infinite;
}
@keyframes groundingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1.2); opacity: 1; }
}
.grounding-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(200,210,225,0.55);
  letter-spacing: 0.02em;
}
.grounding-label em {
  font-style: normal;
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: groundingShimmer 2.5s linear infinite;
  font-weight: 600;
}
@keyframes groundingShimmer {
  to { background-position: 200% center; }
}

/* --- THEME: WEB SEARCH --- */
.grounding-indicator.websearch {
  border-color: rgba(56, 189, 248, 0.25);
  background: rgba(56, 189, 248, 0.04);
}
.grounding-indicator.websearch .grounding-dots span:nth-child(1) { background: #38bdf8; animation-delay: 0s; }
.grounding-indicator.websearch .grounding-dots span:nth-child(2) { background: #22d3ee; animation-delay: 0.15s; }
.grounding-indicator.websearch .grounding-dots span:nth-child(3) { background: #a78bfa; animation-delay: 0.3s; }
.grounding-indicator.websearch .grounding-dots span:nth-child(4) { background: #2dd4bf; animation-delay: 0.45s; }
.grounding-indicator.websearch .grounding-label em {
  background: linear-gradient(90deg, #38bdf8, #22d3ee, #a78bfa, #2dd4bf);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- THEME: LEYCHILE --- */
.grounding-indicator.leyla {
  border-color: rgba(212, 175, 55, 0.25);
  background: rgba(212, 175, 55, 0.03);
}
.grounding-indicator.leyla .grounding-dots span:nth-child(1) { background: #D4AF37; animation-delay: 0s; }
.grounding-indicator.leyla .grounding-dots span:nth-child(2) { background: #1E3A8A; animation-delay: 0.15s; }
.grounding-indicator.leyla .grounding-dots span:nth-child(3) { background: #C5A880; animation-delay: 0.3s; }
.grounding-indicator.leyla .grounding-dots span:nth-child(4) { background: #3B82F6; animation-delay: 0.45s; }
.grounding-indicator.leyla .grounding-label em {
  background: linear-gradient(90deg, #D4AF37, #C5A880, #3B82F6, #D4AF37);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- THEME: PUBMED --- */
.grounding-indicator.pubmed {
  border-color: rgba(139, 92, 246, 0.25);
  background: rgba(139, 92, 246, 0.03);
}
.grounding-indicator.pubmed .grounding-dots span:nth-child(1) { background: #8B5CF6; animation-delay: 0s; }
.grounding-indicator.pubmed .grounding-dots span:nth-child(2) { background: #06B6D4; animation-delay: 0.15s; }
.grounding-indicator.pubmed .grounding-dots span:nth-child(3) { background: #A78BFA; animation-delay: 0.3s; }
.grounding-indicator.pubmed .grounding-dots span:nth-child(4) { background: #3B82F6; animation-delay: 0.45s; }
.grounding-indicator.pubmed .grounding-label em {
  background: linear-gradient(90deg, #8B5CF6, #06B6D4, #3B82F6, #8B5CF6);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- THEME: ARXIV --- */
.grounding-indicator.arxiv {
  border-color: rgba(244, 63, 94, 0.25);
  background: rgba(244, 63, 94, 0.03);
}
.grounding-indicator.arxiv .grounding-dots span:nth-child(1) { background: #f43f5e; animation-delay: 0s; }
.grounding-indicator.arxiv .grounding-dots span:nth-child(2) { background: #fb7185; animation-delay: 0.15s; }
.grounding-indicator.arxiv .grounding-dots span:nth-child(3) { background: #ec4899; animation-delay: 0.3s; }
.grounding-indicator.arxiv .grounding-dots span:nth-child(4) { background: #fda4af; animation-delay: 0.45s; }
.grounding-indicator.arxiv .grounding-label em {
  background: linear-gradient(90deg, #f43f5e, #fb7185, #ec4899, #fda4af);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- THEME: OPENFDA (Medical Guardrail — Heartbeat Scan) --- */
.grounding-indicator.fda {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.04);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.08), inset 0 0 10px rgba(20, 184, 166, 0.04);
  animation: groundingFadeIn 0.4s ease-out, fdaBorderPulse 2.4s ease-in-out infinite;
}
.grounding-indicator.fda .grounding-dots {
  gap: 4px;
}
.grounding-indicator.fda .grounding-dots span {
  width: 7px;
  height: 7px;
  animation: fdaHeartbeat 1.8s ease-in-out infinite;
}
.grounding-indicator.fda .grounding-dots span:nth-child(1) { background: #10B981; box-shadow: 0 0 6px #10B981; animation-delay: 0s; }
.grounding-indicator.fda .grounding-dots span:nth-child(2) { background: #14B8A6; box-shadow: 0 0 6px #14B8A6; animation-delay: 0.14s; }
.grounding-indicator.fda .grounding-dots span:nth-child(3) { background: #34D399; box-shadow: 0 0 6px #34D399; animation-delay: 0.28s; }
.grounding-indicator.fda .grounding-dots span:nth-child(4) { background: #2DD4BF; box-shadow: 0 0 6px #2DD4BF; animation-delay: 0.42s; }
.grounding-indicator.fda .grounding-label em {
  background: linear-gradient(90deg, #10B981, #2DD4BF, #34D399, #10B981);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: groundingShimmer 2s linear infinite;
  font-weight: 600;
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4));
}

/* Pulso cardíaco clínico: escala rápido, decae lento (como complejo QRS) */
@keyframes fdaHeartbeat {
  0%        { transform: scale(0.75); opacity: 0.35; }
  18%       { transform: scale(1.35); opacity: 1; }
  38%       { transform: scale(0.9);  opacity: 0.6; }
  55%       { transform: scale(1.1);  opacity: 0.85; }
  100%      { transform: scale(0.75); opacity: 0.35; }
}

@keyframes fdaBorderPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.06), inset 0 0 6px rgba(20, 184, 166, 0.03); }
  50%      { box-shadow: 0 0 20px rgba(45, 212, 191, 0.16), inset 0 0 12px rgba(16, 185, 129, 0.08); }
}

/* --- THEME: GENOMIC (AlphaFold / PDB) --- */
.grounding-indicator.genomic {
  border-color: rgba(139, 156, 247, 0.35);
  background: rgba(139, 156, 247, 0.045);
  box-shadow: 0 0 18px rgba(139, 156, 247, 0.1), inset 0 0 10px rgba(0, 255, 204, 0.04);
  animation: groundingFadeIn 0.4s ease-out, genomicBorderPulse 3s ease-in-out infinite;
}
.grounding-indicator.genomic .grounding-dots {
  gap: 4px;
}
.grounding-indicator.genomic .grounding-dots span {
  width: 7px;
  height: 7px;
  animation: genomicHelixMove 1.4s ease-in-out infinite;
}
.grounding-indicator.genomic .grounding-dots span:nth-child(1) { background: #8b9cf7; box-shadow: 0 0 5px #8b9cf7; animation-delay: 0s; }
.grounding-indicator.genomic .grounding-dots span:nth-child(2) { background: #2ecc71; box-shadow: 0 0 5px #2ecc71; animation-delay: 0.18s; }
.grounding-indicator.genomic .grounding-dots span:nth-child(3) { background: #a8b8ff; box-shadow: 0 0 5px #a8b8ff; animation-delay: 0.36s; }
.grounding-indicator.genomic .grounding-dots span:nth-child(4) { background: #00ffcc; box-shadow: 0 0 5px #00ffcc; animation-delay: 0.54s; }

/* Even dots travel in opposite direction — simulates 2D DNA double-helix cross-wave */
.grounding-indicator.genomic .grounding-dots span:nth-child(even) {
  animation-direction: reverse;
}
.grounding-indicator.genomic .grounding-label em {
  background: linear-gradient(90deg, #8b9cf7, #2ecc71, #00ffcc, #8b9cf7);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: groundingShimmer 2.2s linear infinite;
  font-weight: 600;
  filter: drop-shadow(0 0 4px rgba(0, 255, 204, 0.35));
}

@keyframes genomicHelixMove {
  0%, 100% { transform: translateY(-4px) scale(0.8); opacity: 0.45; }
  50%       { transform: translateY(4px)  scale(1.2); opacity: 1; }
}

@keyframes genomicBorderPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(139, 156, 247, 0.08), inset 0 0 8px rgba(0, 255, 204, 0.03); }
  50%      { box-shadow: 0 0 22px rgba(0, 255, 204, 0.14), inset 0 0 14px rgba(139, 156, 247, 0.07); }
}

/* --- THEME: OPENFDA VET (Veterinary Pharmacology — Animal Drugs Scan) --- */
.grounding-indicator.vetfda {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.045);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.08), inset 0 0 10px rgba(245, 158, 11, 0.04);
  animation: groundingFadeIn 0.4s ease-out, fdaBorderPulse 2.4s ease-in-out infinite;
}
.grounding-indicator.vetfda .grounding-dots {
  gap: 4px;
}
.grounding-indicator.vetfda .grounding-dots span {
  width: 7px;
  height: 7px;
  animation: fdaHeartbeat 1.8s ease-in-out infinite;
}
.grounding-indicator.vetfda .grounding-dots span:nth-child(1) { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; animation-delay: 0s; }
.grounding-indicator.vetfda .grounding-dots span:nth-child(2) { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; animation-delay: 0.14s; }
.grounding-indicator.vetfda .grounding-dots span:nth-child(3) { background: #d97706; box-shadow: 0 0 6px #d97706; animation-delay: 0.28s; }
.grounding-indicator.vetfda .grounding-dots span:nth-child(4) { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; animation-delay: 0.42s; }
.grounding-indicator.vetfda .grounding-label em {
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #d97706, #f59e0b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: groundingShimmer 2s linear infinite;
  font-weight: 600;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
}

/* --- THEME: PUBMED VET (PubMed Veterinary Science) --- */
.grounding-indicator.vetpubmed {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.045);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.08), inset 0 0 10px rgba(16, 185, 129, 0.04);
  animation: groundingFadeIn 0.4s ease-out, fdaBorderPulse 2.4s ease-in-out infinite;
}
.grounding-indicator.vetpubmed .grounding-dots {
  gap: 4px;
}
.grounding-indicator.vetpubmed .grounding-dots span {
  width: 7px;
  height: 7px;
  animation: fdaHeartbeat 1.8s ease-in-out infinite;
}
.grounding-indicator.vetpubmed .grounding-dots span:nth-child(1) { background: #10B981; box-shadow: 0 0 6px #10B981; animation-delay: 0s; }
.grounding-indicator.vetpubmed .grounding-dots span:nth-child(2) { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; animation-delay: 0.14s; }
.grounding-indicator.vetpubmed .grounding-dots span:nth-child(3) { background: #059669; box-shadow: 0 0 6px #059669; animation-delay: 0.28s; }
.grounding-indicator.vetpubmed .grounding-dots span:nth-child(4) { background: #d97706; box-shadow: 0 0 6px #d97706; animation-delay: 0.42s; }
.grounding-indicator.vetpubmed .grounding-label em {
  background: linear-gradient(90deg, #10B981, #f59e0b, #059669, #10B981);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: groundingShimmer 2s linear infinite;
  font-weight: 600;
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4));
}

/* --- THEME: CALENDAR (Google Calendar) --- */
.grounding-indicator.calendar {
  border-color: rgba(66, 133, 244, 0.35);
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.06), rgba(52, 168, 83, 0.04));
  box-shadow: 0 0 18px rgba(66, 133, 244, 0.12), inset 0 0 10px rgba(52, 168, 83, 0.04);
  animation: groundingFadeIn 0.4s ease-out, calendarBorderPulse 2.6s ease-in-out infinite;
}
.grounding-indicator.calendar .grounding-dots {
  gap: 5px;
}
.grounding-indicator.calendar .grounding-dots span {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  animation: calendarTickMove 1.2s ease-in-out infinite;
}
.grounding-indicator.calendar .grounding-dots span:nth-child(1) { background: #4285F4; box-shadow: 0 0 6px #4285F4; animation-delay: 0s; }
.grounding-indicator.calendar .grounding-dots span:nth-child(2) { background: #34A853; box-shadow: 0 0 6px #34A853; animation-delay: 0.15s; }
.grounding-indicator.calendar .grounding-dots span:nth-child(3) { background: #FBBC05; box-shadow: 0 0 6px #FBBC05; animation-delay: 0.3s; }
.grounding-indicator.calendar .grounding-dots span:nth-child(4) { background: #EA4335; box-shadow: 0 0 6px #EA4335; animation-delay: 0.45s; }
.grounding-indicator.calendar .grounding-label em {
  background: linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #4285F4);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: groundingShimmer 2s linear infinite;
  font-weight: 600;
  filter: drop-shadow(0 0 4px rgba(66, 133, 244, 0.3));
}

@keyframes calendarTickMove {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(0.85); opacity: 0.5; }
  50%      { transform: translateY(-3px) rotate(45deg) scale(1.15); opacity: 1; }
}

@keyframes calendarBorderPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(66, 133, 244, 0.08), inset 0 0 6px rgba(52, 168, 83, 0.03); }
  50%      { box-shadow: 0 0 22px rgba(66, 133, 244, 0.18), inset 0 0 14px rgba(52, 168, 83, 0.08); }
}

/* ── Calendar Confirmation Card ── */
.calendar-card {
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid rgba(66, 133, 244, 0.25);
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.08), rgba(52, 168, 83, 0.05));
  backdrop-filter: blur(12px);
  overflow: hidden;
  animation: calCardSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.calendar-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(66, 133, 244, 0.12), rgba(52, 168, 83, 0.08));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.calendar-card-icon {
  font-size: 20px;
  animation: calIconBounce 0.6s ease 0.3s both;
}
.calendar-card-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.3px;
  flex: 1;
}
.calendar-card-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34A853, #2ecc71);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(52, 168, 83, 0.4);
  animation: calCheckPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}
.calendar-card-body {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.calendar-card-event {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.calendar-card-link {
  font-size: 12px;
  font-weight: 600;
  color: #4285F4;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(66, 133, 244, 0.1);
  border: 1px solid rgba(66, 133, 244, 0.25);
  transition: all 0.25s ease;
  white-space: nowrap;
}
.calendar-card-link:hover {
  background: rgba(66, 133, 244, 0.2);
  box-shadow: 0 0 14px rgba(66, 133, 244, 0.3);
  transform: translateY(-1px);
}

@keyframes calCardSlideIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes calIconBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* --- THEME: DRIVE (Google Drive) --- */
.grounding-indicator.drive {
  border-color: rgba(251, 188, 5, 0.35);
  background: linear-gradient(135deg, rgba(251, 188, 5, 0.06), rgba(66, 133, 244, 0.04));
  box-shadow: 0 0 18px rgba(251, 188, 5, 0.12), inset 0 0 10px rgba(66, 133, 244, 0.04);
  animation: groundingFadeIn 0.4s ease-out, driveBorderPulse 2.6s ease-in-out infinite;
}
.grounding-indicator.drive .grounding-dots {
  gap: 5px;
}
.grounding-indicator.drive .grounding-dots span {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  animation: driveTickMove 1.2s ease-in-out infinite;
}
.grounding-indicator.drive .grounding-dots span:nth-child(1) { background: #FBBC05; box-shadow: 0 0 6px #FBBC05; animation-delay: 0s; }
.grounding-indicator.drive .grounding-dots span:nth-child(2) { background: #34A853; box-shadow: 0 0 6px #34A853; animation-delay: 0.15s; }
.grounding-indicator.drive .grounding-dots span:nth-child(3) { background: #4285F4; box-shadow: 0 0 6px #4285F4; animation-delay: 0.3s; }
.grounding-indicator.drive .grounding-dots span:nth-child(4) { background: #EA4335; box-shadow: 0 0 6px #EA4335; animation-delay: 0.45s; }
.grounding-indicator.drive .grounding-label em {
  background: linear-gradient(90deg, #FBBC05, #34A853, #4285F4, #FBBC05);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: groundingShimmer 2s linear infinite;
  font-weight: 600;
  filter: drop-shadow(0 0 4px rgba(251, 188, 5, 0.3));
}

@keyframes driveTickMove {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(0.85); opacity: 0.5; }
  50%      { transform: translateY(-3px) rotate(45deg) scale(1.15); opacity: 1; }
}

@keyframes driveBorderPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(251, 188, 5, 0.08), inset 0 0 6px rgba(66, 133, 244, 0.03); }
  50%      { box-shadow: 0 0 22px rgba(251, 188, 5, 0.18), inset 0 0 14px rgba(66, 133, 244, 0.08); }
}

/* --- THEME: SANDBOX (Ejecutando Código) --- */
.grounding-indicator.sandbox {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.045);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
  animation: groundingFadeIn 0.4s ease-out, sandboxBorderPulse 2.4s ease-in-out infinite;
}
.grounding-indicator.sandbox .grounding-dots {
  gap: 5px;
}
.grounding-indicator.sandbox .grounding-dots span {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  animation: groundingBounce 1.4s ease-in-out infinite;
}
.grounding-indicator.sandbox .grounding-dots span:nth-child(1) { background: #fbbf24; box-shadow: 0 0 5px #fbbf24; animation-delay: 0s; }
.grounding-indicator.sandbox .grounding-dots span:nth-child(2) { background: #f59e0b; box-shadow: 0 0 5px #f59e0b; animation-delay: 0.15s; }
.grounding-indicator.sandbox .grounding-dots span:nth-child(3) { background: #f97316; box-shadow: 0 0 5px #f97316; animation-delay: 0.3s; }
.grounding-indicator.sandbox .grounding-dots span:nth-child(4) { background: #fb7185; box-shadow: 0 0 5px #fb7185; animation-delay: 0.45s; }
.grounding-indicator.sandbox .grounding-label em {
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #f97316, #fb7185);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: groundingShimmer 2s linear infinite;
  font-weight: 600;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.35));
}

@keyframes sandboxBorderPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.08), inset 0 0 6px rgba(245, 158, 11, 0.03); border-color: rgba(245, 158, 11, 0.25); }
  50%      { box-shadow: 0 0 22px rgba(245, 158, 11, 0.2), inset 0 0 12px rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.55); }
}

/* --- THEME: REPORT (Creando Informe) --- */
.grounding-indicator.report {
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(167, 139, 250, 0.045);
  box-shadow: 0 0 15px rgba(167, 139, 250, 0.1);
  animation: groundingFadeIn 0.4s ease-out, reportBorderPulse 2.4s ease-in-out infinite;
}
.grounding-indicator.report .grounding-dots {
  gap: 5px;
}
.grounding-indicator.report .grounding-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: groundingBounce 1.4s ease-in-out infinite;
}
.grounding-indicator.report .grounding-dots span:nth-child(1) { background: #a78bfa; box-shadow: 0 0 5px #a78bfa; animation-delay: 0s; }
.grounding-indicator.report .grounding-dots span:nth-child(2) { background: #ec4899; box-shadow: 0 0 5px #ec4899; animation-delay: 0.15s; }
.grounding-indicator.report .grounding-dots span:nth-child(3) { background: #d946ef; box-shadow: 0 0 5px #d946ef; animation-delay: 0.3s; }
.grounding-indicator.report .grounding-dots span:nth-child(4) { background: #818cf8; box-shadow: 0 0 5px #818cf8; animation-delay: 0.45s; }
.grounding-indicator.report .grounding-label em {
  background: linear-gradient(90deg, #a78bfa, #ec4899, #d946ef, #818cf8);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: groundingShimmer 2s linear infinite;
  font-weight: 600;
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.35));
}

@keyframes reportBorderPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(167, 139, 250, 0.08), inset 0 0 6px rgba(167, 139, 250, 0.03); border-color: rgba(167, 139, 250, 0.25); }
  50%      { box-shadow: 0 0 22px rgba(167, 139, 250, 0.2), inset 0 0 12px rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.55); }
}

/* ── Drive Confirmation Card ── */
.drive-card {
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid rgba(251, 188, 5, 0.25);
  background: linear-gradient(135deg, rgba(251, 188, 5, 0.08), rgba(66, 133, 244, 0.05));
  backdrop-filter: blur(12px);
  overflow: hidden;
  animation: driveCardSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.drive-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(251, 188, 5, 0.12), rgba(66, 133, 244, 0.08));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.drive-card-icon {
  font-size: 20px;
  animation: driveIconBounce 0.6s ease 0.3s both;
}
.drive-card-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.3px;
  flex: 1;
}
.drive-card-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34A853, #2ecc71);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(52, 168, 83, 0.4);
  animation: driveCheckPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}
.drive-card-body {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.drive-card-event {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.drive-card-link {
  font-size: 12px;
  font-weight: 600;
  color: #fbbf24;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(251, 188, 5, 0.1);
  border: 1px solid rgba(251, 188, 5, 0.25);
  transition: all 0.25s ease;
  white-space: nowrap;
}
.drive-card-link:hover {
  background: rgba(251, 188, 5, 0.2);
  box-shadow: 0 0 14px rgba(251, 188, 5, 0.3);
  transform: translateY(-1px);
}

@keyframes driveCardSlideIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes driveIconBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes driveCheckPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes calCheckPop {
  0% { transform: scale(0) rotate(-90deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ═══════════════ SETTINGS & COMPROBANTE MODAL STYLES (ARCADIA PREMIUM REDESIGN) ═══════════════ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 12, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-window {
  background: #080f19;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  width: 90%;
  max-width: 820px;
  height: 80vh;
  max-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: modalZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalZoomIn {
  from { transform: scale(0.98) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.01);
}

.modal-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-m);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.modal-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Sidebar para pestañas */
.modal-tabs-sidebar {
  width: 200px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.modal-tabs-sidebar .tab-btn {
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-m);
  padding: 0.6rem 0.8rem;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.modal-tabs-sidebar .tab-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.modal-tabs-sidebar .tab-btn.active {
  background: rgba(77, 201, 246, 0.08);
  color: var(--accent);
  font-weight: 600;
}

/* Pestaña especial Pro */
.modal-tabs-sidebar .tab-btn.pro-tab {
  color: #fbbf24;
}
.modal-tabs-sidebar .tab-btn.pro-tab.active {
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
}

/* Panel de contenido */
.modal-tabs-content {
  flex: 1;
  padding: 1.5rem 2rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.05);
}

.tab-content-pane {
  display: none;
  animation: paneFadeIn 0.2s ease-out;
}

.tab-content-pane.active {
  display: block;
}

@keyframes paneFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-content-pane h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--text);
}

.tab-pane-desc {
  font-size: 0.78rem;
  color: var(--text-m);
  margin-bottom: 1.5rem;
}

.settings-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-m);
  margin: 1.5rem 0 0.8rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  padding-bottom: 4px;
}

/* Inputs de configuración */
.settings-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.settings-form-group label {
  font-size: 0.72rem;
  color: var(--text-m);
  font-weight: 500;
}

.settings-input {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.65rem 0.85rem;
  outline: none;
  transition: all 0.2s;
}

.settings-input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
}

.settings-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-save-btn {
  margin-top: 1rem;
  padding: 0.65rem 1.4rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-save-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.2);
}

/* Facturación CSS */
.billing-status-card {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.bsc-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bsc-label {
  font-size: 0.68rem;
  color: var(--text-m);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bsc-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent2);
}

.bsc-upgrade-btn {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #030811;
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.bsc-upgrade-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25);
}

.payment-method-card {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-method-card.deposit-method {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.pmc-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.pmc-usdt-info-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.pmc-qr-img {
  width: 70px;
  height: 70px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: block;
}

.pmc-usdt-details {
  flex: 1;
  min-width: 0;
}

.pmc-usdt-title {
  font-size: 11px;
  color: var(--text-m);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.pmc-usdt-address {
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
  word-break: break-all;
  font-family: monospace;
}

.pmc-usdt-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.pmc-usdt-min {
  font-size: 10px;
  color: #71717a;
}

.pmc-usdt-copy {
  font-size: 10px;
  color: #3b82f6;
  cursor: pointer;
  font-weight: 600;
  transition: color 0.2s;
}

.pmc-usdt-copy:hover {
  color: #60a5fa;
}

.pmc-details {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.pmc-icon {
  font-size: 1.5rem;
}

.pmc-card-no {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}

.pmc-expiry {
  font-size: 0.68rem;
  color: var(--text-m);
}

.pmc-edit-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text-m);
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
}

.pmc-edit-btn:hover {
  border-color: var(--text-m);
  color: var(--text);
}

/* Historial de Facturas */
.invoice-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.invoice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.01);
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.ii-date {
  color: var(--text-m);
  width: 90px;
}

.ii-desc {
  flex: 1;
  color: var(--text);
}

.ii-amount {
  color: var(--text);
  font-weight: 500;
  margin-right: 1.5rem;
}

.ii-status {
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
}

.ii-status.paid {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}

/* Switches de Privacidad */
.privacy-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.privacy-option-item:last-of-type {
  border-bottom: none;
}

.poi-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 80%;
}

.poi-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}

.poi-desc {
  font-size: 0.7rem;
  color: var(--text-m);
}

/* Switch Toggle Slider */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-toggle {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: .3s;
  border-radius: 34px;
}

.slider-toggle:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-m);
  transition: .3s;
  border-radius: 50%;
}

.switch-toggle input:checked + .slider-toggle {
  background-color: rgba(6, 182, 212, 0.2);
  border-color: var(--accent);
}

.switch-toggle input:checked + .slider-toggle:before {
  transform: translateX(16px);
  background-color: var(--accent);
}

/* Zona de peligro */
.danger-zone {
  margin-top: 2rem;
  border: 1px solid rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.02);
  border-radius: 10px;
  padding: 1.2rem;
}

.danger-zone h4 {
  font-size: 0.88rem;
  color: #ff6b6b;
  margin-bottom: 0.25rem;
}

.danger-zone p {
  font-size: 0.72rem;
  color: var(--text-m);
  margin-bottom: 1rem;
}

.danger-btn {
  background: rgba(239, 68, 68, 0.1);
  color: #ff8888;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.danger-btn:hover {
  background: #e74c3c;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

/* Planes Pro Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
  padding-bottom: 2rem;
}

.pricing-card {
  background: rgba(6, 15, 30, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.pricing-card.premium {
  border-color: rgba(var(--agent-color-rgb, 241, 196, 15), 0.15);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 0 1px 0 rgba(var(--agent-color-rgb, 241, 196, 15), 0.15) inset;
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--agent-color-rgb, 255, 255, 255), 0.3);
  box-shadow: 0 12px 30px rgba(var(--agent-color-rgb, 255, 255, 255), 0.1);
}

.pricing-card.premium:hover {
  border-color: var(--agent-color, #f1c40f);
  box-shadow: 0 12px 32px rgba(var(--agent-color-rgb, 241, 196, 15), 0.15),
              0 0 15px rgba(var(--agent-color-rgb, 241, 196, 15), 0.08);
}

.pc-badge {
  align-self: flex-start;
  margin-bottom: 0.8rem;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: rgba(var(--agent-color-rgb, 255, 255, 255), 0.08);
  color: var(--agent-color, var(--text-m));
  border: 1px solid rgba(var(--agent-color-rgb, 255, 255, 255), 0.15);
  transition: all 0.3s;
}

.pricing-card:hover .pc-badge {
  background: rgba(var(--agent-color-rgb, 255, 255, 255), 0.15);
}

.pc-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

.pc-price {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.pc-price span {
  font-size: 0.78rem;
  color: var(--text-m);
  font-weight: 400;
}

.pc-promo {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--agent-color, #a1a1aa);
  margin: 0 0 1.2rem;
}

.pc-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pc-features li {
  font-size: 0.72rem;
  color: var(--text-m);
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.3;
}

.pc-features li:before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--agent-color, var(--accent));
  font-weight: 700;
}

.pc-btn {
  width: 100%;
  padding: 0.65rem;
  border: 1px solid rgba(var(--agent-color-rgb, 255, 255, 255), 0.2);
  border-radius: 9px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
  text-align: center;
}

.pc-btn:hover:not(:disabled) {
  background: var(--agent-color, rgba(255, 255, 255, 0.08));
  border-color: var(--agent-color, rgba(255, 255, 255, 0.3));
  color: #fff;
  box-shadow: 0 4px 15px rgba(var(--agent-color-rgb, 255, 255, 255), 0.2);
}

.pc-btn.upgrade-action {
  background: linear-gradient(135deg, rgba(var(--agent-color-rgb, 241, 196, 15), 0.12), rgba(var(--agent-color-rgb, 241, 196, 15), 0.25));
  border: 1px solid rgba(var(--agent-color-rgb, 241, 196, 15), 0.45);
  color: var(--text);
}

.pc-btn.upgrade-action:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--agent-color, #fbbf24), rgba(var(--agent-color-rgb, 241, 196, 15), 0.8));
  border-color: var(--agent-color, #fbbf24);
  color: #030811;
  box-shadow: 0 6px 18px rgba(var(--agent-color-rgb, 241, 196, 15), 0.3);
}

.pc-btn:disabled {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
  cursor: default;
}

/* Item Pro en dropdown */
.settings-menu .settings-item.pro-menu-item {
  color: #fbbf24;
  font-weight: 600;
}
.settings-menu .settings-item.pro-menu-item:hover {
  background: rgba(251, 191, 36, 0.12);
  color: #fcd34d;
}

/* ═══════════════ COMPROBANTE SPECIFIC WINDOW STYLES ═══════════════ */
.comprobante-window {
  max-width: 480px;
  height: auto;
  max-height: 90vh;
}

/* Comprobante drag zone */
.comprobante-dropzone {
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.01);
}

.comprobante-dropzone:hover,
.comprobante-dropzone.dragover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.03);
}

.comprobante-dropzone.dragover div {
  color: var(--accent) !important;
}

/* ─── RESPONSIVE FOR SETTINGS MODAL ─── */
@media (max-width: 860px) {
  .modal-window {
    height: 90vh;
    max-height: 90vh;
    width: 95%;
    border-radius: 12px;
  }
  .modal-body {
    flex-direction: column;
    overflow: hidden;
  }
  .modal-tabs-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    padding: 0.5rem;
    gap: 0.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .modal-tabs-sidebar::-webkit-scrollbar {
    display: none;
  }
  .modal-tabs-sidebar .tab-btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.75rem;
    flex-shrink: 0;
  }
  .modal-tabs-content {
    padding: 1rem 1.2rem;
    overflow-y: auto;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ═══════════════ ADMIN PANEL TAB STYLES ═══════════════ */
.admin-subtab-btn {
  font-family: inherit;
  transition: all 0.2s;
}
.admin-subtab-btn:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
}
.admin-subtab-btn.active {
  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.2)) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(99,102,241,0.3) !important;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad, linear-gradient(90deg, var(--accent), var(--accent2)));
}
.stat-card .sc-icon { font-size: 20px; margin-bottom: 4px; }
.stat-card .sc-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 2px;
}
.stat-card .sc-label { font-size: 11px; color: var(--text-m); }

.tier-bars {
  background: rgba(255,255,255,0.01);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.tier-bars h3 { font-size: 11px; font-weight: 600; margin-bottom: 12px; color: var(--text-m); text-transform: uppercase; letter-spacing: 0.05em; }
.tier-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tier-row:last-child { margin-bottom: 0; }
.tier-label { font-size: 12px; width: 80px; color: var(--text-m); }
.tier-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.tier-bar { height: 100%; border-radius: 3px; transition: width 0.8s ease; }
.tier-count { font-size: 12px; font-weight: 600; width: 30px; text-align: right; }

.section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-m);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.data-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-m);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.data-table td {
  padding: 10px 12px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(255,255,255,0.02); }

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
}
.pill-free { background: rgba(113,113,122,0.15); color: #a1a1aa; }
.pill-premium { background: rgba(77, 201, 246, 0.15); color: var(--accent); }
.pill-admin { background: rgba(168,85,247,0.15); color: #c084fc; }
.pill-pendiente { background: rgba(251,191,36,0.15); color: #fbbf24; }
.pill-aprobado { background: rgba(74,222,128,0.15); color: #4ade80; }
.pill-rechazado { background: rgba(239,68,68,0.15); color: #ef4444; }

.btn-aprobar {
  background: linear-gradient(135deg, rgba(74,222,128,0.2), rgba(34,211,238,0.2));
  border: 1px solid rgba(74,222,128,0.3);
  color: #4ade80;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  margin-right: 4px;
}
.btn-aprobar:hover { background: rgba(74,222,128,0.3); }
.btn-rechazar {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  color: #ef4444;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.btn-rechazar:hover { background: rgba(239,68,68,0.2); }

.comp-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s;
}
.comp-thumb:hover { transform: scale(1.1); }

.mini-progress {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
  width: 60px;
  margin-top: 4px;
}
.mini-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.lightbox-open {
  display: flex !important;
}

/* Responsive Billing and Account Styles for Mobile */
@media (max-width: 600px) {
  .billing-status-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 1rem;
  }
  .bsc-upgrade-btn {
    width: 100%;
    text-align: center;
  }
  
  .pmc-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .pmc-header-row .pmc-edit-btn {
    width: 100%;
    text-align: center;
  }
  
  .pmc-usdt-info-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
  }
  .pmc-qr-img {
    margin-bottom: 8px;
  }
  .pmc-usdt-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .pmc-usdt-address {
    text-align: center;
    font-size: 11px;
    width: 100%;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    margin-top: 4px;
  }
  .pmc-usdt-actions {
    justify-content: center;
    margin-top: 8px;
    gap: 12px;
    width: 100%;
  }
}

/* ═══════════════ LIGHT THEME ADDITIONS (LEGAL & HEALTH CUSTOM TUNING) ═══════════════ */
.chat-view.theme-legal .settings-save-btn {
  background: linear-gradient(135deg, #2c5282, #4299e1) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(44, 82, 130, 0.2) !important;
}
.chat-view.theme-legal .settings-save-btn:hover {
  box-shadow: 0 6px 16px rgba(44, 82, 130, 0.35) !important;
}
.chat-view.theme-legal .comprobante-dropzone {
  border-color: rgba(168, 200, 232, 0.6) !important;
  background: #fdfcf7 !important;
  color: #475569 !important;
}
.chat-view.theme-legal .comprobante-dropzone:hover,
.chat-view.theme-legal .comprobante-dropzone.dragover {
  border-color: #2c5282 !important;
  background: rgba(168, 200, 232, 0.1) !important;
  color: #2c5282 !important;
}

.chat-view.theme-health .settings-save-btn {
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2) !important;
}
.chat-view.theme-health .settings-save-btn:hover {
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35) !important;
}
.chat-view.theme-health .comprobante-dropzone {
  border-color: rgba(28, 98, 149, 0.35) !important;
  background: rgba(220, 240, 255, 0.3) !important;
  color: #334e68 !important;
}
.chat-view.theme-health .comprobante-dropzone:hover,
.chat-view.theme-health .comprobante-dropzone.dragover {
  border-color: #0284c7 !important;
  background: rgba(28, 98, 149, 0.1) !important;
  color: #071d30 !important;
}

/* Light dropdown styles custom shadow overrides */
.chat-view.theme-legal .settings-menu,
.chat-view.theme-health .settings-menu {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(168, 200, 232, 0.2) !important;
}
/* Google Sync Buttons brand color isolation */
.google-sync-btn {
  padding: 0.6rem 1.2rem;
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 0;
}
.google-sync-btn.google-calendar-btn {
  background: linear-gradient(135deg, #4285F4, #34A853) !important;
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.2) !important;
}
.google-sync-btn.google-calendar-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(66, 133, 244, 0.3) !important;
  transform: translateY(-1px);
}
.google-sync-btn.google-drive-btn {
  background: linear-gradient(135deg, #FBBC05, #4285F4) !important;
  box-shadow: 0 4px 12px rgba(251, 188, 5, 0.2) !important;
}
.google-sync-btn.google-drive-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(251, 188, 5, 0.3) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   ARCADIA NEXUS — MULTIMODAL & RAG STYLES (AUDIO, GALERÍA, DOCUMENTOS)
   ========================================================================== */

/* Botones de acción en la barra de entrada */
.input-action-btn {
  background: transparent;
  border: none;
  color: var(--text-m);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  height: 38px;
  width: 38px;
  flex-shrink: 0;
}

.input-action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.input-action-btn svg {
  transition: transform 0.2s ease;
}

.input-action-btn:hover svg {
  transform: scale(1.05);
}

/* Animación y estado de grabación de audio activa */
@keyframes mic-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    background: rgba(239, 68, 68, 0.25);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    background: rgba(239, 68, 68, 0.1);
  }
}

.input-action-btn.recording-active {
  color: #ef4444 !important;
  animation: mic-pulse 1.5s infinite;
  border-radius: 50%;
}

/* Vista previa de adjuntos (imágenes o documentos) */
.attachment-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 5px;
  align-items: center;
}

.attachment-preview-item {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 30px 6px 10px;
  max-width: 250px;
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-preview-item.type-image {
  padding: 0;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
}

.attachment-preview-item.type-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-preview-item .doc-icon {
  margin-right: 6px;
  font-size: 16px;
  color: var(--accent);
}

.attachment-preview-item .remove-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  padding: 0;
}

.attachment-preview-item.type-image .remove-btn {
  top: 4px;
  right: 4px;
  transform: none;
}

.attachment-preview-item .remove-btn:hover {
  background: rgba(239, 68, 68, 0.8);
}

/* Indicador de subiendo archivo */
.attachment-uploading-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: spin-loader 1s ease-in-out infinite;
  margin-right: 6px;
}

@keyframes spin-loader {
  to { transform: rotate(360deg); }
}
.input-action-btn {
  background: transparent;
  border: none;
  color: var(--text-m);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  height: 38px;
  width: 38px;
  flex-shrink: 0;
}

.input-action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.input-action-btn svg {
  transition: transform 0.2s ease;
}

.input-action-btn:hover svg {
  transform: scale(1.05);
}

/* Animación y estado de grabación de audio activa */
@keyframes mic-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    background: rgba(239, 68, 68, 0.25);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    background: rgba(239, 68, 68, 0.1);
  }
}

.input-action-btn.recording-active {
  color: #ef4444 !important;
  animation: mic-pulse 1.5s infinite;
  border-radius: 50%;
}

/* Vista previa de adjuntos (imágenes o documentos) */
.attachment-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 5px;
  align-items: center;
}

.attachment-preview-item {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 30px 6px 10px;
  max-width: 250px;
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-preview-item.type-image {
  padding: 0;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
}

.attachment-preview-item.type-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-preview-item .doc-icon {
  margin-right: 6px;
  font-size: 16px;
  color: var(--accent);
}

.attachment-preview-item .remove-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  padding: 0;
}

.attachment-preview-item.type-image .remove-btn {
  top: 4px;
  right: 4px;
  transform: none;
}

.attachment-preview-item .remove-btn:hover {
  background: rgba(239, 68, 68, 0.8);
}

/* Indicador de subiendo archivo */
.attachment-uploading-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: spin-loader 1s ease-in-out infinite;
  margin-right: 6px;
}

@keyframes spin-loader {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   ARCADIA NEXUS — BOTÓN DE SÍNTESIS DE VOZ (Text-to-Speech Neural2)
   ========================================================================== */

/* Botón "Escuchar" que aparece bajo cada respuesta del agente */
.speak-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: var(--text-m);
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.65;
  letter-spacing: 0.02em;
}

.speak-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(77, 201, 246, 0.35);
  color: var(--accent);
  transform: translateY(-1px);
}

.speak-btn:hover svg {
  filter: drop-shadow(0 0 4px rgba(77, 201, 246, 0.5));
}

/* Estado activo — reproduciendo audio */
@keyframes speak-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 201, 246, 0.3); }
  50%       { box-shadow: 0 0 0 5px rgba(77, 201, 246, 0); }
}

.speak-btn.speak-active {
  opacity: 1;
  color: var(--accent);
  border-color: rgba(77, 201, 246, 0.5);
  background: rgba(77, 201, 246, 0.08);
  animation: speak-pulse 1.5s ease-in-out infinite;
}

/* Spinner de carga del TTS */
.speak-loading {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(77, 201, 246, 0.2);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: spin-loader 0.7s linear infinite;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   PREMIUM LANDING ENHANCEMENTS
   ═══════════════════════════════════════════════════ */

/* ─── HERO SUB STRONG ─── */
.hero-sub strong {
  color: var(--accent2);
  font-weight: 600;
}

/* ─── NEURAL CANVAS BACKDROP ─── */
#neuralCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
}

@keyframes statsReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── AGENTS SECTION DIVIDER ─── */
.agents-section-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 1020px;
  margin: 2.8rem auto 0;
  padding: 0 2rem;
  animation: statsReveal 1s ease 0.6s both;
}
.agents-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,201,246,0.2), transparent);
}
.agents-section-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(77,201,246,0.35);
  white-space: nowrap;
}

/* ─── CARD META (tag + normas) ─── */
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.card-tag {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-m);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 2px 8px;
  line-height: 1.6;
}
.card-nodes {
  font-size: 0.58rem;
  font-weight: 500;
  color: rgba(77,201,246,0.45);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Per-card tag accent colors */
#cardHealth    .card-tag { color: var(--health);    border-color: rgba(0,212,255,0.2);   background: rgba(0,212,255,0.06);   }
#cardLegal     .card-tag { color: var(--legal);     border-color: rgba(168,200,232,0.2); background: rgba(168,200,232,0.05); }
#cardGenomic   .card-tag { color: var(--genomic);   border-color: rgba(46,204,113,0.2);  background: rgba(46,204,113,0.06);  }
#cardVeterinary.card-tag { color: var(--veterinary);border-color: rgba(245,158,11,0.2);  background: rgba(245,158,11,0.06);  }
#cardMecanico  .card-tag { color: var(--mecanico);  border-color: rgba(168,85,247,0.2);  background: rgba(168,85,247,0.06);  }
#cardElectrico .card-tag { color: var(--electrico); border-color: rgba(234,179,8,0.2);   background: rgba(234,179,8,0.06);   }
#cardMarketing .card-tag { color: var(--marketing); border-color: rgba(232,121,249,0.2); background: rgba(232,121,249,0.06); }
#cardLogistico .card-tag { color: var(--logistico); border-color: rgba(249,115,22,0.2);  background: rgba(249,115,22,0.06);  }
#cardGeologo   .card-tag { color: var(--geologo);   border-color: rgba(120,165,90,0.2);  background: rgba(120,165,90,0.06);  }
#cardCivil     .card-tag { color: var(--civil);     border-color: rgba(14,165,233,0.2);  background: rgba(14,165,233,0.06);  }
#cardArquitecto.card-tag { color: var(--arquitecto);border-color: rgba(20,184,166,0.2);  background: rgba(20,184,166,0.06);  }
#cardContador  .card-tag { color: var(--contador);  border-color: rgba(59,130,246,0.2);  background: rgba(59,130,246,0.06);  }
#cardFinanciero.card-tag { color: var(--financiero); border-color: rgba(16,185,129,0.2);  background: rgba(16,185,129,0.06);  }
#cardAmbiental .card-tag { color: var(--ambiental);  border-color: rgba(34,197,94,0.2);   background: rgba(34,197,94,0.06);   }
#cardCiberseguridad .card-tag { color: var(--ciberseguridad); border-color: rgba(6,182,212,0.2); background: rgba(6,182,212,0.06); }

/* ─── CARD REVEAL — STAGGER SCROLL ANIMATION ─── */
.card-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}
.card-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── SECTION HEADER responsive ─── */
@media (max-width: 640px) {
  .agents-section-header { margin-top: 1.8rem; padding: 0 1rem; }
}

/* ═══════════════════════════════════════════════════
   PREMIUM LANDING EFFECTS — SPOTLIGHT, TILT & ORB
   ═══════════════════════════════════════════════════ */

/* ─── INTERACTIVE BACKGROUND ORB ─── */
.interactive-orb {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(77, 201, 246, 0.08) 0%, rgba(77, 201, 246, 0.02) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(80px);
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  left: 0;
  top: 0;
  will-change: left, top, opacity;
}

/* ─── CARD SPOTLIGHT GLOW & BORDER EFFECTS ─── */
.agent-card {
  transform-style: preserve-3d;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease,
    transform 0.4s cubic-bezier(0.1, 0.8, 0.2, 1) !important;
}

/* Raise all inner card elements above pseudo-elements */
.agent-card > *:not(.card-glow) {
  position: relative;
  z-index: 3;
}

/* Outer glowing border (CSS Mask clip technique) */
.agent-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    300px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(255, 255, 255, 0.12),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

/* Inner glow spotlight background */
.agent-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    350px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(255, 255, 255, 0.02),
    transparent 80%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.agent-card:hover::before,
.agent-card:hover::after {
  opacity: 1;
}

/* Specific spotlight colors per-agent card */
#cardHealth:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(0,212,255,0.4), transparent 70%); }
#cardHealth:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(0,212,255,0.06), transparent 75%); }

#cardLegal:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(168,200,232,0.35), transparent 70%); }
#cardLegal:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(168,200,232,0.05), transparent 75%); }

#cardGenomic:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(46,204,113,0.4), transparent 70%); }
#cardGenomic:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(46,204,113,0.06), transparent 75%); }

#cardVeterinary:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(245,158,11,0.4), transparent 70%); }
#cardVeterinary:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(245,158,11,0.06), transparent 75%); }

#cardMecanico:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(168,85,247,0.4), transparent 70%); }
#cardMecanico:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(168,85,247,0.06), transparent 75%); }

#cardElectrico:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(234,179,8,0.4), transparent 70%); }
#cardElectrico:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(234,179,8,0.06), transparent 75%); }

#cardMarketing:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(232,121,249,0.4), transparent 70%); }
#cardMarketing:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(232,121,249,0.06), transparent 75%); }

#cardLogistico:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(249,115,22,0.4), transparent 70%); }
#cardLogistico:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(249,115,22,0.06), transparent 75%); }

#cardGeologo:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(120,165,90,0.4), transparent 70%); }
#cardGeologo:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(120,165,90,0.06), transparent 75%); }

#cardCivil:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(14,165,233,0.4), transparent 70%); }
#cardCivil:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(14,165,233,0.06), transparent 75%); }

#cardArquitecto:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(20,184,166,0.4), transparent 70%); }
#cardArquitecto:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(20,184,166,0.06), transparent 75%); }

#cardContador:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(59,130,246,0.4), transparent 70%); }
#cardContador:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(59,130,246,0.06), transparent 75%); }

#cardFinanciero:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(16,185,129,0.4), transparent 70%); }
#cardFinanciero:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(16,185,129,0.06), transparent 75%); }

#cardAmbiental:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(34,197,94,0.4), transparent 70%); }
#cardAmbiental:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(34,197,94,0.06), transparent 75%); }

#cardCiberseguridad:hover::before { background: radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(6,182,212,0.45), transparent 70%); }
#cardCiberseguridad:hover::after { background: radial-gradient(320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(6,182,212,0.07), transparent 75%); }

/* ─── CARD ACTION HOVER TRANSLATION ─── */
.agent-card:hover .card-enter {
  transform: translateX(6px);
}

/* ─── STATS BAR MICRO-INTERACTION ─── */
.hstat {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.hstat:hover {
  transform: translateY(-3px) scale(1.03);
  filter: drop-shadow(0 0 10px rgba(77,201,246,0.2));
}

/* ─── COUNTER ENDED BOUNCE EFFECT ─── */
.counter-pop {
  animation: counterPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes counterPop {
  0% { transform: scale(1); }
  55% { transform: scale(1.18); filter: brightness(1.2); }
  100% { transform: scale(1); }
}



/* ═══════════════════════════════════════════════════
   HOLOGRAPHIC MATERIALIZATION — AGENT MESSAGE EFFECT
   ═══════════════════════════════════════════════════ */

/* Trigger animation on every new agent message */
.msg-agent {
  animation: msgMaterialize 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The content bubble gets the scan-line sweep + glow */
.msg-agent .agent-content {
  position: relative;
  overflow: hidden;
  animation: msgGlowPulse 1.2s ease both;
}

/* Holographic scan-line sweep (one-shot) */
.msg-agent .agent-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(77, 201, 246, 0.06) 40%,
    rgba(77, 201, 246, 0.12) 50%,
    rgba(77, 201, 246, 0.06) 60%,
    transparent 100%
  );
  animation: scanSweep 0.8s ease 0.15s both;
  pointer-events: none;
  z-index: 1;
}

/* Vertical scan-line accent */
.msg-agent .agent-content::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(77, 201, 246, 0.5) 20%,
    rgba(123, 224, 255, 0.7) 50%,
    rgba(77, 201, 246, 0.5) 80%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(77, 201, 246, 0.4), 0 0 20px rgba(77, 201, 246, 0.15);
  animation: scanLineDown 0.55s ease 0.1s both;
  pointer-events: none;
  z-index: 2;
}

/* Main message entrance: blur resolves + slide up */
@keyframes msgMaterialize {
  0% {
    opacity: 0;
    filter: blur(6px) brightness(1.3);
    transform: translateY(12px) scale(0.97);
  }
  40% {
    filter: blur(2px) brightness(1.1);
    opacity: 0.7;
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: translateY(0) scale(1);
  }
}

/* Border glow pulse on appearance */
@keyframes msgGlowPulse {
  0% {
    border-color: rgba(77, 201, 246, 0.4);
    box-shadow: 0 0 12px rgba(77, 201, 246, 0.15), inset 0 0 8px rgba(77, 201, 246, 0.04);
  }
  50% {
    border-color: rgba(77, 201, 246, 0.25);
    box-shadow: 0 0 6px rgba(77, 201, 246, 0.08);
  }
  100% {
    border-color: var(--border);
    box-shadow: none;
  }
}

/* Horizontal light sweep across message */
@keyframes scanSweep {
  0%   { left: -100%; opacity: 1; }
  100% { left: 100%;  opacity: 0; }
}

/* Thin line scanning downward */
@keyframes scanLineDown {
  0%   { top: -2px; opacity: 1; }
  80%  { opacity: 0.6; }
  100% { top: calc(100% + 2px); opacity: 0; }
}

/* User messages: subtle slide-in from right */
.msg-user {
  animation: userMsgSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes userMsgSlide {
  0% {
    opacity: 0;
    transform: translateX(16px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ── Report/File Generating Loader inside bubble ── */
.report-generating-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(167, 139, 250, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.15);
  border-radius: 12px;
  margin: 10px 0;
  gap: 12px;
  animation: pulseScale 1.8s ease-in-out infinite;
}
.report-generating-spinner {
  font-size: 28px;
  animation: spinnerRotate 2s linear infinite;
}
.report-generating-text {
  font-size: 14px;
  font-weight: 600;
  color: #a78bfa;
  letter-spacing: 0.5px;
}
.report-generating-progress {
  width: 160px;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.report-generating-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, #a78bfa, #ec4899, #d946ef, #818cf8);
  border-radius: 2px;
  animation: barMove 1.5s ease-in-out infinite;
}

@keyframes spinnerRotate {
  0% { transform: scale(1); }
  50% { transform: scale(1.2) rotate(15deg); }
  100% { transform: scale(1); }
}
@keyframes barMove {
  0% { left: -30%; }
  100% { left: 100%; }
}
@keyframes pulseScale {
  0%, 100% { box-shadow: 0 0 10px rgba(167, 139, 250, 0.05); }
  50% { box-shadow: 0 0 20px rgba(167, 139, 250, 0.15); }
}

/* ── Drive File Generating Loader inside bubble ── */
.drive-generating-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(251, 188, 5, 0.04);
  border: 1px solid rgba(251, 188, 5, 0.15);
  border-radius: 12px;
  margin: 10px 0;
  gap: 12px;
  animation: drivePulseScale 1.8s ease-in-out infinite;
}
.drive-generating-spinner {
  font-size: 28px;
  animation: spinnerRotate 2s linear infinite;
}
.drive-generating-text {
  font-size: 14px;
  font-weight: 600;
  color: #fbbf24;
  letter-spacing: 0.5px;
}
.drive-generating-progress {
  width: 160px;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.drive-generating-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, #FBBC05, #34A853, #4285F4, #EA4335);
  border-radius: 2px;
  animation: barMove 1.5s ease-in-out infinite;
}

@keyframes drivePulseScale {
  0%, 100% { box-shadow: 0 0 10px rgba(251, 188, 5, 0.05); }
  50% { box-shadow: 0 0 20px rgba(251, 188, 5, 0.15); }
}

/* ── Report Confirmation Card ── */
.report-card {
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.25);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(129, 140, 248, 0.05));
  backdrop-filter: blur(12px);
  overflow: hidden;
  animation: reportCardSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.report-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.12), rgba(129, 140, 248, 0.08));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.report-card-icon {
  font-size: 20px;
  animation: reportIconBounce 0.6s ease 0.3s both;
}
.report-card-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.3px;
  flex: 1;
}
.report-card-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
  animation: reportCheckPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}
.report-card-body {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.report-card-event {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

@keyframes reportCardSlideIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes reportIconBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes reportCheckPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ── Interactive Choice Cards (Simulated vs Real Data) ── */
.arcadia-choice-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 8px;
  animation: choiceFadeIn 0.5s ease-out;
}

.arcadia-choice-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}
.arcadia-choice-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.arcadia-choice-card.option-a {
  border-color: rgba(167, 139, 250, 0.1);
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.03), transparent);
}
.arcadia-choice-card.option-b {
  border-color: rgba(16, 185, 129, 0.1);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.03), transparent);
}
.arcadia-choice-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.3);
}
.arcadia-choice-card.option-a:hover {
  border-color: rgba(167, 139, 250, 0.3);
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.06), transparent);
  box-shadow: 0 6px 16px -6px rgba(167, 139, 250, 0.15);
}
.arcadia-choice-card.option-b:hover {
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.06), transparent);
  box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.15);
}
.arcadia-choice-card:hover::before {
  opacity: 1;
}

.choice-icon {
  font-size: 20px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
  transition: transform 0.3s ease;
}

.arcadia-choice-card:hover .choice-icon {
  transform: scale(1.1) rotate(-3deg);
}

.choice-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.choice-content strong {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.1px;
}

.option-a .choice-content strong {
  color: #c4b5fd;
}

.option-b .choice-content strong {
  color: #6ee7b7;
}

.choice-content span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.3;
}

.choice-arrow {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  transform: translateX(-4px);
}

.arcadia-choice-card:hover .choice-arrow {
  color: rgba(255, 255, 255, 0.6);
  transform: translateX(2px);
}

@keyframes choiceFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.simular-todo-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
}
.simular-todo-btn:hover {
  background: rgba(77, 201, 246, 0.1);
  border-color: rgba(77, 201, 246, 0.3);
  color: #7be0ff;
  transform: translateY(-1px);
}

/* ─── Restructured Landing Layout & Premium Tabs ─── */
.landing-nav-right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  position: relative;
  transition: all 0.3s ease;
}

.landing-settings-dropdown {
  position: relative;
}

/* Mobile responsive alignment of engranaje below profile */
@media (max-width: 860px) {
  .landing-nav {
    padding: 1.2rem 1.5rem !important;
    align-items: flex-start !important;
    flex-wrap: wrap;
  }
  .landing-nav-right {
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.5rem !important;
    margin-top: 1.8rem !important;
    width: auto;
  }
  /* Settings menu position on mobile landing page */
  #landingSettingsMenu {
    right: 0 !important;
    top: 100% !important;
    transform: translateY(8px) !important;
  }
}

/* ─── Premium Organizer Styles ─── */
.premium-organizer {
  background: rgba(7, 16, 25, 0.25);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 24px;
  padding: 2.2rem;
  max-width: 1020px;
  margin: 1.5rem auto 3rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 0 1px rgba(255, 255, 255, 0.05);
}

.premium-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.premium-tab-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 0.75rem 1.8rem;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  isolation: isolate;
}

/* Scan-line sweep on hover */
.premium-tab-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transition: none;
  z-index: 0;
}

/* Bottom edge glow line */
.premium-tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(123, 224, 255, 0.6), transparent);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.premium-tab-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(123, 224, 255, 0.25);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow:
    0 4px 20px rgba(6, 182, 212, 0.1),
    0 0 0 1px rgba(123, 224, 255, 0.08);
}

.premium-tab-btn:hover::before {
  animation: tabScanSweep 0.8s ease forwards;
}

.premium-tab-btn:hover::after {
  width: 60%;
}

@keyframes tabScanSweep {
  0%   { left: -100%; }
  100% { left: 200%; }
}

.premium-tab-btn.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(77, 201, 246, 0.08));
  border-color: rgba(6, 182, 212, 0.5);
  color: #7be0ff;
  font-weight: 700;
  box-shadow:
    0 0 20px rgba(6, 182, 212, 0.2),
    0 0 40px rgba(6, 182, 212, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-shadow: 0 0 12px rgba(123, 224, 255, 0.5);
}

.premium-tab-btn.active::after {
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #7be0ff, transparent);
  box-shadow: 0 0 8px rgba(123, 224, 255, 0.4);
}

/* Category Grid transitions */
.premium-grid {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.premium-grid.active {
  display: grid !important;
  opacity: 1;
  transform: translateY(0);
}

/* Premium locking overlay visual indicator */
.agent-card-locked::after {
  content: '🔒';
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 1.1rem;
  opacity: 0.7;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

/* Mobile responsive constraints overrides for full width layout */
@media (max-width: 860px) {
  .premium-organizer {
    padding: 1.2rem 0.8rem !important;
    margin: 1rem 0.5rem 2rem !important;
    border-radius: 18px !important;
  }
  .agents-grid {
    padding: 0 0.2rem !important;
    max-width: 100% !important; /* Overrides the 400px limit to prevent fideo view */
    gap: 1.2rem !important;
  }
  .premium-tabs {
    gap: 0.6rem !important;
    margin-bottom: 1.5rem !important;
  }
  .premium-tab-btn {
    padding: 0.6rem 1rem !important;
    font-size: 0.82rem !important;
  }
}

/* ─── settingsModalContainer override ─── */
#settingsModalContainer.chat-view {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: none !important;
  z-index: 99999 !important;
}

.modal-backdrop {
  pointer-events: auto !important;
}

/* ─── Responsive Tables ─── */
.agent-content table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.82rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
}
.agent-content th, .agent-content td {
  border: 1px solid var(--border);
  padding: 0.7rem 0.9rem;
  text-align: left;
}
.agent-content th {
  background: var(--bg4);
  font-weight: 600;
  color: var(--accent2);
}
.agent-content tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
.agent-content tr:hover {
  background: rgba(77, 201, 246, 0.04);
}

/* ─── Mobile Overrides for Chat Output ─── */
@media (max-width: 860px) {
  .messages {
    padding: 1rem 0.5rem !important; /* Less padding on the container */
  }
  .agent-content {
    max-width: 98% !important; /* Take almost all available width */
    padding: 0.8rem 0.6rem !important; /* Less internal padding */
    border-radius: 4px 12px 12px 12px !important;
    overflow-x: hidden; /* Prevent horizontal scroll from long text */
  }
  .msg-agent {
    gap: 0.4rem !important;
  }
}

/* ═══════════════════════════════════════════════════
   TIER HERO CARDS — JARVIS HUD STYLE ACCORDION
   ═══════════════════════════════════════════════════ */

/* ─── Hero Card (Clickable Banner) ─── */
.tier-hero-card {
  position: relative;
  z-index: 10;
  max-width: 1020px;
  margin: 2.5rem auto 0;
  padding: 0 2rem;
  cursor: pointer;
  animation: statsReveal 1s ease 0.6s both;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.tier-hero-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.8rem 2.2rem;
  border-radius: 20px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.06) 0%, rgba(99, 102, 241, 0.04) 50%, rgba(6, 182, 212, 0.03) 100%);
  backdrop-filter: blur(24px);
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* ─── Jarvis HUD Corner Accents ─── */
.tier-hero-content::before,
.tier-hero-content::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgba(167, 139, 250, 0.3);
  border-style: solid;
  border-width: 0;
  transition: all 0.4s ease;
  z-index: 5;
}

.tier-hero-content::before {
  top: 8px;
  left: 8px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-top-left-radius: 6px;
}

.tier-hero-content::after {
  bottom: 8px;
  right: 8px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-bottom-right-radius: 6px;
}

.tier-hero-card:hover .tier-hero-content::before,
.tier-hero-card:hover .tier-hero-content::after {
  width: 36px;
  height: 36px;
  border-color: rgba(167, 139, 250, 0.6);
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.3));
}

/* ─── Scan Line Animation ─── */
.tier-hero-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}

.tier-hero-glow::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.5) 20%, rgba(123, 224, 255, 0.7) 50%, rgba(167, 139, 250, 0.5) 80%, transparent 100%);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.4), 0 0 30px rgba(167, 139, 250, 0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tier-hero-card:hover .tier-hero-glow::before {
  opacity: 1;
  animation: jarvisScanDown 2s ease-in-out infinite;
}

@keyframes jarvisScanDown {
  0%   { top: -3px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% + 3px); opacity: 0; }
}

/* Ambient glow background */
.tier-hero-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(167, 139, 250, 0.06), transparent 70%);
  transition: opacity 0.4s ease;
}

.tier-hero-card:hover .tier-hero-glow::after {
  background: radial-gradient(ellipse 90% 70% at 30% 50%, rgba(167, 139, 250, 0.1), transparent 70%);
}

/* ─── Hover & Expanded States ─── */
.tier-hero-card:hover .tier-hero-content {
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow:
    0 8px 32px rgba(167, 139, 250, 0.12),
    0 0 0 1px rgba(167, 139, 250, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateY(-3px);
}

.tier-hero-card.tier-expanded .tier-hero-content {
  border-color: rgba(167, 139, 250, 0.45);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(99, 102, 241, 0.07) 50%, rgba(6, 182, 212, 0.05) 100%);
  box-shadow:
    0 16px 48px rgba(167, 139, 250, 0.18),
    0 0 0 1px rgba(167, 139, 250, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.tier-hero-card.tier-expanded .tier-hero-content::before,
.tier-hero-card.tier-expanded .tier-hero-content::after {
  border-color: rgba(167, 139, 250, 0.5);
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.4));
}

/* ─── Pulsing Energy Ring on Icon ─── */
.tier-hero-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 1.5rem;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(99, 102, 241, 0.15));
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #c4b5fd;
  box-shadow: 0 4px 16px rgba(167, 139, 250, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 6;
}

.tier-hero-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 1px solid rgba(167, 139, 250, 0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: none;
}

.tier-hero-card:hover .tier-hero-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(167, 139, 250, 0.3);
  border-color: rgba(167, 139, 250, 0.5);
}

.tier-hero-card:hover .tier-hero-icon::after {
  opacity: 1;
  animation: iconPulseRing 2s ease-in-out infinite;
}

@keyframes iconPulseRing {
  0%, 100% { inset: -4px; opacity: 0.6; border-color: rgba(167, 139, 250, 0.2); }
  50%      { inset: -8px; opacity: 0.3; border-color: rgba(167, 139, 250, 0.4); }
}

/* ─── Info Text ─── */
.tier-hero-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 6;
}

.tier-hero-info h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 0 0.35rem 0;
  letter-spacing: 0.01em;
}

.tier-hero-info h3 span {
  background: linear-gradient(135deg, #c4b5fd, #7be0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tier-hero-info p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.55;
  margin: 0;
}

/* ─── Badge with shimmer ─── */
.tier-hero-badge {
  flex-shrink: 0;
  padding: 0.45rem 1.1rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c4b5fd;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.22);
  position: relative;
  overflow: hidden;
  z-index: 6;
}

.tier-hero-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: none;
}

.tier-hero-card:hover .tier-hero-badge::before {
  animation: badgeShimmer 1.5s ease 0.2s;
}

@keyframes badgeShimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ─── Arrow with glow ─── */
.tier-hero-arrow {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.25);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease, filter 0.3s ease;
  z-index: 6;
}

.tier-hero-card:hover .tier-hero-arrow {
  color: rgba(167, 139, 250, 0.8);
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.4));
}

.tier-hero-card.tier-expanded .tier-hero-arrow {
  color: #c4b5fd;
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.5));
}

/* ═══════════════════════════════════════════════════
   ENTERPRISE HERO VARIANT — RED/ORANGE HUD
   ═══════════════════════════════════════════════════ */

.tier-hero-enterprise .tier-hero-content {
  border-color: rgba(244, 63, 94, 0.18);
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.05) 0%, rgba(239, 68, 68, 0.03) 50%, rgba(249, 115, 22, 0.03) 100%);
}

.tier-hero-enterprise .tier-hero-content::before,
.tier-hero-enterprise .tier-hero-content::after {
  border-color: rgba(244, 63, 94, 0.3);
}

.tier-hero-enterprise:hover .tier-hero-content::before,
.tier-hero-enterprise:hover .tier-hero-content::after {
  border-color: rgba(244, 63, 94, 0.6);
  filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.3));
}

.tier-hero-enterprise:hover .tier-hero-content {
  border-color: rgba(244, 63, 94, 0.4);
  box-shadow:
    0 8px 32px rgba(244, 63, 94, 0.12),
    0 0 0 1px rgba(244, 63, 94, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.tier-hero-enterprise.tier-expanded .tier-hero-content {
  border-color: rgba(244, 63, 94, 0.45);
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(239, 68, 68, 0.06) 50%, rgba(249, 115, 22, 0.04) 100%);
  box-shadow:
    0 16px 48px rgba(244, 63, 94, 0.18),
    0 0 0 1px rgba(244, 63, 94, 0.12);
}

.tier-hero-enterprise.tier-expanded .tier-hero-content::before,
.tier-hero-enterprise.tier-expanded .tier-hero-content::after {
  border-color: rgba(244, 63, 94, 0.5);
  filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.4));
}

/* Enterprise scan line color */
.tier-glow-enterprise::before {
  background: linear-gradient(90deg, transparent 0%, rgba(244, 63, 94, 0.5) 20%, rgba(249, 115, 22, 0.7) 50%, rgba(244, 63, 94, 0.5) 80%, transparent 100%) !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.4), 0 0 30px rgba(244, 63, 94, 0.15) !important;
}

.tier-glow-enterprise::after {
  background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(244, 63, 94, 0.06), transparent 70%) !important;
}

.tier-hero-enterprise:hover .tier-glow-enterprise::after {
  background: radial-gradient(ellipse 90% 70% at 30% 50%, rgba(244, 63, 94, 0.1), transparent 70%) !important;
}

.tier-icon-enterprise {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(249, 115, 22, 0.15)) !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
  color: #fda4af !important;
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.2) !important;
}

.tier-icon-enterprise::after {
  border-color: rgba(244, 63, 94, 0.15) !important;
}

.tier-hero-enterprise:hover .tier-icon-enterprise {
  box-shadow: 0 6px 24px rgba(244, 63, 94, 0.3) !important;
  border-color: rgba(244, 63, 94, 0.5) !important;
}

.tier-hero-enterprise .tier-hero-info h3 span {
  background: linear-gradient(135deg, #fda4af, #fdba74) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.tier-badge-enterprise {
  color: #fda4af !important;
  background: rgba(244, 63, 94, 0.12) !important;
  border-color: rgba(244, 63, 94, 0.22) !important;
}

.tier-hero-enterprise:hover .tier-hero-arrow {
  color: rgba(244, 63, 94, 0.8) !important;
  filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.4)) !important;
}

.tier-hero-enterprise.tier-expanded .tier-hero-arrow {
  color: #fda4af !important;
  filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.5)) !important;
}

/* ═══════════════════════════════════════════════════
   COLLAPSIBLE CONTAINER
   ═══════════════════════════════════════════════════ */

.tier-collapsible {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 2rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s;
}

.tier-collapsible.tier-open {
  opacity: 1;
  margin-top: 0.6rem;
}

/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVE + TOUCH INTERACTIVITY
   ═══════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .tier-hero-card {
    padding: 0 1rem;
    margin-top: 1.8rem;
  }

  .tier-hero-content {
    flex-wrap: wrap;
    padding: 1.4rem 1.3rem;
    gap: 0.9rem;
    border-radius: 16px;
  }

  .tier-hero-icon {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    border-radius: 13px;
  }

  .tier-hero-info h3 {
    font-size: 1.1rem;
  }

  .tier-hero-info p {
    font-size: 0.74rem;
    line-height: 1.45;
  }

  .tier-hero-badge {
    font-size: 0.62rem;
    padding: 0.35rem 0.8rem;
  }

  .tier-collapsible {
    padding: 0 1rem;
  }

  /* HUD corners smaller on mobile */
  .tier-hero-content::before,
  .tier-hero-content::after {
    width: 20px;
    height: 20px;
  }

  .tier-hero-card:hover .tier-hero-content::before,
  .tier-hero-card:hover .tier-hero-content::after {
    width: 26px;
    height: 26px;
  }
}

/* ─── Mobile Touch Active States ─── */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-dependent animations on touch devices */
  .tier-hero-card:hover .tier-hero-glow::before {
    animation: none;
  }

  /* Active press state for touch */
  .tier-hero-card:active .tier-hero-content {
    transform: scale(0.98);
    border-color: rgba(167, 139, 250, 0.5);
    box-shadow:
      0 4px 20px rgba(167, 139, 250, 0.2),
      inset 0 0 20px rgba(167, 139, 250, 0.05);
    transition-duration: 0.1s;
  }

  .tier-hero-enterprise:active .tier-hero-content {
    border-color: rgba(244, 63, 94, 0.5) !important;
    box-shadow:
      0 4px 20px rgba(244, 63, 94, 0.2),
      inset 0 0 20px rgba(244, 63, 94, 0.05) !important;
  }

  /* Show scan line briefly on tap */
  .tier-hero-card:active .tier-hero-glow::before {
    opacity: 1;
    animation: jarvisScanDown 1.5s ease-in-out 1;
  }

  /* Icon pulse on tap */
  .tier-hero-card:active .tier-hero-icon {
    transform: scale(1.12);
    box-shadow: 0 6px 24px rgba(167, 139, 250, 0.35);
  }

  .tier-hero-enterprise:active .tier-icon-enterprise {
    box-shadow: 0 6px 24px rgba(244, 63, 94, 0.35) !important;
  }

  /* Arrow glow on tap */
  .tier-hero-card:active .tier-hero-arrow {
    color: rgba(167, 139, 250, 0.9);
    filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.5));
  }

  .tier-hero-enterprise:active .tier-hero-arrow {
    color: rgba(244, 63, 94, 0.9) !important;
    filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.5)) !important;
  }

  /* Corner accents on tap */
  .tier-hero-card:active .tier-hero-content::before,
  .tier-hero-card:active .tier-hero-content::after {
    border-color: rgba(167, 139, 250, 0.7);
    filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.4));
  }

  .tier-hero-enterprise:active .tier-hero-content::before,
  .tier-hero-enterprise:active .tier-hero-content::after {
    border-color: rgba(244, 63, 94, 0.7) !important;
    filter: drop-shadow(0 0 5px rgba(244, 63, 94, 0.4)) !important;
  }

  /* Expanded state visual feedback */
  .tier-hero-card.tier-expanded .tier-hero-content::before,
  .tier-hero-card.tier-expanded .tier-hero-content::after {
    border-color: rgba(167, 139, 250, 0.5);
    filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.3));
  }

  .tier-hero-enterprise.tier-expanded .tier-hero-content::before,
  .tier-hero-enterprise.tier-expanded .tier-hero-content::after {
    border-color: rgba(244, 63, 94, 0.5) !important;
    filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.3)) !important;
  }
}

@media (max-width: 480px) {
  .tier-hero-content {
    flex-direction: column;
    text-align: center;
    gap: 0.7rem;
    padding: 1.2rem 1rem;
  }

  .tier-hero-badge {
    align-self: center;
  }

  .tier-hero-arrow {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
  }

  .tier-hero-info p {
    font-size: 0.7rem;
  }

  /* Simpler HUD corners on very small screens */
  .tier-hero-content::before,
  .tier-hero-content::after {
    width: 16px;
    height: 16px;
  }
}

/* Fix mobile nav layout: Username Left, Settings Gear Top Right */
@media (max-width: 860px) {
  .landing-nav {
    padding: 1.2rem 1.5rem !important;
    align-items: flex-start !important;
    flex-wrap: wrap;
    position: relative;
  }
  .landing-nav-right {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    margin-top: 0.8rem !important;
    width: 100%;
    position: static !important;
  }
  .landing-settings-dropdown {
    position: absolute !important;
    top: 1.2rem !important;
    right: 1.5rem !important;
  }
  #landingSettingsMenu {
    right: 0 !important;
    top: 100% !important;
    transform: translateY(8px) !important;
  }
}
/* VARIABLES DE COLOR */
  --astronomo:     #9b5de5;          
  --astronomo-bg:  rgba(155,93,229,0.08);
  --fisico:        #00e5ff;          
  --fisico-bg:     rgba(0,229,255,0.08);
  --matematico:    #c084fc;          
  --matematico-bg: rgba(192,132,252,0.08);
  --quimico:       #2dd4bf;          
  --quimico-bg:    rgba(45,212,191,0.08);
  --economista:    #fb923c;          
  --economista-bg: rgba(251,146,60,0.08);

/* HOVER BORDERS */
#cardAstronomo { border-color: rgba(155,93,229,0.18); }
#cardAstronomo:hover {
  transform:translateY(-6px);
  border-color:rgba(155,93,229,0.5);
  background:rgba(155,93,229,0.05);
  box-shadow:0 8px 30px rgba(155,93,229,0.2), inset 0 0 12px rgba(155,93,229,0.06);
}

/* EFECTOS GLOW */
.card-glow-astronomo{background:var(--astronomo)}
.card-glow-fisico{background:var(--fisico)}
.card-glow-matematico{background:var(--matematico)}
.card-glow-quimico{background:var(--quimico)}
.card-glow-economista{background:var(--economista)}

/* FONDOS Y BORDES DE ICONOS */
.card-icon-astronomo{background:var(--astronomo-bg);color:var(--astronomo);border:1px solid rgba(155,93,229,0.2)}
.card-icon-fisico{background:var(--fisico-bg);color:var(--fisico);border:1px solid rgba(0,229,255,0.2)}
.card-icon-matematico{background:var(--matematico-bg);color:var(--matematico);border:1px solid rgba(192,132,252,0.2)}
.card-icon-quimico{background:var(--quimico-bg);color:var(--quimico);border:1px solid rgba(45,212,191,0.2)}
.card-icon-economista{background:var(--economista-bg);color:var(--economista);border:1px solid rgba(251,146,60,0.2)}

/* COLOR DE TITULOS */
#cardAstronomo h3 span{color:var(--astronomo)}
#cardFisico h3 span{color:var(--fisico)}
#cardMatematico h3 span{color:var(--matematico)}
#cardQuimico h3 span{color:var(--quimico)}
#cardEconomista h3 span{color:var(--economista)}

/* COLOR DEL TEXTO "INICIAR CONSULTA" AL PASAR EL MOUSE */
#cardAstronomo:hover .card-enter{color:var(--astronomo)}
#cardFisico:hover .card-enter{color:var(--fisico)}
#cardMatematico:hover .card-enter{color:var(--matematico)}
#cardQuimico:hover .card-enter{color:var(--quimico)}
#cardEconomista:hover .card-enter{color:var(--economista)}

/* ─── WEB (DESKTOP) ZOOM OUT ─── */
.landing-content-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 861px) {
  .landing-content-wrapper {
    transform: scale(0.9);
    transform-origin: top center;
    width: 111.111%;
    margin-left: -5.555%;
    min-height: 111.111vh;
  }
  
  .chat-view {
    transform: scale(0.9);
    transform-origin: top center;
    width: 111.111%;
    height: 111.111vh;
    margin-left: -5.555%;
  }
}

/* ─── KATEX FALLBACK RULES ─── */
.katex .katex-mathml {
  display: none !important; /* Hide MathML to prevent duplicate text rendering */
}
.katex .katex-html {
  display: inline-block !important;
}
.katex {
  font-family: inherit;
  white-space: nowrap;
}
.katex-display {
  display: block;
  margin: 1em 0;
  text-align: center;
}
.katex .mfrac {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
}