/*
 * Audion — estudio.css
 * Transcripción, modo estudio y estadísticas.
 */

/* --- Transcripción ---------------------------------------------------------- */

.transcripcion {
  margin-top: var(--espacio-6);
  text-align: left;
}

.transcripcion[hidden] {
  display: none;
}

.transcripcion-busqueda {
  display: flex;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-3);
}

.transcripcion-busqueda input {
  flex: 1;
  min-height: 44px;
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--color-fondo-elevado);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
}

.transcripcion-resultados {
  list-style: none;
  margin: 0 0 var(--espacio-4);
  padding: var(--espacio-3);
  background: var(--color-fondo-elevado);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  max-height: 240px;
  overflow-y: auto;
}

.transcripcion-resultados li {
  display: flex;
  gap: var(--espacio-2);
  align-items: baseline;
  padding: var(--espacio-2) 0;
  border-bottom: 1px solid var(--color-borde);
  font-size: 0.9rem;
}

.transcripcion-resultados li:last-child {
  border-bottom: none;
}

.transcripcion-texto {
  max-height: 420px;
  overflow-y: auto;
  padding: var(--espacio-3);
  background: var(--color-fondo-elevado);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  /* La selección de texto es la forma de crear citas: hay que permitirla. */
  user-select: text;
}

.transcripcion-segmento {
  display: flex;
  gap: var(--espacio-3);
  align-items: baseline;
  margin: 0;
  padding: var(--espacio-2);
  border-radius: var(--radio-sm);
  line-height: 1.6;
}

.transcripcion-segmento.segmento-actual {
  background: color-mix(in srgb, var(--color-acento) 12%, transparent);
}

.transcripcion-tiempo {
  flex-shrink: 0;
  min-width: 56px;
  min-height: 32px;
  padding: 0 var(--espacio-2);
  border: none;
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--color-acento);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
}

.transcripcion-tiempo:hover {
  background: var(--color-fondo-hover);
}

.transcripcion-cita {
  margin-top: var(--espacio-3);
  padding: var(--espacio-3);
  background: var(--color-fondo-elevado);
  border: 1px solid var(--color-acento);
  border-radius: var(--radio-md);
}

.transcripcion-cita[hidden] {
  display: none;
}

.transcripcion-cita blockquote {
  margin: 0 0 var(--espacio-3);
  padding-left: var(--espacio-3);
  border-left: 3px solid var(--color-acento);
  font-style: italic;
}

/* --- Modo estudio ------------------------------------------------------------- */

.sesion-estudio {
  max-width: 560px;
  margin: var(--espacio-5) auto 0;
}

.tarjeta-estudio {
  padding: var(--espacio-5);
  background: var(--color-fondo-elevado);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-elevada);
}

.tarjeta-estudio[hidden] {
  display: none;
}

.tarjeta-origen {
  font-size: 0.85rem;
  color: var(--color-texto-tenue);
  margin-bottom: var(--espacio-3);
}

.tarjeta-frente {
  font-size: 1.1rem;
  line-height: 1.6;
}

.tarjeta-dorso {
  margin-top: var(--espacio-4);
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--color-borde);
  color: var(--color-texto-tenue);
}

.tarjeta-dorso[hidden] {
  display: none;
}

.tarjeta-calidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--espacio-2);
  margin-top: var(--espacio-5);
}

.tarjeta-calidades[hidden] {
  display: none;
}

.boton-mostrar-dorso {
  width: 100%;
  margin-top: var(--espacio-4);
}

/* --- Mapa de calor de escucha --------------------------------------------------- */

/* Scroll propio: en un teléfono no entran 53 semanas de ancho. */
.mapa-calor-envoltorio {
  overflow-x: auto;
  padding-bottom: var(--espacio-2);
}

.mapa-calor {
  display: flex;
  gap: 3px;
  min-width: max-content;
}

.mapa-calor-semana {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mapa-calor-dia {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--color-fondo-elevado);
  border: 1px solid var(--color-borde);
}

.mapa-calor-dia.nivel-1 { background: color-mix(in srgb, var(--color-acento) 25%, var(--color-fondo)); }
.mapa-calor-dia.nivel-2 { background: color-mix(in srgb, var(--color-acento) 50%, var(--color-fondo)); }
.mapa-calor-dia.nivel-3 { background: color-mix(in srgb, var(--color-acento) 75%, var(--color-fondo)); }
.mapa-calor-dia.nivel-4 { background: var(--color-acento); }

/* Los días que todavía no llegaron no se pintan. */
.mapa-calor-dia.nivel-futuro {
  background: transparent;
  border-color: transparent;
}