/* ===========================================================================
   SI EDITAS ESTE ARCHIVO, CAMBIA TAMBIEN EL ?ver= DE LOS CUATRO HEADER

   Los .css se sirven con "ExpiresByType text/css access plus 1 year" (ver
   comun/htaccess.plantilla). Por eso comun/header.{es,en}.html de los dos
   sitios enlazan esta hoja como

       /assets/css/comunicados.css?ver=<8 digitos>

   donde <8 digitos> son los primeros 8 del MD5 del contenido. Si el archivo
   cambia y la URL no, al que ya visito el sitio le queda la hoja vieja un ano
   y la seccion se le ve rota: paso el 2026-11-04 con la version de la maqueta
   -el icono de PDF salia de 969x1292 px-.

   El generador de la seccion calcula el hash solo. A mano:
       md5sum comunicados.css   (los primeros 8 caracteres)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Ajuste del menu principal

   El quinto item -"Comunicados"- no entraba en el ancho que el menu tenia
   reservado y se caia a una segunda linea debajo de los otros cuatro. Tres
   cambios, los tres solo en escritorio:

   - cada item pierde 4px de aire a cada lado, en los dos sitios;
   - cadiemfondos.com.py separaba los items con 18px de margen ademas del aire
     propio de cada uno: ese margen pasa a 0 y quedan los 24px que ya usa
     cadiem.com.py, con lo que los cinco entran en los 631px del menu;
   - el menu de cadiem.com.py pasa de 49,24% a 56% del header: sobra lugar,
     porque el logo y el bloque de la derecha juntos no llegan a la mitad.

   Esta hoja se carga desde comun/header.*.html, o sea en todas las paginas,
   porque el item de menu esta en todas.
   --------------------------------------------------------------------------- */

@media (min-width: 1025px) {

	/* Los valores por defecto -0.5rem 1rem de aire y el margen entre items-
	   salen de .e-n-menu en widget-mega-menu.min.css y de la hoja del header;
	   esta hoja viene despues, asi que gana sin necesidad de !important. */
	.e-n-menu {
		--n-menu-title-padding: 8px 12px 8px 12px;
		--n-menu-title-space-between: 0px;
	}

	/* Solo existe en cadiem.com.py: .elementor-36 es su header. En
	   cadiemfondos.com.py el selector no engancha con nada. */
	.elementor-36 .elementor-element.elementor-element-ff042cb {
		--width: 56%;
	}
}

/* ---------------------------------------------------------------------------
   El menu compacto, antes

   Arriba de 1260px el header mide 1200 fijos y los cinco items entran. Abajo
   de 1025 Elementor ya muestra el menu compacto. En el medio no entran y no
   hay de donde sacar lugar: medido en cadiemfondos a 1100, el header esta
   exactamente lleno -logo 226 + menu 551 + boton 193 + buscador 70 + 60 de
   separacion = 1100- y los cinco items piden 614. Con cuatro entraban; el
   quinto no cabe ni recortando el aire de cada uno.

   Asi que en esa franja se muestra el mismo menu compacto que el sitio ya usa
   abajo de 1025. Son las dos reglas que Elementor aplica en su breakpoint de
   tableta, repetidas aca: esconder el desplegable horizontal y mostrar el
   boton. Los breakpoints mas anchos de Elementor -laptop, tablet_extra- estan
   deshabilitados en esta instalacion, por eso no alcanza con mover un numero.

   El corte va en 1259 y no en 1219, que es donde deja de entrar, para tener
   margen: la barra de scroll se come unos 15px y el ancho de los items
   depende de la fuente.

   OJO: esto depende de que carguen los chunks de Elementor. En cadiem.com.py
   no cargaban -ver el commit que arregla urls.assets- y el boton quedaba
   mudo. Si alguna vez vuelve a romperse esa ruta, esta regla deja el menu
   inservible en esta franja, no solo feo.
   --------------------------------------------------------------------------- */

@media (min-width: 1025px) and (max-width: 1259px) {

	.elementor.elementor .elementor-widget-n-menu.e-n-menu-tablet {
		--n-menu-wrapper-display: none;
	}

	.elementor.elementor .elementor-widget-n-menu.e-n-menu-tablet .e-n-menu-toggle {
		display: flex;
	}
}

/* ---------------------------------------------------------------------------
   La seccion

   Acompana al markup del widget nested-accordion de Elementor, que ya trae su
   propio CSS en assets/vendor/elementor/assets/css/widget-nested-accordion.min.css
   Aca van los valores que en el home de cadiemfondos.com.py viven dentro de
   assets/css/post-4359.css atados al id de esa pagina: se repiten colgados de
   .cadiem-comunicados para que la seccion se vea igual en cualquier pagina y
   en los dos sitios.

   El verde #087451 es el mismo que los dos sitios ya tienen declarado:
   --e-global-color-beeaac2 en cadiemfondos.com.py y --e-global-color-29850ce
   en cadiem.com.py. Se escribe literal porque el nombre de la variable cambia
   de un sitio al otro.
   --------------------------------------------------------------------------- */

.cadiem-comunicados {
	--comunicados-verde: #087451;
	--comunicados-texto: var(--e-global-color-text, #3D3D3D);
	--comunicados-linea: var(--e-global-color-4a0cbd4, #E5E1E6);

	/* Ancho de lectura, en rem y no en em a proposito: en em cada bloque lo
	   resolvia contra SU tamano de letra y terminaban con anchos distintos
	   -los parrafos a 15px daban 720px y la caja de adjuntos, que hereda
	   18px, daba 864px-, asi que la linea de "Documentos adjuntos" sobresalia
	   144px respecto de las de cada archivo. */
	--comunicados-ancho: 45rem;

	/* Contenedor Elementor: mismas medidas que el bloque "Convocatoria a
	   Asambleas" del home de cadiemfondos. */
	--display: flex;
	--flex-direction: column;
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--margin-top: 40px;
	--margin-bottom: 40px;
	--margin-left: 0px;
	--margin-right: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 25px;
	--padding-right: 10px;
}

/* --- Titulo de la seccion ------------------------------------------------ */

.cadiem-comunicados__titulo .elementor-heading-title {
	font-family: "Albert Sans", Sans-serif;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.2em;
	letter-spacing: -1px;
	color: var(--comunicados-texto);
	margin: 0;
}

.cadiem-comunicados__nota p {
	font-family: "Albert Sans", Sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--comunicados-texto);
	max-width: var(--comunicados-ancho);
	margin: 6px 0 0;
	opacity: .75;
}

/* --- Acordeon ------------------------------------------------------------ */

.cadiem-comunicados__acordeon {
	--n-accordion-title-font-size: 1rem;
	--n-accordion-item-title-space-between: 0px;
	--n-accordion-item-title-distance-from-content: 0px;
	--n-accordion-title-normal-color: var(--comunicados-texto);
	--n-accordion-title-hover-color: var(--comunicados-verde);
	--n-accordion-title-active-color: var(--comunicados-verde);
	--n-accordion-icon-size: 15px;
	--n-accordion-padding: 14px 10px 14px 0px;
	border-style: none;
	margin-top: 10px;
}

.cadiem-comunicados__acordeon > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title {
	border-style: none;
}

.cadiem-comunicados__acordeon .e-n-accordion-item-title-text {
	font-family: "Albert Sans", Sans-serif;
	font-weight: 500;
}

/* El icono + / - va primero, como en el bloque de Convocatorias. */
.cadiem-comunicados__acordeon .e-n-accordion-item-title {
	--n-accordion-title-icon-order: -1;
	--n-accordion-icon-gap: 0 12px;
	align-items: flex-start;
}

.cadiem-comunicados__acordeon .e-n-accordion-item-title-icon {
	margin-top: 4px;
}

/* Una linea tenue separa un comunicado del siguiente. */
.cadiem-comunicados__acordeon .e-n-accordion-item:not(:last-child) {
	border-bottom: 1px solid var(--comunicados-linea);
}

/* La fecha, delante del titulo. */
.cadiem-comunicados__dia {
	display: inline-block;
	min-width: 6.4em;
	font-weight: 600;
	color: var(--comunicados-verde);
}

/* --- Cuerpo de cada comunicado ------------------------------------------- */

.cadiem-comunicados__cuerpo {
	--padding-top: 0px;
	--padding-bottom: 20px;
	--padding-left: 27px;
	--padding-right: 10px;
	border: none;

	/* Los comunicados traen correos y nombres largos que el navegador no
	   parte: "rominacardozoleon@mersanlaw.com" mide 306px y en un telefono de
	   375 empujaba la pagina a 381, o sea scroll horizontal en todo el sitio.
	   Que corten antes de desbordar. */
	overflow-wrap: break-word;
}

.cadiem-comunicados__cuerpo p,
.cadiem-comunicados__cuerpo li {
	font-family: "Albert Sans", Sans-serif;
	font-size: 15px;
	line-height: 1.75;
	color: var(--comunicados-texto);
	max-width: var(--comunicados-ancho);
}

.cadiem-comunicados__cuerpo p {
	margin: 0 0 12px;
}

.cadiem-comunicados__cuerpo a {
	color: var(--comunicados-verde);
}

/* La lista de requisitos va con a) b) c): el texto del ultimo punto remite
   "al inciso (b)". */
.cadiem-comunicados__letras {
	list-style: none;
	counter-reset: inciso;
	margin: 0 0 12px;
	padding-left: 0;
}

.cadiem-comunicados__letras > li {
	counter-increment: inciso;
	position: relative;
	padding-left: 2.1em;
	margin-bottom: 10px;
}

.cadiem-comunicados__letras > li::before {
	content: counter(inciso, lower-alpha) ")";
	position: absolute;
	left: 0;
	font-weight: 600;
	color: var(--comunicados-verde);
}

/* --- Adjuntos ------------------------------------------------------------ */

.cadiem-comunicados__adjuntos-titulo {
	margin: 18px 0 8px !important;
	font-size: 13px !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--comunicados-verde) !important;
}

.cadiem-comunicados__adjuntos {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--comunicados-linea);
	max-width: var(--comunicados-ancho);
}

.cadiem-comunicados__adjuntos > li {
	border-bottom: 1px solid var(--comunicados-linea);
}

/* Grilla y no flex: con flex, un nombre que ocupa dos lineas se lleva el
   icono a una linea propia. Las columnas son icono / nombre / peso. */
.cadiem-comunicados__adjuntos > li > a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	column-gap: 10px;
	padding: 10px 2px;
	font-weight: 600;
	text-decoration: none;
	color: var(--comunicados-verde);
}

.cadiem-comunicados__adjuntos > li > a:hover {
	text-decoration: underline;
}

.cadiem-comunicados__adjuntos svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	margin-top: .3em;
}

.cadiem-comunicados__peso {
	padding-left: 12px;
	margin-top: .2em;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--comunicados-texto);
	opacity: .7;
	text-decoration: none;
}

/* --- Enlace "ver todos" del home ----------------------------------------- */

.cadiem-comunicados__mas {
	margin-top: 18px;
}

.cadiem-comunicados__mas a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Albert Sans", Sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--comunicados-verde);
	text-decoration: none;
}

.cadiem-comunicados__mas a:hover {
	text-decoration: underline;
}

.cadiem-comunicados__mas a svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
	flex: 0 0 auto;
}

/* --- Variante del home --------------------------------------------------- */

.cadiem-comunicados--home .cadiem-comunicados__titulo .elementor-heading-title {
	font-size: 32px;
}

/* --- Pantallas chicas ---------------------------------------------------- */

@media (max-width: 767px) {
	.cadiem-comunicados {
		--padding-left: 16px;
		--padding-right: 16px;
	}

	.cadiem-comunicados__titulo .elementor-heading-title {
		font-size: 30px;
		letter-spacing: -0.5px;
	}

	.cadiem-comunicados--home .cadiem-comunicados__titulo .elementor-heading-title {
		font-size: 26px;
	}

	/* En una columna angosta la fecha ocupa su propia linea. */
	.cadiem-comunicados__dia {
		display: block;
		min-width: 0;
		margin-bottom: 2px;
	}

	.cadiem-comunicados__cuerpo {
		--padding-left: 27px;
		--padding-right: 0px;
	}

	/* El peso baja debajo del nombre, en su misma columna, en vez de
	   apretarlo contra el borde. */
	.cadiem-comunicados__adjuntos > li > a {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.cadiem-comunicados__peso {
		grid-column: 2;
		padding-left: 0;
		margin-top: 2px;
	}
}
