/*
 * GR Formación — sitio público (cronograma, ficha, inscripción).
 * Auto-contenido y con namespace .grf-pub para no colisionar con el tema.
 * Usa unidades relativas y respeta el color del tema donde es posible;
 * define sus propias variables con prefijo para no filtrar a la página.
 */

.grf-pub {
	--grfp-primary: #4f46e5;
	--grfp-primary-dark: #4338ca;
	--grfp-text: #1f2937;
	--grfp-muted: #6b7280;
	--grfp-border: #e5e7eb;
	--grfp-surface: #ffffff;
	--grfp-radius: 12px;
	--grfp-success-bg: #ecfdf5;
	--grfp-success: #059669;
	--grfp-error-bg: #fef2f2;
	--grfp-error: #dc2626;

	max-width: 1080px;
	margin: 0 auto;
	color: var(--grfp-text);
	font-size: 1rem;
	line-height: 1.6;
}

.grf-pub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
}

.grf-pub-card {
	background: var(--grfp-surface);
	border: 1px solid var(--grfp-border);
	border-radius: var(--grfp-radius);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.grf-pub-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

.grf-pub-card__modality {
	display: inline-block;
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--grfp-primary);
	background: rgba(79, 70, 229, 0.1);
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
}

.grf-pub-card > .grf-pub-badge--modality { align-self: flex-start; }

.grf-pub-card__title {
	font-size: 1.15rem;
	margin: 0.25rem 0 0;
	line-height: 1.3;
}

.grf-pub-card__date {
	color: var(--grfp-muted);
	font-size: 0.9rem;
	margin: 0;
}

.grf-pub-card__cta {
	margin-top: auto;
	color: var(--grfp-primary);
	font-weight: 600;
	text-decoration: none;
}

.grf-pub-card__cta:hover {
	text-decoration: underline;
}

.grf-pub__empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--grfp-muted);
}

.grf-pub__back {
	display: inline-block;
	margin-bottom: 1rem;
	color: var(--grfp-muted);
	text-decoration: none;
	font-size: 0.9rem;
}

.grf-pub-detail {
	background: var(--grfp-surface);
	border: 1px solid var(--grfp-border);
	border-radius: var(--grfp-radius);
	padding: 2rem;
}

.grf-pub-detail__title {
	margin: 0.5rem 0 1rem;
	font-size: 1.75rem;
	line-height: 1.25;
}

.grf-pub-detail__meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem 1.5rem;
	margin: 0 0 1.5rem;
}

.grf-pub-detail__meta dt {
	color: var(--grfp-muted);
	font-weight: 600;
}

.grf-pub-detail__meta dd {
	margin: 0;
}

.grf-pub-form {
	border-top: 1px solid var(--grfp-border);
	padding-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.grf-pub-form h3 {
	margin: 0;
}

.grf-pub-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
}

.grf-pub-form label {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.grf-pub-form input[type="text"],
.grf-pub-form input[type="email"] {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--grfp-border);
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 400;
}

.grf-pub-form input:focus {
	outline: 2px solid var(--grfp-primary);
	outline-offset: 1px;
	border-color: var(--grfp-primary);
}

.grf-pub-form__consent {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.grf-pub-form__submit {
	align-self: flex-start;
	background: var(--grfp-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 0.7rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.grf-pub-form__submit:hover {
	background: var(--grfp-primary-dark);
}

.grf-pub-form__closed {
	border-top: 1px solid var(--grfp-border);
	padding-top: 1.5rem;
	color: var(--grfp-muted);
}

.grf-pub-alert {
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
	margin-bottom: 1.25rem;
	font-weight: 500;
}

.grf-pub-alert--success {
	background: var(--grfp-success-bg);
	color: var(--grfp-success);
}

.grf-pub-alert--error {
	background: var(--grfp-error-bg);
	color: var(--grfp-error);
}

@media (max-width: 600px) {
	.grf-pub-form__row {
		grid-template-columns: 1fr;
	}

	.grf-pub-detail {
		padding: 1.25rem;
	}
}

/* ── v1.1 Vitrina: super filtro, tarjetas de término, CTA externo ───────── */
.grf-pub-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1.25rem; }
.grf-pub-filters__select { padding: .5rem .75rem; border: 1px solid #d7dbe0; border-radius: 8px; background: #fff; font: inherit; }
.grf-pub-filters__submit { padding: .5rem 1rem; border: 0; border-radius: 8px; background: var(--grf-pub-primary, #4f46e5); color: #fff; cursor: pointer; }
.grf-pub-filters__clear { align-self: center; color: #6b7280; text-decoration: none; font-size: .9em; }
.grf-pub-card__cta--large { display: inline-block; margin-top: 1rem; padding: .7rem 1.25rem; font-weight: 600; }
.grf-pub-detail__nolink { margin-top: 1rem; color: #6b7280; font-style: italic; }
.grf-pub__pager { text-align: center; margin: 1.5rem 0; }
.grf-pub__more { display: inline-block; padding: .6rem 1.25rem; border: 1px solid #d7dbe0; border-radius: 8px; text-decoration: none; color: inherit; }

.grf-pub-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.grf-pub-term { display: block; padding: 1.25rem; border: 1px solid #eceef1; border-radius: 12px; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; background: #fff; }
.grf-pub-term:hover { box-shadow: 0 6px 20px rgba(20, 30, 60, .08); transform: translateY(-2px); }
.grf-pub-term__icon { width: 48px; height: 48px; object-fit: contain; margin-bottom: .75rem; }
.grf-pub-term__name { margin: 0 0 .35rem; font-size: 1.05rem; }
.grf-pub-term__desc { margin: 0 0 .6rem; color: #6b7280; font-size: .92em; }
.grf-pub-term__count { font-size: .8em; color: var(--grf-pub-primary, #4f46e5); font-weight: 600; }

/* ── Agenda por filas (tabla) — modo vitrina ─────────────────────────── */
.grf-pub-table-wrap { overflow-x: auto; }
.grf-pub-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.grf-pub-table thead th {
	text-align: left; padding: .65rem 1rem; font-size: .72rem; letter-spacing: .06em;
	text-transform: uppercase; color: var(--grfp-muted); border-bottom: 1px solid var(--grfp-border); font-weight: 600;
}
.grf-pub-table th.grf-pub-th--cta { text-align: right; }
.grf-pub-row { border-bottom: 1px solid var(--grfp-border); transition: background .12s; }
.grf-pub-row:hover { background: #f9fafb; }
.grf-pub-row td { padding: 1rem; vertical-align: middle; }

.grf-pub-date { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; min-width: 2.6rem; }
.grf-pub-date__day { font-size: 1.35rem; font-weight: 700; color: var(--grfp-text); }
.grf-pub-date__month { font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: var(--grfp-primary); }
.grf-pub-date__time { font-size: .72rem; color: var(--grfp-muted); margin-top: .15rem; }

.grf-pub-row__topic a { color: var(--grfp-text); font-weight: 600; text-decoration: none; }
.grf-pub-row__topic a:hover { color: var(--grfp-primary); text-decoration: underline; }
.grf-pub-row__tags { display: block; margin-top: .3rem; font-size: .78rem; color: var(--grfp-muted); }

.grf-pub-badge {
	display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .6rem; margin: .15rem .25rem .15rem 0;
	border-radius: 999px; font-size: .82rem; line-height: 1; white-space: nowrap;
	background: #f3f4f6; color: var(--grfp-text);
}
.grf-pub-badge--profile { background: #eef2ff; color: var(--grfp-primary-dark); }
.grf-pub-badge--editorial { background: #f3f4f6; color: var(--grfp-text); font-weight: 600; }
.grf-pub-badge--modality { background: #f3f4f6; color: var(--grfp-text); font-weight: 600; text-transform: capitalize; }
/* Color por modalidad: Virtual (azul), Presencial (verde), Híbrida (ámbar). */
.grf-pub-badge--mod-virtual { background: #e0f2fe; color: #0369a1; }
.grf-pub-badge--mod-in-person { background: #dcfce7; color: #15803d; }
.grf-pub-badge--mod-hybrid { background: #fef3c7; color: #b45309; }
.grf-pub-badge--empty { background: transparent; color: #cbd5e1; padding-left: 0; }
.grf-pub-badge__icon { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.grf-pub-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grfp-primary); }

.grf-pub-badge__link { display: inline-flex; text-decoration: none; color: inherit; border-radius: 999px; transition: filter .15s ease, opacity .15s ease; }
.grf-pub-badge__link:hover { filter: brightness(.96); }
.grf-pub-row__tags .grf-pub-badge__link { color: inherit; text-decoration: none; }
.grf-pub-row__tags .grf-pub-badge__link:hover { color: var(--grfp-primary); text-decoration: underline; }

.grf-pub-logo { max-height: 30px; max-width: 120px; object-fit: contain; vertical-align: middle; margin: .1rem .35rem .1rem 0; }
.grf-pub-row__cta { text-align: right; white-space: nowrap; }

.grf-pub-card__badges { margin: .25rem 0 .75rem; display: flex; flex-wrap: wrap; }

/* Colapso responsive: en móvil cada fila se apila con etiquetas. */
@media (max-width: 720px) {
	.grf-pub-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.grf-pub-table, .grf-pub-table tbody, .grf-pub-row, .grf-pub-row td { display: block; width: 100%; }
	.grf-pub-row { padding: .5rem 0; border: 1px solid var(--grfp-border); border-radius: var(--grfp-radius); margin-bottom: .9rem; }
	.grf-pub-row td { padding: .4rem 1rem; text-align: left; }
	.grf-pub-row td[data-label]::before {
		content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase;
		letter-spacing: .05em; color: var(--grfp-muted); margin-bottom: .2rem; font-weight: 600;
	}
	.grf-pub-row__cta, .grf-pub-table th.grf-pub-th--cta { text-align: left; }
}

/* ── Super filtro (etiqueta arriba, opción debajo) — fiel a la maqueta ── */
.grf-pub-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .85rem; padding: 1rem 0 1.25rem; }
.grf-pub-filter { display: flex; flex-direction: column; gap: .35rem; min-width: 120px; }
.grf-pub-filter__label { font-size: .8rem; font-weight: 600; color: var(--grfp-muted); }
.grf-pub-filter__select {
	appearance: none; -webkit-appearance: none; background: var(--grfp-surface);
	border: 1px solid var(--grfp-border); border-radius: 10px; padding: .6rem 2rem .6rem .85rem; font-size: .95rem; color: var(--grfp-text);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .6rem center; background-size: 18px; cursor: pointer; min-width: 130px;
}
.grf-pub-filter__select:focus { outline: 2px solid var(--grfp-primary); outline-offset: 1px; border-color: var(--grfp-primary); }
.grf-pub-filters__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; align-self: flex-end; }
.grf-pub-filters__submit { padding: .6rem 1.1rem; border: 0; border-radius: 10px; background: var(--grfp-primary); color: #fff; font-weight: 600; cursor: pointer; }
.grf-pub-filters__clear {
	display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border: 1px solid var(--grfp-border);
	border-radius: 10px; background: var(--grfp-surface); color: var(--grfp-text); text-decoration: none; font-size: .92rem;
}
.grf-pub-filters__clear:hover { border-color: var(--grfp-primary); color: var(--grfp-primary); }
.grf-pub-filters__clear-ic { font-size: 1.05em; line-height: 1; }

/* ── Cabecera de "página de término" (Perfil / Eje) ────────────────────── */
.grf-pub-hero { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0 .5rem; }
.grf-pub-hero__icon { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; flex: 0 0 auto; }
.grf-pub-hero__kind { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grfp-primary); font-weight: 700; }
.grf-pub-hero__title { margin: .1rem 0 .25rem; font-size: 1.6rem; }
.grf-pub-hero__desc { margin: 0 0 .3rem; color: var(--grfp-muted); }
.grf-pub-hero__count { font-size: .85rem; color: var(--grfp-muted); font-weight: 600; }

/* ── Calendario mensual [grf_calendario] ───────────────────────────────── */
.grf-pub-cal { max-width: 360px; border: 1px solid var(--grfp-border); border-radius: var(--grfp-radius); padding: 1rem 1.1rem; background: var(--grfp-surface); }
.grf-pub-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.grf-pub-cal__title { font-weight: 700; color: var(--grfp-primary); text-transform: capitalize; }
.grf-pub-cal__nav { text-decoration: none; color: var(--grfp-muted); font-size: 1.4rem; line-height: 1; padding: 0 .4rem; border-radius: 8px; }
.grf-pub-cal__nav:hover { background: #f3f4f6; color: var(--grfp-primary); }
.grf-pub-cal__grid { width: 100%; border-collapse: collapse; text-align: center; }
.grf-pub-cal__grid th { font-size: .72rem; color: var(--grfp-muted); font-weight: 600; padding: .3rem 0; }
.grf-pub-cal__grid td { padding: .18rem 0; height: 2.1rem; }
.grf-pub-cal__num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: .9rem; color: var(--grfp-text); }
.grf-pub-cal__num--event { background: var(--grfp-primary); color: #fff; font-weight: 700; text-decoration: none; }
.grf-pub-cal__num--event:hover { background: var(--grfp-primary-dark); }
.grf-pub-cal__day-list { margin-top: 1rem; border-top: 1px solid var(--grfp-border); padding-top: .75rem; }
.grf-pub-cal__day-list h3 { margin: 0 0 .5rem; font-size: 1rem; text-transform: capitalize; }
.grf-pub-cal__day-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.grf-pub-cal__day-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.grf-pub-cal__event { font-weight: 600; text-decoration: none; color: var(--grfp-text); }
.grf-pub-cal__event:hover { color: var(--grfp-primary); }
.grf-pub-cal__time { font-size: .82rem; color: var(--grfp-muted); }

/* ── Conmutador de vista del cronograma (Lista / Calendario) ───────────── */
.grf-pub-viewswitch { display: inline-flex; gap: .25rem; padding: .25rem; margin: 0 0 1rem; border: 1px solid var(--grfp-border); border-radius: 12px; background: #f9fafb; }
.grf-pub-viewswitch__btn {
	display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 9px;
	text-decoration: none; color: var(--grfp-muted); font-size: .9rem; font-weight: 600; transition: background .12s, color .12s;
}
.grf-pub-viewswitch__btn:hover { color: var(--grfp-text); }
.grf-pub-viewswitch__btn.is-active { background: var(--grfp-surface); color: var(--grfp-primary); box-shadow: 0 1px 2px rgba(20,30,60,.08); }
.grf-pub-viewswitch__ic { flex: 0 0 auto; }

/* ── Hero banner genérico (perfil / eje / evento) ──────────────────────── */
/* Variables configurables desde Ajustes → Marca (con valores por defecto):
   --grf-hero-h     alto fijo del banner (si no se define, es automático)
   --grf-hero-pad   padding interno
   --grf-hero-scale factor de escala de la imagen (1 = normal) */
.grf-pub-herobanner { border-radius: var(--grfp-radius); color: #fff; margin: 0 0 1.5rem; overflow: hidden; }
.grf-pub-herobanner__inner {
	display: flex; align-items: center; gap: 2rem;
	padding: var(--grf-hero-pad, 2.5rem);
	max-width: 1100px; margin: 0 auto;
	min-height: var(--grf-hero-h, auto);
}
.grf-pub-herobanner__text { flex: 1 1 0; min-width: 0; }

/* Icono sobre una card blanca flotante y REDONDEADA (círculo); la etiqueta
   (Perfil/Eje) va debajo. */
.grf-pub-herobanner__icon {
	display: block;
	width: 72px; height: 72px; object-fit: contain;
	background: #fff; border-radius: 50%; padding: 14px;
	margin: 0 0 .85rem; box-shadow: 0 8px 20px rgba(15,23,42,.18);
	box-sizing: border-box;
}
.grf-pub-herobanner__kind { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .9; font-weight: 700; }
.grf-pub-herobanner__title { margin: .3rem 0 .4rem; font-size: 2.1rem; line-height: 1.15; color: #fff; }
.grf-pub-herobanner__subtitle { margin: 0; font-size: 1.05rem; opacity: .92; max-width: 60ch; }

/* Dos columnas: info a la izquierda, imagen cargada a la derecha, con ALTURA
   CONTROLADA (la imagen se recorta con object-fit, no estira el banner) y
   ESCALA configurable (zoom del contenido dentro de su marco). */
.grf-pub-herobanner__media { flex: 0 0 40%; max-width: 40%; overflow: hidden; border-radius: calc(var(--grfp-radius) - 4px); box-shadow: 0 10px 30px rgba(15,23,42,.25); }
.grf-pub-herobanner__media img {
	width: 100%; height: var(--grf-hero-h, 260px);
	object-fit: cover; display: block;
	transform: scale(var(--grf-hero-scale, 1)); transform-origin: center;
}

@media (max-width: 720px) {
	.grf-pub-herobanner__inner { flex-direction: column; align-items: flex-start; text-align: left; gap: 1.25rem; }
	.grf-pub-herobanner__title { font-size: 1.6rem; }
	.grf-pub-herobanner__media { flex-basis: auto; max-width: 100%; width: 100%; }
	.grf-pub-herobanner__media img { height: var(--grf-hero-h, 180px); }
}

/* ── Barra de conmutadores (vista + formato) ───────────────────────────── */
.grf-pub-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1rem; }

/* ── Carrusel de secciones de términos (perfil / eje / editorial) ──────── */
.grf-pub-carousel { position: relative; display: flex; align-items: center; gap: .5rem; }
.grf-pub-terms--carousel { display: flex; overflow-x: auto; gap: 1rem; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .25rem 0 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.grf-pub-terms--carousel .grf-pub-term { flex: 0 0 240px; scroll-snap-align: start; }
.grf-pub-carousel__nav {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--grfp-border);
	background: var(--grfp-surface); color: var(--grfp-text); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .12s, color .12s;
}
.grf-pub-carousel__nav:hover { background: var(--grfp-primary); color: #fff; border-color: var(--grfp-primary); }
@media (max-width: 640px) {
	.grf-pub-carousel__nav { display: none; }
	.grf-pub-terms--carousel .grf-pub-term { flex-basis: 78%; }
}