/* EL SISTEMA DE DISEÑO DE XAMDA. Una sola escala para todas las pantallas —portada, página del
   agente, panel e informe—, para que ninguna se diseñe a mano. Los colores viven en tokens.css;
   acá viven el espacio, el radio, los títulos, la rejilla y la tarjeta.

   Tres reglas:
   1. Ancho: la pantalla se usa entera. Solo el texto corrido se limita (70 caracteres).
   2. Responsive por contenido, no por dispositivo: la rejilla decide cuántas columnas caben.
   3. Una tarjeta, un radio, una sombra. Si una pantalla necesita otra, se agrega acá. */

:root {
  /* Espacios: 4, 8, 12, 16, 24, 32, 48, 64 px. */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem; --e8: 4rem;
  --radio: .875rem; --radio-s: .5rem; --radio-p: 999px;
  --sombra-tarjeta: 0 1px 2px rgba(10,15,13,.05), 0 8px 24px -16px rgba(10,15,13,.25);
  /* Títulos: sección y tarjeta. El titular de la portada sigue en --step-4. */
  --t-seccion: clamp(1.625rem, 1.15rem + 1.9vw, 2.5rem);
  --t-tarjeta: 1.0625rem;
  --lectura: 70ch;
  /* El margen lateral de la página: crece con la pantalla, nunca queda en cero. */
  --canal: clamp(1rem, 3vw, 3rem);
}

/* Una sección de página: aire arriba y un título con la misma talla en todas. */
.seccion { margin-top: var(--e7); }
.seccion > h2, .seccion > .titulo-accion > h2 {
  font: 800 var(--t-seccion)/1.1 Montserrat, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.02em; margin: 0 0 var(--e5);
}
.lectura { max-width: var(--lectura); }

/* LA REJILLA. Cuántas columnas caben lo decide el ancho, con un mínimo por tarjeta. */
.rejilla-auto { display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
/* Con un solo elemento, la tarjeta se vuelve destacada: foto grande a un lado, datos al otro.
   Así un portafolio de uno no queda como una estampilla pegada a la izquierda. */
.rejilla-auto:has(> :only-child) { grid-template-columns: 1fr; }
.rejilla-auto:has(> :only-child) > * { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--e5); align-items: center; }
.rejilla-auto:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 48rem) {
  .rejilla-auto:has(> :only-child) > * { grid-template-columns: 1fr; }
  .rejilla-auto:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
}

/* LA TARJETA. */
.tarjeta-base { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta); overflow: hidden; }
.tarjeta-base .cuerpo { padding: var(--e4) var(--e5) var(--e5); }