/*
 * 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);
}

/*
 * S'APILA DES DE DALT, no centrat.
 *
 * Era `center`, i amb la banda de la marca a sobre allò deixava dos forats:
 * un entre la banda i el tick, i un altre abans de «Validat a les». David els
 * va veure els dos —*«hay todavía considerable espacio, recórtalo más»*— i té
 * raó de lectura: qui mira això és un comerç de reüll, i el veredicte ha
 * d'estar a dalt, sota la marca, no al mig de la pantalla.
 *
 * El buit va a baix, i allà no molesta: és silenci, no un forat.
 */
.v-pantalla {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  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);
  /* Just el que separa la marca del veredicte, i ni un pèl més. */
  margin: var(--afa-espai-5) 0 var(--afa-espai-2);
}

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

.v-fitxa {
  background: var(--afa-realc-clar);
  border: 2px solid var(--afa-vora-clara);
  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; }

/*
 * SENSE MARGE A BAIX, i el buit abans del peu el posa NOMÉS `.v-peu`.
 *
 * En un flex els marges NO es fonen: se sumen. Amb `espai-5` aquí i un altre
 * `espai-5` al peu sortien 48px mesurats, i a la pantalla verda —que porta la
 * caixa de dades en comptes del missatge— en sortien 24. El mateix forat
 * mesurava dues coses diferents segons l'estat.
 *
 * El missatge i la caixa de dades no surten mai junts: la verda duu titular i
 * la grisa duu missatge. Així que amb el marge en un sol lloc, els tres
 * estats tenen exactament la mateixa separació.
 */
.v-missatge {
  font-size: var(--afa-mida-m);
  max-width: 26rem;
  margin: 0;
  line-height: 1.5;
}

.v-peu {
  /* Era `espai-6`. Segueix el bloc de dades, no es despenja d'ell. */
  margin-top: var(--afa-espai-5);
  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); }

/*
 * AQUÍ LA TARGETA CREMA ES QUEDA, i no és un oblit.
 *
 * Aquesta icona surt també sobre les pantalles de veredicte, que són VERDA,
 * VERMELLA i GRISA. Allà el crema es retalla perfectament, i el dibuix sol
 * —muntanyes negres i «AFA» taronja— seria il·legible sobre verd. El problema
 * de l'entrada del carnet era un altre: allà el fons ÉS crema.
 *
 * El que sí marxa és el que sobrava: una `box-shadow` que dibuixava un
 * rectangle fosc darrere d'una icona arrodonida, i un `border-radius` damunt
 * d'un PNG que ja porta les cantonades transparents.
 */
/*
 * ── LA BANDA DE LA MARCA ────────────────────────────────────────────────
 *
 * Va pegada al borde de arriba y cruza de lado a lado. Dos motivos y
 * ninguno es decorativo.
 *
 * El primero, que el banner de la PWA lleva TINTA OSCURA y las tres
 * pantallas de veredicto son color sólido: sobre el verde o el rojo no se
 * leería. En blanco sí, y además conserva el taronja de la muntanya, que es
 * la parte que se reconoce de lejos.
 *
 * El segundo, que parte la pantalla en dos —arriba quién eres, abajo el
 * veredicto— y eso le da al ojo un sitio donde caer. Antes era un bloque de
 * color plano con todo flotando en el centro.
 *
 * `margin` negativo del mismo valor que el relleno de `.v-pantalla`: la banda
 * tiene que llegar a los caires, y el relleno de la pantalla es lo que la
 * separaría de ellos.
 */
.v-marca-banda {
  align-self: stretch;
  /*
   * Marge negatiu a dalt i als costats perquè la banda arribi als caires —el
   * farciment de `.v-pantalla` és el que la separaria—, i ZERO a baix.
   *
   * Aquí hi va haver un `auto` i va ser un error meu de dues passades: primer
   * s'empassava tot l'espai lliure i empenyia el veredicte al terç de baix;
   * després el vaig repartir amb un altre `auto` al peu, i encara quedaven
   * dos forats. El que calia no era repartir el buit: era no fer-ne.
   */
  margin: calc(var(--afa-espai-5) * -1) calc(var(--afa-espai-5) * -1) 0;
  padding: var(--afa-espai-4) var(--afa-espai-4) calc(var(--afa-espai-4) + 2px);
  background: var(--afa-blanc);
  display: flex;
  justify-content: center;
}

/*
 * ── Y GRANDE, QUE ERA LA PETICIÓN ───────────────────────────────────────
 *
 * *«el tamaño del logo debe ser medianamente grande, para verlo bien a la
 * primera»*. El banner mide 768 × 176 —una tira de 4,36:1— así que el ancho
 * es lo que manda: con `min()` ocupa todo el que haya hasta un tope, y en un
 * teléfono de 375 eso son 295px, unos 68 de alto.
 *
 * El tope existe porque esto también se abre en una tableta o en el portátil
 * de la oficina, y un banner de 700px de ancho deja de ser una marca y pasa
 * a ser un cartel.
 */
.v-logo {
  width: min(100%, 22rem);
  height: auto;
  display: block;
}

/*
 * En la pantalla de entrada el fondo ya es claro: el banner va directo, sin
 * banda, y algo mayor porque ahí no compite con ningún veredicto — es lo
 * único que hay que mirar mientras se apunta con la cámara.
 */
.v-logo--inici {
  width: min(100%, 26rem);
  margin-bottom: var(--afa-espai-4);
}