:root {
  --selva: #0c2a22;       /* fondo */
  --selva-alta: #143a2f;  /* superficies */
  --hoja: #2c5a4b;        /* bordes */
  --musgo: #9db9ad;       /* texto secundario */
  --leido: #557a6c;       /* palabras ya leídas */
  --papel: #f7f1e1;       /* texto principal */
  --ambar: #f2b134;       /* línea de lectura y palabra actual */
  --rojo: #ffb4a2;
  --grabando: #d8352a;    /* grabación en curso */
  --reading-y: 32%;
  --font: "Atkinson Hyperlegible", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--selva);
  color: var(--papel);
  font: 400 18px/1.45 var(--font);
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

/* ---------- Guiones ---------- */
.desk {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.shelf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 18px;
  border-right: 1px solid var(--hoja);
  min-height: 0;
}
.brand { margin: 0 0 6px; font-size: 28px; line-height: 1.1; font-weight: 700; }
.script-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.script-list button {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px;
  background: none; border: 0; border-radius: 8px; text-align: left; color: var(--musgo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.script-list button[aria-current="true"] { background: var(--selva-alta); color: var(--papel); font-weight: 700; }
.shelf-note { margin: 0; font-size: 14px; line-height: 1.4; color: var(--musgo); }

.page { display: flex; flex-direction: column; gap: 12px; padding: 24px; min-width: 0; min-height: 0; }
.title-input {
  width: 100%; padding: 6px 0; background: none; border: 0;
  border-bottom: 1px solid var(--hoja); font-size: 24px; font-weight: 700;
}
.title-input::placeholder, .body-input::placeholder { color: var(--leido); }
.body-input {
  flex: 1; min-height: 160px; width: 100%; padding: 14px 0; resize: none;
  background: none; border: 0; font-size: 21px; line-height: 1.5;
}
.title-input:focus, .body-input:focus { outline: none; }
.title-input:focus { border-bottom-color: var(--ambar); }

.page-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.stats { margin: 0 auto 0 0; color: var(--musgo); font-size: 16px; }
.tip { margin: 0; color: var(--musgo); font-size: 14px; }
.voice-status { margin: 0; color: var(--musgo); font-size: 16px; }
.notice {
  margin: 0; padding: 12px 14px; border-left: 3px solid var(--ambar);
  background: var(--selva-alta); font-size: 16px;
}

.takes-box { display: flex; flex-direction: column; gap: 4px; min-height: 0; flex: 0 1 34%; }
.shelf-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--musgo); }
.take-list button { white-space: normal; color: var(--papel); line-height: 1.25; }
.take-list small { display: block; color: var(--musgo); font-size: 14px; }

.primary, .quiet { min-height: 48px; padding: 8px 20px; border-radius: 8px; }
.primary { background: var(--ambar); color: #2a1d00; border: 0; font-weight: 700; padding-inline: 44px; }
.primary:disabled { opacity: .45; cursor: default; }
.quiet { background: none; border: 1px solid var(--hoja); }
.wide { width: 100%; }
.file-link {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 8px 20px;
  border: 1px solid var(--hoja); border-radius: 8px; cursor: pointer;
}
.file-link input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lang-field { display: inline-flex; align-items: center; gap: 8px; color: var(--musgo); font-size: 16px; }
.lang-field select {
  min-height: 48px; padding: 6px 10px; color: var(--papel);
  background: var(--selva-alta); border: 1px solid var(--hoja); border-radius: 8px;
}

/* ---------- Lectura ---------- */
.stage { position: fixed; inset: 0; background: var(--selva); overflow: hidden; overscroll-behavior: none; -webkit-touch-callout: none; }
.viewport { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.viewport.mirrored { transform: scaleX(-1); }
.scroller { will-change: transform; }
.text {
  position: relative;
  width: var(--text-width, 86%);
  margin: 0 auto;
  font-size: var(--text-size, 56px);
  line-height: 1.38;
  font-weight: 700;
  color: var(--papel);
  overflow-wrap: anywhere;
  padding-bottom: 80vh;
}
.text p { margin: 0 0 .8em; }
.text .w { transition: color .18s linear; }
.text .r { color: var(--leido); }
.text .now { color: var(--ambar); }
.text .cue { color: var(--musgo); font-weight: 400; font-style: italic; }

/* Lo ya leído se apaga hacia arriba de la línea de lectura. */
.fade {
  position: absolute; top: 0; left: 0; right: 0; height: calc(var(--reading-y) - 2%);
  background: linear-gradient(to bottom, var(--selva) 18%, rgba(12, 42, 34, 0));
  pointer-events: none;
}
.reading-line {
  position: absolute; top: var(--reading-y); left: 0; width: 3.2%; height: 5px;
  background: var(--ambar); border-radius: 0 3px 3px 0; pointer-events: none;
}
.viewport.mirrored ~ .reading-line { left: auto; right: 0; border-radius: 3px 0 0 3px; }

.controls {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px; right: 390px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.stage.listening .controls { display: none; }
.ctl-group { display: inline-flex; gap: 2px; }
.ctl {
  min-height: 46px; min-width: 46px; padding: 6px 14px;
  background: var(--selva-alta); border: 1px solid var(--hoja); border-radius: 8px; font-size: 16px;
}
.ctl[aria-pressed="true"] { background: var(--papel); color: var(--selva); border-color: var(--papel); }

.pills {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px;
  display: flex; gap: 8px; align-items: flex-start;
}
.rec {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 18px;
  background: var(--selva-alta); color: var(--papel); border: 1px solid var(--hoja);
  border-radius: 23px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--grabando); }
.rec[data-state="on"] { background: var(--grabando); color: #fff; border-color: var(--grabando); }
.rec[data-state="on"] .rec-dot { background: #fff; border-radius: 2px; }
.rec[data-state="wait"] { color: var(--musgo); }

.preview {
  position: absolute; left: 14px; bottom: 16px; width: clamp(150px, 20vw, 240px);
  aspect-ratio: 16 / 9; object-fit: cover; transform: scaleX(-1);
  background: #000; border: 1px solid var(--hoja); border-radius: 8px; pointer-events: none;
}
@media (orientation: portrait) { .preview { aspect-ratio: 9 / 16; width: clamp(110px, 16vw, 170px); } }
.count {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(12, 42, 34, .72); color: var(--papel);
  font-size: min(38vh, 240px); font-weight: 700; line-height: 1; pointer-events: none;
}

.take-panel {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(5, 20, 16, .88);
}
.take-sheet {
  display: flex; flex-direction: column; gap: 12px; width: min(820px, 100%); max-height: 100%;
  padding: 18px; overflow-y: auto; background: var(--selva-alta); border: 1px solid var(--hoja); border-radius: 12px;
}
.take-title { margin: 0; font-size: 22px; line-height: 1.2; }
.take-video { width: 100%; max-height: 58dvh; background: #000; border-radius: 8px; }
.take-info { margin: 0; color: var(--musgo); font-size: 16px; }
.take-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.mic {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 18px;
  background: var(--ambar); color: #2a1d00; border: 0; border-radius: 23px; font-size: 16px; font-weight: 700;
}
.mic-dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.mic[data-state="on"] { background: rgba(20, 58, 47, .85); color: var(--papel); border: 1px solid var(--hoja); }
.mic[data-state="on"] .mic-dot { background: var(--ambar); animation: pulso 1.6s ease-in-out infinite; }
.mic[data-state="wait"] { background: rgba(20, 58, 47, .85); color: var(--musgo); border: 1px solid var(--hoja); }
@keyframes pulso { 50% { opacity: .35; } }

.problem {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  width: min(640px, calc(100% - 32px)); padding: 16px 18px;
  background: var(--selva-alta); border: 1px solid var(--rojo); border-radius: 10px;
  color: var(--papel); font-size: 18px;
}
.problem strong { display: block; color: var(--rojo); margin-bottom: 4px; }
.hint {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0;
  width: min(620px, calc(100% - 32px)); padding: 12px 16px; border-radius: 10px;
  background: var(--selva-alta); border: 1px solid var(--hoja); font-size: 16px; pointer-events: none;
}
.heard {
  position: absolute; left: 16px; right: 16px; bottom: 14px; margin: 0;
  color: var(--musgo); font-size: 16px; text-align: right;
  white-space: nowrap; overflow: hidden; direction: rtl; pointer-events: none;
}
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--selva-alta); }
.progress div { height: 100%; width: 0; background: var(--leido); }

/* ---------- Pantallas angostas ---------- */
@media (max-width: 720px) {
  .desk { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100dvh; }
  .shelf { border-right: 0; border-bottom: 1px solid var(--hoja); padding: 16px; }
  .script-list { max-height: 150px; }
  .page { padding: 16px; }
  .body-input { min-height: 45vh; }
  .primary { width: 100%; }
  .controls { right: 14px; top: 126px; }
  .pills { left: 14px; flex-wrap: wrap; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .mic[data-state="on"] .mic-dot { animation: none; }
  .text .w { transition: none; }
}