@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
html, body {
    height: 100%;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* Esto hace que el contenido empuje el footer hacia abajo */
}

body{
  font-family: "Nunito", sans-serif;
}

/* Cambiar el fondo de la navbar */
.navbar {
    background-color: #0060AB !important;
}
/* Cambiar el color de los enlaces */
.navbar .nav-link {
    color: white !important;
    font-weight: bold;
}

/* Color de los enlaces al pasar el mouse */
.navbar .nav-link:hover {
    color: #FFD700 !important;
}

/* Color del logo/marca */
.navbar-brand {
    color: white !important;
    font-weight: bold;
}

/* Logo en la navbar */
.navbar .logo {
    height: 50px; 
    width: auto; 
    border: 2px solid #FFD700;
    border-radius: 32px;
}

/* Cambiar el color de fondo al pasar el mouse sobre los items del dropdown */
.dropdown-menu .dropdown-item:hover {
    background-color: #0060AB; /* azul personalizado */
    color: #FFD700; /* texto dorado */
}

#carouselExample .carousel-inner img {
    max-height: 400px; 
    width: auto;       
    margin: 0 auto;    
    object-fit: cover; 
}

/* Boton ver mas */
.btn-mas {
    background-color: #0060AB;
    color: white;
    font-weight: bold;
}

.btn-mas:hover {
    background-color: white;
    border: 2px solid #0060AB;
    color: black;
}

/* Footer */
/* footer {
    margin-top: auto; /* Se asegura de que siempre quede abajo */

/* Footer general */
footer {
    background-color: #0060AB; /* Azul del navbar */
    color: #FFD700; /* Texto dorado */
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* Contenedores internos */
footer .container {
    display: flex;
    align-items: center;
    justify-content: center; /* centrado por defecto */
    flex: 1;
    margin: 5px 0;
}

/* Logo en el footer */
footer .logoFooter img,
footer a img.logo {
    height: 50px;
    width: auto;
    margin: 0 5px;
    border: 2px solid #FFD700;
    border-radius: 32px;
}

/* Contenedor izquierdo, centro, derecho */
footer .text-left {
    justify-content: flex-start;
}
footer .text-center {
    justify-content: center;
    text-align: center;
}
footer .text-right {
    justify-content: flex-end;
    text-align: right;
}

/* Links de redes sociales */
footer a {
    color: #FFD700;
    transition: transform 0.3s;
}

footer a:hover {
    transform: scale(1.1); /* pequeño efecto al pasar el mouse */
}

footer a img.logoRss{
    height: 50px;
    width: auto;
    margin-left: 3px;  /* distancia mínima entre logos */
    margin-right: 0;
    vertical-align: middle; 
}

.table-blue thead th {
    background-color: #0060AB !important;
    color: white !important;
}