/* DubWow web — mismo diseño que la app del teléfono */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --fondo: #0c0907;
  --tarjeta: #171110;
  --tarjeta2: #201815;
  --linea: #33251e;
  --txt: #f7f1ea;
  --tenue: #a99384;
  --acento: #d85a29;
  --acento2: #f4bd48;
  --ok: #4fbf74;
  --nav: 68px;
}
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--fondo); color: var(--txt);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
  /* el scroll vive DENTRO de cada pantalla; a nivel de página no hay ninguno,
     así no aparece el rebote elástico que delata que esto es una web */
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { opacity: .4; cursor: not-allowed; }
input[type=text] {
  width: 100%; padding: 13px 14px; border-radius: 14px; background: var(--tarjeta);
  border: 1px solid var(--linea); color: var(--txt); font: inherit; font-size: 15px;
}
input[type=text]:focus { outline: none; border-color: var(--acento2); }

/* La app vive en una columna angosta también en el escritorio: así el
   navegador se ve igual que el teléfono en vez de estirarse a lo ancho. */
.app {
  max-width: 460px; margin: 0 auto;
  /* Altura EXACTA de pantalla, no `min-height`: con `min-height` la app podía
     crecer más que el móvil y aparecía el scroll de página, que es justo lo
     que rompe la sensación de app nativa. `dvh` descuenta la barra del
     navegador móvil, que `vh` ignora (por eso el botón quedaba tapado). */
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; position: relative;
  border-left: 1px solid var(--linea); border-right: 1px solid var(--linea);
}
@media (max-width: 500px) { .app { border: 0; } }


/* Cada pantalla scrollea POR DENTRO si le hace falta; la página nunca. Así la
   barra de abajo y la cabecera se quedan quietas, como en una app de verdad. */
.pantalla {
  display: none; flex: 1; min-height: 0; flex-direction: column;
  padding-bottom: var(--nav); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.pantalla.on { display: flex; animation: aparece .3s ease both; }
/* la sala no scrollea nunca: todo tiene que caber, botón incluido */
#p-sala { overflow: hidden; }
@keyframes aparece { from { opacity: 0; transform: translateY(8px); } }
.wrap { padding: 0 16px 24px; }
.centro {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 30px 22px; gap: 10px;
}
.centro-col { display: flex; flex-direction: column; align-items: center; }
.spacer { flex: 1; }

.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: rgba(12,9,7,.9); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linea);
}
.brand { font-weight: 900; font-size: 20px; letter-spacing: -.03em; }
.brand b { color: var(--acento); }
.logo-big { font-size: 52px; font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.logo-big b { color: var(--acento); }
.iconbtn {
  width: 38px; height: 38px; border-radius: 12px; background: var(--tarjeta);
  border: 1px solid var(--linea); display: grid; place-items: center; font-size: 16px;
}
.iconbtn.on { border-color: var(--acento); color: var(--acento); }
.pill {
  padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--tarjeta); border: 1px solid var(--linea); color: var(--tenue);
}
/* una escena propia más larga del tope: hay que recortarla antes de doblar */
.pill.alerta { color: var(--acento); border-color: var(--acento); }

/* Elegir entre dos: el activo se ve HUNDIDO, no solo de otro color. Con un
   simple cambio de tono no se distingue cuál está puesto y cuál se puede
   pulsar. */
.elige { display: flex; gap: 8px; }
.elige .btn { flex: 1; gap: 6px; }
.elige .btn.elegido {
  background: var(--acento); border-color: transparent; color: #fff;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.28);
}
.elige .btn.elegido svg { stroke: #fff; }

/* ---- el tutorial: una ventanita, no una pantalla entera ----
   Ocupar toda la pantalla para decir cuatro cosas hace que se sienta un
   trámite. Una ficha pequeña se lee y se quita de en medio. */
#fichaTutorial { align-items: center; padding: 22px; }
#fichaTutorial .ficha-caja {
  border-radius: 22px; max-width: 340px; padding: 14px 20px 20px;
  animation: aparece .2s ease both;
}
.tut-cab { display: flex; align-items: center; justify-content: space-between; }
.tut-paso {
  font-size: 12px; font-weight: 800; color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.tut-caja h3 { margin: 14px 0 4px; font-size: 19px; text-align: center; }
.tut-caja .lead { text-align: center; font-size: 14px; margin: 0; }
.tut-caja .btn.grande { width: 100%; margin-top: 4px; }

/* La vitrina donde se enseña el botón de cada paso. Fondo hundido para que se
   lea como "esto es un trozo de la app", no como un botón que hay que pulsar
   ahora — por eso todos van con `tabindex="-1"` y sin `onclick`. */
.tut-muestra {
  margin-top: 12px; padding: 18px 14px; border-radius: 14px;
  background: var(--fondo); border: 1px solid var(--linea);
  display: grid; place-items: center; min-height: 96px;
}
.tut-muestra .btn { pointer-events: none; }
.tut-sobre-reel .btn { display: inline-flex; align-items: center; gap: 6px;
                       padding: 9px 15px; font-size: 13px; }
.tut-forma { width: 100%; display: grid; gap: 7px; }
.tut-forma .etiqueta-campo { margin: 0; }
.tut-forma input { font-size: 13px; padding: 10px 12px; color: var(--tenue); }
.tut-forma .btn { width: 100%; padding: 10px; font-size: 13.5px; }
.tut-camara { display: flex; gap: 26px; }
.tut-camara > div { display: grid; place-items: center; gap: 7px; }
.tut-camara i {
  font-style: normal; font-size: 11.5px; color: var(--tenue); font-weight: 700;
}
.tut-puntos { display: flex; gap: 6px; justify-content: center; margin: 14px 0 12px; }
.tut-puntos i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--linea);
  transition: .2s;
}
.tut-puntos i.on { background: var(--acento); width: 18px; border-radius: 3px; }

/* la aceptación de términos: se lee como una frase, no como un formulario */
.tut-acepto {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  margin: 0 0 12px; font-size: 12.5px; color: var(--tenue); line-height: 1.5;
}
.tut-acepto input { margin: 1px 0 0; width: 17px; height: 17px; flex: none;
                    accent-color: var(--acento); cursor: pointer; }
.tut-acepto a { color: var(--acento2); }

/* ---- la nota final, con su cuenta atrás y sus estrellas ----
   Va en una ventanita centrada (#fichaNota): dura unos segundos y no tiene
   por qué quitarle alto a la escena el resto de la partida. */
#fichaNota { align-items: center; padding: 24px; }
#fichaNota .ficha-caja {
  border-radius: 22px; max-width: 320px; text-align: center;
  padding: 22px 22px 20px;
  animation: aparece .18s ease both;
}
/* El veredicto de la partida. Entra con un empujón hacia arriba después de
   la cifra, y en mayúsculas apretadas para que se lea como un sello. */
.nota-caja .titulo {
  font-size: 19px; font-weight: 900; letter-spacing: .06em;
  margin-top: 10px; min-height: 22px;
  opacity: 0; transform: translateY(8px) scale(.92);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.3,1.2);
}
.nota-caja .titulo.on { opacity: 1; transform: none; }

.nota-caja .cifra {
  font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;   /* sin esto los decimales bailan */
}
.nota-caja .pie { color: var(--tenue); font-size: 13px; margin-top: 2px; }
.nota-caja .btn { width: 100%; margin-top: 16px; }
.estrellas { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.estrella {
  font-style: normal; font-size: 26px; color: var(--linea);
  transform: scale(.4); opacity: 0;
  animation: caeEstrella .34s cubic-bezier(.2,1.5,.4,1) both;
}
.estrella.on { color: var(--acento2); }
.estrella.media {
  color: var(--acento2);
  /* media estrella: se rellena solo la mitad izquierda */
  background: linear-gradient(90deg, var(--acento2) 50%, var(--linea) 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes caeEstrella {
  to { transform: scale(1); opacity: 1; }
}

/* ---- publicidad ----
   Con altura mínima reservada: si el anuncio llega y empuja el contenido, la
   página salta justo cuando estabas por tocar algo. */
.anuncio {
  min-height: 100px; margin: 0 0 12px; overflow: hidden;
  border-radius: 12px; background: var(--tarjeta);
}
.sticky-ad {
  position: fixed; left: 0; right: 0; bottom: var(--nav); z-index: 45;
  background: var(--tarjeta); border-top: 1px solid var(--linea);
  padding: 4px 34px 4px 8px; min-height: 62px;
}
/* el botón de cerrar, separado del anuncio para no tocarlo sin querer */
.sticky-x {
  position: absolute; top: 2px; right: 4px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 1;
}

/* Lo que se vende: precio a la derecha, bien visible, sin letra chica */
.compra {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px; border-radius: 16px; margin-bottom: 8px;
  background: var(--tarjeta); border: 1px solid var(--linea); transition: .15s;
}
.compra:hover { border-color: var(--acento2); }
.compra-txt { flex: 1; min-width: 0; }
.compra-txt b { display: block; font-size: 15px; }
.compra-txt i {
  font-style: normal; color: var(--tenue); font-size: 12.5px; line-height: 1.35;
}
.compra .precio {
  flex: none; font-weight: 900; font-size: 15px; color: var(--acento2);
}
.saldo {
  margin: 0 0 10px; font-size: 13px; color: var(--tenue); font-weight: 700;
}

/* El usuario, con la arroba pegada al campo para que se lea como un handle */
.usuario-campo {
  display: flex; align-items: center; gap: 8px; width: 100%;
}
.usuario-campo > span {
  font-weight: 800; font-size: 16px; color: var(--tenue);
}
.usuario-campo input { flex: 1; min-width: 0; }
.usuario-campo input:disabled { opacity: .55; }
.usuario-campo .btn { flex: none; padding: 12px 16px; }

/* borrar la cuenta no se pinta como un botón más: tiene que dar respeto */
.btn.peligro {
  background: transparent; border-color: var(--acento); color: var(--acento);
}
.btn.peligro:hover:not(:disabled) { background: rgba(216,90,41,.12); }
#ajustes .ficha-caja { display: flex; flex-direction: column; gap: 10px; }
/* la espera del pago va centrada y no se puede cerrar tocando fuera: no
   conviene que se salga a mitad de la confirmación */
#esperaPago { align-items: center; padding: 24px; }
#esperaPago .ficha-caja {
  border-radius: 20px; max-width: 340px; text-align: center; padding: 30px 24px;
}
#esperaPago p { margin: 14px 0 0; color: var(--tenue); font-size: 14px; }

/* la cuenta, arriba del perfil */
.correo-perfil {
  margin: 0 0 12px; color: var(--tenue); font-size: 13px; text-align: center;
}
#perfilAvatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
#perfilAvatar { overflow: hidden; }
/* con sesión, la foto invita a tocarla: al hacerlo explica que se cambia
   desde Google, que es donde de verdad vive */
#perfilAvatar.tocable { cursor: pointer; position: relative; }
#perfilAvatar.tocable::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; transition: border-color .15s;
}
#perfilAvatar.tocable:hover::after { border-color: var(--acento2); }
h1 { margin: 4px 0; font-size: 28px; letter-spacing: -.035em; }
.lead { color: var(--tenue); font-size: 15px; line-height: 1.5; margin: 4px 0 16px; }
.emoji-hero { font-size: 54px; line-height: 1; }

.btn {
  padding: 13px 18px; border-radius: 15px; font-weight: 800; font-size: 15px;
  background: var(--tarjeta); border: 1px solid var(--linea); transition: .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover:not(:disabled) { background: var(--tarjeta2); }
.btn.primary { background: var(--acento); border-color: transparent; }
.btn.violet { background: var(--acento2); border-color: transparent; color: #2b1a06; }
.btn.ok { background: var(--ok); border-color: transparent; color: #06210f; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--tenue); font-size: 13px; }
.btn.grande { width: 100%; padding: 16px; font-size: 16px; }

/* ------------------------------------------------------------- idioma */
.tarjeta-idioma {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 18px 20px; border-radius: 18px; background: var(--tarjeta);
  border: 1px solid var(--linea); transition: .15s;
}
.tarjeta-idioma:hover { border-color: var(--acento2); }
.tarjeta-idioma .bandera { font-size: 32px; }
.tarjeta-idioma b { display: block; font-size: 17px; }
.tarjeta-idioma i { font-style: normal; color: var(--tenue); font-size: 12.5px; }

.pasos { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; gap: 9px; }
.pasos li {
  display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto;
  gap: 1px 12px; align-items: center; text-align: left; padding: 12px 14px;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px;
}
.pasos li span {
  grid-row: 1/3; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(100deg, var(--acento), var(--acento2));
  display: grid; place-items: center; font-weight: 900; font-size: 14px;
}
.pasos li b { font-size: 14.5px; }
.pasos li i { font-style: normal; color: var(--tenue); font-size: 12px; }
.aviso-suave {
  width: 100%; color: var(--tenue); font-size: 13px; line-height: 1.5;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 14px; padding: 13px 15px; margin: 4px 0;
}
/* separa las dos formas de crear una escena: por link o importando un paquete */
.separador {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 6px; color: var(--tenue); font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.separador::before, .separador::after {
  content: ''; flex: 1; height: 1px; background: var(--linea);
}

/* ----------------------------------------------------------- permisos */
.perm {
  width: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px;
  align-items: center; text-align: left; padding: 14px;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 15px;
}
.perm-ico { font-size: 24px; }
.perm-txt b { display: block; font-size: 15px; }
.perm-txt i { font-style: normal; color: var(--tenue); font-size: 12px; }
.perm-estado {
  font-size: 11.5px; font-weight: 800; padding: 6px 11px; border-radius: 999px;
  background: var(--tarjeta2); border: 1px solid var(--linea); color: var(--tenue);
}
.perm-estado[data-estado="ok"] { background: rgba(34,214,122,.16); border-color: rgba(34,214,122,.5); color: var(--ok); }
.perm-estado[data-estado="no"] { background: rgba(216,90,41,.18); border-color: rgba(216,90,41,.55); color: var(--acento); }
.perm[data-estado="ok"] { border-color: rgba(34,214,122,.4); }
.aviso {
  width: 100%; background: rgba(255,209,102,.10); border: 1px solid rgba(255,209,102,.4);
  color: #ffd166; border-radius: 14px; padding: 12px 14px; font-size: 12.5px;
  line-height: 1.5; text-align: left;
}

/* ------------------------------------------- crear y editar escenas */
.iconbtn.ok { border-color: var(--ok); color: var(--ok); }
.fila-tiempos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.etiqueta-campo {
  display: block; margin: 12px 0 5px; font-size: 12px;
  color: var(--tenue); font-weight: 700;
}
.estado-trabajo {
  margin-top: 14px; font-size: 13px; color: var(--tenue); line-height: 1.5;
  white-space: pre-wrap;
}
.estado-trabajo.malo { color: var(--acento); }

/* El editor ocupa la pantalla entera y NO se desliza: la línea de tiempo
   tiene que estar siempre bajo el pulgar mientras se ve el video. */
.editor { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* El video se queda en su tamaño y no estira: las escenas son panorámicas y
   dentro de una caja 16:9 salían con medio cuadro en negro y ocupando toda
   la pantalla. Con `contain` y un tope de altura se ve entero y bajito. */
.editor-nombre {
  flex: none; margin: 10px 16px 0; padding: 10px 14px; border-radius: 12px;
  background: var(--tarjeta); border: 1px solid var(--linea);
  color: var(--txt); font: inherit; font-size: 15px; font-weight: 800;
}
.editor-nombre:focus { outline: none; border-color: var(--acento2); }
/* Película y escena en la MISMA fila: en dos líneas se comían 55 px de alto
   y empujaban la línea de tiempo fuera de la pantalla. `min-width: 0` es lo
   que impide que un título largo estire su campo y desborde a lo ancho: sin
   eso, un input reclama el ancho de su contenido y se sale del teléfono. */
.editor-nombres {
  flex: none; display: flex; gap: 8px; margin: 10px 16px 0;
}
.editor-nombres input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 12px;
  background: var(--tarjeta); border: 1px solid var(--linea);
  color: var(--txt); font: inherit; font-size: 14px; font-weight: 700;
  text-overflow: ellipsis;
}
.editor-nombres input:focus { outline: none; border-color: var(--acento2); }
/* el segundo es la escena, que pesa menos que el nombre de la película */
.editor-nombres input + input { font-weight: 600; color: var(--tenue); }
.editor-video {
  background: #000; flex: none; width: 100%;
  height: min(34vh, 240px); display: flex; align-items: center;
  justify-content: center; position: relative;
}
.editor-video video {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Las escenas sin clip.mp4 (las de GameBanana) se editan igual, solo que sin
   vídeo que mostrar: se avisa en vez de dejar un rectángulo negro mudo. */
.editor-video.sin-video video { display: none; }
.editor-video.sin-video::after {
  content: attr(data-aviso); color: var(--tenue); font-size: 12.5px;
  padding: 0 24px; text-align: center;
}
/* El texto de la frase que le toca a ESTE segundo del video, para poder
   revisar de un tirón (dándole play) que los cortes y la transcripción
   salieron bien, sin tener que abrir la ficha de cada una a mano. */
.editor-subt {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  text-align: center; color: #fff; font-weight: 700; font-size: 13.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6);
  pointer-events: none;
}
.editor-barra {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--linea); font-size: 13px; font-weight: 700;
}
.editor-barra #edInfo { color: var(--acento2); font-size: 12.5px; }
/* La onda ocupa un cuarto de la pantalla, no todo lo que sobra: es una guía
   para encontrar el corte, y el trabajo fino se hace en la ventana de cada
   uno, donde ese trozo sale ampliado. */
#edLinea {
  flex: none; width: 100%; height: 25vh; min-height: 130px;
  display: block; touch-action: none;
}
.editor-hueco { flex: 1; min-height: 0; }
.editor-pie {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px;
}
.editor-pista { flex: 1; margin: 0; color: var(--tenue); font-size: 12px; }
#edNueva { padding: 9px 14px; font-size: 13px; white-space: nowrap; }

/* La ficha del bloque sube desde abajo, como una hoja de app. */
.ficha {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(0,0,0,.55); align-items: flex-end; justify-content: center;
}
.ficha.on { display: flex; }
/* Los avisos van CENTRADOS, no pegados abajo: una pregunta que hay que leer
   y decidir se pone delante de los ojos. Abajo funciona para las fichas de
   trabajo (recortar, ajustar una frase), donde el dedo ya está ahí. */
#dialogo { align-items: center; padding: 24px; }
#dialogo .ficha-caja {
  border-radius: 20px; max-width: 380px;
  animation: aparece .18s ease both;
}
.ficha-caja {
  width: 100%; max-width: 460px; background: var(--tarjeta);
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  padding: 16px 20px 22px; animation: sube .22s ease both;
}
/* Las hojas que suben desde abajo: ajustes, diálogos, la nota final. */
@keyframes sube { from { transform: translateY(30px); opacity: 0; } }
.ficha-cab {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--tenue); font-size: 12.5px; margin-bottom: 4px;
}
/* ---- ventana de recorte ----
   La onda de la escena entera, con el bloque de lo que se conserva encima. */
.rec-linea {
  position: relative; height: 96px; margin: 10px 0 4px;
  border-radius: 10px; background: var(--tarjeta2);
  border: 1px solid var(--linea); touch-action: none; overflow: hidden;
}
.rec-linea canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* lo que queda FUERA se apaga, para que se lea de un vistazo qué se tira */
.rec-linea .sel-bloque { background: rgba(216,90,41,.18); }
.rec-linea::before, .rec-linea::after { content: none; }
/* mientras recorta: la selección late y no se puede tocar nada, para que se
   note que está trabajando y no parezca que el botón no hizo nada */
.ficha.trabajando .rec-linea { pointer-events: none; opacity: .75; }
.ficha.trabajando .sel-bloque { animation: recortando 1s ease-in-out infinite; }
@keyframes recortando {
  0%, 100% { background: rgba(216,90,41,.18); }
  50% { background: rgba(216,90,41,.45); }
}

/* ---- bienvenida ---- */
.tut-ico {
  width: 88px; height: 88px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: var(--acento);
  background: rgba(216,90,41,.14); border: 1px solid rgba(216,90,41,.4);
  margin-bottom: 6px;
}
.tut-puntos { display: flex; gap: 7px; margin: 6px 0 14px; }
.tut-puntos i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--linea);
  transition: background .2s, width .2s;
}
.tut-puntos i.on { background: var(--acento); width: 20px; border-radius: 4px; }

/* ---- el muro (Explorar) ----
   Un doblaje por pantalla, como un reel: se desliza en vertical y cada uno
   encaja solo gracias al scroll-snap. El vídeo va detrás y todo lo demás
   flotando encima, para que la imagen se vea entera. */
#p-explorar { padding-bottom: 0; overflow: hidden; }
.muro {
  flex: 1; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
}
.muro::-webkit-scrollbar { display: none; }
.muro-item {
  position: relative; height: 100%; scroll-snap-align: start;
  scroll-snap-stop: always; background: #000; overflow: hidden;
}
.muro-item video {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: #000;
}
/* degradado abajo: sin esto el texto blanco se pierde sobre un plano claro */
.muro-item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  pointer-events: none;
}
.muro-info {
  position: absolute; left: 14px; right: 76px; bottom: calc(var(--nav) + 16px);
  z-index: 2; display: flex; flex-direction: column; gap: 6px;
}
.muro-info .quien { font-weight: 800; font-size: 15px; }
/* Cuando el doblaje viene de un reel, el nombre lleva al perfil de quien lo
   hizo. `stopPropagation` en el enlace: sin eso, tocar el nombre contaba
   además como tocar el reel y lo pausaba al mismo tiempo que abría Instagram. */
.muro-info .quien a {
  color: inherit; text-decoration: none; display: inline-flex;
  align-items: center; gap: 4px;
}
.muro-info .quien a svg { opacity: .7; }
.muro-info .quien a:active { opacity: .6; }
/* El nombre de la escena en el muro.
   Se llamaba `.escena`, igual que las TARJETAS de la librería, y heredaba de
   ellas fondo, borde y `border-radius: 18px` sin tener relleno: quedaba una
   pastilla ovalada que se comía la primera letra por la esquina. Un nombre de
   clase es global; si dos cosas distintas se llaman igual, tarde o temprano
   una se pone la ropa de la otra. */
.muro-escena { font-size: 13px; color: #e8ded6; }
.muro-escena b { color: var(--acento2); }
.muro-acciones {
  position: absolute; right: 12px; bottom: calc(var(--nav) + 62px);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.muro-acciones button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; font-size: 13px; font-weight: 800;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
.muro-acciones button.on { color: var(--acento); }
/* Arriba y centrado, en pastilla: abajo y a lo ancho tapaba la cara de quien
   dobla y chocaba con la barra de navegación. */
.muro-doblar {
  z-index: 3; position: absolute; top: 14px; left: 50%;
  transform: translateX(-50%);
  width: auto; padding: 9px 15px; font-size: 13px;
  border-radius: 999px; white-space: nowrap;
}
.muro-sonido {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: rgba(0,0,0,.5); border-radius: 999px; padding: 8px;
  color: #fff; display: flex;
}
/* Barra de avance: fina de normal, gorda mientras se arrastra. La zona
   sensible es mucho más alta que la línea para poder agarrarla con el dedo. */
/* Solo se ve con el vídeo parado: mientras corre estorba la imagen, y es
   justo cuando lo paras cuando quieres buscar un momento concreto. */
.muro-barra {
  position: absolute; left: 0; right: 0; bottom: var(--nav);
  height: 28px; z-index: 4; display: flex; align-items: center;
  padding: 0 12px; touch-action: none; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.muro-item.parado .muro-barra { opacity: 1; pointer-events: auto; }
.muro-barra .pista {
  position: relative; flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.28); transition: height .12s;
}
.muro-barra i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: #fff; border-radius: 2px;
}
.muro-barra.tocando .pista { height: 7px; }
/* el aviso de 2x mientras se mantiene pulsado arriba */
.muro-x2 {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: none; padding: 6px 14px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #fff; font-weight: 800; font-size: 13px;
}
.muro-x2.on { display: block; }

.muro-vacio {
  display: none; flex: 1; align-items: center; justify-content: center;
  text-align: center; padding: 40px 28px; color: var(--tenue); font-size: 15px;
  line-height: 1.5;
}
.muro-vacio.on { display: flex; }

/* ---- selector del trozo de YouTube ----
   El video entero arriba y su línea de tiempo abajo: el bloque de color es lo
   que se va a doblar. Se arrastra por el medio para moverlo y por los bordes
   para acortarlo, que es más rápido que escribir dos tiempos a ciegas. */
.sel-video {
  width: 100%; aspect-ratio: 16/9; background: #000;
  border-radius: 12px; overflow: hidden; margin: 8px 0 12px;
}
.sel-video iframe, .sel-video > div { width: 100%; height: 100%; border: 0; }
.sel-linea {
  position: relative; height: 46px; border-radius: 10px;
  background: var(--tarjeta2); border: 1px solid var(--linea);
  touch-action: none; overflow: hidden;
}
.sel-bloque {
  position: absolute; top: 0; bottom: 0;
  background: rgba(216,90,41,.34); border: 2px solid var(--acento);
  border-radius: 8px; cursor: grab;
}
.sel-bloque:active { cursor: grabbing; }
/* asas anchas a propósito: con el dedo, 6 px de borde no se agarran */
.sel-bloque .asa {
  position: absolute; top: 0; bottom: 0; width: 22px; cursor: ew-resize;
}
.sel-bloque .asa::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 20px; border-radius: 2px; background: var(--acento);
}
.sel-bloque .asa[data-asa="ini"] { left: -11px; }
.sel-bloque .asa[data-asa="fin"] { right: -11px; }
.sel-aguja {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--acento2); pointer-events: none; display: none;
}
.sel-aguja.on { display: block; }
.sel-datos {
  display: flex; align-items: center; gap: 12px; margin: 12px 0 4px;
}
.sel-datos #selTiempos {
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ficha-acciones { display: flex; gap: 10px; margin-top: 14px; }
.ficha-acciones .btn { flex: 1; }

/* La onda ampliada de un solo corte, dentro de su ventana. */
#fichaOnda {
  width: 100%; height: 120px; display: block; margin: 10px 0 4px;
  border-radius: 12px; background: #120e0c; touch-action: none;
}
/* Los segundos se tocan con botones y también se escriben a mano: para
   cuadrar una entrada hacen falta décimas, y arrastrar no siempre basta. */
.reloj-campo .reloj {
  display: flex; align-items: center; gap: 4px;
  background: var(--tarjeta2); border: 1px solid var(--linea);
  border-radius: 12px; padding: 4px 6px;
}
.reloj button {
  width: 30px; height: 30px; border-radius: 8px; color: var(--tenue);
  display: grid; place-items: center; flex: none;
}
.reloj button:active { background: var(--linea); }
.reloj input {
  flex: 1; min-width: 0; width: 100%; padding: 4px; border: 0; background: none;
  color: var(--txt); font: inherit; font-size: 15px; font-weight: 800;
  text-align: center;
}
.reloj input:focus { outline: none; color: var(--acento2); }

/* Los cuatro botones de escucha, en fila y del mismo ancho. */
.escuchas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.escuchas .btn { padding: 11px 0; display: grid; place-items: center; }
.escuchas .btn.sonando { border-color: var(--acento); color: var(--acento); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips button {
  padding: 5px 10px; border-radius: 999px; font-size: 12px;
  background: var(--tarjeta2); border: 1px solid var(--linea);
}

/* Las dos categorías de Mis dubs. Van dentro de la misma pantalla y no en
   sitios distintos: son las dos cosas que uno guarda, y buscarlas en menús
   separados obligaba a recordar dónde estaba cada una. */
.pestanas {
  display: flex; gap: 6px; padding: 0 16px 10px;
  border-bottom: 1px solid var(--linea);
}
.pestanas button {
  flex: 1; padding: 10px 8px; border-radius: 12px; font-size: 14px;
  font-weight: 800; color: var(--tenue); background: transparent;
}
.pestanas button.on { color: var(--txt); background: var(--tarjeta); }

.aviso-cab { display: flex; justify-content: center; color: var(--acento2); }
.ficha-caja h3 { margin: 10px 0 4px; font-size: 19px; text-align: center; }
.ficha-caja .lead { text-align: center; margin-bottom: 16px; }

/* El botón de editar, dentro del recuadro del video. */
.dub-foto { position: relative; }
/* en "Mis escenas" la miniatura también abre el editor */
.escena .dub-foto { cursor: pointer; }
/* los doblajes no se guardan para siempre: se avisa arriba de la lista */
.nota-retencion {
  margin: 0 0 4px; padding: 9px 12px; border-radius: 10px;
  background: var(--tarjeta); border: 1px solid var(--linea);
  color: var(--tenue); font-size: 12.5px; line-height: 1.45;
}
.dub-editar {
  position: absolute; right: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  background: rgba(12,9,7,.82); border: 1px solid var(--acento2);
  color: var(--acento2);
}

/* La tarjeta de espera de la sala: calcada a la que dibuja el servidor en el
   video exportado, para que lo que ves mientras esperas sea lo que se ve
   luego. Antes aquí había una rueda suelta sobre negro y desentonaba. */
.tarjeta-espera {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--fondo); text-align: center; padding: 16px;
}
.tarjeta-espera.on { display: flex; }
.tarjeta-espera p { margin: 0; font-size: 17px; font-weight: 700; }
.tarjeta-espera small { color: var(--tenue); font-size: 11.5px; }
.tarjeta-espera .puntos { display: flex; gap: 9px; }
.tarjeta-espera .puntos i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--linea);
  animation: latido 1.1s ease-in-out infinite;
}
.tarjeta-espera .puntos i:nth-child(2) { animation-delay: .16s; }
.tarjeta-espera .puntos i:nth-child(3) { animation-delay: .32s; }
@keyframes latido {
  0%, 100% { background: var(--linea); transform: scale(1); }
  40% { background: var(--acento2); transform: scale(1.25); }
}

/* Llama la atención hacia "Editar" en una escena recién subida por YouTube
   que todavía nadie repasó — mismo truco que el aro rojo de un tutorial de
   videojuego: se nota sin tener que leer nada. */
.avisar { box-shadow: 0 0 0 0 rgba(216,90,41,.6); animation: avisar 1.6s ease-out infinite; }
@keyframes avisar {
  0% { box-shadow: 0 0 0 0 rgba(216,90,41,.55); }
  70% { box-shadow: 0 0 0 9px rgba(216,90,41,0); }
  100% { box-shadow: 0 0 0 0 rgba(216,90,41,0); }
}

/* Los iconos son SVG de línea y heredan el color del texto, así que el mismo
   dibujo vale en un botón claro o en la barra de abajo sin tocar nada. */
svg { display: block; flex: none; }
.iconbtn svg, .navbar svg { stroke-width: 1.8; }
.perm-ico, .emoji-hero, .avatar, .icono { color: var(--acento2); }
.emoji-hero, .icono { display: flex; justify-content: center; }
.avatar { display: flex; align-items: center; justify-content: center; }
.marca.corta { display: inline-flex; align-items: center; gap: 4px; }
.marca.corta svg { stroke-width: 2.2; }
/* la bandera pasó a ser el código del idioma: se ve igual en todos lados */
.tarjeta-idioma .bandera {
  font-size: 15px; font-weight: 900; letter-spacing: .06em;
  color: var(--acento2); width: 32px; text-align: center;
}

/* Un doblaje que todavía se está montando en el servidor. */
/* Las acciones de una escena tuya, dentro de su ficha. */
.acciones-escena { display: flex; gap: 6px; margin-top: 8px; }
.acciones-escena .btn {
  padding: 8px 10px; font-size: 12.5px; display: inline-flex;
  align-items: center; gap: 5px;
}
.acciones-escena .btn.ghost { padding: 8px; }

.dub.montando { border-color: var(--acento2); opacity: .95; }
.barra {
  margin-top: 6px; height: 4px; border-radius: 999px;
  background: var(--linea); overflow: hidden;
}
.barra i {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background: var(--acento2); animation: vaviene 1.3s ease-in-out infinite;
}
@keyframes vaviene {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* El diálogo propio: mismo look que las fichas, sin las tipografías y
   bordes del sistema que traían alert()/confirm(). */
.dialogo-caja { max-width: 380px; margin: 0 auto; text-align: center; }
.dialogo-texto {
  margin: 4px 0 18px; font-size: 14.5px; line-height: 1.55;
  color: var(--txt); white-space: pre-line;
}
.dialogo-acciones { display: flex; gap: 8px; }
.dialogo-acciones .btn { flex: 1; padding: 12px; }

/* Los apuntes de la sesión: solo se abren si se piden, para poder decir qué
   falló sin tener que abrir la consola del navegador en un móvil. */
.diag {
  display: none; width: 100%; max-height: 220px; overflow: auto;
  margin: 6px 0 0; padding: 10px 12px; text-align: left;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 12px; color: var(--tenue);
  font-size: 10.5px; line-height: 1.45; white-space: pre-wrap;
}
.diag.on { display: block; }

/* ---------------------------------------------------------- explorar */
.titulo-seccion { margin: 18px 0 2px; font-size: 26px; letter-spacing: -.035em; }
.sub-seccion { margin: 0 0 14px; color: var(--tenue); font-size: 13px; }
.grid { display: grid; gap: 14px; }
.escena {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px;
  overflow: hidden; text-align: left; transition: .18s; width: 100%;
}
.escena:hover { transform: translateY(-3px); border-color: var(--acento); }
.escena .foto { position: relative; aspect-ratio: 16/9; background: #000; }
.escena .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.escena .foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,9,7,.94) 0%, rgba(12,9,7,.1) 62%, transparent);
}
.escena .marcas { position: absolute; z-index: 2; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; }
.marca {
  padding: 5px 9px; border-radius: 8px; font-size: 11px; font-weight: 800;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14);
}
.marca.dubs { margin-left: auto; background: var(--acento); border-color: transparent; }
.marca.dubs.cero { background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.14); color: var(--tenue); }
.marca.corta { background: var(--acento2); border-color: transparent; color: #2b1a06; }
.escena .pieFoto { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 11px; }
.escena .peli { font-size: 10.5px; color: var(--tenue); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.escena .tit { font-size: 19px; font-weight: 900; letter-spacing: -.025em; line-height: 1.2; margin-top: 2px; }
.escena .chips { display: flex; gap: 6px; padding: 10px 12px 12px; flex-wrap: wrap; }
.chip {
  font-size: 11.5px; font-weight: 600; color: var(--tenue); background: var(--tarjeta2);
  border: 1px solid var(--linea); padding: 4px 9px; border-radius: 999px;
}
.chip .punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }

/* -------------------------------------------------------------- sala */
.titulo-sala .peli { font-size: 10px; color: var(--tenue); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.titulo-sala .tit { font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.sala { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 12px 16px; gap: 10px; }

.escenario { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.escenario > .cuadro, .escenario.con-camara {
  border-radius: 14px; overflow: hidden; position: relative; background: #000;
}
.escenario > .cuadro { width: 100%; aspect-ratio: 16/9; max-height: 100%; }
/* Con la cámara encendida se ve el formato vertical que va a salir. `width:
   auto` es lo importante: con `width: 100%` el 9/16 calculaba la altura a
   partir del ancho del teléfono y salía altísimo, empujando el botón fuera de
   la pantalla. Así manda la ALTURA disponible y el ancho se deduce de ella. */
.escenario.con-camara {
  display: flex; flex-direction: column; aspect-ratio: 9/16;
  height: 100%; max-height: 100%; width: auto; max-width: 100%;
}
.escenario.con-camara #camPrev { display: block; flex: 1; width: 100%; object-fit: cover; min-height: 0; }
.escenario.con-camara > .cuadro { flex: 1; aspect-ratio: auto; border-radius: 0; border-top: 2px solid rgba(255,255,255,.15); }
#camPrev { display: none; }

.cuadro img, .cuadro video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* el video va ENCIMA del fotograma: mientras carga se ve la imagen quieta y
   no un rectángulo negro, y al arrancar lo tapa sin parpadeo */
.cuadro video { position: absolute; inset: 0; opacity: 0; transition: opacity .15s; }
.cuadro video.on { opacity: 1; }
/* el resultado se mira entero: recortarlo se comia los lados de un 16:9 */
.cuadro video.completo { object-fit: contain; background: #000; }
.rotulo {
  position: absolute; top: 0; left: 0; right: 0; padding: 9px 13px 24px;
  background: linear-gradient(to bottom, rgba(0,0,0,.85), transparent);
  font-size: 13px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase;
  text-shadow: 0 2px 6px #000;
}
.subtitulo {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.95), transparent);
  font-size: 18px; font-weight: 700; line-height: 1.25; text-align: center;
  text-shadow: 0 2px 8px #000;
}
.subtitulo.largo { font-size: 15px; }
.subtitulo.muy-largo { font-size: 13px; }
.etiqueta {
  position: absolute; top: 9px; right: 9px; display: none; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 900; letter-spacing: .08em;
}
.etiqueta.on { display: flex; }
.etiqueta.rec { background: var(--acento); }
.etiqueta.oyendo { background: rgba(0,0,0,.65); }
.cuenta {
  position: absolute; inset: 0; display: none; place-items: center;
  background: rgba(0,0,0,.72); font-size: 82px; font-weight: 900;
}
.cuenta.on { display: grid; animation: pop .3s ease; }
@keyframes pop { from { transform: scale(1.4); opacity: 0; } }

/* La casilla de terminos cuando alguien intenta seguir sin marcarla: un
   golpecito y se enciende el borde. Es mas claro que un boton apagado. */
.tut-acepto.pide-atencion {
  animation: tiembla .45s ease;
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--acento2);
}
@keyframes tiembla {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

/* Un botón trabajando: se ve que está en ello y no acepta más toques.
   Se llama `ocupado` y no `cargando` porque `.cargando` YA EXISTE para la
   pantalla de resultado, con `padding: 60px 20px`. Al reutilizar el nombre,
   el botón heredaba ese relleno y pasaba de 48 px de alto a 142: una caja
   enorme y vacía en mitad de la sala. */
.btn.ocupado { pointer-events: none; position: relative; color: transparent; }
.btn.ocupado svg { opacity: 0; }
.btn.ocupado::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

#ondaCaja { position: relative; }
#onda { width: 100%; height: 54px; display: block; }

/* Los puntos que suben desde el trozo que acabas de clavar.
   Suben y se apagan en menos de un segundo: tienen que leerse de reojo,
   mientras sigues doblando, sin robarte la vista de la frase. */
.gana {
  position: absolute; bottom: 46%; left: 0;
  font: 900 21px/1 system-ui, sans-serif;
  color: #fff;
  pointer-events: none; white-space: nowrap;
  animation: flotaGanancia 1100ms cubic-bezier(.2,.8,.3,1) forwards;
}
.gana.mucho { font-size: 28px; }
/* Entra con un golpe que se pasa de largo y rebota —así se siente premio y
   no letrero—, flota alto y se apaga ya lejos de la tira.

   OJO CON EL NOMBRE. Esto se llamaba `sube`, y ya había un `@keyframes sube`
   más arriba: el de las hojas que suben desde abajo (ajustes, diálogos). En CSS
   gana el último, así que las hojas pasaron a correr ESTA animación: se
   desplazaban media anchura a la izquierda —el `translate(-50%)`— y acababan en
   `opacity: 0`, que con `both` se queda para siempre. La hoja de ajustes salía
   torcida y se desvanecía sola, y no había forma de relacionarlo con nada,
   porque el fallo estaba en un sitio que no tenía que ver.
   Un nombre de animación es global, como el de una clase. Que se note de qué
   es. */
@keyframes flotaGanancia {
  0%   { opacity: 0; transform: translate(-50%, 12px) scale(.4); }
  14%  { opacity: 1; transform: translate(-50%, -6px) scale(1.3); }
  28%  { transform: translate(-50%, -10px) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(1); }
}
.acciones { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.acciones .btn { flex: 1; min-width: 120px; }
/* La fila de botones GUARDA SU SITIO aunque esté vacía.
   Mientras escuchas o grabas no hay botones que enseñar, y al quitarlos esta
   fila se encogía a cero: la escena se estiraba para ocupar el hueco, todo
   daba un salto, y al volver los botones daba otro. Con el alto reservado,
   la pantalla se queda quieta y solo cambia lo que tiene que cambiar. */
#salaAcciones { min-height: 56px; }
/* la ventanita de "descargando escena" no lleva botones: se cierra sola */
#fichaBajando .ficha-caja { padding: 22px 24px; }
/* Mientras la escena se descarga: ocupa el mismo alto que los botones, así
   que cuando aparecen no se mueve nada de sitio. */
.bajando {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; color: var(--tenue); font-size: 14px; font-weight: 700;
}
.bajando i {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2.5px solid var(--linea); border-top-color: var(--acento);
  animation: gira .7s linear infinite;
}
.puntaje { font-size: 30px; font-weight: 900; line-height: 1; }
.puntaje small { display: block; font-size: 11px; color: var(--tenue); font-weight: 600; }

/* -------------------------------------------------------- resultado */
.cargando { text-align: center; padding: 60px 20px; color: var(--tenue); }
.spinner {
  width: 34px; height: 34px; border: 3px solid var(--linea); border-top-color: var(--acento);
  border-radius: 50%; animation: gira .8s linear infinite; margin: 0 auto 14px;
}
/* `gira` ya está definido más arriba y es exactamente igual. Se quita la
   copia: dos animaciones con el mismo nombre no dan error, se pisan en
   silencio, y así fue como la hoja de ajustes acabó corriendo la animación de
   los números flotantes. */
#resVideo { width: 100%; border-radius: 16px; background: #000; display: block; margin-bottom: 14px; }

/* ------------------------------------------------------------- dubs */
.dub {
  display: flex; gap: 12px; align-items: center; padding: 10px; margin-bottom: 11px;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 16px; width: 100%;
  text-align: left;
}
.dub img { width: 92px; height: 58px; object-fit: cover; border-radius: 10px; background: #000; }
.dub .info { flex: 1; min-width: 0; }
.dub .peli { font-size: 10px; color: var(--tenue); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.dub .tit { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* `svg { display: block }` es lo que quiere un icono suelto, pero dentro
   de una línea de texto parte el renglón: la duración, la cámara y los
   días restantes salían en tres líneas en vez de una. */
.dub .info svg { display: inline-block; vertical-align: -2px; }

/* el aviso de que el montaje se cortó, con su botón al lado */
.dub-roto {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px;
}
.dub-roto span { color: var(--acento); font-size: 12px; font-weight: 700; }
.dub-roto .btn { padding: 5px 10px; font-size: 12px; }
.dub.montando .btn[data-otra] { padding: 7px 12px; font-size: 12.5px; }

/* ----------------------------------------------------------- perfil */
.avatar {
  width: 78px; height: 78px; border-radius: 50%; margin: 20px auto 8px;
  background: linear-gradient(100deg, var(--acento), var(--acento2));
  display: grid; place-items: center; font-size: 36px;
}
.nombre-perfil { text-align: center; font-size: 19px; font-weight: 800; margin: 0 0 22px; }
.etiqueta-campo {
  display: block; color: var(--tenue); font-size: 11px; letter-spacing: .12em;
  font-weight: 800; text-transform: uppercase; margin: 16px 0 8px;
}
.pie { text-align: center; color: var(--tenue); font-size: 11.5px; margin-top: 26px; }

/* ------------------------------------------------------- navegación */
.navbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 460px; display: none; z-index: 40;
  background: var(--tarjeta); border-top: 1px solid var(--linea);
  /* en los iPhone con barra de gestos, para que los botones no queden debajo */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.navbar.on { display: flex; }
.navbar button {
  flex: 1; padding: 9px 4px 11px; display: flex; flex-direction: column;
  align-items: center; gap: 3px; color: var(--tenue);
}
.navbar button span { font-size: 19px; line-height: 1; }
.navbar button i { font-style: normal; font-size: 11px; font-weight: 700; }
.navbar button.on { color: var(--acento); }

.toast {
  position: fixed; z-index: 100; left: 50%; bottom: calc(var(--nav) + 16px);
  transform: translate(-50%, 70px); background: var(--tarjeta2);
  border: 1px solid var(--linea); padding: 12px 18px; border-radius: 13px;
  font-size: 13.5px; font-weight: 600; opacity: 0; transition: .3s;
  pointer-events: none; max-width: 90%; text-align: center;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.vacio { text-align: center; color: var(--tenue); padding: 60px 20px; line-height: 1.6; }

/* firma de la marca en la pantalla de entrada */
.firma { margin-top: 26px; text-align: center; }
.firma small { display: block; color: var(--tenue); font-size: 11.5px; letter-spacing: .14em; margin-bottom: 7px; }
.firma img { height: 30px; opacity: .95; }
/* Vertical obligatorio. El navegador no deja forzar la rotación sin pantalla
   completa, así que en horizontal se tapa la app y se pide girar. */
#gira {
  position: fixed; inset: 0; z-index: 200; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--fondo); text-align: center; padding: 30px;
}
#gira .icono { font-size: 56px; animation: giraIcono 1.6s ease-in-out infinite; }
#gira p { color: var(--tenue); font-size: 15px; max-width: 280px; line-height: 1.5; }
@keyframes giraIcono { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-90deg); } }
@media (orientation: landscape) and (max-height: 560px) {
  #gira { display: flex; }
}
.frase-destacada {
  width: 100%; background: var(--tarjeta); border: 1px solid var(--acento);
  border-radius: 14px; padding: 15px 17px; font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; margin: 2px 0 6px;
}

/* ---- En un monitor, la columna de teléfono se queda en nada ----
   La app nace pensada para el móvil y esa proporción es la que manda en el
   teléfono. Pero en un navegador de escritorio esos 460 px son una tira
   angosta en medio de la pantalla, con todo el sitio desaprovechado a los
   lados. Aquí el marco se ensancha tres veces, hasta 1380 px.

   Lo que NO se estira es lo que se lee o lo que es vídeo vertical: una línea
   de texto de 1300 px cansa de leer, y un reel vertical estirado a lo ancho
   es un campo negro con un vídeo pequeño en medio. Esos se quedan a un ancho
   cómodo y centrados; lo que gana sitio son las listas y el editor.

   Va al FINAL del fichero a propósito. Estaba arriba y no funcionaba del
   todo: con la misma especificidad gana la última regla, así que cosas como
   el `max-width: 460px` de la barra de abajo lo pisaban y la barra se
   quedaba angosta en medio de un marco ancho. */
@media (min-width: 1000px) {
  .app { max-width: 1380px; }
  /* El texto y los formularios, a un ancho legible dentro del marco ancho.
     Con `margin: auto` NO servía: `.pantalla` es un flex en columna, y ahí
     los márgenes automáticos hacen que el hijo encoja hasta su contenido en
     vez de estirarse — Mis dubs se quedaba en 32 px. `align-self` centra sin
     tocar el tamaño, y el `width: 100%` es el que rellena hasta el tope. */
  .wrap, .centro { width: 100%; max-width: 780px; align-self: center; }
  /* lo que va fijo a la pantalla tiene que seguir al marco, no al monitor */
  .navbar { max-width: 1380px; }
  .sticky-ad { left: 50%; right: auto; width: 100%; max-width: 1380px;
               transform: translateX(-50%); }
  /* el reel manda por su altura, como en el teléfono: así no queda un
     rectángulo negro enorme alrededor de un vídeo vertical */
  .muro-item video { max-width: 520px; margin: 0 auto; }
  .muro-info, .muro-barra { left: 50%; transform: translateX(-50%);
                            width: 100%; max-width: 520px; }
  .muro-acciones { right: calc(50% - 260px); }
  .muro-doblar { left: 50%; transform: translateX(-50%); }
  /* el botón de silencio también va pegado al vídeo. Se me pasó al ensanchar:
     quedaba en la esquina del marco de 1380 px, a medio metro del reel y sin
     que se entendiera a qué pertenecía */
  .muro-sonido { right: calc(50% - 246px); }
  .muro-x2 { left: 50%; }

  /* "Mis dubs" y "Mis escenas" en rejilla: en una sola columna quedaba una
     tarjeta arriba y un desierto negro debajo. Con el ancho de escritorio
     caben dos por fila y la pantalla deja de verse vacía. */
  #p-dubs .wrap { max-width: 1100px; }
  #listaDubs, #listaMisEscenas {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 11px; align-items: start;
  }
  #listaDubs .dub, #listaMisEscenas .escena { margin-bottom: 0; }
  /* la nota de retención y los anuncios ocupan la fila entera */
  /* Lo que no es una tarjeta ocupa la fila entera. Sin esto, el mensaje de
     "todavía no tienes doblajes" se metía en la primera celda de 330 px:
     quedaba centrado DENTRO de su celda, o sea pegado a la izquierda de una
     pantalla de 1100. */
  #listaDubs .nota-retencion, #listaDubs .dub.montando,
  #listaDubs .vacio, #listaMisEscenas .vacio,
  #listaDubs > p, #listaMisEscenas > p { grid-column: 1 / -1; text-align: center; }
  /* La sala se queda ANGOSTA aunque el marco sea ancho.
     Lo que se está montando es un vídeo vertical: tu cara arriba y la escena
     abajo. Estirado a 1380 px la cámara sale como una franja aplastada y la
     escena con bandas negras a los lados — ni se graba bien ni se parece a lo
     que va a salir. A ancho de teléfono, lo que ves mientras doblas es lo
     mismo que verá quien lo mire. */
  #p-sala .sala { max-width: 460px; margin: 0 auto; width: 100%; }
  #p-sala .topbar, #p-resultado .wrap { max-width: 460px; margin: 0 auto; }

  /* los estados vacíos, centrados: en una columna ancha un texto pegado a la
     izquierda se lee como si algo se hubiera roto */
  #tabEscenas .lead, #listaMisEscenas, #tabDoblajes .vacio { text-align: center; }
  #tabEscenas > .btn.grande { max-width: 420px; margin-left: auto; margin-right: auto; display: block; }
  /* En un PC no hay dedo: el muro se puede arrastrar con el ratón, y la mano
     del cursor es lo que lo cuenta sin tener que explicarlo. `user-select`
     apagado porque si no, arrastrar selecciona el texto del reel. */
  .muro { cursor: grab; user-select: none; -webkit-user-select: none; }
  .muro:active { cursor: grabbing; }
}


/* La hoja de ajustes CABE SIEMPRE.
   `.ficha-caja` no tiene tope de alto: creció con las opciones de vídeo y en
   una pantalla de móvil —donde la barra del navegador se come cien y pico
   píxeles— llegaba al borde de arriba y se cortaba, sin forma de llegar a lo
   que quedaba fuera. Se le pone techo y se deja deslizar por dentro, que es lo
   que hace cualquier hoja de app. `dvh` es la altura de verdad en un móvil:
   `vh` cuenta la barra del navegador como si no estuviera. */
#ajustes .ficha-caja {
  max-height: 86vh;
  max-height: 86dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* la cabecera se queda a la vista aunque se deslice: es donde está cerrar */
#ajustes .ficha-cab {
  position: sticky; top: 0; z-index: 2;
  background: var(--tarjeta); padding-top: 2px;
}

/* ---- cómo se graba el vídeo (ajustes) ----
   Dos opciones que se leen enteras antes de elegir, no un interruptor: la
   diferencia entre las dos no se adivina por el nombre y equivocarse se paga
   con un vídeo de cuatro minutos que nadie ve. */
.grupo-ajuste { margin-bottom: 14px; }
.opcion-video {
  display: block; width: 100%; text-align: left; margin-bottom: 8px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--tarjeta); border: 1px solid var(--linea);
}
.opcion-video b { display: block; font-size: 15px; margin-bottom: 3px; }
.opcion-video small { display: block; color: var(--tenue); font-size: 12.5px; line-height: 1.35; }
.opcion-video em {
  display: none; margin-top: 6px; font-style: normal; font-size: 11px;
  font-weight: 800; letter-spacing: .06em; color: var(--acento2);
}
.opcion-video.on { border-color: var(--acento2); background: var(--tarjeta-2, var(--tarjeta)); }
/* Sin Pro la opción se ve, pero apagada y diciendo por qué. Esconderla haría
   que nadie supiera que existe, y es justo el motivo para pagar. */
.opcion-video.bloqueada { opacity: .55; }
.opcion-video.bloqueada em { display: block; }


/* ---- cuánto dura una escena, dicho antes de entrar ----
   Va pegada bajo el botón de doblar porque es parte de la misma decisión:
   "¿me meto en esto?". El color hace el trabajo de un vistazo; el texto está
   igualmente, que un color solo no es información para todo el mundo. */
.muro-tamano {
  z-index: 3; position: absolute; top: 56px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  background: rgba(12,9,7,.72); backdrop-filter: blur(8px);
  border: 1px solid var(--linea); color: var(--tenue);
}
.muro-tamano.corto    { color: #7bd88f; border-color: rgba(123,216,143,.4); }
.muro-tamano.mediano  { color: #f4bd48; border-color: rgba(244,189,72,.4); }
.muro-tamano.largo    { color: #f08a4b; border-color: rgba(240,138,75,.45); }
.muro-tamano.muylargo { color: #e5484d; border-color: rgba(229,72,77,.45); }


/* ---- escribir a soporte ---- */
#bAyuda { font-size: 17px; font-weight: 900; color: var(--tenue); }
#bAyuda:active { color: var(--acento2); }
#ayudaTexto {
  width: 100%; padding: 12px 14px; border-radius: 14px; resize: vertical;
  background: var(--bg-2, var(--tarjeta)); border: 1px solid var(--linea);
  color: var(--txt); font: inherit; font-size: 15px; line-height: 1.4;
  margin-bottom: 10px;
}
#ayudaTexto:focus { outline: none; border-color: var(--acento2); }


/* ---- editar los subtítulos de una escena ---- */
#fichaSubs .ficha-caja { max-height: 86vh; max-height: 86dvh; overflow-y: auto; }
#fichaSubs .ficha-cab { position: sticky; top: 0; z-index: 2;
  background: var(--tarjeta); padding-top: 2px; }
#subsLista { margin-bottom: 12px; }
.sub-linea { margin-bottom: 10px; }
.sub-linea .quien {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 3px;
}
.sub-linea textarea {
  width: 100%; padding: 9px 11px; border-radius: 11px; resize: vertical;
  background: var(--bg-2, var(--tarjeta)); border: 1px solid var(--linea);
  color: var(--txt); font: inherit; font-size: 14px; line-height: 1.35;
}
.sub-linea textarea:focus { outline: none; border-color: var(--acento2); }
/* la que ya no dice lo que decía: se ve de un vistazo cuál tocaste */
.sub-linea.cambiada textarea { border-color: var(--acento2); }
#bEditarTodo { margin-top: 6px; }


/* ---- elegir el trozo sin vista previa ---- */
.sel-manual { display: flex; gap: 10px; margin: 10px 0 4px; }
.sel-manual label { flex: 1; font-size: 12px; color: var(--tenue); }
.sel-manual input {
  width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 12px;
  background: var(--bg-2, var(--tarjeta)); border: 1px solid var(--linea);
  color: var(--txt); font: inherit; font-size: 16px;
  font-variant-numeric: tabular-nums; text-align: center;
}
.sel-manual input:focus { outline: none; border-color: var(--acento2); }
#selManualAviso { color: var(--acento); min-height: 16px; }