:root {
  --bg: #020713;
  --panel: rgba(4, 17, 34, 0.88);
  --panel-strong: rgba(3, 12, 26, 0.96);
  --line: rgba(0, 198, 255, 0.18);
  --line-strong: rgba(0, 198, 255, 0.38);
  --blue: #00c6ff;
  --blue-2: #0072ff;
  --blue-soft: rgba(0, 198, 255, 0.12);
  --cyan: #78f3ff;
  --text: #eaf7ff;
  --muted: rgba(234, 247, 255, 0.62);
  --dim: rgba(234, 247, 255, 0.36);
  --green: #6dffb5;
  --red: #ff647c;
  --orange: #ffc15a;
  --shadow: 0 0 28px rgba(0, 198, 255, 0.14);
  --font: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: var(--font); background: radial-gradient(circle at 50% -10%, rgba(0, 198, 255, 0.14), transparent 42%), #000; color: var(--text); }
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; }

.login-body { background: #020713; }
.login-shell { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 24px; }
.orb { position: absolute; border-radius: 50%; filter: blur(16px); opacity: .55; pointer-events: none; }
.orb-a { width: 420px; height: 420px; left: -140px; top: -120px; background: radial-gradient(circle, rgba(0,198,255,.42), transparent 66%); }
.orb-b { width: 520px; height: 520px; right: -180px; bottom: -180px; background: radial-gradient(circle, rgba(0,114,255,.36), transparent 64%); }
.login-card { width: min(460px, calc(100vw - 32px)); position: relative; z-index: 2; padding: 42px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, rgba(6, 24, 46, .92), rgba(2, 7, 19, .95)); box-shadow: 0 24px 80px rgba(0,0,0,.45), var(--shadow); text-align: center; }
.login-logo { height: 76px; max-width: 240px; object-fit: contain; margin-bottom: 20px; filter: drop-shadow(0 0 18px rgba(0,198,255,.22)); }
.eyebrow { margin: 0 0 10px; color: var(--cyan); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 700; }
h1 { margin: 0; font-size: 34px; line-height: 1.05; letter-spacing: -.03em; }
.login-copy { margin: 14px auto 28px; color: var(--muted); line-height: 1.55; max-width: 340px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.clave-input, .cfg-input, .editor { width: 100%; border: 1px solid var(--line); color: var(--text); background: rgba(0, 12, 26, .74); outline: none; transition: border-color .18s, box-shadow .18s, background .18s; }
.clave-input { border-radius: 999px; padding: 14px 18px; text-align: center; font-size: 15px; letter-spacing: .05em; }
.clave-input:focus, .cfg-input:focus, .editor:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,198,255,.08), 0 0 26px rgba(0,198,255,.16); }
.clave-input::placeholder, .cfg-input::placeholder, .editor::placeholder { color: var(--dim); }
.btn-primary, .btn-outline, .btn-send, .btn-mic { border: 1px solid var(--line-strong); color: var(--text); background: linear-gradient(135deg, rgba(0,198,255,.24), rgba(0,114,255,.18)); box-shadow: 0 0 18px rgba(0,198,255,.12); transition: transform .16s, border-color .16s, box-shadow .16s, background .16s; }
.btn-primary { border-radius: 999px; padding: 13px 20px; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.btn-primary.small { border-radius: 12px; padding: 10px 12px; font-size: 12px; }
.btn-primary:hover, .btn-outline:hover, .btn-send:hover, .btn-mic:hover { transform: translateY(-1px); border-color: var(--cyan); box-shadow: 0 0 30px rgba(0,198,255,.22); }
.btn-primary:disabled, .btn-send:disabled, .btn-mic:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 9px 12px; border-radius: 999px; text-decoration: none; font-size: 12px; }
.form-error { min-height: 18px; color: var(--red); font-size: 13px; }
.login-foot { margin-top: 24px; color: var(--dim); font-size: 12px; }

.project-app { height: 100vh; display: grid; grid-template-columns: 330px minmax(320px, 1fr) 390px; background: radial-gradient(circle at 50% 0, rgba(0,198,255,.12), transparent 36%), #000; }
.sidebar { height: 100vh; overflow-y: auto; padding: 18px; background: var(--panel-strong); border-color: var(--line); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.left-panel { border-right: 1px solid var(--line); }
.right-panel { border-left: 1px solid var(--line); }
.sidebar::-webkit-scrollbar, .chat-history::-webkit-scrollbar, .question-list::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb, .chat-history::-webkit-scrollbar-thumb, .question-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.brand-block { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: rgba(0,198,255,.05); box-shadow: var(--shadow); }
.side-logo { width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(0,198,255,.18)); }
h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; }
.badge { display: inline-flex; color: var(--cyan); border: 1px solid var(--line); background: rgba(0,198,255,.08); border-radius: 999px; padding: 4px 9px; font-size: 11px; }
.panel-section { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 0 22px rgba(0,0,0,.22); }
.section-title { margin: 0 0 12px; color: var(--cyan); text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 700; }
.question-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.question-list button { width: 100%; text-align: left; color: var(--text); background: rgba(0,198,255,.06); border: 1px solid var(--line); border-radius: 12px; padding: 10px; transition: .16s; }
.question-list button:hover { border-color: var(--cyan); background: rgba(0,198,255,.12); }
.chat-section { display: flex; flex-direction: column; min-height: 360px; }
.input-row { display: grid; grid-template-columns: 42px 1fr 42px; gap: 8px; align-items: end; }
.btn-mic, .btn-send { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; font-size: 17px; }
.btn-mic.escuchando { color: #00131f; background: var(--cyan); box-shadow: 0 0 28px rgba(0,198,255,.52); }
textarea#userInput { min-height: 42px; max-height: 92px; resize: none; border-radius: 16px; padding: 11px 13px; border: 1px solid var(--line); background: rgba(0, 12, 26, .74); color: var(--text); outline: none; }
.listening-bar { display: none; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 10px; border: 1px solid rgba(120,243,255,.3); background: rgba(0,198,255,.08); border-radius: 999px; font-size: 12px; color: var(--cyan); }
.listening-bar.active { display: flex; }
.listening-bar button { margin-left: auto; border: none; background: transparent; color: var(--cyan); font-size: 18px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.25); } }
.chat-history { flex: 1; min-height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.msg { display: flex; flex-direction: column; gap: 4px; animation: fadeUp .18s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.msg.user { align-items: flex-end; }
.msg-role { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.msg-text { max-width: 92%; border: 1px solid var(--line); border-radius: 14px; padding: 9px 11px; background: rgba(0,198,255,.07); color: var(--text); font-size: 13px; line-height: 1.5; }
.msg.user .msg-text { background: rgba(255,255,255,.045); text-align: right; }
.typing-dots { display: flex; gap: 4px; padding: 4px; }
.typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: typing 1.1s infinite; }
.typing-dots span:nth-child(2) { animation-delay: .18s; }
.typing-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.avatar-main { position: relative; background: #000; min-width: 0; overflow: hidden; display: grid; grid-template-rows: 1fr auto; place-items: center; }
.avatar-main::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center top, rgba(0,198,255,.14), transparent 55%), linear-gradient(90deg, rgba(0,198,255,.04), transparent 18%, transparent 82%, rgba(0,198,255,.04)); pointer-events: none; z-index: 1; }
.avatar-stage { position: relative; width: 100%; height: 100%; min-height: 0; background: #000; overflow: hidden; }
.avatar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; background: #000; opacity: 1; visibility: visible; }
.av-hidden { display: none !important; opacity: 0 !important; visibility: hidden !important; }
.panel-glow { box-shadow: inset 0 0 70px rgba(0,198,255,.08); }
.avatar-status { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.estado-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.estado-dot.listening { background: var(--orange); box-shadow: 0 0 12px var(--orange); animation: pulse 1s infinite; }
.estado-dot.speaking { background: var(--green); box-shadow: 0 0 12px var(--green); }
.estado-dot.thinking { background: var(--blue); box-shadow: 0 0 12px var(--blue); animation: pulse 1.1s infinite; }
.estado-dot.waiting { background: var(--dim); box-shadow: 0 0 8px rgba(255,255,255,.22); }
.estado-txt { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.avatar-actions { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.right-panel label { display: block; margin: 10px 0 6px; color: var(--dim); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.cfg-input, .editor { border-radius: 12px; padding: 10px 12px; font-size: 13px; }
select.cfg-input { cursor: pointer; }
select.cfg-input option { background: #041122; color: var(--text); }
.editor { min-height: 92px; resize: vertical; line-height: 1.55; }
.editor.tall { min-height: 160px; }
.editor.workflow { min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: pre; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmented button { border: 1px solid var(--line); color: var(--muted); background: rgba(0,198,255,.05); border-radius: 12px; padding: 9px; }
.segmented button.active { color: var(--cyan); border-color: var(--cyan); background: rgba(0,198,255,.14); box-shadow: 0 0 16px rgba(0,198,255,.14); }
.save-status { min-height: 18px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.save-status.ok { color: var(--green); }
.save-status.err { color: var(--red); }
.hint { margin: -4px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }

@media (max-width: 1100px) {
  .project-app { grid-template-columns: 300px 1fr; }
  .right-panel { display: none; }
}

@media (max-width: 760px) {
  html, body { overflow: auto; }
  .project-app { min-height: 100vh; height: auto; grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
  .left-panel { order: 2; height: auto; border-right: none; border-top: 1px solid var(--line); }
  .avatar-main { order: 1; min-height: 60vh; }
  .right-panel { display: block; order: 3; height: auto; border-left: none; border-top: 1px solid var(--line); }
  .avatar-status { bottom: 70px; }
}