/*
Theme Name: Hospital Pitalito
Theme URI: https://hospitalpitalito.gov.co
Author: Jose Toquica - Jhon Mazabel
Description: Tema personalizado para el Hospital Departamental San Antonio de Pitalito
Version: 1.0
Text Domain: hospital-pitalito
*/


/* Sobrescribir los colores principales de Bootstrap */
:root {
    --bs-primary: #28166E !important;
    --bs-secondary: #FB8E0F !important;
    --bs-danger: #F35544 !important;
    --bs-body-font-family: 'Roboto', sans-serif;
}

/* Tus propias variables */
:root {
    --color-blanco: #fff;
    --color-negro: #000;
    --color-fondo: #f8f9fa;
    /* --color-primario: #28166E; */
    /* --color-primario: #354C9C; */
    --color-primario: #3C5CC0;
    --color-secundario: #FB8E0F;
    --color-terciario: #F35544;
    --color-quaternario: #4561c5;

    --font-titulo: 'Poppins', sans-serif;
    --font-texto: 'Roboto', sans-serif;
}

body {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    font-family: var(--font-texto);
    background-color: var(--color-fondo);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titulo);
    font-weight: 600;
}

/* Backgrounds */
.bg-primary {
    background-color: var(--color-primario) !important;
}

.bg-secondary {
    background-color: var(--color-secundario) !important;
}

.bg-terciary {
    background-color: var(--color-terciario) !important;
}

.bg-quaternary {
    background-color: var(--color-quaternario) !important;
}

/* Text */
.text-primary {
    color: var(--color-primario) !important;
}

.text-secondary {
    color: var(--color-secundario) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

.btn-primary:hover {
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
}

.btn-secondary {
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
}

.btn-secondary:hover {
    background-color: var(--color-terciario);
    border-color: var(--color-terciario);
}

a {
    text-decoration: none;
}

.site-logo {
    max-width: 140px;
    width: 100%;
}

.main-menu li {
    text-align: center;
}

.nav-link {
    color: var(--color-blanco);
    transition: all 0.3s ease-in-out;
}

.nav-link:hover {
    font-weight: 600;
    color: var(--color-secundario);
    transform: scale(1.001);
}

.main-menu .current_page_item {
    border-bottom: 3px solid var(--color-secundario);
}

.enlace-transparencia {
    color: var(--color-blanco);
    transition: all 0.3s ease-in-out;
}

.enlace-transparencia:hover img {

}

.enlace-transparencia:hover {
    font-weight: 500;
    transform: scale(1.001);
}

#site-search:focus {
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 0.25rem var(--color-secundario);
}

/* Front Page */
/* Card general */
.soluciones-card {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease-in-out;
}

.servicios-card {
    transition: all 0.3s ease-in-out;
}

.soluciones-card:hover,
.servicios-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.soluciones-card:hover .soluciones-icon i {
    color: var(--color-secundario);
}

.soluciones-title,
.servicios-title {
    color: var(--color-primario);
}

.soluciones-card:hover .soluciones-title,
.servicios-card:hover .servicios-title {
    color: var(--color-secundario);
}

/* Ícono */
.soluciones-icon {
    width: 60px;
    height: 60px;
    background-color: #e7ebf9; /* fondo suave */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.soluciones-icon i {
    font-size: 2.4rem;
    color: var(--color-primario);
}

.placeholder-icon {
    width: 30px;
    height: 30px;
    background-color: #ccc;
    border-radius: 50%;
}

.card-img {
    width: 100%;
    height: 100%;
    max-height: 240px;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Hero Swiper */
.heroSwiper {
    width: 100%;
}

.heroSwiper .swiper-slide a {
    width: 100%;
    height: 100%;
    display: block;
}

.heroSwiper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
}

.heroSwiper .swiper-button-prev,
.heroSwiper .swiper-button-next {
    --swiper-theme-color: var(--color-blanco);
    --swiper-navigation-size: 20px;
    background-color: rgba(0, 0, 0, 0.6) !important;
    height: 70px;
    width: 50px;
    margin-top: -35px;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 50%;
}

.heroSwiper .swiper-button-prev {
    border-radius: 0 65px 65px 0;
    left: -10px
}

.heroSwiper .swiper-button-next {
    border-radius: 65px 0 0 65px;
    right: -10px
}

@media (min-width: 992px) {
    .heroSwiper:hover .swiper-button-prev,
    .heroSwiper:hover .swiper-button-next {
        opacity: 1;
    }
}

.heroSwiper .swiper-pagination {
    --swiper-pagination-color: var(--color-primario);
    --swiper-pagination-bullet-inactive-opacity: 0.3;
}

.heroSwiper .swiper-pagination-bullet {
    box-shadow: 0 0 0 2px var(--color-blanco);
}

/* Footer */
/* Links del footer: mejor contraste sobre bg oscuro */
footer a { 
    color: var(--color-secundario);
    text-decoration: none;
}

footer a:hover { 
    color: #ffd199; 
    text-decoration: underline; 
}

/* Links interactivos accesibles con teclado */
footer a:focus-visible {
    outline: 2px dashed #fff;
    outline-offset: 2px;
}

/* Menú del footer */
.footer-menu li { 
    margin-bottom: .5rem;
}

.footer-menu li:last-of-type { 
    margin-bottom: 0; 
}

/* Redes sociales – hover suave + hit area */
footer .redes-sociales a { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 36px; 
    height: 36px; 
}

footer .redes-sociales img { 
    transition: transform .2s ease-in-out; 
}

footer .redes-sociales img:hover { 
    transform: scale(1.1); 
}

/* Tipografía secundaria más tenue para textos largos */
.text-light-50 { 
    color: rgba(255,255,255,.7); 
}

.enlace-transparencia:hover { opacity: 1 !important; }

/* Ubicación y líneas de atención */
/* Altura responsiva del mapa */
/* Altura responsiva opcional si prefieres vh en móviles */
.leaflet-map {
    border-radius: 5px;
}

@media (max-width: 576px){
    .leaflet-map { 
        height: 300px !important; 
    }
}

/* Ajustes visuales opcionales */
.ubicacion-y-lineas .card {
    border: 0;
}

.ubicacion-y-lineas .card-body a {
    color: var(--color-secundario); 
}

.ubicacion-y-lineas .card-body a:hover { 
    color: var(--color-terciario); 
    text-decoration: underline; 
}

/* FAQ */
/* Espaciado sutil entre acordeones de categorías */
.accordion .accordion-item + .accordion-item { 
    margin-top: .5rem; 
}

/* Cabecera de categoría */
.accordion .accordion-button {
    font-weight: 600;
}

.accordion .accordion-button:not(.collapsed) {
    background-color: #f0f2f8; /* tono claro */
}

/* Cuerpo de categoría */
.accordion-body .accordion .accordion-item {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: .5rem;
}

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

/* Consistencia con tu paleta */
.accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(53,76,156,.25); /* #354C9C */
}

.img-faq {
    display: block;
    margin: 0 auto;
    max-height: 600px;
}


/* Sitios relacionados */
/* Tarjeta/área del logo */
.related-logo {
    background: #fff;
    min-height: 100px;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 1px 8px rgba(0,0,0,.04);
}

.related-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Imagen del logo */
.related-logo img {
    max-height: 64px;
    width: 100%;
    object-fit: contain;
    filter: grayscale(10%);
    opacity: .95;
    transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}

.related-logo:hover img {
    transform: scale(1.02);
    filter: none;
    opacity: 1;
}

#sitios-relacionados .swiper-pagination-bullet {
    background: var(--color-primario);
    opacity: .35;
}

#sitios-relacionados .swiper-pagination-bullet-active {
    opacity: 1;
}

/* Alturas mayores en desktop */
@media (min-width: 992px) {
    .related-logo { 
        min-height: 120px; 
    }

    .related-logo img { 
        max-height: 72px; 
    }
}

.related-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Blog */
/* Imagen de card: alto fijo + cover */
.blog-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    background-color: #f4f4f6; /* fallback cuando no hay imagen */
}

/* Recorte de extracto a 2-3 líneas (según ancho) */
.blog-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Paginación Bootstrap coherente con tu paleta */
.pagination .page-link {
    color: var(--color-primario);
}

.pagination .page-item.active .page-link {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(53,76,156,.25);
}

/* Blog */
.blog-card .card-title a {
    color: var(--color-primario);
}

.blog-card .card-title a:hover {
    color: var(--color-secundario);
}

.blog-card .badge {
    font-weight: 500;
    font-size: 0.875rem;
    background-color: var(--color-primario) !important;
}

.blog-card .badge:hover {
    background-color: var(--color-secundario) !important;
}

.pagination .page-item.active .page-link {
    color: var(--color-blanco);
}

/* Formulario de Contacto */
div.wpforms-container-full {
    margin: 0 auto;
    max-width: 800px;
}

div.wpforms-container-full button[type=submit] {
    width: 100%;
    background-color: var(--color-primario) !important;
}

/* Single - Entradas */
/* Tipografía y lectura del artículo */
.lead-article p { 
    line-height: 1.75; 
    margin-bottom: 1.1rem; 
}

.lead-article img { 
    height: auto; 
    max-width: 100%; 
    border-radius: .5rem; 
}

.lead-article figure { 
    margin: 1.2rem 0; 
}

.single-hero img { 
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: cover; 
}

@media (min-width: 772px) {
    .single-hero img {
        max-width: 70%;
    }
}

/* Navegación anterior/siguiente */
.post-nav a { 
    text-decoration: none; 
}

.post-nav .prev a, .post-nav .next a { 
    color: var(--color-primario); 
}

.post-nav .prev a:hover, .post-nav .next a:hover { 
    text-decoration: underline; 
}

/* Acordeón de Transparencia */
.transp-accordion .accordion-button { 
    font-weight: 600; 
}

.transp-accordion .accordion-button:not(.collapsed) {
    background-color: #f4f6fb; 
}

.transp-accordion .accordion-item + .accordion-item { 
    margin-top: .5rem; 
}

.transp-link { 
    color: var(--color-primario); 
    text-decoration: none; 
}

.transp-link:hover { 
    color: var(--color-terciario); 
    text-decoration: underline; 
}

/* Sección Participa */
.participa-card a {
    background-color: var(--color-blanco) !important;
    transition: transform 0.2s ease;
}

.participa-card:hover a {
    transform: translateY(-4px);
    text-decoration: none;
}

.participa-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primario);
}

/* Ícono de FontAwesome */
.participa-card i {
    font-size: 2.4rem;
    margin-bottom: 1rem;
    color: var(--color-primario);
}

.participa-card:hover i,
.participa-card:hover .participa-title {
    color: var(--color-secundario);
}

/* Atención al Usuario */
.atencion-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 12px;
    text-decoration: none;
    background: #fff;
    padding: 1rem;
}

.atencion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.25rem rgba(0,0,0,0.1);
}

.atencion-card:hover .atencion-icon i,
.atencion-card:hover .card-title {
    color: var(--color-secundario) !important;
}

.atencion-icon i {
    font-size: 2rem;
    color: var(--color-primario);
}

.atencion-card .card-title {
    color: var(--color-primario) !important;
}

/* Institucional */
.institucional-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 12px;
    text-decoration: none;
    background: #fff;
    padding: 1rem;
}

.institucional-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.25rem rgba(0,0,0,0.1);
}

.institucional-card:hover .institucional-icon i,
.institucional-card:hover .card-title {
    color: var(--color-secundario) !important;
}

.institucional-icon i {
    font-size: 2rem;
    color: var(--color-primario);
}

.institucional-card .card-title {
    color: var(--color-primario) !important;
}

/* Timeline */
.timeline-swiper .swiper-wrapper {
    align-items: stretch;
}

.timeline-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.timeline-swiper .timeline-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.5rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.timeline-swiper .timeline-card .row {
    flex: 1;
    display: flex;
    align-items: stretch;
}

/* Hacer que las imágenes tengan altura fija para uniformidad */
.timeline-swiper .timeline-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 6px;
}

/* Estilos para el contenido */
.timeline-year {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-primario);
    margin-bottom: 0.5rem;
}

.timeline-content {
    margin-top: 0.75rem;
    line-height: 1.6;
    flex: 1;
}

.timeline .swiper-pagination-bullet-active {
    background: var(--color-primario) !important;
}

.mySwiperReconocimientos {
  padding-bottom: 50px !important; /* baja el padding de la paginación */
}

.mySwiperReconocimientos .swiper-pagination {
  bottom: 10px !important; /* baja el padding de la paginación */
}

.mySwiperReconocimientos .swiper-pagination-bullet {
    background: var(--color-primario) !important;
}

.mySwiperReconocimientos .card-title {
    display: -webkit-box; /* Necesario para -webkit-line-clamp */
    -webkit-box-orient: vertical; /* Oculta el texto que excede las 2 líneas */
    -webkit-line-clamp: 2; /* Limita el texto a 2 líneas */
    overflow: hidden; /* Asegura que el texto no se muestre si excede la altura */
    text-overflow: ellipsis; /* Muestra puntos suspensivos al final del texto */
}

.mySwiperReconocimientos .card-title a {
    color: var(--color-primario) !important;
}

.mySwiperReconocimientos .card-title:hover a {
    color: var(--color-secundario) !important;
}

.title-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* Máximo 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-menu a:focus-visible,
.main-menu button:focus-visible,
.main-menu [role="button"]:focus-visible {
    outline: 2px dashed white !important;
    outline-offset: 2px !important;
}

.footer-logos img {
    width: 100%;
    max-width: 140px;
    max-height: 50px;
    object-fit: contain;
}

#sitios-relacionados .swiper-pagination-bullet {
    background: var(--color-blanco) !important;
}