/* =========================================================
   Medifacil - Estilo "ficha de estudio" para carruseles UAGB
   Se aplica globalmente a todos los carruseles del sitio
   (existentes y nuevos), apuntando a las clases que ya usa
   Spectra/UAGB. No modifica el HTML, sólo lo reviste.
   ========================================================= */

:root{
	--mgc-navy:#0F3D6E;
	--mgc-blue:#0274BE;
	--mgc-teal:#1A8C84;
	--mgc-amber:#E0A43B;
	--mgc-paper:#FBF8F1;
	--mgc-paper-border:#E7DFCB;
}

/* --- Marco general de cada tarjeta (uagb/container dentro de cada slide) ---
       Especificidad extra (clase repetida) para ganarle a cualquier CSS
       específico-por-bloque que Spectra pueda haber generado para alguna
       tarjeta vieja en particular (ej: fondo transparente heredado). --- */
.uagb-slider-child-wrap .wp-block-uagb-container.uagb-is-root-container.wp-block-uagb-container.uagb-is-root-container{
	position:relative;
	background:
		repeating-linear-gradient(
			to bottom,
			transparent 0px,
			transparent 27px,
			rgba(15,61,110,0.05) 27px,
			rgba(15,61,110,0.05) 28px
		),
		var(--mgc-paper) !important;
	border:1px solid var(--mgc-paper-border) !important;
	border-radius:14px !important;
	box-shadow:0 4px 14px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.03);
	overflow:hidden;
	padding-left:24px !important;
}

/* Perforación tipo ficha física, a la izquierda */
.uagb-slider-child-wrap .wp-block-uagb-container.uagb-is-root-container::before{
	content:"";
	position:absolute;
	left:0; top:0; bottom:0;
	width:22px;
	background: radial-gradient(circle, #ffffff 4px, transparent 4.5px) 11px 22px / 100% 30px repeat-y;
	border-right:1px dashed var(--mgc-paper-border);
	z-index:1;
}

/* --- Layout: imagen a la izquierda, texto a la derecha en pantallas grandes;
       colapsa a imagen arriba / texto abajo en mobile.
       IMPORTANTE: escopado a .uagb-slider-child-wrap (sólo carruseles),
       combinado con especificidad extrema (clase repetida) para ganarle
       al CSS propio de Spectra/UAGB sin depender del orden de carga. --- */
.uagb-slider-child-wrap .uagb-ifb-content.uagb-ifb-content.uagb-ifb-content.uagb-ifb-content{
	display:grid !important;
	flex-direction:unset !important;
	flex-wrap:unset !important;
	grid-template-columns: 38% 1fr !important;
	grid-template-areas:
		"img title"
		"img desc" !important;
	column-gap:18px !important;
	row-gap:0 !important;
	align-items:start !important;
}
.uagb-slider-child-wrap .uagb-ifb-image-content.uagb-ifb-image-content.uagb-ifb-image-content.uagb-ifb-image-content{
	grid-area: img !important;
	order:unset !important;
	width:auto !important;
	max-width:none !important;
}
.uagb-slider-child-wrap .uagb-ifb-title-wrap.uagb-ifb-title-wrap.uagb-ifb-title-wrap.uagb-ifb-title-wrap{
	grid-area: title !important;
	margin-top:0 !important;
	order:unset !important;
}
.uagb-slider-child-wrap p.uagb-ifb-desc.uagb-ifb-desc.uagb-ifb-desc.uagb-ifb-desc{
	grid-area: desc !important;
	order:unset !important;
}

@media (max-width: 640px){
	.uagb-slider-child-wrap .uagb-ifb-content.uagb-ifb-content.uagb-ifb-content.uagb-ifb-content{
		grid-template-columns: 1fr !important;
		grid-template-areas:
			"img"
			"title"
			"desc" !important;
	}
}

/* --- Imagen: mantiene proporción vertical real --- */
.uagb-slider-child-wrap .uagb-ifb-image-content{
	border-radius:10px;
	overflow:hidden;
}
@media (max-width: 640px){
	.uagb-slider-child-wrap .uagb-ifb-image-content{
		border-radius:10px 10px 0 0;
	}
}
.uagb-slider-child-wrap .uagb-ifb-image-content img{
	width:100% !important;
	height:auto !important;
	display:block;
}

/* --- Categoría (kicker), sólo presente en tarjetas nuevas generadas por el plugin --- */
.uagb-slider-child-wrap .uagb-ifb-title .mgc-fc-kicker{
	display:block;
	font-family: Calibri, Arial, sans-serif;
	font-size:11px;
	font-weight:700;
	letter-spacing:1.5px;
	text-transform:uppercase;
	color:var(--mgc-teal);
	margin-bottom:4px;
}

/* --- Título tipo encabezado de ficha, con separador punteado --- */
.uagb-slider-child-wrap .uagb-ifb-title-wrap{
	border-bottom:2px dashed var(--mgc-paper-border);
	padding-bottom:10px;
	margin-bottom:10px !important;
}
.uagb-slider-child-wrap .uagb-ifb-title{
	font-family: Cambria, Georgia, serif !important;
	font-weight:800 !important;
	color:var(--mgc-navy) !important;
	line-height:1.3 !important;
}

/* --- Cuerpo del texto --- */
.uagb-slider-child-wrap .uagb-ifb-desc{
	font-size:14px !important;
	line-height:1.65 !important;
	color:#2b2b2b !important;
}

/* --- Contador "N/Total": lo convertimos en una pastilla flotante
       sobre la imagen (en vez de un párrafo aparte debajo) --- */
.uagb-slider-child-wrap p.has-border-color{
	position:absolute !important;
	top:12px;
	right:12px;
	z-index:5;
	background:var(--mgc-amber) !important;
	color:#1a1a1a !important;
	border:none !important;
	border-radius:20px !important;
	padding:4px 12px !important;
	font-size:12px !important;
	width:auto !important;
	box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

/* --- Flechas y borde del carrusel en paleta de marca --- */
.wp-block-uagb-slider .swiper-button-prev,
.wp-block-uagb-slider .swiper-button-next{
	color:var(--mgc-blue) !important;
}
.uagb-slider-container{
	border-color: var(--mgc-paper-border) !important;
	padding-bottom: 26px !important;
	position: relative;
}
.wp-block-uagb-slider .swiper-pagination{
	bottom: 4px !important;
}

/* --- Mobile: casi borde a borde, y un poco más de aire.
       Usamos márgenes negativos en píxeles (no vw) porque vw cambia
       dinámicamente en mobile cuando aparece/desaparece la barra de
       direcciones al hacer scroll, y eso desincroniza los cálculos
       internos de Swiper (el JS del carrusel), rompiendo el render
       de alguna tarjeta puntual. --- */
@media (max-width: 640px){
	.wp-block-uagb-slider{
		margin-left: -14px !important;
		margin-right: -14px !important;
		width: auto !important;
		max-width: none !important;
	}
	/* Reduce el espacio reservado para las flechas prev/next, para que
	   la tarjeta llegue más pegada al borde del marco del carrusel. */
	.uagb-slider-container{
		padding-left: 4px !important;
		padding-right: 4px !important;
	}
	.uagb-slides.uagb-swiper,
	.swiper-wrapper,
	.uagb-slider-child-wrap .swiper-content{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 480px){
	.uagb-slider-child-wrap .wp-block-uagb-container.uagb-is-root-container.wp-block-uagb-container.uagb-is-root-container{
		padding-left:20px !important;
	}
	.uagb-ifb-title{
		font-size:18px !important;
	}
	.uagb-ifb-desc{
		font-size:13.5px !important;
	}
}