:root {
  color-scheme: light dark;
  --paper: #e9eff6;
  --surface: #f7fafd;
  --ink: #0e2038;
  --muted: #51647d;
  --line: #c3d1e2;
  --navy: #17305c;
  --on-navy: #f2f7ff;
  --focus: #2f6fdd;
  --glow: #4fe3b9;
  --bulb: #ffb703;
  --bulb-off: #8a99ad;
  --robot-body: #d3deea;
  --robot-line: #17305c;
  --robot-screen: #0d1b33;
  --pen: #c81d3a;
  --hi: #ffe27a;
  --ok: #14804f;
  --k-grammar: #2f6fdd;
  --k-pronunciation: #d9610f;
  --k-vocabulary: #13894f;
  --k-register: #8a3fd1;
  --k-structure: #0f8a8a;
  --font-ui: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Nunito, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-voice: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --lv: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a1322;
    --surface: #101c31;
    --ink: #e7eef9;
    --muted: #9fb2cc;
    --line: #223653;
    --navy: #2d58a3;
    --focus: #8bb8ff;
    --robot-body: #b4c4d8;
    --pen: #ff7b8f;
    --hi: #5f4f0c;
    --ok: #4fd39a;
    --bulb-off: #51647d;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.5; }

/* ---------- Robot ---------- */
.robot { width: 100%; height: auto; display: block; overflow: visible; }
.robot .head { fill: var(--robot-body); stroke: var(--robot-line); stroke-width: 5; }
.robot .ear, .robot .neck { fill: var(--robot-line); }
.robot .antenna { stroke: var(--robot-line); stroke-width: 5; stroke-linecap: round; }
.robot .screen { fill: var(--robot-screen); }
.robot .bulb { fill: var(--bulb-off); stroke: var(--robot-line); stroke-width: 3; transition: fill 0.2s; }
.robot .cheek { fill: #ff8fa3; opacity: 0.5; }
.robot .eyes { transform-box: fill-box; transform-origin: center; animation: blink 6s infinite; }
.robot .eye { fill: var(--glow); transform-box: fill-box; transform-origin: center; transition: transform 0.25s; }
.robot .bar {
  fill: var(--glow);
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(var(--b));
  transition: transform 0.2s;
}

[data-state="listening"] .bulb { fill: var(--bulb); filter: drop-shadow(0 0 calc(3px + var(--lv) * 14px) var(--bulb)); }
[data-state="listening"] .eye { transform: scaleY(1.12); }
[data-state="listening"] .bar { transform: scaleY(calc(var(--b) + var(--lv) * var(--k))); transition: transform 0.06s; }
[data-state="thinking"] .eye { transform: translate(-4px, -6px); }
[data-state="thinking"] .bulb { fill: var(--bulb); animation: pulse 1s ease-in-out infinite; }
[data-state="thinking"] .bar { animation: think 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * 0.12s); }
[data-state="speaking"] .bulb { fill: var(--bulb); }
[data-state="speaking"] .bar { animation: talk 0.55s ease-in-out infinite; animation-delay: calc(var(--i) * -0.13s); }

@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
@keyframes pulse { 50% { opacity: 0.4; } }
@keyframes think { 0%, 100% { transform: scaleY(var(--b)); } 50% { transform: scaleY(calc(var(--b) + 0.22)); } }
@keyframes talk { 0%, 100% { transform: scaleY(0.2); } 50% { transform: scaleY(calc(0.45 + var(--k) * 0.55)); } }

@media (prefers-reduced-motion: reduce) {
  .robot *, .mic, .msg.pending .bubble { animation: none !important; transition: none !important; }
  [data-state="speaking"] .bar { transform: scaleY(0.7); }
}

/* ---------- Login ---------- */
.screen { min-height: 100dvh; }
#login { display: grid; place-items: center; padding: 24px 20px; }
.login-card { width: min(26rem, 100%); text-align: center; }
.login-robot { width: 150px; margin: 0 auto 8px; }
.login-card h1 { margin: 8px 0 4px; font-family: var(--font-voice); font-size: 2rem; font-weight: 700; }
.lede { margin: 0 auto 20px; max-width: 28ch; color: var(--muted); line-height: 1.45; }
.profiles { display: grid; gap: 10px; }
.profile-btn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 16px; text-align: left;
  background: var(--surface); border: 2px solid var(--line); border-radius: 16px;
}
.profile-btn:hover { border-color: var(--navy); }
.avatar {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; background: var(--navy); color: var(--on-navy); font-weight: 700; font-size: 1.1rem;
}
.pname { font-size: 1.1rem; font-weight: 600; }
.pin-form { display: grid; gap: 10px; margin-top: 8px; text-align: left; }
.pin-form label { font-weight: 600; }
.pin-form input {
  padding: 14px; font-size: 1.4rem; letter-spacing: 0.3em; text-align: center;
  background: var(--surface); border: 2px solid var(--line); border-radius: 14px;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.primary {
  padding: 12px 20px; border: 0; border-radius: 14px; font-weight: 700;
  background: var(--navy); color: var(--on-navy);
}
.ghost {
  padding: 12px 16px; border-radius: 14px; font-weight: 600;
  background: transparent; border: 2px solid var(--line);
}
.error { margin: 0; min-height: 1.4em; color: var(--pen); font-weight: 600; }
.muted { color: var(--muted); }

/* ---------- App layout ---------- */
#app {
  height: 100dvh; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "stage" "chat" "controls";
}
.topbar {
  grid-area: top; display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
}
.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: transparent; border: 0; border-radius: 50%; color: var(--ink);
}
.icon-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--navy) 12%, transparent); }
.scenario { flex: 1; min-width: 0; max-width: 24rem; }
.usage { margin-left: auto; }
.scenario select {
  width: 100%; padding: 10px 12px; border-radius: 12px; font-weight: 600;
  background: var(--surface); border: 2px solid var(--line);
}
.usage { font-size: 0.85rem; color: var(--muted); white-space: nowrap; padding-right: 4px; }
.usage.low { color: var(--pen); font-weight: 700; }

.stage { grid-area: stage; display: flex; align-items: center; gap: 14px; padding: 0 20px 10px; }
.stage-robot { width: 84px; flex: none; }
.tutor-name { margin: 0; font-family: var(--font-voice); font-size: 1.6rem; line-height: 1.1; }
.caption { margin: 2px 0 0; color: var(--muted); font-size: 0.95rem; }

.chat {
  grid-area: chat; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 18px;
}
.msg { width: 100%; }
.msg.tutor { align-self: flex-start; }
.line {
  margin: 0; max-width: 34rem;
  font-family: var(--font-voice); font-size: 1.25rem; line-height: 1.5;
}
.actions { display: flex; gap: 16px; margin-top: 4px; }
.link {
  padding: 6px 0; background: none; border: 0; color: var(--muted);
  font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px;
}
.msg.user { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.bubble {
  margin: 0; max-width: 85%; padding: 10px 14px;
  background: var(--navy); color: var(--on-navy);
  border-radius: 18px 18px 4px 18px; line-height: 1.4; overflow-wrap: anywhere;
}
.msg.pending .bubble { animation: pulse 1s ease-in-out infinite; }

.marks { display: grid; gap: 4px; max-width: min(85%, 28rem); text-align: left; }
.mark { padding: 8px 0 8px 2px; border-bottom: 1px dashed var(--line); }
.mark-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.mark-kind::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--kc, var(--muted)); }
.k-grammar { --kc: var(--k-grammar); }
.k-pronunciation { --kc: var(--k-pronunciation); }
.k-vocabulary { --kc: var(--k-vocabulary); }
.k-register { --kc: var(--k-register); }
.k-structure { --kc: var(--k-structure); }
.mark-fix { margin: 4px 0 2px; font-size: 1.05rem; line-height: 1.5; }
.mark-fix s { color: var(--pen); text-decoration-thickness: 2px; }
.mark-fix mark { background: var(--hi); color: inherit; padding: 1px 5px; border-radius: 4px; }
.mark-why { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.praise { margin: 0; color: var(--ok); font-weight: 600; }
.pron { padding: 4px 0 8px 2px; }
.pron-scores { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--k-pronunciation); }
.pron-words { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pron-words .w { padding: 2px 8px; border-radius: 999px; font-size: 0.85rem; border: 1.5px solid var(--k-pronunciation); }
.pron-words .w.low { border-color: var(--pen); color: var(--pen); }

.start-card {
  align-self: center; margin-top: 8px; padding: 16px 22px; border: 0; border-radius: 18px;
  background: var(--bulb); color: #0e2038; font-weight: 800; font-size: 1.1rem;
}

/* ---------- Controles ---------- */
.controls { grid-area: controls; padding: 6px 12px calc(10px + env(safe-area-inset-bottom)); }
.text-form { display: flex; gap: 8px; padding: 0 4px 10px; }
.text-form input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 2px solid var(--line);
}
.bar { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; justify-items: center; }
.mic-col { display: grid; justify-items: center; gap: 6px; }
.mic {
  width: 84px; height: 84px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bulb); color: #0e2038;
  box-shadow: 0 0 0 0 transparent;
  transition: background 0.15s, box-shadow 0.08s;
}
.mic[data-mode="recording"] {
  background: var(--pen); color: #fff;
  box-shadow: 0 0 0 calc(6px + var(--lv) * 22px) color-mix(in srgb, var(--pen) 30%, transparent);
}
.mic[data-mode="working"] { background: var(--line); color: var(--muted); }
.mic-label { font-size: 0.9rem; font-weight: 600; color: var(--muted); min-height: 1.2em; }
#btn-kb[aria-pressed="true"] { background: color-mix(in srgb, var(--navy) 18%, transparent); }

/* ---------- Ajustes ---------- */
dialog {
  width: min(30rem, 92vw); padding: 0; border: 0; border-radius: 22px;
  background: var(--surface); color: var(--ink);
}
dialog::backdrop { background: rgba(5, 12, 25, 0.55); }
.sheet { display: grid; gap: 16px; padding: 18px 20px 22px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet h2, .sheet h3 { margin: 0; font-family: var(--font-voice); }
fieldset { margin: 0; padding: 0; border: 0; }
legend, .field { font-weight: 600; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg legend { grid-column: 1 / -1; margin-bottom: 6px; padding: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span {
  display: block; padding: 11px 8px; text-align: center; font-weight: 600;
  border: 2px solid var(--line); border-radius: 12px;
}
.seg input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.field { display: grid; gap: 6px; }
.field select { padding: 11px 12px; border-radius: 12px; background: var(--paper); border: 2px solid var(--line); font-weight: 500; }
.switch { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.switch input { width: 22px; height: 22px; accent-color: var(--navy); }
.admin { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.admin-row p { margin: 2px 0; }
.flag { margin: 0; color: var(--pen); }

.toast {
  position: fixed; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px); max-width: min(30rem, 92vw);
  padding: 12px 16px; border-radius: 14px; background: var(--ink); color: var(--paper);
  font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 10;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Escritorio: robot grande a la izquierda ---------- */
@media (min-width: 900px) {
  #app {
    grid-template-columns: 22rem minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top top" "stage chat" "stage controls";
  }
  .stage { flex-direction: column; justify-content: center; text-align: center; padding: 0 24px 40px; }
  .stage-robot { width: 220px; }
  .tutor-name { font-size: 2.2rem; }
  .chat, .controls { width: 100%; max-width: 46rem; justify-self: center; }
  .toast { bottom: 140px; }
}