/* eventos/static/eventos/css/style.css */

:root {
    --primary-blue: #002F4E;        /* Azul mariño profundo */
    --accent-gold: #C79E53;         /* Dourado suave para acentos */
    --light-text: #E0E0E0;          /* Gris claro para texto en fondos escuros */
    --pure-white: #FFFFFF;          /* Blanco puro para fondos e elementos */
    --main-bg: #F3F4F6;             /* Fondo principal da páxina */
    --subtle-border: rgba(0, 47, 78, 0.04); /* Bordo case imperceptible do azul principal */
    --secondary-text: #7A8790;      /* Gris para texto secundario */
    --hover-blue: rgba(0, 47, 78, 0.02); /* Fondo de hover moi suave */
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--primary-blue);
    background-color: var(--main-bg);
    line-height: 1.6;
}

/* --- Xerais --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-gold);
    text-decoration: underline;
}

/* --- Cabeceira (.main-header de _header.html) --- */
/* A túa cabeceira ten un d-flex na propia tag <header>, movín estes estilos para aquí */
.main-header {
    background-color: var(--pure-white);
    border-bottom: 1px solid var(--subtle-border);
    padding: 1.25rem 0;
    box-shadow: 0 4px 15px rgba(0, 47, 78, 0.04);
    /* Estas propiedades xa as tiñas na túa etiqueta <header>, as mantemos aquí */
    display: flex; /* Asegura que o header sexa un flex container */
    justify-content: space-between; /* Espacia os elementos internos (logo, toggler/nav) */
    align-items: center; /* Aliña os elementos verticalmente */
    padding-left: 1rem; /* Engade padding horizontal para non pegar aos bordos */
    padding-right: 1rem;
}

/* O container dentro do header para limitar o ancho do contido */
.main-header > .container { /* Selector máis específico para o container directo do header */
    max-width: 1200px;
    /* xa ten d-flex, justify-content-between, align-items-center de bootstrap */
}

.main-header .header-logo a {
    color: var(--primary-blue) !important;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    text-decoration: none;
    transition: color 0.3s ease;
}

.main-header .header-logo a:hover {
    color: var(--accent-gold) !important;
}

/* Estilos para a navegación de escritorio (dentro de .header-nav-container) */
.main-header .header-nav-container .nav-link { /* Selector actualizado */
    color: var(--primary-blue) !important;
    font-weight: 400;
    padding: 0.6rem 1.1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.main-header .header-nav-container .nav-link:hover, /* Selector actualizado */
.main-header .header-nav-container .nav-link.active { /* Selector actualizado */
    background-color: var(--hover-blue);
    color: var(--primary-blue) !important;
    text-decoration: none;
}

/* Estilos para o botón do menú offcanvas (toggler) */
.navbar-toggler {
    border: none;
    color: var(--primary-blue);
    padding: 0.5rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border-radius: 0.375rem;
    transition: box-shadow 0.15s ease-in-out;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 47, 78, 0.25);
}

.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='%23002F4E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Estilos para o menú Offcanvas */
.offcanvas {
    background-color: var(--primary-blue);
    color: var(--light-text);
}

.offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas .offcanvas-title {
    color: var(--light-text);
}

.offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.7;
}

.offcanvas .btn-close:hover {
    opacity: 1;
}

.offcanvas .navbar-nav .nav-item {
    margin-bottom: 0.5rem;
}

.offcanvas .navbar-nav .nav-link {
    color: var(--light-text);
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.offcanvas .navbar-nav .nav-link:hover,
.offcanvas .navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--accent-gold);
}

/* Media query para a cabeceira en pantallas pequenas (para ocultar/mostrar elementos) */
@media (max-width: 991.98px) { /* A breakpoint 'lg' de Bootstrap é 992px */
    .main-header .container {
        flex-direction: row; /* Mantén a fila, o toggler aparecerá ao final */
        justify-content: space-between; /* Asegura espazado entre logo e toggler */
        align-items: center;
    }
    /* .header-nav-container xa está d-none d-lg-block, o que o oculta automaticamente */
    /* .navbar-toggler xa está d-lg-none, o que o mostra automaticamente */
}


/* --- SECCIÓNS DE CONTIDO CON FONDO DE ANCHO COMPLETO --- */

div#contido {
   padding-top: 50px;
}

.section-wrapper {
    width: 100%;
    margin-bottom: 0;
}

.section-main-bg {
    background-color: var(--main-bg);
}

.section-white-bg {
    background-color: var(--pure-white);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.02);
}

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.section-content {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* A clase para o contido principal da páxina (se a usas no index.html) */
.main-page-content {
    padding-top: 3rem; /* Exemplo: engade padding por defecto */
    padding-bottom: 3rem;
    /* Podes engadir un background-color ou box-shadow se non usas section-wrapper */
}


/* Título principal da páxina */
h2.mb-3 {
    text-align: center;
    font-size: 2.8rem;
    color: var(--primary-blue);
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 50px !important;
    line-height: 1.2;
}

h2.mb-3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background-color: var(--accent-gold);
    border-radius: 3px;
}

/* --- Tarxetas de Eventos (Estáticas, sen resaltado no hover) --- */
.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 47, 78, 0.05);
    background-color: var(--pure-white);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 5px;
    transition: none;
}

.card:hover {
    transform: none !important;
    box-shadow: 0 4px 18px rgba(0, 47, 78, 0.05) !important;
    border: none !important;
    background-color: var(--pure-white) !important;
}

.card-body {
    padding: 25px 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-title {
    margin-bottom: 12px;
    line-height: 1.3;
}

.card-title a {
    color: var(--primary-blue) !important;
    font-weight: 500;
    font-size: 1.2rem;
    display: block;
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-title a:hover {
    color: var(--accent-gold);
    text-decoration: underline;
}

.card-text {
    font-size: 0.95rem;
    color: var(--primary-blue);
    margin-bottom: 0.6rem;
}

.card-text small {
    color: var(--secondary-text);
    font-size: 0.85rem;
    display: block;
    margin-bottom: 10px;
    opacity: 0.9;
}

.card-text a {
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-text a:hover {
    color: var(--accent-gold);
    text-decoration: underline;
}

/* Mensaxe sen eventos */
.col-12 p.text-muted {
    text-align: center;
    padding: 80px 0;
    font-size: 1.3rem;
    color: var(--secondary-text);
    opacity: 0.8;
}

/* --- Rodapé --- */
.footer {
    background-color: var(--primary-blue) !important;
    color: var(--light-text);
    padding-top: 60px;
    padding-bottom: 40px;
    font-size: 0.95rem;
}

.footer h5 {
    color: var(--accent-gold);
    margin-bottom: 28px;
    font-weight: 700;
}

.footer p.text-muted,
.footer ul.list-unstyled {
    color: var(--light-text) !important;
    opacity: 0.9;
}

.footer ul.list-unstyled li {
    margin-bottom: 10px;
}

.footer ul.list-unstyled li a {
    color: var(--light-text) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer ul.list-unstyled li a:hover {
    color: var(--accent-gold) !important;
}

.footer hr {
    border-color: rgba(255, 255, 255, 0.15);
    margin-top: 50px;
    margin-bottom: 30px;
}

.footer .small {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.85rem;
}

/* Media Queries para adaptabilidade */
@media (max-width: 768px) {
    .section-content {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .footer .col-md-4 {
        margin-bottom: 30px;
    }
    h2.mb-3 {
        font-size: 2.2rem;
        padding-bottom: 15px;
        margin-bottom: 30px !important;
    }
    h2.mb-3::after {
        width: 70px;
        height: 4px;
    }
}
@media (max-width: 576px) {
    .main-header .header-logo a {
        font-size: 2rem;
    }
    .card-title a {
        font-size: 1.3rem;
    }
    .card-body {
        padding: 20px;
    }
}

.tld-small-fino {
    font-size: 0.7em; /* Axusta o tamaño ao teu gusto */
    font-weight: 400; /* Faino máis fino */
}

/* Estilos para o botón "Aplicar Filtro" */
.aplicarfiltro {
    background-color: #ffffff; /* Cor de fondo: Branco */
    color: #c79e53;           /* Cor da letra: Amarelo */
    border: 2px solid #c79e53; /* <-- CAMBIO AQUÍ: Borde 2px sólido, Amarelo */

    font-size: 0.70em;        /* Fai a letra máis pequena */
    text-transform: uppercase; /* Converte o texto a maiúsculas */
    font-weight: 900;         /* Fai a letra máis gorda */
}

.aplicarfiltro:hover,
.aplicarfiltro:focus {
    background-color: #f0f0f0; /* Un gris moi claro ao pasar o rato/focar */
    border-color: #c79e53;    /* Mantén a cor do bordo amarela */
    color: #c79e53;           /* Mantén a cor da letra amarela */
}

/* Estilos para o botón "Limpar Filtro" (agora é idéntico a aplicarfiltro) */
.limparfiltro {
    background-color: #ffffff; /* Cor de fondo: Branco */
    color: #c79e53;           /* Cor da letra: Amarelo */
    border: 2px solid #c79e53; /* <-- CAMBIO AQUÍ: Borde 2px sólido, Amarelo */

    font-size: 0.70em;        /* Fai a letra máis pequena */
    text-transform: uppercase; /* Converte o texto a maiúsculas */
    font-weight: 900;         /* Fai a letra máis gorda */
}

.limparfiltro:hover,
.limparfiltro:focus {
    background-color: #f0f0f0; /* Un gris moi claro ao pasar o rato/focar */
    border-color: #c79e53;    /* Mantén a cor do bordo amarela */
    color: #c79e53;           /* Mantén a cor da letra amarela */
}

/* Estilos para o botón "vermapa" */
.btn.vermapa {
    background-color: var(--primary-blue); /* Fondo azul oscuro */
    color: var(--accent-gold); /* Texto en amarelo */
    border: 1px solid var(--primary-blue); /* Bordo da mesma cor que o fondo */
    padding: 8px 16px; /* Axusta o recheo segundo o desexes */
    font-size: 0.9rem; /* Axusta o tamaño da fonte */
    font-weight: 600;
    border-radius: 5px; /* Bordos lixeiramente redondeados */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn.vermapa:hover {
    background-color: var(--accent-gold); /* Fondo amarelo no hover */
    color: var(--primary-blue); /* Texto azul no hover */
    border-color: var(--accent-gold); /* Bordo amarelo no hover */
}

div#footer {
   padding-top: 50px;
}

/* Asegúrate de que o teu CSS se carga despois do de Bootstrap */

.header-main-wrapper {
    display: flex; /* Usamos flexbox para aliñar os elementos fillos */
    justify-content: space-between; /* Coloca os elementos nos extremos opostos */
    align-items: center; /* Aliña verticalmente ao centro */
    padding: 10px 20px; /* Exemplo de padding para o contedor principal */
    /* Outros estilos para a túa cabeceira, como background, etc. */
}

/* Opcional: Axustes para o ícono de RSS */
.rss-icon-wrapper {
    margin-left: 15px; /* Engade un pouco de espazo á esquerda do ícono se o necesitas */
    /* Poderías tamén axustar o tamaño do ícono aquí se non usaches fa-lg */
}

/* Se necesitas aliñar o menú _nav.html á esquerda e o RSS á dereita en móbiles */
@media (max-width: 991.98px) { /* Este é o punto de ruptura 'lg' de Bootstrap */
    .header-main-wrapper {
        justify-content: flex-end; /* En móbiles, só aliña o RSS á dereita se non hai _nav */
    }
    /* Poderías ocultar .header-nav-container aquí tamén se non o fai d-none xa */
}