/* Capsulas Informativas PJ - frontend
   Diseno de tarjeta centrada con icono circular. Los colores llegan por
   Custom Properties (--cpj-*) definidas por el modulo de Estilos. */

.capsulaspj-grid{
	display:grid;
	gap:2rem;
	/* Ocupa el 95% del ancho disponible y las tarjetas se estiran para llenar la fila */
	width:95%;
	margin-inline:auto;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	justify-content:center;
	align-items:start;
}
@media (max-width:340px){ .capsulaspj-grid{ grid-template-columns:1fr; } }

.capsulaspj-card{
	--cpj-bg:#fff;--cpj-title:#1e293b;--cpj-desc:#64748b;
	--cpj-btn-bg:#6d28d9;--cpj-btn-fg:#fff;--cpj-accent:#6d28d9;--cpj-radius:20px;
	width:100%;
	background:var(--cpj-bg);
	border:1px solid #e2e8f0;
	border-radius:var(--cpj-radius);
	padding:2rem 1.5rem;
	display:flex;flex-direction:column;align-items:center;gap:.85rem;
	text-align:center;
	box-shadow:var(--cpj-shadow, none);
	transition:transform .25s ease, box-shadow .25s ease;
}
.capsulaspj-card:hover{
	transform:translateY(-6px) scale(1.03);
	box-shadow:var(--cpj-shadow-hover, 0 12px 32px color-mix(in srgb, var(--cpj-accent) 22%, transparent));
}

.capsulaspj-card__icon{
	width:80px;height:80px;min-width:80px;min-height:80px;
	border-radius:var(--cpj-icon-radius, 50%);
	display:flex;align-items:center;justify-content:center;
	font-size:2rem;line-height:1;overflow:hidden;
	background:var(--cpj-icon-bg, color-mix(in srgb, var(--cpj-accent) 16%, #fff));
	color:var(--cpj-accent);
	transition:background .25s ease;
}
.capsulaspj-card__icon img{ width:80px;height:80px;object-fit:cover;border-radius:inherit; }
.capsulaspj-card:hover .capsulaspj-card__icon{
	background:var(--cpj-icon-bg, color-mix(in srgb, var(--cpj-accent) 28%, #fff));
}

/* ===== Formas del recuadro del icono ===== */
/* Circulo: siempre redondo, ignora el radio */
.capsulaspj-card__icon--circulo{ border-radius:50%; }
/* Cuadrado: el radio controla el redondeo de esquinas (0% recto, 50% muy redondeado) */
.capsulaspj-card__icon--cuadrado{ border-radius:var(--cpj-icon-radius, 16%); }
/* Rombo: clip-path en diamante. Con radio alto, las puntas se suavizan */
.capsulaspj-card__icon--rombo{
	border-radius:0;
	clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.capsulaspj-card__icon--rombo.capsulaspj-card__icon{ overflow:visible; }
.capsulaspj-card__icon--rombo{ font-size:1.5rem; }
/* Hexagono: clip-path de 6 lados */
.capsulaspj-card__icon--hexagono{
	border-radius:0;
	clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.capsulaspj-card__icon--hexagono.capsulaspj-card__icon{ overflow:visible; }
.capsulaspj-card__icon--hexagono{ font-size:1.7rem; }
/* La imagen dentro de rombo/hexagono se recorta con la misma figura */
.capsulaspj-card__icon--rombo img{ clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius:0; }
.capsulaspj-card__icon--hexagono img{ clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); border-radius:0; }

/* Alineacion del icono/imagen dentro de la tarjeta */
.capsulaspj-card--ico-left{ align-items:flex-start; text-align:left; }
.capsulaspj-card--ico-right{ align-items:flex-end; text-align:right; }
.capsulaspj-card--ico-center{ align-items:center; text-align:center; }
/* El boton ocupa todo el ancho en cualquier alineacion */
.capsulaspj-card--ico-left .capsulaspj-card__cta,
.capsulaspj-card--ico-right .capsulaspj-card__cta{ align-self:stretch; }

.capsulaspj-card__title{
	font-size:1.15rem;font-weight:800;line-height:1.3;color:var(--cpj-title);
}
.capsulaspj-card__desc{
	font-size:.875rem;line-height:1.5;color:var(--cpj-desc);
}
.capsulaspj-card__badge{
	display:inline-block;padding:.25rem .75rem;border-radius:999px;
	font-size:.75rem;font-weight:600;
	background:color-mix(in srgb, var(--cpj-accent) 16%, #fff);
	color:var(--cpj-accent);
}
.capsulaspj-card__cta{
	display:block;width:100%;align-self:stretch;margin-top:.5rem;box-sizing:border-box;
	padding:.6rem 1rem;border-radius:12px;
	background:var(--cpj-btn-bg);color:var(--cpj-btn-fg);
	font-size:.875rem;font-weight:600;text-align:var(--cpj-btn-align,center);text-decoration:none;
	transition:filter .2s ease;
}
.capsulaspj-card__cta:hover{ filter:brightness(.9); }
.capsulaspj-card__cta:focus-visible{ outline:3px solid var(--cpj-title);outline-offset:3px; }
/* Alineacion del texto del boton (el boton mantiene el ancho completo) */
.capsulaspj-card__cta--left{ --cpj-btn-align:left; }
.capsulaspj-card__cta--center{ --cpj-btn-align:center; }
.capsulaspj-card__cta--right{ --cpj-btn-align:right; }

.capsulaspj-empty{ color:#64748b;text-align:center; }

@media (prefers-reduced-motion:reduce){
	.capsulaspj-card,.capsulaspj-card__icon,.capsulaspj-card__cta{ transition:none; }
	.capsulaspj-card:hover{ transform:none; }
}

/* Paginacion (sistema completo getListFooter) */
.capsulaspj-form{ margin:0; }
.capsulaspj-pagination{ margin-top:1.5rem; }
.capsulaspj-pagination .pagination__wrapper{ display:flex;flex-direction:column;align-items:center;gap:.6rem; }
.capsulaspj-pagination .pagination{ display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;padding:0;margin:0;list-style:none; }
.capsulaspj-pagination .pagination>li{ list-style:none;margin:0; }
.capsulaspj-pagination .pagination>li>a,
.capsulaspj-pagination .pagination>li>span{ display:inline-block;padding:.4rem .75rem;border:1px solid #e2e8f0;border-radius:8px;text-decoration:none;color:var(--cpj-accent,#6d28d9);background:#fff;line-height:1.2; }
.capsulaspj-pagination .pagination>li>a:hover{ background:color-mix(in srgb, var(--cpj-accent,#6d28d9) 10%, #fff); }
.capsulaspj-pagination .pagination>li.active>a,
.capsulaspj-pagination .pagination>li.active>span{ background:var(--cpj-accent,#6d28d9);color:#fff;border-color:var(--cpj-accent,#6d28d9); }
.capsulaspj-pagination .pagination>li.disabled>span{ color:#cbd5e1;background:#f8fafc; }
.capsulaspj-pagination .counter{ font-size:.85rem;color:#64748b;text-align:center; }
.capsulaspj-pagination select,
.capsulaspj-pagination .form-select{ padding:.35rem .5rem;border:1px solid #e2e8f0;border-radius:8px;margin:0 .35rem; }
.capsulaspj-pagination .limit{ font-size:.85rem;color:#64748b; }

/* ===== Agrupacion en modulo: Ver mas ===== */
.capsulaspj-vermas{ margin-top:1.25rem;text-align:center; }
.capsulaspj-vermas__btn{
	display:inline-block;padding:.55rem 1.4rem;border:1px solid var(--cpj-accent,#6d28d9);
	border-radius:10px;background:var(--cpj-accent,#6d28d9);color:#fff;
	font-weight:600;font-size:.9rem;cursor:pointer;transition:filter .2s ease;
}
.capsulaspj-vermas__btn:hover{ filter:brightness(.92); }

/* ===== Agrupacion en modulo: Carrusel ===== */
.capsulaspj-carrusel__ctrl{ display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.25rem; }
.capsulaspj-carrusel__flecha{
	width:42px;height:42px;border-radius:50%;border:1px solid #e2e8f0;background:#fff;
	color:var(--cpj-accent,#6d28d9);font-size:1.5rem;line-height:1;cursor:pointer;
	display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.capsulaspj-carrusel__flecha:hover:not(:disabled){ background:color-mix(in srgb, var(--cpj-accent,#6d28d9) 10%, #fff); }
.capsulaspj-carrusel__flecha:disabled{ opacity:.4;cursor:default; }
.capsulaspj-carrusel__puntos{ display:flex;gap:.4rem;align-items:center; }
.capsulaspj-carrusel__punto{
	width:11px;height:11px;border-radius:50%;border:none;padding:0;cursor:pointer;
	background:#cbd5e1;transition:background .2s ease;
}
.capsulaspj-carrusel__punto.is-active{ background:var(--cpj-accent,#6d28d9); }

/* ===== Salvaguardas responsive: nada se sale de pantalla ===== */
.capsulaspj-grid{ max-width:100%; }
/* min-width:0 permite que las tarjetas encojan por debajo del ancho de su contenido */
.capsulaspj-grid > *{ min-width:0; }
/* Sin overflow:hidden en la tarjeta para no recortar el anillo de foco (WCAG 2.4.7/2.4.11) */
.capsulaspj-card{ box-sizing:border-box; max-width:100%; min-width:0; }
/* Texto largo (URLs, palabras sin espacios) se parte en vez de desbordar */
.capsulaspj-card__title,
.capsulaspj-card__desc,
.capsulaspj-card__cta{ overflow-wrap:anywhere; word-break:break-word; }

/* ===== Accesibilidad adicional (WCAG 2.2) ===== */

/* Punto 6 - Tamano minimo de objetivos tactiles (WCAG 2.5.8): el boton garantiza >=44px */
.capsulaspj-card__cta{ min-height:44px; }

/* Punto 5 - Alto Contraste de Windows / forced-colors.
   En ese modo el sistema sustituye los colores; aseguramos bordes y foco visibles. */
@media (forced-colors: active){
	.capsulaspj-card{ border:1px solid CanvasText; }
	.capsulaspj-card__icon{ border:1px solid CanvasText; }
	.capsulaspj-card__cta{ border:1px solid ButtonText; forced-color-adjust:none; background:ButtonFace; color:ButtonText; }
	.capsulaspj-card__cta:focus-visible{ outline:3px solid Highlight; outline-offset:3px; }
}

/* Punto 8 - Modo oscuro (prefers-color-scheme).
   Solo ajusta los valores NEUTROS por defecto. Si una capsula tiene un Estilo
   con colores propios (variables en el atributo style), esos mandan y se respetan. */
@media (prefers-color-scheme: dark){
	/* El color de la tarjeta lo define el Estilo (crea un estilo oscuro si lo
	   quieres); aqui solo adaptamos los elementos neutros que no controla el editor. */
	.capsulaspj-card{ border-color:#334155; }
	.capsulaspj-empty{ color:#94a3b8; }
}