/*
 * Validador público. Mobile-first, tipografía enorme, veredicto legible a
 * un metro y sin ambigüedad cromática: el color va SIEMPRE acompañado de
 * icono ✓ / ✗ para que funcione con daltonismo.
 * Cero JavaScript en esta página (CSP: script-src 'none').
 */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--afa-font);
  background: var(--afa-fons);
  color: var(--afa-text);
}

.v-pantalla {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--afa-espai-5);
  text-align: center;
}

.v-pantalla--valid   { background: var(--afa-verd-600); color: var(--afa-blanc); }
.v-pantalla--caducat { background: var(--afa-vermell-600); color: var(--afa-blanc); }
.v-pantalla--dolent  { background: var(--afa-gris-600); color: var(--afa-blanc); }

.v-icona {
  font-size: 5rem;
  line-height: 1;
  font-weight: var(--afa-pes-molt);
  margin-bottom: var(--afa-espai-3);
}

.v-veredicte {
  font-size: var(--afa-mida-xxl);
  font-weight: var(--afa-pes-molt);
  letter-spacing: .02em;
  margin: 0 0 var(--afa-espai-5);
  line-height: 1.1;
}

.v-fitxa {
  background: rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: var(--afa-radi-l);
  padding: var(--afa-espai-5);
  width: 100%;
  max-width: 26rem;
}

.v-titular {
  font-size: var(--afa-mida-xl);
  font-weight: var(--afa-pes-fort);
  margin: 0 0 var(--afa-espai-2);
}

.v-etiqueta {
  font-size: var(--afa-mida-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .85;
  margin: 0;
}

.v-dada {
  font-size: var(--afa-mida-l);
  font-weight: var(--afa-pes-fort);
  margin: 0 0 var(--afa-espai-4);
}

.v-dada:last-child { margin-bottom: 0; }

.v-missatge {
  font-size: var(--afa-mida-m);
  max-width: 26rem;
  margin: 0 0 var(--afa-espai-5);
  line-height: 1.5;
}

.v-peu {
  margin-top: var(--afa-espai-6);
  font-size: var(--afa-mida-s);
  opacity: .9;
}

.v-marca {
  margin-top: var(--afa-espai-4);
  font-size: var(--afa-mida-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .8;
}

/* Pantalla neutra: raíz del validador sin token */
.v-pantalla--inici { background: var(--afa-fons); color: var(--afa-text); }
.v-pantalla--inici .v-veredicte { font-size: var(--afa-mida-l); }

.v-logo {
  border-radius: var(--afa-radi-m);
  margin-bottom: var(--afa-espai-3);
  box-shadow: var(--afa-ombra-1);
}