/* ---------- 0. Fuentes Autoalojadas (Open Sans - Estándar gub.uy Portal Tipo) ---------- */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/open-sans-800.woff2') format('woff2');
}

/* ==========================================================================
   Plenario de Municipios del Uruguay — Design Tokens y componentes base
   Portal Florida · Soluciones Multimedia
   v1.1 (julio 2026) — revisión tras auditoría del sistema de diseño
   --------------------------------------------------------------------------
   Uso en Joomla 6: cargar ANTES del CSS de la plantilla, con
   $wa->registerAndUseStyle('pmu.tokens', 'media/templates/site/pmu/css/tokens.css');

   CAMBIOS RESPECTO DE v1.0 (ver docs/06-auditoria-sistema-diseno.md)
   · CORREGIDO  anillo de foco: era amarillo sólido (1.59:1 sobre blanco) e
                incumplía WCAG 1.4.11. Ahora es de doble tono.
   · CORREGIDO  --pmu-ink-muted: #6B7280 daba 4.50:1 sobre blue-050, al límite.
                Pasa a #626A77 (5.08:1).
   · NUEVO      tokens de z-index, duraciones, superficies semánticas,
                texto sobre fondo oscuro y bordes de control.
   · NUEVO      componentes: campo de formulario, tabla, tarjeta, etiqueta,
                mensaje, paginación, miga de pan, contexto inverso.
   ========================================================================== */

:root {

  /* ---------- 1. Color de marca: azul institucional ---------------------- */
  /* #1485C7 es el azul del isotipo. Contraste 4.03:1 sobre blanco → NO usar
     para texto normal ni para texto blanco encima. Sirve para superficies,
     iconografía grande y gráficos. Para texto/enlaces usar --pmu-blue-600. */
  --pmu-blue-050: #F4F7FA;   /* fondos de sección              */
  --pmu-blue-100: #E5EAF0;   /* bordes decorativos, cebra      */
  --pmu-blue-200: #C7DEEF;   /* hover suave, chips             */
  --pmu-blue-500: #1485C7;   /* AZUL DE MARCA (isotipo)        */
  --pmu-blue-600: #0E6FA8;   /* enlaces y botones · 5.44:1 ✓AA */
  --pmu-blue-700: #0F5C8C;   /* títulos        · 7.17:1 ✓AAA   */
  --pmu-blue-900: #0A4770;   /* header, footer · 9.78:1 ✓AAA   */

  /* ---------- 2. Color de acento: amarillo institucional ----------------- */
  /* #F6C828 da 1.59:1 sobre blanco → JAMÁS texto amarillo sobre claro, y
     tampoco sirve solo como indicador de foco sobre fondo claro. */
  --pmu-yellow-100: #FDF3D2;  /* fondo de destacados/avisos    */
  --pmu-yellow-400: #F6C828;  /* AMARILLO DE MARCA (isotipo)   */
  --pmu-yellow-700: #B98A00;  /* iconos y bordes · 3.14:1 (solo no-texto) */
  --pmu-yellow-900: #7A5A00;  /* texto sobre yellow-100 · 6.38:1 ✓AA */

  /* ---------- 3. Neutros ------------------------------------------------- */
  --pmu-ink:        #111827;  /* texto principal  · 16.50:1 ✓AAA */
  --pmu-ink-soft:   #4B5563;  /* texto secundario ·  7.56:1 ✓AAA */
  --pmu-ink-muted:  #626A77;  /* metadatos, fechas ·  5.46:1 ✓AA
                                 (v1.0 usaba #6B7280: 4.50:1 sobre blue-050,
                                  justo en el límite de AA) */

  /* ---------- 4. Superficies y bordes ------------------------------------ */
  --pmu-surface:      #FFFFFF;
  --pmu-surface-alt:  #F4F7FA;   /* = blue-050 */
  --pmu-surface-dark: #0A4770;   /* = blue-900, secciones invertidas */
  --pmu-border:       #E5EAF0;   /* borde DECORATIVO (1.21:1): tarjetas,
                                    separadores. No usar en controles. */
  --pmu-border-strong:#7D8B9B;   /* borde de CONTROL · 3.48:1 ✓ WCAG 1.4.11
                                    campos, casillas, selectores */

  /* ---------- 5. Texto sobre fondo oscuro -------------------------------- */
  --pmu-on-dark:       #FFFFFF;  /* 9.78:1 sobre blue-900 ✓AAA */
  --pmu-on-dark-soft:  #C7DEEF;  /* 7.04:1 sobre blue-900 ✓AAA */
  --pmu-on-dark-muted: #A9C4DC;  /* metadatos en el footer */

  /* ---------- 6. Semánticos ---------------------------------------------- */
  --pmu-success:    #1F7A4D;  /* 5.32:1 sobre blanco ✓AA */
  --pmu-success-bg: #E8F3ED;  /* texto success encima: 4.68:1 ✓AA */
  --pmu-danger:     #B3261E;  /* 6.54:1 ✓AA */
  --pmu-danger-bg:  #FBECEB;  /* texto danger encima: 5.70:1 ✓AA */
  --pmu-warning:    #7A5A00;  /* = yellow-900, texto de aviso */
  --pmu-warning-bg: #FDF3D2;  /* = yellow-100 · 5.75:1 ✓AA */
  --pmu-info:       #0E6FA8;
  --pmu-info-bg:    #F4F7FA;

  /* ---------- 7. Capas translúcidas -------------------------------------- */
  --pmu-scrim:        rgba(10, 71, 112, .65);  /* velo sobre fotografía */
  --pmu-overlay-soft: rgba(255, 255, 255, .08);
  --pmu-overlay-line: rgba(255, 255, 255, .18);

  /* ---------- 8. Tipografía ---------------------------------------------- */
  /* Ambas familias son SIL OFL y se autoalojan (nada de Google Fonts CDN:
     un sitio .gub.uy no debe filtrar IPs de ciudadanos a terceros). */
  --pmu-font-display: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --pmu-font-text:    'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --pmu-font-mono:    ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

  /* Escala tipográfica — razón 1.25 (major third), base 18px */
  --pmu-text-xs:   0.75rem;   /* 12px · sobrelíneas, etiquetas   */
  --pmu-text-sm:   0.875rem;  /* 14px · metadatos, pie de tabla  */
  --pmu-text-base: 1rem;      /* 18px con html{font-size:112.5%} */
  --pmu-text-lg:   1.125rem;  /* bajada de nota                  */
  --pmu-text-xl:   1.375rem;  /* h4                              */
  --pmu-text-2xl:  1.75rem;   /* h3                              */
  --pmu-text-3xl:  2.125rem;  /* h2                              */
  --pmu-text-4xl:  2.75rem;   /* h1                              */
  --pmu-text-5xl:  3.5rem;    /* hero de portada                 */

  --pmu-leading-tight:  1.18;
  --pmu-leading-snug:   1.35;
  --pmu-leading-normal: 1.65;  /* mínimo cómodo para cuerpo largo */

  --pmu-weight-regular:  400;
  --pmu-weight-medium:   500;
  --pmu-weight-semibold: 600;
  --pmu-weight-bold:     700;

  --pmu-tracking-wide: 0.08em;  /* sobrelíneas en caja alta */

  /* ---------- 9. Espaciado (escala de 4px) -------------------------------- */
  --pmu-space-1: 0.25rem;  /*  4px */
  --pmu-space-2: 0.5rem;   /*  8px */
  --pmu-space-3: 0.75rem;  /* 12px */
  --pmu-space-4: 1rem;     /* 16px */
  --pmu-space-5: 1.5rem;   /* 24px */
  --pmu-space-6: 2rem;     /* 32px */
  --pmu-space-7: 3rem;     /* 48px */
  --pmu-space-8: 4rem;     /* 64px */
  --pmu-space-9: 6rem;     /* 96px */

  /* ---------- 10. Layout -------------------------------------------------- */
  --pmu-container:      1200px;  /* ancho máximo del sitio          */
  --pmu-container-text: 68ch;    /* ancho de lectura para artículos */
  --pmu-gutter:         var(--pmu-space-5);
  --pmu-tap-min:        44px;    /* área táctil mínima, WCAG 2.5.8  */

  /* Breakpoints (referencia; en @media van literales porque las custom
     properties no se pueden usar ahí)
     sm 480px · md 768px · lg 1024px · xl 1280px */

  /* ---------- 11. Bordes y sombras ---------------------------------------- */
  --pmu-radius-sm: 4px;
  --pmu-radius-md: 8px;
  --pmu-radius-lg: 16px;
  --pmu-radius-pill: 999px;

  --pmu-shadow-sm: 0 1px 2px rgba(10, 71, 112, 0.08);
  --pmu-shadow-md: 0 4px 12px rgba(10, 71, 112, 0.10);
  --pmu-shadow-lg: 0 12px 32px rgba(10, 71, 112, 0.14);

  /* ---------- 12. Foco visible -------------------------------------------- */
  /* WCAG 2.4.7 (foco visible) + 1.4.11 (contraste no textual, 3:1).
     El amarillo solo NO alcanza sobre fondo claro (1.59:1), así que el
     indicador es de DOBLE TONO: anillo oscuro que garantiza el contraste
     contra la página + halo amarillo que aporta la identidad de marca.
       blue-900 vs blanco   9.78:1 ✓
       blue-900 vs amarillo 6.15:1 ✓ (contraste entre los dos anillos) */
  --pmu-focus-color:     var(--pmu-blue-900);
  --pmu-focus-halo:      var(--pmu-yellow-400);
  --pmu-focus-width:     3px;
  --pmu-focus-halo-width:6px;
  --pmu-focus-offset:    2px;

  /* ---------- 13. Profundidad (z-index) ------------------------------------ */
  --pmu-z-base:     0;
  --pmu-z-sticky:   100;   /* header adherido        */
  --pmu-z-dropdown: 200;   /* submenús               */
  --pmu-z-overlay:  300;   /* velo de modal          */
  --pmu-z-modal:    400;
  --pmu-z-toast:    500;
  --pmu-z-skiplink: 600;   /* siempre por encima     */

  /* ---------- 14. Motion ---------------------------------------------------- */
  --pmu-ease:         cubic-bezier(0.2, 0, 0.2, 1);
  --pmu-duration-fast:120ms;  /* hover, cambios de color      */
  --pmu-duration:     180ms;  /* por defecto                  */
  --pmu-duration-slow:280ms;  /* acordeones, paneles          */
}

/* Respeto de preferencias del usuario */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pmu-duration-fast: 0ms; --pmu-duration: 0ms; --pmu-duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 112.5%; }               /* 18px de base */

body {
  margin: 0;
  font-family: var(--pmu-font-text);
  font-size: var(--pmu-text-base);
  line-height: var(--pmu-leading-normal);
  color: var(--pmu-ink);
  background: var(--pmu-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--pmu-font-display);
  color: var(--pmu-blue-700);
  line-height: var(--pmu-leading-tight);
  font-weight: var(--pmu-weight-semibold);
  text-wrap: balance;
}
h1 { font-size: var(--pmu-text-4xl); }
h2 { font-size: var(--pmu-text-3xl); }
h3 { font-size: var(--pmu-text-2xl); }
h4 { font-size: var(--pmu-text-xl); }

/* La escala de arriba está pensada para escritorio y hasta acá era la misma en
   todos lados. En un teléfono no cerraba: el <h1> de una nota son 49,5px, y
   con eso un titular real ("La Mesa Ejecutiva del Plenario de Municipios se
   reunió en el municipio de Progreso") medía 409px de alto en un viewport de
   390 — media pantalla de título antes de la primera línea de texto.

   Se corrige en los TOKENS y no componente por componente: los títulos de
   tarjetas, de módulos de la barra lateral y de los bloques de la portada
   salen todos de estas mismas variables, así que baja todo junto y la
   proporción entre niveles se mantiene. El cuerpo (base/lg/sm) no se toca: es
   el tamaño de lectura y ya está bien. */
@media (max-width: 767px) {
  :root {
    --pmu-text-5xl: 2.25rem;    /* 63   → 40,5px */
    --pmu-text-4xl: 1.875rem;   /* 49,5 → 33,75px */
    --pmu-text-3xl: 1.5rem;     /* 38,25 → 27px */
    --pmu-text-2xl: 1.3125rem;  /* 31,5 → 23,6px */
    --pmu-text-xl:  1.25rem;    /* 24,75 → 22,5px */
  }
}

p { max-width: var(--pmu-container-text); }

a {
  color: var(--pmu-blue-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--pmu-blue-900); }

img { max-width: 100%; height: auto; }


/* ==========================================================================
   FOCO — doble tono, cumple WCAG 2.4.7 y 1.4.11
   ========================================================================== */

:focus { outline: none; }               /* solo :focus-visible pinta */

:focus-visible {
  outline: var(--pmu-focus-width) solid var(--pmu-focus-color);
  outline-offset: var(--pmu-focus-offset);
  box-shadow: 0 0 0 var(--pmu-focus-halo-width) var(--pmu-focus-halo);
  border-radius: var(--pmu-radius-sm);
}

/* Sobre fondo oscuro se invierte: el anillo oscuro desaparecería */
.pmu-inverso :focus-visible {
  outline-color: var(--pmu-on-dark);
  box-shadow: 0 0 0 var(--pmu-focus-halo-width) var(--pmu-focus-halo);
}

/* Enlace "saltar al contenido" — primer elemento del <body> */
.pmu-skip-link {
  position: absolute; left: -9999px;
  background: var(--pmu-blue-900); color: var(--pmu-on-dark);
  padding: var(--pmu-space-3) var(--pmu-space-4);
  border-radius: var(--pmu-radius-md);
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  text-decoration: none;
}
.pmu-skip-link:focus {
  left: var(--pmu-space-4); top: var(--pmu-space-4);
  z-index: var(--pmu-z-skiplink);
}


/* ==========================================================================
   CONTEXTO INVERSO — secciones sobre fondo azul oscuro
   ========================================================================== */

.pmu-inverso {
  background: var(--pmu-surface-dark);
  color: var(--pmu-on-dark);
}
.pmu-inverso h1, .pmu-inverso h2, .pmu-inverso h3, .pmu-inverso h4 { color: var(--pmu-on-dark); }
.pmu-inverso p  { color: var(--pmu-on-dark-soft); }
.pmu-inverso a  { color: var(--pmu-on-dark); }
.pmu-inverso a:hover { color: var(--pmu-yellow-400); }
.pmu-inverso .pmu-sobrelinea { color: var(--pmu-yellow-400); }


/* ==========================================================================
   TIPOGRAFÍA AUXILIAR
   ========================================================================== */

.pmu-sobrelinea {
  font-family: var(--pmu-font-display);
  font-size: var(--pmu-text-xs);
  font-weight: var(--pmu-weight-semibold);
  letter-spacing: var(--pmu-tracking-wide);
  text-transform: uppercase;
  color: var(--pmu-blue-600);
  margin: 0 0 var(--pmu-space-2);
}
.pmu-bajada  { font-size: var(--pmu-text-lg); color: var(--pmu-ink-soft); }
.pmu-meta    { font-size: var(--pmu-text-sm); color: var(--pmu-ink-muted); }
.pmu-accent-bar { height: 5px; background: var(--pmu-yellow-400); }


/* ==========================================================================
   BOTONES
   ========================================================================== */

.pmu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--pmu-space-2);
  min-height: var(--pmu-tap-min);
  padding: var(--pmu-space-3) var(--pmu-space-5);
  font-family: var(--pmu-font-display);
  font-size: var(--pmu-text-base);
  font-weight: var(--pmu-weight-semibold);
  line-height: 1.2;
  border-radius: var(--pmu-radius-md);
  border: 2px solid transparent;
  background: var(--pmu-blue-600);   /* NO blue-500: con texto blanco da 4.03:1 */
  color: var(--pmu-on-dark);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pmu-duration-fast) var(--pmu-ease);
}
.pmu-btn:hover  { background: var(--pmu-blue-900); color: var(--pmu-on-dark); }
.pmu-btn:active { background: var(--pmu-blue-900); transform: translateY(1px); }
.pmu-btn[disabled], .pmu-btn[aria-disabled="true"] {
  background: var(--pmu-blue-100); color: var(--pmu-ink-muted);
  cursor: not-allowed; transform: none;
}

.pmu-btn--secundario {
  background: transparent; color: var(--pmu-blue-700);
  border-color: var(--pmu-blue-600);
}
.pmu-btn--secundario:hover { background: var(--pmu-blue-050); color: var(--pmu-blue-900); }

.pmu-btn--acento {                    /* CTA sobre fondo oscuro */
  background: var(--pmu-yellow-400); color: var(--pmu-ink);   /* 11.16:1 ✓AAA */
}
.pmu-btn--acento:hover { background: var(--pmu-yellow-700); color: var(--pmu-ink); }

.pmu-btn--sm { min-height: 36px; padding: var(--pmu-space-2) var(--pmu-space-4); font-size: var(--pmu-text-sm); }
.pmu-btn--lg { padding: var(--pmu-space-4) var(--pmu-space-6); font-size: var(--pmu-text-lg); }

.pmu-inverso .pmu-btn--secundario { color: var(--pmu-on-dark); border-color: var(--pmu-on-dark-soft); }
.pmu-inverso .pmu-btn--secundario:hover { background: var(--pmu-overlay-soft); color: var(--pmu-on-dark); }


/* ==========================================================================
   CAMPOS DE FORMULARIO
   El sitio tiene formulario de contacto: el borde debe cumplir 1.4.11 (3:1),
   por eso usa --pmu-border-strong y no --pmu-border.
   ========================================================================== */

.pmu-campo { margin-bottom: var(--pmu-space-5); max-width: 40rem; }

.pmu-campo label {
  display: block;
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  font-size: var(--pmu-text-sm);
  color: var(--pmu-ink);
  margin-bottom: var(--pmu-space-2);
}
.pmu-campo .pmu-requerido { color: var(--pmu-danger); margin-left: 2px; }

.pmu-campo input[type="text"], .pmu-campo input[type="email"],
.pmu-campo input[type="tel"],  .pmu-campo input[type="search"],
.pmu-campo textarea, .pmu-campo select {
  width: 100%;
  min-height: var(--pmu-tap-min);
  padding: var(--pmu-space-3);
  font-family: var(--pmu-font-text);
  font-size: var(--pmu-text-base);
  color: var(--pmu-ink);
  background: var(--pmu-surface);
  border: 1px solid var(--pmu-border-strong);   /* 3.48:1 ✓ */
  border-radius: var(--pmu-radius-md);
  transition: border-color var(--pmu-duration-fast) var(--pmu-ease);
}
.pmu-campo textarea { min-height: 8rem; resize: vertical; }
.pmu-campo input:hover, .pmu-campo textarea:hover, .pmu-campo select:hover {
  border-color: var(--pmu-blue-600);
}
.pmu-campo input::placeholder, .pmu-campo textarea::placeholder {
  color: var(--pmu-ink-muted);            /* 5.46:1, legible ✓ */
}
.pmu-campo input[disabled], .pmu-campo textarea[disabled] {
  background: var(--pmu-blue-050); color: var(--pmu-ink-muted); cursor: not-allowed;
}

.pmu-campo .pmu-ayuda {
  display: block; margin-top: var(--pmu-space-2);
  font-size: var(--pmu-text-sm); color: var(--pmu-ink-soft);
}

/* Error: nunca solo por color — icono + texto (WCAG 1.4.1) */
.pmu-campo--error input, .pmu-campo--error textarea, .pmu-campo--error select {
  border-color: var(--pmu-danger); border-width: 2px;
}
.pmu-campo .pmu-error {
  display: flex; align-items: flex-start; gap: var(--pmu-space-2);
  margin-top: var(--pmu-space-2);
  font-size: var(--pmu-text-sm); font-weight: var(--pmu-weight-semibold);
  color: var(--pmu-danger);
}
.pmu-campo .pmu-error::before { content: "⚠"; line-height: 1.4; }


/* ==========================================================================
   TARJETA
   ========================================================================== */

.pmu-tarjeta {
  background: var(--pmu-surface);
  border: 1px solid var(--pmu-border);
  border-radius: var(--pmu-radius-md);
  box-shadow: var(--pmu-shadow-sm);
  padding: var(--pmu-space-5);
  transition: border-color var(--pmu-duration) var(--pmu-ease),
              box-shadow    var(--pmu-duration) var(--pmu-ease);
}
.pmu-tarjeta:hover { border-color: var(--pmu-blue-200); box-shadow: var(--pmu-shadow-md); }
.pmu-tarjeta h3, .pmu-tarjeta h4 { margin-top: 0; }

/* Tarjeta enlazada entera: el <a> del título cubre la tarjeta, pero el
   texto accesible sigue siendo solo el título. */
.pmu-tarjeta--enlace { position: relative; }
.pmu-tarjeta--enlace a::after { content: ""; position: absolute; inset: 0; }


/* ==========================================================================
   DESTACADO / MENSAJES
   ========================================================================== */

.pmu-callout {
  background: var(--pmu-yellow-100);
  border-left: 5px solid var(--pmu-yellow-400);
  color: var(--pmu-ink);
  padding: var(--pmu-space-5);
  border-radius: 0 var(--pmu-radius-md) var(--pmu-radius-md) 0;
}

.pmu-mensaje {
  display: flex; gap: var(--pmu-space-3);
  padding: var(--pmu-space-4) var(--pmu-space-5);
  border-left: 5px solid currentColor;
  border-radius: 0 var(--pmu-radius-md) var(--pmu-radius-md) 0;
  font-size: var(--pmu-text-sm);
}
.pmu-mensaje--info    { background: var(--pmu-info-bg);    color: var(--pmu-info); }
.pmu-mensaje--exito   { background: var(--pmu-success-bg); color: var(--pmu-success); }
.pmu-mensaje--aviso   { background: var(--pmu-warning-bg); color: var(--pmu-warning); }
.pmu-mensaje--error   { background: var(--pmu-danger-bg);  color: var(--pmu-danger); }
.pmu-mensaje p { color: var(--pmu-ink); margin: 0; }


/* ==========================================================================
   ETIQUETA / FILTRO
   ========================================================================== */

.pmu-etiqueta {
  display: inline-flex; align-items: center; gap: var(--pmu-space-2);
  padding: var(--pmu-space-1) var(--pmu-space-3);
  font-family: var(--pmu-font-display);
  font-size: var(--pmu-text-xs);
  font-weight: var(--pmu-weight-semibold);
  letter-spacing: .02em;
  color: var(--pmu-blue-700);
  background: var(--pmu-blue-050);
  border: 1px solid var(--pmu-blue-200);
  border-radius: var(--pmu-radius-pill);
  text-decoration: none;
}
a.pmu-etiqueta { min-height: 32px; }
a.pmu-etiqueta:hover { background: var(--pmu-blue-200); color: var(--pmu-blue-900); }
.pmu-etiqueta[aria-pressed="true"], .pmu-etiqueta--activa {
  background: var(--pmu-blue-700); border-color: var(--pmu-blue-700);
  color: var(--pmu-on-dark);
}


/* ==========================================================================
   TABLA — sesiones, documentos, municipios
   ========================================================================== */

.pmu-tabla-scroll { overflow-x: auto; }   /* en móvil la tabla se desplaza */

.pmu-tabla {
  width: 100%; border-collapse: collapse;
  font-size: var(--pmu-text-sm);
}
.pmu-tabla caption {
  text-align: left; padding-bottom: var(--pmu-space-3);
  font-size: var(--pmu-text-sm); color: var(--pmu-ink-soft);
}
.pmu-tabla th, .pmu-tabla td {
  text-align: left; padding: var(--pmu-space-3);
  border-bottom: 1px solid var(--pmu-border);
}
.pmu-tabla thead th {
  font-family: var(--pmu-font-display);
  color: var(--pmu-blue-700);
  border-bottom: 2px solid var(--pmu-blue-200);
  white-space: nowrap;
}
.pmu-tabla tbody tr:nth-child(even) { background: var(--pmu-blue-050); }
.pmu-tabla tbody tr:hover { background: var(--pmu-blue-100); }


/* ==========================================================================
   PAGINACIÓN Y MIGA DE PAN
   ========================================================================== */

.pmu-paginacion { display: flex; flex-wrap: wrap; gap: var(--pmu-space-2); list-style: none; padding: 0; }
.pmu-paginacion a, .pmu-paginacion span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--pmu-tap-min); min-height: var(--pmu-tap-min);
  padding: 0 var(--pmu-space-3);
  border: 1px solid var(--pmu-border-strong);
  border-radius: var(--pmu-radius-md);
  text-decoration: none; color: var(--pmu-blue-700);
}
.pmu-paginacion a:hover { background: var(--pmu-blue-050); }
.pmu-paginacion [aria-current="page"] {
  background: var(--pmu-blue-700); border-color: var(--pmu-blue-700);
  color: var(--pmu-on-dark); font-weight: var(--pmu-weight-semibold);
}

.pmu-migas { font-size: var(--pmu-text-sm); color: var(--pmu-ink-soft); }
.pmu-migas ol { display: flex; flex-wrap: wrap; gap: var(--pmu-space-2); list-style: none; padding: 0; margin: 0; }
.pmu-migas li + li::before { content: "›"; margin-right: var(--pmu-space-2); color: var(--pmu-ink-muted); }
.pmu-migas [aria-current="page"] { color: var(--pmu-ink); font-weight: var(--pmu-weight-semibold); }


/* ==========================================================================
   UTILIDADES
   ========================================================================== */

.pmu-contenedor { max-width: var(--pmu-container); margin-inline: auto; padding-inline: var(--pmu-gutter); }
.pmu-prosa      { max-width: var(--pmu-container-text); }
.pmu-solo-lector {                       /* visible solo para lectores de pantalla */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ==========================================================================
   MENÚ PRINCIPAL — accesibilidad de teclado (auditoría agosto 2026)
   El submenú de Helix Ultimate solo abre con :hover. Con teclado, Tab llega
   al link del padre pero nunca revela los hijos. Se agrega :focus-within
   como equivalente accesible del hover, sin JS: al tabular hacia cualquier
   link del submenú (el propio disparador incluido) el desplegable se hace
   visible. Los 4 ítems padre ("Gestión", "Institucional", "Municipios",
   "Comunicación") ahora son enlaces reales (tipo Alias a su primer hijo, ver
   migración de menú) — antes 2 eran href="#" (no llevaban a ningún lado) y
   los otros 2 ni siquiera eran focuseables (type=separator → <span>). */

.sp-megamenu-parent .sp-has-child:focus-within > .sp-dropdown {
  display: block;
}

/* El header "predefined" arma #sp-logo y #sp-menu como columnas de un mismo
   .row, pero Bootstrap las deja con flex-wrap:wrap por defecto. A los anchos
   reales (logo + nav + buscador + sign in) eso las manda a líneas separadas
   — y como #sp-header tiene una altura fija (line-height:$header_height),
   esa segunda línea se desborda por fuera de la caja del header y termina
   pisando el contenido de la página (reportado agosto 2026: el sidebar de
   "Régimen municipal" quedaba tapado por el menú en pantallas anchas).
   nowrap los pone en una sola fila: el menú tiene lugar de sobra porque su
   contenido real es mucho más angosto que el ancho de columna que le da el
   layout. (Intento anterior: se había revertido por un falso positivo — el
   menú "desaparecía", pero era el bug de menu_text_color:#fff sobre fondo
   blanco, ya corregido aparte.) */
@media (min-width: 992px) {
  #sp-header .row.align-items-center {
    flex-wrap: nowrap;
  }

  #sp-menu {
    min-width: 0;
  }

  /* Root cause del solapamiento real (auditoría 1920px): con el buscador a
     ancho libre (form-control: 100%), compite por espacio con el <ul> del
     menú — que no es flex, así que en vez de encogerse sus <li> "envuelven"
     a una segunda línea interna. El menú nunca debe envolver: se le fija
     flex-shrink:0 y en cambio se dej a encoger al buscador. */
  .sp-megamenu-wrapper.d-flex {
    flex-shrink: 0;
  }

  #sp-menu .header-modules {
    flex-shrink: 1;
    min-width: 0;
  }

  #sp-menu .header-modules .search {
    min-width: 0;
  }

  #sp-menu .header-modules .js-finder-search-query {
    width: 100%;
    max-width: 160px;
    min-width: 0;
  }

  /* Mismo bug, otro elemento (auditoría agosto 2026): el bloque de
     "Sign In" (ícono + texto) queda, igual que el buscador, como hijo flex
     de .header-modules sin proteger — se encoge por debajo del ancho que
     necesita su contenido y el texto "Sign In" hace wrap a una segunda
     línea (ícono arriba, texto abajo), en el header normal y en el sticky.
     Nunca debe envolver: es texto corto, tiene que ceder el buscador, no
     esto. */
  #sp-menu .header-modules .sp-module:has(.sp-sign-in),
  #sp-menu .header-modules .sp-module:has(.sp-profile-wrapper) {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Tercer y cuarto caso del mismo bug de contraste (auditoría agosto 2026,
     encontrado logueando un usuario de prueba): ni el "Ingresar" del
     invitado (.sp-sign-in suelto) ni el disparador del perfil logueado
     (.sp-profile-wrapper > .sp-sign-in: ícono + nombre + flecha) están
     cubiertos por menu_text_color — los dos caen en el color de link
     genérico del sitio (--pmu-blue-600, pensado para texto sobre blanco)
     sobre el mismo fondo oscuro del header. El panel desplegable del
     logueado en sí (fondo blanco, "Mi perfil"/"Cerrar sesión") está bien —
     ese sí hereda menu_dropdown_text_color correctamente, no se toca.
     Sin scopear a #sp-header a propósito: ya alcanza con que esta regla
     viva dentro de este mismo @media (min-width: 992px) — a los anchos
     donde .sp-sign-in se repite dentro del offcanvas (fondo blanco), este
     bloque no aplica en absoluto. */
  .sp-sign-in,
  .sp-profile-wrapper > .sp-sign-in {
    color: var(--pmu-on-dark, #fff);
  }
  .sp-sign-in:hover,
  .sp-sign-in:focus {
    color: var(--pmu-yellow-400, #f6c828);
  }

  /* Logueado (auditoría agosto 2026, verificado con usuario de prueba): el
     nombre completo del usuario se imprime sin ningún límite de ancho —
     con un nombre largo (no es un caso raro: "María Fernanda Rodríguez")
     se come el espacio del buscador, que queda reducido a unos px (solo se
     alcanza a ver la primera letra del placeholder). Se trunca con
     ellipsis; el nombre completo sigue disponible como texto real para
     lector de pantalla/selección, no se pierde información, solo se
     recorta lo visual. */
  .user-text {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  /* menu_type: mega_offcanvas hace que el template agregue el ícono
     hamburguesa (#offcanvas-toggler) SIEMPRE, sin la clase d-lg-none que sí
     usa para menu_type: mega — es así en el código del template, no un
     bug de nuestro CSS. En desktop el menú principal ya está visible
     entero al lado; el hamburguesa ahí no tiene función, solo confunde
     (parece un acceso a "más opciones" que no hace nada distinto). Se
     oculta a partir del breakpoint donde el menú deja de ser offcanvas
     (auditoría agosto 2026). */
  #offcanvas-toggler {
    display: none !important;
  }
}

/* ==========================================================================
   INGRESAR / PERFIL EN EL MENÚ OFFCANVAS (mobile) — agosto 2026
   renderLogin() (features/menu.php) es el mismo bloque que en el header
   desktop, activado acá vía el parámetro offcanvas_enable_login. Pero el
   texto ("Ingresar", o el nombre del usuario logueado) viene con la clase
   vendor "d-none d-lg-inline-block" — pensada para el header, donde a veces
   sólo hay lugar para el ícono. Dentro del offcanvas siempre hay ancho de
   sobra (panel de columna única): sin esto quedaba un ícono de usuario
   solo, sin ninguna etiqueta que diga qué es.
   template.css (vendor, compilado) además trae una regla propia y explícita
   ocultando este texto ahí adentro (.offcanvas-menu .offcanvas-inner
   .sp-sign-in .signin-text, 4 clases de especificidad) — se le empareja la
   especificidad para ganarle; alcanza con eso porque custom.css se carga
   después en el <head>. */
.offcanvas-menu .offcanvas-inner .sp-sign-in .signin-text,
.offcanvas-menu .offcanvas-inner .sp-profile-wrapper .user-text {
  display: inline-block !important;
}


/* ==========================================================================
   CONTACTO Y REDES EN MOBILE — agosto 2026
   La barra superior medía 120px en un teléfono: los íconos de redes (26px)
   más la lista de contacto entera apilada —teléfono, correo y horario, 78px—
   antes de que empiece el sitio. Nadie entra a la home a leer el horario de
   atención, y menos ahí arriba.

   Reparto nuevo, sólo para mobile:
   · La barra deja SÓLO las redes (regla de acá abajo). Baja a ~42px.
   · Contacto y redes se repiten dentro del menú hamburguesa, que es donde
     alguien los va a ir a buscar. Eso NO se dibuja acá: lo dibuja el propio
     template a partir de dos parámetros que estaban apagados, ver
     scripts/plantilla/activar-offcanvas-movil.php. Acá sólo se les da forma,
     porque los estilos que traen son los del topbar —fondo oscuro, texto de
     12,6px, área táctil de 19px— y el offcanvas es blanco.

   No hace falta acotar el bloque del offcanvas a un @media: el disparador
   (#offcanvas-toggler) ya está oculto de 992px para arriba, así que ese panel
   no existe en escritorio.
   ========================================================================== */

@media (max-width: 991px) {
  #sp-top-bar .sp-contact-info { display: none; }
}

/* Separado del menú con una línea: son otra cosa, no un ítem más. */
.offcanvas-menu .offcanvas-inner .sp-contact-info {
  margin-top: var(--pmu-space-5);
  padding: var(--pmu-space-4) 0 0;
  border-top: 1px solid var(--pmu-border);
  list-style: none;
  font-size: var(--pmu-text-sm);
}
.offcanvas-menu .offcanvas-inner .sp-contact-info li {
  display: flex;
  align-items: center;
  gap: var(--pmu-space-3);
  margin: 0;
  min-height: var(--pmu-tap-min);
  color: var(--pmu-ink);
  /* Los ítems vienen con white-space:nowrap, que en la fila del topbar tiene
     sentido y acá impide cualquier corte: el correo se dibujaba en una sola
     línea, fuera de su caja y tapado por el borde del panel. */
  white-space: normal;
}
.offcanvas-menu .offcanvas-inner .sp-contact-info [class*="fa-"] {
  flex: 0 0 1.25em;
  color: var(--pmu-blue-600);
  text-align: center;
}
/* El correo son 44 caracteres en un panel de 250px útiles: sin esto se sale
   de la caja en vez de cortarse. overflow-wrap solo no alcanza — el <a> es
   ítem flex del <li> y arranca con min-width:auto, que le prohíbe achicarse
   por debajo del ancho de su contenido. */
.offcanvas-menu .offcanvas-inner .sp-contact-info a {
  min-width: 0;
  color: var(--pmu-blue-600);
  overflow-wrap: anywhere;
}

/* Área táctil de 44px (WCAG 2.5.8): venían como texto suelto de 19px de alto
   con 20px de separación entre uno y otro. También hay que anular el
   margin-right del vendor, pensado para la fila del topbar. */
.offcanvas-menu .offcanvas-inner ul.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pmu-space-1);
  margin-top: var(--pmu-space-2);
}
.offcanvas-menu .offcanvas-inner ul.social-icons > li,
.offcanvas-menu .offcanvas-inner ul.social-icons > li:not(:last-child) {
  margin: 0;
}
.offcanvas-menu .offcanvas-inner ul.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pmu-tap-min);
  height: var(--pmu-tap-min);
  border-radius: var(--pmu-radius-pill);
  color: var(--pmu-blue-600);
  font-size: var(--pmu-text-lg);
}
.offcanvas-menu .offcanvas-inner ul.social-icons a:hover,
.offcanvas-menu .offcanvas-inner ul.social-icons a:focus-visible {
  background: var(--pmu-blue-050);
  color: var(--pmu-blue-900);
}

/* Red de seguridad: si por algún motivo el menú igual envuelve (viewport muy
   angosto en el rango de escritorio, un ítem de menú futuro más largo,
   etc.), que el header CREZCA en vez de dejar la segunda línea flotando
   suelta y pisando el contenido de abajo. Sin este fix, #sp-header tiene
   una altura fija (height:$header_height) con overflow:visible: cualquier
   contenido más alto se desborda por fuera de su propia caja. */
#sp-header {
  height: auto;
  min-height: 70px;
}

/* auditoría agosto 2026 — corrección del contraste real del menú:
   el fondo del menú SIEMPRE fue azul oscuro (#sp-header{background:#0a4770},
   confirmado en el CSS compilado — nunca hubo un override blanco para
   #sp-menu/.sp-megamenu-parent). Lo que parecía "nav blanco" en capturas
   anteriores era el bug de overflow ya corregido arriba: el menú se
   escapaba de la caja oscura del header y quedaba flotando sobre el fondo
   blanco de la página de abajo. Al arreglar el overflow, volvió a su fondo
   real — y el texto oscuro (#111827, pensado para fondo blanco) quedó
   ilegible: texto oscuro sobre fondo oscuro, en normal/hover/activo, en el
   header normal y en el sticky (mismo #sp-header, sin regla propia para
   .header-sticky). Se corrige vía parámetros de plantilla
   (menu_text_color/hover/active), no acá — el amarillo de marca vuelve a
   ser el color del texto activo/hover (sobre fondo oscuro SÍ cumple
   contraste, a diferencia de sobre blanco, que es donde el BRANDBOOK.md
   §3.2 lo prohíbe). El subrayado en box-shadow que había acá quedaba
   redundante con el texto ya amarillo — se saca. */


/* ==========================================================================
   PÁGINAS DE CONTENIDO SPPB — estructura de 2 columnas (agosto 2026)
   Las páginas migradas (Régimen municipal y análogas) eran una sola columna
   a todo el ancho: texto corrido de ~1300px de línea (muy por arriba del
   --pmu-container-text del manual) y sin encabezado propio ni jerarquía.
   Se les agrega encabezado editorial + columna lateral con los módulos
   reutilizables ("Plenario en Red" y "Noticias más vistas", insertados vía
   el addon "Módulo de Joomla" de SPPB). ========================================================================== */

.pmu-encabezado-pagina {
  margin-bottom: var(--pmu-space-6);
}
.pmu-encabezado-pagina h1 {
  margin: 0;
  color: var(--pmu-blue-700);
  font-size: var(--pmu-text-4xl);
}

/* El addon "raw_html" con el cuerpo migrado no tiene ancho de lectura propio
   (hereda el 100% de la columna SPPB) — se lo acotamos igual que .pmu-prosa
   sin tocar el HTML migrado. */
.sppb-addon-content > p {
  max-width: var(--pmu-container-text);
}

.pmu-sidebar-modulo {
  margin-bottom: var(--pmu-space-6);
}
.pmu-sidebar-modulo .sppb-addon-title {
  font-family: var(--pmu-font-display);
  font-size: var(--pmu-text-lg);
  font-weight: var(--pmu-weight-semibold);
  color: var(--pmu-blue-700);
  margin: 0 0 var(--pmu-space-4);
  padding-bottom: var(--pmu-space-3);
  border-bottom: 2px solid var(--pmu-yellow-400);
}

/* "Plenario en Red" — iconos circulares, mismo set que el header. */
.pmu-social-modulo {
  display: flex; flex-wrap: wrap; gap: var(--pmu-space-3);
  list-style: none; padding: 0; margin: 0;
}
.pmu-social-modulo__enlace {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pmu-tap-min); height: var(--pmu-tap-min);
  border-radius: var(--pmu-radius-pill);
  background: var(--pmu-blue-600); color: var(--pmu-on-dark);
  font-size: 1.125rem;
  text-decoration: none;
  transition: background var(--pmu-duration-fast) var(--pmu-ease);
}
.pmu-social-modulo__enlace:hover { background: var(--pmu-blue-900); color: var(--pmu-on-dark); }

/* "Noticias más vistas" — 1 destacada grande (con foto) + el resto en filas
   compactas (miniatura + texto), igual criterio que el sitio anterior. Las
   notas sin imagen (falta en la migración, o nota vieja sin foto cargada)
   degradan con prolijidad: la destacada usa el motivo espiral de marca
   como fondo (BRANDBOOK.md §5.2) en vez de dejar un hueco, y las filas
   simplemente no muestran miniatura. */

.pmu-vistas__destacada {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--pmu-radius-md);
  aspect-ratio: 4 / 3;
  text-decoration: none;
  background: var(--pmu-blue-900);
  margin-bottom: var(--pmu-space-5);
}
.pmu-vistas__destacada-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--pmu-duration-slow) var(--pmu-ease);
}
.pmu-vistas__destacada:hover .pmu-vistas__destacada-img { transform: scale(1.04); }
.pmu-vistas__destacada--sin-imagen {
  background-image: radial-gradient(circle at 85% 15%, var(--pmu-blue-700) 0%, var(--pmu-blue-900) 60%);
}
.pmu-vistas__destacada-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,71,112,0) 40%, rgba(10,71,112,.92) 100%);
}
.pmu-vistas__destacada-texto {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--pmu-space-2);
  padding: var(--pmu-space-5);
}
.pmu-vistas__destacada-categoria {
  background: var(--pmu-yellow-400); border-color: var(--pmu-yellow-400); color: var(--pmu-ink);
}
.pmu-vistas__destacada-titulo {
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  font-size: var(--pmu-text-xl);
  line-height: var(--pmu-leading-snug);
  color: var(--pmu-on-dark);
}
.pmu-vistas__destacada-fecha { color: var(--pmu-on-dark-soft); font-size: var(--pmu-text-sm); }

.pmu-vistas__lista { list-style: none; padding: 0; margin: 0; }
.pmu-vistas__item + .pmu-vistas__item { margin-top: var(--pmu-space-4); padding-top: var(--pmu-space-4); border-top: 1px solid var(--pmu-border); }
.pmu-vistas__fila { display: flex; gap: var(--pmu-space-3); align-items: flex-start; text-decoration: none; }
.pmu-vistas__miniatura {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  border-radius: var(--pmu-radius-sm);
  object-fit: cover;
}
.pmu-vistas__fila-texto { min-width: 0; }
.pmu-vistas__categoria { margin-bottom: var(--pmu-space-2); }
.pmu-vistas__titulo {
  display: block;
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  color: var(--pmu-ink);
  line-height: var(--pmu-leading-snug);
}
.pmu-vistas__fila:hover .pmu-vistas__titulo { color: var(--pmu-blue-700); }
.pmu-vistas__fecha { display: block; margin-top: var(--pmu-space-1); }

/* Documentos adjuntos (migración K2 → com_content, ver
   scripts/migracion-k2) — sin estilo propio hasta ahora, quedaba como una
   lista de link suelta. */
.pmu-adjuntos {
  margin-top: var(--pmu-space-7);
  padding-top: var(--pmu-space-6);
  border-top: 1px solid var(--pmu-border);
}
.pmu-adjuntos__titulo {
  font-size: var(--pmu-text-xl);
  color: var(--pmu-blue-700);
  margin: 0 0 var(--pmu-space-4);
}
.pmu-adjuntos__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--pmu-space-3); }
.pmu-adjuntos__enlace {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pmu-space-2) var(--pmu-space-3);
  padding: var(--pmu-space-3) var(--pmu-space-4);
  background: var(--pmu-surface-alt);
  border: 1px solid var(--pmu-border);
  border-radius: var(--pmu-radius-md);
  color: var(--pmu-blue-700);
  text-decoration: none;
  min-height: var(--pmu-tap-min);
}
.pmu-adjuntos__enlace::before {
  content: "\f019";                       /* fa-download */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--pmu-blue-600);
  flex: 0 0 auto;
}
.pmu-adjuntos__enlace:hover { border-color: var(--pmu-blue-200); background: var(--pmu-blue-050); }
/* Nombres de archivo largos (PDFs con nombres descriptivos) desbordaban la
   tarjeta en mobile — inline-flex no respeta el ancho del contenedor y sus
   hijos no envuelven por defecto (auditoría agosto 2026, "Plan Operativo
   Anual" con 3 adjuntos de nombre largo). */
.pmu-adjuntos__nombre {
  font-weight: var(--pmu-weight-semibold);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.pmu-adjuntos__meta { color: var(--pmu-ink-muted); font-size: var(--pmu-text-sm); }


/* ==========================================================================
   LOGIN (com_users) — auditoría agosto 2026
   El core de Joomla renderiza el formulario sin ningún diseño propio: una
   columna Bootstrap .col-lg-4 angosta, pegada a la izquierda, con el <h1>
   heredando el título del ítem "Inicio" (por eso también se creó un ítem de
   menú oculto — ver scripts/menu-sppb/crear-item-login-oculto.php). Acá
   solo el layout/estilo — reusa los mismos tokens que .pmu-campo/.pmu-btn,
   sin tocar ninguna vista de com_users (selectores estables del núcleo:
   #com-users-login__form, .view-login en el <body>). ========================================================================== */

.view-login .col-lg-4 {
  float: none;
  margin-inline: auto;
  max-width: 440px;
}

.view-login h1 {
  text-align: center;
}

.view-login #com-users-login__form {
  background: var(--pmu-surface);
  border: 1px solid var(--pmu-border);
  border-radius: var(--pmu-radius-md);
  box-shadow: var(--pmu-shadow-sm);
  padding: var(--pmu-space-6);
}

.view-login #com-users-login__form label {
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  font-size: var(--pmu-text-sm);
  color: var(--pmu-ink);
  margin-bottom: var(--pmu-space-2);
}

.view-login #com-users-login__form input[type="text"],
.view-login #com-users-login__form input[type="password"],
.view-login #com-users-login__form input[type="email"] {
  width: 100%;
  min-height: var(--pmu-tap-min);
  padding: var(--pmu-space-3);
  font-size: var(--pmu-text-base);
  border: 1px solid var(--pmu-border-strong);
  border-radius: var(--pmu-radius-md);
}

.view-login #com-users-login__form .btn-primary {
  width: 100%;
  min-height: var(--pmu-tap-min);
  border-radius: var(--pmu-radius-md);
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
}

/* El ojo de "mostrar contraseña" va PEGADO al campo, no debajo.
   El núcleo ya emite el markup correcto de Bootstrap (.input-group con el
   input y el botón como hermanos), pero la regla de arriba —que le da
   width:100% a todos los input del formulario— le gana en especificidad
   (0,1,2,1) a `.input-group > .form-control {flex:1 1 auto; width:1%}` de
   Bootstrap (0,0,2,0): el campo ocupaba la fila entera y empujaba el botón
   al renglón siguiente. Se le devuelve el comportamiento de ítem flexible y
   se sueldan los bordes que se tocan. */
.view-login #com-users-login__form .input-group {
  flex-wrap: nowrap;
}
.view-login #com-users-login__form .input-group > input[type="password"] {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.view-login #com-users-login__form .input-password-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pmu-tap-min);
  padding-inline: var(--pmu-space-3);
  color: var(--pmu-ink-muted);
  background: var(--pmu-surface);
  border: 1px solid var(--pmu-border-strong);
  border-inline-start: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--pmu-radius-md);
  border-end-end-radius: var(--pmu-radius-md);
}
.view-login #com-users-login__form .input-password-toggle:hover {
  color: var(--pmu-ink);
  background: var(--pmu-blue-50);
}

/* "¿Olvidó su contraseña?" / "¿Recordar su usuario?" quedan como enlaces
   simples, no como las filas con marco de .list-group que emite el núcleo.
   El selector viejo apuntaba a .list-unstyled, que no existe en esta vista:
   com_users los envuelve en .com-users-login__options.list-group y cada
   enlace es un .list-group-item, de ahí el recuadro. */
.view-login .com-users-login__options {
  display: flex;
  /* `.list-group` de Bootstrap es flex-direction:column — sin esto los dos
     enlaces quedan uno abajo del otro, como seguían las filas que reemplazan. */
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--pmu-space-4);
  justify-content: center;
  margin-top: var(--pmu-space-5);
}
.view-login .com-users-login__options .list-group-item {
  width: auto;
  padding: 0;
  color: var(--pmu-blue-600);
  background: none;
  border: 0;
  font-size: var(--pmu-text-sm);
}
.view-login .com-users-login__options .list-group-item:hover {
  color: var(--pmu-blue-900);
  text-decoration: underline;
}


/* ==========================================================================
   LISTADOS DE ARTÍCULOS Y FICHA — unificación agosto 2026
   Las 9 páginas de listado (Actas, Reglamentos, Documentos internos/externos,
   Sesiones, Relacionamiento, Comisión de Turismo) usaban el render de fábrica
   del addon `articles` de SP Page Builder: títulos naranjas fuera de marca,
   firma del autor, categoría, etiquetas que repiten el título, "Read More" en
   inglés y el bloque entero de adjuntos duplicado dentro de cada tarjeta.
   Acá el estilo de las dos disposiciones propias, elegidas por forma del
   contenido y no por página (ver el addon en
   templates/shaper_helixultimate/sppagebuilder/addons/articles/site.php):

     .pmu-docs   expediente: artículos sin cuerpo cuyo contenido real es el
                 PDF adjunto. Fila densa con la descarga a un clic.
     .pmu-notas  nota: artículos con foto y bajada. Tarjetas en grilla.
   ========================================================================== */

.pmu-listado { scroll-margin-top: var(--pmu-space-6); }

.pmu-listado__vacio {
  padding: var(--pmu-space-5);
  background: var(--pmu-surface-alt);
  border: 1px solid var(--pmu-border);
  border-radius: var(--pmu-radius-md);
  color: var(--pmu-ink-soft);
}

/* --- Disposición "expediente" ------------------------------------------- */

.pmu-docs { list-style: none; padding: 0; margin: 0; }

.pmu-docs__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pmu-space-4);
  padding: var(--pmu-space-5) 0;
  border-bottom: 1px solid var(--pmu-border);
}
.pmu-docs__item:first-child { padding-top: 0; }

/* El glifo ancla visualmente la fila y dice de qué tipo de pieza se trata
   antes de leer el título. Es decorativo: el tipo y el peso reales van en
   texto dentro del enlace de descarga. */
.pmu-docs__icono {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--pmu-radius-md);
  background: var(--pmu-blue-050);
  color: var(--pmu-blue-600);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.125rem;
}
.pmu-docs__icono::before { content: "\f15c"; }   /* fa-file-lines */

.pmu-docs__cuerpo { min-width: 0; }

.pmu-docs__titulo {
  margin: 0;
  font-size: var(--pmu-text-xl);
  line-height: var(--pmu-leading-snug);
}
.pmu-docs__titulo a { color: var(--pmu-blue-700); text-decoration: none; }
.pmu-docs__titulo a:hover { color: var(--pmu-blue-900); text-decoration: underline; }

.pmu-docs__fecha {
  margin: var(--pmu-space-1) 0 0;
  font-size: var(--pmu-text-sm);
  color: var(--pmu-ink-muted);
  max-width: none;
}

.pmu-docs__accion { margin: var(--pmu-space-3) 0 0; max-width: none; }

.pmu-docs__descarga {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: var(--pmu-space-2) var(--pmu-space-3);
  min-height: var(--pmu-tap-min);
  padding: var(--pmu-space-2) var(--pmu-space-4);
  border: 1px solid var(--pmu-border-strong);
  border-radius: var(--pmu-radius-pill);
  color: var(--pmu-blue-700);
  font-size: var(--pmu-text-sm);
  font-weight: var(--pmu-weight-semibold);
  text-decoration: none;
}
.pmu-docs__descarga::before {
  content: "\f019";                      /* fa-download */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  flex: 0 0 auto;
}
.pmu-docs__descarga:hover {
  background: var(--pmu-blue-600);
  border-color: var(--pmu-blue-600);
  color: var(--pmu-on-dark);
}
/* Nombres de PDF largos (los de la migración lo son) no pueden desbordar. */
.pmu-docs__descarga-texto { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.pmu-docs__descarga-detalle { font-weight: var(--pmu-weight-regular); opacity: .8; }
/* Ir a la ficha no es descargar: sin icono de bajada y con flecha de avance. */
.pmu-docs__descarga--varios::before { content: "\f0f6"; }   /* fa-file-lines */
.pmu-docs__descarga--varios::after  { content: "\2192"; }   /* → */

/* --- Disposición "nota" -------------------------------------------------- */

/* minmax de 320px y no menos: dentro de la columna de contenido (~850px)
   entran dos tarjetas cómodas. Con tres, los títulos largos de las notas
   ("Georreferenciamiento para la Gestión Local") caían a seis líneas y se
   salían de la caja. En ancho completo la grilla vuelve sola a tres. */
.pmu-notas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--pmu-space-5);
}

.pmu-nota {
  display: flex; flex-direction: column;
  background: var(--pmu-surface);
  border: 1px solid var(--pmu-border);
  border-radius: var(--pmu-radius-md);
  overflow: hidden;
}
.pmu-nota:hover { border-color: var(--pmu-blue-200); box-shadow: var(--pmu-shadow-md); }

/* Relación fija: las fotos de la migración vienen en tamaños dispares y sin
   recorte reventaban la alineación de la grilla. */
/* position + inset y no height:100% a secas: un alto porcentual contra un
   contenedor de alto indefinido (el que fija aspect-ratio) se resuelve como
   auto, y la foto terminaba imponiendo su propia relación — dos tarjetas de
   la misma fila con imágenes de distinto alto. */
.pmu-nota__figura { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pmu-blue-050); }
/* Sin foto, el hueco lleva el degradado de marca y una marca de agua, para
   que se lea como una decisión y no como una imagen que no cargó. */
.pmu-nota__figura--sin-imagen {
  background-image: radial-gradient(circle at 85% 15%, var(--pmu-blue-700) 0%, var(--pmu-blue-900) 60%);
  display: flex; align-items: center; justify-content: center;
}
.pmu-nota__figura--sin-imagen::after {
  content: "\f15c";                     /* fa-file-lines */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 2.5rem;
  color: var(--pmu-on-dark);
  opacity: .22;
}
.pmu-nota__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.pmu-nota__cuerpo {
  display: flex; flex-direction: column; gap: var(--pmu-space-2);
  padding: var(--pmu-space-5);
  flex: 1 1 auto;
}

.pmu-nota__fecha {
  margin: 0; max-width: none;
  font-size: var(--pmu-text-xs);
  letter-spacing: var(--pmu-tracking-wide);
  text-transform: uppercase;
  color: var(--pmu-ink-muted);
}

.pmu-nota__titulo {
  margin: 0;
  font-size: var(--pmu-text-xl);
  line-height: var(--pmu-leading-snug);
}
.pmu-nota__titulo a { color: var(--pmu-blue-700); text-decoration: none; }
.pmu-nota__titulo, .pmu-docs__titulo { overflow-wrap: break-word; }
.pmu-nota__titulo a:hover { color: var(--pmu-blue-900); text-decoration: underline; }

.pmu-nota__bajada {
  margin: 0; max-width: none;
  color: var(--pmu-ink-soft);
  font-size: var(--pmu-text-sm);
  line-height: var(--pmu-leading-normal);
}

/* Empuja el enlace al pie de la tarjeta: con títulos de largo dispar, si no
   quedan todos a distinta altura y la grilla se lee desprolija. */
.pmu-nota__mas {
  margin-top: auto;
  align-self: flex-start;
  padding-top: var(--pmu-space-2);
  font-weight: var(--pmu-weight-semibold);
  font-size: var(--pmu-text-sm);
  color: var(--pmu-blue-600);
  text-decoration: none;
}
.pmu-nota__mas::after { content: " →"; }
.pmu-nota__mas:hover { color: var(--pmu-blue-900); text-decoration: underline; }

/* --- Paginación del listado ---------------------------------------------- */

.pmu-listado__paginacion {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--pmu-space-4);
  margin-top: var(--pmu-space-6);
  padding-top: var(--pmu-space-5);
  border-top: 1px solid var(--pmu-border);
}
.pmu-listado__paginacion .pmu-paginacion { margin: 0; }
.pmu-listado__resumen {
  margin: 0; max-width: none;
  font-size: var(--pmu-text-sm);
  color: var(--pmu-ink-muted);
}


/* ==========================================================================
   FICHA DE ARTÍCULO (html/com_content/article/default.php)
   ========================================================================== */

/* Las migas quedan fuera de la grilla (son de la página, no de la columna),
   así que llevan el mismo tope y centrado para arrancar a ras del título. */
.pmu-articulo .pmu-migas {
  max-width: 60rem;
  margin-inline: auto;
  margin-bottom: var(--pmu-space-5);
}

/* Dos columnas, igual que los listados de sección.
   Antes la ficha era una sola columna de 1290px con el cuerpo acotado a 68ch:
   el título y la foto ocupaban todo el ancho pero los párrafos terminaban a
   los ~700px, dejando medio metro de blanco a la derecha que hacía ver el
   texto como mal alineado. Ahora la columna principal define la medida de
   lectura y todo lo suyo —título, foto y texto— comparte el mismo ancho.

   El bloque se topea en 60rem y va centrado. Sin tope, dentro del contenedor
   de 1290px la columna principal quedaba en 858px: a 18px son ~91 caracteres
   por línea (medido en el navegador, no estimado), bastante más que los 45-75
   cómodos y por encima de los 80 que pide WCAG 1.4.8 para AAA. Ojo con la
   unidad: la raíz de este sitio es de 18px, así que 60rem = 1080px y la
   columna principal queda en ~700px ≈ 75 caracteres. */
.pmu-articulo__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--pmu-space-7);
  align-items: start;
  max-width: 60rem;
  margin-inline: auto;
}

.pmu-articulo__lateral {
  display: flex;
  flex-direction: column;
  gap: var(--pmu-space-6);
  /* Acompaña la lectura en pantallas altas sin taparse con el header fijo. */
  position: sticky;
  top: calc(var(--pmu-header-alto, 80px) + var(--pmu-space-5));
}

@media (max-width: 991px) {
  .pmu-articulo__grilla { grid-template-columns: 1fr; }
  .pmu-articulo__lateral { position: static; }
}

.pmu-articulo__encabezado { margin-bottom: var(--pmu-space-6); }
.pmu-articulo__encabezado .pmu-meta { margin: var(--pmu-space-3) 0 0; max-width: none; }

.pmu-articulo .full-image,
.pmu-articulo figure {
  margin: 0 0 var(--pmu-space-6);
}
/* Recorte de la foto de portada: las imágenes de la migración son de 2000px
   y a ancho completo (1180px) medían casi 800px de alto, empujando todo el
   texto abajo del pliegue. */
.pmu-articulo > figure img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--pmu-radius-md);
}

.pmu-articulo__editar { margin-bottom: var(--pmu-space-4); }

/* El cuerpo ya no acota elemento por elemento: la medida de lectura la da
   ahora el ancho de la columna principal de .pmu-articulo__grilla, que ronda
   los 68-75 caracteres en escritorio. El tope de 68ch que había acá se
   sumaba a esa columna y volvía a dejar aire muerto a la derecha, además de
   encajonar galerías y tablas que se benefician de todo el ancho. */
.pmu-articulo__cuerpo > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5) {
  max-width: none;
}
.pmu-articulo__cuerpo img { border-radius: var(--pmu-radius-md); }
.pmu-articulo__cuerpo table { width: 100%; }

.pmu-articulo__volver {
  margin-top: var(--pmu-space-7);
  padding-top: var(--pmu-space-5);
  border-top: 1px solid var(--pmu-border);
}
.pmu-articulo__volver a {
  font-weight: var(--pmu-weight-semibold);
  text-decoration: none;
}
.pmu-articulo__volver a::before { content: "← "; }
.pmu-articulo__volver a:hover { text-decoration: underline; }


/* ==========================================================================
   GALERÍA DE IMÁGENES DE LA MIGRACIÓN K2
   scripts/migracion-k2/reparar-galerias.php inserta en el cuerpo de 52
   artículos una <section class="galeria-k2"> con una <ul> de <figure><img>.
   Ese markup nunca tuvo estilo: se veía como una lista con viñetas de fotos
   de 2000px apiladas, que en una nota de tres párrafos ocupaba diez pantallas.
   ========================================================================== */

.galeria-k2 {
  margin-top: var(--pmu-space-7);
  padding-top: var(--pmu-space-6);
  border-top: 1px solid var(--pmu-border);
}
.galeria-k2 > h2 {
  font-size: var(--pmu-text-xl);
  color: var(--pmu-blue-700);
  margin: 0 0 var(--pmu-space-4);
}
.galeria-k2__grilla {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--pmu-space-3);
}
.galeria-k2__grilla figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--pmu-radius-md);
  background: var(--pmu-blue-050);
}
.galeria-k2__grilla img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform var(--pmu-duration-slow) var(--pmu-ease);
}
.galeria-k2__grilla figure:hover img { transform: scale(1.04); }


/* ==========================================================================
   LIGHTBOX DE LA GALERÍA K2
   Ve galeria-lightbox.js: arma un único <div> reutilizado por todas las
   galerías de la página y lo llena con la imagen clickeada. Sin librería de
   terceros. A propósito NO es un <dialog>/showModal(): el header del
   template vendor (.header-sticky) es position:fixed con z-index:9999, y esa
   combinación terminaba ganándole el pintado a la "top layer" del <dialog>
   en algunos navegadores/GPUs. Un <div> con z-index explícito es una
   comparación de stacking context de toda la vida, sin ninguna ambigüedad
   de implementación entre motores.
   ========================================================================== */

.pmu-lightbox {
  position: fixed;
  inset: 0;
  /* Bien por encima del header del vendor (z-index:9999, ve arriba). */
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: var(--pmu-space-5);
  border: 0;
  background: rgba(10, 20, 30, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pmu-lightbox[hidden] {
  display: none;
}
.pmu-lightbox__imagen {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - var(--pmu-space-8) * 2);
  object-fit: contain;
  border-radius: var(--pmu-radius-md);
  box-shadow: var(--pmu-shadow-lg);
}
.pmu-lightbox__cerrar,
.pmu-lightbox__nav {
  position: absolute;
  /* Dentro de un contenedor flex, el <img> (hijo posterior en el DOM)
     se trata como position:relative a efectos de pintado, así que sin
     z-index explícito quedaba encima de estos botones — con fotos lo
     bastante grandes, tapaba el cierre y la flecha "anterior". */
  z-index: 1;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--pmu-radius-pill);
  transition: background var(--pmu-duration-fast) var(--pmu-ease);
}
.pmu-lightbox__cerrar:hover,
.pmu-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.24);
}
.pmu-lightbox__cerrar {
  top: var(--pmu-space-4);
  right: var(--pmu-space-4);
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--pmu-text-2xl);
}
.pmu-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: var(--pmu-text-lg);
}
.pmu-lightbox__nav--anterior { left: var(--pmu-space-4); }
.pmu-lightbox__nav--siguiente { right: var(--pmu-space-4); }
.pmu-lightbox__contador {
  position: absolute;
  z-index: 1;
  bottom: var(--pmu-space-4);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: var(--pmu-space-1) var(--pmu-space-3);
  border-radius: var(--pmu-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: var(--pmu-text-sm);
}

@media (max-width: 640px) {
  .pmu-lightbox { padding: var(--pmu-space-3); }
  .pmu-lightbox__nav { width: 2.5rem; height: 2.5rem; }
}


/* ==========================================================================
   PÁGINA DE CONTACTO (SPPB, agosto 2026)
   Antes era un único addon de formulario sin marca ni datos de contacto —
   ver planificación. Columna de datos (raw_html propio) + addon vendor
   ajax_contact, cuyo sppb-form-control/sppb-btn NO se pueden reescribir con
   una clase propia (el HTML lo arma site.php del addon, sin hook de
   markup) — se le da el mismo aspecto que .pmu-campo/.pmu-btn por fuera,
   por selector, en vez de duplicar el componente.
   ========================================================================== */

.pmu-contacto-datos {
  list-style: none;
  margin: var(--pmu-space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pmu-space-4);
}
.pmu-contacto-datos li {
  display: flex;
  align-items: flex-start;
  gap: var(--pmu-space-3);
}
.pmu-contacto-datos__icono {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--pmu-radius-pill);
  background: var(--pmu-blue-050);
  color: var(--pmu-blue-700);
  font-size: 1.125rem;
}
.pmu-contacto-datos a {
  color: var(--pmu-blue-600);
  font-weight: var(--pmu-weight-semibold);
  overflow-wrap: anywhere;   /* el correo institucional no entra en una línea en columnas angostas */
}
.pmu-contacto-datos__etiqueta {
  display: block;
  font-size: var(--pmu-text-xs);
  font-weight: var(--pmu-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pmu-ink-muted);
  margin-bottom: 2px;
}

/* --- Addon vendor ajax_contact: mismo aspecto que .pmu-campo/.pmu-btn --- */
.sppb-addon-ajax-contact .sppb-addon-title {
  font-family: var(--pmu-font-display);
  font-size: var(--pmu-text-2xl);
  font-weight: var(--pmu-weight-semibold);
  color: var(--pmu-blue-700);
  margin: 0 0 var(--pmu-space-5);
}
.sppb-addon-ajax-contact .sppb-form-group { margin-bottom: var(--pmu-space-5); }
.sppb-addon-ajax-contact label {
  display: block;
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  font-size: var(--pmu-text-sm);
  color: var(--pmu-ink);
  margin-bottom: var(--pmu-space-2);
}
.sppb-addon-ajax-contact .sppb-form-control {
  width: 100%;
  min-height: var(--pmu-tap-min);
  padding: var(--pmu-space-3);
  font-family: var(--pmu-font-text);
  font-size: var(--pmu-text-base);
  color: var(--pmu-ink);
  background: var(--pmu-surface);
  border: 1px solid var(--pmu-border-strong);
  border-radius: var(--pmu-radius-md);
  transition: border-color var(--pmu-duration-fast) var(--pmu-ease);
}
.sppb-addon-ajax-contact textarea.sppb-form-control { min-height: 8rem; resize: vertical; }
.sppb-addon-ajax-contact .sppb-form-control:hover { border-color: var(--pmu-blue-600); }
.sppb-addon-ajax-contact .sppb-form-control:focus {
  outline: none;
  border-color: var(--pmu-blue-600);
  box-shadow: 0 0 0 3px var(--pmu-blue-200);
}
.sppb-addon-ajax-contact .sppb-form-control::placeholder { color: var(--pmu-ink-muted); }

.sppb-addon-ajax-contact .sppb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--pmu-space-2);
  min-height: var(--pmu-tap-min);
  padding: var(--pmu-space-3) var(--pmu-space-5);
  font-family: var(--pmu-font-display);
  font-size: var(--pmu-text-base);
  font-weight: var(--pmu-weight-semibold);
  line-height: 1.2;
  border-radius: var(--pmu-radius-md);
  border: 2px solid transparent;
  background: var(--pmu-blue-600);
  color: var(--pmu-on-dark);
  transition: background var(--pmu-duration-fast) var(--pmu-ease);
}
.sppb-addon-ajax-contact .sppb-btn:hover,
.sppb-addon-ajax-contact .sppb-btn:focus { background: var(--pmu-blue-900); color: var(--pmu-on-dark); }

@media (max-width: 767px) {
  /* Las 2 columnas del addon SPPB se apilan a este ancho sin ningún
     espacio propio entre ellas (cada una hereda el padding de la fila,
     no de la columna de al lado) — la lista de datos quedaba pegada al
     "Envianos tu consulta" de abajo. */
  .pmu-contacto-datos { margin-top: var(--pmu-space-5); margin-bottom: var(--pmu-space-7); }
}


/* ==========================================================================
   ENLACES EXTERNOS Y MEDIOS (SPPB, agosto 2026)
   Antes: <p><a>Nombre</a></p> suelto, texto azul sin ningún elemento
   identificativo — y en "Medios" tres <img> rotas (rutas relativas del K2
   viejo, nunca migradas, y las imágenes originales ni siquiera eran logos
   del medio: eran fotos de ilustración del artículo). Se reemplaza por una
   tarjeta con el isotipo/favicon real de cada sitio (bajado una vez del
   sitio de origen y alojado acá — no se hotlinkea nada en cada visita,
   mismo criterio de privacidad que las tipografías, ver BRANDBOOK.md §4.1)
   más un ícono de "abre en otra pestaña" para que quede claro que se sale
   del sitio. Mismo componente para las 2 páginas; "Medios" le suma el
   nombre del medio como sobrelínea antes del titular.
   ========================================================================== */

.pmu-enlaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--pmu-space-4);
  list-style: none;
  margin: var(--pmu-space-6) 0 0;
  padding: 0;
}
.pmu-enlace-tarjeta {
  display: flex;
  align-items: center;
  gap: var(--pmu-space-4);
  padding: var(--pmu-space-4);
  background: var(--pmu-surface);
  border: 1px solid var(--pmu-border);
  border-radius: var(--pmu-radius-md);
  box-shadow: var(--pmu-shadow-sm);
  text-decoration: none;
  transition: border-color var(--pmu-duration) var(--pmu-ease),
              box-shadow    var(--pmu-duration) var(--pmu-ease);
}
.pmu-enlace-tarjeta:hover, .pmu-enlace-tarjeta:focus-visible {
  border-color: var(--pmu-blue-200);
  box-shadow: var(--pmu-shadow-md);
}
.pmu-enlace-tarjeta__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--pmu-radius-sm);
  background: var(--pmu-blue-050);
  overflow: hidden;
}
.pmu-enlace-tarjeta__logo img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}
/* Sin logo real conseguido (sitio sin favicon propio distinguible): sigla
   sobre el mismo fondo, en vez de dejar el cuadro vacío o repetir un
   ícono genérico que no identifica nada. */
.pmu-enlace-tarjeta__logo--sigla {
  font-family: var(--pmu-font-display);
  font-size: var(--pmu-text-xs);
  font-weight: var(--pmu-weight-bold);
  letter-spacing: 0.02em;
  color: var(--pmu-blue-700);
}
.pmu-enlace-tarjeta__texto { min-width: 0; }
.pmu-enlace-tarjeta__medio {
  display: block;
  font-size: var(--pmu-text-xs);
  font-weight: var(--pmu-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pmu-ink-muted);
  margin-bottom: 2px;
}
.pmu-enlace-tarjeta__nombre {
  display: flex;
  align-items: baseline;
  gap: var(--pmu-space-2);
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  color: var(--pmu-ink);
  line-height: 1.35;
}
.pmu-enlace-tarjeta__externo {
  flex: none;
  font-size: 0.75em;
  color: var(--pmu-ink-muted);
}

@media (max-width: 480px) {
  .pmu-enlaces { grid-template-columns: 1fr; }
}


/* ==========================================================================
   BÚSQUEDA (com_finder) — agosto 2026
   El resultado por ítem tiene override propio (ver
   html/com_finder/search/default_result.php: saca URL completa, "Tipo" y
   "Autor", suma miniatura + fecha). Acá sólo el resto de la vista —
   formulario, avanzada, paginación — que sigue siendo el layout núcleo de
   Joomla (clases sppb-... no, acá son Bootstrap "form-control"/"btn-*" a
   secas) y nunca tuvo marca aplicada.
   ========================================================================== */

/* Sin Itemid propio la búsqueda hereda el <h1> del ítem de menú activo
   ("Inicio") — mismo bug de fondo que ya se corrigió para artículos y para
   el link de login, pero acá no hace falta resolverlo de raíz: un buscador
   moderno no necesita repetir "Resultados de búsqueda" como título, el
   propio listado ya dice qué es. Se oculta en vez de mostrar un título
   incorrecto. */
.com-finder > h1 { display: none; }

.com-finder__form .form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pmu-space-3);
}
.com-finder__form label {
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  color: var(--pmu-ink);
}
.com-finder__form .input-group { flex-wrap: wrap; gap: var(--pmu-space-2); }
.com-finder__form .form-control {
  min-height: var(--pmu-tap-min);
  padding: var(--pmu-space-3);
  font-size: var(--pmu-text-base);
  color: var(--pmu-ink);
  background: var(--pmu-surface);
  border: 1px solid var(--pmu-border-strong);
  border-radius: var(--pmu-radius-md);
}
.com-finder__form .form-control:hover { border-color: var(--pmu-blue-600); }
.com-finder__form .form-control:focus {
  outline: none;
  border-color: var(--pmu-blue-600);
  box-shadow: 0 0 0 3px var(--pmu-blue-200);
}
.com-finder__form .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--pmu-space-2);
  min-height: var(--pmu-tap-min);
  padding: var(--pmu-space-3) var(--pmu-space-5);
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  border-radius: var(--pmu-radius-md);
  border: 2px solid transparent;
}
.com-finder__form .btn-primary { background: var(--pmu-blue-600); color: var(--pmu-on-dark); }
.com-finder__form .btn-primary:hover { background: var(--pmu-blue-900); }
.com-finder__form .btn-secondary {
  background: var(--pmu-surface); color: var(--pmu-blue-700);
  border-color: var(--pmu-border-strong);
}
.com-finder__form .btn-secondary:hover { border-color: var(--pmu-blue-600); }

.com-finder__explained {
  margin: var(--pmu-space-4) 0;
  font-size: var(--pmu-text-sm);
  color: var(--pmu-ink-soft);
}

.com-finder__results-list { list-style: none; padding: 0; margin: var(--pmu-space-6) 0 0; }

.pmu-resultado + .pmu-resultado {
  margin-top: var(--pmu-space-4);
  padding-top: var(--pmu-space-4);
  border-top: 1px solid var(--pmu-border);
}
.pmu-resultado__fila {
  display: flex;
  gap: var(--pmu-space-4);
  align-items: flex-start;
  text-decoration: none;
}
.pmu-resultado__miniatura {
  flex: 0 0 auto;
  width: 96px; height: 72px;
  border-radius: var(--pmu-radius-sm);
  object-fit: cover;
  background: var(--pmu-blue-050);
}
.pmu-resultado__texto { min-width: 0; }
.pmu-resultado__categoria { margin-bottom: var(--pmu-space-2); }
.pmu-resultado__titulo {
  display: block;
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  font-size: var(--pmu-text-lg);
  color: var(--pmu-ink);
}
.pmu-resultado__fila:hover .pmu-resultado__titulo { color: var(--pmu-blue-700); }
.pmu-resultado__fecha { display: block; margin-top: var(--pmu-space-1); }
.pmu-resultado__descripcion {
  display: block;
  margin-top: var(--pmu-space-2);
  color: var(--pmu-ink-soft);
}
/* El highlighter del core envuelve cada coincidencia en <mark> — se le da
   el mismo tratamiento que a un texto seleccionado, no un subrayado que
   compita con el link. */
.pmu-resultado mark {
  background: var(--pmu-yellow-100);
  color: var(--pmu-ink);
  border-radius: 2px;
}

@media (max-width: 480px) {
  .pmu-resultado__miniatura { width: 72px; height: 72px; }
}


/* ==========================================================================
   FOOTER (F8, agosto 2026)
   La fila "Footer" de la plantilla ya existía en options.json con los colores
   de marca puestos (footer_bg_color:#0A4770 = --pmu-blue-900) pero sin un solo
   módulo publicado — franja vacía en todo el sitio. Contenido armado con
   scripts/menu-sppb/crear-modulo-footer.php.

   La fila del vendor pasó de 6+6 a UNA sola columna a ancho completo: la
   grilla interna la resuelve .pmu-footer__cols acá abajo. El motivo está en
   la cabecera de ese script — el crédito va centrado y a lo ancho, y dentro
   de una de las dos mitades de la grilla del vendor no había forma de sacarlo.

   Fondo oscuro, así que .pmu-social-modulo (pensado para el sidebar sobre
   fondo blanco, círculo azul-600 sobre blanco) se reescribe con un círculo
   translúcido — azul-600 sobre azul-900 casi no contrasta.
   ========================================================================== */

/* Las dos columnas del footer y, debajo, el crédito a lo ancho. */
.pmu-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pmu-space-6);
}

.pmu-footer-marca__logo {
  height: 40px;
  width: auto;
  margin-bottom: var(--pmu-space-4);
}
.pmu-footer-marca__bajada {
  max-width: 28rem;
  color: var(--pmu-blue-100);
  font-size: var(--pmu-text-sm);
  margin: 0 0 var(--pmu-space-5);
}
/* Crédito de pie: última línea del sitio, centrada y a lo ancho, separada del
   contenido por un filete tenue.
   `max-width: none` porque hay un `p { max-width: var(--pmu-container-text) }`
   global que acota TODO párrafo al ancho de lectura (68ch): sin esto el
   crédito medía 525px y quedaba centrado dentro de esa caja, o sea recostado
   a la izquierda del footer en vez de centrado en la página. */
.pmu-footer-marca__credito {
  max-width: none;
  font-size: var(--pmu-text-xs);
  color: var(--pmu-blue-200);
  margin: var(--pmu-space-6) 0 0;
  padding-top: var(--pmu-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.pmu-footer-titulo {
  font-family: var(--pmu-font-display);
  font-size: var(--pmu-text-lg);
  font-weight: var(--pmu-weight-semibold);
  color: var(--pmu-on-dark);
  margin: 0 0 var(--pmu-space-4);
  /* El core de SPPB/el heading_selector del addon dejan text-align:right
     puesto en algún h2 genérico — se lo pisa acá, no hay motivo para que
     el footer alinee distinto que el resto del sitio. */
  text-align: left;
}
.pmu-footer-datos {
  list-style: none;
  margin: 0 0 var(--pmu-space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pmu-space-3);
}
.pmu-footer-datos li {
  display: flex;
  align-items: center;
  gap: var(--pmu-space-3);
  color: var(--pmu-blue-100);
  font-size: var(--pmu-text-sm);
}
.pmu-footer-datos a {
  color: var(--pmu-blue-100);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pmu-footer-datos a:hover { color: var(--pmu-yellow-400); }
.pmu-footer-datos__icono {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--pmu-radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--pmu-on-dark);
  font-size: 0.9rem;
}

/* Mismo componente que "Plenario en Red" (sidebar, fondo blanco) — acá el
   círculo pasa a translúcido porque azul-600 sobre azul-900 no se lee. */
.pmu-footer-social {
  margin-top: var(--pmu-space-2);
}
.pmu-footer-social .pmu-social-modulo__enlace {
  background: rgba(255, 255, 255, 0.12);
  color: var(--pmu-on-dark);
}
/* El selector lleva #sp-footer a propósito. Helix genera, a partir de la
   opción `footer_link_hover_color` de la plantilla:

       #sp-footer a:hover { color: #F6C828 }        (0,1,1,1)

   que le gana por ID a cualquier regla nuestra de clases (0,0,3,0). El icono
   hereda ese color por currentColor, así que al pasar el mouse quedaba
   amarillo sobre el círculo amarillo: invisible. Igualar el peso alcanza para
   recuperar el color del icono sin tocar la opción de la plantilla — los
   links de texto del footer siguen poniéndose amarillos, que es lo buscado. */
#sp-footer .pmu-footer-social .pmu-social-modulo__enlace:hover {
  background: var(--pmu-yellow-400);
  color: var(--pmu-ink);
}

@media (max-width: 767px) {
  .pmu-footer-marca { margin-bottom: var(--pmu-space-6); }
  /* Una sola columna: el contacto pasa abajo de la marca. */
  .pmu-footer__cols { grid-template-columns: 1fr; }
}

/* Footer siempre al pie del viewport, no sólo al pie del contenido: en
   páginas cortas (ej. Contacto) quedaba una franja blanca entre el footer y
   el borde inferior de la ventana, porque #sp-footer es una <section> más
   dentro de #sp-main, en flujo normal — nada empuja al footer hacia abajo
   cuando el contenido no llega a llenar la pantalla. Truco de "sticky
   footer" con flexbox: toda la cadena de contenedores hasta #sp-main pasa a
   ocupar como mínimo el alto del viewport, y dentro de #sp-main (también en
   columna) el footer se empuja al fondo con margin-top:auto — así, si el
   contenido es corto, el footer baja hasta el borde; si es largo, no hace
   nada raro, sigue después del contenido como siempre. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.body-wrapper, .body-innerwrapper, #sp-main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
#sp-footer { margin-top: auto; }

/* Aire alrededor del componente. template.css (vendor) trae
   `#sp-main-body{padding:100px 0}` a secas: 100px fijos arriba y abajo, los
   mismos en un monitor que en un teléfono. En mobile eso dejaba un vacío de
   100px entre el menú y las migas de una nota — casi un cuarto de pantalla
   antes de la primera palabra útil.

   Se le empareja la especificidad (mismo #id, y custom.css carga después en
   el <head>). No alcanza a las páginas armadas con SP Page Builder —portada,
   listados de sección, Contacto—: para esas el propio vendor trae
   `.com-sppagebuilder #sp-main-body{padding:0}`, que gana por especificidad y
   sigue mandando. Así que esto sólo toca ficha de artículo, búsqueda e
   ingreso, que son las tres vistas de componente que quedan. */
#sp-main-body { padding-block: var(--pmu-space-7); }

@media (max-width: 767px) {
  #sp-main-body { padding-block: var(--pmu-space-5); }
}


/* ==========================================================================
   PORTADA (F9, agosto 2026)
   La home era una página SP Page Builder vacía: el sitio abría con un <h1>
   que decía "Inicio" y nada debajo. Acá el estilo de sus siete bloques.

   Dos criterios que la separan de la home anterior:

   · NADA SE MUEVE SOLO. El sitio viejo abría con un carrusel que rotaba cada
     5 segundos sin control de pausa (WCAG 2.2.2) y una barra de avisos que
     hacía lo mismo con hasta diez piezas. Las tres notas destacadas y el
     aviso vigente están en el HTML desde el primer byte.
   · LOS TÍTULOS SON UNA ESCALERA. El <h1> ("Plenario de Municipios del
     Uruguay") abre la página y cada bloque cuelga de un <h2>. Por eso las
     tarjetas de la portada llevan el titular en <span> y no en <hN>: iban
     antes del <h1> y habrían roto el orden.
   ========================================================================== */

/* --- Apertura institucional ---------------------------------------------- */

.pmu-home-apertura {
  background: var(--pmu-surface-alt);
  border-bottom: 1px solid var(--pmu-border);
}
.pmu-home-apertura h1 {
  margin: 0;
  font-size: var(--pmu-text-4xl);
  color: var(--pmu-blue-700);
}
.pmu-home-apertura__bajada {
  margin: var(--pmu-space-3) 0 0;
  font-size: var(--pmu-text-lg);
  color: var(--pmu-ink-soft);
  max-width: var(--pmu-container-text);
}

/* --- Aviso vigente -------------------------------------------------------- */

/* Barra y no ticker: un solo aviso, quieto, legible de una pasada. Cuál está
   vigente lo decide la fecha de fin de publicación del artículo. */
/* Sin margen propio: el aviso es lo ÚNICO que se ve en su fila (el <h1> que
   lo precede es pmu-solo-lector), así que ese margin-top de 32px no separaba
   de nada — sólo desbalanceaba el bloque contra el padding de la fila, que es
   quien pone el aire de verdad (ver filaApertura en armar-home.php). */
.pmu-aviso {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--pmu-space-2) var(--pmu-space-4);
  margin-top: 0;
  padding: var(--pmu-space-4) var(--pmu-space-5);
  background: var(--pmu-yellow-100);
  border-left: 5px solid var(--pmu-yellow-400);
  border-radius: 0 var(--pmu-radius-md) var(--pmu-radius-md) 0;
  min-height: var(--pmu-tap-min);
  color: var(--pmu-ink);
  text-decoration: none;
}
.pmu-aviso:hover { background: #FBEDC0; color: var(--pmu-ink); }
.pmu-aviso__etiqueta {
  flex: 0 0 auto;
  padding: var(--pmu-space-1) var(--pmu-space-3);
  border-radius: var(--pmu-radius-pill);
  background: var(--pmu-yellow-400);
  color: var(--pmu-ink);                 /* 11.16:1 sobre yellow-400 ✓AAA */
  font-family: var(--pmu-font-display);
  font-size: var(--pmu-text-xs);
  font-weight: var(--pmu-weight-semibold);
  letter-spacing: var(--pmu-tracking-wide);
  text-transform: uppercase;
}
.pmu-aviso__texto {
  min-width: 0;
  font-weight: var(--pmu-weight-semibold);
  overflow-wrap: break-word;
}
.pmu-aviso__texto::after { content: " →"; white-space: nowrap; }

/* --- Portada destacada ---------------------------------------------------- */

/* 2fr / 1fr: la nota principal manda y las dos secundarias acompañan. Por
   debajo de 992px la jerarquía se mantiene apilando, no encogiendo. */
.pmu-portada {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--pmu-space-4);
}
.pmu-portada__secundarias {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--pmu-space-4);
}

/* La tarjeta es el contenedor flex y el enlace, un ítem que se estira: así la
   misma estructura sirve para las dos formas que necesita el bloque.
   · En escritorio la tarjeta fija su relación (16/10) y el enlace la llena.
   · En mobile se le saca la relación y entonces el alto lo pone el texto —
     imprescindible, porque en 345px de ancho un titular de cinco líneas no
     entra en los 215px que daría el 16/10 y se salía por arriba de la foto.
   La foto y el velo van absolutos DENTRO del enlace (que es el bloque
   contenedor), no dentro de la tarjeta, para que sigan al alto real. */
.pmu-portada__tarjeta {
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: var(--pmu-radius-md);
  background: var(--pmu-blue-900);
}
.pmu-portada__principal { aspect-ratio: 16 / 10; }

.pmu-portada__enlace {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%;
  text-decoration: none;
}
/* inset:0 en vez de height:100%: dentro de una caja con aspect-ratio, un alto
   porcentual se resuelve como auto y la foto impone su propia relación. */
.pmu-portada__imagen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--pmu-duration-slow) var(--pmu-ease);
}
.pmu-portada__tarjeta:hover .pmu-portada__imagen { transform: scale(1.04); }

/* Sin foto queda el motivo de marca, mismo criterio que las tarjetas de nota
   y el módulo "Noticias más vistas": se lee como decisión, no como error. */
.pmu-portada__tarjeta--sin-imagen {
  background-image: radial-gradient(circle at 85% 15%, var(--pmu-blue-700) 0%, var(--pmu-blue-900) 60%);
}

/* Tinte parejo sobre la foto: unifica tapas de temperaturas muy distintas (un
   cielo quemado al lado de un plano nocturno) sin tapar la imagen. */
.pmu-portada__velo {
  position: absolute; inset: 0;
  background: rgba(10, 71, 112, .18);
}

/* El degradado que garantiza el contraste va en el BLOQUE DE TEXTO y no en un
   velo del tamaño de la tarjeta. Con el velo, cuánto se oscurecía detrás de
   cada línea dependía del alto de la tapa: la misma regla que funcionaba en la
   principal de escritorio (530px) dejaba la fecha de las secundarias, y todas
   las de mobile, sobre foto casi limpia. Atado al texto, el contraste es el
   mismo en las tres tapas y en los tres anchos. */
.pmu-portada__texto {
  position: relative;
  display: flex; flex-direction: column; gap: var(--pmu-space-2);
  padding: var(--pmu-space-8) var(--pmu-space-5) var(--pmu-space-5);
  background: linear-gradient(180deg, rgba(10,71,112,0) 0%, rgba(10,71,112,.86) 42%, rgba(10,71,112,.97) 100%);
}
/* on-dark-soft y no on-dark-muted: la fecha es la línea más alta del bloque de
   texto, o sea la que cae donde el velo todavía es semitransparente. Con el
   gris azulado de metadatos, sobre una foto clara (la fachada del Foro de
   Bogotá) no llegaba a leerse. */
.pmu-portada__fecha {
  font-size: var(--pmu-text-xs);
  letter-spacing: var(--pmu-tracking-wide);
  text-transform: uppercase;
  color: var(--pmu-on-dark-soft);
}
.pmu-portada__titulo {
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  line-height: var(--pmu-leading-snug);
  color: var(--pmu-on-dark);
  text-wrap: balance;
}
.pmu-portada__principal .pmu-portada__titulo { font-size: var(--pmu-text-3xl); }
.pmu-portada__secundaria .pmu-portada__titulo { font-size: var(--pmu-text-lg); }
.pmu-portada__enlace:hover .pmu-portada__titulo { text-decoration: underline; }

@media (max-width: 991px) {
  .pmu-portada { grid-template-columns: 1fr; }
  .pmu-portada__secundarias { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .pmu-portada__secundaria { aspect-ratio: 16 / 10; }
  .pmu-portada__principal .pmu-portada__titulo { font-size: var(--pmu-text-2xl); }
}
/* Una columna: el ancho ya no alcanza para que un titular largo entre en la
   caja de relación fija, así que manda el texto y la foto se estira detrás. */
@media (max-width: 767px) {
  .pmu-portada__tarjeta { aspect-ratio: auto; }
  .pmu-portada__principal { min-height: 340px; }
  .pmu-portada__secundaria { min-height: 220px; }
  /* 2xl y no xl: los tokens ya bajan solos a este ancho (ver la escala móvil
     arriba de todo), y con xl la tapa principal quedaba a 2px de las dos
     secundarias — la jerarquía que da sentido al bloque desaparecía. */
  .pmu-portada__principal .pmu-portada__titulo { font-size: var(--pmu-text-2xl); }
}
@media (max-width: 575px) {
  .pmu-portada__secundarias { grid-template-columns: 1fr; }
}

/* --- Encabezado de bloque ------------------------------------------------- */

/* El "ver todas" vive en el encabezado y no al pie: en el pie quedaba después
   de seis tarjetas y nadie llegaba. */
.pmu-home-seccion {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--pmu-space-3) var(--pmu-space-5);
  margin-bottom: var(--pmu-space-6);
  padding-bottom: var(--pmu-space-3);
  border-bottom: 2px solid var(--pmu-yellow-400);
}
.pmu-home-seccion h2 {
  margin: 0;
  font-size: var(--pmu-text-3xl);
}
/* gap y no un espacio en el content del ::after: dentro de un contenedor flex
   el pseudoelemento es un ítem más y el espacio inicial de su contenido se
   descarta — quedaba "Ver todas las novedades→", pegado. */
.pmu-home-seccion__mas {
  display: inline-flex; align-items: center; gap: var(--pmu-space-1);
  min-height: var(--pmu-tap-min);
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  font-size: var(--pmu-text-sm);
  color: var(--pmu-blue-600);
  text-decoration: none;
  white-space: nowrap;
}
.pmu-home-seccion__mas::after { content: " →"; }
.pmu-home-seccion__mas:hover { color: var(--pmu-blue-900); text-decoration: underline; }

/* --- Accesos rápidos ------------------------------------------------------ */

.pmu-accesos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--pmu-space-5);
  margin-top: var(--pmu-space-6);
}
.pmu-acceso {
  display: flex; flex-direction: column; gap: var(--pmu-space-2);
  padding: var(--pmu-space-5);
  background: var(--pmu-surface);
  border: 1px solid var(--pmu-border);
  border-radius: var(--pmu-radius-md);
  text-decoration: none;
  transition: border-color var(--pmu-duration) var(--pmu-ease),
              box-shadow    var(--pmu-duration) var(--pmu-ease);
}
.pmu-acceso:hover { border-color: var(--pmu-blue-200); box-shadow: var(--pmu-shadow-md); }
.pmu-acceso__icono {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: var(--pmu-space-2);
  border-radius: var(--pmu-radius-md);
  background: var(--pmu-blue-050);
  color: var(--pmu-blue-600);
  font-size: 1.125rem;
}
.pmu-acceso__titulo {
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  font-size: var(--pmu-text-xl);
  color: var(--pmu-blue-700);
  line-height: var(--pmu-leading-snug);
}
.pmu-acceso:hover .pmu-acceso__titulo { text-decoration: underline; }
.pmu-acceso__detalle { font-size: var(--pmu-text-sm); color: var(--pmu-ink-soft); }

/* --- Publicaciones -------------------------------------------------------- */

/* Una publicación, dos idiomas, dos descargas — y no dos tarjetas gemelas con
   la misma foto, que es como estaba en el sitio anterior (ahí además las dos
   imágenes daban 404 y el video quedaba en blanco). */
.pmu-publicacion {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--pmu-surface);
  border: 1px solid var(--pmu-border);
  border-radius: var(--pmu-radius-md);
  overflow: hidden;
}
.pmu-publicacion__figura { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pmu-blue-050); }
.pmu-publicacion__imagen { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmu-publicacion__cuerpo {
  display: flex; flex-direction: column; gap: var(--pmu-space-3);
  flex: 1 1 auto;
  padding: var(--pmu-space-5);
}
.pmu-publicacion__titulo {
  margin: 0;
  font-size: var(--pmu-text-xl);
  color: var(--pmu-blue-700);
  line-height: var(--pmu-leading-snug);
}
.pmu-publicacion__bajada { margin: 0; max-width: none; font-size: var(--pmu-text-sm); color: var(--pmu-ink-soft); }
.pmu-publicacion__descargas {
  display: flex; flex-wrap: wrap; gap: var(--pmu-space-3);
  margin-top: auto;
  padding-top: var(--pmu-space-2);
}

/* --- Video institucional -------------------------------------------------- */

/* El addon `video` emite su título como .sppb-addon-title, que sin estilo cae
   al h3 global (1.75rem) y pesaba más que el título de la tarjeta de al lado. */
.pmu-video .sppb-addon-title {
  margin: 0 0 var(--pmu-space-4);
  font-size: var(--pmu-text-xl);
  color: var(--pmu-blue-700);
  line-height: var(--pmu-leading-snug);
}
/* La caja 16:9 la arma el propio addon (.sppb-embed-responsive-16by9); acá sólo
   se le da el radio de marca y se recorta el iframe adentro. */
.pmu-video .sppb-video-block {
  border-radius: var(--pmu-radius-md);
  overflow: hidden;
  background: var(--pmu-blue-050);
}
.pmu-video iframe { display: block; border: 0; }

/* --- Boletín y redes ------------------------------------------------------ */

/* blue-700 y no el blue-900 que trae .pmu-inverso: el footer también es
   blue-900 y, pegados, el bloque de boletín se leía como el primer tramo del
   pie en vez de como una sección de la portada. Los tres colores de texto que
   usa siguen cumpliendo AA sobre este fondo:
     #FFFFFF 7.17:1 · #C7DEEF 5.16:1 · amarillo de foco/hover 4.51:1 */
.pmu-boletin { background: var(--pmu-blue-700); }
.pmu-boletin__bajada { color: var(--pmu-on-dark-soft); max-width: var(--pmu-container-text); }

/* Se apunta a las clases genéricas de SP Page Builder (.sppb-form-control,
   .sppb-btn) y no a las del addon: el bloque de suscripción cambió de addon
   una vez ya (ajax_contact no permite ocultar asunto ni mensaje, así que la
   suscripción de un solo campo se arma con form_builder) y el estilo no tiene
   por qué volver a romperse si vuelve a cambiar. */
.pmu-boletin label,
.pmu-boletin .sppb-form-label { color: var(--pmu-on-dark); }
.pmu-boletin .sppb-form-control {
  width: 100%;
  min-height: var(--pmu-tap-min);
  padding: var(--pmu-space-3);
  color: var(--pmu-ink);
  background: var(--pmu-surface);
  border: 1px solid var(--pmu-border-strong);
  border-radius: var(--pmu-radius-md);
  font-family: var(--pmu-font-text);
  font-size: var(--pmu-text-base);
}
.pmu-boletin .sppb-form-control::placeholder { color: var(--pmu-ink-muted); }

.pmu-boletin .sppb-btn,
.pmu-boletin button[type="submit"] {
  min-height: var(--pmu-tap-min);
  padding: var(--pmu-space-3) var(--pmu-space-5);
  background: var(--pmu-yellow-400);
  border: 2px solid transparent;
  border-radius: var(--pmu-radius-md);
  color: var(--pmu-ink);                 /* 11.16:1 sobre yellow-400 ✓AAA */
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  cursor: pointer;
}
.pmu-boletin .sppb-btn:hover,
.pmu-boletin button[type="submit"]:hover { background: var(--pmu-yellow-700); color: var(--pmu-ink); }

/* Mensajes de validación y de resultado del propio addon: en fábrica salen en
   gris claro sobre el azul oscuro, ilegibles. */
.pmu-boletin .sppb-form-builder-required,
.pmu-boletin .sppb-form-builder-message,
.pmu-boletin .sppb-ajax-contact-message { color: var(--pmu-yellow-400); font-size: var(--pmu-text-sm); }

/* Acá vivían .pmu-redes/.pmu-redes__enlace, las "píldoras" de redes sociales
   de la franja del boletín. Esa columna se quitó al pasar el formulario a lo
   ancho (ver filaBoletin() en scripts/menu-sppb/armar-home.php) y el markup no
   quedó en ninguna otra página ni en el contenido guardado, así que las reglas
   se fueron con él. Los enlaces a las redes siguen existiendo en la barra
   lateral (módulo 111) y en el footer, con .pmu-social-modulo. */

/* --- Pieza promocional de la barra lateral -------------------------------- */

/* Imagen sola enlazada. En el sitio anterior eran tres <img> sueltas, sin caja
   ni foco visible; acá comparten la caja de las tarjetas para que la columna
   no se lea como un collage. */
.pmu-promo {
  display: block;
  margin-bottom: var(--pmu-space-6);
  border: 1px solid var(--pmu-border);
  border-radius: var(--pmu-radius-md);
  overflow: hidden;
  background: var(--pmu-surface);
  transition: border-color var(--pmu-duration) var(--pmu-ease),
              box-shadow    var(--pmu-duration) var(--pmu-ease);
}
.pmu-promo:hover { border-color: var(--pmu-blue-200); box-shadow: var(--pmu-shadow-md); }
.pmu-promo img { display: block; width: 100%; height: auto; }
.pmu-promo__pie {
  display: block;
  padding: var(--pmu-space-3) var(--pmu-space-4);
  font-family: var(--pmu-font-display);
  font-weight: var(--pmu-weight-semibold);
  font-size: var(--pmu-text-sm);
  color: var(--pmu-blue-700);
}
.pmu-promo__pie::after { content: " →"; }

/* --- Ajustes de la home a los componentes compartidos --------------------- */

/* En la home los bloques de notas son vitrinas de 3 y 6: la grilla de los
   listados (minmax 320px) da 2 columnas dentro de la columna de contenido,
   que es lo que se busca, pero a ancho completo tiene que dar 3 y no 4. */
.pmu-home-notas .pmu-notas { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (min-width: 1200px) {
  .pmu-home-ancho-completo .pmu-notas { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   FOCO EN LOS CAMPOS DE SP PAGE BUILDER (agosto 2026)
   Detectado al verificar la portada, pero NO es un problema sólo de la
   portada: alcanza a todos los formularios armados con addons de SPPB — hoy
   el de Contacto (página 2) y el boletín de la home.

   Los campos quedaban SIN NINGÚN indicador de foco —incumple WCAG 2.4.7 y
   deja el formulario inusable con teclado— por dos reglas de terceros que se
   suman:

     sppagebuilder.css  .sppb-form-control:focus { outline: 0 }
     template.css       input[type="email"]:not(.form-control):focus, …
                        { outline: 0 }                    ← (0,3,1)
     template.css       input[type="email"], …
                        { box-shadow: none !important }   ← mata el halo

   Acá SÍ corresponde !important: es el único mecanismo que revierte un
   !important ajeno, y sin él el halo amarillo no hay forma de pintarlo. Se
   usa sólo en estas cuatro declaraciones y sólo sobre :focus-visible, o sea
   nada de lo que se ve en reposo depende de esta excepción.
   ========================================================================== */

input.sppb-form-control:focus-visible,
textarea.sppb-form-control:focus-visible,
select.sppb-form-control:focus-visible,
button.sppb-btn:focus-visible {
  outline: var(--pmu-focus-width) solid var(--pmu-focus-color) !important;
  outline-offset: var(--pmu-focus-offset) !important;
  box-shadow: 0 0 0 var(--pmu-focus-halo-width) var(--pmu-focus-halo) !important;
  border-color: var(--pmu-blue-600);
}

/* Sobre fondo oscuro el anillo azul desaparecería contra el fondo. */
.pmu-inverso input.sppb-form-control:focus-visible,
.pmu-inverso textarea.sppb-form-control:focus-visible,
.pmu-inverso select.sppb-form-control:focus-visible,
.pmu-inverso button.sppb-btn:focus-visible {
  outline-color: var(--pmu-on-dark) !important;
}