/*
Theme Name: Geopovision TT23
Theme URI: https://example.com/twenty-twenty-three-child
Description: Geopovision es un tema de Wordpress.
Author: Geopovision
Author URI: https://example.com
Template: twentytwentythree
Version: 1.0.0
*/

/* Aquí comienza tu CSS personalizado */

/*-----------------------------------------------------------------------------------*/
/*	 EL COVER USA EL 100% DE LA ALTURA DEL SCREEN CUANDO ES ABIERTO
/*-----------------------------------------------------------------------------------*/
@media (max-width: 781px) {.wp-block-cover.single-post-cover-full-height-mobile {/* Restamos 80px que es el promedio de un header móvil */ min-height: calc(100vh - 200px) !important;height: calc(100vh - 200px) !important; }}

/*-----------------------------------------------------------------------------------*/
/* LINKS
/*-----------------------------------------------------------------------------------*/
.entry-content a, 
.single-post a {color: #1f4e79; text-decoration: underline;transition: color 0.2s ease;}
.entry-content a:hover, .single-post a:hover {color: #004a7c; text-decoration: none;}
.links-footer-center-column a {color: #dadfe3; text-decoration: underline; transition: color 0.2s ease;}
.links-footer-center-column a:hover{color: #b3c6d4; text-decoration: underline; transition: color 0.2s ease;}


/*-----------------------------------------------------------------------------------*/
/* LOGO FOOTER
/*-----------------------------------------------------------------------------------*/
.footer-logo-wrapper {display: flex !important; justify-content: center !important; width: 100% !important; margin: 20px 0 !important;}
.geopo-svg-path path { fill: #ffffff !important; transition: fill 0.3s ease;}
.geopo-footer-logo-link svg { width: 180px !important; height: auto !important; max-width: 180px !important;}
.geopo-footer-logo-link:hover .geopo-svg-path path {fill: #cbdad7 !important;}

/*-----------------------------------------------------------------------------------*/
/*	BREAKPOINT NAV
/*-----------------------------------------------------------------------------------*/
/* --- EL BREAKPOINT 1024px --- */
/* Menú móvil para todo lo que sea Tablet o menos */
@media (max-width: 1024px) {
    .wp-block-navigation__responsive-container-open {display: flex !important; /* Muestra hamburguesa */ }
    .wp-block-navigation__responsive-container:not(.is-menu-open) {display: none !important; /* Oculta links de escritorio */}
    .solo-desktop {display: none !important; }
}
/* Ocultar en pantallas grandes (Desktop y Tablets horizontales) */
@media (min-width: 1025px) {.solo-movil {display: none !important;}}
/* Ocultar en pantallas medianas y pequeñas (Tablets verticales y Móvil) */
@media (max-width: 1024px) {.solo-desktop {display: none !important;}}


/* 2. Background */
.wp-block-navigation__responsive-container.is-menu-open {background-color: #001a33 !important;}
/* 3. Style "X" */
.wp-block-navigation__responsive-container-close {position: absolute !important; top: 25px !important; right: 25px !important; z-index: 10005 !important;}
.wp-block-navigation__responsive-container-close svg {width: 45px !important;height: 45px !important;color: #00d1ff !important;}
/* 4. Margin Top First Item */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {margin-top: 40px !important;}
/* 5. Styling content */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {color: #ffffff !important;font-size: 1.1rem !important; font-weight: 400;text-transform: uppercase; text-decoration: none !important;}

/*-----------------------------------------------------------------------------------*/
/*	GEID ARCHIVES
/*-----------------------------------------------------------------------------------*/
/* --- ARCHIVES GRID --- */
/* 1. La "Caja" principal (el Grupo externo) */
.archive-articles-grid .wp-block-post {border: 2px solid #d0d8e4; background-color: #f3f9fc; display: flex !important; flex-direction: column !important; height: 100% !important; padding: 0 !important; /* Quitamos padding aquí para que la imagen toque los bordes */}
/* 2. Featured Image */
.archive-articles-grid .wp-block-post-featured-image {margin: 0 !important;}
.archive-articles-grid .wp-block-post-featured-image img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;}
/* Efecto de zoom suave en la imagen al pasar el mouse por la tarjeta */
.archive-articles-grid .wp-block-post:hover .wp-block-post-featured-image img {transform: scale(1.05);transition: transform 0.4s ease;}
.archive-articles-grid .wp-block-post-featured-image {overflow: hidden;}
/* 3. El nuevo Grupo de texto (Clase: card-body) */
.card-body { margin: 0 !important; display: flex !important; flex-direction: column !important; flex: 1 0 auto !important; height: 100% !important; }
/* 4. Barra de Metadatos */
.metadata-bar { padding: 0 18px; margin-bottom: 8px !important;display: flex;justify-content: space-between; align-items: center;}
/* 5. Ajuste del Titulo y Extracto */
.card-body .wp-block-post-title { margin-top: 0 !important;}
/* 6. Empujar "Leer mas" hacia abajo */
.card-body .wp-block-read-more {  margin-top: auto !important; padding-top: 20px !important; font-weight: 700; color: #004a7c !important; text-decoration: none !important; }
.archive-articles-grid .wp-block-post {position: relative !important;cursor: pointer;}
.archive-articles-grid .wp-block-post-title a {text-decoration: none;}
.archive-articles-grid .wp-block-post-title a::after {content: "";position: absolute;top: 0; left: 0; right: 0; bottom: 0;z-index: 50;}
/* Permitir que otros links funcionen */
.archive-articles-grid .wp-block-post-terms a,
.archive-articles-grid .wp-block-read-more a,
.archive-articles-grid .wp-block-read-more {position: relative !important; z-index: 60 !important; }

.boton-leer-mas a {background-color: var(--wp--preset--color--primary); color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; display: inline-block;  font-family: 'Montserrat', sans-serif; font-weight: 500;}

/**
 * SINGLE POST LIST STYLES
 */
/* A. Quitamos la sangría exagerada pero mantenemos la lista en su lugar */
.wp-block-post-content ul, .wp-block-post-content ol {/* NO TOCAMOS EL MARGEN para que no se salga de la caja */ padding-left: 1.5rem !important; /* El espacio justo para el punto */ list-style-position: outside !important; /* Mantiene el texto alineado */}
/* B. Alineación perfecta con el párrafo */
/* Esto asegura que la lista empiece donde empieza el texto de tus párrafos */
.wp-block-post-content li {margin-bottom: 15px !important;line-height: 1.7;}
/* 3. El toque de estilo: puntos azules */
.wp-block-post-content ul li::marker {color: #004a7c !important; /* El azul de tu marca */font-weight: bold;}


/*-----------------------------------------------------------------------------------*/
/* ESTILO CAPTION IMAGES & VIDEOS YOUTUBE
/*-----------------------------------------------------------------------------------*/
/* Aplicamos el estilo a figcaption de imágenes y de bloques embebidos (YouTube) */
.wp-block-image figcaption,
.wp-block-embed.is-type-video figcaption {    
    font-size: 0.85rem; 
    font-style: italic; 
    color: #555; 
    text-align: center; 
    padding: 1rem; 
    margin-top: 0;
    line-height: 1.4;
}


/*-----------------------------------------------------------------------------------*/
/*	CREDITOS UNDER COVER
/*-----------------------------------------------------------------------------------*/
.creditos-dinamicos {font-size: 0.80rem; color: #f0efef;  text-align:center; background-color: rgba(2, 42, 78, 0.6); font-style: italic; width: 100%; align-self: flex-end; z-index: 20;}


/*-----------------------------------------------------------------------------------*/
/*	ELIMINA GAP UNDER HEADER
/*-----------------------------------------------------------------------------------*/
/* Elimina el margen superior del contenedor principal de la página/post */
.entry-content, 
.wp-site-blocks > article,
.wp-block-post-content { margin-top: 0 !important; padding-top: 0 !important;}
/* Elimina el margen superior específico del primer bloque dentro del article */
article > :first-child { margin-top: 0 !important;}
/* Si el Header tiene un margen inferior por defecto */
header.wp-block-template-part {margin-bottom: 0 !important;}



/* Corrección para la Nota Educativa en Geopovision */
.nota-educativa {
    background-color: #f0f7ff !important; /* El fondo azul claro */
    font-size: 1rem;;
    border-left: 6px solid #2196F3 !important; /* El borde grueso */
    padding: 1.5rem 1.5rem 1.5rem 2rem !important; /* Más espacio interno */
    margin: 2rem 0 !important;
    display: flex !important; /* Usamos flex para alinear todo dentro */
    flex-direction: column !important;
    border-radius: 0 8px 8px 0 !important;
    position: relative !important;
}

/* Arreglo para que el título se quede DENTRO de la caja */
.nota-educativa::before {
    content: "💡 NOTA EDUCATIVA";
    display: block;
    font-weight: bold;
    color: #2196F3;
    font-size: 0.85rem;
    margin-bottom: 0.5rem; /* Separa el título del texto de abajo */
    /* Eliminamos cualquier posicionamiento absoluto que pueda estar molestando */
    position: static !important; 
}


/* Estilo para el Aside de Fuentes/Bibliografía */
.fuentes-geopovision {
    border-top: 2px solid #dbdbdb !important;
    border-bottom: 2px solid #dbdbdb !important;
    padding: 1.5rem 0 !important;
    margin-top: 3rem !important;
    font-size: 0.9rem !important; /* Texto un poco más pequeño */
    color: #383838 !important;
}

/* Título automático para la sección de fuentes */
.fuentes-geopovision::before {
    content: "FUENTES & REFERENCIAS";  display: block;  font-weight: bold; font-size: 1.75rem;  color: #999;  margin-bottom: 1rem;  letter-spacing: 0.1em;}

/* Estilo para los párrafos de las fuentes */
.fuentes-geopovision p { margin-bottom: 0.5rem !important;  line-height: 1.4 !important;}

/* Estilo para los links dentro de las fuentes */
.fuentes-geopovision a { color: #0073aa; text-decoration: underline;}




/*-----------------------------------------------------------------------------------*/
/*	ACORDEON
/*-----------------------------------------------------------------------------------*/
/* Contenedor principal del acordeón */
details.wp-block-details { background-color: #ffffff; border: 1px solid #e1e1e1;border-radius: 8px; margin-bottom: 15px;padding: 0; /* Quitamos padding aquí para que el summary ocupe todo el ancho */
    overflow: hidden; transition: all 0.3s ease;box-shadow: 0 2px 4px rgba(0,0,0,0.05);}
/* Efecto hover al pasar el ratón */
details.wp-block-details:hover {border-color: #0073aa; /* El color azul clásico de WordPress */ box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
/* El título (la pestaña que se ve) */
details.wp-block-details summary { padding: 15px 20px; font-weight: 600; cursor: pointer;list-style: none; /* Quita la flecha por defecto */ display: flex; justify-content: space-between;align-items: center;
    background-color: #f9f9f9; transition: background-color 0.3s ease;}
details.wp-block-details p {padding: 0 1.5rem 1.5rem;}
/* Flecha personalizada usando pseudo-elementos */
details.wp-block-details summary::after { content: "＋"; /* Signo de más */ font-size: 1.2rem; color: #0073aa; transition: transform 0.3s ease;}
/* Estilo cuando el acordeón está ABIERTO */
details.wp-block-details[open] { border-color: #0073aa;}
details.wp-block-details[open] summary {background-color: #f0f7fa; border-bottom: 1px solid #e1e1e1; color: #0073aa;}
details.wp-block-details[open] summary::after {content: "－"; /* Cambia a signo de menos */  transform: rotate(180deg);}
/* El contenido oculto */
details.wp-block-details .wp-block-details-content { padding: 20px; line-height: 1.6; color: #444; animation: fadeIn 0.4s ease;}
/* Animación sutil para que el texto aparezca suavemente */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); }}







/* Navegación anterior / siguiente - estilo tarjetas suaves */
.anterior-siguiente {margin: 2.5rem 0;  padding: 0 1rem;}

.anterior-siguiente .nav-links,
.anterior-siguiente .post-navigation,
.anterior-siguiente .navigation { display: flex; flex-wrap: wrap;  gap: 1.5rem; justify-content: space-between;  align-items: stretch;}

/* Cada enlace (prev y next) */
.anterior-siguiente a {
    flex: 1 1 45%;           /* crecen parecido, pero dejan gap */ min-width: 220px;        /* evita que se pongan muy angostos */ text-decoration: none;  color: #333;  border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);  transition: all 0.25s ease;
    background: #f8f9fc;     /* fondo muy suave por defecto */}

/* Hover */
.anterior-siguiente a:hover {transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);}

/* Lado izquierdo (anterior) */
.anterior-siguiente .nav-previous a,
.anterior-siguiente .previous a {background: linear-gradient(135deg, #e6f0fa 0%, #f0f7ff 100%); /* azul muy suave */border-left: 5px solid #a3c8ff;}

/* Lado derecho (siguiente) */
.anterior-siguiente .nav-next a,
.anterior-siguiente .next a {background: linear-gradient(135deg, #e6faed 0%, #f0fff5 100%); /* verde suave */ border-right: 5px solid #a8e6b5;text-align: right;}

/* Contenedor interno del texto */
.anterior-siguiente a > span,
.anterior-siguiente a {display: block; padding: 1.4rem 1.6rem;}

/* Etiqueta "Anterior" / "Siguiente" (pequeña) */
.anterior-siguiente .nav-previous a::before,
.anterior-siguiente .previous a::before { content: "← Anterior"; display: block; font-size: 0.9rem; font-weight: 600; color: #5a8ee0; margin-bottom: 0.5rem;}

.anterior-siguiente .nav-next a::before,
.anterior-siguiente .next a::before {content: "Siguiente →"; display: block; font-size: 0.9rem; font-weight: 600; color: #4caf7d; margin-bottom: 0.5rem;}

/* El título del post */
.anterior-siguiente a { font-size: 1.1rem; line-height: 1.4; font-weight: 500;}

/* Mobile: se apilan uno debajo del otro */
@media (max-width: 640px) {
    .anterior-siguiente .nav-links, .anterior-siguiente .post-navigation {flex-direction: column; gap: 1.2rem;}
        .anterior-siguiente a { text-align: center !important; }
        .anterior-siguiente .nav-next a::before, .anterior-siguiente .next a::before {content: "Siguiente →";}
    
    .anterior-siguiente .nav-previous a::before,
    .anterior-siguiente .previous a::before {content: "← Anterior";}
}




/* Estilos base para botones en WP FSE */
.wp-block-button__link {text-decoration: none !important;
    color: #FFFFFF; /* Texto blanco */
    border: none; /* Sin bordes por defecto */
    border-radius: 8px; /* Esquinas redondeadas */
    padding: 12px 24px; /* Espaciado interno cómodo */
    font-size: 1rem; /* Tamaño de texto legible */
    font-weight: normal; /* Negrita ligera */
    text-transform: none; /* Mayúsculas para un look profesional */
    transition: all 0.3s ease; /* Transiciones suaves */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Efecto hover: más claro y flotante */
.wp-block-button__link:hover {text-decoration: none;
 background-color: #112c45;    transform: scale(1.05); /* Escala ligera para "crecer" */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
    cursor: pointer;
}

/* Para botones en orientación vertical (como tu lista) */
.wp-block-buttons.is-vertical .wp-block-button__link {
    width: 100%; /* Ocupa todo el ancho para un look de lista */
    margin-bottom: 12px; /* Espacio entre botones */
}

/* Responsivo: Ajustes para móviles */
@media (max-width: 768px) {
    .wp-block-button__link {
        padding: 10px 20px; /* Menos padding en pantallas pequeñas */
        font-size: 14px;
    }
}