/* Página categorias.php: mezcla todas las categorías, no depende de ningún
   <categoria>.css — define su propia paleta (variables que base.css necesita).
   Oscuro fijo, sin variante clara: esta web no tiene modo claro/oscuro. */
:root{
  --bg: #0b0e13; --surface: #11151d; --surface-2: #171c26;
  --ink: #eef1f6; --ink-soft: #9aa4b5; --ink-dim: #5d6577; --line: #232a38;
  --accent: #6f8fc7; --accent-ink: #a3bce3;
  --font-neutra: 'Lexend', system-ui, sans-serif;
}

.selector-categoria{
  max-width: 1180px; margin: 1.5rem auto 0; padding: 0 2rem;
  display:flex; flex-wrap:wrap; gap: 0.6rem;
}
.selector-categoria a{
  font-family:'JetBrains Mono', monospace; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 0.4rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none;
}
.selector-categoria a.activa{ color: var(--bg); background: var(--accent); border-color: var(--accent); }

.grid-preguntas{
  max-width: 1180px; margin: 2rem auto 4rem; padding: 0 2rem;
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem;
}
@media (max-width: 1200px){ .grid-preguntas{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px){ .grid-preguntas{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px){ .grid-preguntas{ grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } }

.tarjeta-pregunta{ display:block; text-decoration:none; color: inherit; }
.tarjeta-pregunta .miniatura{
  aspect-ratio: 1; border-radius: 10px; overflow:hidden; border:1px solid var(--line);
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
}
.tarjeta-pregunta .miniatura img{ width:100%; height:100%; object-fit:cover; display:block; }
.tarjeta-pregunta .titulo{
  margin-top: 0.6rem; font-family: var(--font-neutra); font-size: 1.05rem;
  line-height: 1.35; color: var(--ink); text-align: center;
}

#centinela{ height: 1px; }
#cargando{ text-align:center; padding: 2rem; color: var(--ink-dim); font-family:'JetBrains Mono', monospace; font-size: 0.78rem; }
#cargando[hidden]{ display:none; }