/* Logo text responsiveness */
.navbar-brand {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    white-space: normal; /* ← permite saltos de línea */
    word-break: break-word; /* ← corta si es muy largo */
    max-width: 100%; /* ← asegura que no se desborde */
}


/* Mobile-first styles */
@media screen and (max-width: 576px) {
    .navbar {
        padding: 0.5rem;
    }

    .navbar-brand {
        font-size: 1.1rem;
    }

    .search-container {
        flex-direction: column;
        gap: 0.5rem;
    }

    #searchInput {
        width: 100%;
        border-radius: 4px;
    }

    #searchButton {
        width: 100%;
        border-radius: 4px;
    }

    .category-filters {
        overflow-x: auto;
        white-space: nowrap;
        padding: 0.5rem;
    }

    .carousel-container {
        max-width: 100%;
    }

    .news-container {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem;
    }

    .news-item img {
        height: 200px;
    }

    .news-content {
        padding: 1rem;
    }
}

body, html {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
}

.news-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 20px;
}

.news-item {
  margin-bottom: 20px;
}


/* General styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* Header styles */
.navbar {
    background-color: #6cb2f7;
    padding: 1rem 0;
}

.navbar-brand {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.search-container {
    display: flex;
    align-items: center;
}

#searchInput {
    padding: 0.5rem;
    border: none;
    border-radius: 4px 0 0 4px;
    width: 200px;
}

#searchButton {
    padding: 0.5rem 1rem;
    background: #033e66;
    border: none;
    color: white;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

/* Category filters */
.category-filters {
    background-color: #5598db;
    padding: 1rem 0;
    text-align: center;
}

.filter-btn {
    background: none;
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn.active {
    background-color: #3498db;
    border-radius: 4px;
}

/* Breaking news carousel */
.breaking-news {
    margin: 2rem 0;
    max-height: 120px; /* controla altura general del bloque */
    overflow: hidden;
}

.carousel-container {
    max-width: 800px;
    margin: 0 auto;
}

.carousel-img {
    max-height: 200px;
    width: auto;
    object-fit: contain; /* mantiene la imagen completa */
    display: block;
    margin: 0 auto;
  }
  
  .carousel-caption h5,
  .carousel-caption p {
    color: black;
  }    

/* News grid */
.news-container {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding: 1rem;
}

.news-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.news-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-content {
    padding: 1rem;
}

/* RSS Feeds sidebar */
.rss-feeds {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-size: 0.9rem;
}

.rss-feeds h3 {
    margin-bottom: 1rem;
    color: #2c3e50;
     font-size: 1.2rem;
}

/* Footer */
footer {
    position: static;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    color: white;
    padding: 1rem 0;
    margin-top: 2rem;
}

.social-links {
    text-align: right;
}

.social-links a {
    color: white;
    margin-left: 1rem;
    font-size: 1.2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .news-container {
        grid-template-columns: 1fr;
    }
    
    .social-links {
        text-align: center;
        margin-top: 1rem;
    }
}

.carousel-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  .carousel-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
  }
  
  .carousel-text {
    flex: 1;
  }
  
  .carousel-text small {
    color: #555;
    font-size: 0.75rem;
    display: block;
    margin-bottom: 0.2rem;
  }
  
  .carousel-text h5 {
    margin: 0;
    font-size: 1rem;
    color: black;
  }
  
  .carousel-text p {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    color: black;
  }
  
  /* News grid */
.news-container {
    display: grid;
    gap: 2rem; /* Increased gap for better spacing */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Adjusted minmax for larger items */
    padding: 2rem; /* Increased padding around the grid */
    max-width: 1200px; /* Added a max-width to contain the grid */
    margin: 2rem auto; /* Centered the grid and added margin */
}

.news-item {
    background: white;
    border-radius: 12px; /* Increased border-radius for softer corners */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Enhanced shadow for depth */
    transition: transform 0.3s ease; /* Added transition for hover effect */
}

.news-item:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Enhanced shadow on hover */
}

.news-item img {
    width: 100%;
    height: 250px; /* Increased height for better visuals */
    object-fit: cover;
    transition: transform 0.3s ease; /* Added transition for hover effect */
}

.news-item:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
}

.news-content {
    padding: 1.5rem; /* Increased padding inside the content area */
}

.news-content h3 {
    margin-bottom: 0.75rem; /* Adjusted margin below the title */
    font-size: 1.25rem; /* Slightly larger font size for the title */
    color: #333; /* Darker color for better readability */
}

.news-content p {
    color: #666; /* Adjusted color for the paragraph text */
    line-height: 1.7; /* Improved line height for readability */
}

.rss-feeds {
    background: #f9f9f9; /* Light grey background */
    padding: 1.5rem; /* Increased padding */
    border-radius: 12px; /* Softer corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Subtle shadow */
    margin-bottom: 2rem; /* Adds space below the RSS feed section */
}

.rss-feeds h3 {
    color: #333; /* Dark grey for the heading */
    border-bottom: 2px solid #ddd; /* Light border to separate the heading */
    padding-bottom: 0.75rem; /* Space below the heading */
    margin-bottom: 1.25rem; /* Increased space below the heading */
}

.rss-item {
    padding: 0.75rem 0; /* Padding for each RSS item */
    border-bottom: 1px solid #eee; /* Light separator between items */
}

.rss-item:last-child {
    border-bottom: none; /* Remove border from the last item */
}

.rss-item a {
    color: #007bff; /* Blue color for the links */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth color transition on hover */
    display: block; /* Make the whole area clickable */
}

.rss-item a:hover {
    color: #0056b3; /* Darker blue on hover */
    text-decoration: underline; /* Add underline on hover */
}

.rss-item small {
    color: #777; /* Grey color for the small text */
    display: block; /* Display on a new line */
    margin-top: 0.25rem; /* Small space above the text */
}

/* Mejorar visibilidad de las flechas del carrusel */
.carousel-item {
  display: flex;
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center;     /* Centra verticalmente el contenido */
  height: 100%;            /* Ocupa el alto del carrusel */
}

.carousel-card {
  max-width: 600px;
  margin: 0 auto;
}

.carousel-control-prev,
.carousel-control-next {
  opacity: 1;
  transition: none;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: rgba(0, 0, 0, 0.3); /* efecto hover si lo deseas */
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%; /* o 40px si prefieres ancho fijo */
  top: 50%;
  
  height: 5%; /* libera la altura completa */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* elimina espacio extra */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
}