/* ============================================================================
   Las pantallas de la pestaña: traer, trabajando, fallo, falta el ayudante.

   EL AIRE SALE DEL CONTENEDOR, NO DE LOS MÁRGENES.

   Antes la separación entre bloques la ponía una regla de "hermano de al lado"
   (`.bloque + .bloque`). Eso funciona hasta que alguien mete un elemento nuevo
   en el medio, o hasta que dos cosas quedan juntas sin ser hermanas — y ahí no
   hay separación y nadie entiende por qué. Pasó en dos lugares, y uno era el
   botón "Cancelar" pegado al riel de carga: justo la pantalla que mirás mientras
   esperás. Ahora el aire lo pone `gap`, que no se puede olvidar.
   ========================================================================= */

.hoja {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: var(--e6) var(--e5) var(--e7);
}

/* Cada vista es una columna con su aire. Nada de márgenes sueltos. */
.vista {
  display: flex;
  flex-direction: column;
  gap: var(--e6);
}

/* El título y su bajada son UNA cosa: van juntos y respiran aparte del resto. */
.vista__cabeza {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

/* Las pantallas que son una sola columna de texto y un botón no tienen por qué
   estirarse a 980 px: leer un renglón de esa medida cansa. Sólo el editor usa
   todo el ancho, porque el editor lo necesita. */
.vista--angosta {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.titulo {
  font-size: var(--t-portada);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.bajada {
  color: var(--texto-2);
  font-size: var(--t-cuerpo);
}

.bloque { display: flex; flex-direction: column; }
.bloque--fila { flex-direction: row; flex-wrap: wrap; gap: var(--e3); }

/* ---------------------------------------------------------------- calidad --- */

.calidades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e3);
}

.calidad {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding: var(--e4);
  text-align: left;
  cursor: pointer;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-panel);
  color: var(--texto-2);
  font-family: var(--tipo);
  transition: border-color var(--rapido), background var(--rapido),
              color var(--rapido), transform var(--rapido);
}
.calidad:hover { border-color: var(--borde-fuerte); background: var(--superficie-alta); }
.calidad:active { transform: translateY(1px); }
.calidad[aria-pressed="true"] {
  border-color: var(--acento);
  background: var(--acento-suave);
  color: var(--texto);
}
.calidad__nombre { font-size: var(--t-cuerpo); font-weight: 600; }
.calidad__dato   { font-family: var(--tipo-num); font-size: var(--t-dato); color: var(--texto-3); }
.calidad[aria-pressed="true"] .calidad__dato { color: var(--acento); }
.calidad__nota   { font-size: var(--t-pie); color: var(--texto-3); line-height: 1.35; }

/* ----------------------------------------------------- arrastrar un audio -- */

/* Va apagado a propósito: lo primero es pegar el link. Esto es la otra puerta,
   la de cuando el audio ya lo tenés, y no tiene que competir con la principal. */
.soltar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e5);
  border: 1px dashed var(--borde-suave);
  border-radius: var(--radio-panel);
  text-align: center;
  transition: border-color var(--normal), background var(--normal);
}
.soltar__texto { font-size: var(--t-dato); color: var(--texto-3); }
.soltar__texto b { color: var(--texto-2); font-weight: 600; }

/* Mientras tenés el archivo agarrado encima. Sin esto no se sabe si el
   navegador te lo va a aceptar o te lo va a abrir en otra pestaña. */
.soltar[data-encima="si"] {
  border-color: var(--acento);
  border-style: solid;
  background: var(--acento-suave);
}
.soltar[data-encima="si"] .soltar__texto b { color: var(--acento); }

.separador {
  height: 1px;
  background: var(--borde-suave);
  border: none;
}

/* ============================================================================
   EL RIEL DE CARGA

   Estaba roto, y era lo que Lucio veía "buguearse". Tres defectos encima:

   1. Se reiniciaba TRES veces en una sola descarga. El ayudante manda cuatro
      etapas —preguntar, traer, grabar el MP3, pasártelo— y dos de ellas van de
      0 a 100 sobre el MISMO riel. O sea: llegaba al final y volvía a empezar.
   2. Al pasar de "no sé cuánto falta" a "voy por el 4 %", la barra se ACHICABA
      de 35 % a 0 % durante 220 milésimas. Iba para atrás, a la vista.
   3. Lo que paseaba cuando no se sabía cuánto falta era la barra misma, así que
      su ancho quedaba pisado y había que acordarse de borrarlo.

   Arreglado en tres partes:

   - El riel es UNO SOLO y va de 0 a 100 en toda la descarga. Cada etapa tiene
     su pedazo: traer el audio ocupa del 0 al 70, pasártelo del 70 al 100.
   - Lo que pasea cuando no se sabe cuánto falta es un REFLEJO aparte, encima.
     La barra se queda quieta donde está y nunca vuelve para atrás.
   - Del lado del código, además, la barra no puede achicarse nunca: si un aviso
     llega desordenado, se ignora.
   ========================================================================= */

.avance { display: flex; flex-direction: column; gap: var(--e3); }
.avance__linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
  font-size: var(--t-dato);
  color: var(--texto-2);
}
.avance__num {
  font-family: var(--tipo-num);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.avance__riel {
  position: relative;
  height: 6px;
  background: var(--superficie-alta);
  border-radius: var(--radio-pastilla);
  overflow: hidden;
}
.avance__barra {
  height: 100%;
  width: 0%;
  background: var(--acento);
  border-radius: var(--radio-pastilla);
  transition: width var(--normal);
}

/* El reflejo: sólo aparece mientras no se sabe cuánto falta. Entra por la
   izquierda y sale por la derecha, sin tocar la barra. */
.avance__riel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 34%;
  border-radius: var(--radio-pastilla);
  background: linear-gradient(90deg,
              transparent,
              color-mix(in srgb, var(--acento) 70%, transparent),
              transparent);
  opacity: 0;
  transform: translateX(-110%);
  pointer-events: none;
  transition: opacity var(--rapido);
}
.avance[data-sabe="no"] .avance__riel::after {
  opacity: 1;
  animation: pasear 1.5s var(--curva) infinite;
}
@keyframes pasear {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(400%); }
}

/* -------------------------------------------------------------- privacidad -- */

.privacidad {
  display: flex;
  align-items: center;
  gap: var(--e2);
  max-width: 680px;
  margin: var(--e6) auto 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borde-suave);
  font-size: var(--t-dato);
  color: var(--texto-3);
}