/*
Theme Name:   Customify Child RUIE
Template:     customify
Description:  Tema hijo de Customify para la RUIE. Reemplaza el encabezado, pie y Novedades de Elementor Pro.
Version:      1.0.1
Text Domain:  customify-child
*/

:root {
	--ruie-celeste: #00C0F3;
	--ruie-azul: #005DA4;
	--ruie-texto: #1F4081;
	--ruie-naranja: #F37021;
	--ruie-gris: #F0F0F0;
}

/* Encabezado fijo al bajar (Customify gratis no lo trae). */
#masthead { position: sticky; top: 0; z-index: 100; background: #fff; }
.admin-bar #masthead { top: 32px; }
.ruie-franja { height: 18px; background: var(--ruie-naranja); }
/* Foto de libros (antes: sección 5bbe6dd4 de la plantilla 15: 334 px escritorio, 133 px celular). */
.ruie-portada {
	min-height: 334px; background-color: #fff; background-repeat: no-repeat;
	background-size: cover; background-position: center center;
}

.ruie-logos { display: flex; align-items: center; gap: 24px; }
.ruie-logos img { display: block; flex: none; height: auto; max-height: 64px; width: auto; }
/* Menú como en Elementor Pro: Montserrat 500, celeste; actual y al pasar en azul texto.
   Con #masthead para ganarle a `.light-mode .nav-menu-desktop.style-border-bottom … current-menu-item > a` de Customify. */
#masthead .nav-menu-desktop .primary-menu-ul > li > a {
	font-family: Montserrat, sans-serif; font-weight: 500; font-size: 17px; color: var(--ruie-celeste);
	padding-left: 9px; padding-right: 9px;
}
#masthead .nav-menu-desktop .primary-menu-ul > li.current-menu-item > a,
#masthead .nav-menu-desktop .primary-menu-ul > li > a:hover,
#masthead .nav-menu-desktop .primary-menu-ul > li > a:focus { color: var(--ruie-texto); }
/* 20 px como antes solo donde cabe en una línea: el contenedor de Customify (1184 px útiles) no alcanza. */
@media (min-width: 1420px) {
	#cb-row--header-main .customify-container { max-width: 1380px; }
	#masthead .nav-menu-desktop .primary-menu-ul > li > a { font-size: 20px; }
}
/* Escritorio angosto: letra y logos menores para que el menú no se parta en dos líneas. */
@media (min-width: 1025px) and (max-width: 1259px) {
	#masthead .nav-menu-desktop .primary-menu-ul > li > a { font-size: 15px; padding-left: 7px; padding-right: 7px; }
	#cb-row--header-main .ruie-logos img { max-height: 48px; }
}
@media (min-width: 1025px) and (max-width: 1149px) {
	#masthead .nav-menu-desktop .primary-menu-ul > li > a { font-size: 14px; padding-left: 6px; padding-right: 6px; }
	#cb-row--header-main .ruie-logos img { max-height: 42px; }
	#cb-row--header-main .ruie-logos { gap: 16px; }
}
/* Customify oculta por max-width:1024px y min-width:1025px; con escalado de Windows el ancho queda
   fraccionario entre ambos y se ven los dos encabezados. */
@media screen and (max-width: 1024.98px) { .hide-on-tablet { display: none; } }
/* Customify pone el menú en MAYÚSCULAS; hoy va en tipo oración. */
#masthead .nav-menu-desktop .menu > li > a { text-transform: none; }
@media (min-width: 768px) {
	/* Customify reparte 1fr auto 1fr y el menú (ancho) deja los logos en ~24 px. */
	#cb-row--header-main .cb-row--desktop .row-v2 { grid-template-columns: auto 1fr auto; }
}

/* Pie */
.site-footer { background: var(--ruie-gris); font-family: Montserrat, sans-serif; color: var(--ruie-texto); }
.site-footer img { height: auto; }
.ruie-contacto { list-style: none; margin: 0; padding: 0; }
.ruie-contacto li { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.ruie-contacto img { width: 32px; height: 32px; flex: none; }
.ruie-contacto a { color: inherit; }
/* Fila principal del pie: clara como hoy (Customify la pone gris oscuro con dark-mode). */
#cb-row--footer-main .footer--row-inner { background: var(--ruie-gris); color: var(--ruie-texto); }
.footer--row-inner .ruie-contacto a { color: var(--ruie-texto); }

/* Buscador del catálogo de la portada (antes: custom_css del widget HTML 2c25d2e de la página 34, solo Pro). */
.campos-formulario { display: flex; justify-content: center; }
.campos-formulario .form-group { padding-right: 1em; }
.campos-formulario .form-group:first-child { width: 30em; }

/* Títulos y botones */
.ruie-titulo-seccion { font-family: Montserrat, sans-serif; color: var(--ruie-celeste); text-align: center; margin: 32px 0 24px; }
.ruie-btn {
	display: inline-block; padding: 6px 22px; border-radius: 13px; background: var(--ruie-celeste);
	color: #fff; font-family: Montserrat, sans-serif; font-size: 14px; text-decoration: none;
}
.ruie-btn:hover, .ruie-btn:focus { background: var(--ruie-azul); color: #fff; }

/* Cuadrícula y tarjetas */
.ruie-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1140px; margin: 0 auto 32px; }
.ruie-card {
	display: flex; flex-direction: column; align-items: center; padding: 16px; border: 2px solid var(--ruie-celeste);
	border-radius: 15px; background: #fff; text-align: center;
}
.ruie-card__titulo { margin: 0 0 12px; font-family: Montserrat, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; }
.ruie-card__titulo a { color: var(--ruie-azul); text-decoration: none; }
.ruie-card__img img { display: block; width: 100%; height: auto; border-radius: 8px; }
.ruie-card__linea { width: 100%; margin: 14px 0; border: 0; border-top: 1px solid var(--ruie-azul); }
.ruie-card .ruie-btn { margin-top: auto; }
.ruie-vacio { text-align: center; margin: 32px 0; }

/* Paginación */
.ruie-paginacion ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0 0 40px; padding: 0; }
.ruie-paginacion a, .ruie-paginacion span { display: inline-block; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--ruie-celeste); text-decoration: none; }
.ruie-paginacion .current { background: var(--ruie-celeste); color: #fff; }

/* Ficha */
.ruie-ficha { max-width: 1000px; margin: 32px auto; }
.ruie-ficha__titulo {
	font-family: Montserrat, sans-serif; color: var(--ruie-celeste); text-transform: uppercase;
	letter-spacing: 3px; font-size: 20px; text-align: center; margin-bottom: 32px;
}
.ruie-ficha__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.ruie-ficha__img { margin: 0; }
.ruie-ficha__img img { width: 100%; height: auto; border-radius: 15px; }
.ruie-ficha__texto { font-family: Montserrat, sans-serif; color: var(--ruie-texto); font-size: 15px; overflow-wrap: anywhere; }
.ruie-ficha__meta { color: var(--ruie-azul); font-size: 14px; }

@media (max-width: 1024px) {
	.ruie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* La barra de administración mide 46 px entre 601 y 782 px. */
@media (max-width: 782px) {
	.admin-bar #masthead { top: 46px; }
}
@media (max-width: 767px) {
	.ruie-grid, .ruie-ficha__cuerpo { grid-template-columns: minmax(0, 1fr); }
	.ruie-grid, .ruie-ficha { padding: 0 16px; }
	/* Encabezado fijo solo desde 768 px. */
	#masthead { position: static; }
	.ruie-logos { gap: 12px; flex-wrap: nowrap; }
	.ruie-logos img { max-height: 36px; }
	.ruie-portada { min-height: 133px; }
	/* Buscador del catálogo de la portada (HTML de Elementor): hoy mide 661 px en celular. */
	body .campos-formulario { display: flex !important; flex-wrap: wrap !important; gap: 8px; max-width: 100%; }
	body .campos-formulario > .form-group { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-right: 0 !important; }
	body .campos-formulario .form-control, body .campos-formulario select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
	body .campos-formulario .row { display: flex !important; flex-wrap: wrap !important; gap: 8px; margin: 0 !important; }
	body .campos-formulario .row > *, body .campos-formulario .btn { flex: 1 1 0 !important; max-width: 100% !important; width: auto !important; }
}