/* ============================================================
   Contenido de páginas internas con el sistema de diseño del Home
   ============================================================
   El sitio interno (entidad/*, contacto, participa/*, etc.) ya no carga
   css/style.css (viejo). Usa el mismo Bootstrap 5 / tipografía / paleta
   de css/new_home/style.css, y este archivo solo agrega los estilos
   propios de los patrones de "página de contenido" que el Home no
   necesitaba (título de página, sidebar con acordeón, tarjetas de
   enlaces, tablas, etc.), reusando sus mismos tokens:
     - Azul oscuro: #151D37 / #172540
     - Dorado:      #FFC629
     - Tipografía:  Josefin Sans
   ============================================================ */

/* ---------- Breadcrumbs (application/config/breadcrumbs.php genera el HTML) ---------- */
main#contenido-principal.ebsa-internal-page .breadcumbs-area {
    padding: 16px 0;
    background: #FFF;
    border-bottom: 1px solid #ECECEC;
}

main#contenido-principal.ebsa-internal-page .transparency-breadcrub-area {
    display: flex;
}

/* Nota: la clase "breadcrumb-item" aquí es el <div> contenedor propio del
   generador de breadcrumbs (no el ".breadcrumb-item" de Bootstrap, que es
   un <li>) — no colisiona porque nunca aparecen dos adyacentes. */
main#contenido-principal.ebsa-internal-page .breadcrumb-item {
    width: 100%;
}

main#contenido-principal.ebsa-internal-page .breadcrumb-item ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
}

main#contenido-principal.ebsa-internal-page .breadcrumb-item ul li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

main#contenido-principal.ebsa-internal-page .breadcrumb-item ul li a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #66707F;
    font-weight: 500;
    transition: 0.3s;
}

main#contenido-principal.ebsa-internal-page .breadcrumb-item ul li a i {
    color: #172540;
}

main#contenido-principal.ebsa-internal-page .breadcrumb-item ul li a:hover {
    color: #FFC629;
}

main#contenido-principal.ebsa-internal-page .breadcrumb-item ul li.active-item {
    color: #172540;
    font-weight: 700;
}

main#contenido-principal.ebsa-internal-page .breadcums-divider {
    color: #C7CCD6;
    font-size: 12px;
    display: flex;
    align-items: center;
}

/* Botón "Atrás": primer crumb, con onclick="return false;" (decorativo) */
main#contenido-principal.ebsa-internal-page .breadcrumb-item ul li a.back_class {
    background: #F6F6F6;
    color: #172540;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    cursor: default;
}

main#contenido-principal.ebsa-internal-page .breadcrumb-item ul li a.back_class i {
    color: #172540;
}

/* ---------- Título de página ---------- */
main#contenido-principal.ebsa-internal-page .page-title {
    padding-top: 50px;
    padding-bottom: 24px;
    text-align: left;
}

main#contenido-principal.ebsa-internal-page .page-title h1,
main#contenido-principal.ebsa-internal-page .page-title h2 {
    color: #172540;
    font-weight: 700;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 38px;
    margin: 0;
}

/* ---------- Contenedor general de página de contenido ---------- */
main#contenido-principal.ebsa-internal-page .access-informations-area {
    padding: 30px 0 60px 0;
    position: relative;
}

/* El row de Bootstrap estira las columnas a la misma altura (align-items:
   stretch por defecto); con contenido corto en la columna principal y un
   sidebar más alto (acordeón), eso dejaba un hueco vacío enorme antes del
   footer. Alineamos arriba para que cada columna mida solo lo que necesita. */
main#contenido-principal.ebsa-internal-page .single-informations-area {
    padding-top: 10px;
    align-items: flex-start;
}

main#contenido-principal.ebsa-internal-page .single-desriptions-area {
    margin-top: 10px;
    background: #FFF;
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(21, 29, 55, 0.06);
}

main#contenido-principal.ebsa-internal-page .single-desriptions-area h2 {
    color: #172540;
    font-size: 32px;
    font-weight: 700;
    font-family: 'Josefin Sans', sans-serif;
   /* border-bottom: 2px solid #FFC629;*/
   /* padding-bottom: 14px;*/
  /*  margin-bottom: 20px;*/
}

/* Página 404 (not_found.php) */
main#contenido-principal.ebsa-internal-page .single-desriptions-area h1 {
    color: #172540;
    font-size: 42px;
    font-weight: 700;
    font-family: 'Josefin Sans', sans-serif;
    margin-bottom: 10px;
}

main#contenido-principal.ebsa-internal-page .single-desriptions-area h3 {
    color: #43506B;
    font-size: 18px;
    font-weight: 500;
    /*margin-bottom: 16px;*/
}

main#contenido-principal.ebsa-internal-page .single-desriptions-area p {
    padding-top: 10px;
    line-height: 1.7;
}

main#contenido-principal.ebsa-internal-page .padding-arriba {
    padding-top: 20px;
}

/* ---------- Sidebar: acordeón de secciones (entidad/includes/menu.php, en todas las páginas de "Nuestra Entidad") ---------- */
main#contenido-principal.ebsa-internal-page #accordionExample {
    background: #FFF;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 20px rgba(21, 29, 55, 0.06);
    position: sticky;
    top: 20px;
}

main#contenido-principal.ebsa-internal-page #accordionExample::before {
    content: "Nuestra Entidad";
    display: block;
    color: #172540;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid #ECECEC;
}

main#contenido-principal.ebsa-internal-page #accordionExample .card:first-child {
    margin-top: 0;
}

/* IMPORTANTE: css/new_home/style.css define ".card"/".card img"/".card h3"/
   ".card p"/".card a" para las tarjetas de prensa del Home (fondo con
   imagen, ancho fijo 320px, link en píldora dorada "!important"). Bootstrap
   usa ".card" como nombre genérico de componente y el contenido interno lo
   reutiliza (acordeón del sidebar, tarjetas de entidad/home.php, etc.), así
   que sin este reset esas reglas del Home se filtran a cualquier ".card" de
   una página interna. Lo neutralizamos solo dentro de <main>, con más
   especificidad (el ID de #contenido-principal) para ganarle a esas reglas
   aunque tengan "!important". El Home (fuera de <main>, en su propio
   template2.php) no se toca. */
main#contenido-principal.ebsa-internal-page .card {
    background: #FFF !important;
    width: auto !important;
    text-align: left !important;
    border: 0 !important;
    margin-top: 15px;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(21, 29, 55, 0.06) !important;
}

main#contenido-principal.ebsa-internal-page .card-body {
    padding: 20px !important;
}

main#contenido-principal.ebsa-internal-page .card img {
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
}

main#contenido-principal.ebsa-internal-page .card h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: left !important;
    color: #172540 !important;
    padding: 18px 20px 0 20px !important;
}

main#contenido-principal.ebsa-internal-page .card p {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    padding: 8px 20px !important;
}

main#contenido-principal.ebsa-internal-page .card a {
    background: transparent !important;
    display: inline !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #172540 !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    text-align: left !important;
    vertical-align: baseline !important;
}

/* ...salvo que sea explícitamente un botón: ese sí debe verse como botón */
main#contenido-principal.ebsa-internal-page .card a.btn {
    display: inline-block !important;
    padding: 0.375rem 0.9rem !important;
    border-radius: 6px !important;
    background: #172540 !important;
    color: #FFF !important;
    font-weight: 600 !important;
}

main#contenido-principal.ebsa-internal-page .card a.btn:hover {
    background: #FFC629 !important;
    color: #172540 !important;
}

main#contenido-principal.ebsa-internal-page .card-header {
    padding: 0;
    border: 0;
    background: transparent;
}

main#contenido-principal.ebsa-internal-page .card-header button {
    background: #172540;
    font-size: 15px;
    color: #FFF;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 30px;
    position: relative;
    width: 100%;
}

main#contenido-principal.ebsa-internal-page .card-header button:hover,
main#contenido-principal.ebsa-internal-page .card-header button:focus {
    color: #FFC629 !important;
    text-decoration: none !important;
}

main#contenido-principal.ebsa-internal-page .card-header button i {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    font-size: 18px;
    transition: transform 0.25s;
}

main#contenido-principal.ebsa-internal-page .card-header button[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* El sidebar de acordeón (entidad/includes/menu.php) maneja su propio
   padding vía .single-informations-item ul; no necesita el de .card-body */
main#contenido-principal.ebsa-internal-page #accordionExample .card-body {
    padding: 0 !important;
}

main#contenido-principal.ebsa-internal-page .single-informations-item ul {
    padding: 8px;
    margin: 0;
    list-style: none;
}

main#contenido-principal.ebsa-internal-page .single-informations-item ul li {
    background: #F6F6F6;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin: 6px 0;
    border-radius: 6px;
}

main#contenido-principal.ebsa-internal-page .single-informations-item ul li i {
    font-size: 18px;
    margin-right: 10px;
    min-width: 22px;
    width: 22px;
    color: #172540;
}

main#contenido-principal.ebsa-internal-page .single-informations-item ul li a {
    color: #172540;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    transition: 0.3s;
}

main#contenido-principal.ebsa-internal-page .single-informations-item ul li a:hover {
    font-weight: 700;
    text-decoration: underline !important;
}

main#contenido-principal.ebsa-internal-page .active-sala-prensa {
    background: #FFF3D0 !important;
}

main#contenido-principal.ebsa-internal-page .active-sala-prensa a {
    text-decoration: underline !important;
    font-weight: 700;
}

main#contenido-principal.ebsa-internal-page .active-sala-prensa i {
    text-decoration: none !important;
}

main#contenido-principal.ebsa-internal-page .active-item {
    color: #FFC629 !important;
    font-weight: 700;
}

/* ---------- Tarjetas de enlaces (transparencia, otros servicios, etc.) ---------- */
main#contenido-principal.ebsa-internal-page .access-informations-single-item {
    background: #F6F6F6;
    border-radius: 12px;
    padding: 24px 20px;
    margin-top: 50px;
}

main#contenido-principal.ebsa-internal-page .access-informations-single-item h3 {
    color: #172540;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Josefin Sans', sans-serif;
    background: #FFC629;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    margin-top: -40px;
    padding: 12px 15px;
}

main#contenido-principal.ebsa-internal-page .access-informations-single-item ul {
    padding-top: 10px;
    list-style: none;
    margin: 0;
}

main#contenido-principal.ebsa-internal-page .access-informations-single-item ul li {
    display: flex;
    align-items: center;
    margin: 14px 0;
}

main#contenido-principal.ebsa-internal-page .access-informations-single-item ul li i {
    font-size: 20px;
    margin-right: 8px;
    min-width: 28px;
    width: 28px;
    color: #172540;
}

main#contenido-principal.ebsa-internal-page .access-informations-single-item ul li a {
    color: #172540;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    transition: 0.3s;
}

main#contenido-principal.ebsa-internal-page .access-informations-single-item ul li a:hover {
    font-weight: 700;
    text-decoration: underline !important;
}

/* ============================================================
   Sala de Prensa (sitio/sala_de_prensa): sidebar de secciones +
   contenido (noticias, calendario, comunicados, boletines,
   periodistas, videos, manual de imagen, galerías)
   ============================================================ */
main#contenido-principal.ebsa-internal-page .all-informate {
    padding-top: 30px;
}

main#contenido-principal.ebsa-internal-page .all-informate-area {
    background: #FFF;
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(21, 29, 55, 0.06);
}

main#contenido-principal.ebsa-internal-page .informate-menu {
    background: #FFF;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 20px rgba(21, 29, 55, 0.06);
    position: sticky;
    top: 20px;
}

/* sitio/ver_noticia: "Noticias relacionadas" + "Suscribirse a los
   boletines" son dos .informate-menu seguidos en la misma columna y
   quedaban pegados uno con el otro. */
main#contenido-principal.ebsa-internal-page .informate-menu + .informate-menu {
    margin-top: 24px;
}

main#contenido-principal.ebsa-internal-page .informate-menu h2 {
    color: #172540;
    font-size: 15px;
    font-family: 'Josefin Sans', sans-serif;
    background: transparent;
    text-align: left;
    padding: 0 0 12px 0;
    margin: 0 0 6px 0;
    border-bottom: 1px solid #ECECEC;
    border-radius: 0;
    font-weight: 700;
    letter-spacing: 0.02em;
}

main#contenido-principal.ebsa-internal-page .informate-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

main#contenido-principal.ebsa-internal-page .informate-menu ul li {
    margin-top: 6px;
}

main#contenido-principal.ebsa-internal-page .informate-menu ul li a {
    color: #172540;
    background: #F6F6F6;
    display: block;
    padding: 12px 14px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 8px;
    transition: 0.25s;
}

main#contenido-principal.ebsa-internal-page .informate-menu ul li a:hover {
    background: #EDEDED;
    text-decoration: none !important;
}

main#contenido-principal.ebsa-internal-page .informate-menu ul li a.active-sala-prensa {
    background: #172540 !important;
    color: #FFF;
}

/* Galerías de imágenes: misma tarjeta que las noticias */
main#contenido-principal.ebsa-internal-page .galerias-single-item {
    margin-bottom: 30px;
    background: #FFF;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(21, 29, 55, 0.08);
    transition: 0.3s;
}

main#contenido-principal.ebsa-internal-page .galerias-single-item:hover {
    box-shadow: 0 8px 24px rgba(21, 29, 55, 0.14);
    transform: translateY(-3px);
}

main#contenido-principal.ebsa-internal-page .galerias-single-item > a {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

main#contenido-principal.ebsa-internal-page .galerias-single-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

main#contenido-principal.ebsa-internal-page .galerias-single-item:hover img {
    transform: scale(1.06);
}

main#contenido-principal.ebsa-internal-page .galerias-single-item h2 {
    font-size: 17px;
    line-height: 1.4;
    padding: 16px 16px 4px 16px;
    margin: 0;
}

main#contenido-principal.ebsa-internal-page .galerias-single-item h2 a {
    color: #172540;
    font-weight: 700;
}

main#contenido-principal.ebsa-internal-page .galerias-single-item h2 a:hover {
    text-decoration: underline;
}

main#contenido-principal.ebsa-internal-page .galerias-single-item > span {
    display: block;
    padding: 0 16px 16px 16px;
    color: #7F8080;
    font-size: 13px;
}

/* Contacto Periodistas */
main#contenido-principal.ebsa-internal-page .contacto-content {
    margin-bottom: 20px;
    font-size: 16px;
    color: #43506B;
}

main#contenido-principal.ebsa-internal-page .contact-details-item {
    background: #FFF;
    border-radius: 14px;
    padding: 26px 16px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(21, 29, 55, 0.06);
    height: 100%;
}

main#contenido-principal.ebsa-internal-page .contact-details-item .image-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px auto;
    background: #172540;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

main#contenido-principal.ebsa-internal-page .contact-details-item .image-icon img {
    width: 26px;
    height: 26px;
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

main#contenido-principal.ebsa-internal-page .contact-details-item p {
    margin: 0;
    color: #172540;
    font-weight: 600;
}

main#contenido-principal.ebsa-internal-page .contact-details-item p a {
    color: #172540;
}

/* Videos institucionales */
main#contenido-principal.ebsa-internal-page .video-item {
    margin-bottom: 24px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(21, 29, 55, 0.08);
    position: relative;
    padding-top: 56.25%;
}

main#contenido-principal.ebsa-internal-page .video-item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Manual de Imagen */
main#contenido-principal.ebsa-internal-page .manual-content {
    background: #FFF;
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 4px 16px rgba(21, 29, 55, 0.06);
    height: 100%;
}

main#contenido-principal.ebsa-internal-page .manual-content h3 {
    color: #172540;
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 12px;
}

main#contenido-principal.ebsa-internal-page .manual-content p {
    color: #43506B;
    line-height: 1.7;
}

main#contenido-principal.ebsa-internal-page .all-informate-area > .row > .col-md-6 img {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(21, 29, 55, 0.08);
}

/* ---------- Tablas (glosario, boletines, transparencia, etc.) ---------- */
main#contenido-principal.ebsa-internal-page .table {
    --bs-table-color: #172540;
}

main#contenido-principal.ebsa-internal-page .table thead th {
    background: #172540;
    color: #FFF;
    font-weight: 600;
    border-color: #172540;
}

main#contenido-principal.ebsa-internal-page .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #F6F6F6;
}

main#contenido-principal.ebsa-internal-page .link-tabla {
    color: #172540;
    text-decoration: underline !important;
}

main#contenido-principal.ebsa-internal-page .link-tabla:hover {
    font-weight: bold;
}

main#contenido-principal.ebsa-internal-page .imprimir {
    color: #172540 !important;
    text-decoration: underline !important;
}

main#contenido-principal.ebsa-internal-page .imprimir:hover {
    font-weight: bold;
}

/* ---------- Botones (mismo dorado del Home) ---------- */
main#contenido-principal.ebsa-internal-page .btn-primary,
main#contenido-principal.ebsa-internal-page .btn-secondary {
    background: #172540;
    border-color: #172540;
    color: #FFF;
}

main#contenido-principal.ebsa-internal-page .btn-primary:hover,
main#contenido-principal.ebsa-internal-page .btn-secondary:hover {
    background: #FFC629;
    border-color: #FFC629;
    color: #172540;
}

/* ---------- Video / iframe responsive (galerías, videos embebidos) ---------- */
main#contenido-principal.ebsa-internal-page .iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

main#contenido-principal.ebsa-internal-page .iframe-container iframe {
    position: absolute;
    top: 0;
    border: 0;
    height: 100%;
    width: 100%;
}

main#contenido-principal.ebsa-internal-page .post-gallery-images-area {
    position: relative;
    margin: 40px 0 20px 0;
}

main#contenido-principal.ebsa-internal-page .post-gallery-images-area .play-puse-button .play,
main#contenido-principal.ebsa-internal-page .post-gallery-images-area .play-puse-button .stop {
    position: absolute;
    bottom: 15px;
    z-index: 1;
    cursor: pointer;
}

main#contenido-principal.ebsa-internal-page .post-gallery-images-area .play-puse-button .play {
    left: 40%;
}

main#contenido-principal.ebsa-internal-page .post-gallery-images-area .play-puse-button .stop {
    right: 40%;
}

/* ============================================================
   Noticias (entidad/index/noticias, tab de "últimas noticias")
   ============================================================ */
main#contenido-principal.ebsa-internal-page .noticias-single-item {
    margin-bottom: 30px;
    background: #FFF;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(21, 29, 55, 0.08);
    transition: 0.3s;
}

main#contenido-principal.ebsa-internal-page .noticias-single-item:hover {
    box-shadow: 0 8px 24px rgba(21, 29, 55, 0.14);
    transform: translateY(-3px);
}

main#contenido-principal.ebsa-internal-page .noticias-single-item a {
    display: block;
}

main#contenido-principal.ebsa-internal-page .noticias-single-item > a {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

main#contenido-principal.ebsa-internal-page .noticias-single-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

main#contenido-principal.ebsa-internal-page .noticias-single-item:hover img {
    transform: scale(1.06);
}

main#contenido-principal.ebsa-internal-page .noticias-single-item-body {
    padding: 18px 18px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

main#contenido-principal.ebsa-internal-page .noticias-fecha {
    color: #7F8080;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

main#contenido-principal.ebsa-internal-page .noticias-fecha i {
    color: #FFC629;
    margin-right: 4px;
}

main#contenido-principal.ebsa-internal-page .noticias-single-item h2 {
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
}

main#contenido-principal.ebsa-internal-page .noticias-single-item h2 a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #172540;
    font-weight: 700;
}

main#contenido-principal.ebsa-internal-page .noticias-single-item h2 a:hover {
    color: #172540;
    text-decoration: underline;
}

main#contenido-principal.ebsa-internal-page .noticias-leer-mas {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #172540;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 0;
    border-top: 1px solid #ECECEC;
    margin-top: 4px;
    width: 100%;
    justify-content: space-between;
    transition: 0.25s;
}

/* Filtros de búsqueda (sitio/noticias, sitio/galerias) */
main#contenido-principal.ebsa-internal-page .listado-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    background: #F6F6F6;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 26px;
}

main#contenido-principal.ebsa-internal-page .listado-filtros-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

main#contenido-principal.ebsa-internal-page .listado-filtros-texto {
    flex: 1 1 260px;
}

main#contenido-principal.ebsa-internal-page .listado-filtros-campo label {
    font-size: 12px;
    font-weight: 700;
    color: #43506B;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}

main#contenido-principal.ebsa-internal-page .listado-filtros-campo input,
main#contenido-principal.ebsa-internal-page .listado-filtros-campo select {
    border: 1px solid #DADFE8;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: #172540;
    background: #FFF;
    min-width: 140px;
}

main#contenido-principal.ebsa-internal-page .listado-filtros-campo input:focus,
main#contenido-principal.ebsa-internal-page .listado-filtros-campo select:focus {
    outline: none;
    border-color: #172540;
    box-shadow: 0 0 0 3px rgba(23, 37, 64, 0.12);
}

main#contenido-principal.ebsa-internal-page .listado-filtros-acciones {
    display: flex;
    align-items: center;
    gap: 14px;
}

main#contenido-principal.ebsa-internal-page .listado-filtros-limpiar {
    font-size: 13px;
    font-weight: 600;
    color: #43506B;
    text-decoration: underline;
}

main#contenido-principal.ebsa-internal-page .listado-filtros-limpiar:hover {
    color: #172540;
}

/* Estado sin resultados (misma búsqueda de noticias/galerías) */
main#contenido-principal.ebsa-internal-page .listado-sin-resultados {
    text-align: center;
    padding: 60px 20px;
    color: #43506B;
}

main#contenido-principal.ebsa-internal-page .listado-sin-resultados i {
    font-size: 40px;
    color: #DADFE8;
    margin-bottom: 16px;
    display: block;
}

main#contenido-principal.ebsa-internal-page .listado-sin-resultados h2 {
    color: #172540;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

main#contenido-principal.ebsa-internal-page .listado-sin-resultados p {
    max-width: 420px;
    margin: 0 auto 20px auto;
}

main#contenido-principal.ebsa-internal-page .noticias-leer-mas i {
    transition: 0.25s;
}

main#contenido-principal.ebsa-internal-page .noticias-leer-mas:hover {
    color: #FFC629;
}

main#contenido-principal.ebsa-internal-page .noticias-leer-mas:hover i {
    transform: translateX(4px);
}

/* botón "ver histórico de noticias" */
main#contenido-principal.ebsa-internal-page .button {
    text-align: center;
    margin-top: 10px;
}

main#contenido-principal.ebsa-internal-page .button a {
    display: inline-block;
    background: #172540;
    color: #FFF;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 32px;
    border-radius: 30px;
    transition: 0.3s;
}

main#contenido-principal.ebsa-internal-page .button a:hover {
    background: #FFC629;
    color: #172540;
}

main#contenido-principal.ebsa-internal-page .audio-noticia audio {
    margin-top: 20px;
    width: 100%;
}

/* ---------- Ancho del contenedor de contenido en pantallas grandes ----------
   Bootstrap tope el .container en 1270px desde el breakpoint xl. Solo lo
   ampliamos dentro del contenido de las páginas internas (no en el
   header/footer, que se queda con el ancho del diseño del Home). */
@media (min-width: 1400px) {
    main#contenido-principal.ebsa-internal-page .container {
        max-width: 1400px;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    main#contenido-principal.ebsa-internal-page #accordionExample {
        position: static;
        margin-bottom: 20px;
    }

    main#contenido-principal.ebsa-internal-page .single-desriptions-area {
        padding: 20px;
    }

    main#contenido-principal.ebsa-internal-page .page-title h1,
    main#contenido-principal.ebsa-internal-page .page-title h2 {
        font-size: 28px;
    }

    main#contenido-principal.ebsa-internal-page .access-informations-single-item {
        margin-top: 40px;
    }
}

/* ============================================================
   Tabs (boletines, comunicados, informes, periodos por año, etc.)
   Bootstrap 5 puro (.nav-pills/.nav-tabs/.nav-link/.tab-content), sin
   colisión de otra hoja — solo le faltaba el tema de marca.
   ============================================================ */
main#contenido-principal.ebsa-internal-page .nav-pills,
main#contenido-principal.ebsa-internal-page .nav-tabs {
    gap: 8px;
    flex-wrap: wrap;
    border: 0;
    margin-bottom: 20px;
}

main#contenido-principal.ebsa-internal-page .nav-pills .nav-link,
main#contenido-principal.ebsa-internal-page .nav-tabs .nav-link {
    color: #172540;
    background: #F6F6F6;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    transition: 0.25s;
}

main#contenido-principal.ebsa-internal-page .nav-pills .nav-link:hover,
main#contenido-principal.ebsa-internal-page .nav-tabs .nav-link:hover {
    background: #EDEDED;
}

main#contenido-principal.ebsa-internal-page .nav-pills .nav-link.active,
main#contenido-principal.ebsa-internal-page .nav-tabs .nav-link.active,
main#contenido-principal.ebsa-internal-page .nav-pills .show > .nav-link,
main#contenido-principal.ebsa-internal-page .nav-tabs .show > .nav-link {
    color: #FFF;
    background: #172540;
}

main#contenido-principal.ebsa-internal-page .tab-content {
    padding-top: 6px;
}

main#contenido-principal.ebsa-internal-page .tab-content hr {
    display: none;
}

/* jQuery UI Tabs (algunas vistas usan este widget en vez de Bootstrap) */
main#contenido-principal.ebsa-internal-page .ui-tabs .ui-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
}

main#contenido-principal.ebsa-internal-page .ui-tabs .ui-tabs-nav li {
    margin: 0;
    border: 0;
    background: #F6F6F6;
    border-radius: 8px;
    list-style: none;
}

main#contenido-principal.ebsa-internal-page .ui-tabs .ui-tabs-nav li a {
    color: #172540;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    display: block;
}

main#contenido-principal.ebsa-internal-page .ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background: #172540;
}

main#contenido-principal.ebsa-internal-page .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: #FFF;
}

main#contenido-principal.ebsa-internal-page .ui-tabs .ui-tabs-panel {
    border: 0;
    padding: 6px 0 0 0;
}

/* ============================================================
   Modales (directorios, información contractual, PQR, etc.)
   Bootstrap 5 puro también — se les da la misma identidad visual que
   los modales del Home (cabecera azul, botón cerrar invertido).
   ============================================================ */
main#contenido-principal.ebsa-internal-page .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
}

main#contenido-principal.ebsa-internal-page .modal-header {
    background: #172540;
    border: 0;
    padding: 18px 24px;
}

main#contenido-principal.ebsa-internal-page .modal-title {
    color: #FFF;
    font-weight: 700;
    margin: 0;
}

main#contenido-principal.ebsa-internal-page .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
}

main#contenido-principal.ebsa-internal-page .modal-body {
    padding: 26px 24px;
}

main#contenido-principal.ebsa-internal-page .modal-body h1,
main#contenido-principal.ebsa-internal-page .modal-body h2,
main#contenido-principal.ebsa-internal-page .modal-body h3,
main#contenido-principal.ebsa-internal-page .modal-body h4,
main#contenido-principal.ebsa-internal-page .modal-body h5 {
    color: #172540;
    font-weight: 700;
}

main#contenido-principal.ebsa-internal-page .modal-footer {
    border-top: 1px solid #ECECEC;
}

/* ============================================================
   Alertas (Bootstrap 5 puro: azul genérico de fábrica, desentonaba
   con la paleta navy/dorado del sitio)
   ============================================================ */
main#contenido-principal.ebsa-internal-page .alert {
    border: 0;
    border-radius: 10px;
    border-left: 4px solid #172540;
    padding: 16px 20px;
    font-size: 15px;
}

main#contenido-principal.ebsa-internal-page .alert i,
main#contenido-principal.ebsa-internal-page .alert .fa,
main#contenido-principal.ebsa-internal-page .alert .fas,
main#contenido-principal.ebsa-internal-page .alert .far {
    margin-right: 8px;
}

main#contenido-principal.ebsa-internal-page .alert-info {
    background: #EEF1F6;
    color: #172540;
    border-left-color: #172540;
}

main#contenido-principal.ebsa-internal-page .alert-warning {
    background: #FFF7E0;
    color: #6B5200;
    border-left-color: #FFC629;
}

main#contenido-principal.ebsa-internal-page .alert-danger {
    background: #FBEAEA;
    color: #7A1F1F;
    border-left-color: #C0392B;
}

main#contenido-principal.ebsa-internal-page .alert-success {
    background: #EAF6EE;
    color: #1F6B3A;
    border-left-color: #2E9E52;
}

/* ============================================================
   Paginación de las tablas (DataTables usa .pagination/.page-link de
   Bootstrap): el azul de fábrica (#0d6efd) desentonaba con el sitio.
   ============================================================ */
main#contenido-principal.ebsa-internal-page .page-link {
    color: #172540;
    border-color: #E5E5E5;
}

main#contenido-principal.ebsa-internal-page .page-link:hover {
    color: #172540;
    background: #F6F6F6;
    border-color: #E5E5E5;
}

main#contenido-principal.ebsa-internal-page .page-item.active .page-link {
    background: #172540;
    border-color: #172540;
    color: #FFF;
}

main#contenido-principal.ebsa-internal-page .page-item.disabled .page-link {
    color: #B7BDC9;
}

main#contenido-principal.ebsa-internal-page .page-link:focus {
    box-shadow: 0 0 0 3px rgba(23, 37, 64, 0.25);
}

/* ============================================================
   Acordeón nativo de Bootstrap 5 (mecanismos_contacto, organigrama, etc.)
   ============================================================ */
main#contenido-principal.ebsa-internal-page .accordion-button {
    color: #172540;
    font-weight: 600;
    background: #F6F6F6;
}

main#contenido-principal.ebsa-internal-page .accordion-button:not(.collapsed) {
    color: #FFF;
    background: #172540;
    box-shadow: none;
}

main#contenido-principal.ebsa-internal-page .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

main#contenido-principal.ebsa-internal-page .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(23, 37, 64, 0.15);
    border-color: #172540;
}

main#contenido-principal.ebsa-internal-page .accordion-item {
    border-color: #ECECEC;
}

/* ------------------------------------------------------------
   Acordeones anidados (widget "Acordeón" del CMS, insertado como
   contenido HTML libre dentro de otro acordeon, p.ej. Nuestra
   Normatividad): más compactos que el nivel raíz (menos padding/
   tamaño de fuente) para que se note la jerarquía sin ocupar tanto
   espacio.
   ------------------------------------------------------------ */
main#contenido-principal.ebsa-internal-page .accordion-body .accordion-item {
    margin-bottom: 8px;
}

main#contenido-principal.ebsa-internal-page .accordion-body .accordion-button {
    font-size: 15px;
    padding: 12px 16px;
}

main#contenido-principal.ebsa-internal-page .accordion-body .accordion-body {
    padding: 12px 16px;
}

main#contenido-principal.ebsa-internal-page .accordion-body .accordion-body p {
    margin-bottom: 8px;
}

main#contenido-principal.ebsa-internal-page .accordion-body .all-informate-area {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* ------------------------------------------------------------
   Nuestra Normatividad (#accordionFlushExample): el usuario arma
   sub-acordeones dentro del contenido del CMS y puede haber más de
   4 niveles anidados. Un panel completo por nivel (con margen,
   sombra y radio propios) "engordaba" rápido con 4+ niveles.
   Simplificación: desde el 2º nivel para abajo TODO se ve como una
   simple lista con jerarquía (fila + separador fino + indent chico
   y fijo), igual sin importar cuán profundo esté anidado -- nada de
   "panel dentro de panel" ni de indent creciente. Solo el nivel 1
   (la categoría raíz) conserva el bloque navy grande, que sirve de
   ancla visual.
   ------------------------------------------------------------ */
#accordionFlushExample .accordion-body .accordion-item {
    border-radius: 0;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid #ECECEC;
    margin-bottom: 0;
}

#accordionFlushExample .accordion-body .accordion-item:last-child {
    border-bottom: 0;
}

#accordionFlushExample .accordion-body .accordion-button {
    border-radius: 0;
    padding: 9px 10px;
    font-size: 14px;
    background: transparent;
}

#accordionFlushExample .accordion-body .accordion-button:not(.collapsed) {
    background: transparent;
    color: #172540;
    font-weight: 700;
}

#accordionFlushExample .accordion-body .accordion-body {
    padding: 4px 0 4px 14px;
    border-left: 2px solid #E3E6EC;
}

/* ------------------------------------------------------------
   Organigrama (entidad/index/organigrama, entidad/home.php case 3):
   cada dependencia trae funciones (HTML del CMS, puede venir vacío)
   + correo/teléfono. Cuando falta un dato se mostraba en blanco o
   con un "___" de relleno; ahora se avisa "Información no
   disponible". La franja de contacto pasa a una tarjeta clara
   separada de las funciones, en 2 columnas desde tablet, para que
   no dependa del ancho fijo de <dl class="row"> (se veía angosto/
   descuadrado en el acordeón).
   ------------------------------------------------------------ */
main#contenido-principal.ebsa-internal-page .dependencia-funciones {
    margin-bottom: 16px;
}

main#contenido-principal.ebsa-internal-page .dependencia-contacto {
    background: #F6F6F6;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 0;
    row-gap: 8px;
}

main#contenido-principal.ebsa-internal-page .dependencia-contacto dt {
    color: #172540;
    font-weight: 700;
    font-size: 14px;
}

main#contenido-principal.ebsa-internal-page .dependencia-contacto dt i {
    color: #FFC629;
    width: 18px;
    text-align: center;
    margin-right: 6px;
}

main#contenido-principal.ebsa-internal-page .dependencia-contacto dd {
    color: #43506B;
    font-size: 14px;
    margin-bottom: 0;
}

/* ============================================================
   Guía de Trámites y Servicios (entidad/guia_tramites, entidad/guia)
   ============================================================
   IMPORTANTE: el contenido de cada guía (ebsa_guia_tramites_contenido) se
   edita en el CMS como HTML libre y ya trae escritas estas clases exactas
   (.question-item, su <ul>/<li>/<span> para pasos numerados, .note-details)
   -- son parte del contenido guardado en la base de datos, no de esta
   plantilla. Hay que conservar los mismos nombres de clase, solo se
   re-teatriza color/tipografía a la paleta del sitio.
   ============================================================ */

/* Título de la sección (listado de categorías) */
main#contenido-principal.ebsa-internal-page .services-title.transparency-title {
    text-align: left;
    padding-top: 0;
    padding-bottom: 20px;
}

main#contenido-principal.ebsa-internal-page .services-title h2 {
    color: #172540;
    font-weight: 700;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 32px;
}

/* Acordeón de categorías */
main#contenido-principal.ebsa-internal-page .accordion-area .accordion-item {
    background: #FFF;
    border: 0;
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(21, 29, 55, 0.06);
}

main#contenido-principal.ebsa-internal-page .accordion-area .accordion-button {
    box-shadow: none !important;
}

main#contenido-principal.ebsa-internal-page .accordion-area .accordion-item button {
    font-size: 18px;
    font-weight: 700;
    padding: 16px 24px;
    color: #172540;
}

main#contenido-principal.ebsa-internal-page .accordion-area .accordion-item button:not(.collapsed) {
    color: #FFF;
    background: #172540;
}

main#contenido-principal.ebsa-internal-page .accordion-area .accordion-item button:not(.collapsed) .icon-image {
    background: #FFF;
    border-radius: 50%;
}

main#contenido-principal.ebsa-internal-page .accordion-area .accordion-item button:hover {
    text-decoration: none;
    color: #FFC629 !important;
}

main#contenido-principal.ebsa-internal-page .icon-image {
    min-width: 50px;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    margin-right: 20px;
    border-radius: 50%;
    overflow: hidden;
    background: #F6F6F6;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Nivel 1 de la Guía de Trámites (categorías): ícono más grande y
   con más aire respecto del texto, más fácil de identificar de un
   vistazo que el resto de acordeones (más chicos) del sitio. */
main#contenido-principal.ebsa-internal-page .accordion-area .accordion-item button .icon-image {
    min-width: 64px;
    width: 64px;
    height: 64px;
    margin-right: 24px;
}

main#contenido-principal.ebsa-internal-page .icon-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

/* Listado de guías dentro de cada categoría */
main#contenido-principal.ebsa-internal-page .services-list-area {
    padding: 6px 20px 20px 20px;
}

main#contenido-principal.ebsa-internal-page .services-list-area ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

main#contenido-principal.ebsa-internal-page .services-list-area ul li {
    border-bottom: 1px solid #ECECEC;
}

main#contenido-principal.ebsa-internal-page .services-list-area ul li:last-child {
    border-bottom: 0;
}

main#contenido-principal.ebsa-internal-page .services-list-area ul li a {
    font-size: 15px;
    padding: 13px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #172540;
    font-weight: 500;
    border-radius: 8px;
    transition: 0.25s;
}

main#contenido-principal.ebsa-internal-page .services-list-area ul li a::after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #FFC629;
}

main#contenido-principal.ebsa-internal-page .services-list-area ul li a:hover {
    background: #F6F6F6;
    text-decoration: none !important;
    color: #172540;
    font-weight: 700;
}

/* ---------- Detalle de una guía (entidad/guia.php) ---------- */
main#contenido-principal.ebsa-internal-page .all-details-content {
    padding-top: 0;
}

main#contenido-principal.ebsa-internal-page .detail-content {
    background: #FFF;
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(21, 29, 55, 0.06);
}

main#contenido-principal.ebsa-internal-page .detail-content h2 {
    color: #172540;
    font-size: 30px;
    max-width: 100%;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    padding-left: 20px;
    border-left: 6px solid #FFC629;
    margin-bottom: 20px;
}

/* Pasos numerados (el contenido del CMS trae <ul><li><span>N</span>texto</li></ul>) */
main#contenido-principal.ebsa-internal-page .question-item {
    margin-bottom: 30px;
}

main#contenido-principal.ebsa-internal-page .question-item h3 {
    background: #F6F6F6;
    padding: 12px 24px 12px 18px;
    margin: 20px 0;
    color: #172540;
    font-size: 15px;
    font-weight: 700;
    border-radius: 0 20px 20px 0;
    display: inline-block;
}

main#contenido-principal.ebsa-internal-page .question-item ul {
    margin-top: 20px;
    list-style: none;
    padding: 0;
}

main#contenido-principal.ebsa-internal-page .question-item ul li {
    color: #43506B;
    font-size: 15px;
    line-height: 1.5;
    display: block;
    padding-left: 35px;
    position: relative;
    margin: 15px 0;
}

main#contenido-principal.ebsa-internal-page .question-item ul li ul {
    margin-top: 10px;
    padding-left: 33px;
}

main#contenido-principal.ebsa-internal-page .question-item ul li ul li {
    padding-left: 0 !important;
}

main#contenido-principal.ebsa-internal-page .question-item ul li span {
    background: #FFC629;
    color: #172540;
    font-weight: 700;
    min-width: 25px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
}

/* Cajas de nota destacada */
main#contenido-principal.ebsa-internal-page .note-details p {
    background: #FFF3D0;
    color: #6B5200;
    padding: 24px;
    border-radius: 10px;
    margin: 0;
}

/* Botón "Regresar al inicio de la guía" */
main#contenido-principal.ebsa-internal-page .return-button {
    float: left;
    margin-top: 30px;
}

main#contenido-principal.ebsa-internal-page .return-button img {
    width: 18px;
    height: 18px;
    transform: rotate(180deg);
    filter: brightness(0) invert(1);
}

main#contenido-principal.ebsa-internal-page .return-button a {
    background: #172540;
    padding: 10px 26px;
    border-radius: 30px;
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.25s;
}

main#contenido-principal.ebsa-internal-page .return-button a:hover {
    background: #FFC629;
    color: #172540;
}

main#contenido-principal.ebsa-internal-page .return-button a:hover img {
    filter: none;
}

/* ============================================================
   Sede Electrónica (sede_electronica/sede_electronica.php)
   ============================================================ */

/* Cada ícono trae un <lottie-player> Y una <img> con el mismo archivo como
   respaldo (por si lottie-player.js no carga) — sin una regla que oculte
   uno de los dos, los dos se mostraban al tiempo, uno encima/al lado del
   otro ("conflicto" de íconos). Dejamos la animación y ocultamos el <img>. */
main#contenido-principal.ebsa-internal-page .online-services-item a lottie-player,
main#contenido-principal.ebsa-internal-page .bil-invoice-item lottie-player,
main#contenido-principal.ebsa-internal-page .bill-image lottie-player {
    display: block;
    margin: 0 auto;
}

main#contenido-principal.ebsa-internal-page .online-services-item a lottie-player + img,
main#contenido-principal.ebsa-internal-page .bil-invoice-item lottie-player + img,
main#contenido-principal.ebsa-internal-page .bill-image lottie-player + img {
    display: none !important;
}

/* Tamaños de ícono por contexto: tarjetas de categoría (grid principal)
   más grandes que los ítems dentro del modal, y el ícono del detalle
   (columna propia, más aire) el más grande de los tres. */
main#contenido-principal.ebsa-internal-page .online-services-item a lottie-player {
    width: 100%;
    max-width: 220px;
    height: 190px;
}

main#contenido-principal.ebsa-internal-page .bil-invoice-item lottie-player {
    width: 110px;
    height: 110px;
}

main#contenido-principal.ebsa-internal-page .bill-image lottie-player {
    width: 160px;
    height: 160px;
}

/* Tarjetas de categorías (grid principal): panel claro que agrupa
   toda la grilla, separándola del resto de la página. */
main#contenido-principal.ebsa-internal-page .online-service-area .container {
    background: #F8F9FC;
    border-radius: 28px;
    padding: 44px 40px 50px 40px;
}

main#contenido-principal.ebsa-internal-page .online-service-title.transparency-title {
    text-align: left;
    padding-bottom: 6px;
}

main#contenido-principal.ebsa-internal-page .online-service-title h2 {
    color: #172540;
    font-weight: 700;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 30px;
    position: relative;
    padding-bottom: 16px;
}

main#contenido-principal.ebsa-internal-page .online-service-title h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: #FFC629;
}

/* Estructura tipo "mockup" (ebsa_v2): ilustración grande arriba + un
   globo con borde y triangulito apuntando hacia el ícono, texto a la
   izquierda dentro del globo (título en negrita + descripción). Las
   burbujas de una misma fila se emparejan en alto (flex) para que no
   queden desalineadas cuando un texto es más largo que otro. */
main#contenido-principal.ebsa-internal-page .online-service-area .row {
    display: flex;
    flex-wrap: wrap;
}

main#contenido-principal.ebsa-internal-page .online-services-item {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100% - 34px);
}

main#contenido-principal.ebsa-internal-page .online-services-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

main#contenido-principal.ebsa-internal-page .online-services-item a lottie-player {
    transition: transform 0.25s;
}

main#contenido-principal.ebsa-internal-page .online-services-item:hover a lottie-player {
    transform: translateY(-4px) scale(1.03);
}

main#contenido-principal.ebsa-internal-page .online-services-content {
    background: #FFF;
    border: 2px solid #DADFE8;
    border-radius: 20px;
    padding: 22px 26px;
    position: relative;
    margin-top: 26px;
    text-align: left;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

main#contenido-principal.ebsa-internal-page .online-services-content::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 14px solid #DADFE8;
    transition: border-bottom-color 0.25s;
}

main#contenido-principal.ebsa-internal-page .online-services-content::after {
    content: '';
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 11px solid #FFF;
}

main#contenido-principal.ebsa-internal-page .online-services-item:hover .online-services-content {
    border-color: #172540;
    box-shadow: 0 12px 28px rgba(21, 29, 55, 0.14);
    transform: translateY(-4px);
}

main#contenido-principal.ebsa-internal-page .online-services-item:hover .online-services-content::before {
    border-bottom-color: #172540;
}

main#contenido-principal.ebsa-internal-page .online-services-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #172540;
    padding-bottom: 8px;
    font-family: 'Josefin Sans', sans-serif;
}

main#contenido-principal.ebsa-internal-page .online-services-content p {
    color: #43506B;
    font-size: 14px;
    margin: 0;
}

/* Modales (categoría y detalle de trámite) */
main#contenido-principal.ebsa-internal-page .online-services-modal .container {
    padding: 0;
    background: transparent;
}

main#contenido-principal.ebsa-internal-page .online-services-modal .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
}

main#contenido-principal.ebsa-internal-page .modal-header.modal-servicios {
    background: #172540;
    border: 0;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

main#contenido-principal.ebsa-internal-page .modal-header.modal-servicios a {
    color: #FFF;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

main#contenido-principal.ebsa-internal-page .modal-header.modal-servicios a:hover {
    color: #FFC629;
    font-weight: 600;
    text-decoration: none;
}

/* El botón trae la X propia de Bootstrap (fondo, SVG data-uri) Y un <img>
   (close.svg, un círculo con X) adentro — se veían las dos superpuestas.
   Apagamos la X de Bootstrap y dejamos solo el ícono propio, coloreado
   de blanco (el SVG es negro por defecto) para que se vea sobre el navy. */
main#contenido-principal.ebsa-internal-page .modal-header.modal-servicios .btn-close {
    background-image: none;
    opacity: 1;
    margin: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

main#contenido-principal.ebsa-internal-page .modal-header.modal-servicios .btn-close img {
    width: 22px;
    height: 22px;
    filter: invert(1) grayscale(100%) brightness(200%);
}

main#contenido-principal.ebsa-internal-page .factura-title {
    padding: 24px 24px 0 24px;
}

main#contenido-principal.ebsa-internal-page .factura-title h2 {
    color: #172540;
    font-size: 26px;
    font-weight: 700;
    font-family: 'Josefin Sans', sans-serif;
    padding-bottom: 6px;
}

main#contenido-principal.ebsa-internal-page .factura-title p {
    color: #43506B;
}

main#contenido-principal.ebsa-internal-page .bils-incovice-area {
    padding: 15px 24px 24px 24px;
}

main#contenido-principal.ebsa-internal-page .bil-invoice-item {
    margin: 20px 0;
    text-align: center;
}

main#contenido-principal.ebsa-internal-page .bil-invoice-item a {
    display: block;
}

main#contenido-principal.ebsa-internal-page .bil-invoice-item p {
    color: #172540;
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
}

main#contenido-principal.ebsa-internal-page .bil-invoice-item:hover p {
    color: #FFC629;
}

main#contenido-principal.ebsa-internal-page .invoice-descriptions-list ul {
    list-style: none;
    padding: 0;
}

main#contenido-principal.ebsa-internal-page .invoice-descriptions-list ul li {
    font-size: 15px;
    margin-bottom: 16px;
    padding-left: 28px;
    position: relative;
    color: #43506B;
}

main#contenido-principal.ebsa-internal-page .invoice-descriptions-list ul li::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    left: 4px;
    top: 8px;
    background: #FFC629;
    border-radius: 50%;
}

main#contenido-principal.ebsa-internal-page .check-invoice-button {
    padding-top: 16px;
    padding-bottom: 20px;
}

main#contenido-principal.ebsa-internal-page .check-invoice-button a {
    display: inline-block;
    background: #172540;
    padding: 10px 32px;
    border-radius: 30px;
    font-size: 14px;
    color: #FFF;
    font-weight: 600;
    transition: 0.25s;
}

main#contenido-principal.ebsa-internal-page .check-invoice-button a:hover {
    background: #FFC629;
    color: #172540;
}

main#contenido-principal.ebsa-internal-page .invoice-descriptions {
    background: #F6F6F6;
    padding: 20px;
    border-radius: 10px;
    margin-top: 10px;
}

main#contenido-principal.ebsa-internal-page .invoice-descriptions p {
    margin: 0;
    color: #43506B;
}

/* ============================================================
   Contenido enriquecido del CMS (.pagina / .tab-pane): sin esta regla,
   el reset general "ul{list-style:none}" del framework quita las viñetas
   y numeración a las listas que los editores crean en el WYSIWYG.
   ============================================================ */
main#contenido-principal.ebsa-internal-page .pagina ul,
main#contenido-principal.ebsa-internal-page .tab-pane ul {
    padding-left: 2rem !important;
}

main#contenido-principal.ebsa-internal-page .pagina ul li,
main#contenido-principal.ebsa-internal-page .tab-pane ul li {
    list-style: initial !important;
}

main#contenido-principal.ebsa-internal-page .pagina ol li,
main#contenido-principal.ebsa-internal-page .tab-pane ol li {
    list-style: decimal !important;
    margin-left: 2rem;
}

main#contenido-principal.ebsa-internal-page .pagina h2,
main#contenido-principal.ebsa-internal-page .tab-pane h2 {
    color: #172540;
    font-size: 23px;
    font-weight: 700;
    font-family: 'Josefin Sans', sans-serif;
}

/* ============================================================
   Micrositios (micrositios.php)
   ============================================================ */
main#contenido-principal.ebsa-internal-page .nav-micrositio {
    background: #FFF;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 20px rgba(21, 29, 55, 0.06);
}

main#contenido-principal.ebsa-internal-page .nav-micrositio button,
main#contenido-principal.ebsa-internal-page .nav-micrositio .nav-link {
    background: #F6F6F6;
    font-size: 15px;
    color: #172540;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 16px;
    position: relative;
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
    border: 0;
    border-radius: 8px;
}

main#contenido-principal.ebsa-internal-page .nav-micrositio button:hover,
main#contenido-principal.ebsa-internal-page .nav-micrositio .nav-link:hover {
    color: #172540 !important;
    text-decoration: none !important;
    background: #EDEDED;
}

main#contenido-principal.ebsa-internal-page .nav-micrositio .nav-link.active,
main#contenido-principal.ebsa-internal-page .nav-micrositio button.nav-link.active {
    background: #172540 !important;
    color: #FFF !important;
}

main#contenido-principal.ebsa-internal-page .nav-micrositio .nav-link.nivel3 {
    padding-left: 30px;
    font-size: 14px;
}

main#contenido-principal.ebsa-internal-page #v-pills-tabContent {
    background: #FFF;
    border-radius: 14px;
    padding: 30px !important;
    box-shadow: 0 4px 20px rgba(21, 29, 55, 0.06);
}

/* ============================================================
   Participación Ciudadana (participa/participacion.php, temas_participacion.php)
   ============================================================ */

/* Tema destacado (tarjeta grande, imagen a un lado) */
main#contenido-principal.ebsa-internal-page .full-post-content.row {
    padding: 20px 0 50px 0;
    align-items: center;
}

main#contenido-principal.ebsa-internal-page .full-post-content .post-single-item.noticias-single-item {
    background: #FFF;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(21, 29, 55, 0.08);
    position: relative;
    margin: 0;
}

main#contenido-principal.ebsa-internal-page .full-single-content h2 {
    padding: 0;
    -webkit-line-clamp: initial;
    display: block;
}

main#contenido-principal.ebsa-internal-page .full-single-content h2 a {
    text-align: left;
    display: block;
}

main#contenido-principal.ebsa-internal-page .full-single-content p {
    text-align: left;
    color: #43506B;
}

main#contenido-principal.ebsa-internal-page .full-post-image {
    position: relative;
}

main#contenido-principal.ebsa-internal-page .full-post-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(21, 29, 55, 0.08);
}

/* Fecha de inicio/fin */
main#contenido-principal.ebsa-internal-page .date-count ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin-top: 16px;
    padding: 0;
    list-style: none;
}

main#contenido-principal.ebsa-internal-page .date-count ul li {
    color: #43506B;
    font-size: 13px;
}

main#contenido-principal.ebsa-internal-page .date-count ul li b {
    color: #172540;
}

/* Botón "Participa" */
main#contenido-principal.ebsa-internal-page .read-more-button {
    text-align: left;
}

main#contenido-principal.ebsa-internal-page .read-more-button a {
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    background: #172540;
    padding: 8px 26px;
    border-radius: 30px;
    margin-top: 16px;
    display: inline-block;
    transition: 0.25s;
}

main#contenido-principal.ebsa-internal-page .read-more-button a:hover {
    background: #FFC629;
    color: #172540;
}

/* Contador de participantes/comentarios */
main#contenido-principal.ebsa-internal-page .comments-participantes-area {
    margin-top: 16px;
}

main#contenido-principal.ebsa-internal-page .comment-participantes-area {
    background: #F6F6F6;
    padding: 8px 16px;
    border-radius: 30px;
    display: inline-block;
}

main#contenido-principal.ebsa-internal-page .comment-participantes-area ul {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

main#contenido-principal.ebsa-internal-page .comment-participantes-area ul li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #172540;
    font-size: 13px;
    font-weight: 600;
}

main#contenido-principal.ebsa-internal-page .comment-participantes-area ul li i {
    color: #FFC629;
}

main#contenido-principal.ebsa-internal-page .sigle-comment-participantes.comment-participantes-area {
    background: transparent;
    padding: 10px 0;
    border-bottom: 1px solid #ECECEC;
    border-radius: 0;
    display: block;
}

/* Tarjetas chicas de la grilla ("Ver todos los temas"): el título, las
   fechas y el contador quedaban pegados al borde de la tarjeta porque
   son hijos directos de .noticias-single-item (esa clase solo trae
   padding cuando el contenido está envuelto en .noticias-single-item-
   -body, que acá no existe) — se veían sin aire y descuadrados. Se
   agrega padding horizontal a cada bloque de texto y se fija el
   contador de participantes/comentarios al fondo (flex) para que las
   tarjetas de una misma fila queden parejas aunque el título sea más
   largo en una que en otra. La tarjeta destacada (.full-single-content)
   ya tiene su propio padding de 30px y queda afuera de esta regla. */
main#contenido-principal.ebsa-internal-page .post-single-item.noticias-single-item:not(.full-single-content) {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 8px;
}

main#contenido-principal.ebsa-internal-page .post-single-item.noticias-single-item:not(.full-single-content) > h2 {
    padding: 16px 18px 0 18px;
    margin: 0;
}

main#contenido-principal.ebsa-internal-page .post-single-item.noticias-single-item:not(.full-single-content) > .date-count,
main#contenido-principal.ebsa-internal-page .post-single-item.noticias-single-item:not(.full-single-content) > .sigle-comment-participantes {
    padding-left: 18px;
    padding-right: 18px;
}

main#contenido-principal.ebsa-internal-page .post-single-item.noticias-single-item:not(.full-single-content) > .sigle-comment-participantes {
    margin-top: auto;
    border-bottom: 0;
}

/* Etiqueta "Finalizado" sobre la imagen */
main#contenido-principal.ebsa-internal-page .ax-news-participacion_status {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: rgba(23, 37, 64, 0.75);
    border-radius: 0 0 14px 14px;
}

main#contenido-principal.ebsa-internal-page .ax-news-participacion_status p {
    font-size: 14px;
    color: #FFF;
    margin: 10px auto;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ---------- Detalle de un tema (participa/temas_participacion.php) ---------- */
main#contenido-principal.ebsa-internal-page .single-content {
    background: #FFF;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(21, 29, 55, 0.06);
}

main#contenido-principal.ebsa-internal-page .post-title {
    padding-bottom: 10px;
    border-bottom: 1px solid #ECECEC;
}

main#contenido-principal.ebsa-internal-page .post-title h2 {
    color: #172540;
    font-size: 28px;
    font-weight: 700;
    font-family: 'Josefin Sans', sans-serif;
    text-align: left;
}

main#contenido-principal.ebsa-internal-page .single-post-count ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    padding: 15px 0;
    border-bottom: 1px solid #ECECEC;
    margin: 0;
    list-style: none;
}

main#contenido-principal.ebsa-internal-page .single-post-count ul li {
    display: flex;
    align-items: center;
    color: #43506B;
    font-size: 14px;
    font-weight: 600;
}

main#contenido-principal.ebsa-internal-page .single-post-count ul li i {
    color: #FFC629;
    margin-right: 8px;
}

main#contenido-principal.ebsa-internal-page .tags-list a {
    color: #172540;
    font-size: 13px;
    font-weight: 700;
    background: #FFF3D0;
    padding: 6px 16px;
    margin-top: 15px;
    border-radius: 20px;
    display: inline-block;
}

main#contenido-principal.ebsa-internal-page .post-image {
    position: relative;
}

main#contenido-principal.ebsa-internal-page .post-image img {
    width: 100%;
    border-radius: 16px;
}

main#contenido-principal.ebsa-internal-page .post-mobile-image {
    display: none;
    width: 100%;
    border-radius: 16px;
    margin-top: 12px;
}

/* Tabs de detalle (Descripción / Resultados / Análisis) */
main#contenido-principal.ebsa-internal-page .single-content-area {
    margin-top: 10px;
}

main#contenido-principal.ebsa-internal-page .single-content-area h3 {
    color: #172540;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 10px;
}

main#contenido-principal.ebsa-internal-page .single-content-area .tab-content {
    padding: 25px 0 0 0;
}

main#contenido-principal.ebsa-internal-page .ax-todos-participacion {
    position: relative;
    max-width: 100%;
    background: #F6F6F6;
    border-radius: 14px;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
}

main#contenido-principal.ebsa-internal-page .ax-todos-participacion a {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #FFF;
    background: #172540;
    padding: 8px 22px;
    border-radius: 20px;
    margin-top: 12px;
    transition: 0.25s;
}

main#contenido-principal.ebsa-internal-page .ax-todos-participacion a:hover {
    background: #FFC629;
    color: #172540;
}

/* Comentarios */
main#contenido-principal.ebsa-internal-page .comment-title {
    margin-top: 30px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ECECEC;
}

main#contenido-principal.ebsa-internal-page .comment-title h2 {
    color: #172540;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

main#contenido-principal.ebsa-internal-page .comments-single-item {
    background: #F6F6F6;
    border-radius: 12px;
    padding: 20px;
    margin-top: 10px;
    position: relative;
}

main#contenido-principal.ebsa-internal-page .comments-single-item h3 {
    font-size: 16px;
    color: #172540;
    padding-bottom: 0 !important;
}

main#contenido-principal.ebsa-internal-page .comments-single-item h3 a {
    color: #172540;
}

main#contenido-principal.ebsa-internal-page .comments-single-item span {
    font-size: 13px;
    color: #7F8080;
    padding: 0 0 10px 0;
    display: block;
}

main#contenido-principal.ebsa-internal-page .comments-single-item p {
    padding: 0 0 20px 0;
    margin: 0;
    color: #43506B;
}

main#contenido-principal.ebsa-internal-page .comments-single-item i {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #FFC629 !important;
    font-size: 20px;
}

/* ============================================================
   Formularios genéricos con .form-group (contacto, encuestas,
   formulario_facturas, formulario_participacion, hv, etc.)
   ============================================================
   `.form-group` era de Bootstrap 4 (traía `margin-bottom` incluido);
   el sitio corre Bootstrap 5, que eliminó esa clase por completo —
   sigue escrita en las vistas pero ya no hace nada, así que todos
   los campos de estos formularios quedaban pegados uno con otro sin
   ningún espaciado. */
main#contenido-principal.ebsa-internal-page .form-group {
    margin-bottom: 20px;
}

main#contenido-principal.ebsa-internal-page .form-group .control-label,
main#contenido-principal.ebsa-internal-page .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #172540;
    margin-bottom: 6px;
}

main#contenido-principal.ebsa-internal-page .form-check {
    margin-bottom: 14px;
}

main#contenido-principal.ebsa-internal-page .form-control {
    padding: 10px 14px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
}

main#contenido-principal.ebsa-internal-page .form-control:focus {
    border-color: #172540;
    box-shadow: 0 0 0 3px rgba(23, 37, 64, 0.12);
}

/* Formulario de comentario (inputs sin .form-control) */
main#contenido-principal.ebsa-internal-page .comment-form {
    margin-top: 30px;
}

main#contenido-principal.ebsa-internal-page .comment-form h4 {
    font-size: 18px;
    font-weight: 700;
    color: #172540;
    padding-bottom: 10px;
}

main#contenido-principal.ebsa-internal-page .comment-form form {
    background: #F6F6F6;
    border-radius: 14px;
    padding: 24px;
    max-width: 600px;
}

main#contenido-principal.ebsa-internal-page .comment-form label,
main#contenido-principal.ebsa-internal-page .input-item label {
    font-size: 14px;
    color: #172540;
    font-weight: 600;
    padding-bottom: 6px;
    display: block;
}

main#contenido-principal.ebsa-internal-page .input-item input,
main#contenido-principal.ebsa-internal-page .message-item textarea {
    width: 100%;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Josefin Sans', sans-serif;
}

main#contenido-principal.ebsa-internal-page .input-item input {
    height: 45px;
}

main#contenido-principal.ebsa-internal-page .input-item {
    margin-bottom: 14px;
}

main#contenido-principal.ebsa-internal-page .message-item textarea {
    height: 120px;
}

main#contenido-principal.ebsa-internal-page .comment-form .form-check {
    margin: 14px 0 !important;
}

main#contenido-principal.ebsa-internal-page .submit-button input {
    color: #FFF;
    font-size: 15px;
    font-weight: 600;
    background: #172540;
    border: 0;
    padding: 10px 30px;
    border-radius: 30px;
    display: inline-block;
    transition: 0.25s;
}

main#contenido-principal.ebsa-internal-page .submit-button input:hover {
    background: #FFC629;
    color: #172540;
}

@media (max-width: 767px) {
    main#contenido-principal.ebsa-internal-page .post-mobile-image {
        display: block;
    }

    main#contenido-principal.ebsa-internal-page .single-post-content .col-lg-6:last-child .post-image {
        display: none;
    }
}

/* ============================================================
   Oficinas y Horarios de Atención (oficinas.php)
   ============================================================ */
/* Leaflet necesita que su contenedor tenga una altura explícita, si no
   el mapa colapsa a 0px y queda invisible. */
main#contenido-principal.ebsa-internal-page #map {
    height: 420px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
    z-index: 1;
}

/* ============================================================
   Detalle de noticia (ver_noticia.php) y de galería (ver_galeria.php)
   ============================================================ */
main#contenido-principal.ebsa-internal-page .date-print-area {
    display: flex;
    justify-content: space-between;
    color: #7F8080;
    font-size: 14px;
    margin-bottom: 16px;
}

main#contenido-principal.ebsa-internal-page .date-print-area i {
    color: #FFC629;
    margin-right: 6px;
}

main#contenido-principal.ebsa-internal-page .news-gallery.post-gallery-images-area img {
    width: 100%;
    border-radius: 14px;
}

main#contenido-principal.ebsa-internal-page .archive-area span {
    color: #7F8080;
    font-size: 13px;
    font-style: italic;
}

main#contenido-principal.ebsa-internal-page .tag-area {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #ECECEC;
}

main#contenido-principal.ebsa-internal-page .tag-item i {
    color: #FFC629;
    margin-right: 8px;
}

main#contenido-principal.ebsa-internal-page .tag-item .badge {
    background: #F6F6F6 !important;
    color: #172540;
    font-weight: 500;
    margin-right: 4px;
}

/* Sidebar "Noticias relacionadas" / "Suscribirse a los boletines" (reusa
   el panel .informate-menu ya escopado) */
main#contenido-principal.ebsa-internal-page .latest-news-all-area {
    margin-top: 6px;
}

main#contenido-principal.ebsa-internal-page .news-single-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-top: 16px;
    border-top: 1px solid #ECECEC;
}

main#contenido-principal.ebsa-internal-page .news-single-item:first-child {
    padding-top: 0;
    border-top: 0;
}

main#contenido-principal.ebsa-internal-page .news-images {
    display: flex;
    width: 54px;
    min-width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
}

main#contenido-principal.ebsa-internal-page .news-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

main#contenido-principal.ebsa-internal-page .news-title h3 {
    color: #172540;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

main#contenido-principal.ebsa-internal-page .news-title h3 a {
    color: #172540;
}

main#contenido-principal.ebsa-internal-page .news-title h3 a:hover {
    color: #FFC629;
}

main#contenido-principal.ebsa-internal-page .news-title span {
    color: #7F8080;
    font-size: 12px;
}

main#contenido-principal.ebsa-internal-page .news-title span i {
    color: #FFC629;
    margin-right: 6px;
}

/* Formulario de suscripción a boletines (input sin .form-control) */
main#contenido-principal.ebsa-internal-page .informate-menu .form-group input {
    width: 100%;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Josefin Sans', sans-serif;
}

/* Grilla tipo mosaico de ver_galeria.php */
main#contenido-principal.ebsa-internal-page .grid-gallery {
    display: grid;
    grid-auto-rows: 200px;
    gap: 1rem;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(1, 1fr);
}

@media all and (min-width: 768px) {
    main#contenido-principal.ebsa-internal-page .grid-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media all and (min-width: 1024px) {
    main#contenido-principal.ebsa-internal-page .grid-gallery {
        grid-template-columns: repeat(6, 1fr);
    }
}

main#contenido-principal.ebsa-internal-page .grid-gallery__item {
    border-radius: 10px;
    overflow: hidden;
    display: block;
}

main#contenido-principal.ebsa-internal-page .grid-gallery__item:nth-child(11n+4) {
    grid-column: span 2;
}

main#contenido-principal.ebsa-internal-page .grid-gallery__item:nth-child(11n+6) {
    grid-column: span 3;
}

main#contenido-principal.ebsa-internal-page .grid-gallery__item:nth-child(11n+7) {
    grid-row: span 2;
}

main#contenido-principal.ebsa-internal-page .grid-gallery__item:nth-child(11n+8) {
    grid-column: span 2;
    grid-row: span 2;
}

main#contenido-principal.ebsa-internal-page .grid-gallery__item:nth-child(11n+9) {
    grid-row: span 3;
}

main#contenido-principal.ebsa-internal-page .grid-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

main#contenido-principal.ebsa-internal-page .grid-gallery__item:hover .grid-gallery__image {
    transform: scale(1.05);
}