/* ===========================================================
   A+PRUEBA · páginas del registro
   autorizacion.html, pase.html y escaner.html. Usan tokens.css
   y los botones/campos de styles.css; esto es solo su marco.
   =========================================================== */

.pagina {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--navy-900);
  color: var(--navy-900);
  font-family: var(--fuente-texto);
  padding: 0 0 var(--e-40);
}

.pagina__barra {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px var(--e-16);
}
.pagina__barra img { width: 112px; height: auto; }

.pagina__tarjeta {
  width: calc(100% - 24px);
  max-width: 640px;
  margin: 0 auto;
  padding: var(--e-24);
  background: var(--blanco);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  display: flex;
  flex-direction: column;
  gap: var(--e-20);
}
@media (min-width: 600px) {
  .pagina__tarjeta { padding: var(--e-40); }
}

.pagina__titulo { font-family: var(--fuente-titulo); font-size: var(--t-h3); line-height: var(--lh-h3); }
.pagina__texto { color: var(--tinta-600); }
.pagina__aviso {
  padding: 14px var(--e-16);
  border-radius: var(--r-chip);
  background: var(--nube-50);
  color: var(--tinta-600);
  font-size: var(--t-small);
}
.pagina__aviso--error { background: #FDECEA; color: #8A1C12; }
.pagina__aviso--ok { background: var(--verde-100); color: var(--verde-600); font-weight: 700; }
.pagina__cargando { text-align: center; color: var(--tinta-600); padding: var(--e-24) 0; }

/* ---------- Carta de autorización ---------- */
.carta {
  padding: var(--e-20);
  border: 2px solid var(--linea);
  border-radius: var(--r-chip);
  font-size: var(--t-card);
  line-height: var(--lh-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.carta ol { padding-left: 1.2em; list-style: decimal; display: flex; flex-direction: column; gap: 8px; }
.carta__nota { font-size: var(--t-small); color: var(--tinta-400); }
.carta [data-dato] { font-weight: 800; }

.firma { display: flex; flex-direction: column; gap: 8px; }
.firma__lienzo {
  width: 100%;
  height: 180px;
  border: 2px dashed var(--tinta-400);
  border-radius: var(--r-chip);
  background: var(--nube-50);
  touch-action: none;
  cursor: crosshair;
}
.firma__lienzo[aria-invalid="true"] { border-color: #C0362C; }
.firma__pie { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-small); color: var(--tinta-600); }

.formulario { display: flex; flex-direction: column; gap: 18px; }
.formulario__fila { display: grid; gap: 18px; }
@media (min-width: 600px) {
  .formulario__fila { grid-template-columns: 1fr 1fr; }
}

/* ---------- Pase ---------- */
.pase { align-items: center; text-align: center; }
.pase__qr {
  width: min(280px, 100%);
  aspect-ratio: 1;
  padding: 12px;
  background: var(--blanco);
  border: 3px solid var(--navy-900);
  border-radius: 20px;
}
.pase__qr svg, .pase__qr img { width: 100%; height: 100%; display: block; }
.pase__codigo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.375rem; font-weight: 800; letter-spacing: .12em; }
.pase__datos { display: flex; flex-direction: column; gap: 6px; color: var(--tinta-600); font-size: var(--t-small); }
.pase__datos b { color: var(--navy-900); }

/* ---------- Escáner ---------- */
.escaner__video-caja {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-chip);
  overflow: hidden;
  background: #000;
}
.escaner__video-caja video { width: 100%; height: 100%; object-fit: cover; }
.escaner__marco {
  position: absolute;
  inset: 18%;
  border: 4px solid rgba(255, 255, 255, .85);
  border-radius: 18px;
  pointer-events: none;
}
.resultado {
  padding: var(--e-20);
  border-radius: var(--r-chip);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resultado__titulo { font-family: var(--fuente-titulo); font-size: 1.75rem; line-height: 1.15; }
.resultado--ok { background: var(--verde-100); color: var(--verde-600); }
.resultado--repetido { background: var(--naranja-100); color: var(--naranja-700); }
.resultado--error { background: #FDECEA; color: #8A1C12; }
.resultado__nombre { color: var(--navy-900); font-weight: 800; font-size: 1.125rem; }
.escaner__manual { display: flex; gap: 8px; }
.escaner__manual .campo__control { flex: 1; }
.escaner__contador { text-align: center; font-size: var(--t-small); color: var(--tinta-600); }

/* ---------- Subida de archivos (DNI, carta en papel) ---------- */
.subida {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--e-20);
  border: 2px dashed var(--tinta-400);
  border-radius: var(--r-chip);
  background: var(--nube-50);
  text-align: center;
  cursor: pointer;
}
.subida:focus-within { box-shadow: var(--sombra-foco); }
.subida input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.subida__vista { max-height: 180px; max-width: 100%; border-radius: 10px; object-fit: contain; }
.subida__texto { font-weight: 800; color: var(--azul-500); }
.subida:has(input[aria-invalid="true"]) { border-color: #C0362C; }
textarea.campo__control { min-height: 72px; resize: vertical; }
.carta ul { list-style: disc; display: flex; flex-direction: column; gap: 6px; }
.carta h1, .carta h2 { font-family: var(--fuente-titulo); }
.escaner__conexion { text-align: center; color: var(--tinta-600); }
.escaner__conexion--offline { color: var(--naranja-700); font-weight: 800; }
.resultado__extra { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.resultado__chip { padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--navy-900); font-size: var(--t-small); font-weight: 800; }
.resultado__chip--salud { background: #EDE3FB; color: #5B2C8F; }

/* ---------- Páginas legales (terminos.html y privacidad.html) ---------- */
.pagina__tarjeta--legal { max-width: 760px; gap: var(--e-16); }
.legal h2 { font-family: var(--fuente-titulo); font-size: var(--t-h4, 1.25rem); line-height: 1.3; margin: var(--e-16) 0 0; }
.legal p, .legal li { color: var(--tinta-600); line-height: 1.6; }
.legal ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: var(--azul-600); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal__fecha { font-size: var(--t-small); color: var(--tinta-600); }
.legal__volver { align-self: flex-start; }