/* ════════════════════════════════════════════════════════════════════
   estilosBloques.css
   Render visual de cada tipo de bloque del page builder en el PORTAL
   PÚBLICO. El shell (navbar, footer, zonas, hero) vive en
   estilosPortal.css; este archivo se ocupa solo del contenido editable.

   Cada sección está prefijada con `portal-<nombre-bloque>-*` y usa las
   variables `--c-*` definidas en theme-config.css (que la
   ConfiguracionVisual del backend puede sobrescribir per-sitio).
   ════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   Color de acento configurable por bloque (paleta_color)

   Cualquier bloque que exponga un campo `color_acento` (paleta_color)
   aplica en su root la clase `portal-acento--<slug>`. Eso setea dos
   custom-properties consumibles desde el CSS del bloque:
     --portal-c-acento        : para `background` (acepta sólidos y
                                gradientes; usar como background o
                                background-image)
     --portal-c-acento-solid  : siempre un color sólido (apto para
                                `border`, `color`, `box-shadow`, etc.;
                                en los slugs de gradiente cae al color
                                "primario" del degradado)

   El set de slugs coincide con PALETA_OPCIONES_BASE en el catálogo.
   ═══════════════════════════════════════════════════════════════════ */
.portal-acento--transparente {
    --portal-c-acento: transparent;
    --portal-c-acento-solid: transparent;
}
.portal-acento--primary {
    --portal-c-acento: var(--c-primary);
    --portal-c-acento-solid: var(--c-primary);
}
.portal-acento--primary-suave {
    --portal-c-acento: var(--c-primary-lighter);
    --portal-c-acento-solid: var(--c-primary-lighter);
}
.portal-acento--accent {
    --portal-c-acento: var(--c-accent);
    --portal-c-acento-solid: var(--c-accent);
}
.portal-acento--accent-suave {
    --portal-c-acento: color-mix(in srgb, var(--c-accent) 25%, var(--c-bg));
    --portal-c-acento-solid: color-mix(in srgb, var(--c-accent) 25%, var(--c-bg));
}
.portal-acento--grad-primary {
    --portal-c-acento: linear-gradient(135deg,
        var(--c-primary-light) 0%, var(--c-primary) 55%, var(--c-primary-dark) 100%);
    --portal-c-acento-solid: var(--c-primary);
}
.portal-acento--grad-accent {
    --portal-c-acento: linear-gradient(135deg,
        var(--c-accent2, var(--c-accent)) 0%, var(--c-accent) 55%, var(--c-accent-dark) 100%);
    --portal-c-acento-solid: var(--c-accent);
}
.portal-acento--grad-mixto {
    --portal-c-acento: linear-gradient(135deg,
        var(--c-primary) 0%, var(--c-primary-dark) 45%, var(--c-accent) 100%);
    --portal-c-acento-solid: var(--c-primary);
}


/* ═══════════════════════════════════════════════════════════════════
   Banner promocional
   ═══════════════════════════════════════════════════════════════════ */

.portal-banner {
    position: relative;
    color: var(--c-text);
    overflow: hidden;
    /* Margen vertical fijo — el banner siempre queda separado del bloque
       previo, sin importar la zona donde se haya soltado. Se suma al
       `gap` de la zona si existe (Grid no colapsa margins). */
    margin-block: 1.5rem;
}
/* `altura` actúa como min-height (sólo bloquea el "achicarse de más").
   En la variante imagen-fondo el alto efectivo lo dicta la imagen — así
   no recortamos ni distorsionamos la proporción natural. */
.portal-banner--altura-baja  { min-height: 100px; }
.portal-banner--altura-media { min-height: 180px; }
.portal-banner--altura-alta  { min-height: 280px; }

/* Toda la pieza como link (texto + imagen). */
.portal-banner--link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: filter .15s ease;
}
.portal-banner--link:hover,
.portal-banner--link:focus {
    color: inherit;
    text-decoration: none;
    filter: brightness(0.97);
}

/* Bordes redondeados opt-in. overflow:hidden del banner ya recorta la
   imagen interna a las esquinas. */
.portal-banner--redondeado { border-radius: 12px; }

/* ── Variante imagen-fondo ─────────────────────────────────────────
   La imagen se renderiza como <img> con width:100% y height auto:
   el container crece para acomodar la imagen completa sin recortarla
   ni forzarla a un alto fijo. Si la imagen es muy chica, las clases
   --altura-* dan un piso mínimo. */
.portal-banner--imagen-fondo {
    /* Fallback cuando el operador todavía no eligió imagen */
    background: linear-gradient(135deg, var(--c-accent), var(--c-primary));
    color: var(--c-bg);
    display: block;
}
.portal-banner-imagen {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Variantes sin imagen: necesitan centrar texto verticalmente ── */
.portal-banner--color-solido,
.portal-banner--compacto {
    display: flex;
    align-items: center;
}

/* ── Inner (contenedor del texto) ─────────────────────────────────
   En imagen-fondo se superpone absolute sobre la imagen.
   En color-solido / compacto fluye normal y centra con el flex del
   banner. */
.portal-banner-inner {
    position: relative;
    z-index: 2;
    padding-block: 1.5rem;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.portal-banner--imagen-fondo .portal-banner-inner {
    position: absolute;
    inset: 0;
}

.portal-banner-texto {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 700;
}

.portal-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.25));
    z-index: 1;
}

/* ── Variante compacto ───────────────────────────────────────────── */
.portal-banner--compacto {
    background: var(--c-bg-subtle);
    color: var(--c-text);
    border-block: 1px solid var(--c-border);
    min-height: 60px;
}
.portal-banner--compacto .portal-banner-texto { font-size: 1rem; font-weight: 600; }

/* ── Variantes de color (paleta_color) ────────────────────────────
   Mismo set de opciones que `paleta_color` en cards. Sólo se aplica
   en la variante color-solido (la plantilla agrega la clase). En las
   variantes dark, el texto pasa a claro automáticamente. */
:where(.portal-banner--fondo-primary,
       .portal-banner--fondo-accent,
       .portal-banner--fondo-grad-primary,
       .portal-banner--fondo-grad-accent,
       .portal-banner--fondo-grad-mixto) {
    color: var(--c-bg);
}

.portal-banner--fondo-transparente   { background: transparent; }
.portal-banner--fondo-primary        { background: var(--c-primary); }
.portal-banner--fondo-primary-suave  { background: var(--c-primary-lighter); }
.portal-banner--fondo-accent         { background: var(--c-accent); }
.portal-banner--fondo-accent-suave   { background: color-mix(in srgb, var(--c-accent) 25%, var(--c-bg)); }
.portal-banner--fondo-grad-primary {
    background: linear-gradient(135deg,
        var(--c-primary-light) 0%, var(--c-primary) 55%, var(--c-primary-dark) 100%);
}
.portal-banner--fondo-grad-accent {
    background: linear-gradient(135deg,
        var(--c-accent2, var(--c-accent)) 0%, var(--c-accent) 55%, var(--c-accent-dark) 100%);
}
.portal-banner--fondo-grad-mixto {
    background: linear-gradient(135deg,
        var(--c-primary) 0%, var(--c-primary-dark) 45%, var(--c-accent) 100%);
}


/* ═══════════════════════════════════════════════════════════════════
   Cards destacadas
   3 variantes: redondeadas-imagen, cuadradas-color, minimalistas
   ═══════════════════════════════════════════════════════════════════ */

.portal-cards-titulo {
    color: var(--c-primary);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
}
.portal-cards-grid {
    display: grid;
    gap: 1rem;
}
.portal-cards--cols-2 .portal-cards-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 800px; }
.portal-cards--cols-3 .portal-cards-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.portal-cards--cols-4 .portal-cards-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.portal-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    /* Radio unificado con el resto de elementos "card-like" del portal
       (banner redondeado, accesos con-imagen, etc.) — 12px. La variante
       "cuadradas-color" lo pisa con 4px porque su semántica es la
       opuesta. */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;   /* contexto para .portal-card-stretch */
}
.portal-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08);
}
/* Stretched-link: <a> absoluto que cubre la card entera. Permite click
   en cualquier parte para navegar, sin perder la legibilidad ni la
   selección de texto interno (z-index 1; texto seleccionable funciona
   porque el navegador igual prioriza la selección sobre los hover). */
.portal-card--clickable { cursor: pointer; }
.portal-card-stretch {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
}
.portal-card--clickable:hover .portal-card-titulo { color: var(--c-primary); }
.portal-card--clickable:hover .portal-card-link { color: var(--c-primary-dark); }

/* La variante "redondeadas-imagen" hereda el radio base (12px) — no
   necesita override propio. Se deja la regla vacía / removida para
   mantener una sola fuente de verdad del radio. */
.portal-card-thumb {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: var(--c-primary-lighter);
}

.portal-cards--cuadradas-color .portal-card { border-radius: 4px; }
.portal-card-color-band {
    height: 8px;
    background: var(--c-primary);  /* fallback si no hay clase modificadora */
}
/* Variantes de color de la banda. Mismo set de opciones que `paleta_color`
   (compartido con texto libre y fondos de card) para no introducir nuevas
   nomenclaturas. La banda se pinta SIEMPRE — la opción `transparente`
   solo aparece en `color_banda_card` para "heredar del color general". */
.portal-card-color-band--primary       { background: var(--c-primary); }
.portal-card-color-band--primary-suave { background: var(--c-primary-lighter); }
.portal-card-color-band--accent        { background: var(--c-accent); }
.portal-card-color-band--accent-suave  { background: color-mix(in srgb, var(--c-accent) 25%, #fff); }
.portal-card-color-band--grad-primary {
    background: linear-gradient(135deg,
        var(--c-primary-light) 0%, var(--c-primary) 55%, var(--c-primary-dark) 100%);
}
.portal-card-color-band--grad-accent {
    background: linear-gradient(135deg,
        var(--c-accent2, var(--c-accent)) 0%, var(--c-accent) 55%, var(--c-accent-dark) 100%);
}
.portal-card-color-band--grad-mixto {
    background: linear-gradient(135deg,
        var(--c-primary) 0%, var(--c-primary-dark) 45%, var(--c-accent) 100%);
}

.portal-cards--minimalistas .portal-card {
    background: transparent;
    border: 0;
    text-align: center;
    box-shadow: none;
}
.portal-card-icono {
    font-size: 2.2rem;
    color: var(--c-primary);
    margin-bottom: .5rem;
}

.portal-card-body { padding: 1rem 1.1rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.portal-card-titulo {
    color: var(--c-text-strong);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .4rem;
}
.portal-card-descripcion {
    color: var(--c-text-soft);
    font-size: .92rem;
    margin: 0 0 .8rem;
    flex: 1;
}
.portal-card-link {
    color: var(--c-primary);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: auto;
}
.portal-card-link:hover { color: var(--c-primary-dark); text-decoration: none; }
.portal-card-link i { transition: transform .15s ease; }
.portal-card-link:hover i { transform: translateX(2px); }

/* ── Variantes de fondo de cards (paleta_color) ─────────────────────
   Aplican al .portal-card cuando el bloque tiene modo "por-card"
   (cada card lleva su propia clase) o cuando el bloque tiene modo
   "general" (todas las cards descendientes del .portal-cards--fondo-X
   reciben el mismo fondo). El catálogo expone las mismas opciones
   que el bloque "Texto libre" — coherencia institucional. */

/* Sólidos oscuros: texto blanco. */
:where(.portal-card--fondo-primary,
       .portal-card--fondo-accent,
       .portal-card--fondo-grad-primary,
       .portal-card--fondo-grad-accent,
       .portal-card--fondo-grad-mixto,
       .portal-cards--fondo-primary .portal-card,
       .portal-cards--fondo-accent .portal-card,
       .portal-cards--fondo-grad-primary .portal-card,
       .portal-cards--fondo-grad-accent .portal-card,
       .portal-cards--fondo-grad-mixto .portal-card) {
    color: var(--c-bg);
    border-color: transparent;
}
:where(.portal-card--fondo-primary,
       .portal-card--fondo-accent,
       .portal-card--fondo-grad-primary,
       .portal-card--fondo-grad-accent,
       .portal-card--fondo-grad-mixto,
       .portal-cards--fondo-primary .portal-card,
       .portal-cards--fondo-accent .portal-card,
       .portal-cards--fondo-grad-primary .portal-card,
       .portal-cards--fondo-grad-accent .portal-card,
       .portal-cards--fondo-grad-mixto .portal-card) :where(.portal-card-titulo,
                                                            .portal-card-descripcion,
                                                            .portal-card-link) {
    color: var(--c-bg);
}

/* Fondos concretos */
.portal-card--fondo-primary,
.portal-cards--fondo-primary .portal-card {
    background: var(--c-primary);
}
.portal-card--fondo-primary-suave,
.portal-cards--fondo-primary-suave .portal-card {
    background: var(--c-primary-lighter);
}
.portal-card--fondo-accent,
.portal-cards--fondo-accent .portal-card {
    background: var(--c-accent);
}
.portal-card--fondo-accent-suave,
.portal-cards--fondo-accent-suave .portal-card {
    background: color-mix(in srgb, var(--c-accent) 25%, #fff);
}
.portal-card--fondo-grad-primary,
.portal-cards--fondo-grad-primary .portal-card {
    background: linear-gradient(135deg,
        var(--c-primary-light) 0%,
        var(--c-primary) 55%,
        var(--c-primary-dark) 100%);
}
.portal-card--fondo-grad-accent,
.portal-cards--fondo-grad-accent .portal-card {
    background: linear-gradient(135deg,
        var(--c-accent2, var(--c-accent)) 0%,
        var(--c-accent) 55%,
        var(--c-accent-dark) 100%);
}
.portal-card--fondo-grad-mixto,
.portal-cards--fondo-grad-mixto .portal-card {
    background: linear-gradient(135deg,
        var(--c-primary) 0%,
        var(--c-primary-dark) 45%,
        var(--c-accent) 100%);
}


/* ═══════════════════════════════════════════════════════════════════
   Grilla de noticias
   ═══════════════════════════════════════════════════════════════════ */

.portal-noticias-titulo {
    color: var(--c-primary);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
}
.portal-noticias-grid {
    display: grid;
    gap: 1.25rem;
}
.portal-noticias--cols-2 .portal-noticias-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width: 900px; }
.portal-noticias--cols-3 .portal-noticias-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.portal-noticias--cols-4 .portal-noticias-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.portal-noticia {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.portal-noticia:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08);
}
.portal-noticia-thumb {
    /* Aspect-ratio 16:10 alineado con la thumb que genera el sistema
       (`NoticiaImagen.thumb` es 1024×640). Antes usaba `height: 180px`
       fijo con ancho variable según columnas, lo que producía slots
       con ratios inconsistentes y forzaba el `cover` a recortar de más. */
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: var(--c-primary-lighter);
    display: block;
}
.portal-noticia-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
    font-size: 2.5rem;
    background: var(--c-primary-lighter);
}
.portal-noticia-body {
    padding: 1rem 1.1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.portal-noticia-fecha {
    color: var(--c-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.portal-noticia-titulo { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.portal-noticia-titulo a { color: var(--c-text-strong); text-decoration: none; }
.portal-noticia-titulo a:hover { color: var(--c-primary); text-decoration: none; }
.portal-noticia-copete { color: var(--c-text-soft); font-size: .9rem; margin: 0; }

.portal-noticias-sin-datos {
    background: var(--c-bg-subtle);
    color: var(--c-muted);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   Bloque de autoridades
   4 variantes:
     - mosaico-circular   (default; foto circular grande)
     - cuadradas-uniforme (estilo Hacienda; foto cuadrada/retrato)
     - jerarquico-titular (titular destacado + grilla a su costado)
     - lista-compacta     (filas con foto chica + datos al lado)
   ═══════════════════════════════════════════════════════════════════ */

.portal-autoridades-titulo {
    color: var(--c-primary);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
}

/* ── Card base — usada por las variantes en grilla ──────────────── */
.portal-autoridad {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    transition: transform .18s ease, box-shadow .18s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.portal-autoridad:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08);
}
.portal-autoridad-foto {
    width: 110px;
    height: 110px;
    margin: 0 auto .75rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--c-primary-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Mosaico circular: anillo de acento alrededor de la foto. Usa la
   variante sólida del color_acento (los slugs de gradiente degradan a
   un color sólido para no romper el border-radius). */
.portal-autoridades--mosaico-circular .portal-autoridad-foto {
    border: 3px solid var(--portal-c-acento-solid, var(--c-primary));
}
.portal-autoridad-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.portal-autoridad-foto-placeholder {
    color: var(--c-primary);
    font-size: 2.8rem;
}
.portal-autoridad-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.portal-autoridad-nombre {
    color: var(--c-text-strong);
    font-size: 1rem;
    line-height: 1.25;
}
.portal-autoridad-cargo {
    color: var(--c-primary);
    font-size: .85rem;
    font-weight: 600;
}
.portal-autoridad-area {
    color: var(--c-muted);
    font-size: .78rem;
    font-style: italic;
}

/* ── Variante 1: mosaico-circular (default) ─────────────────────── */
.portal-autoridades--mosaico-circular .portal-autoridades-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Sin overrides — la card base ya es circular. */


/* ── Variante 2: cuadradas-uniforme (estilo Hacienda) ───────────── */
.portal-autoridades--cuadradas-uniforme .portal-autoridades-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.portal-autoridades--cuadradas-uniforme .portal-autoridad {
    padding: 0;
    overflow: hidden;
    /* Banda de acento arriba de la card — pintada con border-top.
       Usa la variante sólida del color_acento (border no acepta
       gradiente). */
    border-top: 6px solid var(--portal-c-acento-solid, var(--c-primary));
}
.portal-autoridades--cuadradas-uniforme .portal-autoridad-foto {
    width: 100%;
    height: 220px;
    margin: 0;
    border-radius: 0;
    aspect-ratio: 1 / 1;
}
.portal-autoridades--cuadradas-uniforme .portal-autoridad-foto img {
    object-position: center top;   /* prioriza la cabeza al recortar */
}
.portal-autoridades--cuadradas-uniforme .portal-autoridad-info {
    padding: .85rem 1rem 1.1rem;
    gap: .25rem;
}
.portal-autoridades--cuadradas-uniforme .portal-autoridad-nombre {
    font-size: 1.05rem;
}


/* ── Variante 3: jerarquico-titular ─────────────────────────────── */
.portal-autoridades-jer {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .portal-autoridades-jer { grid-template-columns: 1fr; }
}

.portal-autoridad-titular {
    background: linear-gradient(180deg, var(--c-primary-lighter) 0%, var(--c-bg-card) 60%);
    border: 1px solid var(--c-primary-lighter);
    border-radius: 14px;
    padding: 1.5rem 1.25rem 1.75rem;
    text-align: center;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.05);
    position: sticky;
    top: 90px;   /* evita que se vaya con scroll cuando hay mucha grilla */
    /* Detalle de acento sobre el borde superior — respeta el
       color_acento del bloque. */
    border-top: 4px solid var(--portal-c-acento-solid, var(--c-primary));
}
.portal-autoridad-titular-foto {
    width: 180px;
    height: 180px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--c-bg-card);
    border: 4px solid var(--c-bg-card);
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.portal-autoridad-titular-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portal-autoridad-titular-foto .portal-autoridad-foto-placeholder {
    color: var(--c-primary);
    font-size: 4.5rem;
}
.portal-autoridad-titular-info {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.portal-autoridad-titular-nombre {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--c-text-strong);
    line-height: 1.2;
}
.portal-autoridad-titular-cargo {
    color: var(--c-primary);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.portal-autoridad-titular-area {
    color: var(--c-muted);
    font-size: .9rem;
    font-style: italic;
}
.portal-autoridad-titular-bio {
    margin: .85rem 0 0;
    font-size: .88rem;
    color: var(--c-text-soft);
    line-height: 1.55;
    text-align: left;
    border-top: 1px solid var(--c-border-light);
    padding-top: .85rem;
}
.portal-autoridad-titular-contacto {
    margin-top: .85rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: center;
}
.portal-autoridad-contacto-link {
    color: var(--c-primary);
    text-decoration: none;
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.portal-autoridad-contacto-link:hover { text-decoration: underline; }

.portal-autoridades-jer-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    align-content: start;
}
.portal-autoridades-jer-grilla .portal-autoridad--mini {
    padding: .85rem .65rem 1rem;
}
.portal-autoridades-jer-grilla .portal-autoridad--mini .portal-autoridad-foto {
    width: 80px;
    height: 80px;
    margin-bottom: .55rem;
}
.portal-autoridades-jer-grilla .portal-autoridad--mini .portal-autoridad-foto-placeholder {
    font-size: 1.85rem;
}
.portal-autoridades-jer-grilla .portal-autoridad--mini .portal-autoridad-nombre {
    font-size: .88rem;
}
.portal-autoridades-jer-grilla .portal-autoridad--mini .portal-autoridad-cargo {
    font-size: .76rem;
}
.portal-autoridades-jer-grilla .portal-autoridad--mini .portal-autoridad-area {
    font-size: .72rem;
}


/* ── Variante 4: lista-compacta (zona lateral) ──────────────────── */
.portal-autoridades-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.portal-autoridad-fila {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 8px;
    padding: .55rem .75rem;
    transition: border-color .15s ease, background .15s ease;
}
.portal-autoridad-fila:hover {
    border-color: var(--c-primary-light);
    background: var(--c-bg-subtle);
}
.portal-autoridad-fila-foto {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--c-primary-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.portal-autoridad-fila-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portal-autoridad-fila-foto .portal-autoridad-foto-placeholder {
    font-size: 1.3rem;
    color: var(--c-primary);
}
.portal-autoridad-fila-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.portal-autoridad-fila-info strong {
    color: var(--c-text-strong);
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-autoridad-fila-info span {
    color: var(--c-primary);
    font-weight: 600;
    font-size: .78rem;
}
.portal-autoridad-fila-info small {
    color: var(--c-muted);
    font-size: .72rem;
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════
   Grilla de accesos directos — 4 variantes
   ═══════════════════════════════════════════════════════════════════
   El bloque usa `portal-accesos--<variante>` para alternar layout y
   estilo, y `portal-accesos--cols-<N>` (2/3/4) para el grid.
   Variantes:
     · circulos-centrados  Círculos sobre fondo del portal, texto bajo el círculo.
     · pildora-icono-izq   Píldora horizontal con ícono a la izquierda.
     · con-imagen          Card con imagen (o ícono) arriba y texto debajo.
     · solo-imagenes       Sólo imágenes, sin texto ni ícono.
   `--sin-icono` (en variantes con ícono) hace que el título ocupe toda
   la card cuando el operador deja el ícono vacío.
   ═══════════════════════════════════════════════════════════════════ */

.portal-accesos-titulo {
    color: var(--c-primary);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
}
.portal-accesos-grid {
    display: grid;
    gap: 1rem;
    /* El min ancho se sube para 4 columnas (con cols-4) y se baja para 2.
       Con `repeat(<N>, 1fr)` forzamos exactamente N columnas en desktop;
       en mobile colapsa a auto-fit con minmax. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.portal-accesos--cols-2 .portal-accesos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-accesos--cols-3 .portal-accesos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-accesos--cols-4 .portal-accesos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 800px) {
    .portal-accesos--cols-3 .portal-accesos-grid,
    .portal-accesos--cols-4 .portal-accesos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .portal-accesos-grid,
    .portal-accesos--cols-2 .portal-accesos-grid,
    .portal-accesos--cols-3 .portal-accesos-grid,
    .portal-accesos--cols-4 .portal-accesos-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Item base (lo redefine cada variante) ─────────────────────── */

.portal-acceso {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: var(--c-text-strong);
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease, background-color .15s ease;
    position: relative;
}
.portal-acceso:hover {
    text-decoration: none;
}
.portal-acceso-icono {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    /* Fondo: usa el color_acento del bloque cuando hay (vía
       .portal-acento--<slug>); fallback al lighter institucional. */
    background: var(--portal-c-acento, var(--c-primary-lighter));
    /* Color del glifo: usa el color_texto del acceso si está seteado.
       Cae al primary cuando el operador no eligió ninguno. */
    color: var(--portal-acceso-color-texto, var(--c-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex: 0 0 auto;
}
.portal-acceso-titulo {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
}
.portal-acceso-externo {
    position: absolute;
    top: .5rem;
    right: .5rem;
    color: var(--c-muted);
    font-size: .8rem;
}

/* ── Variante: círculos centrados sobre fondo del portal ───────── */
/* "Card invisible": sin fondo, sin borde, sin sombra. El círculo del
   ícono es la única superficie con peso visual; el título queda en
   color institucional debajo. */
.portal-accesos--circulos-centrados .portal-acceso {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    background: transparent;
    border: 0;
    padding: 1rem .5rem;
    color: var(--c-primary);
}
.portal-accesos--circulos-centrados .portal-acceso-icono {
    width: 78px;
    height: 78px;
    font-size: 2.1rem;
    /* Tono más fuerte para que el círculo respire sin la card.
       Respeta el color_acento del bloque si está seteado. */
    background: var(--portal-c-acento, var(--c-primary-lighter));
    color: var(--portal-acceso-color-texto, var(--c-primary));
    box-shadow: 0 .25rem .85rem rgba(0,0,0,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.portal-accesos--circulos-centrados .portal-acceso:hover .portal-acceso-icono {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 .55rem 1.1rem rgba(0,0,0,.1);
}
.portal-accesos--circulos-centrados .portal-acceso-titulo {
    color: var(--portal-acceso-color-texto, var(--c-primary));
    font-weight: 600;
}
.portal-accesos--circulos-centrados .portal-acceso--sin-icono {
    /* Sin ícono: el título crece y vive solo, manteniendo el aire de
       la "card invisible". */
    padding: 1.5rem .75rem;
}
.portal-accesos--circulos-centrados .portal-acceso--sin-icono .portal-acceso-titulo {
    font-size: 1.1rem;
    font-weight: 700;
}

/* ── Variante: píldora con ícono a la izquierda ────────────────── */
.portal-accesos--pildora-icono-izq .portal-acceso {
    flex-direction: row;
    align-items: center;
    gap: .85rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: .55rem 1.25rem .55rem .55rem;
    color: var(--c-text-strong);
}
.portal-accesos--pildora-icono-izq .portal-acceso:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    box-shadow: 0 .35rem 1rem rgba(0,0,0,.06);
    transform: translateY(-2px);
}
.portal-accesos--pildora-icono-izq .portal-acceso-icono {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
}
.portal-accesos--pildora-icono-izq .portal-acceso-titulo {
    flex: 1 1 auto;
    text-align: left;
}
.portal-accesos--pildora-icono-izq .portal-acceso--sin-icono {
    /* Sin ícono: la píldora se vuelve un "chip" centrado con el título
       ocupando todo el ancho. */
    justify-content: center;
    padding: .85rem 1.25rem;
}
.portal-accesos--pildora-icono-izq .portal-acceso--sin-icono .portal-acceso-titulo {
    text-align: center;
    flex: 0 1 auto;
}

/* ── Orientación de las imágenes ────────────────────────────────
   Variable `--acc-img-aspect` consumida por las variantes con imagen
   (`con-imagen` y `solo-imagenes`). Se setea según el modificador
   `--img-<orientacion>`. La elección es a nivel bloque para mantener
   la grilla pareja: todas las imágenes se recortan al mismo ratio. */
.portal-accesos--img-horizontal { --acc-img-aspect: 16 / 10; }
.portal-accesos--img-cuadrada   { --acc-img-aspect: 1 / 1; }
.portal-accesos--img-vertical   { --acc-img-aspect: 3 / 4; }

/* ── Variante: cards con imagen ───────────────────────────────── */
.portal-accesos--con-imagen .portal-acceso {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    color: var(--c-text-strong);
}
.portal-accesos--con-imagen .portal-acceso:hover {
    border-color: var(--c-primary);
    transform: translateY(-2px);
    box-shadow: 0 .55rem 1.2rem rgba(0,0,0,.08);
    color: var(--c-primary);
}
.portal-accesos--con-imagen .portal-acceso-img-wrap {
    display: block;
    width: 100%;
    aspect-ratio: var(--acc-img-aspect, 16 / 10);
    overflow: hidden;
    background: var(--c-bg-subtle);
}
.portal-accesos--con-imagen .portal-acceso-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.portal-accesos--con-imagen .portal-acceso:hover .portal-acceso-img {
    transform: scale(1.04);
}
.portal-accesos--con-imagen .portal-acceso-icono {
    /* Fallback cuando no hay imagen: el ícono ocupa la "ranura" de la
       imagen como cabecera de la card, con el mismo aspect-ratio
       elegido para que la grilla quede uniforme. */
    width: 100%;
    height: auto;
    aspect-ratio: var(--acc-img-aspect, 16 / 10);
    border-radius: 0;
    font-size: 2.6rem;
}
.portal-accesos--con-imagen .portal-acceso-titulo {
    padding: .85rem 1rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}
.portal-accesos--con-imagen .portal-acceso--sin-icono {
    /* Sin imagen ni ícono: la card se reduce a su título centrado y
       grande, con paddings amplios. */
    align-items: center;
    justify-content: center;
    min-height: 110px;
}
.portal-accesos--con-imagen .portal-acceso--sin-icono .portal-acceso-titulo {
    text-align: center;
    font-size: 1.15rem;
    padding: 1.5rem 1rem;
}

/* ── Variante: sólo imágenes ───────────────────────────────────── */
/* En esta variante el ratio default es cuadrado (mejor para mosaicos
   de logos/escudos). Si el operador elige otra orientación, el
   `--acc-img-aspect` la pisa. */
.portal-accesos--solo-imagenes { --acc-img-aspect: 1 / 1; }
.portal-accesos--solo-imagenes.portal-accesos--img-horizontal { --acc-img-aspect: 16 / 10; }
.portal-accesos--solo-imagenes.portal-accesos--img-vertical   { --acc-img-aspect: 3 / 4; }
.portal-accesos--solo-imagenes .portal-accesos-grid {
    gap: .65rem;
}
.portal-accesos--solo-imagenes .portal-acceso--solo-imagen {
    display: block;
    width: 100%;
    aspect-ratio: var(--acc-img-aspect, 1 / 1);
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--c-border);
    background: var(--c-bg-subtle);
    padding: 0;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.portal-accesos--solo-imagenes .portal-acceso--solo-imagen:hover {
    transform: translateY(-2px);
    border-color: var(--c-primary);
    box-shadow: 0 .55rem 1.2rem rgba(0,0,0,.08);
}
.portal-accesos--solo-imagenes .portal-acceso-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.portal-accesos--solo-imagenes .portal-acceso--solo-imagen:hover .portal-acceso-img {
    transform: scale(1.05);
}

/* ── Ícono superpuesto sobre la imagen ────────────────────────────
   Caso: variante `con-imagen` + acceso con ícono cargado y título
   vacío. El ícono se centra sobre la imagen, pintado con el
   color_texto del acceso. La clase `--icono-overlay` se agrega en el
   template solo bajo esa combinación. La especificidad
   (`.portal-accesos--con-imagen .portal-acceso-icono--overlay`) está
   pensada para ganarle a la regla genérica
   `.portal-accesos--con-imagen .portal-acceso-icono` (mismo peso,
   pero esta viene después en el archivo). */
.portal-accesos--con-imagen .portal-acceso--icono-overlay .portal-acceso-img-wrap {
    position: relative;
}
.portal-accesos--con-imagen .portal-acceso-icono--overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;       /* anula el 16/10 heredado de la regla base */
    background: transparent;
    border-radius: 0;
    color: var(--portal-acceso-color-texto, var(--c-bg));
    font-size: clamp(2.4rem, 6vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sombra suave para que el ícono mantenga legibilidad sobre
       imágenes claras o ruidosas. */
    text-shadow: 0 .15rem .6rem rgba(0, 0, 0, .35);
    pointer-events: none;
}

/* ── Variante: cards de solo texto ────────────────────────────────
   Replica el patrón "Secretarías" de Hacienda: cards rectangulares
   con el color de acento como fondo y un único título centrado.
   El color del texto sale del color_texto per-item (custom-property
   inline en el <a>). */
.portal-accesos--cards-texto .portal-accesos-grid {
    gap: .85rem;
}
.portal-accesos--cards-texto .portal-acceso--solo-texto {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Fondo: usa el color_acento del bloque. Si no hay, primary. */
    background: var(--portal-c-acento, var(--c-primary));
    border-radius: 8px;
    padding: 1.25rem 1rem;
    min-height: 64px;
    /* Color del título: si el operador eligió color_texto, lo respeta;
       si no, blanco (asume fondo oscuro). */
    color: var(--portal-acceso-color-texto, var(--c-bg));
    font-weight: 700;
    font-size: 1rem;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.portal-accesos--cards-texto .portal-acceso--solo-texto:hover {
    transform: translateY(-2px);
    box-shadow: 0 .55rem 1.2rem rgba(0, 0, 0, .12);
    filter: brightness(1.05);
    color: var(--portal-acceso-color-texto, var(--c-bg));
}
.portal-accesos--cards-texto .portal-acceso-titulo {
    line-height: 1.25;
}


/* ═══════════════════════════════════════════════════════════════════
   Listado de documentos
   ═══════════════════════════════════════════════════════════════════ */

.portal-documentos-titulo {
    color: var(--c-primary);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
.portal-documentos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.portal-documento {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 8px;
    padding: .65rem .85rem;
    transition: border-color .15s ease, background .15s ease;
}
.portal-documento:hover {
    border-color: var(--c-primary);
    background: var(--c-primary-lighter);
}
.portal-documento-icono {
    color: var(--c-primary);
    font-size: 1.5rem;
    flex-shrink: 0;
}
.portal-documento-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.portal-documento-titulo {
    color: var(--c-text-strong);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-documento-titulo:hover { color: var(--c-primary); text-decoration: none; }
.portal-documento-meta {
    color: var(--c-muted);
    font-size: .78rem;
}
.portal-documento-descarga {
    color: var(--c-text-disabled);
    font-size: 1rem;
    flex-shrink: 0;
}
.portal-documento:hover .portal-documento-descarga {
    color: var(--c-primary);
}


/* ═══════════════════════════════════════════════════════════════════
   Texto libre (TipTap)
   ═══════════════════════════════════════════════════════════════════ */

.portal-texto { margin-block: 1rem; }
.portal-texto--center { text-align: center; }
.portal-texto--right  { text-align: right; }

.portal-texto-titulo {
    color: var(--c-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .75rem;
}
.portal-texto-cuerpo {
    color: var(--c-text);
    line-height: 1.7;
}
.portal-texto-cuerpo h2,
.portal-texto-cuerpo h3 {
    color: var(--c-primary);
    margin-top: 1.5rem;
}
.portal-texto-cuerpo a { color: var(--c-primary); text-decoration: underline; }
.portal-texto-cuerpo img { max-width: 100%; height: auto; border-radius: 6px; }

/* ── Variantes de fondo del bloque de texto libre ──────────────────
   Cuando el bloque tiene un fondo distinto a "transparente", agregamos
   padding y borde redondeado para que la caja respire, y forzamos un
   color de texto con contraste suficiente. Los modificadores se
   listan abajo en orden: sólidos primero, luego gradientes. */

.portal-texto[class*="portal-texto--fondo-"]:not(.portal-texto--fondo-transparente) {
    padding: 1.75rem 1.85rem;
    border-radius: 12px;
    margin-block: 1.5rem;
}

/* Sin fondo: comportamiento default, ningún cambio. */

/* Sólidos oscuros: texto blanco. Reglas con `:where()` para no pelear
   con la especificidad del color base de los hijos. */
.portal-texto--fondo-primary,
.portal-texto--fondo-accent,
.portal-texto--fondo-grad-primary,
.portal-texto--fondo-grad-accent,
.portal-texto--fondo-grad-mixto {
    color: var(--c-bg);
}
.portal-texto--fondo-primary :where(.portal-texto-titulo, .portal-texto-cuerpo, .portal-texto-cuerpo h2, .portal-texto-cuerpo h3),
.portal-texto--fondo-accent :where(.portal-texto-titulo, .portal-texto-cuerpo, .portal-texto-cuerpo h2, .portal-texto-cuerpo h3),
.portal-texto--fondo-grad-primary :where(.portal-texto-titulo, .portal-texto-cuerpo, .portal-texto-cuerpo h2, .portal-texto-cuerpo h3),
.portal-texto--fondo-grad-accent :where(.portal-texto-titulo, .portal-texto-cuerpo, .portal-texto-cuerpo h2, .portal-texto-cuerpo h3),
.portal-texto--fondo-grad-mixto :where(.portal-texto-titulo, .portal-texto-cuerpo, .portal-texto-cuerpo h2, .portal-texto-cuerpo h3) {
    color: var(--c-bg);
}
.portal-texto--fondo-primary :where(.portal-texto-cuerpo a),
.portal-texto--fondo-accent :where(.portal-texto-cuerpo a),
.portal-texto--fondo-grad-primary :where(.portal-texto-cuerpo a),
.portal-texto--fondo-grad-accent :where(.portal-texto-cuerpo a),
.portal-texto--fondo-grad-mixto :where(.portal-texto-cuerpo a) {
    color: var(--c-bg);
    text-decoration-color: color-mix(in srgb, var(--c-bg) 60%, transparent);
}

/* Suaves: fondo claro, texto oscuro institucional. */
.portal-texto--fondo-primary-suave,
.portal-texto--fondo-accent-suave {
    color: var(--c-text);
}

/* Backgrounds concretos. Mantenemos los gradientes en este bloque
   para tener todas las superficies de color en un solo lugar. */
.portal-texto--fondo-primary       { background: var(--c-primary); }
.portal-texto--fondo-primary-suave { background: var(--c-primary-lighter); }
.portal-texto--fondo-accent        { background: var(--c-accent); }
.portal-texto--fondo-accent-suave  {
    /* No hay var dedicada para el accent suave; lo derivamos de la
       misma proporción que --c-primary-lighter (25% accent + 75% blanco). */
    background: color-mix(in srgb, var(--c-accent) 25%, #fff);
}
.portal-texto--fondo-grad-primary {
    background: linear-gradient(135deg,
        var(--c-primary-light) 0%,
        var(--c-primary) 55%,
        var(--c-primary-dark) 100%);
}
.portal-texto--fondo-grad-accent {
    background: linear-gradient(135deg,
        var(--c-accent2, var(--c-accent)) 0%,
        var(--c-accent) 55%,
        var(--c-accent-dark) 100%);
}
.portal-texto--fondo-grad-mixto {
    background: linear-gradient(135deg,
        var(--c-primary) 0%,
        var(--c-primary-dark) 45%,
        var(--c-accent) 100%);
}


/* ═══════════════════════════════════════════════════════════════════
   Video embebido
   ═══════════════════════════════════════════════════════════════════ */

.portal-video { margin-block: 1rem; }
.portal-video-titulo {
    color: var(--c-primary);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .75rem;
}
.portal-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.portal-video-frame iframe,
.portal-video-frame .portal-video-html5 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}
/* El <video> HTML5 además respeta su aspect-ratio sin recortar. Si el
   video subido no es 16:9, el frame agrega letterbox negro alrededor
   (que combina con el fondo del wrap). */
.portal-video-frame .portal-video-html5 {
    object-fit: contain;
}


/* ═══════════════════════════════════════════════════════════════════
   Formulario de carga (mod_formularios)
   ═══════════════════════════════════════════════════════════════════ */

.portal-formulario {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
}
.portal-formulario-titulo {
    color: var(--c-primary);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}
.portal-formulario-descripcion {
    color: var(--c-text-soft);
    margin: 0 0 1rem;
}
.portal-formulario-pendiente {
    background: var(--c-warning-bg);
    border: 1px dashed var(--c-warning);
    color: var(--c-warning-text);
    padding: .85rem 1rem;
    border-radius: 6px;
    font-size: .9rem;
    margin: 0;
}

/* Banner de errores (volver al form con problemas de validación) */
.portal-formulario-errores,
.portal-contacto-errores {
    background: var(--c-danger-light);
    border-left: 4px solid var(--c-danger);
    color: var(--c-danger-text);
    padding: .85rem 1rem;
    border-radius: 6px;
    margin: 0 0 1rem;
    font-size: .92rem;
}
.portal-formulario-errores ul,
.portal-contacto-errores ul {
    margin: .35rem 0 0 1.25rem;
    padding: 0;
}
.portal-formulario-errores li,
.portal-contacto-errores li { margin-bottom: .15rem; }

/* Página de "gracias" del formulario de contacto, tras envío exitoso. */
.portal-contacto-gracias {
    padding: 4rem 0;
}
.portal-contacto-gracias-box {
    max-width: 520px;
    margin: 0 auto;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .05);
}
.portal-contacto-gracias-icono {
    font-size: 3.5rem;
    color: var(--c-success, var(--c-primary));
    display: block;
    margin-bottom: .75rem;
}
.portal-contacto-gracias-titulo {
    color: var(--c-primary);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
.portal-contacto-gracias-mensaje {
    color: var(--c-text);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.75rem;
}
.portal-contacto-gracias-link {
    display: inline-flex;
    align-items: center;
    color: var(--c-primary);
    font-weight: 600;
    text-decoration: none;
}
.portal-contacto-gracias-link:hover {
    color: var(--c-primary-dark);
    text-decoration: underline;
}

/* Form propiamente dicho */
.portal-formulario-form {
    display: grid;
    gap: 1rem;
    margin-top: .5rem;
}
.portal-formulario-campo {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.portal-formulario-label {
    font-weight: 600;
    color: var(--c-text);
    font-size: .92rem;
}
.portal-formulario-req {
    color: var(--c-danger);
    margin-left: .15rem;
}
.portal-formulario-control {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-bg-card);
    color: var(--c-text);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.portal-formulario-control:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .15);
}
.portal-formulario-file {
    padding: .4rem .55rem;
    background: var(--c-bg-subtle);
    cursor: pointer;
}
.portal-formulario-ayuda {
    color: var(--c-muted);
    font-size: .8rem;
}
.portal-formulario-submit {
    /* Fondo configurable: el bloque del page builder elige modo "solido"
       o "gradiente" y le pasa los colores como custom-properties inline
       (--boton-color o --boton-grad-inicio / --boton-grad-fin). Si no
       hay clase modificadora, cae al gradiente institucional default. */
    background: var(--c-gradient);
    color: var(--c-bg-card) !important;
    border: 0;
    border-radius: 6px;
    padding: .65rem 1.6rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    transition: filter .15s ease, transform .05s ease;
}
.portal-formulario-submit--solido {
    background: var(--boton-color, var(--c-primary));
}
.portal-formulario-submit--gradiente {
    background: linear-gradient(135deg,
        var(--boton-grad-inicio, var(--c-primary)) 0%,
        var(--boton-grad-fin, var(--c-accent)) 100%);
}
.portal-formulario-submit:hover { filter: brightness(1.1); }
.portal-formulario-submit:active { transform: translateY(1px); }


/* Página de gracias post-envío */
.portal-formulario-gracias-shell {
    padding: 4rem 1rem;
}
.portal-formulario-gracias {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 2.5rem 2rem;
}
.portal-formulario-gracias-icono {
    color: var(--c-success);
    font-size: 3rem;
    margin-bottom: .75rem;
    line-height: 1;
}
.portal-formulario-gracias-titulo {
    color: var(--c-primary);
    margin: 0 0 .5rem;
    font-size: 1.7rem;
    font-weight: 700;
}
.portal-formulario-gracias-mensaje {
    color: var(--c-text-soft);
    margin: 0 0 1.5rem;
    line-height: 1.55;
}
.portal-formulario-gracias-cta {
    display: inline-block;
    background: var(--c-gradient);
    color: var(--c-bg-card) !important;
    padding: .65rem 1.4rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: filter .15s ease;
}
.portal-formulario-gracias-cta:hover {
    filter: brightness(1.1);
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════
   Formulario de contacto (mod_bandeja_contacto)
   ═══════════════════════════════════════════════════════════════════ */

.portal-contacto {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
}
.portal-contacto-titulo {
    color: var(--c-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
.portal-contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.portal-contacto-campo--full { grid-column: 1 / -1; }
.portal-contacto-campo {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.portal-contacto-campo label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-text-strong);
}
.portal-contacto-campo input,
.portal-contacto-campo textarea {
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: .55rem .75rem;
    font: inherit;
    color: var(--c-text);
    background: var(--c-bg-card);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.portal-contacto-campo input:focus,
.portal-contacto-campo textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.portal-contacto-btn {
    margin-top: 1rem;
    background: var(--c-primary);
    color: var(--c-bg-card);
    border: 0;
    padding: .75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.portal-contacto-btn:hover { background: var(--c-primary-dark); }
@media (max-width: 600px) {
    .portal-contacto-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   Fallback genérico (bloques sin template propio)
   ═══════════════════════════════════════════════════════════════════ */

.portal-bloque-pendiente {
    background: var(--c-bg-subtle);
    border: 1px dashed var(--c-border);
    color: var(--c-muted);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: .9rem;
    margin-block: .75rem;
    display: flex;
    align-items: center;
    gap: .65rem;
}
.portal-bloque-pendiente i {
    color: var(--c-warning);
    font-size: 1.2rem;
}
.portal-bloque-pendiente strong { color: var(--c-text-strong); }


/* ═══════════════════════════════════════════════════════════════════
   Página pública /noticias/ — listado y detalle
   ═══════════════════════════════════════════════════════════════════
   Estilos del portal de noticias del tenant. La página es una vista
   hardcoded (no se compone con el page builder), por eso vive como
   sección propia con sus reglas. El listado es una grilla de hasta 4
   columnas con cards de imagen + título + bajada; el detalle muestra
   la imagen destacada en grande, título + bajada, cuerpo CKE5 y un
   link de "volver al listado".
   ═══════════════════════════════════════════════════════════════════ */

/* ── Listado ─────────────────────────────────────────────────────── */
.portal-noticias-pagina {
    padding: 2.5rem 0 4rem;
}
.portal-noticias-pagina-header {
    margin-bottom: 2rem;
}
.portal-noticias-pagina-titulo {
    color: var(--c-primary);
    font-size: clamp(1.85rem, 3vw, 2.4rem);
    font-weight: 700;
    margin: 0 0 .35rem;
    letter-spacing: -.5px;
}
.portal-noticias-pagina-subtitulo {
    color: var(--c-muted);
    font-size: 1rem;
    margin: 0 0 1.5rem;
}

/* Buscador — centrado en el header, píldora con input + botón submit
   con sólo la lupa al final (antes había una lupa decorativa a la
   izquierda + un botón "Buscar" con texto, eran dos "Buscar" en la
   misma píldora). */
.portal-noticias-buscador {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: .25rem .35rem .25rem 1.25rem;
    max-width: 560px;
    margin-inline: auto;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.portal-noticias-buscador:focus-within {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 15%, transparent);
}
.portal-noticias-buscador-input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    outline: none;
    font-size: .95rem;
    padding: .6rem 0;
    color: var(--c-text-strong);
    min-width: 0;
}
.portal-noticias-buscador-clear {
    color: var(--c-muted);
    text-decoration: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background .15s ease, color .15s ease;
}
.portal-noticias-buscador-clear:hover {
    background: var(--c-bg-subtle);
    color: var(--c-text-strong);
}
.portal-noticias-buscador-btn {
    border: 0;
    background: var(--c-primary);
    color: var(--c-bg);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background .15s ease, transform .15s ease;
}
.portal-noticias-buscador-btn:hover {
    background: var(--c-primary-dark);
    transform: scale(1.05);
}
.portal-noticias-buscador-btn i {
    font-size: 1.05rem;
    line-height: 1;
}

/* El bloque del título también lo centramos visualmente para que el
   buscador centrado no quede descolgado contra el título alineado a
   la izquierda. */
.portal-noticias-pagina-header {
    text-align: center;
}
.portal-noticias-pagina-resultado {
    text-align: center;
}

.portal-noticias-pagina-resultado {
    margin: 1rem 0 0;
    color: var(--c-muted);
    font-size: .9rem;
}
.portal-noticias-pagina-resultado strong { color: var(--c-text-strong); }

/* Grid de cards (hasta 4 columnas, responsive) */
.portal-noticias-pagina-grid {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .portal-noticias-pagina-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
    .portal-noticias-pagina-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .portal-noticias-pagina-grid { grid-template-columns: 1fr; }
}

/* Card de noticia: bordes redondeados + box-shadow, hover con elevación */
.portal-noticia-card {
    background: var(--c-bg-card);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .07),
                0 .15rem .35rem rgba(0, 0, 0, .04);
    transition: transform .2s ease, box-shadow .2s ease;
    border: 1px solid color-mix(in srgb, var(--c-border) 55%, transparent);
}
.portal-noticia-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .85rem 2.1rem rgba(0, 0, 0, .1),
                0 .25rem .55rem rgba(0, 0, 0, .06);
}
.portal-noticia-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.portal-noticia-card-link:hover { text-decoration: none; }
/* Thumb del card: la imagen ocupa todo el contenedor (cover).
   Preferimos zoom suave sobre el letterbox blanco — si el aspect-ratio
   de la imagen difiere mucho del 16/10 del thumb se recorta, pero
   nunca quedan bordes vacíos al costado. En el detalle, la imagen
   recupera su tamaño natural. */
.portal-noticia-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: var(--c-bg-subtle);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.portal-noticia-card-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--c-primary) 35%, transparent);
    font-size: 2.5rem;
    background: color-mix(in srgb, var(--c-primary) 6%, var(--c-bg-subtle));
}
.portal-noticia-card-body {
    padding: 1rem 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1 1 auto;
}
.portal-noticia-card-fecha {
    color: var(--c-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.portal-noticia-card-titulo {
    color: var(--c-primary);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}
.portal-noticia-card-bajada {
    color: var(--c-text);
    font-size: .9rem;
    line-height: 1.45;
    margin: 0;
}

/* ── Noticia destacada (página 1 sin búsqueda) ──────────────────
   Pieza grande con imagen-banner a la izquierda y un body con chip
   de categoría + título + bajada + fecha a la derecha. En mobile
   colapsa a una sola columna (imagen arriba, texto abajo). */
.portal-noticia-destacada {
    margin: 0 0 2rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    box-shadow: 0 .25rem .85rem rgba(0, 0, 0, .05);
    transition: transform .18s ease, box-shadow .18s ease;
}
.portal-noticia-destacada:hover {
    transform: translateY(-2px);
    box-shadow: 0 .55rem 1.25rem rgba(0, 0, 0, .08);
}
.portal-noticia-destacada-link {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 0;
    color: inherit;
    text-decoration: none;
}
@media (max-width: 768px) {
    .portal-noticia-destacada-link { grid-template-columns: 1fr; }
}
.portal-noticia-destacada-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-bg-subtle);
}
.portal-noticia-destacada-img-wrap--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary-lighter);
    font-size: 3rem;
}
.portal-noticia-destacada-img {
    width: 100%;
    height: 100%;
    /* Cover: la imagen llena el slot 16/9 sin dejar bordes blancos.
       Si el aspect-ratio difiere, se recorta — el operador puede
       elegir una "imagen de portada" diseñada para este encuadre. */
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.portal-noticia-destacada:hover .portal-noticia-destacada-img {
    transform: scale(1.03);
}
.portal-noticia-destacada-body {
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .65rem;
}
.portal-noticia-destacada-titulo {
    color: var(--c-text-strong);
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}
.portal-noticia-destacada-bajada {
    color: var(--c-text);
    font-size: 1rem;
    line-height: 1.45;
    margin: 0;
}
.portal-noticia-destacada-fecha {
    color: var(--c-muted);
    font-size: .8rem;
    font-weight: 500;
    margin-top: .25rem;
}

/* ── Chip de categoría ──────────────────────────────────────────
   Pieza institucional pequeña, uppercase, fondo primary. Se usa en
   las cards de la grilla y en la destacada. */
.portal-noticia-chip {
    display: inline-block;
    align-self: flex-start;
    padding: .25rem .55rem;
    background: var(--c-primary);
    color: var(--c-bg);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 3px;
    line-height: 1.3;
    text-transform: uppercase;
}
.portal-noticia-chip--destacada {
    font-size: .75rem;
    padding: .3rem .7rem;
}

/* Chip dentro del card body: alinear al inicio sin romper el grid. */
.portal-noticia-card-body .portal-noticia-chip {
    margin-bottom: .35rem;
}

/* ── Paginación ─────────────────────────────────────────────────
   Tres piezas: prev, info (página X de N), next. En mobile se apila. */
.portal-noticias-pag {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.portal-noticias-pag-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-strong);
    background: var(--c-bg-card);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.portal-noticias-pag-btn:hover {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-bg);
}
.portal-noticias-pag-btn.is-disabled {
    color: var(--c-muted);
    background: var(--c-bg-subtle);
    pointer-events: none;
    border-style: dashed;
}
.portal-noticias-pag-info {
    color: var(--c-text);
    font-size: .9rem;
}

/* Estado vacío del listado */
.portal-noticias-pagina-vacia {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--c-muted);
}
.portal-noticias-pagina-vacia i {
    font-size: 3rem;
    color: color-mix(in srgb, var(--c-muted) 60%, transparent);
    display: block;
    margin-bottom: .75rem;
}
.portal-noticias-pagina-vacia p {
    margin: 0 0 1rem;
    font-size: 1rem;
}
.portal-noticias-pagina-vacia-link {
    color: var(--c-primary);
    text-decoration: underline;
    font-weight: 600;
}

/* ── Detalle ─────────────────────────────────────────────────────── */
.portal-noticia-detalle {
    padding-bottom: 4rem;
}
/* Hero antiguo eliminado: el detalle no usa hero ahora. La imagen
   destacada se renderiza dentro del contenedor a tamaño normativo
   vía la galería (carrusel). El layout es: chips → título → bajada
   → fecha → galería → cuerpo. */
.portal-noticia-detalle-contenedor {
    max-width: 820px;
    padding-top: 2.25rem;
    /* Espacio a la izquierda para las share bubbles flotantes en
       desktop. En mobile las bubbles se reposicionan al pie del
       header (no necesitan margen). */
    position: relative;
}
.portal-noticia-detalle-volver {
    display: inline-flex;
    align-items: center;
    color: var(--c-primary);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: color .15s ease;
}
.portal-noticia-detalle-volver:hover {
    color: var(--c-primary-dark);
    text-decoration: underline;
}
.portal-noticia-detalle-fecha {
    display: inline-flex;
    align-items: center;
    color: var(--c-muted);
    font-size: .85rem;
    margin: 0 0 .75rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.portal-noticia-detalle-titulo {
    color: var(--c-primary);
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.5px;
    margin: 0 0 1rem;
}
.portal-noticia-detalle-bajada {
    color: var(--c-text-strong);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.55;
    margin: 0 0 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--c-border);
}
.portal-noticia-detalle-cuerpo {
    color: var(--c-text);
    font-size: 1.02rem;
    line-height: 1.75;
}
.portal-noticia-detalle-cuerpo p { margin: 0 0 1.1rem; }
.portal-noticia-detalle-cuerpo h2,
.portal-noticia-detalle-cuerpo h3 {
    color: var(--c-primary);
    margin: 1.75rem 0 .85rem;
    font-weight: 700;
}
.portal-noticia-detalle-cuerpo h2 { font-size: 1.5rem; }
.portal-noticia-detalle-cuerpo h3 { font-size: 1.2rem; }
.portal-noticia-detalle-cuerpo a {
    color: var(--c-primary);
    text-decoration: underline;
}
.portal-noticia-detalle-cuerpo img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}
.portal-noticia-detalle-cuerpo blockquote {
    border-left: 4px solid var(--c-primary);
    padding: .35rem 1rem;
    color: var(--c-muted);
    margin: 1.25rem 0;
    font-style: italic;
}
.portal-noticia-detalle-cuerpo ul,
.portal-noticia-detalle-cuerpo ol {
    margin: 0 0 1.1rem 1.25rem;
}
.portal-noticia-detalle-pie {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-border);
}

/* ── Header del detalle: chips + título + bajada + fecha ─────────── */
.portal-noticia-detalle-header {
    margin-bottom: 1.75rem;
}
.portal-noticia-detalle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .85rem;
    align-items: center;
}
.portal-noticia-detalle-chip {
    display: inline-block;
    padding: .25rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    border-radius: 3px;
    text-transform: uppercase;
    text-decoration: none;
}
/* La categoría va con fondo primary y texto en --c-bg (contraste claro).
   Selectores extra-específicos (incluyendo `a.`) para ganarle al
   `a { color: var(--c-primary); }` global del portal que estaba
   pintando el texto del mismo color que el fondo. */
a.portal-noticia-detalle-chip--categoria,
.portal-noticia-detalle-chips .portal-noticia-detalle-chip--categoria {
    background: var(--c-primary);
    color: var(--c-bg) !important;
    text-decoration: none;
}
a.portal-noticia-detalle-chip--categoria:hover,
a.portal-noticia-detalle-chip--categoria:focus-visible,
.portal-noticia-detalle-chips .portal-noticia-detalle-chip--categoria:hover {
    background: var(--c-primary-dark);
    color: var(--c-bg);
    text-decoration: none;
}
.portal-noticia-detalle-chip--tema,
a.portal-noticia-detalle-chip--tema {
    background: transparent;
    color: var(--c-primary);
    border: 1px solid color-mix(in srgb, var(--c-primary) 30%, transparent);
    text-decoration: none;
}
a.portal-noticia-detalle-chip--tema:hover,
a.portal-noticia-detalle-chip--tema:focus-visible {
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    color: var(--c-primary);
    text-decoration: none;
}
/* Separadores tipo "|" entre chips emulando el estilo Jujuy. La línea
   se dibuja como un pseudo-elemento, no como un caracter — así el
   espacio horizontal se mantiene parejo si el operador agrega temas. */
.portal-noticia-detalle-chips > .portal-noticia-detalle-chip + .portal-noticia-detalle-chip {
    position: relative;
    margin-left: .5rem;
}
.portal-noticia-detalle-chips > .portal-noticia-detalle-chip + .portal-noticia-detalle-chip::before {
    content: "|";
    position: absolute;
    left: -.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-border);
    font-weight: 400;
}

/* La fecha pasa al pie del header (debajo de la bajada) en lugar de
   arriba — replicando el orden del diseño Jujuy. */
.portal-noticia-detalle-header .portal-noticia-detalle-fecha {
    display: block;
    margin: 1rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--c-border);
}

/* ── Share bubbles flotantes ──────────────────────────────────────
   Columna vertical fija a la izquierda del contenedor en desktop;
   se reposiciona como una barra horizontal arriba del cuerpo en
   mobile (cuando no hay espacio lateral). */
.portal-noticia-detalle-compartir {
    position: absolute;
    top: 8.5rem;   /* alinea con la altura del título grande */
    left: -3.75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 2;
}
.portal-noticia-compartir-btn {
    /* Tamaño fijo. `flex: 0 0 auto` + dimensiones explícitas evitan
       que el contenedor padre (aside flex) lo estire. */
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-bg) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 .15rem .35rem rgba(0, 0, 0, .08);
    transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}
.portal-noticia-compartir-btn:hover,
.portal-noticia-compartir-btn:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.1);
    color: var(--c-bg);
    text-decoration: none;
    outline: none;
}
/* Asegurar que el ícono ocupe su tamaño esperado, no se expanda. */
.portal-noticia-compartir-btn > i {
    line-height: 1;
}
/* Si querés brand colors por red social en vez del primary uniforme,
   estos modificadores los aplican. Por default todas usan primary
   para mantener la armonía institucional. */
.portal-noticia-compartir-btn--wa:hover { background: #25D366; }
.portal-noticia-compartir-btn--mail:hover { background: var(--c-accent); }

@media (max-width: 1100px) {
    /* Ya no entra a la izquierda del contenedor: pasa arriba en
       horizontal, debajo del título/bajada. */
    .portal-noticia-detalle-compartir {
        position: static;
        flex-direction: row;
        margin: 0 0 1.5rem;
    }
}

/* ── Galería del detalle (carrusel) ────────────────────────────── */
.portal-noticia-detalle-galeria {
    position: relative;
    margin: 0 0 1.75rem;
    background: var(--c-bg-subtle);
    border-radius: 10px;
    overflow: hidden;
}
.portal-noticia-detalle-galeria-track {
    position: relative;
    min-height: 200px;
}
.portal-noticia-detalle-galeria-slide {
    display: none;
}
.portal-noticia-detalle-galeria-slide.is-activa {
    display: block;
}
.portal-noticia-detalle-galeria-img {
    /* Imagen en su tamaño "normativo": ocupa el ancho del contenedor
       y mantiene su aspect-ratio natural. No se recorta. */
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    background: var(--c-bg-subtle);
}
.portal-noticia-detalle-galeria-epigrafe {
    padding: .65rem 1rem .85rem;
    /* `--c-text-disabled` para diferenciar el epígrafe del cuerpo de
       la nota (más tenue, italic) sin desaparecerlo. */
    background-color: var(--c-border) !important;
    color: var(--c-text-disabled) !important;
    font-size: .8rem;
    font-style: italic;
    text-align: center;
    margin: 0;
}

.portal-noticia-detalle-galeria-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, .55);
    color: var(--c-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background .15s ease;
}
.portal-noticia-detalle-galeria-nav:hover {
    background: rgba(0, 0, 0, .8);
}
.portal-noticia-detalle-galeria-nav--prev { left: .65rem; }
.portal-noticia-detalle-galeria-nav--next { right: .65rem; }

.portal-noticia-detalle-galeria-dots {
    position: absolute;
    bottom: 3.5rem;   /* arriba del epígrafe, no encima */
    left: 0;
    right: 0;
    display: flex;
    gap: .35rem;
    justify-content: center;
}
.portal-noticia-detalle-galeria-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, transform .15s ease;
}
.portal-noticia-detalle-galeria-dot.is-activa {
    background: var(--c-bg);
    transform: scale(1.25);
}

/* ── Tags al pie ─────────────────────────────────────────────────── */
.portal-noticia-detalle-pie-tags {
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--c-border);
    color: var(--c-muted);
    font-size: .9rem;
}
.portal-noticia-detalle-pie-tag,
a.portal-noticia-detalle-pie-tag {
    display: inline-block;
    padding: .2rem .5rem;
    margin: 0 .25rem;
    background: var(--c-bg-subtle);
    color: var(--c-text);
    border-radius: 3px;
    font-size: .8rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
a.portal-noticia-detalle-pie-tag:hover {
    background: var(--c-primary);
    color: var(--c-bg);
    text-decoration: none;
}

/* ── Las más leídas (widget al pie del detalle) ──────────────────
   Lista numerada vertical estilo "ranking", basada en el contador de
   visitas anónimas. Cada item: un círculo con el número (CSS counter)
   + chip de categoría + título. Sólo aparece si hay al menos una
   noticia con vistas > 0 (la view ya filtra). */
.portal-noticia-detalle-mas-leidas {
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-border);
}
.portal-noticia-detalle-mas-leidas-titulo {
    color: var(--c-primary);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.portal-noticia-detalle-mas-leidas-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: maslidas;
}
.portal-noticia-detalle-mas-leidas-item {
    counter-increment: maslidas;
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .85rem 0;
    border-bottom: 1px solid var(--c-border);
}
.portal-noticia-detalle-mas-leidas-item:last-child {
    border-bottom: 0;
}
.portal-noticia-detalle-mas-leidas-num {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1;
}
.portal-noticia-detalle-mas-leidas-num::before {
    content: counter(maslidas);
}
.portal-noticia-detalle-mas-leidas-link {
    flex: 1 1 auto;
    text-decoration: none;
    color: var(--c-text-strong);
    display: flex;
    flex-direction: column;
    gap: .2rem;
    line-height: 1.35;
}
.portal-noticia-detalle-mas-leidas-link:hover .portal-noticia-detalle-mas-leidas-tit {
    color: var(--c-primary);
}
.portal-noticia-detalle-mas-leidas-cat {
    color: var(--c-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.portal-noticia-detalle-mas-leidas-tit {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text-strong);
    transition: color .15s ease;
}

/* ── Notas relacionadas ──────────────────────────────────────────
   Sección a ancho completo (sale del contenedor estrecho del detalle)
   para parecerse al cierre de Jujuy. Reusa el card del listado. */
.portal-noticia-detalle-relacionadas {
    margin-top: 3.5rem;
    padding: 2.5rem 0 0.5rem;
    background: var(--c-bg-subtle);
    border-top: 1px solid var(--c-border);
}
.portal-noticia-detalle-relacionadas-titulo {
    color: var(--c-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
}
.portal-noticia-detalle-relacionadas-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
    .portal-noticia-detalle-relacionadas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .portal-noticia-detalle-relacionadas-grid {
        grid-template-columns: 1fr;
    }
}