/* ═══════════════════════════════════════════════════════════════════
   CATÁLOGO INSULA SIGNA · Hoja de estilos del sitio
   Última revisión: 25/09/2026 (rev. 3)

   ORDEN DE CARGA, que es lo que más quebraderos ha dado:
       1. style.css del tema
       2. ESTA hoja
       3. custom.css del tema   ← se carga DESPUÉS y gana en los empates

   Por eso algunas reglas llevan #main-content o .main-header delante:
   no es manía, es para ganar en especificidad a custom.css.

   ÍNDICE
       1.  Tipografía general
       2.  Cabecera y menú
       3.  Ficha: estructura y texto
       4.  Ficha: carrusel y lightbox
       5.  Ficha: columna derecha, referencias y relacionadas
       6.  Ficha: avisos de estado
       7.  Mapa
       8.  Llamada a hacerse socio
       9.  Comentarios
       10. Portada: bloques, cifras y tarjetas
       11. Área de usuario
       12. Imágenes: sin recortes
       13. Adaptación a pantallas pequeñas
   ═══════════════════════════════════════════════════════════════════ */


/* ═══ 1. TIPOGRAFÍA GENERAL ═════════════════════════════════════════
   El tema carga la fuente Sen pero no la aplica en todas partes, así
   que unos bloques salían con Sen y otros con la del sistema. Aquí se
   fija una sola familia y una escala de tamaños para todo el sitio.
   Los iconos (Font Awesome) no se ven afectados: sus reglas llevan
   más especificidad que estas.                                       */

:root {
    --is-azul:        #13404d;   /* azul principal del catálogo   */
    --is-azul-oscuro: #0d2e38;
    --is-marino:      #0d3b66;   /* el de la cabecera             */
    --is-texto:       #444;
    --is-texto-suave: #666;
    --is-borde:       #e4e6e8;
    --is-fondo-suave: #f8f9fa;
}

body,
#main-content,
.blocks,
.content-html,
.info-section,
.metadata-item,
.comments-section {
    font-family: 'Sen', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Helvetica, Arial, sans-serif;
}

#main-content h1 { font-size: 1.9rem; font-weight: 800; line-height: 1.15; margin: 32px 0 20px; }
#main-content h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 28px 0 16px; }
#main-content h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.3;  margin: 0 0 15px; }

/* Un solo tamaño y un solo interlineado para el texto corrido.
   Antes esto estaba declarado dos veces con valores distintos
   (1.2 y 1.8), y ganaba el último por accidente.                     */
#main-content .content-html,
#main-content .info-section p,
#main-content .content-html p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--is-texto);
}


/* ═══ 2. CABECERA Y MENÚ ════════════════════════════════════════════ */

/* La barra superior con "Búsqueda avanzada" no aportaba nada. */
.main-header__top-bar {
    display: none;
}

.main-header {
    background-color: var(--is-marino);
    border-top: 5px solid #ff7800;
    border-bottom: none;
}

.main-header .main-navigation .navigation > li > a {
    color: #fff;
}

.main-header .main-navigation .navigation > li.active > a {
    color: #fff;
    border-color: rgba(255,255,255,.75);
}

.main-header .main-navigation .navigation > li > a:hover,
.main-header .main-navigation .navigation > li > a:focus {
    border-color: rgba(255,255,255,.5);
}

/* El botón de sesión está definido en custom.css con !important y esa
   hoja se carga después, así que hay que subir la especificidad. */
.main-header nav .navigation li.login-link > a {
    background-color: #fff !important;
    color: var(--is-marino) !important;
}

.main-header nav .navigation li.login-link > a:hover {
    background-color: #dde6f0 !important;
}

/* El tema plegaba el menú en hamburguesa por debajo de 1200px: en una
   tablet horizontal hacían falta dos toques para cambiar de sección. */
@media (min-width: 900px) {
    .main-navigation__container { display: block !important; }
    .main-navigation__toggle    { display: none  !important; }
}


/* ═══ 3. FICHA: ESTRUCTURA Y TEXTO ══════════════════════════════════ */

.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.content-left,
.content-right {
    display: flex;
    flex-direction: column;
}

.content-left  { gap: 30px; }
.content-right { gap: 25px; }

.info-section {
    background: #fff;
    padding: 0;
}

/* Alineado a la izquierda, no justificado. El justificado abre calles
   de espacio en blanco cuando las líneas son cortas, y en la columna
   de la ficha son cortas casi siempre.                               */
#main-content .info-section p {
    text-align: left;
    margin: 0 0 1.2rem;
}

#main-content .content-html p {
    text-align: left;
    margin: 0 0 15px;
}

.content-html a {
    color: var(--is-azul);
    text-decoration: none;
}

.content-html a:hover { text-decoration: underline; }

.content-html ul,
.content-html ol { margin: 10px 0; padding-left: 25px; }

.content-html li { margin-bottom: 8px; }


/* ═══ 4. FICHA: CARRUSEL Y LIGHTBOX ═════════════════════════════════ */

.image-carousel-left {
    position: relative;
    width: 100%;
    margin: 0 0 30px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.image-carousel {
    position: relative;
    width: 100%;
    height: 450px;
    background: #fff;
    overflow: hidden;
}

.carousel-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.carousel-slide img { width: 100%; height: 100%; object-fit: contain; }

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(19,64,77,.85);
    color: #fff;
    border: none;
    font-size: 2em;
    width: 50px; height: 50px;
    cursor: pointer;
    transition: all .3s;
    z-index: 10;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover { background: rgba(19,64,77,1); }
.carousel-prev { left: 15px; }
.carousel-next { right: 15px; }

.carousel-dots {
    text-align: center;
    padding: 12px;
    background: rgba(0,0,0,.03);
}

.dot {
    height: 10px; width: 10px;
    margin: 0 4px;
    background-color: rgba(19,64,77,.3);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.dot.active,
.dot:hover { background-color: rgba(19,64,77,1); }

/* Las miniaturas se reparten en varias filas en vez de empujar la
   página a lo ancho; si hay muchas, se desplazan dentro de su caja. */
.carousel-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 6px 10px 10px;
    background: #f5f5f5;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    max-height: 140px;
}

.thumb-item {
    flex-shrink: 0;
    width: 80px; height: 60px;
    cursor: pointer;
    opacity: .6;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.thumb-item.active { opacity: 1; border-color: var(--is-azul); }
.thumb-item:hover  { opacity: .8; }

.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,.95);
    overflow: auto;
}

.lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    margin: auto;
}

.lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    width: auto; height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px; right: 40px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
    transition: color .3s;
    text-shadow: 2px 2px 4px rgba(0,0,0,.8);
}

.lightbox-close:hover,
.lightbox-close:focus { color: #bbb; }

.lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.2);
    color: #fff;
    border: none;
    font-size: 3em;
    width: 60px; height: 60px;
    cursor: pointer;
    transition: all .3s;
    z-index: 10001;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-btn:hover { background: rgba(255,255,255,.4); }
.lightbox-prev { left: 30px; }
.lightbox-next { right: 30px; }


/* ═══ 5. FICHA: COLUMNA DERECHA, REFERENCIAS Y RELACIONADAS ═════════ */

.metadata-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.metadata-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.6;
    color: var(--is-texto);
    font-size: .95em;
}

/* Las viñetas se ocultaron a petición del cliente. */
.metadata-item .bullet { display: none; }

/* Aquí faltaba el punto de la clase, así que esta regla no se aplicaba
   a nada. Ahora sí resalta el nombre del campo.                      */
.metadata-item strong { color: #333; }

.references-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reference-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--is-fondo-suave);
    border-radius: 6px;
    transition: background .2s ease;
}

.reference-item:hover { background: #e9ecef; }

.ref-bullet { font-size: 1.2em; flex-shrink: 0; margin-top: 2px; }

.reference-item a,
.references-section a {
    color: var(--is-azul);
    text-decoration: none;
    font-weight: 500;
    line-height: 1.5;
}

.reference-item a:hover,
.references-section a:hover { text-decoration: underline; }

.references-section h3 {
    color: #333;
    border-bottom: 2px solid var(--is-azul);
    padding-bottom: 8px;
}

.related-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.related-item-card {
    display: flex;
    flex-direction: column;
    background: var(--is-fondo-suave);
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none;
    transition: all .3s ease;
    border: 2px solid transparent;
}

.related-item-card:hover {
    border-color: var(--is-azul);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.related-item-thumb {
    width: 100%;
    height: 70px;
    overflow: hidden;
    background: #e9ecef;
}

.related-item-title {
    padding: 12px;
    font-size: .95em;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}


/* ═══ 6. FICHA: AVISOS DE ESTADO ════════════════════════════════════ */

.alert-section {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.alert-success {           /* "Elemento rescatado" */
    background: #d1ecf1;
    border: 2px solid #0dcaf0;
}

.alert-text {
    flex: 1;
    display: flex;
    align-items: center;
}

.alert-text strong {
    display: block;
    font-size: 1.2em;
    margin-bottom: 4px;
    color: #333;
}

.alert-text p {
    margin: 0;
    color: var(--is-texto);
    line-height: 1.6;
}

/* --- Lo que el cliente pidió retirar. Para recuperarlo, borrar esto. */

/* NUEVO (25/09): el cartel amarillo "En riesgo de desaparición".
   Sobra, porque la propia colección (Lista Roja) ya lo dice.         */
.alert-section.alert-danger {
    display: none !important;
}

/* Iconos sobre las miniaturas en los listados. */
.status-badge { display: none !important; }

/* Icono grande dentro del recuadro de la ficha; el texto se mantiene. */
.alert-icon { display: none !important; }

/* Leyenda de iconos en las vistas de búsqueda.
   OJO: esto oculta SOLO el recuadro de la leyenda, no la descripción.
   El texto que se escriba en la descripción de una vista facetada SÍ
   se verá.                                                           */
.faceted-browse-description .alert-box { display: none !important; }


/* ═══ 7. MAPA ═══════════════════════════════════════════════════════ */

.map-section {
    background: var(--is-fondo-suave);
    padding: 15px;
    border-radius: 8px;
}

.location-address {
    margin-bottom: 12px;
    color: var(--is-texto);
    line-height: 1.6;
}

.view-map-link {
    color: var(--is-azul);
    font-size: .9em;
    text-decoration: none;
}

.view-map-link:hover { text-decoration: underline; }

.map-embed { border-radius: 8px; overflow: hidden; }

/* Red de seguridad: el mapa se dibuja con cientos de imágenes pequeñas.
   Cualquier regla general sobre imágenes las deforma y deja rombos
   blancos entre ellas, que parecen estrellas. Esto lo impide.        */
.leaflet-container img,
.leaflet-container img.leaflet-tile {
    max-width: none !important;
    max-height: none !important;
    width: auto;
    height: auto;
    border-radius: 0 !important;
    object-fit: fill !important;
}


/* ═══ 8. LLAMADA A HACERSE SOCIO ════════════════════════════════════ */

.cta-section {
    margin: 40px auto 20px;
    padding: 28px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e6f3fb 0%, #cfe9f9 50%, #bde0f7 100%);
    border: 1px solid rgba(10,80,120,.12);
    box-shadow: 0 6px 18px rgba(13,59,86,.06);
    max-width: 1200px;
}

.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-text {
    font-size: 1.1em;
    color: #06354a;
    margin: 0;
    font-weight: 600;
}

.cta-buttons { display: flex; gap: 12px; align-items: center; }

.btn {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

/* Los !important y la lista de estados son para que el navegador no
   cambie el color al marcarlos como visitados.                       */
.cta-donate, .cta-donate:link, .cta-donate:visited,
.cta-donate:active, .cta-donate:focus {
    background-color: #0b6d9a !important;
    color: #fff !important;
    border: 1px solid #084d6b !important;
    text-decoration: none !important;
}

.cta-donate:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(11,109,154,.18);
}

.cta-login, .cta-login:link, .cta-login:visited,
.cta-login:active, .cta-login:focus {
    background-color: transparent !important;
    color: #06354a !important;
    border: 2px solid rgba(6,53,74,.12) !important;
    text-decoration: none !important;
}

.cta-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(6,53,74,.06);
}


/* ═══ 9. COMENTARIOS ════════════════════════════════════════════════ */

.comments-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.comments-section h2,
.comments-section h3 {
    color: var(--is-azul);
    margin-bottom: 20px;
    font-weight: 600;
}

#comments-container { margin-top: 20px; }

.comments-section form {
    margin-top: 25px;
    padding: 20px;
    background: var(--is-fondo-suave);
    border-radius: 8px;
}

.comments-section textarea,
.comments-section input[type="text"],
.comments-section input[type="email"] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1em;
}

.comments-section textarea { min-height: 120px; resize: vertical; }

.comments-section button[type="submit"],
.comments-section input[type="submit"] {
    background: var(--is-azul);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background .3s ease;
}

.comments-section button[type="submit"]:hover,
.comments-section input[type="submit"]:hover { background: var(--is-azul-oscuro); }

.comments-section .comment {
    padding: 20px;
    margin: 15px 0;
    background: #fff;
    border-left: 4px solid var(--is-azul);
    border-radius: 6px;
}

.comments-section .comment-author { font-weight: 600; color: var(--is-azul); margin-bottom: 8px; }
.comments-section .comment-date   { font-size: .9em; color: var(--is-texto-suave); margin-bottom: 12px; }
.comments-section .comment-body   { line-height: 1.6; color: #333; }


/* ═══ 10. PORTADA: BLOQUES, CIFRAS Y TARJETAS ═══════════════════════ */

/* Botón principal. El tema lo pinta con degradado naranja y se carga
   después, así que hace falta #main-content para ganarle.            */
#main-content a.btn-search-patrimonio {
    display: inline-block;
    padding: 14px 28px;
    background: var(--is-azul);
    background-image: none;
    color: #fff !important;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: none;
    transition: background .2s ease;
}

#main-content a.btn-search-patrimonio:hover {
    background: var(--is-azul-oscuro);
    transform: none;
    box-shadow: none;
}

/* Columna de lectura en las páginas de las listas. La portada se queda
   a ancho completo porque las tarjetas lo necesitan.                 */
body.site-page-inventario   #main-content .blocks-inner,
body.site-page-lista-roja   #main-content .blocks-inner,
body.site-page-in-memoriam  #main-content .blocks-inner {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Un solo tamaño para todo el texto corrido de las páginas y de las
   descripciones de las vistas facetadas. Antes esto pedía que el
   párrafo fuese hijo DIRECTO del bloque, y en la portada hay un
   <div align="center"> por medio; y solo cubría el recuadro
   info-box-patrimonio, que In memoriam no tiene. Resultado: esos dos
   textos salían un 5% más pequeños que los demás.                    */
#main-content .block-html p,
#main-content .info-box-patrimonio p,
#main-content .faceted-browse-description p {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* El texto de las tarjetas de colección va aparte: es un pie corto,
   no texto corrido, y con 1,05 rem se comía la tarjeta.              */
#main-content .collection-card .card-content p,
#main-content .collection-card .card-content div {
    font-size: .95rem;
    line-height: 1.5;
}

/* NUEVO (25/09): alinear a la izquierda los párrafos de los bloques.
   Varios están dentro de <div align="center">, que es un atributo del
   HTML antiguo. La portada queda excluida: el cliente la quiere
   centrada. Los títulos se dejan centrados en todas.                 */
body:not(.site-page-inicio) #main-content .blocks div[align="center"] p,
body:not(.site-page-inicio) #main-content .blocks center p {
    text-align: left;
}

#main-content > h1,
.blocks .block-pageTitle {
    margin-top: 32px;
    margin-bottom: 28px;
}

/* El tema apilaba casi 200px de vacío antes de la primera cifra. */
#main-content .stats-section { margin: 20px 0; padding: 32px 20px; }
#main-content .stat-item     { padding: 20px 16px; }

/* Tarjetas de colección: la capa invisible sale del enlace del título
   y cubre toda la tarjeta, así que la foto también lleva al listado. */
#main-content .collection-card {
    position: relative;
    cursor: pointer;
}

#main-content .collection-card .card-content h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

#main-content .collection-card:hover .card-image {
    filter: brightness(1.06);
    transition: filter .2s ease;
}


/* ═══ 11. ÁREA DE USUARIO ═══════════════════════════════════════════
   Acotado con body.guest para no afectar al resto del sitio.        */

/* El menú de usuario ya está en la barra de arriba; aquí sobraba. */
body.guest .navigation-guest { display: none; }

body.guest #main-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 20px 80px;
}

body.guest #main-content > h1 {
    font-size: 2rem;
    color: var(--is-azul);
    margin: 0 0 32px;
}

body.guest .guest-widget h2,
body.guest .guest-widget h3 {
    font-size: 1.15rem;
    color: var(--is-azul);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--is-borde);
}

body.guest .guest-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.guest .guest-widget ul li { margin: 0; }

body.guest .guest-widget ul li a {
    display: block;
    padding: 16px 20px;
    background: var(--is-fondo-suave);
    border: 1px solid var(--is-borde);
    border-left: 4px solid var(--is-azul);
    border-radius: 6px;
    color: var(--is-azul);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .12s ease;
}

body.guest .guest-widget ul li a:hover,
body.guest .guest-widget ul li a:focus {
    background: #eef1f3;
    transform: translateY(-1px);
    text-decoration: none;
}

/* Cerrar sesión en otro tono: es la acción que te saca de aquí. */
body.guest .guest-widget ul li a[href*="logout"] {
    border-left-color: #b23a2e;
    color: #b23a2e;
}


/* ═══ 12. IMÁGENES: SIN RECORTES Y CON ESQUINAS SUAVES ════════════════════════════════════
   NUEVO (25/09). Antes se usaba object-fit: cover, que rellena el
   hueco recortando lo que sobra. Con "contain" se ve la foto entera y
   quedan franjas grises a los lados.
   Si en algún sitio prefieres que recorte, quita esa línea de aquí.  */

#main-content .thumb-item img,
#main-content .related-item-thumb img,
#main-content .card-image img,
#main-content .faceted-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f2f3f5;
}

/* El redondeo va en el contenedor, no en la imagen: si no, la franja
   gris asoma por las esquinas. El mapa queda fuera a propósito, porque
   su regla de la sección 7 fuerza border-radius: 0 y así las baldosas
   no vuelven a separarse en rombos blancos.                          */
#main-content .thumb-item,
#main-content .related-item-thumb,
#main-content .card-image,
#main-content .faceted-item-image {
    border-radius: 8px;
    overflow: hidden;
}


/* ═══ 13. PANTALLAS PEQUEÑAS ════════════════════════════════════════ */

@media (max-width: 968px) {
    .content-wrapper  { grid-template-columns: 1fr; }
    .image-carousel   { height: 350px; }
    .cta-inner        { justify-content: center; }
    .comments-section { margin: 30px 20px; padding: 20px; }
}

@media (max-width: 600px) {
    .image-carousel-container { max-width: 100%; }
    .image-carousel { height: 300px; }
    .carousel-btn   { width: 35px; height: 35px; font-size: 1.5em; }
}

/* Enlace a la búsqueda avanzada, retirado a petición del cliente (29/09/2026).
   La página sigue existiendo en /s/catalogo/item/search; lo que se quita es
   el acceso desde la cabecera. El otro enlace, el de la barra superior, ya
   estaba oculto con .main-header__top-bar.                                 */
.main-header-search__advanced-search {
    display: none !important;
}