:root {
      --azul-pj: #1a3a6b;
      --azul-medio: #2356a0;
      --azul-claro: #3878c8;
      --dorado: #c8a84b;
      --dorado-claro: #e8c96e;
      --gris-bg: #f5f6f8;
      --gris-borde: #dde2ea;
      --texto: #1c2533;
      --texto-suave: #5a6578;
      --blanco: #ffffff;
      /* Texto blanco fijo para usar SOBRE fondos de color (azul-pj,
         azul-medio, degradés...), separado de --blanco: esa variable
         representa la superficie de la página y en modo oscuro pasa a
         ser un tono oscuro, por lo que "color: var(--blanco)" sobre un
         botón/encabezado azul quedaba casi invisible en modo oscuro. */
      --texto-on-color: #ffffff;
      --rojo-alerta: #c0392b;
      --lavanda-mujer: #7a55b0;
      --verde: #1e7e5a;
      --shadow-sm: 0 2px 8px rgba(26, 58, 107, 0.08);
      --shadow-md: 0 6px 24px rgba(26, 58, 107, 0.12);
      --shadow-lg: 0 16px 48px rgba(26, 58, 107, 0.16);
      --radius: 12px;
      --radius-sm: 8px;
    }

    /* ── MODO OSCURO ─────────────────────────────── */
    [data-bs-theme="dark"] {
      --azul-pj: #142a4d;
      --azul-medio: #2c5fa8;
      --azul-claro: #4a8de0;
      --dorado: #c8a84b;
      --dorado-claro: #e8c96e;
      --gris-bg: #161b24;
      --gris-borde: #2b3344;
      --texto: #e7eaf0;
      --texto-suave: #9aa4b6;
      --blanco: #1b212c;
      --rojo-alerta: #e05a4a;
      --lavanda-mujer: #6b4a9e;
      --verde: #38b889;
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
      --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45);
      --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
    }

    [data-bs-theme="dark"] body {
      background: #11151c;
    }

    [data-bs-theme="dark"] .ic-azul { background: rgba(74, 141, 224, 0.16); }
    [data-bs-theme="dark"] .ic-dorado { background: rgba(200, 168, 75, 0.16); color: var(--dorado-claro); }
    [data-bs-theme="dark"] .ic-verde { background: rgba(56, 184, 137, 0.16); }
    [data-bs-theme="dark"] .ic-rojo { background: rgba(224, 90, 74, 0.16); }
    [data-bs-theme="dark"] .ic-violeta { background: rgba(167, 139, 250, 0.16); color: #a78bfa; }
    [data-bs-theme="dark"] .ic-turquesa { background: rgba(45, 212, 191, 0.16); color: #2dd4bf; }
    [data-bs-theme="dark"] .alert-banner { background: #2a2308; }
    [data-bs-theme="dark"] .alert-inner p { color: #e8c96e; }
    [data-bs-theme="dark"] .org-icon { background: var(--gris-bg); }

    /* ── Retematización de Bootstrap con el azul institucional ───
       Bootstrap define su "primary" (#0d6efd) como variable propia
       de :root, pero la mayoría de sus componentes (nav-pills,
       btn-primary, dropdown activo, paginación, list-group activo)
       NO la referencian: cada uno trae su propio valor hardcodeado
       en la hoja compilada. Por eso hace falta pisar tanto las
       variables raíz (para utilidades como .bg-primary/.text-primary
       y componentes que sí las usan, como accordion y badges) como
       las variables locales de los componentes que la hardcodean. */
    :root {
      --bs-primary: var(--azul-medio);
      --bs-primary-rgb: 35, 86, 160;
      --bs-primary-text-emphasis: #1a4078;
      --bs-primary-bg-subtle: #e9eef5;
      --bs-primary-border-subtle: #bdcce2;
      --bs-link-color: var(--azul-medio);
      --bs-link-color-rgb: 35, 86, 160;
      --bs-link-hover-color: #1d4988;
      --bs-link-hover-color-rgb: 29, 73, 136;
      /* Cards, accordion, dropdown-menu, list-group, popovers y
         badges toman su esquina de este valor general: lo igualamos
         al --radius-sm que ya usan los íconos/tarjetas chicas del
         sitio. Botones y nav-pills tienen su propio override más
         abajo, en pill completo, como el resto de los CTA propios. */
      --bs-border-radius: var(--radius-sm);
      --bs-border-radius-sm: 6px;
      --bs-border-radius-lg: var(--radius);
    }

    [data-bs-theme="dark"] {
      --bs-primary: var(--azul-medio);
      --bs-primary-rgb: 44, 95, 168;
      --bs-primary-text-emphasis: #8fb3e8;
      --bs-primary-bg-subtle: #060e19;
      --bs-primary-border-subtle: #112643;
      --bs-link-color: var(--azul-medio);
      --bs-link-color-rgb: 44, 95, 168;
      --bs-link-hover-color: #25508e;
      --bs-link-hover-color-rgb: 37, 80, 142;
    }

    .nav-pills {
      --bs-nav-pills-link-active-bg: var(--azul-medio);
      --bs-nav-pills-border-radius: var(--bs-border-radius-pill);
    }

    .btn {
      --bs-btn-border-radius: var(--bs-border-radius);
    }

    .btn-outline-primary {
      --bs-btn-color: var(--azul-medio);
      --bs-btn-border-color: var(--azul-medio);
      --bs-btn-hover-bg: var(--azul-medio);
      --bs-btn-hover-border-color: var(--azul-medio);
      --bs-btn-active-bg: #1a4078;
      --bs-btn-active-border-color: #1a4078;
      --bs-btn-disabled-color: var(--azul-medio);
      --bs-btn-disabled-border-color: var(--azul-medio);
      --bs-btn-focus-shadow-rgb: 35, 86, 160;
    }

    .btn-primary {
      --bs-btn-bg: var(--azul-medio);
      --bs-btn-border-color: var(--azul-medio);
      --bs-btn-hover-bg: #1d4988;
      --bs-btn-hover-border-color: #1a4078;
      --bs-btn-active-bg: #1a4078;
      --bs-btn-active-border-color: #173a6e;
      --bs-btn-disabled-bg: var(--azul-medio);
      --bs-btn-disabled-border-color: var(--azul-medio);
      --bs-btn-focus-shadow-rgb: 35, 86, 160;
    }

    .dropdown-menu {
      --bs-dropdown-link-active-bg: var(--azul-medio);
    }

    .list-group {
      --bs-list-group-active-bg: var(--azul-medio);
      --bs-list-group-active-border-color: var(--azul-medio);
    }

    .pagination {
      --bs-pagination-active-bg: var(--azul-medio);
      --bs-pagination-active-border-color: var(--azul-medio);
    }

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

    /* El reset de margin/padding queda afuera de .pjf-component a
       propósito: ahí vive el contenido de artículos, que puede traer
       componentes Bootstrap (nav-pills, cards, accordions, badges,
       popovers...) con su propio padding/margin esperado. Si el reset
       también los alcanzara, les pisaría ese espaciado igual que le
       pasaba antes al padding de .nav-link. Fuera de .pjf-component
       (header, topbar, emergencia, footer, etc.) sigue aplicando
       exactamente como antes.
       El :where() de adentro es a propósito: :not() hereda la
       especificidad de su argumento, y ".pjf-component *" pesa como
       una clase — eso alcanzaba para ganarle a selectores de tag
       simples como "footer{}" y dejarlos sin su padding/margin
       propio. :where() siempre pesa especificidad 0, así el reset
       completo queda en especificidad 0 igual que el "*" original. */
    *:not(:where(.pjf-component *, .pjf-banner-top *, .pjf-hero-actions *, .pjf-toasts *, .pjf-inscripciones *)),
    *:not(:where(.pjf-component *, .pjf-banner-top *, .pjf-hero-actions *, .pjf-toasts *, .pjf-inscripciones *))::before,
    *:not(:where(.pjf-component *, .pjf-banner-top *, .pjf-hero-actions *, .pjf-toasts *, .pjf-inscripciones *))::after {
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'DM Sans', sans-serif;
      color: var(--texto);
      background: var(--blanco);
      line-height: 1.6;
      font-size: 1rem;
      /* base 1rem (16px): los tamaños van en rem para que "Aumentar texto" del plugin de accesibilidad escale todo */
      transition: background-color .25s ease, color .25s ease;
    }

    /* ── TOP BAR ─────────────────────────────── */
    .topbar {
      background: var(--azul-pj);
      color: rgba(255, 255, 255, 0.75);
      font-size: 0.75rem;
      padding: 6px 0;
      border-bottom: 2px solid var(--dorado);
    }

    .topbar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .topbar a {
      color: rgba(255, 255, 255, 0.75);
      text-decoration: none;
      transition: color .2s;
    }

    .topbar a:hover {
      color: var(--dorado-claro);
    }

    .topbar-links {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .topbar-links a {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .topbar-info {
      display: flex;
      gap: 20px;
    }

    /* ── HEADER ─────────────────────────────── */
    header {
      background: var(--blanco);
      box-shadow: var(--shadow-sm);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      gap: 20px;
    }

    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
    }

    .logo-escudo {
      width: 58px;
      height: 58px;
      background: linear-gradient(135deg, var(--azul-pj), var(--azul-medio));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dorado);
      font-size: 1.625rem;
      flex-shrink: 0;
      box-shadow: 0 3px 12px rgba(26, 58, 107, 0.25);
    }

    .logo-text h1 {
      font-family: 'DM Sans', sans-serif;
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--azul-pj);
      line-height: 1.2;
    }

    [data-bs-theme="dark"] .logo-text h1 {
      color: var(--texto);
    }

    .logo-text span {
      font-size: 0.6875rem;
      color: var(--texto-suave);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 500;
    }

    /* NAV */
    nav.main-nav {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    /* BUSCADOR HEADER */
    .header-search {
      display: flex;
      align-items: center;
      background: var(--gris-bg);
      border: 1.5px solid var(--gris-borde);
      border-radius: 50px;
      padding: 6px 14px;
      gap: 8px;
      transition: border-color .2s;
    }

    .header-search:focus-within {
      border-color: var(--azul-claro);
    }

    .header-search input {
      border: none;
      background: transparent;
      outline: none;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8125rem;
      width: 190px;
      color: var(--texto);
    }

    .header-search input::placeholder {
      color: var(--texto-suave);
    }

    .header-search button {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--azul-medio);
      font-size: 0.875rem;
    }

    .mobile-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1.375rem;
      color: var(--texto);
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
    }

    /* ── CONTAINER ─────────────────────────────── */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* ── HERO ─────────────────────────────── */
    .hero {
      background: linear-gradient(135deg, var(--azul-pj) 0%, var(--azul-medio) 60%, var(--azul-claro) 100%);
      position: relative;
      overflow: hidden;
      padding: 72px 0 80px;
      color: var(--texto-on-color);
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      background: rgba(200, 168, 75, 0.08);
      pointer-events: none;
    }

    .hero::after {
      content: '';
      position: absolute;
      bottom: -100px;
      left: -60px;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(200, 168, 75, 0.2);
      border: 1px solid rgba(200, 168, 75, 0.4);
      color: var(--dorado-claro);
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 5px 12px;
      border-radius: 50px;
      margin-bottom: 18px;
    }

    .hero h2 {
      font-family: 'DM Sans', sans-serif;
      font-size: 2.625rem;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 18px;
    }

    .hero h2 em {
      font-style: normal;
      color: var(--dorado-claro);
    }

    .hero p {
      font-size: 0.9375rem;
      color: rgba(255, 255, 255, 0.82);
      margin-bottom: 32px;
      max-width: 480px;
    }

    .hero-search-box {
      background: rgba(255, 255, 255, 0.12);
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      border-radius: var(--radius);
      padding: 6px 6px 6px 18px;
      display: flex;
      align-items: center;
      gap: 10px;
      backdrop-filter: blur(12px);
      max-width: 480px;
    }

    .hero-search-box input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--texto-on-color);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
    }

    .hero-search-box input::placeholder {
      color: rgba(255, 255, 255, 0.9);
    }

    .hero-search-box button {
      background: #087f8c;
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      padding: 10px 20px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 7px;
      transition: background .2s;
    }

    .hero-search-box button:hover {
      background: #066b76;
      color: #fff;
    }

    .hero-tags {
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .hero-tags span {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.6);
    }

    .hero-tags a {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.82);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 3px 10px;
      border-radius: 50px;
      text-decoration: none;
      transition: all .2s;
    }

    .hero-tags a:hover {
      background: rgba(255, 255, 255, 0.2);
      color: white;
    }

    /* ── ALERT BANNER ─────────────────────────────── */
    .alert-banner {
      background: #fff8e1;
      border-left: 4px solid var(--dorado);
      padding: 12px 0;
    }

    .alert-inner {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .alert-inner i {
      color: var(--dorado);
      font-size: 1.125rem;
      flex-shrink: 0;
    }

    .alert-inner p {
      font-size: 0.8125rem;
      color: #7a5a00;
      flex: 1;
    }

    .alert-inner a {
      color: var(--azul-medio);
      font-weight: 600;
      font-size: 0.8125rem;
      text-decoration: none;
      white-space: nowrap;
    }

    .alert-close {
      background: none;
      border: none;
      cursor: pointer;
      color: #999;
      font-size: 1rem;
      padding: 4px;
    }

    /* ── CINTA DE LUTO ─────────────────────────────── */
    .cinta-luto {
      background: #1a1a1a;
      border-top: 3px solid #000;
      border-bottom: 3px solid #000;
      padding: 12px 0;
    }

    .cinta-luto-inner {
      text-align: center;
    }

    .cinta-luto-inner i {
      display: block;
      margin: 0 auto 10px;
      color: #cfcfcf;
      font-size: 2.375rem;
    }

    .cinta-luto-inner p,
    .cinta-luto-inner span {
      color: #e8e8e8;
      font-size: 0.8438rem;
      margin: 0;
    }

    .cinta-luto-inner strong {
      color: #fff;
      font-weight: 700;
    }

    .cinta-luto-texto {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .cinta-luto-personas {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px 18px;
      margin: 0;
      padding: 0;
    }

    .cinta-luto-persona {
      color: #e8e8e8;
      font-size: 0.8438rem;
      position: relative;
      padding-left: 14px;
    }

    .cinta-luto-persona::before {
      content: '•';
      position: absolute;
      left: 0;
      color: #cfcfcf;
    }

    .cinta-luto-persona:first-child {
      padding-left: 0;
    }

    .cinta-luto-persona:first-child::before {
      content: none;
    }

    .cinta-luto-persona strong {
      color: #fff;
      font-weight: 700;
    }

    @media (max-width: 600px) {
      .cinta-luto-personas {
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }

      .cinta-luto-persona {
        padding-left: 0;
      }

      .cinta-luto-persona::before {
        content: none;
      }
    }

    /* ── ACCESOS RÁPIDOS ─────────────────────────────── */
    .section {
      padding: 56px 0;
    }

    .section-alt {
      background: var(--gris-bg);
    }

    .section-header {
      margin-bottom: 32px;
    }

    .section-header h2 {
      font-family: 'DM Sans', sans-serif;
      font-size: 1.75rem;
      color: var(--azul-pj);
      margin-bottom: 6px;
    }

    [data-bs-theme="dark"] .section-header h2 {
      color: var(--texto);
    }

    .section-header p {
      color: var(--texto-suave);
      font-size: 0.875rem;
    }

    .section-header-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 28px;
    }

    .btn-ver-mas {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--azul-medio);
      font-size: 0.8125rem;
      font-weight: 600;
      text-decoration: none;
      border: 1.5px solid var(--azul-medio);
      padding: 7px 16px;
      border-radius: var(--bs-border-radius);
      transition: all .2s;
    }

    .btn-ver-mas:hover {
      background: var(--azul-medio);
      color: white;
    }

    /* ACCESOS GRID */
    .accesos-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      grid-auto-rows: 1fr;
    }

    @media (max-width: 900px) {
      .accesos-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    .acceso-card {
      background: var(--blanco);
      border: 1.5px solid var(--gris-borde);
      border-radius: var(--radius);
      padding: 22px 16px;
      text-align: left;
      text-decoration: none;
      color: var(--texto);
      transition: all .25s;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16px;
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
    }

    .acceso-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--azul-medio);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s;
    }

    .acceso-card:has(.ic-azul)::before { background: var(--azul-medio); }
    .acceso-card:has(.ic-verde)::before { background: var(--verde); }
    .acceso-card:has(.ic-dorado)::before { background: #b8860b; }
    .acceso-card:has(.ic-rojo)::before { background: var(--rojo-alerta); }
    .acceso-card:has(.ic-violeta)::before { background: #7c3aed; }
    .acceso-card:has(.ic-turquesa)::before { background: #0d7377; }

    .acceso-card:hover {
      border-color: transparent;
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
      color: var(--azul-medio);
    }

    .acceso-card:hover::before {
      transform: scaleX(1);
    }

    .acceso-icon {
      width: 52px;
      flex-shrink: 0;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.375rem;
      transition: transform .2s;
    }

    /* Logo de e-justicia (silueta original: disco con la e@ calada) tintado como el resto de los íconos */
    .icono-ejusticia {
      display: block;
      width: 28px;
      height: 28px;
      background-color: currentColor;
      -webkit-mask: url(/images/ejusticia-icono.svg) center / contain no-repeat;
      mask: url(/images/ejusticia-icono.svg) center / contain no-repeat;
    }

    .acceso-card:hover .acceso-icon {
      transform: scale(1.1);
    }

    .acceso-card span {
      font-size: 1.0312rem;
      font-weight: 600;
      line-height: 1.3;
    }

    .acceso-texto {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .acceso-card small {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      font-size: 0.8125rem;
      line-height: 1.35;
      color: var(--texto-suave);
    }

    .ic-azul {
      background: #e8f0fb;
      color: var(--azul-medio);
    }

    .ic-dorado {
      background: #fdf4e0;
      color: #b8860b;
    }

    .ic-verde {
      background: #e8f5ee;
      color: var(--verde);
    }

    .ic-rojo {
      background: #fdecea;
      color: var(--rojo-alerta);
    }

    .ic-violeta {
      background: #f0ebfa;
      color: #7c3aed;
    }

    .ic-turquesa {
      background: #e0f5f5;
      color: #0d7377;
    }

    /* ── SERVICIOS ─────────────────────────────── */
    .servicios-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .servicio-card {
      background: var(--blanco);
      border: 1.5px solid var(--gris-borde);
      border-radius: var(--radius);
      padding: 24px;
      text-decoration: none;
      color: var(--texto);
      transition: all .25s;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }

    .servicio-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--azul-medio);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s;
    }

    .servicio-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
      border-color: transparent;
    }

    .servicio-card:hover::before {
      transform: scaleX(1);
    }

    .servicio-card .card-icon-lg {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.375rem;
    }

    .servicio-card h3 {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--azul-pj);
    }

    .servicio-card p {
      font-size: 0.8125rem;
      color: var(--texto-suave);
      line-height: 1.5;
      flex: 1;
    }

    .servicio-card .card-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.7812rem;
      font-weight: 600;
      color: var(--azul-medio);
    }

    /* ── NOTICIAS ─────────────────────────────── */
    /* Una sola grilla de tarjetas iguales (mismo módulo, una sola
       posición "noticias"). La cantidad de tarjetas la define el
       parámetro "Cantidad" del módulo, no el template. */
    .noticias-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
    }

    .noticia-card {
      background: var(--blanco);
      border: 1.5px solid var(--gris-borde);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      transition: box-shadow .25s, transform .25s;
    }

    .noticia-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-3px);
    }

    .noticia-card-img {
      height: 180px;
      background: linear-gradient(135deg, var(--azul-pj), var(--azul-claro));
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.5rem;
      color: rgba(255, 255, 255, 0.25);
    }

    .noticia-card-body {
      padding: 18px 20px 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .noticia-meta {
      font-size: 0.6875rem;
      color: var(--texto-suave);
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .noticia-card h3 {
      font-family: 'DM Sans', sans-serif;
      font-size: 1.0625rem;
      line-height: 1.3;
      margin: 0;
    }

    .noticia-card h3 a {
      color: var(--azul-pj);
      text-decoration: none;
    }

    [data-bs-theme="dark"] .noticia-card h3 a {
      color: var(--texto);
    }

    .noticia-card h3 a:hover {
      color: var(--azul-medio);
    }

    .noticia-card p {
      font-size: 0.8125rem;
      color: var(--texto-suave);
      line-height: 1.6;
      flex: 1;
      margin: 0;
    }

    .noticia-card .btn-ver-mas {
      align-self: flex-start;
      margin-top: 6px;
    }

    /* "Ir a todos los artículos": es un hijo más de .noticias-grid
       (sale del mismo módulo), así que ocupa todas las columnas para
       quedar como una fila propia debajo de las tarjetas. */
    .noticias-grid .noticias-view-all {
      grid-column: 1 / -1;
      justify-content: center;
      margin-top: 4px;
    }

    /* ── ESTADÍSTICAS ─────────────────────────────── */
    .stats-section {
      background: linear-gradient(135deg, var(--azul-pj), var(--azul-medio));
      padding: 56px 0;
      color: var(--texto-on-color);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      text-align: center;
    }

    .stat-item {
      border-right: 1px solid rgba(255, 255, 255, 0.15);
    }

    .stat-item:last-child {
      border-right: none;
    }

    .stat-num {
      font-family: 'DM Sans', sans-serif;
      font-size: 2.75rem;
      font-weight: 700;
      color: var(--dorado-claro);
      display: block;
      line-height: 1;
      margin-bottom: 6px;
    }

    .stat-label {
      font-size: 0.8125rem;
      color: rgba(255, 255, 255, 0.75);
    }

    /* ── ORGANISMOS ─────────────────────────────── */
    .org-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }

    .org-card {
      background: var(--blanco);
      border: 1.5px solid var(--gris-borde);
      border-radius: var(--radius);
      padding: 20px;
      text-decoration: none;
      color: var(--texto);
      display: flex;
      align-items: center;
      gap: 14px;
      transition: all .2s;
      box-shadow: var(--shadow-sm);
    }

    .org-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--azul-claro);
      transform: translateX(4px);
    }

    .org-icon {
      width: 44px;
      height: 44px;
      background: var(--gris-bg);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      color: var(--azul-medio);
      flex-shrink: 0;
    }

    .org-text h4 {
      font-size: 0.8438rem;
      font-weight: 600;
      color: var(--azul-pj);
    }

    .org-text p {
      font-size: 0.6875rem;
      color: var(--texto-suave);
    }

    /* ── EMERGENCIA BANNER ─────────────────────────────── */
    .emergencia-bar {
      background: var(--lavanda-mujer);
      color: white;
      padding: 14px 0;
    }

    .emergencia-inner {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .emergencia-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .emergencia-bar .pulse {
      width: 12px;
      height: 12px;
      background: white;
      border-radius: 50%;
      animation: pulse 1.5s infinite;
      flex-shrink: 0;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: .5;
        transform: scale(1.3);
      }
    }

    .emergencia-bar strong {
      font-size: 0.875rem;
      font-weight: 600;
    }

    .emergencia-bar p {
      font-size: 0.8125rem;
      opacity: .9;
    }

    .emergencia-btn {
      background: white;
      color: var(--lavanda-mujer);
      border: none;
      border-radius: var(--bs-border-radius);
      padding: 8px 18px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8125rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    /* ── FOOTER ─────────────────────────────── */
    footer {
      background: var(--azul-pj);
      color: rgba(255, 255, 255, 0.75);
      padding: 52px 0 0;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 36px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: white;
    }

    .footer-logo .esc {
      width: 48px;
      height: 48px;
      background: rgba(200, 168, 75, 0.2);
      border: 1px solid rgba(200, 168, 75, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.375rem;
      color: var(--dorado-claro);
    }

    .footer-logo strong {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      color: white;
      display: block;
      line-height: 1.2;
    }

    .footer-brand p {
      font-size: 0.7812rem;
      line-height: 1.6;
      max-width: 260px;
    }

    .footer-socials {
      display: flex;
      gap: 12px;
    }

    .footer-socials a {
      width: 44px;
      height: 44px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      font-size: 0.9375rem;
      transition: all .2s;
    }

    .footer-socials a:hover {
      background: var(--dorado);
      color: var(--azul-pj);
    }

    .footer-col h2 {
      color: var(--dorado-claro);
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .8px;
      margin-bottom: 16px;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .footer-col ul li a {
      color: rgba(255, 255, 255, 0.65);
      text-decoration: none;
      font-size: 0.8125rem;
      transition: color .2s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .footer-col ul li a:hover {
      color: var(--dorado-claro);
    }

    .footer-col ul li a::before {
      content: '›';
      font-size: 1rem;
      color: var(--dorado);
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      padding: 18px 0;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.75);
    }

    .footer-bottom a {
      color: rgba(255, 255, 255, 0.75);
      text-decoration: none;
    }

    .footer-bottom a:hover {
      color: var(--dorado-claro);
    }

    /* ── MAPA BANNER ─────────────────────────────── */
    .mapa-banner {
      background: var(--gris-bg);
      border-radius: var(--radius);
      padding: 24px;
      display: flex;
      align-items: center;
      gap: 20px;
      border: 1.5px solid var(--gris-borde);
      text-decoration: none;
      color: var(--texto);
      transition: all .25s;
      box-shadow: var(--shadow-sm);
    }

    .mapa-banner:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--azul-claro);
    }

    .mapa-illustration {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--azul-pj), var(--azul-claro));
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.25rem;
      color: rgba(255, 255, 255, 0.7);
      flex-shrink: 0;
    }

    .mapa-text h3 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--azul-pj);
      margin-bottom: 5px;
    }

    .mapa-text p {
      font-size: 0.8125rem;
      color: var(--texto-suave);
    }

    /* ── RESPONSIVE ─────────────────────────────── */
    @media (max-width: 1024px) {
      .servicios-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .stat-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding-bottom: 20px;
      }

      .stat-item:last-child {
        border-bottom: none;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
      }
    }

    @media (max-width: 768px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }

      .hero h2 {
        font-size: 1.875rem;
      }

      nav.main-nav {
        display: none;
      }

      nav.main-nav.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: var(--shadow-lg);
        padding: 16px;
        z-index: 999;
      }

      .mobile-toggle {
        display: flex;
      }

      .header-search {
        display: none;
      }

      .topbar-info {
        display: none;
      }

      .servicios-grid {
        grid-template-columns: 1fr;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .org-grid {
        grid-template-columns: 1fr;
      }

      .emergencia-inner {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (max-width: 480px) {

      .stats-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ── FADE-IN ANIMATION ─────────────────────────────── */
    .fade-up {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .5s ease, transform .5s ease;
    }

    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── DOCUMENTOS ─────────────────────────────── */
    .pj-docs-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
    }

    @media (min-width: 768px) {
      .pj-docs-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      }
    }

    .pj-doc-list h3 {
      font-family: 'DM Sans', sans-serif;
      font-size: 1.125rem;
      font-weight: 700;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--azul-pj);
    }

    .pj-doc-list h3 svg {
      width: 24px;
      height: 24px;
      color: var(--azul-medio);
    }

    .pj-doc-item {
      display: block;
      padding: 12px;
      border-radius: var(--radius);
      background: var(--blanco);
      border: 1.5px solid var(--gris-borde);
      margin-bottom: 12px;
      transition: all 0.2s;
      text-decoration: none;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .pj-doc-item:hover {
      border-color: var(--azul-claro);
      box-shadow: var(--shadow-sm);
      transform: translateY(-2px);
    }

    .pj-doc-item h4 {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--texto);
      margin-bottom: 4px;
      /* Misma altura en todas las tarjetas: título reservado a 2 líneas */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      line-height: 1.3;
      min-height: 2.6em;
      transition: color 0.2s;
    }

    .pj-doc-item:hover h4 {
      color: var(--azul-medio);
    }

    .pj-doc-item .pj-date {
      font-size: 0.75rem;
      color: var(--texto-suave);
    }

    .pj-view-all {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--azul-medio);
      margin-top: 4px;
      text-decoration: none;
      transition: color 0.2s;
    }

    .pj-view-all:hover {
      color: var(--azul-pj);
    }

    /* ═══════════════════════════════════════════════════════════
       AGREGADOS PARA LA INTEGRACIÓN NATIVA CON JOOMLA 6
       ═══════════════════════════════════════════════════════════ */

    /* ── ACCESIBILIDAD: SKIP LINK ─────────────────────────────── */
    .pjf-skip-link {
      position: absolute;
      left: -9999px;
      top: auto;
      background: var(--azul-pj);
      color: #fff;
      padding: 10px 16px;
      z-index: 2000;
      border-radius: 0 0 var(--radius-sm) 0;
      text-decoration: none;
      font-size: 0.8125rem;
    }

    .pjf-skip-link:focus {
      left: 0;
      top: 0;
    }

    .pjf-sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    /* ── ACCIONES DE HEADER (búsqueda + modo oscuro + hamburguesa) ── */
    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .theme-toggle {
      background: var(--gris-bg);
      border: 1.5px solid var(--gris-borde);
      color: var(--azul-pj);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9375rem;
      transition: all .2s;
      flex-shrink: 0;
    }

    .theme-toggle:hover {
      background: var(--azul-pj);
      color: #fff;
      border-color: var(--azul-pj);
    }

    /* ── FORMULARIO DE BÚSQUEDA NATIVA (com_finder) ───────────── */
    .header-search {
      padding: 0 14px;
    }

    .header-search .pjf-finder-form {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .header-search .pjf-finder-form input {
      border: none;
      background: transparent;
      outline: none;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8125rem;
      width: 190px;
      color: var(--texto);
      padding: 6px 0;
    }

    .header-search .pjf-finder-form input::placeholder {
      color: var(--texto-suave);
    }

    .header-search .pjf-finder-form button {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--azul-medio);
      font-size: 0.875rem;
      flex-shrink: 0;
    }

    .hero-search-box .pjf-finder-form {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
    }

    .hero-search-box .pjf-finder-form input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--texto-on-color);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      min-width: 0;
    }

    .hero-search-box .pjf-finder-form input::placeholder {
      color: rgba(255, 255, 255, 0.9);
    }

    .hero-search-box .pjf-finder-form button {
      background: #087f8c;
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      padding: 10px 20px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 7px;
      transition: background .2s;
      white-space: nowrap;
    }

    .hero-search-box .pjf-finder-form button:hover {
      background: #066b76;
      color: #fff;
    }

    /* ── UTILIDAD: oculto solo visualmente, accesible a lectores
       de pantalla. Joomla usa esta clase en mod_menu y en otros
       núcleos; si no se define, el texto queda visible (bug real
       que se vio en el menú: "Más acerca de: Institucional"). ── */
    .visually-hidden,
    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    /* ── MENÚ PRINCIPAL: estilizado sobre el markup real de
       mod_menu en Joomla 6 (clases mod-menu / mod-list / deeper /
       mod-menu__toggle-sub / mod-menu__sub, no Bootstrap) ────── */
    nav.main-nav ul.mod-list {
      display: flex;
      gap: 4px;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    nav.main-nav .nav-item {
      position: relative;
      list-style: none;
      display: flex;
      align-items: center;
      border-radius: var(--radius-sm);
      transition: background .2s;
    }

    /* El resaltado va en el ítem completo (link + botón de flecha)
       para que ambos queden dentro de la misma "pastilla" en vez
       de que el fondo se corte después del texto del link. */
    nav.main-nav .nav-item:hover,
    nav.main-nav .nav-item:focus-within,
    nav.main-nav .nav-item.active {
      background: var(--gris-bg);
    }

    nav.main-nav .nav-item > a {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 6px 8px 14px;
      color: var(--texto);
      text-decoration: none;
      font-size: 0.8438rem;
      font-weight: 500;
      white-space: nowrap;
    }

    /* Si el ítem no tiene submenú (sin botón de flecha), el link
       ocupa toda la pastilla y necesita el padding derecho completo. */
    nav.main-nav .nav-item:not(.deeper) > a {
      padding-right: 14px;
    }

    nav.main-nav .nav-item:hover > a,
    nav.main-nav .nav-item:focus-within > a,
    nav.main-nav .nav-item > a[aria-current="page"],
    nav.main-nav .nav-item.active > a {
      color: var(--azul-medio);
    }

    /* Botón que despliega el submenú (mod-menu__toggle-sub) */
    nav.main-nav .mod-menu__toggle-sub {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px 14px 8px 0;
      margin: 0;
      color: inherit;
      display: flex;
      align-items: center;
      font: inherit;
    }

    nav.main-nav .nav-item:hover > .mod-menu__toggle-sub,
    nav.main-nav .nav-item:focus-within > .mod-menu__toggle-sub {
      color: var(--azul-medio);
    }

    nav.main-nav .mod-menu__toggle-sub .icon-chevron-down {
      display: inline-block;
      font-size: 0.625rem;
      transition: transform .2s;
    }

    nav.main-nav .mod-menu__toggle-sub .icon-chevron-down::before {
      content: '\f078';
      font-family: 'Font Awesome 7 Free';
      font-weight: 900;
    }

    nav.main-nav .nav-item.deeper:hover > .mod-menu__toggle-sub .icon-chevron-down,
    nav.main-nav .nav-item.deeper:focus-within > .mod-menu__toggle-sub .icon-chevron-down,
    nav.main-nav .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down {
      transform: rotate(180deg);
    }

    /* Submenú (mod-menu__sub). Joomla core lo trae con display:none por
       defecto y solo lo pasa a display:block por JS cuando se hace click
       (toggle de aria-expanded). Si no se pisa ese display acá, el :hover
       de abajo nunca llega a mostrarlo: opacity/visibility no hacen nada
       sobre un elemento con display:none. Por eso se fuerza display:block
       siempre y la visibilidad real se maneja solo con opacity/visibility. */
    nav.main-nav .mod-menu__sub {
      display: block;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      background: var(--blanco);
      border: 1px solid var(--gris-borde);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      min-width: 240px;
      padding: 8px 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-8px);
      transition: all .2s;
      z-index: 999;
      list-style: none;
      margin: 0;
    }

    nav.main-nav .nav-item.deeper:hover > .mod-menu__sub,
    nav.main-nav .nav-item.deeper:focus-within > .mod-menu__sub,
    nav.main-nav .mod-menu__toggle-sub[aria-expanded="true"] ~ .mod-menu__sub {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    nav.main-nav .mod-menu__sub a {
      display: block;
      padding: 8px 18px;
      color: var(--texto);
      text-decoration: none;
      font-size: 0.8125rem;
      transition: all .15s;
      white-space: nowrap;
    }

    nav.main-nav .mod-menu__sub a:hover {
      background: var(--gris-bg);
      color: var(--azul-medio);
      padding-left: 24px;
    }

    @media (max-width: 768px) {
      nav.main-nav.open ul.mod-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
      }

      nav.main-nav.open .nav-item {
        flex-wrap: wrap;
        border-bottom: 1px solid var(--gris-borde);
      }

      nav.main-nav.open .nav-item:last-child {
        border-bottom: none;
      }

      nav.main-nav.open .nav-item > a {
        flex: 1 1 auto;
        padding: 13px 14px;
        font-size: 0.9062rem;
      }

      nav.main-nav.open .mod-menu__toggle-sub {
        padding: 13px 14px;
      }

      /* Colapsado por defecto: ocupa cero espacio (no solo invisible)
         hasta que se togglea aria-expanded al tocar la flecha, evitando
         que el submenú quede siempre desplegado dentro del menú móvil. */
      nav.main-nav.open .mod-menu__sub {
        display: none;
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        min-width: 0;
        padding: 4px 0 8px 16px;
        width: 100%;
        background: var(--gris-bg);
      }

      nav.main-nav.open .mod-menu__toggle-sub[aria-expanded="true"] ~ .mod-menu__sub {
        display: block;
      }

      nav.main-nav.open .mod-menu__sub a {
        padding: 10px 14px;
      }
    }

    /* ── PÁGINAS INTERNAS (componente + sidebar) ─────────────── */
    .pjf-banner-top {
      padding-top: 24px;
    }

    .pjf-page-wrap {
      padding-block: 32px 56px;
    }

    @media (max-width: 700px) {
      .pjf-page-wrap {
        padding-block: 18px 36px;
      }
    }

    .pjf-breadcrumbs {
      font-size: 0.7812rem;
      color: var(--texto-suave);
      margin-bottom: 20px;
      margin-left: 0;
      padding-left: 0;
    }

    /* Reset defensivo: el módulo nativo de Joomla (mod_breadcrumbs)
       puede traer su propio margen/padding en el <nav>/<span>/<ol> que
       imprime, descolgando el breadcrumb hacia la izquierda respecto
       del resto del contenido que comparte el mismo .container. */
    .pjf-breadcrumbs > * {
      margin-left: 0 !important;
    }

    .pjf-breadcrumbs ul,
    .pjf-breadcrumbs ol {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
      padding: 0;
      margin: 0;
    }

    .pjf-breadcrumbs li {
      display: flex;
      align-items: center;
    }

    .pjf-breadcrumbs li:not(:last-child)::after {
      content: '\f105';
      font-family: 'Font Awesome 7 Free';
      font-weight: 900;
      margin: 0 8px;
      color: var(--gris-borde);
      font-size: 0.6875rem;
    }

    .pjf-breadcrumbs li.active,
    .pjf-breadcrumbs li:last-child {
      color: var(--azul-pj);
      font-weight: 600;
    }

    [data-bs-theme="dark"] .pjf-breadcrumbs li.active,
    [data-bs-theme="dark"] .pjf-breadcrumbs li:last-child {
      color: var(--texto);
    }

    .pjf-breadcrumbs a {
      color: var(--azul-medio);
      text-decoration: none;
    }

    .pjf-breadcrumbs a:hover {
      text-decoration: underline;
    }

    /* mod_breadcrumbs de Joomla 6 imprime markup de Bootstrap
       (.breadcrumb-item), que agrega su propia "/" vía ::before.
       Ya tenemos la flechita de arriba como separador, así que esta
       queda de más. */
    .pjf-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
      content: none;
    }

    .pjf-page-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .pjf-page-grid.has-sidebar {
      grid-template-columns: 2.2fr 1fr;
    }

    @media (max-width: 900px) {
      .pjf-page-grid.has-sidebar {
        grid-template-columns: 1fr;
      }
    }

    .pjf-component h1,
    .pjf-component .page-header h1 {
      font-family: 'DM Sans', sans-serif;
      color: var(--azul-pj);
      font-size: 1.75rem;
      line-height: 1.25;
      margin-bottom: 18px;
    }

    [data-bs-theme="dark"] .pjf-component h1,
    [data-bs-theme="dark"] .pjf-component .page-header h1 {
      color: var(--texto);
    }

    .pjf-component img {
      max-width: 100%;
      border-radius: var(--radius-sm);
    }

    /* La vista nativa de artículo de Joomla 6 envuelve la imagen
       introductoria en <figure class="float-start item-image">, y
       Bootstrap define .float-start con !important. Pelearle ese
       !important con otro !important sin capa no funciona (en la
       cascada, los !important DENTRO de una capa le ganan a los
       !important sin capa, al revés que las reglas normales). En
       vez de anular el float, evitamos que el cuerpo del artículo
       se acomode a su lado: así no hace falta tocar el float en
       absoluto, ni pelear con Bootstrap. */
    .pjf-component .com-content-article__body {
      clear: both;
    }

    /* Por si algún contenido viejo/migrado trae "style=float:left"
       a mano en el <img> (en vez del wrapper de Joomla 6), mismo
       criterio: evitamos que el texto se acomode al lado. */
    .pjf-component [itemprop="articleBody"],
    .pjf-component .item-page > div {
      clear: both;
    }

    /* En mobile y tablet el contenido quedaba pegado al borde de la
       pantalla (el .container solo aporta 20px y no hay ningún elemento
       visual que separe el artículo del fondo blanco de la página). Se
       le da un borde + padding propio para que se lea como una tarjeta
       contenida, en vez de texto corrido hasta el borde del viewport.
       1198px cubre también el rango de tablet (sin sidebar visible). */
    @media (max-width: 1198px) {
      .pjf-component {
        border: 1px solid var(--gris-borde);
        border-radius: var(--radius);
        padding: 18px 16px 22px;
        background: var(--blanco);
      }
    }

    /* ── Vista individual de página (artículo, contacto, etc.) ── */
    .pjf-component .page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      border-bottom: 1px solid var(--gris-borde);
      padding-bottom: 16px;
      margin-bottom: 16px;
    }

    .pjf-component .page-header h1 {
      flex: 1 1 auto;
      margin-bottom: 0;
    }

    @media (max-width: 700px) {
      .pjf-component .page-header {
        gap: 12px;
        padding-bottom: 14px;
        margin-bottom: 14px;
      }
    }

    /* ── Botón Imprimir / Guardar como PDF: botón completo (ícono +
       texto) en escritorio, colapsado a solo ícono en mobile ──────── */
    .pjf-print-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 11px 22px;
      background: var(--azul-pj);
      color: var(--texto-on-color);
      border: 1.5px solid var(--azul-pj);
      border-radius: var(--bs-border-radius);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8438rem;
      font-weight: 600;
      line-height: 1.3;
      white-space: nowrap;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: background-color .2s, color .2s, transform .15s;
    }

    .pjf-print-btn i {
      font-size: 0.875rem;
      color: var(--dorado);
    }

    .pjf-print-btn:hover {
      background: var(--azul-medio);
      border-color: var(--azul-medio);
      transform: translateY(-1px);
    }

    .pjf-print-btn:active {
      transform: translateY(0);
    }

    @media (max-width: 700px) {
      .pjf-print-btn {
        align-self: flex-start;
        width: 38px;
        height: 38px;
        padding: 0;
        gap: 0;
      }

      .pjf-print-btn .pjf-print-btn-text {
        display: none;
      }

      .pjf-print-btn i {
        font-size: 0.9375rem;
      }
    }

    @media print {
      .pjf-print-btn {
        display: none !important;
      }
    }

    .pjf-component dl.article-info {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 10px;
      list-style: none;
      margin: 0 0 28px;
      padding: 0;
    }

    .pjf-component dl.article-info dt {
      display: none;
    }

    .pjf-component dl.article-info dd {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 5px 12px;
      background: var(--gris-bg);
      border: 1px solid var(--gris-borde);
      border-radius: 999px;
      font-size: 0.75rem;
      color: var(--texto-suave);
      line-height: 1.4;
    }

    .pjf-component dl.article-info dd a {
      color: var(--azul-medio);
      text-decoration: none;
      font-weight: 600;
    }

    .pjf-component dl.article-info dd a:hover {
      text-decoration: underline;
    }

    .pjf-component dl.article-info dd::before {
      font-family: 'Font Awesome 7 Free';
      font-weight: 900;
      font-size: 0.6875rem;
      color: var(--dorado);
    }

    .pjf-component dl.article-info dd.createdby::before    { content: '\f007'; }
    .pjf-component dl.article-info dd.category-name::before { content: '\f07b'; }
    .pjf-component dl.article-info dd.create::before        { content: '\f073'; }
    .pjf-component dl.article-info dd.modified::before      { content: '\f021'; }
    .pjf-component dl.article-info dd.hits::before          { content: '\f06e'; }

    .pjf-component .img-fulltext,
    .pjf-component .img-intro {
      margin: 0 0 24px;
    }

    .pjf-component .img-fulltext img,
    .pjf-component .img-intro img {
      box-shadow: var(--shadow-sm);
    }

    .pjf-component [itemprop="articleBody"],
    .pjf-component .item-page > div {
      font-size: 0.9688rem;
      line-height: 1.75;
      color: var(--texto);
    }

    .pjf-component [itemprop="articleBody"] p,
    .pjf-component .item-page > div p {
      margin: 0 0 16px;
    }

    .pjf-component [itemprop="articleBody"] a {
      color: var(--azul-medio);
      text-decoration: underline;
    }

    .pjf-component [itemprop="articleBody"] h2,
    .pjf-component [itemprop="articleBody"] h3 {
      font-family: 'DM Sans', sans-serif;
      color: var(--azul-pj);
      margin: 28px 0 14px;
    }

    .pjf-component [itemprop="articleBody"] table {
      width: 100%;
      border-collapse: collapse;
      margin: 16px 0;
    }

    .pjf-component [itemprop="articleBody"] table th,
    .pjf-component [itemprop="articleBody"] table td {
      border: 1px solid var(--gris-borde);
      padding: 8px 12px;
      font-size: 0.875rem;
    }

    .pjf-component .tags,
    .pjf-component ul.tag-list,
    .pjf-component .tag-list {
      order: 999;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 16px 0 0;
      margin: 24px 0 0;
      border-top: 1px solid var(--gris-borde);
    }

    .pjf-component .tags ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0;
      margin: 0;
    }

    .pjf-component .tags li,
    .pjf-component ul.tag-list li,
    .pjf-component .tag-list li {
      list-style: none;
      margin: 0;
    }

    .pjf-component .tags a,
    .pjf-component ul.tag-list a,
    .pjf-component .tag-list a {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 12px;
      background: rgba(35, 86, 160, 0.08);
      color: var(--azul-medio);
      border-radius: 999px;
      font-size: 0.75rem;
      text-decoration: none;
    }

    .pjf-component .tags a::before,
    .pjf-component ul.tag-list a::before,
    .pjf-component .tag-list a::before {
      content: '\f02b';
      font-family: 'Font Awesome 7 Free';
      font-weight: 900;
      font-size: 0.625rem;
    }

    .pjf-component .tags a:hover,
    .pjf-component ul.tag-list a:hover,
    .pjf-component .tag-list a:hover {
      background: var(--azul-medio);
      color: var(--texto-on-color);
    }

    /* ── Campos personalizados (custom fields de Joomla) ─────── */
    .pjf-component li.field-entry {
      list-style: none;
      display: block;
      margin: 20px 0 0;
      padding: 16px 20px;
      background: var(--gris-bg);
      border: 1px solid var(--gris-borde);
      border-left: 3px solid var(--dorado);
      border-radius: var(--radius-sm);
    }

    .pjf-component li.field-entry .field-label {
      display: flex;
      align-items: center;
      gap: 7px;
      font-weight: 700;
      font-size: 0.8125rem;
      color: var(--azul-pj);
      margin-bottom: 4px;
    }

    .pjf-component li.field-entry .field-label::before {
      content: '\f129';
      font-family: 'Font Awesome 7 Free';
      font-weight: 900;
      font-size: 0.6875rem;
      color: var(--dorado);
    }

    .pjf-component li.field-entry.sobre-el-autor .field-label::before {
      content: '\f007';
    }

    .pjf-component li.field-entry .field-value {
      display: block;
      font-size: 0.875rem;
      line-height: 1.65;
      color: var(--texto-suave);
    }

    /* ── Paginación numerada (listados, resultados de búsqueda) ──
       Acotada a <ul class="pagination"> (Bootstrap-style, con <li>).
       OJO: no usar ".pagination" sola, porque la navegación de
       artículo individual (más abajo) también se llama "pagination"
       pero es un <span>, no un <ul>, con otra estructura interna. */
    .pjf-component ul.pagination {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 6px;
      list-style: none;
      margin: 32px 0 0;
      padding-top: 24px;
      border-top: 1px solid var(--gris-borde);
    }

    .pjf-component ul.pagination li {
      list-style: none;
      margin: 0;
    }

    .pjf-component ul.pagination .page-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      height: 36px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 0.8125rem;
      font-weight: 600;
      text-decoration: none;
      color: var(--azul-medio);
      background: var(--blanco);
      border: 1.5px solid var(--gris-borde);
      transition: background-color .2s, border-color .2s, color .2s;
    }

    .pjf-component ul.pagination a.page-link:hover {
      background: var(--gris-bg);
      border-color: var(--azul-medio);
    }

    .pjf-component ul.pagination .active a,
    .pjf-component ul.pagination .page-item.active .page-link {
      background: var(--azul-pj);
      border-color: var(--azul-pj);
      color: var(--texto-on-color);
    }

    .pjf-component ul.pagination li.disabled .page-link {
      color: var(--texto-suave);
      background: var(--gris-bg);
      border-color: var(--gris-borde);
      opacity: .6;
    }

    /* ── Navegación Anterior/Siguiente de artículo (Joomla 6) ───
       Markup real: <nav class="pagenavigation"><span class="pagination
       ms-0"><a class="btn ... previous|next">. NO es un <ul>, así que
       no choca con las reglas de arriba. */
    .pjf-component nav.pagenavigation {
      margin: 28px 0 0;
      padding-top: 24px;
      border-top: 1px solid var(--gris-borde);
    }

    .pjf-component nav.pagenavigation .pagination {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      width: 100%;
    }

    .pjf-component nav.pagenavigation .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .pjf-component nav.pagenavigation a.previous,
    .pjf-component nav.pagenavigation a.next {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      background: var(--blanco);
      border: 1.5px solid var(--gris-borde);
      border-radius: var(--bs-border-radius);
      color: var(--azul-medio);
      text-decoration: none;
      font-size: 0.8125rem;
      font-weight: 600;
      transition: background-color .2s, border-color .2s, transform .15s;
    }

    .pjf-component nav.pagenavigation a.next {
      margin-left: auto;
      flex-direction: row-reverse;
    }

    .pjf-component nav.pagenavigation a:hover {
      background: var(--gris-bg);
      border-color: var(--azul-medio);
      transform: translateY(-1px);
    }

    .pjf-component nav.pagenavigation .icon-chevron-left,
    .pjf-component nav.pagenavigation .icon-chevron-right {
      font-family: 'Font Awesome 7 Free';
      font-weight: 900;
      font-size: 0.6875rem;
    }

    .pjf-component nav.pagenavigation .icon-chevron-left::before {
      content: '\f053';
    }

    .pjf-component nav.pagenavigation .icon-chevron-right::before {
      content: '\f054';
    }

    @media (max-width: 600px) {
      .pjf-component nav.pagenavigation .pagination {
        flex-direction: column;
      }

      .pjf-component nav.pagenavigation a.previous,
      .pjf-component nav.pagenavigation a.next {
        margin-left: 0;
        width: 100%;
        justify-content: center;
      }
    }

    .pjf-component [data-bs-toggle="collapse"] {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    /* ── Resultados de búsqueda (com_finder) ─────────────────── */
    .pjf-component .highlight,
    .pjf-component mark[data-markjs] {
      background: rgba(200, 168, 75, 0.35);
      color: var(--azul-pj);
      border-radius: 3px;
      padding: 0 2px;
    }

    [data-bs-theme="dark"] .pjf-component .highlight,
    [data-bs-theme="dark"] .pjf-component mark[data-markjs] {
      color: var(--texto);
    }

    /* Color base para cualquier link "suelto" del contenido (ej. el
       mensaje "N resultados han sido encontrados" de Smart Search,
       que no tiene clase propia): sin esto quedaba con el azul por
       defecto del navegador, que en modo oscuro es ilegible. Las
       reglas más específicas de más abajo (result__title-link, tags,
       paginación, etc.) lo siguen pisando sin problema. */
    .pjf-component a:not([class]) {
      color: var(--azul-medio);
      overflow-wrap: anywhere;
    }

    /* Bootstrap no separa los .nav-link entre sí salvo que cada uno
       esté envuelto en <li class="nav-item"> con su propio margen, o
       que el HTML traiga una utilidad gap-*. Los artículos migrados
       traen los <a class="nav-link"> sueltos, sin nada de eso. */
    .pjf-component .nav {
      gap: .4rem;
    }

    .pjf-component hr {
      border: none;
      border-top: 1px solid var(--gris-borde);
      margin: 24px 0;
    }

    .pjf-component .result__item {
      list-style: none;
      padding: 20px 0;
      border-bottom: 1px solid var(--gris-borde);
    }

    .pjf-component .result__item:first-child {
      padding-top: 0;
    }

    .pjf-component .result__item:last-child {
      border-bottom: none;
    }

    .pjf-component .result__title {
      margin: 0 0 8px;
    }

    .pjf-component .result__title-link {
      display: inline-block;
      font-family: 'DM Sans', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--azul-pj);
      text-decoration: none;
    }

    [data-bs-theme="dark"] .pjf-component .result__title-link {
      color: var(--texto);
    }

    .pjf-component .result__title-link:hover {
      color: var(--azul-medio);
      text-decoration: underline;
    }

    /* Solo el título queda visible; la URL cruda no se muestra */
    .pjf-component .result__title-url {
      display: none;
    }

    .pjf-component .result__description {
      margin: 0 0 10px;
      color: var(--texto-suave);
      font-size: 0.875rem;
      line-height: 1.7;
    }

    .pjf-component .result__date {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0 10px 6px 0;
      padding: 2px 10px;
      background: var(--gris-bg);
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--texto-suave);
      white-space: nowrap;
    }

    .pjf-component .result__date::before {
      content: '\f073';
      font-family: 'Font Awesome 7 Free';
      font-weight: 900;
      color: var(--dorado);
      font-size: 0.625rem;
    }

    .pjf-component .result__taxonomy {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 10px 0 0;
      padding: 0;
    }

    .pjf-component .result__taxonomy-item {
      list-style: none;
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      background: rgba(35, 86, 160, 0.08);
      border-radius: 999px;
      font-size: 0.75rem;
      color: var(--azul-medio);
    }

    .pjf-component .result__taxonomy-item span {
      font-weight: 700;
      color: var(--azul-pj);
    }

    [data-bs-theme="dark"] .pjf-component .result__taxonomy-item span {
      color: var(--texto);
    }

    /* ── Vista de categoría (listado en tabla) ───────────────── */
    .pjf-component select {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8125rem;
      color: var(--texto);
      background: var(--blanco);
      border: 1.5px solid var(--gris-borde);
      border-radius: var(--radius-sm);
      padding: 6px 12px;
      margin-bottom: 16px;
      cursor: pointer;
      transition: border-color .2s;
    }

    .pjf-component select:focus {
      outline: none;
      border-color: var(--azul-medio);
    }

    .pjf-component .table-responsive {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .pjf-component table {
      width: 100%;
      border-collapse: collapse;
      background: var(--blanco);
      border: 1px solid var(--gris-borde);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .pjf-component table caption {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }

    .pjf-component table thead th {
      background: var(--azul-pj);
      color: var(--texto-on-color);
      font-size: 0.8125rem;
      font-weight: 600;
      text-align: left;
      padding: 14px 18px;
      white-space: nowrap;
    }

    .pjf-component table thead th a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--texto-on-color);
      text-decoration: none;
    }

    .pjf-component table thead th a:hover {
      color: var(--dorado-claro);
    }

    .pjf-component table tbody tr {
      border-top: 1px solid var(--gris-borde);
      transition: background-color .15s;
    }

    .pjf-component table tbody tr:hover {
      background: var(--gris-bg);
    }

    .pjf-component table tbody td,
    .pjf-component table tbody th {
      padding: 14px 18px;
      font-size: 0.875rem;
      font-weight: 400;
      font-family: 'DM Sans', sans-serif;
      text-align: left;
      color: var(--texto-suave);
      vertical-align: middle;
    }

    .pjf-component table tbody td:first-child,
    .pjf-component table tbody th.list-title {
      color: var(--texto);
    }

    .pjf-component table tbody td a,
    .pjf-component table tbody th a {
      font-family: 'DM Sans', sans-serif;
      color: var(--azul-medio);
      text-decoration: none;
      font-weight: 600;
    }

    .pjf-component table tbody td a:hover,
    .pjf-component table tbody th a:hover {
      color: var(--azul-pj);
      text-decoration: underline;
    }

    .pjf-component table tbody .badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      background: rgba(35, 86, 160, 0.08);
      color: var(--azul-medio);
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    @media (max-width: 700px) {
      .pjf-component table thead th:not(:first-child),
      .pjf-component table tbody td:not(:first-child) {
        display: none;
      }
    }

    /* ── Búsqueda inteligente (com_finder) ───────────────────── */
    .pjf-component fieldset {
      background: var(--blanco);
      border: 1px solid var(--gris-borde);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      padding: 22px 24px;
      margin: 0 0 20px;
    }

    /* El navegador reserva el hueco para el legend sobre el borde del
       fieldset a nivel de motor de renderizado, no por CSS: ni
       display:block ni position lo evitan. La única forma confiable
       de sacarlo de ese modo especial es flotarlo (técnica clásica,
       funciona en todos los navegadores). Con textos cortos casi no
       se notaba, pero el de "Recordar usuario" usa un párrafo largo
       de dos líneas como legend, y la segunda línea quedaba cortada
       por el borde de la caja. */
    .pjf-component legend {
      float: left;
      width: 100%;
      font-family: 'DM Sans', sans-serif;
      color: var(--azul-pj);
      font-size: 1rem;
      padding: 0 0 10px;
      margin: 0;
    }

    /* Título de los formularios de reset/remind (com_users): mismo
       tipo de letra que el párrafo de descripción que va justo abajo,
       para que no haya un salto de fuente serif → sans dentro de la
       misma caja. Reemplaza al <legend> real (ver html/com_users/
       reset y remind), que el navegador siempre dibuja por fuera del
       borde redondeado. */
    .pjf-form-title {
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: 0.9375rem;
      color: var(--azul-pj);
      margin: 0 0 10px;
    }

    [data-bs-theme="dark"] .pjf-form-title {
      color: var(--texto);
    }

    .pjf-component form label {
      display: block;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--azul-pj);
      margin-bottom: 6px;
    }

    /* var(--azul-pj) en modo oscuro es casi negro: pensado para texto
       sobre superficies claras, no sobre la card oscura del fieldset. */
    [data-bs-theme="dark"] .pjf-component legend,
    [data-bs-theme="dark"] .pjf-component form label {
      color: var(--texto);
    }

    .pjf-component form input[type="text"]:not(.form-control),
    .pjf-component form input[type="search"]:not(.form-control),
    .pjf-component form input[type="email"]:not(.form-control),
    .pjf-component form input[type="password"]:not(.form-control) {
      box-sizing: border-box;
      width: 100%;
      max-width: 420px;
      height: 42px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      color: var(--texto);
      background: var(--gris-bg);
      border: 1.5px solid var(--gris-borde);
      border-radius: 999px;
      padding: 0 18px;
      transition: border-color .2s;
    }

    .pjf-component form input[type="text"]:not(.form-control):focus,
    .pjf-component form input[type="search"]:not(.form-control):focus,
    .pjf-component form input[type="email"]:not(.form-control):focus,
    .pjf-component form input[type="password"]:not(.form-control):focus {
      outline: none;
      border-color: var(--azul-medio);
      background: var(--blanco);
    }

    .pjf-component form button:not(.btn) {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      height: 42px;
      padding: 0 20px;
      margin: 0;
      background: var(--azul-pj);
      color: var(--texto-on-color);
      border: 1.5px solid var(--azul-pj);
      border-radius: var(--bs-border-radius);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      transition: background-color .2s, transform .15s;
      white-space: nowrap;
    }

    /* ── Búsqueda avanzada (com_finder): texto de ayuda más chico y
       los 4 filtros (Tipo/Idioma/Autor/Categoría) en una sola fila en
       vez de apilados. #finder-filter-window es el id fijo que usa
       el layout core de Joomla para este bloque. */
    .pjf-component .com-finder__tips,
    .pjf-component .com-finder__tips p {
      font-size: 0.8125rem;
    }

    /* La estructura real es #finder-filter-window > .filter-branch >
       .control-group (uno por filtro), no hijos directos de
       #finder-filter-window. */
    #finder-filter-window .filter-branch {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 8px;
    }

    #finder-filter-window .control-group {
      flex: 1 1 180px;
      min-width: 160px;
      margin-bottom: 0;
    }

    #finder-filter-window .control-label,
    #finder-filter-window label {
      font-size: 0.75rem;
      margin-bottom: 4px;
    }

    #finder-filter-window select {
      width: 100%;
      font-size: 0.8125rem;
    }

    @media (max-width: 700px) {
      #finder-filter-window .control-group {
        flex: 1 1 45%;
      }
    }

    .pjf-component form button:not(.btn):hover {
      background: var(--azul-medio);
      border-color: var(--azul-medio);
      transform: translateY(-1px);
    }

    .pjf-component form button.btn-link,
    .pjf-component form button[type="button"]:not(.btn) {
      background: var(--blanco);
      color: var(--azul-medio);
      border-color: var(--gris-borde);
    }

    .pjf-component form button.btn-link:hover,
    .pjf-component form button[type="button"]:not(.btn):hover {
      background: var(--gris-bg);
      border-color: var(--azul-medio);
    }

    .pjf-component .finder-select-box,
    .pjf-component .controls {
      margin-top: 16px;
    }

    .pjf-component ul.tips,
    .pjf-component .finder-message {
      list-style: none;
      padding: 0;
      margin: 0 0 12px;
      font-size: 0.875rem;
      color: var(--texto-suave);
      line-height: 1.7;
    }

    .pjf-component p {
      line-height: 1.7;
    }

    @media (max-width: 600px) {
      .pjf-component form input[type="text"]:not(.form-control),
      .pjf-component form input[type="search"]:not(.form-control),
      .pjf-component form input[type="email"]:not(.form-control),
      .pjf-component form input[type="password"]:not(.form-control) {
        max-width: none;
      }

      .pjf-component fieldset {
        padding: 18px;
      }
    }

    /* ── LOGIN / LOGOUT (com_users) ───────────────────────────────
       Comparten el wrapper .pjf-component con el buscador de Smart
       Search, así que se pisan algunas reglas pensadas para ese form
       (fieldset:first-of-type en una sola fila). Acá se vuelve a un
       formulario apilado normal y se estiliza el campo de contraseña
       y el checkbox "Recuérdeme", que no quedaban cubiertos por las
       reglas genéricas de arriba (solo cubrían input[type="text"]). */
    /* Panel de dos columnas: foto institucional a la izquierda +
       formulario a la derecha (.pjf-auth-card). El borde/sombra/radio
       que antes tenía la card sola ahora envuelve a las dos columnas
       juntas, para que se vean como una sola pieza. */
    .pjf-auth-split {
      display: flex;
      max-width: 900px;
      margin: 40px auto;
      border: 1.5px solid var(--gris-borde);
      border-top: 4px solid var(--dorado);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }

    .pjf-auth-image {
      flex: 1 1 42%;
      min-height: 540px;
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .pjf-auth-image::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(165deg, rgba(20, 42, 77, .82) 0%, rgba(35, 86, 160, .35) 100%);
    }

    .pjf-auth-card {
      flex: 1 1 58%;
      min-width: 0;
      position: relative;
      text-align: center;
      background: var(--blanco);
      padding: 24px 24px 24px;
      overflow: hidden;
    }

    @media (max-width: 760px) {
      .pjf-auth-split {
        flex-direction: column;
        margin: 24px auto;
      }

      .pjf-auth-image {
        flex: none;
        min-height: 180px;
      }
    }

    /* Mismo degradé de antes, pero ahora como capa decorativa de fondo
       (no como background real de la card) para que no corte feo en
       el borde inferior redondeado. */
    .pjf-auth-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 150px;
      background: linear-gradient(180deg, var(--gris-bg) 0%, transparent 100%);
      z-index: 0;
      pointer-events: none;
    }

    .pjf-auth-card > * {
      position: relative;
      z-index: 1;
    }

    /* La card ya aporta el recuadro general: el fieldset interno no
       necesita su propia caja (heredaría el estilo genérico pensado
       para Smart Search y quedaría una "caja dentro de la caja"). */
    .pjf-auth-card fieldset {
      background: none;
      border: none;
      box-shadow: none;
      padding: 0;
      margin: 0 0 20px;
    }

    .pjf-auth-heading h1 {
      font-family: 'DM Sans', sans-serif;
      font-size: 1.3125rem;
      color: var(--azul-pj);
      margin: 0 0 22px;
    }

    /* var(--azul-pj) es casi negro en modo oscuro (pensado para texto
       sobre superficies claras); sobre el degradé oscuro de la card
       queda ilegible. Mismo problema en los labels de los campos. */
    [data-bs-theme="dark"] .pjf-auth-heading h1 {
      color: var(--dorado-claro);
    }

    /* La regla ".pjf-component fieldset:first-of-type" (pensada para
       el buscador de Smart Search, en una sola fila) tiene más
       especificidad que un simple ".pjf-auth-fieldset" y le ganaba,
       por eso Usuario/Contraseña/botón terminaban en fila. Se fuerza
       acá con !important para volver a un formulario apilado. */
    .pjf-auth-fieldset {
      display: block !important;
      text-align: left;
    }

    /* Cada campo (label + input) centrado como columna, con un ancho
       fijo compartido con el botón de "Iniciar sesión" para que todo
       quede prolijamente alineado. */
    .pjf-auth-fieldset .control-group {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      flex-wrap: nowrap !important;
      margin: 0 0 10px;
    }

    .pjf-auth-fieldset .control-label,
    .pjf-auth-fieldset .controls,
    .pjf-auth-fieldset label {
      width: 100%;
      max-width: 280px;
      flex: none !important;
    }

    /* La regla genérica ".pjf-component .controls { margin-top: 16px }"
       (pensada para el buscador) sumaba un salto extra entre cada
       label y su campo; se anula acá. */
    .pjf-auth-fieldset .controls {
      margin-top: 0 !important;
    }

    .pjf-auth-fieldset .control-label,
    .pjf-auth-fieldset label {
      display: block;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--azul-pj);
      margin-bottom: 4px !important;
    }

    [data-bs-theme="dark"] .pjf-auth-fieldset .control-label,
    [data-bs-theme="dark"] .pjf-auth-fieldset label {
      color: var(--texto);
    }

    /* Joomla (form.validate) inserta el mensaje de error como un
       <span class="form-control-feedback"> DENTRO del <label>, pegado
       al texto. Se baja a su propia línea, en rojo y más chico. */
    .pjf-auth-fieldset label span.form-control-feedback {
      display: block;
      color: var(--rojo-alerta);
      font-size: 0.7188rem;
      font-weight: 500;
      white-space: nowrap;
      margin-top: 2px;
    }

    .pjf-auth-fieldset .form-control {
      box-sizing: border-box;
      width: 100%;
      max-width: 280px !important;
      height: 42px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      color: var(--texto);
      background: var(--gris-bg);
      border: 1.5px solid var(--gris-borde);
      border-radius: 999px;
      padding: 0 18px !important;
      transition: border-color .2s;
    }

    .pjf-auth-fieldset .form-control:focus {
      outline: none;
      border-color: var(--azul-medio);
      background: var(--blanco);
    }

    .pjf-auth-fieldset .password-group .form-control {
      border-radius: 999px;
    }

    /* El botón nativo de Joomla para mostrar/ocultar la contraseña
       no se usa en este sitio: se oculta y el input vuelve a ocupar
       todo el ancho del campo. */
    .pjf-auth-fieldset .input-password-toggle {
      display: none;
    }

    .pjf-auth-fieldset .btn-primary {
      width: 100%;
      max-width: 280px;
      justify-content: center;
      flex-shrink: 0 !important;
    }

    .pjf-auth-remember {
      display: flex;
      justify-content: center;
      margin: 16px 0 4px;
    }

    .pjf-auth-remember .form-check {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 280px;
    }

    .pjf-auth-remember .form-check-input {
      width: 16px;
      height: 16px;
      accent-color: var(--azul-medio);
      cursor: pointer;
    }

    .pjf-auth-remember .form-check-label {
      font-size: 0.8438rem;
      color: var(--texto);
      cursor: pointer;
    }

    /* Mismo lenguaje visual que las "píldoras" de fecha/categoría en
       la cabecera de los artículos (dl.article-info dd): fondo gris,
       borde, bien redondeado y un ícono chico a la izquierda. */
    .pjf-auth-options {
      display: flex;
      /* Este div también lleva la clase .list-group de Bootstrap,
         que trae flex-direction:column de fábrica. Como nunca se
         declaraba acá, no había nada que le compitiera y apilaba
         los botones en columna en vez de en fila. */
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      list-style: none;
      margin: 0;
      padding: 16px 0 0;
      border-top: 1px solid var(--gris-borde);
    }

    .pjf-auth-options .list-group-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: var(--gris-bg);
      border: 1px solid var(--gris-borde);
      border-radius: 999px;
      font-size: 0.7812rem;
      font-weight: 600;
      color: var(--azul-medio);
      text-decoration: none;
      transition: background-color .2s, border-color .2s, color .2s;
    }

    .pjf-auth-options .list-group-item::before {
      font-family: 'Font Awesome 7 Free';
      font-weight: 900;
      font-size: 0.6875rem;
      color: var(--dorado);
    }

    .pjf-auth-options .com-users-login__reset::before    { content: '\f084'; }
    .pjf-auth-options .com-users-login__remind::before    { content: '\f007'; }
    .pjf-auth-options .com-users-login__register::before { content: '\f234'; }

    .pjf-auth-options .list-group-item:hover {
      background: var(--azul-medio);
      border-color: var(--azul-medio);
      color: var(--texto-on-color);
    }

    .pjf-auth-options .list-group-item:hover::before {
      color: var(--dorado-claro);
    }

    .pjf-sidebar {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .pjf-sidebar > * {
      background: var(--blanco);
      border: 1.5px solid var(--gris-borde);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow-sm);
    }

    .pjf-empty-state {
      font-size: 0.8125rem;
      color: var(--texto-suave);
      font-style: italic;
    }

    /* ── PERFIL (com_users/profile) ───────────────────────────────
       Vista nativa de Joomla: hereda fieldset/legend de las reglas
       genéricas de .pjf-component (líneas ~1630), pero las listas
       <dl class="dl-horizontal"> y el botón "Editar perfil" (un <a>,
       no un <button>, así que no entra en las reglas de formularios)
       no tenían estilo propio.
       Ojo: Joomla reutiliza la misma clase "com-users-profile__edit"
       para el <ul> que envuelve ese botón en la vista de solo lectura
       Y para el <div> que envuelve TODO el formulario en la vista de
       edición (task=profile.edit). Sin el selector "ul." de abajo,
       el text-align:right se filtraba al formulario completo y
       desalineaba a la derecha cada <legend> (por el float:left;
       width:100% de la regla genérica de legend, que hereda el
       text-align del padre). */
    ul.com-users-profile__edit {
      list-style: none;
      margin: 0 0 20px;
      padding: 0;
      text-align: right;
    }

    .com-users-profile__edit .btn.btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 20px;
      background: var(--azul-pj);
      color: var(--texto-on-color);
      border: 1.5px solid var(--azul-pj);
      border-radius: var(--bs-border-radius);
      font-size: 0.8125rem;
      font-weight: 600;
      text-decoration: none;
      transition: background-color .2s, transform .15s;
    }

    .com-users-profile__edit .btn.btn-primary:hover {
      background: var(--azul-medio);
      border-color: var(--azul-medio);
      transform: translateY(-1px);
    }

    .pjf-component .com-users-profile dl.dl-horizontal {
      display: grid;
      grid-template-columns: minmax(160px, 240px) 1fr;
      gap: 0;
      margin: 0;
    }

    .pjf-component .com-users-profile dl.dl-horizontal dt,
    .pjf-component .com-users-profile dl.dl-horizontal dd {
      padding: 10px 0;
      border-bottom: 1px solid var(--gris-borde);
      margin: 0;
    }

    .pjf-component .com-users-profile dl.dl-horizontal dt {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--azul-pj);
    }

    [data-bs-theme="dark"] .pjf-component .com-users-profile dl.dl-horizontal dt {
      color: var(--texto);
    }

    .pjf-component .com-users-profile dl.dl-horizontal dd {
      font-size: 0.875rem;
      color: var(--texto);
      word-break: break-word;
    }

    .pjf-component .com-users-profile dl.dl-horizontal dt:last-of-type,
    .pjf-component .com-users-profile dl.dl-horizontal dd:last-of-type {
      border-bottom: none;
    }

    @media (max-width: 600px) {
      .pjf-component .com-users-profile dl.dl-horizontal {
        grid-template-columns: 1fr;
      }

      .pjf-component .com-users-profile dl.dl-horizontal dt {
        border-bottom: none;
        padding-bottom: 2px;
      }

      .pjf-component .com-users-profile dl.dl-horizontal dd {
        padding-top: 0;
      }
    }

    /* ── PERFIL: formulario de edición (task=profile.edit) ────────
       Markup nativo de Joomla heredado de Bootstrap 2
       (.control-group/.control-label/.controls), sin clases de
       grilla de Bootstrap 5: por eso cada campo necesita reglas
       propias en vez de apoyarse en utilidades del framework. Los
       <select> nativos y el <select> de Editor/Idioma/etc. no tenían
       ningún estilo (quedaban con la apariencia default del
       navegador, sin alto ni ancho consistente con los inputs de
       texto), y el widget de Choices.js (Zona horaria, Eventos de
       correo) tampoco, así que se veían sin la caja "pill" del resto
       del formulario. */
    /* ".pjf-component fieldset:first-of-type" está pensada para el
       cuadro de Smart Search (un solo fieldset, label+input+botones
       en una fila), pero ":first-of-type" se evalúa por padre: el
       primer <fieldset> de ESTE formulario ("Edite su perfil")
       también calza, y terminaba poniendo cada .control-group como
       ítem flex con ancho según contenido, agrupando Nombre/Usuario
       y Contraseña/Confirmar/Email en filas en vez de apilarlos. */
    #member-profile fieldset:first-of-type {
      display: block;
    }

    #member-profile .control-group {
      margin: 0 0 20px;
    }

    #member-profile .control-group:last-child {
      margin: 0;
    }

    #member-profile select,
    #member-profile .form-select {
      box-sizing: border-box;
      display: block;
      width: 100%;
      max-width: 420px;
      height: 42px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      color: var(--texto);
      background: var(--gris-bg);
      border: 1.5px solid var(--gris-borde);
      border-radius: 999px;
      padding: 0 18px;
    }

    #member-profile select:focus,
    #member-profile .form-select:focus {
      outline: none;
      border-color: var(--azul-medio);
      background: var(--blanco);
    }

    /* joomla-field-fancy-select (Choices.js) oculta el <select>
       nativo y dibuja su propia caja ".choices__inner": se la
       acota al mismo ancho/alto "pill" que el resto de los campos. */
    #member-profile joomla-field-fancy-select {
      display: block;
      width: 100%;
      max-width: 420px;
    }

    #member-profile .choices {
      margin: 0;
    }

    #member-profile .choices__inner {
      box-sizing: border-box;
      min-height: 42px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      background: var(--gris-bg);
      border: 1.5px solid var(--gris-borde);
      border-radius: 999px;
      padding: 6px 18px;
    }

    #member-profile .choices.is-focused .choices__inner,
    #member-profile .choices.is-open .choices__inner {
      border-color: var(--azul-medio);
      background: var(--blanco);
    }

    #member-profile .choices__list--single,
    #member-profile .choices__list--multiple {
      padding: 0;
    }

    /* El CSS propio de Choices.js (choices.min.css, externo, no
       editable acá) define ".choices__item"/".choices__button" con
       selectores más específicos que pisaban el tamaño/color de acá,
       y el botón de "quitar" se mostraba con el texto accesible
       ("Remove item") visible en vez de solo el ícono. Se sube la
       especificidad agregando el ancestro ".choices" y se fuerza con
       !important como último recurso, ya que es la única forma de
       garantizar que gane sobre el stylesheet de la librería. */
    #member-profile .choices .choices__list--multiple .choices__item {
      display: inline-flex !important;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      background: var(--azul-medio) !important;
      border-color: var(--azul-medio) !important;
      border-radius: 999px !important;
      padding: 4px 6px 4px 12px !important;
      font-size: 0.75rem !important;
      line-height: 1.4;
    }

    #member-profile .choices .choices__list--multiple .choices__button {
      width: 14px;
      height: 14px;
      min-width: 14px;
      padding: 0 !important;
      margin: 0 !important;
      font-size: 0 !important;
      line-height: 0;
      opacity: 0.85;
      flex: 0 0 auto;
    }

    #member-profile .choices__list--dropdown {
      border-radius: 12px;
      border-color: var(--gris-borde);
    }

    /* Contraseña (input + botón "mostrar") y token (input + botón
       "Copiar"): el <button> quedaba apilado debajo del input por
       falta de un contenedor flex. */
    #member-profile .controls .input-group {
      display: flex;
      align-items: stretch;
      gap: 8px;
      max-width: 420px;
    }

    #member-profile .input-group input[type="text"],
    #member-profile .input-group input[type="password"] {
      flex: 1 1 auto;
      max-width: none;
    }

    #member-profile .input-group .btn {
      flex: 0 0 auto;
      height: 42px;
      padding: 0 16px;
      margin: 0;
      border-radius: var(--bs-border-radius);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8125rem;
      font-weight: 600;
      white-space: nowrap;
    }

    #member-profile [id$="-rules"] {
      margin: 0 0 8px;
      font-family: 'DM Sans', sans-serif;
    }

    /* Los toggles "Notificaciones de correo" / "Activo" / "Restablecer"
       son <fieldset> anidados dentro de .controls (Joomla los usa para
       agrupar el par de radios del switcher). La regla genérica
       ".pjf-component fieldset" (tarjeta blanca con borde/sombra) los
       tomaba también a ellos, así que cada toggle aparecía metido en
       su propia caja recortada dentro de la tarjeta del campo. */
    #member-profile .controls fieldset {
      background: none;
      border: none;
      box-shadow: none;
      padding: 0;
      margin: 0;
    }

    /* La regla genérica ".pjf-component form button" pinta TODOS los
       <button> del mismo azul institucional, así que pisaba los
       colores semánticos de Bootstrap: "Cancelar" (btn-danger) y
       "Añadir nueva passkey" (btn-success) se veían igual de azules
       que "Guardar", y el botón de mostrar/ocultar contraseña
       (btn-secondary, solo ícono) quedaba como una píldora ancha en
       vez de un botón cuadrado discreto. */
    #member-profile .btn-danger {
      background: var(--rojo-alerta);
      border-color: var(--rojo-alerta);
    }

    #member-profile .btn-danger:hover {
      background: #a3301f;
      border-color: #a3301f;
    }

    #member-profile .btn-success {
      background: var(--verde);
      border-color: var(--verde);
    }

    #member-profile .btn-success:hover {
      background: #166346;
      border-color: #166346;
    }

    #member-profile .input-password-toggle {
      background: var(--blanco);
      color: var(--azul-medio);
      border-color: var(--gris-borde);
      flex: 0 0 42px;
      width: 42px;
      padding: 0;
    }

    #member-profile .input-password-toggle:hover {
      background: var(--gris-bg);
      border-color: var(--azul-medio);
    }

    /* Autenticación multifactor: el HTML que genera Joomla acá usa
       clases de utilidad de Bootstrap (.card, .d-flex, .table, etc.)
       que NO existen en absoluto en all.min.css — el build de esta
       hoja de estilos del template parece haber sido generado
       escaneando solo los archivos propios del template, sin ver
       nunca el HTML que arman las vistas nativas de Joomla, así que
       esas clases quedaron afuera. Se estiliza directamente por las
       clases propias de cada bloque en vez de depender de Bootstrap. */
    #com-users-methods-reset-container {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--gris-borde);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      background: var(--gris-bg);
      font-size: 0.8125rem;
      margin: 0 0 16px;
    }

    .com-users-methods-list-method {
      border: 1px solid var(--gris-borde);
      border-radius: var(--radius);
      margin: 0 0 16px;
      overflow: hidden;
    }

    .com-users-methods-list-method-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      background: var(--gris-bg);
      border-bottom: 1px solid var(--gris-borde);
    }

    .com-users-methods-list-method-image {
      flex: 0 0 auto;
      display: flex;
      padding: 6px;
      background: var(--blanco);
      border-radius: var(--radius-sm);
      border: 1px solid var(--gris-borde);
    }

    /* Los íconos SVG de cada método (TOTP, YubiKey, Passkey, Email)
       no tenían tamaño fijo y se mostraban a su tamaño intrínseco,
       mucho más grande que el resto de la tarjeta. */
    .com-users-methods-list-method-image img {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }

    .com-users-methods-list-method-title {
      flex: 1 1 auto;
      min-width: 160px;
    }

    .com-users-methods-list-method-title h2 {
      margin: 0;
      font-size: 1rem;
      font-family: 'DM Sans', sans-serif;
      color: var(--azul-pj);
    }

    [data-bs-theme="dark"] .com-users-methods-list-method-title h2 {
      color: var(--texto);
    }

    .com-users-methods-list-method-records-container {
      padding: 14px 18px;
    }

    .com-users-methods-list-method-info {
      font-size: 0.8125rem;
      color: var(--texto-suave);
      margin: 0 0 10px;
    }

    .com-users-methods-list-method-addnew-container {
      padding-top: 10px;
      border-top: 1px solid var(--gris-borde);
    }

    .com-users-methods-list-method-addnew {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border: 1.5px solid var(--azul-medio);
      border-radius: var(--bs-border-radius);
      color: var(--azul-medio);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8125rem;
      font-weight: 600;
      text-decoration: none;
      transition: background-color .2s, color .2s;
    }

    .com-users-methods-list-method-addnew:hover {
      background: var(--azul-medio);
      color: var(--texto-on-color);
    }

    /* Tabla de passkeys: sin .table/.table-striped/.table-dark de
       Bootstrap, por el mismo motivo de arriba. */
    .plg_system_webauthn table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8125rem;
      margin: 0 0 14px;
    }

    .plg_system_webauthn thead {
      background: var(--azul-pj);
      color: var(--texto-on-color);
    }

    .plg_system_webauthn th,
    .plg_system_webauthn td {
      padding: 10px 12px;
      text-align: left;
      border-bottom: 1px solid var(--gris-borde);
    }

    .plg_system_webauthn tbody tr:nth-child(even) {
      background: var(--gris-bg);
    }

    /* ── FOOTER: enlaces inferiores (footer-bottom-links) ────── */
    .footer-bottom-links {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
    }

    .footer-bottom-links a {
      color: rgba(255, 255, 255, 0.75);
      text-decoration: none;
      font-size: 0.75rem;
    }

    .footer-bottom-links a:hover {
      color: var(--dorado-claro);
    }

    .footer-col ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    /* ── PÁGINA DE ERROR (403 / 404 / 500) ───────────────────── */
    .pjf-error-main {
      min-height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 64px 0;
    }

    .pjf-error-box {
      text-align: center;
      max-width: 560px;
    }

    .pjf-error-code {
      font-family: 'DM Sans', sans-serif;
      font-size: 6rem;
      font-weight: 700;
      color: var(--dorado);
      line-height: 1;
      margin-bottom: 8px;
    }

    .pjf-error-box h2 {
      font-family: 'DM Sans', sans-serif;
      color: var(--texto);
      font-size: 1.5rem;
      margin-bottom: 12px;
    }

    .pjf-error-box p {
      color: var(--texto-suave);
      font-size: 0.875rem;
      margin-bottom: 24px;
    }

    .pjf-error-debug {
      margin-top: 24px;
      text-align: left;
      background: var(--gris-bg);
      border-radius: var(--radius-sm);
      padding: 16px;
      font-size: 0.6875rem;
      overflow-x: auto;
      color: var(--texto-suave);
    }

    /* ── IMPRESIÓN ────────────────────────────────────────────── */
    .pjf-print header,
    .pjf-print footer {
      display: none;
    }

    /* ── MEJORA DE FOCO VISIBLE (accesibilidad WCAG 2.1 AA) ──── */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
      outline: 2px solid var(--azul-claro);
      outline-offset: 2px;
    }

    /* ── COMPATIBILIDAD CON EL WRAPPER DE MÓDULOS "HTML
       PERSONALIZADO" DE JOOMLA ──────────────────────────────────
       Joomla envuelve el contenido de cada módulo Custom HTML en
       <div id="mod-custom-N" class="mod-custom custom">. Si varias
       tarjetas de una misma posición viven en UN solo módulo, ese
       wrapper se vuelve el único hijo del grid y rompe el reparto
       en columnas. "display:contents" lo saca del árbol de cajas
       sin sacarlo del DOM, así sus hijos (las tarjetas) pasan a ser
       hijos directos de la grilla — funciona con 1 módulo con todas
       las tarjetas adentro, o con varios módulos, indistintamente. */
    .accesos-grid .mod-custom,
    .servicios-grid .mod-custom,
    .stats-grid .mod-custom,
    .org-grid .mod-custom {
      display: contents;
    }

    /* Por si además quedó pegado el <div> contenedor original
       duplicado (mismo nombre de clase que el de afuera), también
       se vuelve transparente para que no duplique el reparto de
       columnas. */
    .accesos-grid .accesos-grid,
    .servicios-grid .servicios-grid,
    .stats-grid .stats-grid,
    .org-grid .org-grid {
      display: contents;
    }

    /* ── Ajustes del menú principal con el árbol real de ítems (7 entradas) ──
       1) Los títulos de sección (heading/separator) son <span> dentro de un
          <button>: sin color propio quedaban gris oscuro sobre el header.
       2) Una sola fila, más compacto.
       3) Entre 769px y 1180px no entra: se usa el menú desplegable móvil. */
    nav.main-nav .mod-menu__toggle-sub,
    nav.main-nav .mod-menu__heading,
    nav.main-nav .nav-item > span {
      color: var(--texto);
    }

    nav.main-nav .nav-item:hover > .mod-menu__toggle-sub,
    nav.main-nav .nav-item:focus-within > .mod-menu__toggle-sub,
    nav.main-nav .nav-item:hover > .mod-menu__toggle-sub .mod-menu__heading,
    nav.main-nav .nav-item:focus-within > .mod-menu__toggle-sub .mod-menu__heading {
      color: var(--azul-medio);
    }

    nav.main-nav .mod-menu__heading {
      font-size: 0.8438rem;
      font-weight: 500;
      white-space: nowrap;
    }

    nav.main-nav ul.mod-list {
      flex-wrap: nowrap;
    }

    nav.main-nav > ul.mod-list > .nav-item > a {
      padding-left: 10px;
    }

    nav.main-nav > ul.mod-list > .nav-item > .mod-menu__toggle-sub:first-child {
      padding-left: 10px;
    }

    .logo-text span {
      white-space: nowrap;
    }

    @media (min-width: 769px) and (max-width: 1180px) {
      nav.main-nav { display: none; }
      nav.main-nav.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--blanco);
        box-shadow: var(--shadow-lg);
        padding: 16px;
        z-index: 999;
      }
      .mobile-toggle { display: flex; }
      nav.main-nav.open ul.mod-list { flex-direction: column; align-items: stretch; gap: 0; }
      nav.main-nav.open .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--gris-borde); }
      nav.main-nav.open .nav-item:last-child { border-bottom: none; }
      nav.main-nav.open .nav-item > a { flex: 1 1 auto; padding: 13px 14px; font-size: 0.9062rem; }
      nav.main-nav.open .mod-menu__toggle-sub { padding: 13px 14px; }
      nav.main-nav.open .mod-menu__sub {
        display: none; position: static; opacity: 1; visibility: visible; pointer-events: auto;
        transform: none; box-shadow: none; border: none; border-radius: 0; min-width: 0;
        padding: 4px 0 8px 16px; width: 100%; background: var(--gris-bg);
      }
      nav.main-nav.open .mod-menu__toggle-sub[aria-expanded="true"] ~ .mod-menu__sub { display: block; }
      nav.main-nav.open .mod-menu__sub a { padding: 10px 14px; }
    }

    /* Ítems de menú con imagen (ej. Acceso Personal → images/icons/login.svg) */
    nav.main-nav .nav-item > a > img {
      height: 22px;
      width: auto;
      display: block;
    }

    [data-bs-theme="dark"] nav.main-nav .nav-item > a > img {
      filter: invert(1);
    }

    /* Menú personal (portal interno) en la barra lateral derecha */
    .pjf-sidebar ul.mod-menu {
      list-style: none;
      margin: 0;
    }

    .pjf-sidebar .mod-menu .nav-item {
      list-style: none;
    }

    .pjf-sidebar .mod-menu a,
    .pjf-sidebar .mod-menu .mod-menu__heading {
      display: block;
      padding: 8px 10px;
      border-radius: var(--radius-sm);
      color: var(--texto);
      text-decoration: none;
      font-size: 0.875rem;
    }

    .pjf-sidebar .mod-menu a:hover,
    .pjf-sidebar .mod-menu a[aria-current="page"],
    .pjf-sidebar .mod-menu .current > a {
      background: var(--gris-bg);
      color: var(--azul-medio);
    }

    .pjf-sidebar .mod-menu .mod-menu__sub {
      display: block;
      list-style: none;
      margin: 0;
      padding: 0 0 0 14px;
    }

    .pjf-sidebar .mod-menu .mod-menu__toggle-sub {
      display: none;
    }

    .pjf-sidebar ul.mod-menu {
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 2px;
    }

    /* ── Edición en pantalla de Joomla (solo usuarios con permiso) ──────
       Joomla inserta el botón "Editar elemento" y su cuadro de ayuda
       (role="tooltip") DENTRO del primer elemento de cada módulo/artículo.
       Sin los estilos de Cassiopeia, el texto de ayuda se veía como
       contenido y, dentro de listas/grillas (menú, hero, accesos), el
       botón ocupaba una celda y desordenaba todo. Se saca del flujo. */
    :where(:has(> .jmodedit)) {
      position: relative;
    }

    .jmodedit {
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 1040;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      padding: 0;
      border: 0;
      border-radius: var(--bs-border-radius);
      background: var(--azul-medio);
      color: #fff;
      box-shadow: var(--shadow-sm);
      text-decoration: none;
      opacity: .9;
      transition: opacity .15s, background .15s;
    }

    .jmodedit:hover,
    .jmodedit:focus-visible {
      opacity: 1;
      background: var(--azul-pj);
      color: #fff;
    }

    .jmodedit .icon-edit::before,
    a[aria-describedby^="editarticle"] .icon-edit::before {
      content: '\f303';
      font-family: 'Font Awesome 7 Free';
      font-weight: 900;
      font-size: 0.8125rem;
    }

    /* Cuadro de ayuda: oculto hasta pasar el mouse / enfocar con teclado */
    .jmodedit + [role="tooltip"],
    a[aria-describedby^="editarticle"] > [role="tooltip"] {
      display: none;
      position: absolute;
      z-index: 1041;
      max-width: 280px;
      padding: 8px 12px;
      border-radius: 6px;
      background: #1c2533;
      color: #fff;
      font-size: 0.75rem;
      font-weight: 400;
      line-height: 1.45;
      text-align: left;
      box-shadow: var(--shadow-md);
    }

    .jmodedit + [role="tooltip"] {
      top: 42px;
      right: 6px;
    }

    .jmodedit:hover + [role="tooltip"],
    .jmodedit:focus-visible + [role="tooltip"],
    a[aria-describedby^="editarticle"]:hover > [role="tooltip"],
    a[aria-describedby^="editarticle"]:focus-visible > [role="tooltip"] {
      display: block;
    }

    /* Botón "Editar elemento" de un artículo (vista de artículo y listas) */
    a[aria-describedby^="editarticle"] {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: .25rem .5rem;
      border: 1px solid var(--gris-borde);
      border-radius: var(--bs-border-radius);
      background: var(--blanco);
      color: var(--texto-suave);
      font-size: 0.75rem;
      text-decoration: none;
      white-space: nowrap;
    }

    a[aria-describedby^="editarticle"]:hover,
    a[aria-describedby^="editarticle"]:focus-visible {
      border-color: var(--azul-medio);
      color: var(--azul-medio);
    }

    a[aria-describedby^="editarticle"] > [role="tooltip"] {
      top: calc(100% + 6px);
      right: 0;
      white-space: normal;
      width: max-content;
    }

    .icons {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 8px;
    }

    .icons .float-end {
      float: none;
    }

    td.list-edit {
      width: 1%;
      white-space: nowrap;
      text-align: right;
    }

    /* Botón de edición de módulos: más chico, sobre la esquina y
       semitransparente hasta pasar el mouse, para no tapar botones reales
       (ej. "Buscar" del hero o "Hacer una denuncia" de la cinta). */
    .jmodedit {
      top: -9px;
      right: -9px;
      width: 24px;
      height: 24px;
      opacity: .5;
    }

    .jmodedit:hover,
    .jmodedit:focus-visible {
      opacity: 1;
    }

    .jmodedit .icon-edit::before {
      font-size: 0.6875rem;
    }

    .jmodedit + [role="tooltip"] {
      top: 20px;
      right: -9px;
    }

    /* Módulo de bienvenida del portal interno (mod_login con sesión) */
    .pjf-welcome {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .pjf-welcome__saludo {
      flex: 1 1 0;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      font-size: 0.875rem;
      line-height: 1.35;
      color: var(--texto);
    }

    .pjf-welcome__saludo > i {
      font-size: 1.625rem;
      color: var(--azul-medio);
      flex-shrink: 0;
    }

    .pjf-welcome__hola {
      display: block;
      color: var(--texto-suave);
      font-size: 0.7812rem;
    }

    .pjf-welcome__nombre {
      display: block;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .pjf-welcome__fecha {
      flex-basis: 100%;
      display: flex;
      align-items: center;
      gap: 6px;
      padding-top: 10px;
      border-top: 1px solid var(--gris-borde);
      font-size: 0.7812rem;
      color: var(--texto-suave);
    }

    .pjf-welcome__fecha > i { color: var(--azul-medio); }

    .pjf-welcome__form {
      margin: 0;
    }

    .pjf-welcome__salir {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 16px;
      border: 1.5px solid var(--azul-medio);
      border-radius: var(--bs-border-radius);
      background: transparent;
      color: var(--azul-medio);
      font: inherit;
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s, color .15s;
    }

    .pjf-welcome__salir:hover,
    .pjf-welcome__salir:focus-visible {
      background: var(--azul-medio);
      color: #fff;
    }


    /* Logo completo (escudo + nombre) como imagen única en la cabecera */
    .logo-completo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      line-height: 0;
    }

    .logo-completo img {
      display: block;
      height: 58px;
      width: auto;
      max-width: 100%;
    }

    /* El texto del logo es negro: en tema oscuro va sobre una placa blanca */
    [data-bs-theme="dark"] .logo-completo:not(.has-dark) {
      padding: 4px 12px;
      border-radius: var(--radius-sm);
      background: #fff;
    }

    /* Variante del logo para el tema oscuro (mismo tamaño: no mueve el menú) */
    .logo-completo .logo-dark {
      display: none;
    }

    [data-bs-theme="dark"] .logo-completo.has-dark .logo-light {
      display: none;
    }

    [data-bs-theme="dark"] .logo-completo.has-dark .logo-dark {
      display: block;
    }

    @media (max-width: 768px) {
      .logo-completo img {
        height: 40px;
      }
    }

    /* ── FOOTER: direcciones y teléfonos (posición footer-direcciones) ──
       Un módulo por sede; se acomodan en una fila de hasta 4 columnas. */
    .footer-direcciones {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 28px;
      padding: 32px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer-direcciones h3 {
      margin: 0 0 12px;
      color: var(--dorado-claro);
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: .6px;
      line-height: 1.35;
    }

    .footer-direcciones p {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 0 0 8px;
      font-size: 0.8125rem;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.8);
    }

    .footer-direcciones p i {
      flex-shrink: 0;
      width: 14px;
      margin-top: 3px;
      text-align: center;
      color: var(--dorado);
    }

    .footer-bottom p {
      margin: 0;
    }

    /* Si no hay columna de marca/enlaces, las direcciones abren el pie */
    footer .container > .footer-direcciones:first-child {
      padding-top: 0;
    }

    /* ── Menú principal: flechas y submenús consistentes ────────────────
       - Separación entre el texto y la flecha en los botones de sección.
       - La flecha rota solo en su propio ítem (antes rotaban también las
         de los submenús al pasar el mouse por el menú principal).
       - Escritorio: las filas de un submenú tienen el mismo relleno con o
         sin flecha, la flecha apunta al costado y el submenú anidado se
         abre a la derecha (a la izquierda en los últimos ítems, para no
         salirse de la pantalla) en vez de abrirse hacia abajo. */
    nav.main-nav .mod-menu__toggle-sub {
      gap: 7px;
    }

    nav.main-nav .mod-menu__heading {
      white-space: nowrap;
    }

    @media (min-width: 1181px) {
      nav.main-nav .mod-menu__sub .nav-item {
        display: flex;
        align-items: center;
        border-radius: 0;
      }

      nav.main-nav .mod-menu__sub .nav-item > a {
        flex: 1 1 auto;
        padding: 9px 8px 9px 20px;
      }

      nav.main-nav .mod-menu__sub .nav-item:not(.deeper) > a {
        padding-right: 20px;
      }

      nav.main-nav .mod-menu__sub .nav-item > a:hover {
        padding-left: 20px;
      }

      nav.main-nav .mod-menu__sub .nav-item > a ~ .mod-menu__toggle-sub {
        padding: 9px 16px 9px 4px;
      }

      nav.main-nav .mod-menu__sub .nav-item > .mod-menu__toggle-sub:first-child {
        flex: 1 1 auto;
        justify-content: space-between;
        padding: 9px 16px 9px 20px;
        text-align: left;
      }

      nav.main-nav .mod-menu__sub .mod-menu__toggle-sub .icon-chevron-down,
      nav.main-nav .mod-menu__sub .nav-item.deeper:hover > .mod-menu__toggle-sub .icon-chevron-down,
      nav.main-nav .mod-menu__sub .nav-item.deeper:focus-within > .mod-menu__toggle-sub .icon-chevron-down,
      nav.main-nav .mod-menu__sub .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down {
        transform: rotate(-90deg);
      }

      nav.main-nav .mod-menu__sub .mod-menu__sub {
        top: -9px;
        left: calc(100% - 2px);
        transform: translateX(-8px);
      }

      nav.main-nav .mod-menu__sub .nav-item.deeper:hover > .mod-menu__sub,
      nav.main-nav .mod-menu__sub .nav-item.deeper:focus-within > .mod-menu__sub,
      nav.main-nav .mod-menu__sub .mod-menu__toggle-sub[aria-expanded="true"] ~ .mod-menu__sub {
        transform: translateX(0);
      }

      nav.main-nav > ul > .nav-item:nth-last-child(-n+3) .mod-menu__sub .mod-menu__sub {
        left: auto;
        right: calc(100% - 2px);
        transform: translateX(8px);
      }

      nav.main-nav > ul > .nav-item:nth-last-child(-n+3) .mod-menu__sub .nav-item.deeper:hover > .mod-menu__sub,
      nav.main-nav > ul > .nav-item:nth-last-child(-n+3) .mod-menu__sub .nav-item.deeper:focus-within > .mod-menu__sub,
      nav.main-nav > ul > .nav-item:nth-last-child(-n+3) .mod-menu__sub .mod-menu__toggle-sub[aria-expanded="true"] ~ .mod-menu__sub {
        transform: translateX(0);
      }
    }

    /* ── Acordeón Bootstrap 5 con los colores de la plantilla (claro/oscuro) ── */
    .accordion {
      --bs-accordion-bg: var(--blanco);
      --bs-accordion-color: var(--texto);
      --bs-accordion-border-color: var(--gris-borde);
      --bs-accordion-btn-color: var(--texto);
      --bs-accordion-btn-bg: var(--blanco);
      --bs-accordion-active-color: var(--azul-medio);
      --bs-accordion-active-bg: var(--gris-bg);
      --bs-accordion-btn-focus-border-color: var(--azul-claro);
      --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(74, 141, 224, .25);
    }

    [data-bs-theme="dark"] .accordion {
      --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e7eaf0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238fb3e8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      --bs-accordion-active-color: #8fb3e8;
    }

    .accordion-button {
      font-weight: 500;
    }

    .accordion-body > :last-child {
      margin-bottom: 0;
    }

    /* Si solo hay una lista (p. ej. Edictos), el título de la sección ya la nombra */
    .pj-docs-grid .pj-doc-list:only-child > h3 {
      display: none;
    }

    [data-bs-theme="dark"] .pj-doc-list h3 {
      color: var(--texto);
    }

    /* Botón de acción (módulo content-top) alineado a la derecha del renglón de datos del artículo */
    .pjf-component dl.article-info dd.pjf-article-extra {
      margin-left: auto;
      padding: 0;
      background: none;
      border: 0;
      border-radius: 0;
    }

    .pjf-component dl.article-info dd.pjf-article-extra::before {
      content: none;
    }

    .pjf-component dl.article-info dd.pjf-article-extra a.btn {
      color: var(--bs-btn-color);
      text-decoration: none;
      font-weight: 400;
    }

    .pjf-component dl.article-info dd.pjf-article-extra a.btn:hover,
    .pjf-component dl.article-info dd.pjf-article-extra a.btn:focus-visible,
    .pjf-component dl.article-info dd.pjf-article-extra a.btn:active {
      color: var(--bs-btn-hover-color);
      text-decoration: none;
    }

    .pjf-component .pjf-content-top:not(:has(*)) {
      display: none;
    }

    /* ── Hero: accesos principales en una línea horizontal bajo el buscador ──
       Sin la descripción de cada tarjeta (se oculta por CSS: el texto sigue en el módulo). */
    .hero-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .hero-left {
      max-width: 760px;
    }

    /* ── Hero centrado, con la imagen de fondo del sitio J3 ─────────────── */
    .hero {
      background:
        linear-gradient(135deg, rgba(20, 42, 77, 0.88) 0%, rgba(35, 86, 160, 0.78) 60%, rgba(74, 141, 224, 0.70) 100%),
        url('/images/2020/09/21/justice1920x1080.jpg') center / cover no-repeat;
    }

    .hero-left {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
      width: 100%;
      container-type: inline-size;
    }

    /* El título ocupa el mismo ancho que el buscador (560px): 53px con
       letter-spacing -0.03em miden ~558px; en pantallas angostas escala
       con el ancho del contenedor (buscador = 100%). */
    .hero h2 {
      font-size: min(3.3125rem, 9.4cqw);
      letter-spacing: -0.03em;
      white-space: nowrap;
      margin-bottom: 8px;
    }

    .hero p.hero-subtitle {
      max-width: none;
      font-family: 'DM Sans', sans-serif;
      font-size: 1.625rem;
      color: #fff;
      margin-bottom: 36px;
    }

    .hero-search-box {
      margin: 0 auto;
      max-width: 560px;
    }

    @media (max-width: 768px) {
      .hero p.hero-subtitle {
        font-size: 1.25rem;
      }
    }

    /* Módulos debajo del contenido (posición content-bottom) */
    .pjf-content-bottom {
      margin-top: 32px;
    }

    .pjf-content-bottom > * + * {
      margin-top: 24px;
    }

    .pjf-content-bottom iframe,
    .pjf-content-bottom .wrapper {
      display: block;
      width: 100%;
      border: 0;
    }

    .pjf-content-bottom:not(:has(*)) {
      display: none;
    }

    /* Flechas del paginador: Joomla las pide como .icon-angle-*; se dibujan con Font Awesome 7 */
    .pjf-component ul.pagination .page-link [class^="icon-angle-"] {
      display: inline-block;
      border: 0;
      background: none;
      min-width: 0;
      height: auto;
      padding: 0;
      line-height: 1;
    }

    .pjf-component ul.pagination .page-link [class^="icon-angle-"]::before {
      font-family: 'Font Awesome 7 Free';
      font-weight: 900;
      font-size: 0.75rem;
    }

    .pjf-component ul.pagination .icon-angle-double-left::before  { content: '\f100'; }
    .pjf-component ul.pagination .icon-angle-left::before         { content: '\f104'; }
    .pjf-component ul.pagination .icon-angle-right::before        { content: '\f105'; }
    .pjf-component ul.pagination .icon-angle-double-right::before { content: '\f101'; }

    /* ── Ancho completo (estilo del template con la opción "Ancho completo") ──
       El contenido usa todo el ancho de la ventana (header y pie conservan su ancho normal). */
    .pjf-fullwidth .pjf-page-wrap,
    .pjf-fullwidth .pjf-banner-top .container {
      max-width: none;
      padding-left: 24px;
      padding-right: 24px;
    }

    .pjf-fullwidth .pjf-page-grid,
    .pjf-fullwidth .pjf-page-grid.has-sidebar {
      grid-template-columns: minmax(0, 1fr);
    }

    .pjf-fullwidth .pjf-component iframe {
      display: block;
      width: 100%;
    }

    /* Menú desplegable (móvil y tablet): las filas ocupan siempre todo el ancho del panel,
       no el de su texto (el centrado del menú de escritorio las achicaba). */
    @media (max-width: 1180px) {
      nav.main-nav.open {
        align-items: stretch;
      }

      nav.main-nav.open ul.mod-list,
      nav.main-nav.open .nav-item {
        width: 100%;
      }
    }

    /* ── Vista móvil: cabecera y cinta de emergencia ── */
    @media (max-width: 768px) {
      /* El modo oscuro no se ofrece en móvil */
      .theme-toggle {
        display: none;
      }

      /* Logo más grande */
      .logo-completo img {
        height: 54px;
      }

      /* Cinta de violencia de género: todo centrado, incluido el botón */
      .emergencia-inner {
        align-items: center;
        text-align: center;
      }

      .emergencia-left {
        justify-content: center;
      }

      .emergencia-btn {
        align-self: center;
        margin-left: auto;
        margin-right: auto;
      }
    }

    @media (max-width: 360px) {
      .logo-completo img {
        height: 46px;
      }
    }

    /* ── Hero: accesos principales como variante de botón de Bootstrap (.btn.btn-hero) ──
       Tamaño de botón normal; se personaliza solo con las variables --bs-btn-*. */
    .btn-hero {
      --bs-btn-color: #fff;
      --bs-btn-bg: rgba(255, 255, 255, 0.1);
      --bs-btn-border-color: rgba(255, 255, 255, 0.25);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: rgba(255, 255, 255, 0.2);
      --bs-btn-hover-border-color: rgba(255, 255, 255, 0.45);
      --bs-btn-active-color: #fff;
      --bs-btn-active-bg: rgba(255, 255, 255, 0.25);
      --bs-btn-active-border-color: rgba(255, 255, 255, 0.5);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      backdrop-filter: blur(12px);
    }

    .hero-btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 0.3rem;
      font-size: 0.85rem;
      background: #fff;
      color: var(--azul-pj);
    }

    /* Autocompletado de Smart Search: el script de Joomla envuelve el campo en .awesomplete;
       dentro de un .input-group ese contenedor debe ocupar el ancho libre, como lo haría el campo. */
    .input-group > .awesomplete {
      flex: 1 1 auto;
      width: 1%;
      min-width: 0;
    }

    .input-group > .awesomplete > .form-control {
      width: 100%;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* Pantallas angostas (la barra lateral pasa debajo del contenido): el saludo con "Salir"
       va primero y el menú del portal queda después del contenido. */
    @media (max-width: 900px) {
      .pjf-page-grid.has-sidebar > .pjf-sidebar {
        display: contents;
      }

      .pjf-sidebar > .pjf-welcome,
      .pjf-sidebar > .pjf-inscripciones {
        order: -1;
      }
    }

    /* Botones para tarjetas suaves (.bg-*-subtle): colores invertidos de la propia tarjeta
       (fondo = énfasis, texto = fondo suave). Contraste >= 7 en tema claro y oscuro. */
    .btn-emphasis-info,
    .btn-emphasis-warning {
      --bs-btn-color: var(--tone-subtle);
      --bs-btn-bg: var(--tone-emphasis);
      --bs-btn-border-color: var(--tone-emphasis);
      --bs-btn-hover-color: var(--tone-subtle);
      --bs-btn-hover-bg: color-mix(in srgb, var(--tone-emphasis) 82%, var(--tone-subtle));
      --bs-btn-hover-border-color: color-mix(in srgb, var(--tone-emphasis) 82%, var(--tone-subtle));
      --bs-btn-active-color: var(--tone-subtle);
      --bs-btn-active-bg: color-mix(in srgb, var(--tone-emphasis) 70%, var(--tone-subtle));
      --bs-btn-active-border-color: color-mix(in srgb, var(--tone-emphasis) 70%, var(--tone-subtle));
    }

    .btn-emphasis-info {
      --tone-emphasis: var(--bs-info-text-emphasis);
      --tone-subtle: var(--bs-info-bg-subtle);
    }

    .btn-emphasis-warning {
      --tone-emphasis: var(--bs-warning-text-emphasis);
      --tone-subtle: var(--bs-warning-bg-subtle);
    }

    /* Mensajes del sistema de Joomla como avisos emergentes (toasts de Bootstrap 5) en el costado derecho,
       debajo del encabezado fijo; layout: html/layouts/joomla/system/message.php */
    .pjf-toasts {
      top: 7rem;
      z-index: 1090;
      max-width: 100%;
    }

    .pjf-toasts .toast {
      width: 24rem;
      max-width: 100%;
    }

    /* ── Edición desde el sitio (solo super usuarios) ──────────────
       Los accesos de edición de Joomla (lápiz de módulos, de artículos
       y columna "editar" de los listados) quedan ocultos y se muestran
       solo si el super usuario activa el interruptor "Edición" de la
       cabecera (se recuerda en el navegador). */
    html:not([data-pjf-edicion="on"]) .jmodedit,
    html:not([data-pjf-edicion="on"]) [role="tooltip"][id^="tip-"],
    html:not([data-pjf-edicion="on"]) .com-content-article .icons,
    html:not([data-pjf-edicion="on"]) td.list-edit,
    html:not([data-pjf-edicion="on"]) th[id$="_header_edit"],
    html:not([data-pjf-edicion="on"]) a[href*="task=article.edit"] {
      display: none !important;
    }

    .pjf-edicion-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0 4px 0 0;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--texto-on-color);
    }

    .pjf-edicion-toggle .form-check-input { cursor: pointer; margin: 0; }
    .pjf-edicion-toggle label { cursor: pointer; }

    /* La cabecera no debe solaparse: el logo conserva su ancho y, en pantallas medianas,
       el menú reduce el relleno de sus ítems (hay más controles cuando se inicia sesión). */
    .logo-wrap { flex-shrink: 0; }

    @media (min-width: 901px) and (max-width: 1399px) {
      .header-inner { gap: 12px; }

      nav.main-nav .nav-item > a { padding-left: 9px; }

      nav.main-nav .nav-item:not(.deeper) > a { padding-right: 9px; }
    }

    /* Tarjeta de inscripciones desplegable: el chevron gira al abrir y, cerrada, el encabezado no deja borde inferior. */
    .pjf-inscripciones .card-header { font: inherit; }

    .pjf-insc-chevron { transition: transform .2s; }

    .pjf-inscripciones .card-header[aria-expanded="true"] .pjf-insc-chevron { transform: rotate(180deg); }

    .pjf-inscripciones .card-header[aria-expanded="false"] {
      border-bottom: 0;
      border-radius: inherit;
    }

    /* Ícono de acceso del menú: con sesión iniciada ofrece "Cerrar sesión" al pasar el mouse.
       Es el último ítem de la barra, así que el desplegable se alinea a la derecha y no usa la flecha del submenú. */
    nav.main-nav .nav-item.item-473 > .mod-menu__toggle-sub { display: none; }

    nav.main-nav .nav-item.item-473 > .mod-menu__sub {
      left: auto;
      right: 0;
      min-width: 170px;
    }

    /* Menú desplegable: entre el ítem y su submenú hay 6px de separación visual. Ese hueco no pertenecía a ningún
       elemento del ítem, así que al bajar el mouse se perdía el :hover y el menú se cerraba antes de llegar. Un puente
       invisible (::before del submenú, que sí es parte del ítem) cubre ese espacio, y una pequeña demora al cerrar
       tolera los movimientos en diagonal. */
    nav.main-nav .mod-menu__sub::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -10px;
      height: 10px;
    }

    @media (min-width: 1181px) {
      nav.main-nav .mod-menu__sub .mod-menu__sub::before {
        top: 0;
        bottom: 0;
        height: auto;
        left: -10px;
        right: auto;
        width: 10px;
      }

      nav.main-nav > ul > .nav-item:nth-last-child(-n+3) .mod-menu__sub .mod-menu__sub::before {
        left: auto;
        right: -10px;
      }
    }

    nav.main-nav .mod-menu__sub {
      transition: opacity .2s ease .12s, transform .2s ease .12s, visibility 0s linear .32s;
    }

    nav.main-nav .nav-item.deeper:hover > .mod-menu__sub,
    nav.main-nav .nav-item.deeper:focus-within > .mod-menu__sub,
    nav.main-nav .mod-menu__toggle-sub[aria-expanded="true"] ~ .mod-menu__sub {
      transition-delay: 0s, 0s, 0s;
    }