/* css/holo-chat.css · CHAT-IA (prefijo hc-)
   Orbe de IA (canvas), panel del chat en vidrio holográfico, foco + subrayado de la guía, karaoke y barra de control.
   Este archivo se carga ANTES del <style> inline de index.html: los selectores van con "html body" para ganar especificidad. */

/* ---------- lanzador: el orbe ES el botón ---------- */
html body #chatFab.hc-fab{border-radius:50%;background:rgba(3,6,13,.55);color:#EAF0FA;
  box-shadow:0 0 0 1px rgba(42,165,245,.42),0 0 26px -6px rgba(42,165,245,.6),0 14px 30px -14px rgba(0,0,0,.9);overflow:visible}
html body #chatFab.hc-fab .cf-open{display:none}
html body #chatFab.hc-fab:hover{box-shadow:0 0 0 1px rgba(127,208,255,.7),0 0 34px -4px rgba(42,165,245,.75),0 14px 30px -14px rgba(0,0,0,.9)}
html body #chatFab.hc-fab:focus-visible{outline:2px solid #7FD0FF;outline-offset:4px}
.hc-orb{display:block;pointer-events:none}
.hc-orb-fab{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;transition:opacity .3s,transform .3s}
html body #chatFab.hc-fab.open .hc-orb-fab{opacity:0;transform:scale(.6)}
html body #chatFab.hc-fab .cf-close{z-index:1}
html body #chatFab.hc-fab.open{background:rgba(8,16,32,.92)}
/* anillo de "pensando" en el propio botón */
html body #chatFab.hc-fab::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(127,208,255,.0);pointer-events:none;transition:border-color .3s}
html body #chatFab.hc-fab[data-hc="think"]::after,html body #chatFab.hc-fab[data-hc="guide"]::after{border-color:rgba(127,208,255,.45);border-top-color:transparent;border-bottom-color:transparent;animation:hcSpin 1.1s linear infinite}
html body #chatFab.hc-fab[data-hc="guide"]::after{animation-duration:2.4s}

/* ---------- panel: vidrio oscuro con bordes de luz ---------- */
html body #chatPanel{background:rgba(5,10,20,.9);border:1px solid rgba(42,165,245,.34);
  box-shadow:inset 0 0 0 1px rgba(127,208,255,.05),0 0 44px -14px rgba(42,165,245,.45),0 30px 80px -30px rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
html body #chatPanel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:6;pointer-events:none;background:rgba(127,208,255,.75);box-shadow:0 0 12px 1px rgba(42,165,245,.6);transform-origin:50% 50%;transform:scaleX(.35);opacity:.9;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
html body #chatPanel[data-hc="think"]::before{animation:hcScan 1.6s ease-in-out infinite alternate}
html body #chatPanel[data-hc="speak"]::before,html body #chatPanel[data-hc="guide"]::before{transform:scaleX(.8)}
/* esquinas HUD */
html body #chatPanel::after{content:"";position:absolute;inset:7px;z-index:6;pointer-events:none;
  background:linear-gradient(#7FD0FF,#7FD0FF) 0 0/12px 1px,linear-gradient(#7FD0FF,#7FD0FF) 0 0/1px 12px,linear-gradient(#7FD0FF,#7FD0FF) 100% 0/12px 1px,linear-gradient(#7FD0FF,#7FD0FF) 100% 0/1px 12px,
  linear-gradient(#7FD0FF,#7FD0FF) 0 100%/12px 1px,linear-gradient(#7FD0FF,#7FD0FF) 0 100%/1px 12px,linear-gradient(#7FD0FF,#7FD0FF) 100% 100%/12px 1px,linear-gradient(#7FD0FF,#7FD0FF) 100% 100%/1px 12px;
  background-repeat:no-repeat;opacity:.55}
html body #chatPanel .cp-head{background:rgba(42,165,245,.04);border-bottom:1px solid rgba(42,165,245,.2)}
html body #chatPanel .cp-av.hc-av-head{position:relative;width:48px;height:48px;margin:-4px 0;background:transparent;box-shadow:none;border-radius:50%;overflow:visible}
html body #chatPanel .cp-av.hc-av-head img{display:none}
.hc-orb-head{position:absolute;inset:-10px;width:68px;height:68px}
html body #chatPanel .cp-head .nm{font-family:"Plus Jakarta Sans",var(--f-sans,system-ui),sans-serif;letter-spacing:-.005em}
html body #chatPanel .cp-head .st{font-family:"JetBrains Mono",var(--f-mono,monospace);font-size:11px;letter-spacing:.08em;color:#74BDEB}
html body #chatPanel[data-hc="think"] .cp-head .st{color:#7FD0FF;text-shadow:0 0 10px rgba(42,165,245,.7)}
html body #chatPanel .cp-tool:focus-visible,html body #chatPanel .cp-ib:focus-visible{outline:2px solid #7FD0FF;outline-offset:1px}
html body #chatPanel .cp-ctx{background:rgba(3,6,13,.55);border-bottom:1px solid rgba(42,165,245,.12);color:#8C9AB5;font-family:"JetBrains Mono",var(--f-mono,monospace)}
/* fila de guía */
.hc-guide{display:flex;gap:6px;padding:8px 16px;border-bottom:1px solid rgba(42,165,245,.12);overflow-x:auto;scrollbar-width:none;flex:none}
.hc-guide::-webkit-scrollbar{display:none}
.hc-gb{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:32px;padding:0 12px 0 10px;border-radius:999px;background:rgba(42,165,245,.07);border:1px solid rgba(42,165,245,.35);color:#D8ECFB;
  font-family:"JetBrains Mono",var(--f-mono,monospace);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .2s}
.hc-gb:hover{background:rgba(42,165,245,.16);border-color:#7FD0FF;box-shadow:0 0 16px -4px rgba(42,165,245,.6)}
.hc-gb:focus-visible{outline:2px solid #7FD0FF;outline-offset:2px}
.hc-gb svg{width:15px;height:15px;fill:none;stroke:#7FD0FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* mensajes */
html body #chatPanel .msg.bot{background:rgba(10,20,40,.78);border:1px solid rgba(42,165,245,.2);box-shadow:inset 2px 0 0 rgba(42,165,245,.55)}
html body #chatPanel .msg.user{background:rgba(42,165,245,.16);border:1px solid rgba(42,165,245,.34);color:#F2F8FF}
html body #chatPanel .msg.note{background:transparent;border-color:rgba(42,165,245,.3)}
html body #chatPanel .msg.typing span{background:#7FD0FF;box-shadow:0 0 8px rgba(42,165,245,.8)}
html body #chatPanel .msg.live::after{background:#7FD0FF;box-shadow:0 0 6px #2AA5F5}
html body #chatPanel .act{border-color:rgba(42,165,245,.34);background:rgba(42,165,245,.05)}
html body #chatPanel .act:hover{border-color:#7FD0FF;background:rgba(42,165,245,.14);box-shadow:0 0 14px -4px rgba(42,165,245,.6)}
html body #chatPanel .act.pri{background:#2AA5F5;border-color:#2AA5F5;color:#04121F}
html body #chatPanel .act:focus-visible,html body #chatPanel .starters button:focus-visible,html body #chatPanel .cp-quick button:focus-visible{outline:2px solid #7FD0FF;outline-offset:2px}
html body #chatPanel .starters button,html body #chatPanel .ccard,html body #chatPanel .lcard,html body #chatPanel .ecard{background:rgba(10,20,40,.78);border-color:rgba(42,165,245,.18)}
html body #chatPanel .starters button:hover{border-color:#7FD0FF;box-shadow:0 0 18px -6px rgba(42,165,245,.6)}
html body #chatPanel .cp-quick{border-top-color:rgba(42,165,245,.12)}
html body #chatPanel .cp-quick button{border-color:rgba(42,165,245,.3);background:rgba(42,165,245,.04)}
html body #chatPanel .cp-input{border-top:1px solid rgba(42,165,245,.16)}
html body #chatPanel .cp-input textarea{background:rgba(3,6,13,.72);border-color:rgba(42,165,245,.32)}
html body #chatPanel .cp-input textarea:focus{border-color:#2AA5F5;outline-color:#2AA5F5;box-shadow:0 0 0 4px rgba(42,165,245,.12)}
html body #chatPanel #cpSend{box-shadow:0 0 18px -4px rgba(42,165,245,.7)}
/* avatar de cada respuesta: mini orbe CSS 3D */
html body #chatPanel .turn.hc-turn{position:relative;padding-left:32px}
.hc-av{position:absolute;left:0;top:3px;width:24px;height:24px;perspective:70px;pointer-events:none}
.hc-av i{position:absolute;inset:7px;border-radius:50%;background:radial-gradient(circle at 42% 40%,#F0FAFF 0,#7FD0FF 34%,rgba(42,165,245,.85) 62%,rgba(42,165,245,0) 74%);box-shadow:0 0 10px rgba(42,165,245,.65)}
.hc-av b,.hc-av u{position:absolute;inset:1px;border-radius:50%;border:1px solid rgba(127,208,255,.7);border-left-color:transparent;transform:rotateX(68deg) rotateZ(20deg)}
.hc-av u{inset:3px;border-color:rgba(127,208,255,.5);border-bottom-color:transparent;transform:rotateY(64deg) rotateZ(-30deg)}
.turn:not(.hc-live) .hc-av{opacity:.55}
#chatPanel .hc-live .hc-av b{animation:hcR1 6s linear infinite}
#chatPanel .hc-live .hc-av u{animation:hcR2 8s linear infinite}
#chatPanel .hc-live .hc-av i{animation:hcBreath 3.2s ease-in-out infinite}
#chatPanel[data-hc="think"] .hc-live .hc-av b{animation-duration:.9s}
#chatPanel[data-hc="think"] .hc-live .hc-av u{animation-duration:1.3s}
#chatPanel[data-hc="speak"] .hc-live .hc-av i{animation-duration:.6s}

/* ---------- foco holográfico ---------- */
/* QA: foco 98 / tinta 99 → bajo la nav (100): el velo del foco ya no oscurece el menú */
.hc-spot{position:fixed;left:0;top:0;width:0;height:0;z-index:98;pointer-events:none;border-radius:14px;opacity:0;
  box-shadow:0 0 0 1px rgba(127,208,255,.7),0 0 26px 2px rgba(42,165,245,.35),inset 0 0 30px -10px rgba(42,165,245,.45),0 0 0 200vmax rgba(2,5,12,.5);
  transition:opacity .45s,width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.hc-spot.on{opacity:1}
.hc-spot::before,.hc-spot::after{content:"";position:absolute;width:18px;height:18px;border:2px solid #7FD0FF;filter:drop-shadow(0 0 6px #2AA5F5)}
.hc-spot::before{left:-6px;top:-6px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.hc-spot::after{right:-6px;bottom:-6px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.hc-tag{position:absolute;left:14px;bottom:-11px;padding:3px 8px;border-radius:4px;background:#03060D;border:1px solid rgba(127,208,255,.6);color:#7FD0FF;
  font:600 11px/1 "JetBrains Mono",var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis}
.hc-tag:empty{display:none}
.hc-tag::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#2AA5F5;box-shadow:0 0 8px #2AA5F5;vertical-align:1px}
/* capa de tinta (subrayado + karaoke), coordenadas de documento */
.hc-ink{position:absolute;left:0;top:0;width:0;height:0;z-index:99;pointer-events:none}
.hc-ul{position:absolute;height:3px;margin-top:2px;border-radius:2px;background:#7FD0FF;box-shadow:0 0 10px 1px rgba(42,165,245,.85),0 0 2px #EAF7FF;transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.6,.1,.2,1)}
.hc-ul.on{transform:scaleX(1)}
.hc-ul::after{content:"";position:absolute;right:-3px;top:-2px;width:7px;height:7px;border-radius:50%;background:#EAF7FF;box-shadow:0 0 10px #7FD0FF;opacity:0;transition:opacity .3s .5s}
.hc-ul.on::after{opacity:1;animation:hcFade 1.2s 1s forwards}
.hc-kw{position:absolute;left:0;top:0;width:0;height:0;border-radius:5px;background:rgba(42,165,245,.3);box-shadow:0 0 0 1px rgba(127,208,255,.55),0 0 18px rgba(42,165,245,.55);
  border-bottom:2px solid #EAF7FF;mix-blend-mode:screen;opacity:0;transition:transform .14s ease-out,width .14s ease-out,height .14s,opacity .2s}
.hc-kw.on{opacity:1}
.hc-kt{position:absolute;height:2px;margin-top:1px;border-radius:1px;background:rgba(127,208,255,.6);box-shadow:0 0 6px rgba(42,165,245,.6)}

/* ---------- barra de guía (control + subtítulos) ---------- */
.hc-bar{position:fixed;left:24px;bottom:24px;z-index:160;display:flex;align-items:center;gap:12px;width:min(560px,calc(100vw - 128px));padding:10px 10px 10px 8px;border-radius:16px;
  background:rgba(5,10,20,.92);border:1px solid rgba(42,165,245,.4);box-shadow:0 0 36px -10px rgba(42,165,245,.55),0 24px 60px -24px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#EAF0FA;opacity:0;transform:translate3d(0,14px,0);transition:opacity .3s,transform .3s}
.hc-bar.on{opacity:1;transform:none}
.hc-bar[hidden]{display:none}
/* QA: la barra de guía no choca con la bobina del director (≥1366 px, x 20–50) ni tapa la flecha "subir" */
@media(min-width:1366px){.hc-bar{left:72px}}
body:has(.hc-bar.on) #toTop{opacity:0;pointer-events:none;visibility:hidden}
html body #chatPanel.open ~ .hc-bar{width:min(560px,calc(100vw - 500px))}
.hc-bo{position:relative;flex:none;width:44px;height:44px}
.hc-orb-bar{position:absolute;inset:-10px;width:64px;height:64px}
.hc-cap{flex:1;min-width:0;position:relative;padding-bottom:6px}
.hc-k{display:block;font:600 11px/1.2 "JetBrains Mono",var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:#74BDEB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-tx{margin:4px 0 0;font-size:13.5px;line-height:1.4;color:#EAF0FA;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hc-tx span{transition:color .15s,text-shadow .15s;color:#8C9AB5}
.hc-tx span.r{color:#EAF0FA}
.hc-tx span.w{color:#fff;text-shadow:0 0 12px rgba(42,165,245,.9);box-shadow:inset 0 -2px 0 #7FD0FF}
.hc-pg{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(42,165,245,.16);border-radius:1px;overflow:hidden}
.hc-pg i{display:block;height:100%;background:#7FD0FF;box-shadow:0 0 8px #2AA5F5;transform:scaleX(0);transform-origin:0 50%;transition:transform .2s linear}
.hc-ctl{display:flex;gap:4px;flex:none}
.hc-b{display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:10px;background:rgba(42,165,245,.06);border:1px solid rgba(42,165,245,.28);color:#D8ECFB;cursor:pointer;
  font:600 12px/1 "JetBrains Mono",var(--f-mono,monospace);transition:background-color .2s,border-color .2s}
.hc-b:hover{background:rgba(42,165,245,.18);border-color:#7FD0FF}
.hc-b:focus-visible{outline:2px solid #7FD0FF;outline-offset:2px}
.hc-b[hidden]{display:none}
.hc-b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hc-b span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hc-play{background:#2AA5F5;border-color:#2AA5F5;color:#04121F}
.hc-play:hover{background:#4FB5F7;border-color:#4FB5F7}
.hc-play svg path:first-child{fill:currentColor}
.hc-play svg path[d^="M8 5v14M"]{fill:none}
.hc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@keyframes hcSpin{to{transform:rotate(360deg)}}
@keyframes hcScan{from{transform:scaleX(.15) translateX(-280%)}to{transform:scaleX(.15) translateX(280%)}}
@keyframes hcR1{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes hcR2{from{transform:rotateY(64deg) rotateZ(0)}to{transform:rotateY(64deg) rotateZ(-360deg)}}
@keyframes hcBreath{50%{transform:scale(1.18);box-shadow:0 0 14px rgba(42,165,245,.9)}}
@keyframes hcFade{to{opacity:0}}

/* ---------- móvil ---------- */
@media (max-width:600px){
  .hc-bar,html body #chatPanel.open ~ .hc-bar{left:12px;right:84px;bottom:14px;width:auto;flex-wrap:wrap;gap:8px;padding:10px}
  .hc-cap{flex:1 1 calc(100% - 60px)}
  .hc-ctl{flex:1 1 100%;justify-content:space-between}
  .hc-b{min-width:44px;height:44px}
  .hc-guide{padding:8px 12px}
  html body #chatPanel .turn.hc-turn{padding-left:28px}
  /* el aviso no puede pisar la flecha «subir» (left 16px, 48 px de ancho) */
  html body #cpNudge{max-width:calc(100vw - 156px)}
  .hc-av{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  .hc-spot,.hc-bar,.hc-ul,.hc-kw,.hc-pg i,.hc-orb-fab{transition:none}
  .hc-ul{transform:none}
  html body #chatFab.hc-fab::after,#chatPanel .hc-av *,html body #chatPanel::before{animation:none!important}
}

/* ---------- aviso proactivo (#cpNudge) en vidrio holográfico ---------- */
html body #cpNudge{background:rgba(5,10,20,.94);color:#EAF0FA;border:1px solid rgba(42,165,245,.4);
  box-shadow:0 0 30px -8px rgba(42,165,245,.55),0 18px 40px -16px rgba(0,0,0,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html body #cpNudge::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#7FD0FF;box-shadow:0 0 10px #2AA5F5}
html body #cpNudge .nd-x{color:#8C9AB5}
html body #cpNudge .nd-x:hover{color:#fff;background:rgba(42,165,245,.14)}
html body #cpNudge .nd-x:focus-visible,html body #cpNudge:focus-visible{outline:2px solid #7FD0FF;outline-offset:2px}

/* ---------- MÓVIL-1 · tableta y teléfono horizontal (601–1279 px; el escritorio no cambia) ----------
   como en el teléfono, el orbe espera fuera del hero: en tableta caía encima de la escena y de su HUD */
@media (min-width:601px) and (max-width:1279px){
  html body #chatFab.hc-fab.hero-hide{opacity:0;transform:scale(.6);pointer-events:none}
}

/* ---------- MÓVIL-1 · zonas táctiles ≥ 44 px y aire en pantallas táctiles (< 1280 px) ---------- */
@media (max-width:1279px) and (pointer:coarse){
  html body #chatPanel .cp-tool{width:44px;height:44px}
  html body #chatPanel .cp-input .cp-ib{width:44px}
  html body #chatPanel .cp-quick button{min-height:44px;padding:0 var(--s4,16px)}
  html body #chatPanel .cp-down{height:44px;padding:0 var(--s4,16px) 0 var(--s3,12px)}
  .hc-gb{min-height:44px;padding:0 var(--s4,16px) 0 var(--s3,12px)}
  html body #cpNudge .nd-x{width:44px;height:44px;margin:-8px}
}
/* elementos fijos: respetan las zonas seguras (muesca / barra de inicio; env() vale 0 si el sistema no las expone)
   y la flecha «subir» queda centrada con el orbe (48 px frente a 56 px → +4 px) */
@media (max-width:600px){
  html body #chatFab{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  html body #toTop{left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  /* 12 px de aire con el orbe (derecha) y con la flecha «subir» (izquierda) */
  html body #cpNudge{right:calc(84px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 160px)}
  .hc-bar,html body #chatPanel.open ~ .hc-bar{left:calc(16px + env(safe-area-inset-left,0px));right:calc(84px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:601px) and (max-width:1279px){
  html body #chatFab{right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  html body #toTop{left:calc(24px + env(safe-area-inset-left,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .hc-bar{left:calc(24px + env(safe-area-inset-left,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}
/* teléfono horizontal (poca altura): el panel flotante quedaba de ~250 px, pisaba la nav y no dejaba ver mensajes →
   pantalla completa como en el teléfono vertical (se cierra con la X de su cabecera) */
@media (orientation:landscape) and (max-height:540px) and (max-width:1279px){
  html body #chatPanel{inset:0;width:auto;height:100%;height:100dvh;border:0;border-radius:0;
    padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  html body #chatFab.hc-fab.open{opacity:0;pointer-events:none}
  html body #chatPanel .cp-ctx{display:none}
}