:root {
  --cian: #3DDBFF;
  --cian-suave: rgba(61, 219, 255, .14);
  --borde: rgba(61, 219, 255, .28);
  --fondo: #03070c;
  --texto: #d8f6ff;
  --tenue: #7fa9b8;
  --rojo: #ff5d6c;
  --verde: #5dffb0;
  --nivel: 1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 Inter, system-ui, sans-serif;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
.fondo {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(61,219,255,.10), transparent 60%),
    linear-gradient(rgba(61,219,255,.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(61,219,255,.05) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.85));
}
.tarjeta {
  background: rgba(8, 22, 32, .55);
  border: 1px solid var(--borde);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 24px rgba(61,219,255,.06) inset;
}
.marca {
  font-family: Orbitron, sans-serif; font-weight: 700;
  letter-spacing: .45em; color: var(--cian);
  text-shadow: 0 0 12px rgba(61,219,255,.7);
}
h2 {
  font-family: Orbitron, sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase; color: var(--cian);
  margin: 2px 0 12px;
}

/* ---------- Login ---------- */
.login { height: 100%; display: grid; place-items: center; padding: 20px; }
.login-caja { width: min(360px, 100%); padding: 32px; display: grid; gap: 14px; text-align: center; }
.login-caja .sub { color: var(--tenue); font-size: 13px; }
input {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: rgba(0,0,0,.35); border: 1px solid var(--borde);
  color: var(--texto); font: inherit; outline: none;
}
input:focus { border-color: var(--cian); box-shadow: 0 0 0 3px var(--cian-suave); }
.btn-primario {
  padding: 12px; border-radius: 10px; border: 1px solid var(--cian);
  background: var(--cian-suave); font-family: Orbitron, sans-serif; letter-spacing: .2em;
}
.btn-primario:hover { background: rgba(61,219,255,.25); }
.error { color: var(--rojo); min-height: 1.2em; font-size: 13px; }

/* ---------- Panel ---------- */
.panel {
  height: 100%; display: grid; gap: 16px; padding: 16px 20px 20px;
  grid-template-columns: 280px 1fr 340px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "barra barra barra" "izq centro der";
}
.barra { grid-area: barra; display: flex; justify-content: space-between; align-items: center; }
.reloj { display: flex; gap: 14px; align-items: baseline; font-family: Orbitron, sans-serif; color: var(--cian); }
#hora { font-size: 22px; text-shadow: 0 0 10px rgba(61,219,255,.6); }
#fecha { font-size: 12px; color: var(--tenue); letter-spacing: .1em; }
.pestanas { display: none; }
.lateral { padding: 18px; overflow: auto; min-height: 0; }
.izq { grid-area: izq; }
.der { grid-area: der; display: flex; flex-direction: column; }
.centro { grid-area: centro; display: flex; flex-direction: column; align-items: center; min-height: 0; gap: 14px; }

.estado { display: grid; gap: 10px; margin-bottom: 22px; }
.estado div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.estado dt { color: var(--tenue); }
.indicador::before { content: "●"; margin-right: 6px; }
.ok { color: var(--verde); } .mal { color: var(--rojo); } .demo { color: #ffd166; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  padding: 7px 12px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--borde); background: rgba(61,219,255,.06);
}
.chip:hover { border-color: var(--cian); background: var(--cian-suave); }
.enlace { background: none; border: 0; color: var(--tenue); font-size: 12px; text-decoration: underline; }

/* ---------- Reactor ---------- */
.reactor-zona { position: relative; display: grid; place-items: center; flex: 0 0 auto; }
.reactor { width: min(42vh, 380px); height: min(42vh, 380px); overflow: visible; }
.anillo { transform-origin: 200px 200px; transition: transform .25s ease; }
.a1 { animation: girar 60s linear infinite; }
.a2 { animation: girar 34s linear infinite reverse; }
.a3 { animation: girar 48s linear infinite; }
.a4 { animation: girar 22s linear infinite reverse; }
.a5 { animation: girar 14s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
#nucleoCirculo { transform-origin: 200px 200px; transform: scale(var(--nivel)); transition: transform .06s linear; }

.estado-reposo #nucleoCirculo { animation: latido 3.5s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(1.12); opacity: .85; } }

.estado-escuchando .anillo { transform: scale(.9); }
.estado-escuchando g[filter] { stroke: #ffffff; }
.estado-escuchando #nucleoCirculo { animation: latido 1s ease-in-out infinite; }

.estado-pensando .a1 { animation-duration: 4s; }
.estado-pensando .a2 { animation-duration: 2.5s; }
.estado-pensando .a3 { animation-duration: 3s; }
.estado-pensando .a4 { animation-duration: 1.6s; }
.estado-pensando .a5 { animation-duration: 1s; }

.estado-hablando .anillo { transform: scale(calc(.94 + (var(--nivel) - 1) * .5)); }

.estado-texto {
  position: absolute; bottom: -6px;
  font-family: Orbitron, sans-serif; font-size: 11px; letter-spacing: .35em;
  text-transform: uppercase; color: var(--cian); opacity: .85;
}

/* ---------- Holograma (respuesta) ---------- */
.holograma {
  width: min(760px, 100%); flex: 1 1 auto; min-height: 90px; overflow: auto;
  padding: 18px 22px; position: relative;
}
.holograma::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(transparent 50%, rgba(61,219,255,.025) 50%) 0 0 / 100% 4px;
}
.respuesta.aparece { animation: aparecer .35s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }

.md p { margin: 0 0 10px; }
.md strong { color: #fff; }
.md ul, .md ol { margin: 0 0 10px 20px; }
.md li { margin: 3px 0; }
.md li::marker { color: var(--cian); }
.md code { background: rgba(61,219,255,.1); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
.md table { border-collapse: collapse; margin: 6px 0 12px; width: 100%; font-size: 14px; }
.md th { text-align: left; color: var(--cian); font-family: Orbitron, sans-serif; font-size: 11px; letter-spacing: .15em; font-weight: 500; }
.md th, .md td { padding: 7px 10px; border-bottom: 1px solid var(--borde); }
.md tr:hover td { background: rgba(61,219,255,.05); }
.md h3 { font-family: Orbitron, sans-serif; font-size: 13px; letter-spacing: .15em; color: var(--cian); margin: 6px 0 8px; }
.cursor::after { content: "▍"; color: var(--cian); animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* ---------- Entrada ---------- */
.entrada { width: min(760px, 100%); display: flex; gap: 10px; align-items: center; }
.entrada input { flex: 1; padding: 14px 16px; border-radius: 999px; }
.enviar {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--borde);
  background: rgba(61,219,255,.08); color: var(--cian); font-size: 16px;
}
.mic {
  width: 62px; height: 62px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--cian); background: var(--cian-suave);
  display: grid; place-items: center;
  box-shadow: 0 0 18px rgba(61,219,255,.35);
}
.mic svg { width: 26px; fill: var(--cian); }
.mic.activo { background: var(--cian); box-shadow: 0 0 30px rgba(61,219,255,.9); }
.mic.activo svg { fill: #03070c; }
.mic:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Historial ---------- */
.mensajes { display: flex; flex-direction: column; gap: 10px; overflow: auto; flex: 1; min-height: 0; }
.burbuja { padding: 9px 12px; border-radius: 12px; font-size: 13.5px; max-width: 92%; }
.burbuja.user { align-self: flex-end; background: var(--cian-suave); border: 1px solid var(--borde); }
.burbuja.assistant { align-self: flex-start; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.burbuja .hora { display: block; font-size: 10px; color: var(--tenue); margin-top: 4px; }

/* ---------- Movil ---------- */
@media (max-width: 960px) {
  body { overflow: auto; }
  .panel {
    grid-template-columns: 1fr; grid-template-rows: auto auto 1fr;
    grid-template-areas: "barra" "tabs" "vista"; padding: 12px; gap: 12px; min-height: 100%;
  }
  .pestanas { grid-area: tabs; display: flex; gap: 6px; }
  .pestana {
    flex: 1; padding: 9px; border-radius: 10px; border: 1px solid var(--borde);
    background: transparent; font-family: Orbitron, sans-serif; font-size: 11px; letter-spacing: .15em;
  }
  .pestana.activa { background: var(--cian-suave); border-color: var(--cian); }
  .izq, .der, .centro { grid-area: vista; display: none; }
  .vista-activa { display: flex !important; flex-direction: column; }
  .reactor { width: min(70vw, 300px); height: min(70vw, 300px); }
  .lateral { max-height: calc(100vh - 140px); }
  .marca { font-size: 14px; letter-spacing: .3em; }
}

@media (prefers-reduced-motion: reduce) {
  .anillo, #nucleoCirculo, .cursor::after { animation: none !important; transition: none !important; }
}

[hidden] { display: none !important; }

[hidden] { display: none !important; }