/* Qué dices — el móvil en la mesa, uno enfrente del otro.
   Todo se lee de lejos y con poca luz: texto grande, mucho contraste. */

:root {
  --fondo:        #0B0E14;
  --fondo-lado:   #121722;
  --texto:        #FFFFFF;
  --apagado:      #8A94A6;
  --yo:           #FFC24B;   /* español  */
  --ellos:        #5FD3F3;   /* english  */
  --borde:        #232A38;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { user-select: none; }

/* ---------- Pantalla de arranque ----------
   Cuenta en tres segundos y medio lo que hace la app: uno dice «Hola»,
   la palabra cruza, el otro lee «Hello». Se cierra sola o tocando. */

#splash {
  position: fixed; inset: 0; z-index: 50;
  background: var(--fondo);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  transition: opacity .6s ease;
  padding: 1.5rem;
}
#splash.fuera { opacity: 0; pointer-events: none; }

#splash svg { width: 280px; height: 162px; max-width: 82vw; margin-bottom: .4rem; }

/* El bocadillo de quien habla, y el del que escucha un poco después. */
#splash .sp-b1     { opacity: 0; animation: spEntra .55s ease .15s forwards; }
#splash .sp-camino { opacity: 0; animation: spEntra .5s ease .75s forwards; }
#splash .sp-b2     { opacity: 0; animation: spEntra .55s ease 1.75s forwards; }

/* La palabra cruzando de una boca a la otra. */
#splash .sp-punto  { opacity: 0; animation: spCruza .95s cubic-bezier(.5,0,.3,1) .9s forwards; }

#splash .t1 {
  font-size: clamp(1.9rem, 8vw, 2.3rem); font-weight: 700; color: var(--texto);
  opacity: 0; animation: spSube .7s ease .6s forwards;
}
#splash .t1 b { color: var(--yo); }

/* Esta frase explica para qué sirve la app: tiene que leerse de lejos y
   por encima de la firma de abajo, no empatada con ella. */
#splash .t2 {
  font-size: clamp(1.15rem, 5vw, 1.3rem); font-weight: 600; color: var(--apagado);
  margin-top: .9rem; line-height: 1.5; max-width: 24rem;
  opacity: 0; animation: spSube .7s ease 1.2s forwards;
}
#splash .t2 b { color: var(--ellos); }

#splash .t3 {
  font-size: .875rem; font-weight: 700; letter-spacing: .1em;
  margin-top: 2rem; color: #7D8798;
  opacity: 0; animation: spSube .8s ease 1.9s forwards;
}

@keyframes spSube  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes spEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spCruza {
  0%   { opacity: 0; transform: translate(62px, 92px)  scale(.4); }
  15%  { opacity: 1; transform: translate(76px, 104px) scale(1); }
  55%  {              transform: translate(124px, 118px) scale(1); }
  85%  { opacity: 1; transform: translate(178px, 105px) scale(1); }
  100% { opacity: 0; transform: translate(188px, 100px) scale(.4); }
}

/* Quien pide menos movimiento, lo ve quieto pero lo ve. */
@media (prefers-reduced-motion: reduce) {
  #splash .sp-b1, #splash .sp-b2, #splash .sp-camino, #splash .sp-punto,
  #splash .t1, #splash .t2, #splash .t3 {
    animation-duration: .01s !important;
    animation-delay: 0s !important;
  }
}

/* ---------- Estructura ---------- */

.pantalla {
  height: 100dvh;
  display: grid;
  /* La columna se ciñe a la pantalla. Sin esto crece hasta lo que pida el
     contenido más ancho (un aviso largo en la barra, una palabra kilométrica)
     y se lleva fuera de la vista lo que haya a la derecha. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr;
}

.lado {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;      /* lo nuevo, pegado a quien lee */
  overflow: hidden;
  background: var(--fondo-lado);
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: background .2s ease;
}

/* La mitad de arriba se gira: quien está enfrente la lee del derecho.
   Al girarla, su "abajo" cae en el borde de arriba de la pantalla,
   así que cada uno tiene lo más reciente junto a sí mismo. */
.lado--ellos {
  transform: rotate(180deg);
  padding-bottom: max(1rem, env(safe-area-inset-top));
}
.lado--yo {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Todo lo de dentro deja pasar el toque: se toca la mitad entera. */
.conversacion { pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; flex: 1; }

/* Invitación de la primera vez, centrada. Desaparece en cuanto se habla. */
.pista {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(1.35rem, 5.5vw, 2rem);
  font-weight: 600;
  line-height: 1.35;
  color: #9AA4B5;          /* 7.8:1 — es la primera cosa que hay que leer */
}
.pantalla.enmarcha .pista { display: none; }

/* ---------- Texto ---------- */

.historial {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .5rem;
  overflow: hidden;
  min-height: 0;
}

.historial li {
  font-size: clamp(1.05rem, 4vw, 1.5rem);
  line-height: 1.3;
  color: var(--apagado);
}
.historial li:last-child { color: #C7CEDA; }

.vivo {
  font-size: clamp(1.9rem, 7.5vw, 3.2rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: .6rem;
  min-height: 1.2em;
  word-break: break-word;
}

.lado--yo    .vivo { color: var(--yo); }
.lado--ellos .vivo { color: var(--ellos); }

/* Vacía no ocupa: en reposo reservaba su altura para nada y empujaba la
   invitación fuera de la mitad, por debajo de la barra. */
.vivo:empty { min-height: 0; margin-top: 0; }

/* ---------- Pie de cada mitad ---------- */

.pie {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
}

.estado {
  font-size: .8rem;          /* mismo escalón que la barra: es un rótulo, no contenido */
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--apagado);
}
.lado--yo.escuchando    .estado { color: var(--yo); }
.lado--ellos.escuchando .estado { color: var(--ellos); }

.altavoz {
  pointer-events: auto;
  background: transparent;
  border: 2px solid var(--borde);
  border-radius: 999px;
  color: var(--texto);
  font-size: 1.35rem;      /* mismo escalón que .pista: los iconos no inventan tamaño propio */
  line-height: 1;
  padding: .55rem .8rem;   /* así el botón pasa de 44 px: se toca con el dedo, en la mesa */
  cursor: pointer;
}
.altavoz:disabled { opacity: .3; cursor: default; }

/* Mientras uno habla, su mitad se enciende. */
.lado.escuchando { background: #182130; }
.lado--yo.escuchando    { box-shadow: inset 0 0 0 3px var(--yo); }
.lado--ellos.escuchando { box-shadow: inset 0 0 0 3px var(--ellos); }

/* La mitad de quien escucha NO se atenúa: es justo donde está leyendo
   su traducción en ese momento. El marco de color ya dice quién habla. */

/* ---------- Barra central ---------- */

/* Tres mandos arriba —idioma, grupo, borrar— y el aviso del motor debajo.
   En 375 px las cuatro cosas en una línea no caben sin dejar el aviso en
   dos letras, y ese aviso es el que dice por qué no se traduce. */
.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .55rem 1rem;
  background: var(--fondo);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

/* El idioma de enfrente: lo tiene que poder cambiar cualquiera de los dos. */
.idioma {
  background: #1B2231;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: .5rem;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  padding: .7rem .75rem;   /* para que el desplegable se toque con el dedo */
  cursor: pointer;
}
/* El grupo, justo en medio entre el idioma y la ✕. */
.gs-boton {
  position: relative;
  overflow: hidden;      /* recorta el destello a la forma del botón */
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: .5rem;
  color: var(--apagado);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  padding: .7rem .75rem;   /* la misma altura que el selector de al lado */
  cursor: pointer;
}
/* El texto en su propia capa, por delante de la luz: así el destello se ve
   entero y «Saneas» se sigue leyendo mientras pasa. */
.gs-txt { position: relative; z-index: 1; }
.gs-boton b { color: var(--texto); font-weight: 700; }
.gs-boton:hover { background: #1B2231; }

/* Un punto de luz que cruza el botón de derecha a izquierda, se va, y vuelve
   a los pocos segundos. La franja va inclinada para que parezca un reflejo
   y no una cortina. */
.gs-boton::after {
  content: '';
  position: absolute;
  inset: -2px -40%;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, .10) 46%,
    rgba(255, 255, 255, .62) 50%,
    rgba(255, 255, 255, .10) 54%,
    transparent 62%);
  transform: translateX(120%);
  animation: gsDestello 12s ease-in-out .8s infinite;
}

/* El barrido dura lo mismo que antes, cerca de un segundo; lo que se alarga
   es la espera entre uno y otro. Esta app se usa en mitad de una
   conversación: llama la atención, pero sin dar la lata. */
@keyframes gsDestello {
  0%   { transform: translateX(120%); }
  8.5% { transform: translateX(-120%); }
  100% { transform: translateX(-120%); }   /* y espera once segundos */
}

/* Un brillo que no para es justo lo que molesta a quien pide menos
   movimiento: ahí no se mueve. */
@media (prefers-reduced-motion: reduce) {
  .gs-boton::after { animation: none; opacity: 0; }
}

/* El aviso, en su propia línea: así se lee entero aunque sea largo. */
.motor {
  flex-basis: 100%; order: 5;
  font-size: .8rem; line-height: 1.3; color: var(--apagado); text-align: center;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.limpiar {
  background: transparent; border: 0; color: #7D8798;
  font-size: 1.35rem; padding: .5rem .7rem; cursor: pointer;
}

/* ---------- Aviso ---------- */

.aviso {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: rgba(11,14,20,.94);
  padding: 1.5rem;
}
/* Sin esto, el display:grid de arriba se come el hidden y el aviso tapa la app. */
.aviso[hidden] { display: none; }
.aviso__caja {
  max-width: 32rem; text-align: center;
  font-size: 1.35rem; line-height: 1.5;   /* escalón de la invitación */
}
.aviso__caja button {
  margin-top: 1.5rem;
  background: var(--yo); color: #0B0E14;
  border: 0; border-radius: 999px;
  font-size: 1.05rem; font-weight: 700;   /* escalón del texto normal */
  padding: .8rem 2rem; cursor: pointer;
}

/* ---------- Practicar el idioma ----------
   La otra mitad de la app: cuando no hay prisa, en vez de traducir por ti,
   te enseña. Solo en reposo, como el pie del grupo. */

.practicar {
  align-self: center;
  margin: 1.2rem 0 .3rem;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--apagado);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: .7rem 1.1rem;
  cursor: pointer;
}
.practicar b { color: var(--yo); font-weight: 700; }
.practicar:hover { background: #1B2231; }
.pantalla.enmarcha .practicar { display: none; }

/* El panel de practicar: ocupa la pantalla entera, porque aquí no se
   traduce a dos, se lee uno solo. */
.practica {
  position: fixed; inset: 0; z-index: 20;
  display: block;                      /* con grid, la pista crecía con el contenido
                                          y la caja se salía 44 px por la derecha */
  background: var(--fondo);
}
.practica[hidden] { display: none; }

.practica__caja {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  min-width: 0; min-height: 0;         /* que el cuerpo pueda encogerse y rodar */
  padding: env(safe-area-inset-top) 0 0;
}

.practica__cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--borde);
}
.practica__cab h2 { font-size: 1.35rem; font-weight: 700; }
.practica__cab h2 b { color: var(--yo); }
.practica__x {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  background: transparent;
  border: 1px solid var(--borde); border-radius: 999px;
  color: var(--texto); font-size: 1.05rem;
  cursor: pointer;
}

.practica__cuerpo {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 1.1rem 1.1rem calc(1.6rem + env(safe-area-inset-bottom));
}

.practica__pregunta {
  font-size: 1.35rem; font-weight: 600; line-height: 1.35;
  margin-bottom: .9rem;
}

/* Las seis de siempre, de un toque. Escribir es la salida, no la puerta. */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.1rem; }
.chips button {
  background: var(--fondo-lado);
  border: 1px solid var(--borde); border-radius: 999px;
  color: var(--texto);
  font-family: inherit; font-size: 1.05rem; font-weight: 600;
  padding: .7rem 1rem; cursor: pointer;
}
.chips button:hover { background: #1B2231; }

.practica__form { display: flex; gap: .5rem; align-items: stretch; }
.practica__form input {
  flex: 1; min-width: 0;
  background: var(--fondo-lado);
  border: 1px solid var(--borde); border-radius: .8rem;
  color: var(--texto);
  font-family: inherit; font-size: 1.05rem;
  padding: .8rem .9rem;
}
.practica__form input::placeholder { color: var(--apagado); }
.practica__form button[type="submit"] {
  flex: none;
  background: var(--yo); color: #0B0E14;
  border: 0; border-radius: .8rem;
  font-family: inherit; font-size: 1.05rem; font-weight: 700;
  padding: .8rem 1.1rem; cursor: pointer;
}
.practica__mic {
  flex: none;
  width: 3rem;
  background: var(--fondo-lado);
  border: 1px solid var(--borde); border-radius: .8rem;
  font-size: 1.05rem; cursor: pointer;
}
.practica__mic.escuchando { border-color: var(--ellos); background: #16303A; }

/* La ficha: palabras y frases, cada una con su altavoz. */
.ficha { margin-top: 1.4rem; }
.ficha[hidden] { display: none; }
.ficha h3 {
  font-size: 1.05rem; font-weight: 700; color: var(--apagado);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 1.4rem 0 .7rem;
}
.ficha h3:first-child { margin-top: 0; }
/* La misma lista sirve para la ficha y para la corrección: se estila por
   su clase, no por dónde cuelga, que si no la corrección salía con viñeta
   y con el altavoz encogido debajo. */
.pares { list-style: none; }
.pares li {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--borde);
}
.pares li:last-child { border-bottom: 0; }
.pares .par { flex: 1; min-width: 0; }
.pares .otro { display: block; font-size: 1.35rem; color: var(--ellos); line-height: 1.3; }
.pares .es   { display: block; font-size: 1.05rem; color: var(--apagado); line-height: 1.4; margin-top: .15rem; }
.pares .di {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  background: transparent;
  border: 1px solid var(--borde); border-radius: 999px;
  color: var(--texto); font-size: 1.05rem; cursor: pointer;
}
.correccion .pares li { padding-top: 0; }
.ficha .consejo {
  margin-top: 1.4rem;
  background: var(--fondo-lado);
  border: 1px solid var(--borde); border-left: 3px solid var(--yo);
  border-radius: .8rem;
  padding: 1rem;
  font-size: 1.05rem; line-height: 1.55; color: #C7CEDA;
}
.ficha .otra {
  margin-top: 1.4rem; width: 100%;
  background: transparent;
  border: 1px solid var(--borde); border-radius: 999px;
  color: var(--apagado);
  font-family: inherit; font-size: 1.05rem; font-weight: 600;
  padding: .8rem 1.1rem; cursor: pointer;
}

#pasoCorregir { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--borde); }
#pasoCorregir[hidden] { display: none; }

.correccion {
  margin-top: 1.1rem;
  background: var(--fondo-lado);
  border: 1px solid var(--borde); border-radius: .8rem;
  padding: 1rem;
}
.correccion[hidden] { display: none; }
.correccion .veredicto { font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem; }
.correccion.bien   .veredicto { color: #6FD08C; }
.correccion.arregla .veredicto { color: var(--yo); }
.correccion .porque { font-size: 1.05rem; line-height: 1.55; color: #C7CEDA; margin-top: .8rem; }

.practica__espera, .practica__fallo {
  margin-top: 1.4rem;
  font-size: 1.05rem; line-height: 1.5; text-align: center;
}
.practica__espera { color: var(--apagado); }
.practica__fallo  { color: var(--yo); }
.practica__espera[hidden], .practica__fallo[hidden] { display: none; }