/* =====================================================================
   ANTI.EXAMEN5 · Piezas compartidas por las pantallas de trabajo
   (alumno y docente). Aqui el mundo aguayo baja la voz: el color queda
   para la cabecera, el telar y los estados. Lo que manda es leer bien.
   ===================================================================== */

.marca {
  display: inline-flex; align-items: baseline; flex: none;
  font-stretch: 125%; font-size: 1.02rem; letter-spacing: -.02em; line-height: 1;
  text-decoration: none; color: var(--texto);
}
.marca-anti { font-weight: 360; }
.marca-punto { font-weight: 900; color: var(--maiz); }
.marca-examen { font-weight: 840; }

.barra-app { position: sticky; top: 0; z-index: 40; background: var(--urdimbre); box-shadow: 0 1px 0 var(--hebra); }
.barra-app-in {
  display: flex; align-items: center; gap: var(--e5);
  min-height: 60px; padding-inline: var(--margen);
}

.principal { min-height: calc(100dvh - 66px); }
.vista { padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem); }
.vista-centro { display: grid; place-items: start center; }
.contenedor-app { width: min(100% - 2 * var(--margen), 1100px); margin-inline: auto; }

/* Hoja: el formulario centrado, como un acta en la mesa. */
.hoja {
  position: relative;
  width: min(100% - 2 * var(--margen), 480px);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--urdimbre-2);
  box-shadow: var(--sombra-1), inset 0 0 0 1px var(--hebra);
}
.hoja::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--orillo); background-size: 98px 6px; }
.hoja h1 { margin-bottom: var(--e3); }
.hoja-bajada { margin-bottom: var(--e6); }
.hoja form .boton.bloque { margin-top: var(--e6); }
.error-form { margin-top: var(--e5); padding: var(--e3) var(--e4); background: var(--grave-fondo); }

.cargando-vista { display: flex; gap: var(--e3); align-items: center; justify-content: center; padding: var(--e9) 0; color: var(--texto-3); }
.cargando-vista[hidden] { display: none; }

.vacio {
  display: grid; justify-items: start; gap: var(--e4);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  background: var(--urdimbre-2); box-shadow: inset 0 0 0 1px var(--hebra);
}
.vacio p { color: var(--texto-2); max-width: 52ch; }

.banda-red {
  position: sticky; top: 60px; z-index: 39;
  display: flex; gap: var(--e3); align-items: center; justify-content: center;
  padding: var(--e3) var(--margen);
  background: var(--leve); color: #241204; font-weight: 600; font-size: .92rem; text-align: center;
}
.banda-red[hidden] { display: none; }