/* Contrato visual de la maqueta aprobada: catálogos y fichas.
 * Los tokens se acotan al contenido: la navegación conserva su propio tema.
 * Bordes de controles y texto secundario mantienen el contraste accesible;
 * los separadores decorativos sí usan la línea tenue de la maqueta. */
.catalogo-diseno {
  --bg: #0b0d12; --bg-1: #12151c; --bg-2: #171b24; --bg-3: #1e232e;
  --fg: #e8eaf2; --fg-dim: #a6adc0; --fg-mute: #929bb0;
  --line: #2a3040; --line-soft: #2a3040;
  --accent: #a8d818; --accent-dim: #8bb814;
  --accent-bg: rgba(168,216,24,.12); --accent-line: rgba(168,216,24,.35);
  --ac-acento: #a8d818; --ac-acento-2: #8bb814;
  --ac-acento-suave: rgba(168,216,24,.12); --ac-acento-borde: rgba(168,216,24,.35);
  --ac-lima: #a8d818; --ac-lima-oscuro: #8bb814;
  --ac-texto: #e8eaf2; --ac-texto-suave: #a6adc0; --ac-texto-tenue: #929bb0;
  --ac-fondo: #0b0d12; --ac-fondo-elevado: #171b24; --ac-fondo-hundido: #12151c;
  --ac-borde: #2a3040; --ac-borde-suave: #2a3040;
  --ac-radio: 14px; --ac-radio-chico: 6px; --ac-r-sm: 6px;
  --ac-espacio: 16px; --catalogo-titulo: 2.125rem;
  background: var(--bg);
}
.catalogo-diseno .catalogo-portada {
  padding: 24px 28px; margin-bottom: 24px;
  border: 1px solid var(--ac-borde); border-radius: var(--ac-radio);
  background: radial-gradient(ellipse at top right, var(--accent-bg), transparent 65%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), var(--bg-1);
  background-size: auto, 40px 40px, 40px 40px, auto;
}
.catalogo-diseno .catalogo-portada .page-head { margin: 0 0 18px; padding: 0; border: 0; }
.catalogo-diseno .catalogo-portada .maq-heroe {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
}
.catalogo-diseno .maq-filtros { gap: 14px; margin: 0 0 22px; padding: 0; border: 0; background: none; }
.catalogo-diseno .maq-filtros .maq-pildoras { gap: 8px; }
.catalogo-diseno .maq-filtros .maq-pildora { flex: 0 1 148px; min-width: 0; }
.catalogo-diseno .maq-filtros .maq-pildora select.maq-pildora__campo { width: 100%; font-size: 13px; text-overflow: ellipsis; }
.catalogo-diseno .maq-tarjeta__pie { min-height: 32px; }
.catalogo-diseno .maq-tarjeta .catalogo-etiquetas { margin: 0; }
.catalogo-diseno .maq-tarjeta .catalogo-preferencias { padding-top: 8px; border-top: 1px solid var(--ac-borde); }
.catalogo-diseno .maq-filtros .maq-pildora select.maq-pildora__campo {
  border-radius: 6px; padding: 8px 32px 8px 12px;
  background: var(--bg-2); border-color: var(--ac-linea-contraste);
}
.catalogo-diseno .maq-filtros .academy-filter-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.catalogo-diseno .catalogo-vistas {
  display: inline-flex; flex: 0 0 auto; gap: 0; margin: 0 0 0 auto;
  border: 1px solid var(--ac-linea-contraste); border-radius: 6px;
}
.catalogo-diseno .catalogo-vista {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 7px 12px; border: 0; border-radius: 0;
  color: var(--ac-texto-suave); background: transparent;
}
.catalogo-diseno .catalogo-vista:first-child { border-radius: 5px 0 0 5px; }
.catalogo-diseno .catalogo-vista:last-child { border-radius: 0 5px 5px 0; }
.catalogo-diseno .catalogo-vista.is-activa { color: var(--ac-texto); background: var(--bg-3); }
.catalogo-diseno :is(.academy-button, .ficha-accion, .btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border-radius: 6px; line-height: 1.4;
}
.catalogo-diseno :is(.academy-button--primary, .ficha-accion--primaria, .btn-primary) {
  background: var(--ac-acento); border-color: var(--ac-acento); color: var(--bg);
  box-shadow: none;
}
.catalogo-diseno :is(.academy-button--primary, .ficha-accion--primaria, .btn-primary):hover {
  background: var(--ac-acento-2); border-color: var(--ac-acento-2); color: var(--bg);
}
.catalogo-diseno .academy-card-grid { gap: 16px; }
.catalogo-diseno .maq-tarjeta { padding: 18px 18px 14px; gap: 14px; background: var(--bg-2); border-radius: 14px; }
.catalogo-diseno .maq-reco { padding: 24px 28px; border-radius: 14px; }
.catalogo-diseno .catalogo-preferencias { gap: 12px; }
.catalogo-diseno .catalogo-preferencias--ficha {
  padding: 12px 24px; margin: -1px 0 22px;
  border: 1px solid var(--ac-borde); border-radius: 0 0 14px 14px;
  background: var(--bg-1);
}
.catalogo-diseno .ficha-cab { margin-bottom: 0; border-radius: 14px 14px 0 0; gap: 20px; }
.catalogo-diseno .ficha-cab__nombre { font-size: var(--catalogo-titulo); }
.catalogo-diseno .ficha-av { width: 96px; height: 96px; flex-shrink: 0; }
.catalogo-diseno .catalogo-valorar { margin-left: auto; }
.catalogo-diseno .catalogo-valorar fieldset { display: flex; flex-wrap: wrap; gap: 4px; }
.catalogo-diseno .catalogo-valorar legend { margin-bottom: 4px; }
.catalogo-diseno .catalogo-corazon { border: 1px solid var(--ac-linea-contraste); border-radius: 6px; }
.catalogo-diseno .ficha-tabs { gap: 4px; margin: 0 0 24px; }
.catalogo-diseno .ficha-tab { padding: 12px 16px; border-radius: 0; }
.catalogo-diseno .ficha-juego-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(280px,1fr); gap: 22px; align-items: start; }
.catalogo-diseno .ficha-juego-grid > * { min-width: 0; }
.catalogo-diseno .ficha-juego-contexto .card { margin-top: 0; }
.catalogo-diseno .catalogo-matriz { max-width: none; padding: 20px; }
.catalogo-diseno .ficha-instancia__acciones { gap: 8px; }
.catalogo-diseno .ficha-vpn { gap: 14px; flex-wrap: wrap; }
.catalogo-diseno .ficha-vpn .ficha-accion { flex-shrink: 0; }
.catalogo-diseno .retos-respuesta__fila { gap: 8px; }
.catalogo-diseno .retos-respuesta input.retos-respuesta__campo:focus {
  outline-color: var(--ac-acento); border-color: var(--ac-acento);
}
.catalogo-diseno .retos-ficha { margin-bottom: 0; }
.catalogo-diseno .retos-preguntas { margin: 0; padding: 0; }
.catalogo-diseno .retos-preguntas .list-view { padding: 0; }
.catalogo-diseno .retos-preguntas .retos-pregunta { margin-top: 0; margin-bottom: 16px; }
@media (max-width: 1100px) {
  .catalogo-diseno .ficha-juego-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .catalogo-diseno .catalogo-portada, .catalogo-diseno .maq-reco { padding: 18px; }
  .catalogo-diseno .ficha-cab { padding: 18px; }
  .catalogo-diseno .ficha-av { width: 64px; height: 64px; }
  .catalogo-diseno .ficha-cab__nombre { font-size: var(--ac-t-xl); }
  .catalogo-diseno .catalogo-preferencias--ficha { padding: 12px 18px; gap: 8px 12px; }
  .catalogo-diseno .catalogo-valorar { margin-left: 0; flex-basis: 100%; }
  .catalogo-diseno .catalogo-vistas { margin-left: 0; }
  .catalogo-diseno .maq-filtros .maq-pildora { flex: 1 1 140px; }
}