/* ===================================================
   MUSEO DE LAS ARTES Y CULTURAS DEL PUTUMAYO
   Identidad visual: Amazonía, arte y patrimonio
   Propuesta CSS v1.0 para Omeka S
   =================================================== */

/* 1. PALETA DE COLORES */
:root {
    --museo-fondo: #E8F4E5;
    --museo-verde: #245C43;
    --museo-verde-oscuro: #173F30;
    --museo-verde-suave: #D4E8D0;
    --museo-dorado: #C19A58;
    --museo-marfil: #FAF8F1;
    --museo-blanco: #FFFFFF;
    --museo-texto: #263D32;
    --museo-borde: #D2E3D0;
    --museo-sombra: 0 5px 18px rgba(23,63,48,.09);
}

/* 2. FONDO GENERAL */
html {
    background-color: var(--museo-fondo);
}

body {
    background-color: var(--museo-fondo);
    color: var(--museo-texto);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

/* 3. ENCABEZADO */
header {
    background-color: var(--museo-verde);
    color: white;
    border-bottom: 4px solid var(--museo-dorado);
    box-shadow: 0 3px 12px rgba(0,0,0,.10);
}

/* 4. IDENTIDAD DEL MUSEO */
header .site-title,
header .site-title a,
header .site-title a:visited {
    color: white;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: .4px;
    text-decoration: none;
}

header .site-title a:hover {
    color: #F0D7A6;
}

/* 5. MENÚ DE NAVEGACIÓN */
header nav a,
header .navigation a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: color .2s ease;
}

header nav a:hover,
header .navigation a:hover,
header nav a:focus-visible {
    color: #F0D7A6;
}

/* 6. CONTENIDO PRINCIPAL */
main,
#content {
    color: var(--museo-texto);
}

/* 7. TÍTULOS */
h1, h2, h3, h4, h5, h6 {
    color: var(--museo-verde-oscuro);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.3;
    font-weight: 700;
}

main h1,
#content h1 {
    border-bottom: 2px solid var(--museo-dorado);
    padding-bottom: 12px;
    margin-bottom: 26px;
}

/* 8. ENLACES */
main a,
#content a {
    color: var(--museo-verde);
    text-underline-offset: 3px;
}

main a:hover,
#content a:hover {
    color: #7A582B;
}

/* 9. TARJETAS DE COLECCIONES Y OBRAS */
.resource-list .resource,
.resource-grid .resource,
.item-set,
.museo-tarjeta {
    background: var(--museo-marfil);
    border: 1px solid var(--museo-borde);
    border-radius: 12px;
    padding: 18px;
    box-shadow: var(--museo-sombra);
    transition: transform .2s ease,
                box-shadow .2s ease;
}

.resource-list .resource:hover,
.resource-grid .resource:hover,
.museo-tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 22px rgba(23,63,48,.14);
}

/* 10. IMÁGENES DE OBRAS */
.resource-list img,
.resource-grid img,
.museo-tarjeta img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.resource-list .resource img,
.resource-grid .resource img {
    transition: transform .25s ease;
}

.resource-list .resource:hover img,
.resource-grid .resource:hover img {
    transform: scale(1.015);
}

/* 11. BOTONES */
button,
input[type="submit"],
.button,
a.museo-boton {
    background-color: var(--museo-verde);
    color: white;
    border: 1px solid var(--museo-verde);
    border-radius: 7px;
    padding: 10px 20px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
a.museo-boton:hover {
    background-color: var(--museo-verde-oscuro);
    color: white;
}

/* 12. FORMULARIOS Y BÚSQUEDA */
input[type="search"],
input[type="text"],
select,
textarea {
    border: 1px solid #A8C9AE;
    border-radius: 7px;
    background: white;
    color: var(--museo-texto);
    padding: 10px;
    max-width: 100%;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--museo-dorado);
    outline-offset: 3px;
}

/* 13. TABLAS */
main table,
#content table {
    width: 100%;
    border-collapse: collapse;
}

main th,
#content th {
    background-color: var(--museo-verde);
    color: white;
}

main td,
main th,
#content td,
#content th {
    padding: 12px;
    border: 1px solid var(--museo-borde);
}

/* 14. PIE DE PÁGINA */
footer {
    background: var(--museo-verde-oscuro);
    color: #F4F5EE;
    padding: 30px 20px;
    border-top: 4px solid var(--museo-dorado);
}

footer a {
    color: #F0D7A6;
}

footer a:hover {
    color: white;
}

/* 15. DISPOSITIVOS MÓVILES */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    header {
        padding: 12px;
    }

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    .resource-list .resource,
    .resource-grid .resource {
        padding: 12px;
    }
}

/* 16. ACCESIBILIDAD: MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion: reduce) {
    .resource-list .resource,
    .resource-grid .resource,
    .resource-list img,
    .resource-grid img,
    button,
    .button {
        transition: none;
    }

    .resource-list .resource:hover,
    .resource-grid .resource:hover,
    .resource-list .resource:hover img,
    .resource-grid .resource:hover img {
        transform: none;
    }
}

/* ============================================
   MUSEO DE LAS ARTES Y CULTURAS DEL PUTUMAYO
   CORRECCIÓN DEL ENCABEZADO Y MENÚ
   ============================================ */

/* 1. Fondo verde del encabezado */
body > header,
#header,
.site-header,
header.site-header {
    background: #245C43 !important;
    background-color: #245C43 !important;
    color: #FFFFFF !important;
    border-bottom: 4px solid #C19A58 !important;
}

/* 2. Contenedores internos del encabezado */
header .container,
header .wrap,
header .site-title,
header nav,
header .navigation {
    background-color: transparent !important;
}

/* 3. Nombre del museo */
header .site-title,
header .site-title a,
header .site-title a:visited {
    color: #FFFFFF !important;
    font-weight: 700;
    text-decoration: none;
}

/* 4. Enlaces del menú principal */
header nav a,
header .navigation a,
header .navigation li a,
#header nav a,
.site-header nav a {
    color: #FFFFFF !important;
    font-weight: 600;
    text-decoration: none;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 5. Efecto al pasar el cursor */
header nav a:hover,
header .navigation a:hover,
header nav a:focus-visible {
    color: #F0D7A6 !important;
}

/* 6. Elemento seleccionado */
header nav .active > a,
header .navigation .active > a {
    color: #F0D7A6 !important;
    font-weight: 700;
}

/* 7. Submenús desplegables */
header nav ul ul,
header .navigation ul ul {
    background-color: #173F30 !important;
}

header nav ul ul a,
header .navigation ul ul a {
    color: #FFFFFF !important;
}

/* 8. Botones de menú móvil */
header .menu-toggle,
header .menu-button {
    color: #FFFFFF !important;
    background-color: #245C43 !important;
}

/* 9. Mantener legible el buscador */
header input[type="search"],
header input[type="text"] {
    background-color: #FFFFFF !important;
    color: #263D32 !important;
}

/* 10. Ajuste de espacios del encabezado */
body > header,
#header,
.site-header {
    padding-top: 12px;
    padding-bottom: 12px;
}
/* BOTÓN MUSEO VIRTUAL */

a.boton-museo-virtual {
    display: inline-block !important;
    padding: 16px 32px !important;
    background-color: #2e7d32 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 20px;
    font-weight: bold;
    border-radius: 14px !important;
    text-align: center;
    transition: background-color 0.3s ease;
}

a.boton-museo-virtual:hover {
    background-color: #245C43 !important;
    color: #FFFFFF !important;
}

/* ========================================
      BOTONES ANTERIOR Y SIGUIENTE
   ======================================== */

/* Contenedor de navegación entre páginas */
.site-page-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 30px 0;
}

/* Estilo visual de los enlaces */
.site-page-pagination a {
    display: inline-block !important;
    background-color: #245C43 !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    border: 1px solid #245C43 !important;
    text-decoration: none !important;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    transition: background-color 0.25s ease;
}

/* Efecto al pasar el cursor */
.site-page-pagination a:hover {
    background-color: #173F30 !important;
    color: #FFFFFF !important;
}

/* Accesibilidad */
.site-page-pagination a:focus-visible {
    outline: 3px solid #C19A58;
    outline-offset: 3px;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 480px) {
    .site-page-pagination {
        gap: 10px;
    }

    .site-page-pagination a {
        padding: 10px 16px !important;
        font-size: 14px;
    }
}