/* ── Estructura: una sola columna, com una safata d'entrada ─────────── */
.columna { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }

/* ── Accés ─────────────────────────────────────────────────────────── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--fosc); }
.login__form {
  width: 100%; max-width: 22rem; display: grid; gap: 0.5rem; padding: 1.75rem 1.5rem;
  background: var(--paper); border-radius: var(--radi);
}
.login__form h1 { font-size: 1.75rem; margin-bottom: 0.75rem; }
.login__form .boto { margin-top: 0.75rem; }

/* ── Capçalera ─────────────────────────────────────────────────────── */
.capcalera { background: var(--fosc); color: #f2f5f8; }
.capcalera__fila { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; }
.capcalera__titol { margin: 0; flex: 1; font-size: 0.9375rem; color: #b8c6d3; }
.capcalera .boto-text { color: #f2f5f8; }
.capcalera .boto-text:hover { background: #ffffff1f; }

.franja { padding: 0.625rem 1rem; font-weight: 600; font-size: 0.9375rem; text-align: center; }
.franja--prova { background: #ffd24d; color: #3d2c00; }
.franja--error { background: var(--problema-fons); color: var(--problema-text); }

/* ── Estat: la frase gran és l'element principal de la pàgina ─────── */
.estat { padding: 1.75rem 0 1.5rem; }
.estat__cap { display: flex; align-items: center; gap: 1rem; }
.estat__icona { flex: none; width: 3rem; height: 3rem; }
.estat__icona svg { width: 100%; height: 100%; display: block; }
.estat__titol { font-size: 2.25rem; line-height: 1.1; animation: apareix 420ms var(--corba); }
.estat__subtitol { margin: 0.25rem 0 0; font-size: 0.9375rem; }

.motius { margin: 1rem 0 0; padding-left: 1.1rem; }
.motius li + li { margin-top: 0.25rem; }

.xifres { margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.xifres div { display: flex; align-items: baseline; gap: 0.4rem; }
.xifres dt { order: 2; font-size: 0.9375rem; }
.xifres dd { margin: 0; order: 1; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.estat--verd { background: var(--ok-fons); color: var(--ok-text); }
.estat--verd .estat__icona { color: var(--ok-icona); }
.estat--taronja { background: var(--atencio-fons); color: var(--atencio-text); }
.estat--taronja .estat__icona { color: var(--atencio-icona); }
.estat--vermell { background: var(--problema-fons); color: var(--problema-text); }
.estat--vermell .estat__icona { color: var(--problema-icona); }
.estat--cap { background: var(--neutre-fons); color: var(--neutre-text); }
.estat--cap .estat__icona { color: var(--neutre-text); }

@keyframes apareix { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (min-width: 768px) {
  .columna { padding: 0 1.5rem; }
  .estat { padding: 2.5rem 0 2rem; }
  .estat__titol { font-size: 3rem; }
  .estat__icona { width: 3.75rem; height: 3.75rem; }
}

/* ── Pantalla ampla: la llista a l'esquerra i l'estat tècnic fix a la dreta ── */
@media (min-width: 1000px) {
  .columna { max-width: 78rem; padding: 0 2rem; }

  .estat { padding: 2.75rem 0 2.25rem; }
  .estat__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
  .xifres { margin: 0; flex-direction: column; gap: 0.25rem; align-items: flex-end; }
  .xifres div { justify-content: flex-end; }
  .xifres dd { font-size: 1.75rem; }

  .cos { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 3rem; align-items: start; }
}