/*
 * PWA del carnet — hoja de estilo. Consume los tokens compartidos de
 * /shared/css/tokens.css; aquí no se define ni un color suelto.
 * Mobile-first: la pantalla del carnet se enseña a un comerciante con el
 * móvil en la mano, así que el QR manda y todo lo demás cede espacio.
 */
* { box-sizing: border-box; }

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

/* Respeta el notch y la barra inferior en iOS */
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.vista { display: none; }
.vista--activa { display: block; }

/* ── Aviso de conectividad ───────────────────────────────────────────── */
.avis {
  background: var(--afa-vermell-600);
  color: var(--afa-blanc);
  padding: var(--afa-espai-3) var(--afa-espai-4);
  text-align: center;
  font-weight: var(--afa-pes-fort);
  font-size: var(--afa-mida-s);
}

/* ── Entrada ─────────────────────────────────────────────────────────── */
.login {
  max-width: 24rem;
  margin: 0 auto;
  padding: var(--afa-espai-7) var(--afa-espai-5);
  text-align: center;
}

.login__logo { border-radius: var(--afa-radi-m); box-shadow: var(--afa-ombra-1); }

.login__marca {
  font-size: var(--afa-mida-l);
  font-weight: var(--afa-pes-molt);
  margin: var(--afa-espai-4) 0 var(--afa-espai-1);
  color: var(--afa-primari);
}

.login__titol {
  font-size: var(--afa-mida-m);
  font-weight: var(--afa-pes-normal);
  color: var(--afa-text-suau);
  margin: 0 0 var(--afa-espai-6);
}

.login__form { text-align: left; }

.camp { display: block; margin-bottom: var(--afa-espai-4); }

.camp__etiqueta {
  display: block;
  font-size: var(--afa-mida-xs);
  font-weight: var(--afa-pes-fort);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--afa-text-suau);
  margin-bottom: var(--afa-espai-2);
}

.camp__input {
  width: 100%;
  min-height: var(--afa-tap-min);
  padding: var(--afa-espai-3);
  font-family: inherit;
  font-size: var(--afa-mida-m);
  color: var(--afa-text);
  background: var(--afa-blanc);
  border: 2px solid var(--afa-vora);
  border-radius: var(--afa-radi-s);
}

.camp__input:focus-visible {
  outline: 3px solid var(--afa-accent);
  outline-offset: 1px;
  border-color: var(--afa-primari);
}

.boto {
  font-family: inherit;
  font-size: var(--afa-mida-m);
  font-weight: var(--afa-pes-fort);
  min-height: var(--afa-tap-min);
  padding: var(--afa-espai-3) var(--afa-espai-5);
  border: 0;
  border-radius: var(--afa-radi-s);
  cursor: pointer;
}

.boto:focus-visible { outline: 3px solid var(--afa-accent); outline-offset: 2px; }
.boto[disabled] { opacity: .6; cursor: default; }

.boto--primari {
  display: block;
  width: 100%;
  background: var(--afa-primari);
  color: var(--afa-primari-text);
  margin-top: var(--afa-espai-5);
}

.boto--text {
  background: none;
  color: var(--afa-primari);
  text-decoration: underline;
  padding: var(--afa-espai-2);
}

.error {
  background: var(--afa-vermell-050);
  color: var(--afa-vermell-600);
  border-left: 4px solid var(--afa-vermell-600);
  padding: var(--afa-espai-3);
  border-radius: var(--afa-radi-s);
  font-size: var(--afa-mida-s);
  font-weight: var(--afa-pes-fort);
  margin: var(--afa-espai-4) 0 0;
}

/* ── Cabecera de la app ──────────────────────────────────────────────── */
.capcalera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--afa-espai-3);
  padding: var(--afa-espai-3) var(--afa-espai-4);
  background: var(--afa-primari);
  color: var(--afa-primari-text);
}

/* En 375 px de ancho la cabecera va justa: la marca cede espacio antes que
   los botones, que son los que hay que poder tocar. */
.capcalera__marca {
  font-weight: var(--afa-pes-molt);
  font-size: var(--afa-mida-xs);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.capcalera .boto--text { color: var(--afa-primari-text); }

/* ── Carnet ──────────────────────────────────────────────────────────── */
.carnet {
  max-width: 26rem;
  margin: 0 auto;
  padding: var(--afa-espai-5);
  text-align: center;
}

.carnet__instruccions {
  font-size: var(--afa-mida-s);
  color: var(--afa-text-suau);
  margin: 0 0 var(--afa-espai-4);
}

/*
 * El marco es el semáforo: verde vigente, rojo caducado. Nunca comunica
 * solo con color — el texto VÀLID / CADUCAT va siempre debajo.
 */
.carnet__marc {
  background: var(--afa-blanc);
  border: 10px solid var(--afa-gris-300);
  border-radius: var(--afa-radi-l);
  padding: var(--afa-espai-4);
  box-shadow: var(--afa-ombra-2);
  transition: border-color .2s ease;
}

.carnet__marc--valid   { border-color: var(--afa-verd-600); }
.carnet__marc--caducat { border-color: var(--afa-vermell-600); }

.carnet__qr {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El QR se dibuja en canvas: negro sobre blanco, sin filtros ni sombras que
   puedan estropear la lectura de la cámara del comercio. `pixelated` evita
   que el escalado del navegador difumine el borde de los módulos. */
.carnet__qr canvas {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}

.carnet__carregant { color: var(--afa-text-suau); font-size: var(--afa-mida-s); }

.carnet__estat {
  font-size: var(--afa-mida-xl);
  font-weight: var(--afa-pes-molt);
  letter-spacing: .04em;
  margin: var(--afa-espai-5) 0 var(--afa-espai-2);
}

.carnet__estat--valid   { color: var(--afa-verd-600); }
.carnet__estat--caducat { color: var(--afa-vermell-600); }

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

.carnet__venciment {
  font-size: var(--afa-mida-s);
  color: var(--afa-text-suau);
  margin: 0;
}


/* ── Acciones de la cabecera ─────────────────────────────────────────── */
.capcalera__accions {
  display: flex;
  align-items: center;
  gap: var(--afa-espai-2);
  flex: 0 0 auto;
}
.capcalera__accions .boto--text {
  color: var(--afa-primari-text);
  font-size: var(--afa-mida-xs);
  white-space: nowrap;
  padding: var(--afa-espai-2) var(--afa-espai-1);
}

/* ── Guía de instalación ─────────────────────────────────────────────── */
.carnet__instalar { margin-top: var(--afa-espai-6); }

.capa {
  position: fixed;
  inset: 0;
  background: rgba(16, 36, 58, .6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--afa-espai-4);
  z-index: 10;
}

.capa[hidden] { display: none; }

.capa__caixa {
  background: var(--afa-blanc);
  border-radius: var(--afa-radi-l);
  padding: var(--afa-espai-5);
  width: 100%;
  max-width: 26rem;
  box-shadow: var(--afa-ombra-2);
  /* Con el teclado o en pantallas cortas, el diálogo hace scroll él mismo. */
  max-height: 85vh;
  overflow-y: auto;
}

.capa__titol {
  font-size: var(--afa-mida-l);
  font-weight: var(--afa-pes-molt);
  margin: 0 0 var(--afa-espai-2);
}

.capa__intro {
  color: var(--afa-text-suau);
  font-size: var(--afa-mida-s);
  margin: 0 0 var(--afa-espai-4);
}

.capa__passos {
  margin: 0 0 var(--afa-espai-4);
  padding-left: var(--afa-espai-5);
  line-height: 1.6;
}

.capa__passos li { margin-bottom: var(--afa-espai-3); }

.capa__avis {
  background: var(--afa-crema);
  border-left: 4px solid var(--afa-accent);
  padding: var(--afa-espai-3);
  border-radius: var(--afa-radi-s);
  font-size: var(--afa-mida-s);
  margin: 0 0 var(--afa-espai-4);
}

@media (min-width: 40rem) {
  .capa { align-items: center; }
}