:root{
  --bg0:#050b18; --bg1:#0a1730; --teal:#1fd9e6; --teal2:#37e7f0; --teal-deep:#0e7c86;
  --ink:#dff1f6; --muted:#7d97a8; --silver1:#eaf2f6; --silver2:#9fb3c2;
  color-scheme:dark; /* fuerza dark en scrollbars, forms y UI nativa */
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{height:100%;}
html{background:#050b18;}
body{
  background:radial-gradient(120% 90% at 50% 38%, #0b1c3a 0%, var(--bg0) 60%, #02060f 100%);
  color:var(--ink);
  font-family:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  overflow:hidden; user-select:none;
}
#app{height:100dvh; display:flex; flex-direction:column; align-items:center; padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);}

/* TOP BAR */
.topbar{width:100%; max-width:560px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 4px 6px; position:relative;}
.brand-intelligo{display:flex; flex-direction:column; line-height:1;}
.i-logo{font-size:15px; letter-spacing:.5px; color:#cde0ea;}
.i-logo b{color:var(--teal);}
.i-tag{font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-top:3px;}
.wordmark{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  display:flex; align-items:center; gap:1px; font-weight:800; font-size:26px; letter-spacing:4px;
  background:linear-gradient(180deg,#fff 0%,#cdd9e2 45%,#7e93a3 75%,#aebfcb 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
.o-glyph{display:inline-block; width:24px; height:24px; color:var(--teal2); -webkit-text-fill-color:var(--teal2); transform:translateY(1px);
  filter:drop-shadow(0 0 6px rgba(55,231,240,.8));}
.lab-pill{font-size:11px; color:var(--teal2); border:1px solid rgba(55,231,240,.35); background:rgba(31,217,230,.08); padding:5px 11px; border-radius:20px; white-space:nowrap;}
.top-right{display:flex; align-items:center; gap:8px;}
.menu-btn{width:36px; height:36px; border-radius:11px; cursor:pointer; color:var(--muted);
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); display:grid; place-items:center; transition:.18s;}
.menu-btn:hover,.menu-btn.open{color:var(--teal2); border-color:rgba(55,231,240,.4); background:rgba(31,217,230,.1);}

/* Panel del menú */
.menu-panel{
  position:fixed; top:64px; right:14px; z-index:60; width:min(320px, calc(100vw - 28px));
  background:linear-gradient(180deg,#0c1c38,#081427);
  border:1px solid rgba(55,231,240,.25); border-radius:16px; padding:8px;
  box-shadow:0 14px 44px rgba(0,0,0,.6);
  animation:ib-in .22s ease;
}
.menu-item{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:none; border:none; color:var(--ink); padding:11px 10px; border-radius:11px; transition:.15s;}
.menu-item:hover{background:rgba(31,217,230,.09);}
.menu-item .mi-ic{font-size:19px; width:30px; text-align:center;}
.menu-item .grow{display:flex; flex-direction:column; gap:2px; min-width:0;}
.menu-item b{font-size:13.5px; font-weight:600;}
.menu-item small{font-size:11px; color:var(--muted);}
.menu-item[disabled]{opacity:.45; cursor:default;}
.menu-foot{font-size:10px; color:#39485a; text-align:center; padding:8px 0 4px; border-top:1px solid rgba(255,255,255,.06); margin-top:6px;}

/* STAGE / ORB */
.stage{flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; min-height:0;}
/* el orb escala por ancho Y por alto: nunca aplasta captions/controles */
#orb{width:min(78vw,44dvh,380px); height:min(78vw,44dvh,380px); touch-action:none;}
.status{position:absolute; bottom:6px; font-size:13px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; transition:color .3s;}
.status.live{color:var(--teal2);}
/* "pensando": puntos animados + respiración sutil */
.status.thinking{animation:think-breathe 1.6s ease-in-out infinite;}
.status.thinking::after{content:''; display:inline-block; width:1.4em; text-align:left; animation:think-dots 1.2s steps(1,end) infinite;}
@keyframes think-dots{0%{content:'';}25%{content:'·';}50%{content:'··';}75%{content:'···';}}
@keyframes think-breathe{0%,100%{opacity:.75;}50%{opacity:1;}}

/* PANEL VISUAL (tablas / material que acompaña la voz) */
.visual-card{
  position:relative; text-align:left; margin:0 auto 10px; max-width:100%;
  background:linear-gradient(180deg,#0c1c38,#081427);
  border:1px solid rgba(55,231,240,.28); border-radius:14px;
  padding:12px 14px; box-shadow:0 10px 34px rgba(0,0,0,.45);
  max-height:34dvh; overflow:auto; animation:ib-in .3s ease;
}
.vc-close{position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--muted);
  cursor:pointer; font-size:12px; display:grid; place-items:center; z-index:1;}
.vc-close:hover{color:var(--teal2);}
.vc-body p{font-size:12.5px; color:var(--muted); margin:4px 0;}
.vc-body table{width:100%; border-collapse:collapse; font-size:12.5px;}
.vc-body th{color:var(--teal2); text-transform:uppercase; font-size:10.5px; letter-spacing:.6px;
  text-align:left; padding:6px 10px 6px 0; border-bottom:1px solid rgba(55,231,240,.25);}
.vc-body td{padding:6px 10px 6px 0; border-bottom:1px solid rgba(255,255,255,.06); color:var(--ink);}
.vc-body tr:last-child td{border-bottom:none;}
.vc-body td.num{position:relative; min-width:120px;}
.vc-body .bar{position:absolute; left:0; top:15%; height:70%; border-radius:4px;
  background:linear-gradient(90deg, rgba(31,217,230,.34), rgba(31,217,230,.14)); z-index:0;}
.vc-body .bar-v{position:relative; z-index:1; padding-left:6px; font-variant-numeric:tabular-nums;}

/* CAPTIONS */
.captions{width:100%; max-width:560px; min-height:96px; padding:4px 8px; text-align:center;}
.cap-neuron{font-size:16px; line-height:1.45; color:var(--ink); min-height:22px;}
.cap-user{font-size:13px; color:var(--muted); margin-top:8px; font-style:italic; min-height:16px;}

/* CHIPS */
.chips{width:100%; max-width:560px; display:flex; gap:8px; overflow-x:auto; padding:10px 4px; scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; font-size:12.5px; color:#bfe6ec; background:rgba(31,217,230,.07); border:1px solid rgba(31,217,230,.25); padding:8px 14px; border-radius:18px; cursor:pointer; transition:.2s; white-space:nowrap;}
.chip:hover,.chip:active{background:rgba(31,217,230,.18); color:#fff;}

/* CONTROLS */
.controls{display:flex; align-items:center; gap:14px; padding:6px 0 10px;}
.mic{
  width:74px; height:74px; border-radius:50%; border:none; cursor:pointer; color:#02161a;
  background:radial-gradient(circle at 50% 35%, #6ff2fb, var(--teal) 55%, var(--teal-deep));
  box-shadow:0 0 0 0 rgba(31,217,230,.45), 0 8px 26px rgba(31,217,230,.4);
  display:grid; place-items:center; transition:transform .15s;
}
.mic:active{transform:scale(.94);}
.mic.recording{animation:pulse 1.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,217,230,.5),0 8px 26px rgba(31,217,230,.4);}70%{box-shadow:0 0 0 22px rgba(31,217,230,0),0 8px 26px rgba(31,217,230,.4);}100%{box-shadow:0 0 0 0 rgba(31,217,230,0),0 8px 26px rgba(31,217,230,.4);}}
.stop{width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#cfe1e8; cursor:pointer; display:grid; place-items:center;}

.demo-note{font-size:9.5px; color:#46586a; letter-spacing:.5px; padding:2px 0 8px; text-align:center;}

/* PWA INSTALL BANNER */
.install-banner{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:50; max-width:520px; margin:0 auto;
  display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px;
  background:linear-gradient(180deg,#0c1c38,#081427);
  border:1px solid rgba(55,231,240,.28); border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  animation:ib-in .35s ease;
}
@keyframes ib-in{from{opacity:0; transform:translateY(20px);}to{opacity:1; transform:translateY(0);}}
.ib-icon{width:44px; height:44px; border-radius:12px; flex:0 0 auto;
  box-shadow:0 0 14px rgba(31,217,230,.35);}
.ib-text{display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0;}
.ib-text strong{font-size:14px; color:var(--silver1); font-weight:700;}
.ib-text span{font-size:11.5px; color:var(--muted);}
.ib-install{flex:0 0 auto; border:none; cursor:pointer; color:#02161a; font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:20px;
  background:radial-gradient(circle at 50% 30%, #6ff2fb, var(--teal) 60%, var(--teal-deep));
  box-shadow:0 4px 16px rgba(31,217,230,.35);}
.ib-install:active{transform:scale(.96);}
.ib-dismiss{flex:0 0 auto; width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--muted);
  display:grid; place-items:center;}
.ib-dismiss:active{background:rgba(255,255,255,.12);}

/* ============ SPLASH DE ENTRADA ============ */
#splash{
  position:fixed; inset:0; z-index:100;
  background:radial-gradient(120% 90% at 50% 38%, #0b1c3a 0%, var(--bg0) 60%, #02060f 100%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s ease;
}
#splash.hide{opacity:0; pointer-events:none;}
.sp-inner{display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px; text-align:center; animation:sp-in .8s ease;}
@keyframes sp-in{from{opacity:0; transform:translateY(14px);}to{opacity:1; transform:translateY(0);}}
.sp-intelligo{display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:6px;}
.sp-wordmark{font-size:44px; letter-spacing:6px; position:static; transform:none;}
.sp-wordmark .o-glyph{width:40px; height:40px; animation:sp-glow 2.4s ease-in-out infinite;}
@keyframes sp-glow{0%,100%{filter:drop-shadow(0 0 6px rgba(55,231,240,.7));}50%{filter:drop-shadow(0 0 18px rgba(55,231,240,1));}}
.sp-tag{font-size:12.5px; color:var(--muted); letter-spacing:.5px; max-width:300px; line-height:1.5;}
.sp-btn{
  margin-top:18px; border:none; cursor:pointer; color:#02161a; font-weight:800; font-size:16px; letter-spacing:.5px;
  padding:15px 34px; border-radius:30px;
  background:radial-gradient(circle at 50% 30%, #6ff2fb, var(--teal) 60%, var(--teal-deep));
  box-shadow:0 0 0 0 rgba(31,217,230,.45), 0 10px 34px rgba(31,217,230,.45);
  animation:pulse 2.2s infinite; transition:transform .15s;
}
.sp-btn:active{transform:scale(.95);}
.sp-btn.loading{animation:none; opacity:.75; pointer-events:none;}
.sp-hint{font-size:11px; color:#46586a; letter-spacing:.5px;}
@media (max-height:640px){ .sp-wordmark{font-size:34px;} .sp-btn{padding:12px 28px; font-size:14px;} }

/* ============ RESPONSIVE ============ */
/* Pantallas cortas (laptops chicas, teléfonos compactos) */
@media (max-height:640px){
  .topbar{padding:10px 4px 2px;}
  .wordmark{font-size:21px; top:9px;}
  .captions{min-height:64px;}
  .cap-neuron{font-size:14px;}
  .chips{padding:6px 4px;}
  .mic{width:60px; height:60px;}
  .stop{width:46px; height:46px;}
  .controls{padding:4px 0 6px;}
  .demo-note{display:none;}
}
/* Teléfono en landscape: orb a la izquierda, texto a la derecha */
@media (orientation:landscape) and (max-height:480px){
  #app{flex-direction:row; flex-wrap:wrap; align-content:center; justify-content:center; gap:0 26px; padding:8px 20px;}
  .topbar{flex-basis:100%; max-width:none; padding:6px 4px 0;}
  .stage{flex:0 0 auto; width:auto;}
  #orb{width:min(60dvh,220px); height:min(60dvh,220px);}
  .status{position:static; margin-top:2px;}
  .captions{flex:1; min-width:220px; max-width:420px; text-align:left; align-self:center;}
  .cap-neuron{font-size:13.5px;}
  .chips{flex-basis:100%; max-width:none; justify-content:center;}
  .controls{align-self:center;}
}
/* ====== WEB / DESKTOP (≥980px): composición de 2 columnas, no "teléfono centrado" ====== */
@media (min-width:980px) and (orientation:landscape){
  #app{
    display:grid;
    grid-template-columns:minmax(360px,500px) minmax(400px,560px);
    grid-template-rows:auto 1fr auto auto;
    column-gap:64px; row-gap:6px;
    justify-content:center; align-content:center; align-items:center;
    height:100dvh; padding:0 48px;
  }
  .topbar{grid-column:1 / -1; grid-row:1; max-width:none; align-self:start; padding-top:22px;}
  .wordmark{font-size:30px;}
  .stage{grid-column:1; grid-row:2; align-self:center; justify-self:center;}
  #orb{width:min(36vw,52dvh,470px); height:min(36vw,52dvh,470px);}
  .status{bottom:-8px; font-size:12.5px;}
  .captions{grid-column:2; grid-row:2; align-self:center; max-width:none; text-align:left; min-height:0; padding:0;}
  .cap-neuron{font-size:20px; line-height:1.55; min-height:120px;}
  .cap-user{font-size:14px; text-align:left;}
  .chips{grid-column:2; grid-row:3; max-width:none; flex-wrap:wrap; overflow:visible; padding:6px 0 14px; align-self:start;}
  .chip{font-size:13.5px; padding:9px 16px;}
  .controls{grid-column:1; grid-row:3; justify-self:center; align-self:start; padding:2px 0;}
  .mic{width:80px; height:80px;}
  .demo-note{grid-column:1 / -1; grid-row:4; align-self:end; padding-bottom:12px;}
}
/* Tablets verticales */
@media (min-width:700px) and (max-width:1199px) and (orientation:portrait){
  .topbar,.captions,.chips{max-width:620px;}
  #orb{width:min(56vw,40dvh,420px); height:min(56vw,40dvh,420px);}
  .cap-neuron{font-size:17px;}
}

/* Biblioteca overlay */
.bib-overlay{position:fixed;inset:0;background:rgba(3,8,18,.8);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:50;padding:18px;}
.bib-card{width:100%;max-width:440px;background:var(--bg1);border:1px solid rgba(31,217,230,.25);border-radius:16px;padding:18px;}
.bib-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;}
.bib-head strong{font-size:16px;}
.bib-sub{font-size:12px;color:var(--muted);margin-top:3px;}
.bib-x{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;}
.bib-item{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:12px;margin-bottom:10px;color:var(--ink);text-decoration:none;background:rgba(255,255,255,.03);}
.bib-item:hover{background:rgba(31,217,230,.08);}
.bib-item .bi-ic{font-size:22px;}
.bib-item .grow{flex:1;display:flex;flex-direction:column;min-width:0;}
.bib-item b{font-size:14px;}
.bib-item small{color:var(--muted);font-size:11px;}
.bib-item .bi-go{color:var(--teal2);font-size:13px;white-space:nowrap;}