/* Estilos de la interfaz. Sin valores fijos: todo sale de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-interfaz);
  font-size: var(--tam-texto);
  line-height: var(--interlineado);
}

button, input { font: inherit; color: inherit; }
a { color: var(--color-acento); }

.app { min-height: 100vh; display: flex; flex-direction: column; }
.oculto { display: none !important; }

/* ---- barra superior ---- */
.barra {
  display: flex; align-items: center; gap: var(--esp-4);
  padding: var(--esp-3) var(--esp-5);
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
}
.barra__marca { font-weight: var(--peso-medio); text-decoration: none; color: var(--color-texto); }
.barra__migas { color: var(--color-texto-suave); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__migas a { color: var(--color-texto-suave); text-decoration: none; }
.barra__migas a:hover { color: var(--color-acento); }
.barra__usuaria { color: var(--color-texto-suave); font-size: var(--tam-pequeno); }

.contenido { width: 100%; max-width: var(--ancho-pagina); margin: 0 auto; padding: var(--esp-5); flex: 1; }

/* ---- botones ---- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--color-borde); border-radius: var(--radio-pequeno);
  background: var(--color-superficie); cursor: pointer;
}
.boton:hover { border-color: var(--color-acento); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.45; cursor: default; pointer-events: none; }
.boton--principal { background: var(--color-acento); color: var(--color-acento-texto); border-color: var(--color-acento); }
.boton--discreto { border-color: transparent; background: transparent; color: var(--color-texto-suave); }
.boton--redondo { width: 44px; height: 44px; padding: 0; border-radius: 50%; }

/* ---- acceso ---- */
.acceso { max-width: 360px; margin: 12vh auto 0; padding: var(--esp-6);
  background: var(--color-superficie); border-radius: var(--radio); box-shadow: var(--sombra); }
.acceso h1 { font-size: var(--tam-titulo); margin: 0 0 var(--esp-5); }
.campo { display: flex; flex-direction: column; gap: var(--esp-1); margin-bottom: var(--esp-4); }
.campo label { font-size: var(--tam-pequeno); color: var(--color-texto-suave); }
.campo input { padding: var(--esp-2) var(--esp-3); border: 1px solid var(--color-borde); border-radius: var(--radio-pequeno); }
.campo input:focus { outline: 2px solid var(--color-acento-suave); border-color: var(--color-acento); }
.error { color: var(--color-error); font-size: var(--tam-pequeno); min-height: 1.2em; }

/* ---- listas (inicio y recorrido) ---- */
.titulo-pagina { font-size: var(--tam-titulo-grande); margin: var(--esp-2) 0 var(--esp-5); font-weight: var(--peso-medio); }
.tarjetas { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tarjeta {
  display: block; padding: var(--esp-5); text-decoration: none; color: inherit;
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.tarjeta:hover { border-color: var(--color-acento); }
.tarjeta__titulo { font-size: var(--tam-titulo); font-weight: var(--peso-medio); margin-bottom: var(--esp-2); }
.tarjeta__dato { color: var(--color-texto-suave); font-size: var(--tam-pequeno); }

.lista-etapes { list-style: none; margin: 0; padding: 0;
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); }
.lista-etapes li + li { border-top: 1px solid var(--color-borde); }
.lista-etapes a { display: grid; grid-template-columns: 3rem 1fr auto auto; gap: var(--esp-4);
  align-items: center; padding: var(--esp-3) var(--esp-4); text-decoration: none; color: inherit; }
.lista-etapes a:hover { background: var(--color-superficie-2); }
.lista-etapes__num { font-family: var(--fuente-mono); color: var(--color-texto-suave); }
.lista-etapes__meta { color: var(--color-texto-suave); font-size: var(--tam-pequeno); }
.etiqueta { display: inline-block; padding: 0 var(--esp-2); border-radius: var(--radio-pequeno);
  font-size: var(--tam-pequeno); background: var(--color-superficie-2); border: 1px solid var(--color-borde); }
.etiqueta--revisar { color: var(--color-aviso-revisar); border-color: currentColor; }

/* ---- pantalla de étape ---- */
.etape__cabecera { display: flex; align-items: baseline; gap: var(--esp-4); flex-wrap: wrap; margin-bottom: var(--esp-4); }
.etape__titulo { font-size: var(--tam-titulo-grande); font-weight: var(--peso-medio); margin: 0; }
.etape__sub { color: var(--color-texto-suave); }
.etape__nav { margin-left: auto; display: flex; gap: var(--esp-2); }

.reproductor {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-3) var(--esp-4); align-items: center;
  padding: var(--esp-4); margin-bottom: var(--esp-5);
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.reproductor__tiempo { font-family: var(--fuente-mono); font-size: var(--tam-pequeno); color: var(--color-texto-suave); }
/* El canvas va en posición absoluta dentro de un marco de alto fijo: así su
   tamaño interno (en píxeles de dispositivo) no puede empujar la maquetación. */
.reproductor__onda { grid-column: 1 / -1; position: relative; height: var(--alto-onda); min-width: 0; }
.reproductor__onda canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; cursor: pointer; touch-action: none; }
.reproductor__controles { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.reproductor__opciones { display: flex; align-items: center; gap: var(--esp-4); justify-self: end;
  font-size: var(--tam-pequeno); color: var(--color-texto-suave); }
.reproductor__opciones label { display: inline-flex; gap: var(--esp-1); align-items: center; cursor: pointer; }

.etape__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) var(--ancho-lateral); gap: var(--esp-6); }

.lectura {
  max-width: var(--ancho-lectura);
  font-family: var(--fuente-lectura); font-size: var(--tam-lectura); line-height: var(--interlineado-lectura);
}
.lectura p { margin: 0 0 var(--esp-4); }
.palabra { border-radius: var(--radio-pequeno); cursor: pointer; transition: background-color 80ms linear; }
.palabra:hover { background: var(--color-palabra-hover); }
.palabra--activa, .palabra--activa:hover { background: var(--color-palabra-activa); }
.palabra--aviso-revisar { text-decoration: underline wavy var(--color-aviso-revisar); text-underline-offset: 4px; }
.palabra--aviso-nombre { text-decoration: underline dotted var(--color-aviso-nombre); text-underline-offset: 4px; }
.pausa {
  display: inline-block; vertical-align: middle; width: 1.1em; height: 0.18em; margin: 0 0.25em;
  border-radius: 1em; background: var(--color-pausa);
}

.lateral h2 { font-size: var(--tam-texto); font-weight: var(--peso-medio); margin: 0 0 var(--esp-3); }
.lateral__bloque { margin-bottom: var(--esp-5); }
.avisos { list-style: none; margin: 0; padding: 0; }
.aviso { display: block; width: 100%; text-align: left; padding: var(--esp-2) var(--esp-3);
  margin-bottom: var(--esp-2); border: 1px solid var(--color-borde); border-left-width: 4px;
  border-radius: var(--radio-pequeno); background: var(--color-superficie); cursor: pointer; }
.aviso:hover { background: var(--color-superficie-2); }
.aviso--revisar { border-left-color: var(--color-aviso-revisar); }
.aviso--nombre { border-left-color: var(--color-aviso-nombre); }
.aviso__tiempo { font-family: var(--fuente-mono); font-size: var(--tam-pequeno); color: var(--color-texto-suave); }
.aviso__texto { display: block; }
.nota { color: var(--color-texto-suave); font-size: var(--tam-pequeno); }

.cargando { color: var(--color-texto-suave); padding: var(--esp-6) 0; }

/* ---- botones adicionales ---- */
.boton--pequeno { padding: var(--esp-1) var(--esp-3); font-size: var(--tam-pequeno); }
.boton--ancho { width: 100%; }
.boton[aria-pressed="true"] { background: var(--color-acento-suave); border-color: var(--color-acento); }
.boton--veredicto { flex: 1; }
.boton--aprobada[aria-pressed="true"] { background: var(--color-aprobada); border-color: var(--color-aprobada); color: var(--color-acento-texto); }
.boton--cambios[aria-pressed="true"] { background: var(--color-cambios); border-color: var(--color-cambios); color: var(--color-acento-texto); }
.boton--rehacer[aria-pressed="true"] { background: var(--color-rehacer); border-color: var(--color-rehacer); color: var(--color-acento-texto); }
.boton--flotante { position: absolute; z-index: 1; box-shadow: var(--sombra); font-family: var(--fuente-interfaz); }
.grupo-botones { display: flex; gap: var(--esp-2); margin-bottom: var(--esp-3); }

/* ---- campos ---- */
.caja-texto, .selector {
  width: 100%; padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--color-borde); border-radius: var(--radio-pequeno);
  background: var(--color-superficie); font-family: var(--fuente-interfaz); font-size: var(--tam-texto);
  resize: vertical;
}
.caja-texto:focus, .selector:focus { outline: 2px solid var(--color-acento-suave); border-color: var(--color-acento); }
.selector { width: auto; flex: 1; }

/* ---- formulario de anotación ---- */
.formulario { display: flex; flex-direction: column; gap: var(--esp-2); margin: var(--esp-3) 0;
  padding: var(--esp-3); border: 1px solid var(--color-comentario); border-radius: var(--radio);
  background: var(--color-superficie); }
.formulario__ancla { font-size: var(--tam-pequeno); color: var(--color-comentario); font-weight: var(--peso-medio); }
.formulario__fila { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.formulario__acciones { display: flex; gap: var(--esp-2); }
.opcion { display: inline-flex; gap: var(--esp-1); align-items: center; font-size: var(--tam-pequeno); cursor: pointer; }

/* ---- lista de anotaciones ---- */
.anotaciones { list-style: none; margin: var(--esp-3) 0 0; padding: 0; }
.anotacion { padding: var(--esp-2) var(--esp-3); margin-bottom: var(--esp-2); cursor: pointer;
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-left: 4px solid var(--color-comentario); border-radius: var(--radio-pequeno); }
.anotacion:hover { background: var(--color-superficie-2); }
.anotacion:focus-visible { background: var(--color-superficie-2); outline: 2px solid var(--color-acento); outline-offset: 1px; }
.anotacion--activa { box-shadow: 0 0 0 2px var(--color-comentario-suave); }
.anotacion--resuelto, .anotacion--descartado { border-left-color: var(--color-estado-cerrado); opacity: 0.75; }
.anotacion__cabecera { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; font-size: var(--tam-pequeno); }
.anotacion__tiempo { font-family: var(--fuente-mono); color: var(--color-texto-suave); }
.anotacion__autora { margin-left: auto; color: var(--color-texto-suave); }
.anotacion__texto { margin: var(--esp-1) 0; white-space: pre-wrap; }
.anotacion__frase { font-family: var(--fuente-lectura); color: var(--color-texto-suave); font-size: var(--tam-pequeno); }
.anotacion__resolucion { font-size: var(--tam-pequeno); margin-top: var(--esp-1); }
.anotacion__acciones { display: flex; gap: var(--esp-1); margin-top: var(--esp-2); flex-wrap: wrap; align-items: center; }
.contador { color: var(--color-texto-suave); font-weight: var(--peso-normal); }

.etiqueta--bloquea { color: var(--color-rehacer); border-color: currentColor; }
.etiqueta--mejorable { color: var(--color-cambios); border-color: currentColor; }
.etiqueta--detalle { color: var(--color-texto-suave); }
.etiqueta--anotaciones { color: var(--color-comentario); border-color: currentColor; }
.etiqueta--veredicto.etiqueta--aprobada { color: var(--color-aprobada); border-color: currentColor; }
.etiqueta--veredicto.etiqueta--cambios { color: var(--color-cambios); border-color: currentColor; }
.etiqueta--veredicto.etiqueta--rehacer { color: var(--color-rehacer); border-color: currentColor; }

/* ---- texto: palabras anotadas y botón flotante ---- */
.lectura { position: relative; }
.palabra--anotada { box-shadow: inset 0 -2px 0 var(--color-comentario); }

/* ---- avisos con opinión ---- */
.aviso { cursor: default; padding: 0; overflow: hidden; }
.aviso__salto { display: block; width: 100%; text-align: left; padding: var(--esp-2) var(--esp-3);
  border: 0; background: transparent; cursor: pointer; }
.aviso__salto:hover { background: var(--color-superficie-2); }
.aviso__opiniones { display: flex; gap: var(--esp-1); padding: 0 var(--esp-3) var(--esp-2); }
.aviso--opinado-bien { opacity: 0.7; }

.otros-veredictos { list-style: none; padding: 0; margin: var(--esp-2) 0 0; font-size: var(--tam-pequeno); }
.reproductor__ab { font-size: var(--tam-pequeno); color: var(--color-cambios); font-weight: var(--peso-medio); }
.tarjeta__estado { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap;
  margin-top: var(--esp-3); font-size: var(--tam-pequeno); color: var(--color-texto-suave); }
.lista-etapes__estado { display: inline-flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.exportar { font-size: var(--tam-pequeno); }

@media (max-width: 900px) {
  .etape__cuerpo { grid-template-columns: 1fr; }
  .contenido { padding: var(--esp-4); }
  .reproductor { grid-template-columns: 1fr; }
  .reproductor__opciones { justify-self: start; }
}

/* --- producción: cabeceras, barra, tablas ------------------------------------- */
.cabecera-pagina { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; justify-content: space-between; }
.cabecera-pagina .titulo-pagina { margin-bottom: var(--esp-3); }
.barra__enlace { color: var(--color-texto-suave); text-decoration: none; font-size: var(--tam-pequeno); }
.barra__enlace:hover { color: var(--color-acento); }
.tabla { width: 100%; border-collapse: collapse; margin: var(--esp-3) 0 var(--esp-4); font-size: var(--tam-pequeno);
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); }
.tabla th, .tabla td { padding: var(--esp-2) var(--esp-3); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--color-borde); }
.tabla th { color: var(--color-texto-suave); font-weight: var(--peso-medio); }
.tabla .caja-texto { min-width: 10rem; }
.mono { font-family: var(--fuente-mono); }
.ok { color: var(--color-aprobada); }
.error--bloque { padding: var(--esp-3) var(--esp-4); border: 1px solid currentColor; border-radius: var(--radio);
  background: var(--color-superficie); font-size: var(--tam-texto); }
.caja-texto--corta { width: auto; max-width: 14rem; }
.campo--linea { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--esp-3); }
.etiqueta--trabajo { color: var(--color-acento); border-color: currentColor; text-decoration: none; }

/* lista de étapes con enlace de descarga */
.lista-etapes li { display: flex; align-items: stretch; }
.lista-etapes li > a:first-child { flex: 1; min-width: 0; }
.lista-etapes .lista-etapes__descarga { display: flex; align-items: center; padding: 0 var(--esp-4); text-decoration: none;
  color: var(--color-texto-suave); border-left: 1px solid var(--color-borde); }
.lista-etapes .lista-etapes__descarga:hover { color: var(--color-acento); background: var(--color-superficie-2); }

/* bandas de aviso en la pantalla de recorrido */
.aviso-banda { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; padding: var(--esp-3) var(--esp-4);
  margin: 0 0 var(--esp-4); border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); }
.aviso-banda--corregir { border-color: var(--color-comentario); }
.enviar-corregir { display: inline-flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.lateral__enviar { margin-top: var(--esp-3); }

/* progreso de un trabajo */
.progreso { margin: var(--esp-4) 0; padding: var(--esp-4); background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-radius: var(--radio); }
.progreso__cabecera { display: flex; align-items: center; gap: var(--esp-3); justify-content: space-between; }
.progreso__estado { margin: 0; font-weight: var(--peso-medio); }
.progreso__estado--hecho { color: var(--color-aprobada); }
.progreso__estado--error { color: var(--color-error); }
.progreso__registro { list-style: none; margin: var(--esp-3) 0 0; padding: 0; max-height: 22rem; overflow-y: auto;
  font-family: var(--fuente-mono); font-size: var(--tam-pequeno); color: var(--color-texto-suave); }
.progreso__evento { padding: 2px 0; white-space: pre-wrap; }
.progreso__evento--paso { color: var(--color-texto); font-weight: var(--peso-medio); margin-top: var(--esp-2); }
.progreso__evento--etape { color: var(--color-texto); }
.progreso__evento--aviso { color: var(--color-aviso-revisar); }
.progreso__evento--fin { color: var(--color-aprobada); }

/* propuesta de corrección */
.plan { margin: var(--esp-4) 0; }
.plan h2 { font-size: var(--tam-titulo); font-weight: var(--peso-medio); }
.plan__lista { list-style: none; margin: var(--esp-3) 0; padding: 0; }
.plan__op { padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-2); background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-left: 3px solid var(--color-comentario); border-radius: var(--radio-pequeno); }
.plan__op--no_aplicable, .plan__op--omitida { border-left-color: var(--color-estado-cerrado); opacity: 0.85; }
.plan__cabecera { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.plan__coste { margin-left: auto; font-family: var(--fuente-mono); font-size: var(--tam-pequeno); color: var(--color-texto-suave); }
.plan__explicacion { margin: var(--esp-2) 0 0; }
.plan__detalle { margin: var(--esp-1) 0 0; font-family: var(--fuente-lectura); font-size: var(--tam-pequeno);
  color: var(--color-texto-suave); }
.plan__pie { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; margin-top: var(--esp-4); }
.plan__lista--resultado .plan__op { padding: var(--esp-2) var(--esp-3); }

/* anotaciones atendidas por esta versión */
.aplicadas { margin: 0 0 var(--esp-5); padding: var(--esp-4); background: var(--color-superficie);
  border: 1px solid var(--color-comentario); border-radius: var(--radio); }
.aplicadas h2 { font-size: var(--tam-texto); font-weight: var(--peso-medio); margin: 0 0 var(--esp-2); }
.aplicadas__lista { list-style: none; margin: var(--esp-3) 0 0; padding: 0; }
.aplicadas__lista li { padding: var(--esp-2) 0; border-top: 1px solid var(--color-borde); display: flex; flex-wrap: wrap;
  gap: var(--esp-2); align-items: center; }
.aplicadas__acciones { margin-left: auto; display: inline-flex; gap: var(--esp-2); }

/* ajustes y recorrido nuevo */
.ajustes__bloque, .nuevo__paso { margin-bottom: var(--esp-6); padding: var(--esp-5); background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-radius: var(--radio); }
.ajustes__bloque h2, .nuevo__paso h2 { font-size: var(--tam-titulo); font-weight: var(--peso-medio); margin: 0 0 var(--esp-3); }
.ajustes__bloque h3, .nuevo__paso h3 { font-size: var(--tam-texto); font-weight: var(--peso-medio); margin: var(--esp-5) 0 var(--esp-2); }
.ajustes__clave { margin: var(--esp-4) 0; }
.ajustes__clave .caja-texto { max-width: 26rem; }
.ajustes__deslizador { display: grid; grid-template-columns: 14rem minmax(8rem, 20rem) 3rem; gap: var(--esp-3);
  align-items: center; margin: var(--esp-2) 0; font-size: var(--tam-pequeno); }
.ajustes__valor { font-family: var(--fuente-mono); }
.ajustes__cuentas { list-style: none; padding: 0; margin: var(--esp-3) 0; font-size: var(--tam-pequeno); }
.ajustes__cuentas li { padding: var(--esp-1) 0; }
.ajustes__prueba p { margin: var(--esp-1) 0; font-size: var(--tam-pequeno); }
.nuevo__contexto { font-family: var(--fuente-lectura); color: var(--color-texto-suave); max-width: 28rem; }
.nuevo__coste { font-weight: var(--peso-medio); margin: var(--esp-4) 0; }
.nuevo__paso .campo input[type="file"] { padding: var(--esp-2) 0; border: 0; }

@media (max-width: 720px) {
  .ajustes__deslizador { grid-template-columns: 1fr 3rem; }
  .ajustes__deslizador > span { grid-column: 1 / -1; }
  .tabla { display: block; overflow-x: auto; }
}

/* contraseña con botón para verla */
.contrasena { display: flex; align-items: stretch; gap: var(--esp-1); }
.contrasena input { flex: 1; min-width: 0; }
.boton--ver { flex: none; font-size: var(--tam-pequeno); }