*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

a { color: var(--accent); }

h1 { margin: 0; font-size: 1.5em; }
h2 { margin: 0 0 12px; font-size: 1.1em; }

/* ---------- el mosaico ----------
   Toda pantalla es una rejilla de tarjetas: una columna en movil, dos en
   escritorio. Cada tarjeta es un hijo directo de .shell; las que necesitan
   todo el ancho (cabecera, cifras, tablas) lo piden con --ancho.

   El relleno inferior deja sitio a la barra de pestanas fija de movil y al
   boton flotante, que se apilan sobre el contenido. */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-content: start;
  align-items: start;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 16px calc(72px + 88px + env(safe-area-inset-bottom));
}

.card--ancho, .pagina__cabecera, .cifras { grid-column: 1 / -1; }

/* La cabecera de pantalla: titulo a la izquierda, acciones a la derecha, y en
   una sola fila mientras quepan. */
.pagina__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}
.pagina__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* Un formulario no se reparte en dos columnas: una tarjeta centrada y estrecha. */
.card--formulario {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 560px;
  justify-self: center;
}

@media (min-width: 900px) {
  .shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 24px 24px 96px;
  }
}