/*
 * 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__oblidada {
  margin: var(--afa-esp-m) 0 0;
  text-align: center;
  font-size: var(--afa-mida-s);
}
.login__oblidada a { color: var(--afa-muted); }

.login__ajuda {
  color: var(--afa-muted);
  font-size: var(--afa-mida-s);
  margin: 0 0 var(--afa-esp-m);
  text-align: center;
}

.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);
}

/* ── Notas y avisos ──────────────────────────────────────────────────────
   Sin franja lateral: marca circular con el mismo lenguaje de símbolos que el
   validador (✓ / ✗ / !) y fondo teñido. El símbolo va en un pseudoelemento
   para no tener que tocar el HTML ni el JavaScript que escribe estos textos. */
.nota {
  display: flex;
  align-items: flex-start;
  gap: var(--afa-espai-3);
  padding: var(--afa-espai-3) var(--afa-espai-4);
  border-radius: var(--afa-radi-m);
  font-size: var(--afa-mida-s);
  line-height: 1.5;
  text-align: left;
}

.nota::before {
  content: '!';
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--afa-mida-s);
  font-weight: var(--afa-pes-molt);
  line-height: 1;
}

.nota--error {
  background: var(--afa-vermell-050);
  color: var(--afa-vermell-600);
  font-weight: var(--afa-pes-fort);
}
.nota--error::before {
  content: '✕';
  background: var(--afa-vermell-600);
  color: var(--afa-blanc);
}

/*
 * `.nota--ok` se retiró en la limpieza del 7 de septiembre por estar sin usar,
 * y volvió al día siguiente con la pantalla de contraseña nueva. No fue un
 * error retirarla —entonces no la usaba nadie— pero deja la lección: en un
 * proyecto vivo, "código muerto" a veces solo significa "todavía no".
 */
.nota--ok { background: var(--afa-verd-050); color: var(--afa-text); }
.nota--ok::before {
  content: '\2713';
  background: var(--afa-verd-600);
  color: var(--afa-blanc);
}

.nota--avis { background: var(--afa-taronja-050); color: var(--afa-text); }
.nota--avis::before {
  background: var(--afa-taronja-500);
  color: var(--afa-blau-900);
}


.error {
  background: var(--afa-vermell-050);
  color: var(--afa-vermell-600);
  padding: var(--afa-espai-3);
  border-radius: var(--afa-radi-m);
  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-4);
  text-align: center;
}

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

/* ── La credencial ───────────────────────────────────────────────────────
 *
 * La tarjeta que ve la familia. Fondo claro y opaco por obligación técnica,
 * no estética: encima va un QR que tiene que leerse con la cámara de otro
 * móvil, así que ni degradados ni transparencias por debajo.
 *
 * overflow: hidden es lo que recorta los tres ángulos de color contra el
 * redondeo de las esquinas. Sin eso asoman por fuera de la tarjeta.
 */
.credencial {
  position: relative;
  overflow: hidden;
  background: var(--afa-blanc);
  border: 1px solid var(--afa-gris-100);
  border-radius: var(--afa-radi-l);
  box-shadow: var(--afa-ombra-2);
  /* El relleno de abajo reserva el hueco del ángulo azul. */
  padding: var(--afa-espai-4) var(--afa-espai-4) 2.75rem;
}

/*
 * Ángulos de color. Son el motivo de la casa: la misma diagonal del
 * triángulo del logotipo, repetida en las esquinas.
 *
 * El de abajo a la izquierda es azul medio, no rojo como en la referencia
 * impresa: en esta pantalla el rojo quiere decir CADUCAT y no puede aparecer
 * de adorno junto a un carnet vigente.
 *
 * Van detrás del contenido (z-index 0 contra 1) y ninguna fila de datos cae
 * encima de ellos: de eso se encarga el relleno inferior de la tarjeta.
 */
.credencial__angle {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.credencial__angle--sup {
  top: 0; right: 0;
  width: 4rem; height: 4rem;
  background: var(--afa-taronja-500);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.credencial__angle--inf-dre {
  right: 0; bottom: 0;
  width: 58%; height: 3rem;
  background: var(--afa-blau-700);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.credencial__angle--inf-esq {
  left: 0; bottom: 0;
  width: 44%; height: 2rem;
  background: var(--afa-blau-500);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* Todo lo que es contenido va por delante de los ángulos. */
.marca,
.credencial__titol,
.credencial__estatus,
.credencial .carnet__marc,
.dades { position: relative; z-index: 1; }

/* ── Logotipo ────────────────────────────────────────────────────────────
 * En horizontal, no apilado como en la referencia impresa: en vertical eran
 * cuatro pisos y la tarjeta dejaba de caber en la pantalla de un móvil.
 * Compuesto con tipografía del sistema y un triángulo en SVG; cuando exista
 * el logotipo oficial se sustituye el bloque entero por una imagen.
 */
.marca {
  display: flex;
  align-items: center;
  gap: var(--afa-espai-2);
  /* El relleno derecho vale exactamente lo que el ángulo naranja, así que la
     banda que queda libre acaba en el pico donde empieza su diagonal. */
  padding: 0 4rem var(--afa-espai-3) 0;
  border-bottom: 2px solid var(--afa-taronja-500);
  margin-bottom: var(--afa-espai-3);
}

.marca__cim {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 1.625rem;
  color: var(--afa-taronja-500);
}

.marca__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

.marca__escola {
  font-size: 0.625rem;
  letter-spacing: .38em;
  text-indent: .38em;              /* compensa el espaciado del último signo */
  color: var(--afa-gris-600);
}

.marca__centre {
  font-size: 1.1875rem;
  letter-spacing: .04em;
  color: var(--afa-blau-900);
}

/*
 * AFA va CENTRADO en la banda que queda entre el separador vertical y el pico
 * del ángulo naranja: flex: 1 se queda con todo el hueco y justify-content lo
 * centra dentro. Suelto a la izquierda quedaba desamparado en un móvil, que es
 * donde de verdad se mira este carnet.
 *
 * 800 ya es el peso más gordo de los tokens, así que para que se note se sube
 * el cuerpo: en la pila del sistema, más peso del que hay en la familia no lo
 * dibuja el navegador, lo finge — y se ve.
 */
.marca__afa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  /*
   * Tres cosas suman aquí, y la tercera es la que menos se espera:
   *  - cuerpo grande (xl), que es lo que pedía David;
   *  - peso 900, un corte real de la familia del sistema, no negrita falsa;
   *  - espaciado APRETADO. Iba a .12em y las letras separadas se leen más
   *    ligeras: es parte de por qué una Impact pesa lo que pesa. Juntarlas
   *    aporta tanta masa visual como subir el peso.
   * Lo que NO se puede hacer es pedir una Impact: no está en iOS ni en
   * Android, así que el carnet se vería distinto en cada móvil.
   */
  font-size: var(--afa-mida-xl);
  font-weight: var(--afa-pes-negre);
  letter-spacing: .01em;
  color: var(--afa-blau-700);
  border-left: 1px solid var(--afa-gris-300);
}

/*
 * El cuerpo no es una elección estética: naranja sobre blanco mide 3.00:1, que
 * WCAG solo admite para texto GRANDE — 24px, o 18.7px en negrita. A --afa-mida-m
 * (17px) el título incumplía AA aunque fuese en negrita. A --afa-mida-l son
 * 22px en negrita y entra. Si algún día se encoge, hay que cambiarle el color.
 */
.credencial__titol {
  font-size: var(--afa-mida-l);
  font-weight: var(--afa-pes-molt);
  color: var(--afa-taronja-500);
  margin: 0 0 var(--afa-espai-2);
  line-height: 1.2;
}

/* Cinta del curso y distintivo de estado, en la misma línea. */
.credencial__estatus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--afa-espai-2);
  margin: 0 0 var(--afa-espai-3);
}

/*
 * La cinta se esconde cuando el carnet está caducado: el curso se deduce de
 * la fecha de vigencia, y esa fecha tampoco se muestra. Anunciar
 * "Curs 2026-2027" al lado de un CADUCAT es contradecirse.
 */
.credencial__curs {
  background: var(--afa-blau-700);
  color: var(--afa-primari-text);
  font-size: var(--afa-mida-xs);
  font-weight: var(--afa-pes-fort);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0.25rem 1.25rem;
  /* Los picos laterales de una cinta, con la diagonal del logotipo. */
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.55rem) 50%, 100% 100%,
                     0 100%, 0.55rem 50%);
}

/*
 * El marco del QR es el semáforo: verde vigente, rojo caducado. Nunca
 * comunica solo con color — el distintivo VÀLID / CADUCAT va siempre arriba.
 *
 * 15rem de ancho máximo no es una cifra estética, y es lo único de esta
 * tarjeta que no se puede encoger más. Con el token de 64 caracteres el QR
 * sale de 41 módulos, 45 contando la zona de silencio: a este tamaño cada
 * módulo ocupa unos 4,7 px de pantalla, que es lo que necesita la cámara de
 * un comercio a un palmo de distancia. En la referencia impresa el QR era un
 * adorno de esquina; a ese tamaño, en un móvil, deja de leerse.
 */
.carnet__marc {
  box-sizing: border-box;                /* 15rem es el tamaño de FUERA */
  width: 100%;
  max-width: 15rem;
  margin: 0 auto var(--afa-espai-3);
  background: var(--afa-blanc);
  border: 6px solid var(--afa-gris-300);
  border-radius: var(--afa-radi-m);
  padding: var(--afa-espai-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. El ancho exacto lo
   fija app.js en píxeles para que cada módulo caiga sobre un número entero de
   píxeles físicos; aquí solo se impide que desborde si ese cálculo no ha
   llegado a ejecutarse. */
.carnet__qr canvas {
  max-width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}

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

/*
 * Distintivo de estado. El fondo y el símbolo viven en las variantes, no en
 * la clase base: mientras no hay veredicto el elemento está vacío, y una
 * píldora de color vacía en medio de la tarjeta es exactamente el (!) suelto
 * que ya nos pasó una vez.
 */
.carnet__estat {
  font-size: var(--afa-mida-xs);
  font-weight: var(--afa-pes-molt);
  letter-spacing: .06em;
}

.carnet__estat--valid,
.carnet__estat--caducat {
  display: inline-flex;
  align-items: center;
  gap: var(--afa-espai-1);
  padding: 0.25rem 0.6rem 0.25rem 0.3rem;
  border-radius: 999px;
}

/* Marca circular con el mismo lenguaje de símbolos que el validador. El color
   nunca va solo: lleva símbolo y peso tipográfico. */
.carnet__estat--valid::before,
.carnet__estat--caducat::before {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--afa-blanc);
}

.carnet__estat--valid {
  color: var(--afa-verd-600);
  background: var(--afa-verd-050);
}
.carnet__estat--valid::before {
  content: '\2713';                      /* ✓ */
  background: var(--afa-verd-600);
}

.carnet__estat--caducat {
  color: var(--afa-vermell-600);
  background: var(--afa-vermell-050);
}
.carnet__estat--caducat::before {
  content: '\2717';                      /* ✗ */
  background: var(--afa-vermell-600);
}

/* ── Filas de datos ──────────────────────────────────────────────────────
 * Etiqueta y valor en la MISMA línea, no uno encima del otro como en la
 * referencia: son tres filas, y en vertical costaban el doble de alto.
 * La marca circular es azul en las tres; en la referencia eran de tres
 * colores, pero aquí el rojo y el verde están reservados para el estado.
 */
.dades {
  margin: 0;
  text-align: left;
}

.dades__fila {
  display: grid;
  grid-template-columns: 1.5rem auto 1fr;
  align-items: center;
  gap: var(--afa-espai-2);
  padding: var(--afa-espai-2) 0;
  border-top: 1px solid var(--afa-gris-100);
}

.dades__fila:first-child { border-top: 0; }

.dades__marca {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--afa-blau-700);
  color: var(--afa-blanc);
  display: grid;
  place-items: center;
}

.dades__etiqueta {
  margin: 0;
  font-size: var(--afa-mida-xs);
  color: var(--afa-text-suau);
  white-space: nowrap;
}

/*
 * El código de descuento es UNA FILA MÁS.
 *
 * Decisión de David, y tenía razón: misma tipografía, mismo tamaño y misma
 * estructura que el titular, el número de socia y la validez. La cohesión de
 * la tarjeta manda sobre cualquier ganancia de legibilidad del código.
 *
 * Mi primera versión lo puso en monoespaciada y con las letras separadas "para
 * que se lea mejor". Dos problemas: rompía la unidad visual de la tarjeta, y era
 * ANCHO — diecisiete caracteres monoespaciados más la etiqueta no caben en
 * 375px, así que el código se partía en dos y hubo que darle una fila propia.
 * En proporcional cabe de sobra en una línea: el arreglo de David resuelve las
 * dos cosas a la vez.
 *
 * Y la legibilidad no se pierde donde importaba: el alfabeto ya excluye la I,
 * la L, la O y la U precisamente para que no haga falta una tipografía especial
 * que distinga el 1 de la l ni el 0 de la O.
 *
 * Lo único que lo distingue de un valor normal es el subrayado punteado, que es
 * la pista de que se puede tocar para copiar: una señal de comportamiento, no
 * un cambio de tipografía.
 */
.codi {
  /* Idéntico a .dades__valor */
  font-family: inherit;
  font-size: var(--afa-mida-s);
  font-weight: var(--afa-pes-fort);
  color: var(--afa-blau-900);
  letter-spacing: normal;

  display: inline;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-bottom: 1px dotted var(--afa-vora);
  transition: color .2s ease, border-color .2s ease;
}
.codi:hover { color: var(--afa-primari); border-bottom-color: var(--afa-primari); }
.codi:focus-visible { outline: 2px solid var(--afa-accent); outline-offset: 3px; }

/* Confirmación de copiado. Verde y con texto: el color nunca va solo. */
.codi--copiat { color: var(--afa-verd-600); border-bottom-color: var(--afa-verd-600); }
.codi__estat {
  display: block;
  font-size: var(--afa-mida-xs);
  font-weight: var(--afa-pes-normal);
  color: var(--afa-verd-600);
}

/*
 * Si no cabe, el código parte POR UN GUION; nunca se recorta ni se rompe por
 * la mitad de un grupo. Con la etiqueta corta cabe en una línea a 375px, pero
 * en un móvil de 320 no, y ahí es mejor "AFA67-" / "BZ3QS-M9Q97" que perder
 * los dos últimos caracteres. `overflow-wrap: normal` es justo lo que impide
 * que se rompa en un sitio arbitrario: el guion ya es una oportunidad de corte
 * para el navegador.
 */
.dades__fila--codi .dades__valor { min-width: 0; overflow-wrap: normal; }


.dades__valor {
  margin: 0;
  text-align: right;
  font-size: var(--afa-mida-s);
  font-weight: var(--afa-pes-fort);
  color: var(--afa-blau-900);
  overflow-wrap: break-word;             /* un nombre largo parte, no desborda */
}


/* ── Acciones de la cabecera ─────────────────────────────────────────── */
.capcalera { position: relative; }

.capcalera__accions {
  display: flex;
  align-items: center;
  gap: var(--afa-espai-1);
  flex: 0 0 auto;
}

/* ── Iconos de la cabecera ───────────────────────────────────────────────
   44x44 de objetivo táctil aunque el dibujo mida 24: en un móvil el puntero
   es el dedo, no el ratón. */
.icona {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--afa-radi-s);
  color: var(--afa-primari-text);
  cursor: pointer;
}

.icona:hover { background: var(--afa-realc-clar); }
.icona:focus-visible { outline: 3px solid var(--afa-accent); outline-offset: 1px; }

/* El contador va sobre la campana, no al lado: la cabecera no da para más. */
.icona__comptador {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 1.1rem;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--afa-accent);
  color: var(--afa-blau-900);
  font-size: 0.6875rem;
  font-weight: var(--afa-pes-molt);
  line-height: 1.4;
  text-align: center;
}

/* ── Menú desplegable ────────────────────────────────────────────────────── */
.menu {
  position: absolute;
  top: 100%;
  right: var(--afa-espai-3);
  z-index: 20;
  min-width: 12rem;
  background: var(--afa-blanc);
  border: 1px solid var(--afa-vora);
  border-radius: var(--afa-radi-m);
  box-shadow: var(--afa-ombra-2);
  padding: var(--afa-espai-2);
  display: flex;
  flex-direction: column;
}

/*
 * Encabezado de grupo del menú. No es una opción: no se puede pulsar y no
 * ocupa objetivo táctil, así que va con cuerpo pequeño y en mayúsculas para
 * que se lea como una etiqueta y no como algo que hacer.
 */
.menu__grup {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--afa-espai-2);
  margin: var(--afa-espai-2) 0 var(--afa-espai-1);
  padding: 0 var(--afa-espai-3);
  font-size: var(--afa-mida-xs);
  font-weight: var(--afa-pes-fort);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--afa-text-suau);
}
.menu__grup:first-child { margin-top: 0; }

/* El rol, para que se entienda de dónde salen las opciones de gestión. */
.menu__rol {
  letter-spacing: .04em;
  text-transform: none;
  font-weight: var(--afa-pes-normal);
  color: var(--afa-primari);
  background: var(--afa-taronja-050);
  border-radius: var(--afa-radi-s);
  padding: 1px 7px;
}

.menu__opcio {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--afa-espai-3);
  min-height: var(--afa-tap-min);
  border: 0;
  background: none;
  border-radius: var(--afa-radi-s);
  font-family: inherit;
  font-size: var(--afa-mida-s);
  font-weight: var(--afa-pes-fort);
  color: var(--afa-text);
  text-decoration: none;
  cursor: pointer;
}

.menu__opcio:hover { background: var(--afa-gris-100); }
.menu__opcio:focus-visible { outline: 3px solid var(--afa-accent); outline-offset: -2px; }
.menu__opcio--sortir { color: var(--afa-vermell-600); }

/* ── Guía de instalación ─────────────────────────────────────────────── */
.carnet__accions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--afa-espai-2);
  margin-top: var(--afa-espai-6);
}

.carnet__avis-push {
  margin: var(--afa-espai-5) 0 0;
}

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

.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 { margin: 0 0 var(--afa-espai-4); }

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


/* ── Tarjeta de primera vez para los avisos ──────────────────────────────
   Visible y explicada, no un enlace discreto: el permiso del navegador se
   puede pedir una sola vez, así que conviene que la familia entienda para
   qué antes de decidir. */
.targeta {
  background: var(--afa-blanc);
  border: 1px solid var(--afa-vora);
  border-radius: var(--afa-radi-m);
  padding: var(--afa-espai-5);
  margin-top: var(--afa-espai-6);
  text-align: left;
  box-shadow: var(--afa-ombra-1);
}

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

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

.targeta__accions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--afa-espai-3);
}

.targeta__accions .boto--primari { width: auto; margin-top: 0; }

/* Variante destacada: va encima del QR y tiene que verse a la primera. */
.targeta--destacada {
  background: var(--afa-blau-700);
  border: 0;
  color: var(--afa-blanc);
  margin: 0 0 var(--afa-espai-5);
}

.targeta--destacada .targeta__titol { font-size: var(--afa-mida-l); }
.targeta--destacada .targeta__cos   { color: var(--afa-blanc); opacity: .9; margin-bottom: var(--afa-espai-3); }

.targeta__llista {
  margin: 0 0 var(--afa-espai-3);
  padding-left: var(--afa-espai-5);
  font-size: var(--afa-mida-s);
  line-height: 1.6;
}

.targeta__llista li { margin-bottom: var(--afa-espai-1); }

.targeta__promesa {
  font-size: var(--afa-mida-xs);
  opacity: .85;
  margin: 0 0 var(--afa-espai-4);
}

/* Sobre el azul, el botón principal va en naranja con texto azul oscuro:
   5,24:1 comprobado. Blanco sobre naranja daría 3,00 y no vale. */
.targeta--destacada .boto--primari {
  background: var(--afa-accent);
  color: var(--afa-blau-900);
}

.targeta--destacada .boto--text { color: var(--afa-blanc); }


/* ── Sección de avisos ───────────────────────────────────────────────────── */


.avisos {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--afa-espai-5) var(--afa-espai-4) var(--afa-espai-7);
  display: flex;
  flex-direction: column;
  gap: var(--afa-espai-3);
}

.avis-item {
  background: var(--afa-blanc);
  border: 1px solid var(--afa-vora);
  border-radius: var(--afa-radi-m);
  padding: var(--afa-espai-4);
}

/*
 * Sin leer: fondo levemente teñido y el TRIÁNGULO del logotipo delante del
 * título — la muntanya, el motivo de la casa. Nada de franja lateral.
 * El color nunca es la única señal: va con la forma y con el peso del título.
 */
.avis-item--nou {
  background: var(--afa-taronja-050);
  border-color: var(--afa-taronja-500);
}

.avis-item--nou .avis-item__titol::before {
  content: '';
  display: inline-block;
  width: 0.72em;
  height: 0.62em;
  margin-right: 0.45em;
  background: var(--afa-taronja-500);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

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

.avis-item--nou .avis-item__titol { font-weight: var(--afa-pes-molt); }

.avis-item__cos {
  font-size: var(--afa-mida-s);
  color: var(--afa-text);
  line-height: 1.5;
  margin: 0 0 var(--afa-espai-2);
}

.avis-item__data {
  font-size: var(--afa-mida-xs);
  color: var(--afa-text-suau);
  margin: 0;
}

.avisos__buit {
  text-align: center;
  color: var(--afa-text-suau);
  font-size: var(--afa-mida-s);
  line-height: 1.6;
  padding: var(--afa-espai-7) var(--afa-espai-4);
}


/* ── Borrar avisos ───────────────────────────────────────────────────────── */
.avis-item { position: relative; padding-right: 3rem; }

.avis-item__esborrar {
  position: absolute;
  top: var(--afa-espai-2);
  right: var(--afa-espai-2);
  width: 44px;                       /* objetivo táctil, no un aspa de 12 px */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  border-radius: var(--afa-radi-s);
  color: var(--afa-gris-600);
  font-size: var(--afa-mida-l);
  line-height: 1;
  cursor: pointer;
}

.avis-item__esborrar:hover {
  background: var(--afa-vermell-050);
  color: var(--afa-vermell-600);
}

.avis-item__esborrar:focus-visible {
  outline: 3px solid var(--afa-accent);
  outline-offset: 1px;
}

.avisos__peu {
  padding-top: 0;
  align-items: center;
  gap: var(--afa-espai-2);
}

.avisos__retencio {
  font-size: var(--afa-mida-xs);
  color: var(--afa-text-suau);
  text-align: center;
  margin: 0;
}

/* ── Segundo factor ─────────────────────────────────────────────────────── */

.totp__pas {
  margin: var(--afa-esp-m) 0 var(--afa-esp-s);
  font-size: var(--afa-mida-s);
  line-height: 1.5;
}

.totp__qr {
  display: flex;
  justify-content: center;
  /* Fondo blanco propio: el QR necesita contraste absoluto y el resto de la
     pantalla no tiene por qué serlo. */
  background: var(--afa-blanc);
  padding: var(--afa-esp-m);
  border-radius: var(--afa-radi-m);
}

.totp__manual {
  margin: var(--afa-esp-m) 0 var(--afa-esp-xs);
  font-size: var(--afa-mida-xs);
  color: var(--afa-muted);
}

/* La clave en monoespaciada y partible: son 32 caracteres que alguien puede
   tener que copiar a mano en un teclado de móvil. */
.totp__clau code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--afa-mida-s);
  letter-spacing: .08em;
  word-break: break-all;
  background: var(--afa-blau-050);
  padding: var(--afa-esp-s);
  border-radius: var(--afa-radi-s);
}

/* Los códigos de recuperación, en dos columnas y monoespaciados: se leen para
   copiarlos a mano o para compararlos, no para leerlos de corrido. */
.totp__recup {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--afa-esp-s);
  list-style: none;
  margin: var(--afa-esp-m) 0;
  padding: 0;
}

.totp__recup li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--afa-mida-s);
  letter-spacing: .06em;
  text-align: center;
  background: var(--afa-blau-050);
  padding: var(--afa-esp-s) var(--afa-esp-xs);
  border-radius: var(--afa-radi-s);
}