/* ============================================================
 * .mp-agenda — "Agenda distrital" (shortcode [mp_agenda_distrital]).
 * Prefijo de clase: .mp-agenda — no reutilizar en otro widget.
 * Todos los selectores están scoped bajo .mp-agenda. Cabecera solo
 * con título, tabs pill (activo = navy) y card con notas (título
 * enlazado + resumen de 60 caracteres). Sin badges ni meta info
 * (recortes del equipo).
 * ============================================================ */
.mp-agenda {
  --mp-navy-dark: #14265e;
  --mp-navy: #1c3a8a;
  --mp-gold-dark: #d98e12;
  --mp-border: #e7e9f0;
  --mp-text-dark: #16204a;
  --mp-text-muted: #7a8296;

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

/* --- Cabecera (solo título; sin "Ver todos los distritos") --- */
.mp-agenda .mp-section-head { margin-bottom: 16px; }
.mp-agenda .mp-section-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--mp-navy-dark);
  margin: 0;
  line-height: 1.25;
}

/* --- Tabs de distritos (pills) --- */
.mp-agenda .mp-district-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.mp-agenda .mp-district-tab {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 18px;
  border: 1.5px solid var(--mp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--mp-navy);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mp-agenda .mp-district-tab:hover:not(.mp-active) {
  border-color: var(--mp-navy);
  background: #eef1f8;
}
.mp-agenda .mp-district-tab:focus-visible {
  outline: 2px solid var(--mp-navy);
  outline-offset: 2px;
}
.mp-agenda .mp-district-tab.mp-active {
  background: var(--mp-navy);
  border-color: var(--mp-navy);
  color: #fff;
}

/* --- Card con las notas del tab activo --- */
.mp-agenda .mp-district-card {
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 14px;
  padding: 6px 20px;
  box-shadow: 0 2px 10px rgba(20, 38, 94, 0.05);
}
.mp-agenda .mp-district-panel[hidden] { display: none; }

.mp-agenda .mp-district-item {
  padding: 16px 0;
  border-top: 1px solid var(--mp-border);
}
.mp-agenda .mp-district-item:first-child { border-top: none; }

.mp-agenda .mp-district-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--mp-navy-dark);
  margin: 0;
  line-height: 1.35;
}
.mp-agenda .mp-district-title a { color: inherit; }
.mp-agenda .mp-district-title a:hover {
  color: var(--mp-gold-dark);
  text-decoration: underline;
}
.mp-agenda .mp-district-desc {
  font-size: 13.5px;
  color: var(--mp-text-muted);
  margin: 5px 0 0;
  line-height: 1.5;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .mp-agenda .mp-section-title { font-size: 19px; }
  .mp-agenda .mp-district-card { padding: 4px 14px; }
  .mp-agenda .mp-district-tab { padding: 8px 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-agenda .mp-district-tab { transition: none; }
}

/* ============================================================
   .mp-agenda-v2 — Tarjeta de columna (una nota nueva por distrito)
   Prefijo propio: el plugin no depende del CSS del tema.
   Mismo estilo visual que .mp-article__card del diseño de entradas.
   ============================================================ */
.mp-agenda-v2 {
  --navy-dark: #14265e;
  --navy: #1c3a8a;
  --gold-dark: #e0951a;
  --text-dark: #16204a;
  --text-body: #3d4560;
  --text-muted: #7a8296;
  --border: #e7e9f0;
  --bg-soft: #f6f7fb;
}
.mp-agenda-v2__card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  background: #fff;
}
.mp-agenda-v2__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}
.mp-agenda-v2__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-dark);
}
.mp-agenda-v2__link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-dark);
  text-decoration: none;
  white-space: nowrap;
}
.mp-agenda-v2__link:hover { text-decoration: underline; }
.mp-agenda-v2__item { padding: 10px 0; }
.mp-agenda-v2__item + .mp-agenda-v2__item { border-top: 1px solid var(--border); }
.mp-agenda-v2__city {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.mp-agenda-v2__desc {
  font-size: 12.5px;
  color: var(--text-body);
  line-height: 1.5;
  margin: 0 0 4px;
}
.mp-agenda-v2__time {
  font-size: 11.5px;
  color: var(--text-muted);
}