/* ============================================================
 * .mp-temas — Panel "Temas más buscados" (shortcode
 * [mp_temas_buscados]). Prefijo de clase: .mp-temas — no reutilizar
 * en otro widget. Todos los selectores están scoped bajo .mp-temas.
 * Título en mayúsculas con línea divisoria (según el diseño) y pills
 * de tags con fondo celeste + texto navy.
 * ============================================================ */
.mp-temas {
  --mp-navy-dark: #14265e;
  --mp-navy: #1c3a8a;
  --mp-border: #e7e9f0;

  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  color: var(--mp-navy-dark);
  box-sizing: border-box;
  width: 100%;
}
.mp-temas *, .mp-temas *::before, .mp-temas *::after { box-sizing: inherit; }
.mp-temas a { text-decoration: none; }

/* --- Panel --- */
.mp-temas .mp-panel {
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 2px 10px rgba(20, 38, 94, 0.05);
}

/* --- Título con línea divisoria a la derecha (como el diseño) --- */
.mp-temas .mp-panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mp-navy-dark);
  margin-bottom: 14px;
  line-height: 1.3;
}
.mp-temas .mp-panel-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mp-border);
}

/* --- Nube de pills --- */
.mp-temas .mp-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- Pill de tema (link al archivo /tag/<slug>/) --- */
.mp-temas .mp-topic-pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #e8edfb;
  color: var(--mp-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  transition: background 0.15s, color 0.15s;
}
.mp-temas .mp-topic-pill:hover {
  background: var(--mp-navy);
  color: #fff;
}
.mp-temas .mp-topic-pill:focus-visible {
  outline: 2px solid var(--mp-navy);
  outline-offset: 2px;
}

/* --- Responsive --- */
@media (max-width: 480px) {
  .mp-temas .mp-panel { padding: 16px 14px 14px; }
  .mp-temas .mp-topic-pill { padding: 7px 13px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-temas .mp-topic-pill { transition: none; }
}