/* ==============================
   SSI – Estilos unificados
   Ubicación: /templates/t4_bs5_blank/css/ssi.css
   Alcance: Noticias (listado), Article (ssiformui), Galería, Adjuntos, Multimedia
   Nota: Evitar globales; usar contenedores .article-noticias / .article-ssiformui / .a-*
============================== */

/* ==========================
   0) CONTENEDORES RAÍZ / UTILIDADES
========================== */
.article-noticias,
.article-ssiformui {
  /* Hook común si necesitás un margen/padding global por sección */
}

.ssi-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================
   1) LISTADO: Noticias (cards)
========================== */
.article-noticias .card {
  transition: transform 0.2s ease;
}
.article-noticias .card:hover {
  transform: translateY(-3px);
}

.article-noticias .card .card-title a {
  color: inherit;
  text-decoration: none;
}
.article-noticias .card .card-title a:hover {
  text-decoration: underline;
}

/* Imágenes en cards */
.article-noticias .ratio {
  background-color: #f8f9fa;
}
.article-noticias .card img {
  object-fit: cover;
}

/* (Opcional) Afinar tono del meta en cards */
.article-noticias .text-muted {
  color: #6c757d !important;
}

/* ==========================
   2) ARTICLE: ssiformui (hero, meta)
========================== */
.article-ssiformui .ssi-hero .ratio {
  background-color: #f8f9fa;
}
.article-ssiformui .ssi-hero img {
  object-fit: cover;
  border-radius: 0.375rem;
}

.article-ssiformui .ssi-hero figcaption {
  font-size: 0.875rem;
  color: #868e96;
  margin-top: 0.25rem;
}

.article-ssiformui .ssi-meta {
  color: #6c757d;
  font-size: 0.925rem;
}
.article-ssiformui .ssi-meta time {
  white-space: nowrap;
}

.article-ssiformui .ssi-block-title {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: #1f6fb2;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}

/* Barra superior mini */
.article-ssiformui .ssi-headbar-mini {
  margin-bottom: 2rem;
}
.article-ssiformui .ssi-block-main .redes {
  padding: 1px;
  border-bottom: 1px solid #bdbdbd;
  border-top: 1px solid #bdbdbd;
  margin-top: 5px;
}

/* Alinear share a la derecha en desktop */
.article-ssiformui .ssi-share .ssi-share-btn {
  display: inline-flex;
  width: 36px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: #ededed;
  border-radius: 0.25rem;
}
.article-ssiformui .ssi-share .ssi-share-btn:hover {
  background: #e2e6ea;
}
.article-ssiformui .ssi-share svg {
  fill: #3a3a3a;
}
.article-ssiformui .ssi-share span.small.text-muted.me-1 {
  float: right;
  line-height: 1.2;
  font-size: 0.7rem;
}

.article-ssiformui .article-intro {
  font-size: 1.05rem;
  line-height: 1.5rem;
  font-weight: 500;
  text-align: justify;
}
.article-ssiformui .article-full {
  text-align: justify;
}
.ssi-block-side h3 {
    border-bottom: 1px solid #bdbdbd ! Important;
}
/* ==========================
   3) ELEMENTOS COMUNES (ratios / imágenes)
========================== */
.article-ssiformui .ratio,
.article-noticias .ratio,
.a-media .thumbnail .ratio {
  background-color: #f8f9fa;
}

.a-media img,
.article-ssiformui .ssi-hero img,
.article-noticias .card img {
  object-fit: cover;
}

/* ==========================
   4) GALERÍA (SSIGallery dentro de artículo)
========================== */
.a-gallery {
  margin-top: 1.5rem;
}
.a-gallery h3 {
  margin-bottom: 0.75rem;
}

.ssigallery-frontend .ssig-item {
  display: block;
}
.ssigallery-frontend img {
  border-radius: 0.375rem;
}
.ssigallery-frontend .col > a:hover img {
  filter: brightness(0.96);
}
.ssigallery-frontend {
  row-gap: 1rem;
}

/* ==========================
   5) ADJUNTOS (SSI)
========================== */
.a-attachments ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.a-attachments li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0;
}
.a-attachments a {
  text-decoration: none;
}
.a-attachments a:hover {
  text-decoration: underline;
}

/* ==========================
   6) MULTIMEDIA (SSI)
========================== */
.a-media {
  margin-top: 1.5rem;
}
.a-media .thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 0.375rem;
}
.a-media .thumbnail .ratio {
  background-color: #000;
}
.a-media img {
  object-fit: cover;
}

.a-media .media-title {
  margin-top: 0.5rem;
}
.a-media .media-credit {
  font-size: 0.85rem;
  color: #8a8a8a;
}

/* Overlay oscurecedor */
.a-media .thumbnail::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.25rem;
  background: rgba(0, 0, 0, 0.35);
  transition: background 0.25s ease;
}

/* Ícono play */
.a-media .thumbnail .ssi-icon-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.a-media .thumbnail .ssi-icon-play::before {
  content: "";
  display: block;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 6px;
}

/* Hover multimedia */
.a-media .thumbnail:hover::before {
  background: rgba(0, 0, 0, 0.12);
}
.a-media .thumbnail:hover .ssi-icon-play {
  background: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%) scale(1.06);
}
.a-media .thumbnail:hover .ssi-icon-play::before {
  border-color: transparent transparent transparent #000;
}

/* ==========================
   7) ACCESIBILIDAD
========================== */
.a-attachments a,
.a-media a {
  text-decoration: none;
  outline: none;
}
.a-attachments a:hover,
.a-media a:hover {
  text-decoration: underline;
}
.a-attachments a:focus-visible,
.a-media a:focus-visible {
  outline: 2px solid rgba(0, 123, 255, 0.5);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ==========================
   8) ARTICLE GRID (ssiformui)
========================== */

/* Mobile: stack hero → main → side → tags */
.article-ssiformui .ssi-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "hero"
    "main"
    "side"
    "tags";
}

/* Asignación de áreas */
.article-ssiformui .ssi-block-hero {
  grid-area: hero;
}
.article-ssiformui .ssi-block-main {
  grid-area: main;
}
.article-ssiformui .ssi-block-side {
  grid-area: side;
}
.article-ssiformui .ssi-block-tags {
  grid-area: tags;
}

/* Wrapper: invisible en mobile */
.article-ssiformui .ssi-left {
  display: contents;
}

/* Tablet y Desktop ≥992px */
@media (min-width: 992px) {
  .article-ssiformui .ssi-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 5fr 7fr;
    grid-template-areas:
      "left main"
      "tags tags";
    align-items: start;
  }

  .article-ssiformui .ssi-left {
    display: grid;
    grid-area: left;
    grid-auto-rows: auto;
    row-gap: 1rem;
    align-content: start;
  }

  .article-ssiformui .ssi-block-side {
    align-self: start;
  }

  .article-ssiformui .ssi-block-main {
    grid-area: main;
    align-self: start;
  }

  .article-ssiformui .ssi-block-tags {
    grid-area: tags;
  }
}

/* Fallback floats (sin Grid) */
@supports not (display: grid) {
  .article-ssiformui .ssi-grid {
    display: block;
  }
  .article-ssiformui .ssi-clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  .article-ssiformui .ssi-block-hero {
    float: left;
    width: 41.6667%;
  }
  .article-ssiformui .ssi-block-main {
    float: right;
    width: 58.3333%;
  }
  .article-ssiformui .ssi-block-side {
    float: left;
    width: 41.6667%;
    clear: left;
  }
  .article-ssiformui .ssi-block-tags {
    clear: both;
    width: 100%;
  }
}

/* Tokens / tipografía */
.article-ssiformui {
  --ssi-gap-desktop: 1.5rem;
  --ssi-gap-tablet: 1rem;
  --ssi-gap-mobile: 0.75rem;
  --ssi-radius: 0.5rem;
  --ssi-border: var(--bs-border-color, #dee2e6);
  --ssi-text: var(--bs-body-color, #383838);
  --ssi-muted: var(--bs-secondary-color, #6c757d);
  --ssi-bg-soft: var(--bs-body-bg, #fff);
  --ssi-accent: var(--bs-primary, #272a5b);
  color: var(--ssi-text);
}

.article-ssiformui h1.ssi-article-title,
.article-ssiformui .article-title {
  /*line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 700;*/
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
}

.article-ssiformui .text-muted,
.article-ssiformui .ssi-meta {
  color: var(--ssi-muted);
}

/* Hero proporción estable */
.article-ssiformui .ssi-hero img,
.article-ssiformui .ssi-block-hero img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--ssi-border);
  background: #000;
}

/* Sidebar visual */
.article-ssiformui .ssi-block-side > * {
  background-color: var(--ssi-bg-soft);
  border: 1px solid #ededed;
  border-radius: var(--ssi-radius);
  padding: 1rem;
}
.article-ssiformui .ssi-block-side > * + * {
  margin-top: 1rem;
}

/* Tags estilo chips */
.article-ssiformui .ssi-block-tags .tag-list a,
.article-ssiformui .ssi-block-tags a[rel~="tag"] {
  display: inline-block;
  margin: 0.25rem 0.25rem 0 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border: 1px solid var(--ssi-border);
  border-radius: 999px;
  text-decoration: none;
}
.article-ssiformui .ssi-block-tags .tag-list a:hover,
.article-ssiformui .ssi-block-tags a[rel~="tag"]:hover {
  border-color: var(--ssi-accent);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .article-ssiformui *,
  .article-ssiformui *::before,
  .article-ssiformui *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (min-width: 992px) {
  .article-ssiformui .ssi-block-hero,
  .article-ssiformui .ssi-block-side {
    grid-area: auto; /* aseguro que no “busquen” un área inexistente en el grid padre */
  }
}

/* ============================================
   NOTICIAS MÓDULO (formato tipo Últimas Noticias)
   ID: #noticiasModulo
   ============================================ */

#noticiasModulo {
    color: #383838;
}

/* Título del módulo */
#noticiasModulo h2 {
    font-weight: 600;
    margin-top: 0;
}

/* Fecha */
#noticiasModulo span.notiFeedItemDate {
    font-size: 0.9em;
    font-weight: 500;
    color: #383838;
}

/* Enlaces (color base) */
#noticiasModulo a {
    color: #383838;
    text-decoration: none;
}

/* Hover del título */
#noticiasModulo a:hover h3.titulos_b {
    color: #50b8b1 !important;
}

/* Título de la noticia */
#noticiasModulo h3.titulos_b {
    font-size: 20px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Contenedor de la miniatura */
#noticiasModulo section.thumbnail {
    margin-bottom: 8px;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* define la altura en base al ancho */
    background-color: #fff;
}

/* Imagen dentro de la miniatura */
#noticiasModulo section.thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center; 
    border-radius: 0.5rem 0.5rem 0rem 0rem;
}


/* Link "ver más" (si lo usás) */
#noticiasModulo a.view-more {
    color: #448e87;
    text-align: center;
    text-decoration: none;
}

#noticiasModulo a.view-more:hover {
    color: #383838;
}

@media (max-width: 576px) {
    #noticiasModulo h3.titulos_b {
        font-size: 18px;
        line-height: 1.25;
    }
 
}