/* ==================== Reset / base ==================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0b0b0c;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: #f0f0f0;
}

.hidden {
  display: none !important;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

/* ==================== Pantalla de configuración ==================== */

.setup-screen {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
}

.setup-layout {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

.setup-card {
  flex: 1 1 480px;
  max-width: 640px;
  background: #17181a;
  border: 1px solid #2a2c30;
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setup-preview-panel {
  flex: 1 1 320px;
  max-width: 420px;
  position: sticky;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-card h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 600;
}

.setup-subtitle {
  margin: 0;
  color: #9a9da3;
  font-size: 0.95rem;
  line-height: 1.5;
}

.setup-label {
  font-size: 0.85rem;
  color: #c7c9cd;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.setup-textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  background: #0f0f11;
  border: 1px solid #2a2c30;
  border-radius: 8px;
  color: #f0f0f0;
  font-size: 1rem;
  line-height: 1.5;
  padding: 14px;
  font-family: inherit;
}

.setup-textarea:focus {
  outline: none;
  border-color: #baff29;
}

.setup-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #d7d9dd;
}

.setup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setup-hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #7d8087;
}

.setup-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.setup-row .setup-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.setup-row input[type="range"] {
  flex: 1 1 auto;
}

.setup-font-value {
  flex: 0 0 auto;
  min-width: 56px;
  text-align: right;
  color: #9a9da3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.btn {
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.btn-primary {
  background: #baff29;
  color: #0b0b0c;
}

.btn-primary:hover {
  background: #cdff5c;
}

.btn-secondary {
  background: #1f2124;
  color: #d7d9dd;
  border: 1px solid #2a2c30;
  font-size: 0.9rem;
  padding: 10px 16px;
}

.btn-secondary:hover {
  background: #2a2c30;
  border-color: #3a3d43;
}


/* El <input type="file"> nativo no se puede re-estilar de forma consistente
   entre navegadores — se mantiene funcional pero invisible, y "Cargar desde
   archivo" (btn-secondary) lo dispara con .click() (ver app.js). */
.visually-hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.load-file-status {
  margin: 0;
  font-size: 0.85rem;
  color: #9a9da3;
}

.load-file-status--error {
  color: #ff6b6b;
}

.setup-warning {
  color: #ff6b6b;
  font-size: 0.9rem;
  margin: 0;
}

/* ==================== Pantalla del teleprompter ==================== */

.prompter-screen {
  position: fixed;
  inset: 0;
  background: #000000;
  overflow: hidden;
}

.prompter-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Guía fija de la zona de lectura durante el prompting real — mismo
   criterio que un teleprompter de hardware (marca un punto fijo de
   lectura). Más discreta que la línea de la vista previa: acá compite
   con texto real que se está leyendo, no debe distraer. Se posiciona una
   sola vez al iniciar (misma altura que usa ScrollController para
   calcular el target), nunca se mueve durante la sesión. */
.prompter-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(186, 255, 41, 0.35);
  z-index: 1;
  pointer-events: none;
}

.prompter-text {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 60vh 8% 60vh;
  text-align: center;
  line-height: 1.65;
  font-weight: 600;
  will-change: transform;
}

.prompter-paragraph {
  margin: 0 0 1.3em 0;
}

.word {
  transition: color 0.4s ease, opacity 0.4s ease;
}

.word.read {
  color: #4b4c4f;
  opacity: 0.6;
}

.word.active {
  color: #ffffff;
  opacity: 1;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.25);
}

.word.future {
  color: #b6b8bd;
  opacity: 0.85;
}

/* ==================== Vista previa en vivo (pantalla de setup) ==================== */
/* Mini-simulación del teleprompter real: mismas clases .word.read/.active/
   .future y la misma matemática de posicionamiento (computeTargetTranslateY),
   pero sin loop de rAF — acá el "movimiento" es sólo respuesta a los
   sliders, así que alcanza y sobra con transiciones CSS. */

.preview-viewport {
  position: relative;
  height: 340px;
  background: #000000;
  border-radius: 8px;
  overflow: hidden;
}

.preview-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  height: 2px;
  background: #baff29;
  box-shadow: 0 0 8px rgba(186, 255, 41, 0.6);
  z-index: 2;
  transition: top 0.2s ease;
}

/* Guías de margen: sólo aparecen mientras el panel "Márgenes laterales" del
   cajón de ajustes está activo (ver showAdjustField/closeAdjustDrawer en
   app.js), tanto en la vista previa del setup como en la pantalla real del
   teleprompter (mismo elemento reutilizado, #prompter-margin-line-*) — a
   diferencia de la línea de zona de lectura, nunca quedan permanentes. */
.preview-margin-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff2ec4;
  box-shadow: 0 0 8px rgba(255, 46, 196, 0.7);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, left 0.15s ease, right 0.15s ease;
}

.preview-margin-line--visible {
  opacity: 1;
}

.preview-margin-line--left {
  left: 0;
}

.preview-margin-line--right {
  right: 0;
}

.preview-text {
  width: 100%;
  padding: 120px 8% 120px;
  text-align: center;
  line-height: 1.65;
  font-weight: 600;
  font-size: 22px;
  color: #f0f0f0;
  will-change: transform;
  transition: transform 0.2s ease, font-size 0.15s ease, padding-left 0.15s ease, padding-right 0.15s ease;
}

/* ==================== Indicador de micrófono ==================== */

.mic-indicator {
  position: fixed;
  top: 20px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 20, 22, 0.75);
  border: 1px solid #2a2c30;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: #c7c9cd;
  z-index: 10;
}

.mic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #666;
  flex: 0 0 auto;
}

.mic-indicator.mic-listening .mic-dot {
  background: #3ddc84;
  animation: mic-pulse 1.4s ease-in-out infinite;
}

.mic-indicator.mic-error .mic-dot {
  background: #ff5c5c;
}

.mic-indicator.mic-stopped .mic-dot {
  background: #666;
}

@keyframes mic-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(61, 220, 132, 0);
  }
}

/* ==================== Botón detener ==================== */

.btn-stop {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #2a2c30;
  color: #f0f0f0;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 0.95rem;
  z-index: 10;
}

.btn-stop:hover {
  background: #3a3d43;
}

/* ==================== Panel de debug ==================== */

.debug-panel {
  position: fixed;
  bottom: 24px;
  left: 24px;
  max-width: 420px;
  background: rgba(15, 15, 17, 0.85);
  border: 1px solid #2a2c30;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #9a9da3;
  z-index: 10;
}

.debug-title {
  color: #cdff5c;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.debug-key {
  color: #6a6d73;
  margin-right: 6px;
}

.debug-value {
  color: #e2e3e6;
  word-break: break-word;
}

/* ==================== Barra de íconos de ajustes ==================== */
/* Misma barra en setup (inline, dentro de la card) y en el teleprompter
   (flotante, position:fixed) — ambas sólo abren/cierran el mismo
   #adjust-drawer, nunca duplican los <input> reales. */

.adjust-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Separador sutil entre el grupo de guiones y el de ajustes dentro de la
   misma fila (#setup-toolbar) — puramente visual, no parte de ningún grupo
   con role="group" ni afecta el layout en wrap. */
.adjust-toolbar__divider {
  width: 1px;
  height: 28px;
  background: #2a2c30;
  flex: 0 0 auto;
}

.adjust-icon-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #1f2124;
  border: 1px solid #2a2c30;
  color: #c7c9cd;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.adjust-icon-btn svg {
  width: 22px;
  height: 22px;
}

.adjust-icon-btn:hover,
.adjust-icon-btn:focus-visible {
  background: #2a2c30;
  border-color: #baff29;
  color: #f0f0f0;
  outline: none;
}

.adjust-toolbar--floating {
  position: fixed;
  top: 20px;
  left: 24px;
  z-index: 10;
  background: rgba(20, 20, 22, 0.7);
  padding: 8px;
  border-radius: 14px;
  border: 1px solid #2a2c30;
}

.adjust-toolbar--floating .adjust-icon-btn {
  background: transparent;
  border-color: transparent;
}

.adjust-toolbar--floating .adjust-icon-btn:hover,
.adjust-toolbar--floating .adjust-icon-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
}

/* ==================== Cajón de ajustes (compartido) ==================== */

.adjust-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.adjust-drawer.hidden {
  display: none;
}

.adjust-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.adjust-drawer--open .adjust-drawer__backdrop {
  opacity: 1;
}

.adjust-drawer__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  margin: 0 auto;
  background: #17181a;
  border: 1px solid #2a2c30;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.adjust-drawer--open .adjust-drawer__panel {
  transform: translateY(0);
}

.adjust-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #2a2c30;
  font-weight: 600;
  flex: 0 0 auto;
}

.adjust-drawer__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  color: #c7c9cd;
  font-size: 1.1rem;
  line-height: 1;
}

.adjust-drawer__close:hover,
.adjust-drawer__close:focus-visible {
  background: #2a2c30;
  color: #f0f0f0;
  outline: none;
}

.adjust-drawer__body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ==================== Login / registro ==================== */

.auth-card {
  max-width: 420px;
  margin: 0 auto;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-form .btn {
  margin-top: 10px;
}

.text-input {
  width: 100%;
  background: #0f0f11;
  border: 1px solid #2a2c30;
  border-radius: 8px;
  color: #f0f0f0;
  font-size: 1rem;
  padding: 12px 14px;
  font-family: inherit;
  margin-bottom: 10px;
}

.text-input:focus {
  outline: none;
  border-color: #baff29;
}

.font-family-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.font-family-swatch {
  flex: 1 1 80px;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #1f2124;
  border: 1px solid #2a2c30;
  border-radius: 8px;
  padding: 10px 6px 8px;
  color: #d7d9dd;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.font-family-swatch:hover {
  background: #2a2c30;
}

.font-family-swatch:focus-visible {
  outline: 2px solid #baff29;
  outline-offset: 1px;
}

.font-family-swatch--active {
  border-color: #baff29;
  background: rgba(186, 255, 41, 0.12);
}

.font-family-swatch__glyph {
  font-size: 1.4rem;
  line-height: 1;
  color: #f0f0f0;
}

.font-family-swatch__label {
  font-size: 0.68rem;
  color: #9a9da3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.text-link-btn {
  background: none;
  color: #cdff5c;
  font-size: 0.85rem;
  padding: 4px 0;
  align-self: flex-start;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-link-btn:hover {
  color: #d8ff8f;
}

/* ==================== Barra de usuario / Mis guiones ==================== */

.setup-user-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: -8px;
}

.user-menu {
  position: relative;
}

.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #17181a;
  border: 1px solid #2a2c30;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 20;
}

.user-menu__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #f0f0f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu__email {
  margin-top: 2px;
  font-size: 0.78rem;
  color: #9a9da3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu__divider {
  border: none;
  border-top: 1px solid #2a2c30;
  margin: 10px 0;
}

.user-menu__logout {
  width: 100%;
  text-align: left;
  background: none;
  color: #ff6b6b;
  font-size: 0.85rem;
  padding: 4px 0;
}

.user-menu__logout:hover {
  color: #ff8a8a;
}

.scripts-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: #baff29;
  color: #0b0b0c;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Encima del ícono de carpeta (#open-scripts-btn), ya no al lado de un
   texto — mismo criterio visual que un badge de notificaciones. */
#open-scripts-btn {
  position: relative;
}

.scripts-count-badge--corner {
  position: absolute;
  top: -5px;
  right: -5px;
  margin-left: 0;
  box-shadow: 0 0 0 2px #17181a;
}

.icon-btn-small {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  color: #9a9da3;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn-small:hover {
  background: #2a2c30;
  color: #f0f0f0;
}

.scripts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scripts-list:empty {
  display: none;
}

.script-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1f2124;
  border: 1px solid #2a2c30;
  border-radius: 8px;
  padding: 8px 10px;
}

.script-item--active {
  border-color: #baff29;
}

.script-item__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.script-item__title {
  font-size: 0.88rem;
  color: #f0f0f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.script-item__date {
  font-size: 0.72rem;
  color: #7d8087;
}

.script-item__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}


/* ==================== Modal "Mis guiones" ==================== */
/* Centrado (no un cajón inferior como #adjust-drawer): esto es un browser
   de archivos, un mental model distinto al de ajustes rápidos. */

.scripts-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.scripts-modal.hidden {
  display: none;
}

.scripts-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.scripts-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  background: #17181a;
  border: 1px solid #2a2c30;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.scripts-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #2a2c30;
  font-weight: 600;
  flex: 0 0 auto;
}

.scripts-modal__header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.scripts-modal__body {
  padding: 16px 20px 20px;
  overflow-y: auto;
}

/* ==================== Editor a pantalla completa ==================== */

.script-input-wrapper {
  display: contents;
}

.fullscreen-editor {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #0b0b0c;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.fullscreen-editor.hidden {
  display: none;
}

.fullscreen-editor__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fullscreen-editor__header span {
  font-weight: 600;
  font-size: 1.1rem;
}

.fullscreen-editor__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* El <textarea> real (#script-input) hereda .setup-textarea; acá sólo se
   sobreescribe lo necesario para que ocupe todo el alto disponible — nunca
   una clase nueva pisando la de siempre en el otro contexto. */
.fullscreen-editor__body .setup-textarea {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  font-size: 1.15rem;
  line-height: 1.6;
}