/* portal.css — la pantalla del cliente, pensada para un móvil a pleno sol.
   Sin tipografías ni iconos de terceros: en la v1 la pantalla de firma carga
   fontawesome, googleapis y unpkg, lo que filtra el identificador de sesión por
   la cabecera de referencia y añade un punto de fallo justo en el peor momento. */

:root {
  --morado: #6852d8;
  --morado-osc: #4b37b0;
  --tinta: #1a1723;
  --tinta-2: #55506a;
  --papel: #ffffff;
  --fondo: #f4f2f8;
  --linea: #e0dcea;
  --error: #b3261e;
  --error-fondo: #fbeceb;
  --ok: #2e6b4f;
  --ok-fondo: #e9f4ee;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.cab {
  background: var(--morado);
  color: #fff;
  padding: 1.1rem 1.25rem;
  text-align: center;
}
.logo { font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; }

.app { flex: 1; padding: 1.25rem; display: flex; align-items: flex-start; justify-content: center; }

.tarjeta {
  background: var(--papel);
  border-radius: 14px;
  padding: 1.5rem 1.35rem 1.6rem;
  width: 100%;
  max-width: 30rem;
  box-shadow: 0 1px 3px rgba(26, 23, 35, .08), 0 8px 24px rgba(26, 23, 35, .06);
}
.tarjeta h1 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 .5rem; }
.tarjeta p { margin: 0 0 1.1rem; color: var(--tinta-2); }
.tarjeta.error h1 { color: var(--error); }

/* Botón grande: se pulsa con el pulgar, a veces con prisa y con guantes. */
.btn {
  display: block;
  width: 100%;
  background: var(--morado);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.btn:active { background: var(--morado-osc); }
.btn:disabled { opacity: .6; }
.btn.ocupado { background: var(--tinta-2); }
.btn:focus-visible, .btn-plano:focus-visible, .codigo:focus-visible {
  outline: 3px solid var(--morado-osc);
  outline-offset: 2px;
}

.btn-plano {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  color: var(--morado-osc);
  padding: .9rem;
  margin-top: .5rem;
  font-size: .97rem;
  cursor: pointer;
  text-decoration: underline;
}

/* El input de fichero va dentro del label y no se ve: el botón ES el label. */
.ficha { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* Segunda vía para el documento: misma forma que .btn (lleva su position:relative,
   que necesita el input invisible), pero en blanco para que mande «Hacer la foto». */
.btn-sec { background: var(--papel); color: var(--morado-osc); border: 2px solid var(--morado); margin-top: .65rem; }
.btn-sec:active { background: var(--fondo); }
.btn-sec.ocupado { background: var(--tinta-2); color: #fff; border-color: var(--tinta-2); }
.tarjeta p.ayuda { font-size: .88rem; margin: 1rem 0 0; }

.codigo {
  display: block;
  width: 100%;
  font-size: 2rem;
  letter-spacing: .5em;
  text-align: center;
  padding: .7rem .5rem;
  margin-bottom: 1rem;
  border: 2px solid var(--linea);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}

.progreso { font-size: .9rem; color: var(--tinta-2); margin-bottom: .9rem; }

.previo {
  display: block;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 1rem;
  border: 1px solid var(--linea);
}

.caja-firma {
  height: 220px;
  border: 2px dashed var(--linea);
  border-radius: 12px;
  margin-bottom: 1rem;
  background: #fff;
  touch-action: none;   /* sin esto el móvil hace scroll mientras se firma */
}
.lienzo { width: 100%; height: 100%; display: block; }

.acciones { display: flex; flex-direction: column-reverse; gap: .2rem; }

.aviso {
  margin: 1rem 0 0;
  padding: .8rem .9rem;
  border-radius: 9px;
  font-size: .95rem;
  background: var(--error-fondo);
  color: var(--error);
}
.aviso.ok { background: var(--ok-fondo); color: var(--ok); }

.cargando { text-align: center; color: var(--tinta-2); }
.ok-grande { font-size: 3.5rem; text-align: center; color: var(--ok); margin: .5rem 0; line-height: 1; }
.tenue { text-align: center; font-size: .9rem; color: var(--tinta-2); }

.pie { padding: 1.25rem; text-align: center; }
.pie p { margin: 0; font-size: .82rem; color: var(--tinta-2); max-width: 30rem; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}