html {
    position: relative;
    font-size: 14px;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

main {

    padding-top: 80px; /* Ajustar según la altura del navbar */
}


/* Asegurar que el footer no se sobreponga */
footer {
    background-color: #343a40;
    color: white;
    padding: 1px 0;
    text-align: center;
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

@font-face {
    font-family: 'Museo 300';
    font-style: normal;
    font-weight: normal;
    src: local('Museo 300'), url('../lib/Font/Museo300-Regular.otf') format("opentype");
}

@font-face {
    font-family: 'Museo 700';
    font-style: normal;
    font-weight: normal;
    src: local('Museo 700'), url('../lib/Font/Museo700-Regular.otf') format("opentype");
}

.letraal {
    font-family: 'Museo 300'
}

.letraal7 {
    font-family: 'Museo 700'
}
/***************************************/
/*INDEX-NAV*/
/***************************************/
/* Cambiar el color del navbar a un gris más claro */
.navbar {
    background-color: #e9ecef !important; /* Gris claro */
}

/* Ajustar enlaces a la izquierda */
.navbar-nav {
    flex-direction: row; /* Alinear horizontalmente */
}

    /* Hover: texto en negrita con subrayado animado */
    .navbar-nav .nav-link {
        font-size: 1.2rem; /* 20% más grande que el tamaño base (1rem es base) */
        position: relative; /* Necesario para posicionar el pseudo-elemento */
        color: #BDC3C7; /* Pantone 8 C para los elementos no seleccionados */
        text-decoration: none; /* Elimina el subrayado predeterminado */
    }
    /* Aumentar el espacio horizontal entre elementos */
    .navbar-nav .nav-item {
        margin-right: 20px; /* Añade espacio entre los <li> */
    }
    /* Color para el elemento seleccionado */
    .navbar-nav .nav-link.active {
        color: #E87722 !important;
    }

    /* Hover: texto en negrita y subrayado */
    .navbar-nav .nav-link:hover {
        font-weight: bold;
        color: #E87722; /* Pantone 158 C */
    }

    .navbar-nav .nav-link::after {
        content: ''; /* Pseudo-elemento vacío para la línea */
        position: absolute;
        right: 100%; /* Comienza desde fuera del texto (derecha) */
        bottom: -2px; /* Separación entre el texto y la línea */
        width: 0;
        height: 2px;
        background-color: currentColor; /* Usa el color actual del texto */
        transition: all 0.3s ease; /* Suaviza la animación */
    }

    .navbar-nav .nav-link:hover::after {
        right: 0; /* Desplaza el subrayado hacia la izquierda */
        width: 100%; /* Expande la línea debajo del texto */
        color: #E87722; /* Pantone 158 C */
    }

/* Estilo del botón navbar-toggler */
.navbar-toggler {
    border: none; /* Elimina el borde del botón */
}

/* Cambiar el color de las tres rayas al naranja RGB(238, 118, 35) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgb(238, 118, 35)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}
/* Menú vertical en pantallas pequeñas */
@media (max-width: 992px) { /* Resoluciones bajas (Bootstrap breakpoint lg) */
    .navbar-nav {
        flex-direction: column; /* Listado vertical */
        align-items: flex-start; /* Alinea a la izquierda */
    }

        .navbar-nav .nav-item {
            margin-right: 0; /* Elimina el espacio horizontal */
            margin-bottom: 10px; /* Añade separación vertical */
        }
}


@media (min-width: 992px) {
    .navbar.fixed-top {
        position: fixed;
    }
}
/***************************************/
/*INDEX-CARRUSEL*/
/***************************************/

.carousel-inner img {
    object-fit: cover; /* Ajusta la imagen para que rellene el carrusel */
    height: 850px; /* Altura del carrusel, puedes ajustarla según tus necesidades */
}

    .carousel-indicators [data-bs-target] {
        width: 15px; /* Tamaño del indicador */
        height: 15px;
        right: 10px;
        border-radius: 50%; /* Hace los indicadores circulares */
        background-color: white; /* Color base */
        border: none;
        transition: background-color 0.3s ease; /* Efecto suave */
    }

        .carousel-indicators [data-bs-target].active {
            background-color: #E87722; /* Color del indicador activo */
            right: 10px;
        }

.carousel-caption {
    text-align: left; /* Alinea todo el contenido a la izquierda */
    top: 20%;
}

    .carousel-caption h1 {
        top: 10px; /* Ajusta según lo necesario */
        left: 10px;
        position: absolute;
        margin: 0;
        max-width: 95%; /* Limita el ancho al 40% del item */
        word-wrap: break-word; /* Fuerza el salto de línea si el texto excede el ancho permitido */
        overflow-wrap: break-word; /* Garantiza compatibilidad en navegadores modernos */
        white-space: normal; /* Permite que el texto se ajuste automáticamente */
        font-size: 5rem; /* Ajusta el tamaño según tus necesidades */
    }

    .carousel-caption p {
        margin-left: 20px;
        font-size: 1.5rem; /* Ajusta el tamaño según tus necesidades */
        line-height: 1.2; /* Ajusta este valor para reducir el espacio entre líneas */
        margin-bottom: 5px; /* Reduce el margen inferior entre párrafos */
    }

.fpcarrusel {
    margin-top: 250px;
}

.icono-p {
    max-width: 24px; /* Tamaño máximo */
    max-height: 24px;
    margin-right: 10px; /* Espacio entre el icono y el texto */
    object-fit: contain; /* Asegura que la imagen no se recorte */
}

@media (max-width: 1550px) {
    .carousel-inner img {
        height: 642px; /* Altura ajustada para pantallas pequeñas */
    }
}

@media (max-width: 768px) {
    .carousel-inner img {
        height: 642px; /* Altura ajustada para pantallas pequeñas */
    }

    .carousel-indicators {
        right: 5px; /* Ajusta la posición a la derecha en pantallas pequeñas */
        gap: 10px; /* Reduce el espacio entre los indicadores */
    }

    .carousel-caption h1 {
        font-size: 2rem; /* Ajusta el tamaño según tus necesidades */
    }

    .carousel-caption p {
        margin-left: 5px;
        font-size: 1rem; /* Ajusta el tamaño según tus necesidades */
        line-height: 1.2; /* Ajusta este valor para reducir el espacio entre líneas */
        margin-bottom: 5px; /* Reduce el margen inferior entre párrafos */
    }
}

.fpcarrusel, .fpcarrusel2 {
    margin-top: 250px;
}

.fpcarrusel3 {
    margin-top: 100px;
}


@media (max-width: 992px) {
    .fpcarrusel {
        margin-top: 100px;
    }

    .fpcarrusel2 {
        margin-top: 2px;
    }

    .fpcarrusel3 {
        margin-top: 50px;
    }
}

/* Estilo inicial: texto pequeño y opacidad baja */
.carousel-title, .carousel-cta {
    transform: scale(0.7);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

    /* Cuando se activa, se hace grande y visible */
    .carousel-title.show, .carousel-cta.show {
        transform: scale(1);
        opacity: 1;
    }
/***************************************/
/*INDEX-BOTONES DE LA PÁGINA*/
/***************************************/
a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn-cita-borde {
    background-color: #f7f7f7; /* Gris muy ligero */
    color: #333; /* Color del texto */
    font-size: 18px;
    font-weight: bold;
    padding: 12px 24px;
    border: 2px solid transparent; /* Borde transparente por defecto */
    border-radius: 25px;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s, padding-right 0.3s;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
    font-family: 'Museo 300';
}

    .btn-cita-borde:hover {
        background-color: #f7f7f7; /* Mantiene el fondo original */
        color: #E87722; /* Texto en naranja */
        border-color: #E87722; /* Borde en naranja */
        border-width: 4px; /* Aumenta el grosor del borde */
        padding-right: 35px; /* Espacio para el ">" */
    }

    .btn-cita-borde::after {
        content: " >";
        position: absolute;
        opacity: 0;
        right: 15px;
        transition: opacity 0.3s, right 0.3s;
    }

    .btn-cita-borde:hover::after {
        opacity: 1;
        right: 10px;
    }
.btn-contacto {
    background-color: white;
    color: #E87722;
    border: 2px solid #E87722;
    font-weight: normal;
    border-radius: 25px;
    transition: all 0.3s ease-in-out;
}

    .btn-contacto:hover,
    .btn-contacto:focus,
    .btn-contacto:active {
        background-color: #E87722;
        color: white;
        font-weight: bold;
        border-color: #E87722;
    }
.w-30 {
    width: 20%;
    min-width: 100px; /* Opcional: para evitar que sea muy pequeño en pantallas pequeñas */
}

@media (max-width: 992px) {
    .w-30 {
        width: 75%;
        min-width: 20px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

.image-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.image {
    width: 100%;
    display: block;
}

.overlay-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: dimgrey;
}

.naranjaliso {
    color: #E87722;
}

.text-justify {
    text-align: justify;
}

.text-justify-center {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente */
    text-align: center; /* Asegura que el texto esté centrado */
}
/***************************************/
/*LA CLINICA*/
/***************************************/
@media (min-width: 920px) {
    .img-equipo {
        max-width: 500px;
        height: auto; /* Mantiene la proporción de la imagen */
    }
}


/* Estilos iniciales: cards con escala reducida y opacidad */
.card-animate {
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

    /* Cuando el card entra en pantalla, se aplica la transformación */
    .card-animate.show {
        transform: scale(1);
        opacity: 1;
    }
.equal-img {
    height: 250px; /* Ajusta la altura según lo necesites */
    object-fit: cover; /* Recorta la imagen sin distorsionarla */
    width: 100%; /* Asegura que todas ocupen el mismo ancho dentro de su contenedor */
}
.full-height-img {
    width: 100%; /* Para que ocupe todo el ancho disponible */
    height: 100%; /* Para que ocupe todo el alto de la columna */
    object-fit: cover; /* Recorta la imagen sin deformarla */
}
/* Solo aplica estilos a la página de login */
.login-page {
    background-color: #f4f7fc;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    max-width: 450px;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}

    .login-container h1 {
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }

    .login-container .form-control {
        border-radius: 8px;
        border: 1px solid #ccc;
        padding: 10px;
        font-size: 14px;
    }

    .login-container .btn-primary {
        border-radius: 8px;
        padding: 12px;
        font-size: 16px;
        font-weight: bold;
        background-color: #007bff;
        border: none;
        transition: all 0.3s ease;
    }

        .login-container .btn-primary:hover {
            background-color: #0056b3;
        }

    .login-container .form-check-label {
        font-size: 14px;
        color: #666;
    }

    .login-container .small {
        color: #007bff;
        text-decoration: none;
        font-size: 14px;
    }

        .login-container .small:hover {
            text-decoration: underline;
        }








.nav-flush .nav-link {
    border-radius: 0;
}





@media (max-width: 768px) {
    #sidebar {
        width: 80px !important;
        padding: 1rem 0.5rem !important;
    }


    .offcanvas-start {
        width: 40% !important;
    }

    #btnSidebarToggle {
   
        top: 1rem;
        left: 1rem;
        z-index: 1051; /* Por encima del offcanvas */
    }
}
:root {
    --naranja: #E87722;
}
/* Por defecto: letras e iconos naranja */
#sidebar .nav-link {
    color: var(--naranja);
    background-color: transparent;
    transition: all 0.3s ease;

}

    /* Iconos y textos dentro de nav-link */
    #sidebar .nav-link i,
    #sidebar .nav-link .sidebar-text {
        color: var(--naranja);
        transition: all 0.3s ease;
    }

    /* Hover: subraya y cambia a naranja si no está activo */
    #sidebar .nav-link:hover {
        text-decoration: underline;
        color: var(--naranja);
    }

        /* Hover sobre iconos */
        #sidebar .nav-link:hover i,
        #sidebar .nav-link:hover .sidebar-text {
            color: var(--naranja);
        }

    /* Activo: fondo naranja, texto blanco */
    #sidebar .nav-link.active {
        background-color: var(--naranja);
        color: white;
    }

        #sidebar .nav-link.active i,
        #sidebar .nav-link.active .sidebar-text {
            color: white;
        }
/* Cambiar color de fondo y texto del botón activo (página actual) */

.pagination .page-item.active .page-link {
    background-color: #E87722;
    border-color: #E87722;
    color: #fff;
}
.pagination .page-link {
    color: #E87722;
}

.hover-grow:hover {
    transform: scale(1.05);
}

/***************************************/
/*LISTADO DE NOTICIAS*/
/***************************************/


.noticia-card-listado {
    border: 2px solid #E87722;
    box-shadow: 0 0 10px rgba(232, 119, 34, 0.3);
    transition: transform 0.3s ease;
    margin-bottom: 1rem;
}

.text-primary-custom-listado {
    color: #E87722;
}

.noticia-img-listado {
    max-height: 200px;
    min-height: 200px;
    object-fit: cover;
    width: 100%;
    filter: grayscale(100%);
}

/* Opcional: animación hover suave */
.hover-grow-listado:hover {
    transform: scale(1.05);
}