/* ============================================================
 * Eventos ISIL Custom — frontend styles
 *
 * Convención de clases: BEM con prefijo "eisilc-"
 *   .eisilc-{bloque}__{elemento}--{modificador}
 *
 * Ningún selector debe colisionar con otros plugins/temas: si
 * añades clases, mantén el prefijo "eisilc-".
 * ============================================================ */

/* ============================================================
 * 0. Scoped reset — aísla nuestros componentes de estilos
 *    heredados (Elementor, tema, otros plugins).
 *
 *    Sólo aplica DENTRO de nuestros contenedores con prefijo
 *    "eisilc-". El resto del sitio no se ve afectado. Nuestras
 *    reglas posteriores re-aplican los estilos correctos.
 * ============================================================ */

.eisilc-searchx,
.eisilc-searchx *,
.eisilc-searchx *::before,
.eisilc-searchx *::after,
.eisilc-search,
.eisilc-search *,
.eisilc-list,
.eisilc-list *,
.eisilc-cards,
.eisilc-cards *,
.eisilc-rows,
.eisilc-rows *,
.eisilc-table-wrap,
.eisilc-table-wrap *,
.eisilc-pagination,
.eisilc-pagination *,
.eisilc-datebox,
.eisilc-datebox *,
.eisilc-modalidad,
.eisilc-modalidad *,
.eisilc-cal,
.eisilc-cal *,
.eisilc-agenda,
.eisilc-agenda *,
.eisilc-sync,
.eisilc-sync *,
.eisilc-countdown,
.eisilc-countdown *,
.eisilc-state {
	box-sizing: border-box;
}

.eisilc-searchx button,
.eisilc-search button,
.eisilc-cards button,
.eisilc-rows button {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	border-radius: 0;
	outline: 0;
}

.eisilc-searchx input,
.eisilc-searchx select,
.eisilc-search input,
.eisilc-search select {
	appearance: auto;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	line-height: inherit;
	box-shadow: none;
	border-radius: 0;
	outline: 0;
	min-height: 0;
	height: auto;
}

.eisilc-searchx input[type="search"]::-webkit-search-decoration,
.eisilc-searchx input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.eisilc-searchx h1,
.eisilc-searchx h2,
.eisilc-searchx h3,
.eisilc-searchx h4,
.eisilc-searchx h5,
.eisilc-searchx h6,
.eisilc-cards h1,
.eisilc-cards h2,
.eisilc-cards h3,
.eisilc-cards h4,
.eisilc-cards h5,
.eisilc-cards h6,
.eisilc-rows h1,
.eisilc-rows h2,
.eisilc-rows h3,
.eisilc-rows h4,
.eisilc-rows h5,
.eisilc-rows h6,
.eisilc-table h1,
.eisilc-table h2,
.eisilc-table h3,
.eisilc-table h4,
.eisilc-table h5,
.eisilc-table h6 {
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}

.eisilc-searchx p,
.eisilc-cards p,
.eisilc-rows p,
.eisilc-table p {
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: inherit;
	color: inherit;
}

.eisilc-searchx a,
.eisilc-cards a,
.eisilc-rows a,
.eisilc-table a {
	text-decoration: none;
	color: inherit;
	background: none;
	border: 0;
	box-shadow: none;
}

.eisilc-searchx ul,
.eisilc-searchx ol,
.eisilc-searchx li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eisilc-searchx img,
.eisilc-cards img,
.eisilc-rows img,
.eisilc-table img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}

.eisilc-searchx svg,
.eisilc-cards svg,
.eisilc-rows svg,
.eisilc-pagination svg {
	display: block;
	max-width: 100%;
	max-height: 100%;
	fill: none;
}

.eisilc-searchx table,
.eisilc-table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	width: 100%;
}

.eisilc-searchx th,
.eisilc-searchx td,
.eisilc-table th,
.eisilc-table td {
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	text-align: left;
	vertical-align: middle;
}

/* ============================================================
 * 1. Badge de estado del evento
 * ============================================================ */

.eisilc-state {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	vertical-align: middle;
}

.eisilc-state.state-proximo {
	background: #e1ecf4;
	color: #1c5985;
}
.eisilc-state.state-en_curso {
	background: #dff5dd;
	color: #205c1d;
}
.eisilc-state.state-reciente {
	background: #fef3c7;
	color: #7a5b00;
}
.eisilc-state.state-pasado {
	background: #f0f0f1;
	color: #50575e;
}
.eisilc-state.state-oculto {
	background: #fde2e2;
	color: #8a1f1f;
}

/* ============================================================
 * 2. Datebox — número grande + mes/año + día/hora + modalidad
 * ============================================================ */

.eisilc-datebox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: inherit;
}

.eisilc-datebox__day {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: #111;
	max-width: 65px;
	text-align: left;
}

.eisilc-datebox__when {
	border-left: 1px solid #d4d4d4;
	padding-left: 10px;
	line-height: 1.2;
}

.eisilc-datebox__monthyear {
	font-weight: 700;
	font-size: 0.95rem;
	color: #111;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.eisilc-datebox__weektime {
	font-size: 0.85rem;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Línea "FINALIZA: 27.JUN.2026 3:00 PM" — solo en eventos multi-día.
 * El label va en negrita; el resto hereda el estilo en mayúsculas. */
.eisilc-datebox__finaliza {
	margin-top: 3px;
	font-size: 0.78rem;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.eisilc-datebox__finaliza-label {
	font-weight: 700;
	color: #555;
}

/* ============================================================
 * 2b. Modalidad — bloque independiente (label + valor)
 *     Diseñado para componer junto al datebox (ej. flex side-by-side)
 *     o usarse solo.
 * ============================================================ */

.eisilc-modalidad {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.2;
	font-family: inherit;
}

.eisilc-modalidad__label {
	font-size: 0.85rem;
	color: #777;
}

/* El valor hereda tipografía/color del elemento de Elementor (no se fuerza
 * aquí), para que se pueda controlar con clases globales desde el editor. */
.eisilc-modalidad__value {
	font-family: inherit;
}

/* Organiza ([eisilc_event_organiza]) — label + valor en línea. */
.eisilc-organiza {
	font-family: inherit;
	line-height: 1.3;
}

.eisilc-organiza__label {
	font-size: 0.85rem;
	color: #777;
	margin-right: 4px;
}

/* Igual que modalidad: hereda del elemento de Elementor para permitir
 * estilizarlo con clases globales desde el editor. */
.eisilc-organiza__value {
	font-family: inherit;
}

/* ============================================================
 * 2c. Calendario mensual
 * ============================================================ */

.eisilc-cal {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 16px;
	font-family: inherit;
	box-sizing: border-box;
	max-width: 360px;
}

.eisilc-cal__header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
}

.eisilc-cal__title {
	flex: 1;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #111;
	text-align: center;
}

.eisilc-cal__today {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 99px;
	background: transparent;
	color: #000000 !important;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid #000000;
	white-space: nowrap;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.eisilc-cal__today:hover {
	background: #000000 !important;
	color: #fff !important;
}

.eisilc-cal__nav {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	color: #555;
	text-decoration: none;
	font-size: 18px;
	line-height: 1;
	transition: background-color 0.15s ease;
}

.eisilc-cal__nav:hover {
	background: #f6f7f7;
	color: #111;
}

.eisilc-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.eisilc-cal__weekday {
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: #999;
	padding: 6px 0;
	text-transform: uppercase;
}

.eisilc-cal__day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	border-radius: 8px;
	color: #333;
	text-decoration: none;
	font-size: 13px;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.eisilc-cal__day.is-empty {
	pointer-events: none;
}

.eisilc-cal__day:hover {
	background: rgba(0, 174, 239, 0.08);
	color: #00aeef !important;
}

.eisilc-cal__day.is-today .eisilc-cal__day-num {
	font-weight: 700;
	color: #00aeef;
}

.eisilc-cal__day.is-selected {
	background: #00aeef;
	color: #fff !important;
}

.eisilc-cal__day.is-selected:hover {
	background: #0096cc;
	color: #fff !important;
}

.eisilc-cal__day.is-selected .eisilc-cal__day-num {
	color: #fff;
}

.eisilc-cal__day-num {
	line-height: 1;
}

.eisilc-cal__day-dot {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #00aeef;
}

.eisilc-cal__day.is-selected .eisilc-cal__day-dot {
	background: #111;
}

/* ============================================================
 * 2d. Agenda (timeline)
 * ============================================================ */

.eisilc-agenda {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-family: inherit;
}

.eisilc-agenda__empty {
	padding: 24px;
	text-align: center;
	background: #f6f7f7;
	border-radius: 8px;
	color: #777;
	margin: 0;
}

.eisilc-agenda__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	margin-bottom: 4px;
}

.eisilc-agenda__filters-label {
	font-size: 11px;
	font-weight: 600;
	color: #999;
	letter-spacing: 0.08em;
	margin-right: 6px;
}

.eisilc-agenda__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 99px;
	font-size: 13px;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.eisilc-agenda__chip:hover {
	border-color: #00aeef !important;
	color: #00aeef !important;
}

.eisilc-agenda__chip.is-active {
	background: #00aeef;
	border-color: #00aeef;
	color: #fff !important;
}

.eisilc-agenda__chip.is-active:hover {
	color: #fff !important;
}

.eisilc-agenda__chip-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.eisilc-agenda__chip.is-active .eisilc-agenda__chip-dot {
	box-shadow: 0 0 0 1.5px #fff;
}

.eisilc-agenda__more {
	margin-left: auto;
	padding: 6px 14px;
	border: 1px solid #d4d4d4;
	border-radius: 99px;
	color: #555;
	font-size: 13px;
	text-decoration: none;
	transition:
		border-color 0.15s ease,
		color 0.15s ease;
}

.eisilc-agenda__more:hover {
	border-color: #00aeef !important;
	color: #00aeef !important;
}

/* Grupo por día: columna de fecha + columna con eventos del día */
.eisilc-agenda__group {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 16px;
	position: relative;
}

.eisilc-agenda__date-col {
	position: relative;
}

/* Línea vertical que baja desde la fecha y se desvanece al final
 * Se renderiza como pseudo-elemento del date-col, ocupando todo
 * el alto del grupo desde debajo del date box hasta el bottom. */
.eisilc-agenda__date-col::after {
	content: "";
	position: absolute;
	top: 64px; /* debajo del date box (height 56 + 8 margen) */
	bottom: -14px; /* extiende un poco hasta dentro del gap al siguiente grupo */
	left: 50%;
	width: 1px;
	background: linear-gradient(to bottom, #d4d4d4 0%, #d4d4d4 60%, rgba(212, 212, 212, 0) 100%);
	transform: translateX(-50%);
	pointer-events: none;
}

/* Último grupo: que no haya línea bajando al vacío bajo el último evento */
.eisilc-agenda__group:last-child .eisilc-agenda__date-col::after {
	bottom: 0;
}

.eisilc-agenda__events {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.eisilc-agenda__item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 16px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	transition: box-shadow 0.15s ease;
}

.eisilc-agenda__item:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Primer evento del día seleccionado: borde celeste ISIL */
.eisilc-agenda__item.is-selected {
	border-color: #00aeef;
	border-width: 2px;
	padding: 15px;
}

.eisilc-agenda__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 56px;
	margin: 0 auto;
	padding: 6px;
	background: #f6f7f7;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	line-height: 1;
	box-sizing: border-box;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease;
}

.eisilc-agenda__date.is-selected {
	background: #00aeef;
	border-color: #00aeef;
}

.eisilc-agenda__day {
	font-size: 22px;
	font-weight: 700;
	color: #111;
}

.eisilc-agenda__month {
	font-size: 10px;
	color: #111;
	text-transform: uppercase;
	margin-top: 4px;
	letter-spacing: 0.06em;
	font-weight: 600;
}

.eisilc-agenda__date.is-selected .eisilc-agenda__day,
.eisilc-agenda__date.is-selected .eisilc-agenda__month {
	color: #fff;
}

.eisilc-agenda__content {
	min-width: 0;
}

.eisilc-agenda__time {
	font-size: 12px;
	color: #777;
	margin-bottom: 4px;
}

.eisilc-agenda__title {
	margin: 0 0 8px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
}

.eisilc-agenda__title a {
	color: inherit;
	text-decoration: none;
}

.eisilc-agenda__title a:hover {
	text-decoration: underline;
}

.eisilc-agenda__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #555;
}

.eisilc-agenda__cat {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 99px;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.eisilc-agenda__loc {
	color: #666;
}

.eisilc-agenda__mod {
	color: #999;
	font-style: italic;
}

.eisilc-agenda__btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 1px solid #111;
	border-radius: 99px;
	background: #fff;
	color: #111;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.eisilc-agenda__btn:hover {
	background: #111;
	color: #fff !important;
}

@media (max-width: 600px) {
	.eisilc-agenda__group {
		grid-template-columns: 48px 1fr;
		gap: 10px;
	}
	.eisilc-agenda__item {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.eisilc-agenda__btn {
		justify-self: start;
	}
	.eisilc-agenda__date-col::after {
		top: 52px;
	}
}

/* ============================================================
 * 2e. Sync calendar (Google / iCal / Outlook)
 * ============================================================ */

.eisilc-sync {
	/*background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 16px;*/
	font-family: inherit;
	/*max-width: 360px;*/
}

.eisilc-sync__title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: #111;
}

.eisilc-sync__buttons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.eisilc-sync__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 8px;
	border: 1px solid #d4d4d4;
	border-radius: 8px;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition:
		border-color 0.15s ease,
		background-color 0.15s ease;
	cursor: pointer;
}

.eisilc-sync__btn:hover {
	border-color: #00aeef !important;
	color: #00aeef !important;
	background: #fff;
}

.eisilc-sync__btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.eisilc-sync__btn-icon {
	display: inline-flex;
}

/* ---- Bloque URL del feed + botón Copiar ----
 *
 * Aparece debajo de los botones de Google/iCal/Outlook. Sirve porque
 * Google Calendar no pre-llena el input "URL del calendario" cuando
 * abre el dialog vía `?url=...`, así que el usuario necesita copiar
 * y pegar manualmente. Este bloque hace ese paso trivial. */

.eisilc-sync__url-block {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e5e7eb;
}

.eisilc-sync__url-label {
	margin: 0 0 8px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #50575e;
}

.eisilc-sync__url-row {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid #d4d4d8;
	border-radius: 8px;
	overflow: hidden;
	background: #f9fafb;
}

.eisilc-sync__url-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 0 !important;
	background: transparent !important;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 13px;
	color: #1a2332;
	outline: none;
}

.eisilc-sync__url-input:focus {
	background: #fff !important;
}

.eisilc-sync__copy-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border: 0;
	border-left: 1px solid #d4d4d8;
	background: #fff;
	color: #1a2332;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.eisilc-sync__copy-btn:hover {
	background: #00aeef !important;
	color: #fff !important;
}

.eisilc-sync__copy-btn.is-copied {
	background: #10b981 !important;
	color: #fff !important;
}

.eisilc-sync__copy-icon {
	font-size: 14px;
	line-height: 1;
}

/* ============================================================
 * 3. Grid de listado
 * ============================================================ */

.eisilc-list {
	display: grid;
	gap: 20px;
}

.eisilc-list.cols-2 {
	grid-template-columns: repeat(2, 1fr);
}
.eisilc-list.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
.eisilc-list.cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
	.eisilc-list {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * 4. Card del listado
 * ============================================================ */

.eisilc-card {
	display: block;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease;
}

.eisilc-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.eisilc-card__img img {
	width: 100%;
	display: block;
	aspect-ratio: 16/9;
	object-fit: cover;
}

.eisilc-card__body {
	padding: 14px;
}

.eisilc-card__title {
	margin: 0 0 6px;
	font-size: 1.05rem;
	line-height: 1.3;
}

.eisilc-card__date,
.eisilc-card__sede {
	margin: 0;
	font-size: 0.85rem;
	color: #666;
}

.eisilc-empty {
	padding: 16px;
	color: #666;
	font-style: italic;
}

/* ============================================================
 * 5. Buscador (form + resultados)
 * ============================================================ */

.eisilc-search {
	margin: 24px 0;
}

.eisilc-search__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
	margin-bottom: 24px;
	padding: 16px;
	background: #f6f7f7;
	border-radius: 8px;
}

.eisilc-search__field {
	flex: 1 1 160px;
	min-width: 140px;
}

.eisilc-search__field--text {
	flex: 2 1 240px;
}

.eisilc-search__input,
.eisilc-search__select {
	width: 100%;
	height: 44px;
	padding: 10px 14px;
	border: 1px solid #d4d4d4;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	box-sizing: border-box;
	color: #111;
	font-family: inherit;
}

.eisilc-search__input:focus,
.eisilc-search__select:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

.eisilc-search__button {
	height: 44px;
	padding: 0 24px;
	border: none;
	border-radius: 6px;
	background: #111;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
	font-family: inherit;
}

.eisilc-search__button:hover,
.eisilc-search__button:focus {
	background: #333;
	outline: none;
}

.eisilc-search__results {
	margin-top: 8px;
}

.eisilc-search__count {
	margin: 0 0 16px;
	color: #50575e;
	font-size: 14px;
}

.eisilc-search__no-results {
	margin: 0;
	padding: 24px;
	text-align: center;
	background: #f6f7f7;
	border-radius: 8px;
	color: #50575e;
}

.eisilc-search__no-results p {
	margin: 0 0 10px;
}

.eisilc-search__no-results p:last-child {
	margin-bottom: 0;
}

.eisilc-search__clear {
	display: inline-block;
	margin-top: 4px;
	padding: 6px 16px;
	border: 1px solid #000000 !important;
	border-radius: 99px;
	color: #000 !important;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	background: #ffffff !important;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease;
}

.eisilc-search__clear:hover {
	background: #111;
	border-color: #111;
	color: #fff;
}

@media (max-width: 600px) {
	.eisilc-search__form {
		flex-direction: column;
	}

	.eisilc-search__field,
	.eisilc-search__field--text {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ============================================================
 * 6. Buscador avanzado (top bar + categorías + filtros)
 * ============================================================ */

.eisilc-searchx {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 24px 0;
	color: #111;
}

/* ---- Top bar: search + fecha + modalidad ---- */
.eisilc-searchx__top {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
	padding: 14px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.eisilc-searchx__field {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	min-height: 56px;
	transition:
		border-color 0.15s ease,
		background-color 0.15s ease;
}

.eisilc-searchx__field:hover {
	background: #fafafa;
}

.eisilc-searchx__field:focus-within {
	border-color: #d4d4d4;
	background: #fff;
}

.eisilc-searchx__field--search {
	border: 1px solid #e5e5e5;
	background: #fff;
	padding-right: 8px;
}

.eisilc-searchx__field--select {
	border: 1px solid #e1e1e1;
	cursor: pointer;
	position: relative;
}

.eisilc-searchx__field-icon {
	display: inline-flex;
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	color: #555;
}

.eisilc-searchx__field-icon svg {
	width: 100%;
	height: 100%;
}

.eisilc-searchx__field-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.eisilc-searchx__field-label {
	font-size: 11px;
	color: #777;
	line-height: 1;
}

/* El tema (Hello Elementor Child) pinta input/select con border,
 * padding, border-radius y fondo de baja especificidad. Forzamos el
 * reset con !important para que el input/select queden "limpios"
 * dentro del wrap que ya provee borde y padding propios.
 * Usamos background-color en lugar de la shorthand background para
 * NO pisar el background-image del chevron del .eisilc-searchx__select
 * (sino tendríamos que !important toda la cadena de background-*). */
.eisilc-searchx__input,
.eisilc-searchx__select {
	width: 100% !important;
	border: 0 !important;
	background-color: transparent !important;
	font-size: 14px !important;
	color: #111 !important;
	font-family: inherit !important;
	padding: 0 !important;
	outline: none !important;
	font-weight: 500 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: none !important;
}

.eisilc-searchx__input::placeholder {
	color: #999;
	font-weight: 400;
}

.eisilc-searchx__select {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 0 center !important;
	background-size: 14px !important;
	padding-right: 20px !important;
	cursor: pointer !important;
	height: auto !important;
	line-height: 1.4 !important;
}

.eisilc-searchx__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #555;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.eisilc-searchx__submit:hover,
.eisilc-searchx__submit:focus {
	background: #f0f0f0;
	color: #111;
	outline: none;
}

.eisilc-searchx__submit svg {
	width: 20px;
	height: 20px;
}

/* ---- Categorías visuales (iconos) ---- */
/* Wrapper del slider: flex horizontal con [arrow] [track] [arrow].
 * Los arrows son hermanos del track (no absolutos), así no se solapan
 * con los items y el track tiene su propia área aislada para el scroll. */
.eisilc-searchx__cats-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 12px;
	background: #fff;
	border-radius: 14px;
	/*box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);*/
}

.eisilc-searchx__cats {
	flex: 1 1 auto;
	min-width: 0; /* impide que el track desborde el flex container */
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE */
}

.eisilc-searchx__cats::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

/* Cada categoría: ancho DINÁMICO calculado para que entren exactamente
 * 8 items en el ancho visible del track, sin items parcialmente cortados.
 * Fórmula: (100% del track − 7 gaps de 8px) / 8 = ancho exacto de cada item.
 * min-width: 100px como piso para pantallas muy chicas (entonces caben menos). */
.eisilc-searchx__cats > .eisilc-searchx__cat {
	flex: 0 0 calc((100% - 7 * 8px) / 8) !important;
	width: calc((100% - 7 * 8px) / 8) !important;
	min-width: 100px !important;
	max-width: none !important;
	min-height: 120px;
	box-sizing: border-box !important;
	scroll-snap-align: start;
	padding: 12px 6px;
}

/* Arrows como flex items hermanos del track. No flotantes, no absolutos.
 * !important para vencer estilos de botón de Elementor (magenta/cuadrado). */
.eisilc-searchx__cats-arrow {
	flex: 0 0 auto !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid #e5e5e5 !important;
	border-radius: 50% !important;
	background: #fff !important;
	background-color: #fff !important;
	color: #333 !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.eisilc-searchx__cats-arrow:hover {
	border-color: #00aeef !important;
	background: #fff !important;
	background-color: #fff !important;
	color: #00aeef !important;
}

@media (max-width: 768px) {
	.eisilc-searchx__cats-arrow {
		display: none !important;
	}
	.eisilc-searchx__cats-wrap {
		padding: 16px 14px;
	}
}

/* ---- Variante: layout grid (1 fila en desktop con N columnas) ----
 *
 * Modo de uso:
 *   [eisilc_event_search_advanced cats_layout="grid" categories="charlas,empleabilidad,..."]
 *
 * Desktop: las categorías ocupan el ancho disponible distribuidas en 1 fila
 * (auto-fit, mínimo 110px por card).
 * Mobile (≤768px): vuelve al comportamiento de slider horizontal scrolleable
 * para no apretar cards angostas en pantallas pequeñas. */

.eisilc-searchx__cats-wrap--grid .eisilc-searchx__cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
	overflow: visible;
	scroll-snap-type: none;
}

.eisilc-searchx__cats-wrap--grid .eisilc-searchx__cats > .eisilc-searchx__cat {
	flex: initial !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

/* Iconos más grandes solo en modo grid + desktop. En mobile el tamaño
 * base de 56px queda OK por las reglas dentro del @media (max-width: 768px)
 * más abajo, así que no se duplica la regla acá. */
.eisilc-searchx__cats-wrap--grid .eisilc-searchx__cat-icon {
	width: 76px;
	height: 76px;
}

.eisilc-searchx__cats-wrap--grid .eisilc-searchx__cat-icon svg {
	width: 32px;
	height: 32px;
}

.eisilc-searchx__cats-wrap--grid .eisilc-searchx__cat-fallback {
	font-size: 24px;
}

@media (max-width: 768px) {
	/* Mobile: grilla de 4 columnas. Con 7 items quedan 4 arriba + 3 abajo
	 * (la 4ta celda de la 2da fila queda vacía). Sin scroll horizontal. */
	.eisilc-searchx__cats-wrap--grid .eisilc-searchx__cats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		overflow: visible;
		scroll-snap-type: none;
	}
	.eisilc-searchx__cats-wrap--grid .eisilc-searchx__cats > .eisilc-searchx__cat {
		flex: initial !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		min-height: auto;
		padding: 10px 4px;
	}
	/* Mobile: el icono vuelve al tamaño original (56px), sin el agrandado
	 * que aplicamos en desktop arriba. */
	.eisilc-searchx__cats-wrap--grid .eisilc-searchx__cat-icon {
		width: 56px;
		height: 56px;
	}
	.eisilc-searchx__cats-wrap--grid .eisilc-searchx__cat-icon svg {
		width: 24px;
		height: 24px;
	}
	.eisilc-searchx__cats-wrap--grid .eisilc-searchx__cat-fallback {
		font-size: 20px;
	}
}

/* Mobile muy chico: caer a 3 columnas para que cada card no quede demasiado
 * angosta (con 7 items: 3+3+1). */
@media (max-width: 480px) {
	.eisilc-searchx__cats-wrap--grid .eisilc-searchx__cats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.eisilc-searchx__cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 12px 6px;
	border-radius: 10px;
	text-decoration: none;
	color: #111;
	transition:
		background-color 0.15s ease,
		transform 0.15s ease;
}

.eisilc-searchx__cat:hover {
	background: rgba(0, 174, 239, 0.08);
	color: #00aeef !important;
	transform: translateY(-1px);
}

.eisilc-searchx__cat.is-active {
	background: transparent;
	color: var(--eisilc-cat-color, #000);
}

.eisilc-searchx__cat-icon {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	color: inherit;
	overflow: hidden;
	background: #fff;
	box-sizing: border-box;
}

.eisilc-searchx__cat-icon svg {
	width: 24px;
	height: 24px;
}

/* Iconos imagen: normal visible por default, hover oculto. Hover sobre
 * el card cambia la visibilidad para el efecto de transición suave. */
.eisilc-searchx__cat-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
	transition: opacity 0.2s ease;
}

.eisilc-searchx__cat-img--hover {
	opacity: 0;
}

.eisilc-searchx__cat:hover .eisilc-searchx__cat-img--normal {
	opacity: 0;
}

.eisilc-searchx__cat:hover .eisilc-searchx__cat-img--hover {
	opacity: 1;
}

.eisilc-searchx__cat-fallback {
	font-size: 20px;
	color: var(--eisilc-cat-color, currentColor);
}

/* Si la categoría tiene color en term meta, lo usamos para el borde
 * del icono cuando está activo. Fallback a negro si no se definió. */
.eisilc-searchx__cat.is-active .eisilc-searchx__cat-icon {
	border-color: var(--eisilc-cat-color, #000);
	border-width: 2.5px;
}

.eisilc-searchx__cat-label {
	width: 100%;
	max-width: 100%;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
	/* Limitar a 2 líneas con ellipsis para mantener altura consistente */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	overflow-wrap: break-word;
	padding: 0 2px;
}

/* ---- Filtros avanzados (collapsible) ---- */
.eisilc-searchx__advanced {
	position: relative;
}

.eisilc-searchx__toggle {
	display: inline-flex;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	background: #e7e7e7 !important;
	color: #000000 !important;
	border: 0 !important;
	border-radius: 99px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease !important;
	font-family: inherit;
}

.eisilc-searchx__toggle:hover,
.eisilc-searchx__toggle:focus {
	outline: none;
}

.eisilc-searchx__toggle-icon,
.eisilc-searchx__toggle-chev {
	display: inline-flex;
	width: 14px;
	height: 14px;
}

.eisilc-searchx__toggle-icon svg,
.eisilc-searchx__toggle-chev svg {
	width: 100%;
	height: 100%;
}

.eisilc-searchx__toggle[aria-expanded="true"] .eisilc-searchx__toggle-chev {
	transform: rotate(180deg);
}

.eisilc-searchx__advanced-content {
	position: relative;
	margin-top: 10px;
	padding: 24px 30px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.eisilc-searchx__advanced-content[hidden] {
	display: none;
}

.eisilc-searchx__advanced-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	border: 1px solid #e5e5e5;
	border-radius: 50%;
	background: #fff;
	color: #777;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.eisilc-searchx__advanced-close:hover,
.eisilc-searchx__advanced-close:focus {
	background: #f0f0f0;
	color: #111;
	outline: none;
}

.eisilc-searchx__advanced-close svg {
	width: 14px;
	height: 14px;
}

.eisilc-searchx__row {
	display: grid;
	grid-template-columns: 150px 1fr;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}

.eisilc-searchx__row + .eisilc-searchx__row {
	border-top: 1px solid #f0f0f0;
}

.eisilc-searchx__row-label {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ---- Chips de tipo de evento ---- */
.eisilc-searchx__chips,
.eisilc-searchx__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.eisilc-searchx__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 99px;
	font-size: 13px;
	color: #333;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
	white-space: nowrap;
}

.eisilc-searchx__chip:hover {
	border-color: #00aeef !important;
	color: #00aeef !important;
}

.eisilc-searchx__chip.is-active {
	background: #111;
	color: #fff;
	border-color: #111;
}

.eisilc-searchx__chip-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.eisilc-searchx__chip.is-active .eisilc-searchx__chip-dot {
	box-shadow: 0 0 0 1.5px #fff;
}

/* ---- Tags (#hashtag) ---- */
.eisilc-searchx__tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 99px;
	font-size: 13px;
	color: #555;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
	white-space: nowrap;
}

.eisilc-searchx__tag:hover {
	border-color: #00aeef !important;
	color: #00aeef !important;
}

.eisilc-searchx__tag.is-active {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.eisilc-searchx__top {
		grid-template-columns: 1fr;
	}
	.eisilc-searchx__row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

@media (max-width: 480px) {
	.eisilc-searchx__cats > .eisilc-searchx__cat {
		width: 90px;
	}
	.eisilc-searchx__cat-icon {
		width: 48px;
		height: 48px;
	}
	.eisilc-searchx__advanced-content {
		padding: 20px 16px;
	}
}

/* ============================================================
 * 7. Loader, header de resultados, view toggle, paginación
 * ============================================================ */

.eisilc-searchx__results-wrap {
	position: relative;
	min-height: 200px;
	margin-top: 8px;
}

/* ---- Loader (CSS animation, sin JS) ---- */
.eisilc-loader {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.96);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	z-index: 10;
	animation: eisilc-loader-out 0.7s ease-out 0.5s forwards;
	pointer-events: none;
}

@keyframes eisilc-loader-out {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

.eisilc-loader__spinner {
	width: 44px;
	height: 44px;
	border: 3px solid #e5e5e5;
	border-top-color: #111;
	border-radius: 50%;
	animation: eisilc-spin 0.8s linear infinite;
}

@keyframes eisilc-spin {
	to {
		transform: rotate(360deg);
	}
}

.eisilc-loader__text {
	margin: 0;
	color: #666;
	font-size: 14px;
}

/* Estado durante un swap AJAX: contenedor se ve "apagado" hasta que
 * llega la respuesta y el DOM se reemplaza. Los pointer-events
 * deshabilitados evitan doble-click mientras carga. */
.is-eisilc-swapping {
	opacity: 0.55;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

/* ---- Header de resultados (counter + view toggle) ---- */
.eisilc-searchx__results-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin: 24px 0 16px;
}

.eisilc-searchx__results-info {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.eisilc-searchx__count {
	margin: 0;
	font-size: 18px;
	color: #111;
}

.eisilc-searchx__count strong {
	color: #06b6d4;
	font-weight: 700;
	margin: 0 4px;
}

.eisilc-searchx__clear-filters {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 2px solid #00aeef !important;
	border-radius: 99px;
	background: #ffffff !important;
	color: #00aeef !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition:
		border-color 0.15s ease,
		color 0.15s ease,
		background-color 0.15s ease !important;
}

.eisilc-searchx__clear-filters::before {
	content: "×";
	font-size: 20px;
	line-height: 1;
	font-weight: 400;
}

.eisilc-searchx__clear-filters:hover {
	border-color: #000000 !important;
	color: #000000 !important;
	background: #ffffff;
	text-decoration: none;
}

.eisilc-searchx__views {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	background: #f6f7f7;
	border-radius: 10px;
}

.eisilc-searchx__views-label {
	margin-right: 8px;
	margin-left: 6px;
	color: #666;
	font-size: 13px;
}

.eisilc-searchx__view-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 7px;
	background: transparent;
	color: #555;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.eisilc-searchx__view-btn:hover {
	background: #fff;
	color: #00aeef !important;
}

.eisilc-searchx__view-btn.is-active {
	background: #111;
	color: #fff;
}

.eisilc-searchx__view-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.eisilc-searchx__view-icon svg {
	width: 100%;
	height: 100%;
}

/* ---- Paginación ---- */
.eisilc-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 32px 0 8px;
	flex-wrap: wrap;
}

.eisilc-pagination__btn,
.eisilc-pagination__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
	color: #333;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.eisilc-pagination__btn:hover,
.eisilc-pagination__num:hover {
	border-color: #00aeef !important;
	color: #00aeef !important;
}

.eisilc-pagination__num.is-current {
	background: #111;
	border-color: #111;
	color: #fff;
}

.eisilc-pagination__btn.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.eisilc-pagination__btn svg {
	width: 16px;
	height: 16px;
}

.eisilc-pagination__sep {
	padding: 0 4px;
	color: #999;
}

/* ============================================================
 * 8. Vista TARJETAS (rich cards)
 * ============================================================ */

.eisilc-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.eisilc-card-rich {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	overflow: hidden;
	transition:
		box-shadow 0.15s ease,
		transform 0.15s ease;
}

.eisilc-card-rich:hover {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.eisilc-card-rich__media {
	position: relative;
	display: block;
	aspect-ratio: 5/3;
	background: #1a2332;
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0,
		transparent 12px,
		rgba(255, 255, 255, 0.04) 12px,
		rgba(255, 255, 255, 0.04) 14px
	);
	overflow: hidden;
}

.eisilc-card-rich__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eisilc-card-rich__media-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.15);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.eisilc-card-rich__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 12px;
	border-radius: 6px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-transform: capitalize;
	z-index: 2;
}

.eisilc-card-rich__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

.eisilc-card-rich__row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: start;
	width: 100%;
}

.eisilc-card-rich__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	min-width: 36px;
}

.eisilc-card-rich__day {
	font-size: 32px;
	font-weight: 900;
	color: #000000;
	font-family: "Poppins";
}

.eisilc-card-rich__month {
	font-size: 14px;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 2px;
	font-weight: 700;
	font-family: "Poppins";
}

.eisilc-card-rich__anio {
	font-size: 13px;
	font-family: "Graphik";
	font-weight: 700;
	color: #bfbfbf;
	margin-top: 0px;
}

.eisilc-card-rich__title {
	margin: 0;
	min-width: 0;
	font-family:
		"Poppins",
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
}

.eisilc-card-rich__title a {
	color: inherit;
	text-decoration: none;
	font-weight: 700;
	padding-bottom: 5px;
	font-size: 20px;
	display: block;
	line-height: 1.1em;
}

.eisilc-card-rich__title a:hover {
	text-decoration: underline;
	color: #00aeef !important;
	line-height: 1.1em;
}

.eisilc-card-rich__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}

.eisilc-card-rich__cat {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 99px;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.eisilc-card-rich__sede {
	font-weight: 400;
	color: #777;
	font-size: 12px;
	line-height: 1.3;
}

.eisilc-card-rich__bookmark {
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: #999;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.eisilc-card-rich__bookmark:hover {
	color: #111;
}

.eisilc-card-rich__bookmark svg {
	width: 18px;
	height: 18px;
}

.eisilc-card-rich__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.eisilc-card-rich__tag {
	display: inline-block;
	padding: 3px 10px;
	background: #efefef;
	border-radius: 99px;
	font-size: 9px;
	color: #444;
}

/* Tag que coincide con el filtro activo: resaltado en celeste ISIL */
.eisilc-card-rich__tag.is-active {
	background: #00aeef;
	color: #fff;
	font-weight: 600;
}

@media (max-width: 1100px) {
	.eisilc-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 800px) {
	.eisilc-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.eisilc-cards {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * 9. Vista LISTA (rows horizontales)
 * ============================================================ */

.eisilc-rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.eisilc-row {
	display: grid;
	grid-template-columns: 220px auto 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 16px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	transition: box-shadow 0.15s ease;
}

.eisilc-row:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.eisilc-row__media {
	position: relative;
	display: block;
	aspect-ratio: 5/3;
	background: #1a2332;
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0,
		transparent 12px,
		rgba(255, 255, 255, 0.04) 12px,
		rgba(255, 255, 255, 0.04) 14px
	);
	border-radius: 8px;
	overflow: hidden;
}

.eisilc-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eisilc-row__media-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.15);
	font-size: 11px;
}

.eisilc-row__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 10px;
	border-radius: 5px;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.eisilc-row__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	min-width: 50px;
}

.eisilc-row__day {
	font-size: 36px;
	font-weight: 700;
	color: #111;
}

.eisilc-row__month {
	font-size: 16px;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 4px;
}

.eisilc-row__year {
	font-size: 14px;
	color: #a7a7a7;
	font-weight: 700;
	margin-top: 0px;
}

.eisilc-row__body {
	min-width: 0;
}

.eisilc-row__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	color: #111;
	line-height: 1.3;
}

.eisilc-row__title a {
	display: block;
	margin-bottom: 5px;
	font-size: 20px;
	color: inherit;
	text-decoration: none;
}

.eisilc-row__title a:hover {
	text-decoration: underline;
}

.eisilc-row__meta {
	margin: 0 0 8px !important;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: #555;
}

.eisilc-row__cat-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 20px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	vertical-align: middle;
}

.eisilc-row__meta strong {
	color: #999;
	font-weight: 500;
	margin-right: 4px;
	font-size: 12px;
}

.eisilc-row__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.eisilc-row__tag {
	padding: 3px 10px;
	background: #efefef;
	border-radius: 99px;
	font-size: 11px;
	color: #444;
}

.eisilc-row__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.eisilc-row__bookmark {
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	color: #999;
	cursor: pointer;
	padding: 0;
	align-self: flex-end;
}

.eisilc-row__bookmark:hover {
	color: #111;
}

.eisilc-row__bookmark svg {
	width: 20px;
	height: 20px;
}

.eisilc-row__btn {
	display: inline-block;
	padding: 10px 20px;
	background: #111;
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: background-color 0.15s ease;
	white-space: nowrap;
}

.eisilc-row__btn:hover {
	background: #333;
	color: #fff;
}

@media (max-width: 800px) {
	.eisilc-row {
		grid-template-columns: 140px 1fr;
		grid-template-areas:
			"media body"
			"date  body"
			"actions actions";
		gap: 12px;
	}
	.eisilc-row__media {
		grid-area: media;
	}
	.eisilc-row__date {
		grid-area: date;
	}
	.eisilc-row__body {
		grid-area: body;
	}
	.eisilc-row__actions {
		grid-area: actions;
		flex-direction: row;
		justify-content: space-between;
	}
}

/* ============================================================
 * 10. Vista TABLA
 * ============================================================ */

.eisilc-table-wrap {
	overflow-x: auto;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
}

.eisilc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.eisilc-table thead th {
	padding: 14px 16px;
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #777;
	font-weight: 600;
	background: #fafafa;
	border-bottom: 1px solid #e5e5e5;
	white-space: nowrap;
}

.eisilc-table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}

.eisilc-table tbody tr:last-child td {
	border-bottom: 0;
}

.eisilc-table tbody tr:hover {
	background: #fafafa;
}

.eisilc-table__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	min-width: 36px;
}

.eisilc-table__day {
	font-size: 18px;
	font-weight: 700;
	color: #111;
}

.eisilc-table__month {
	font-size: 10px;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 2px;
}

.eisilc-table__thumb {
	position: relative;
	width: 100px;
	height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background: #1a2332;
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0,
		transparent 8px,
		rgba(255, 255, 255, 0.04) 8px,
		rgba(255, 255, 255, 0.04) 10px
	);
}

.eisilc-table__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eisilc-table__dot {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff;
}

.eisilc-table__title {
	color: #111;
	text-decoration: none;
	font-weight: 600;
}

.eisilc-table__title:hover {
	text-decoration: underline;
}

.eisilc-table__badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 5px;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.eisilc-table__pill {
	display: inline-block;
	padding: 3px 10px;
	background: #f0f0f0;
	border-radius: 99px;
	font-size: 11px;
	color: #444;
}

.eisilc-table__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.eisilc-table__tag {
	padding: 2px 8px;
	background: #f6f7f7;
	border-radius: 99px;
	font-size: 10px;
	color: #555;
}

.eisilc-table__view {
	color: #2271b1;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.eisilc-table__view:hover {
	color: #00aeef !important;
}

/* ============================================================
 * 11. Próximos eventos — [eisilc_event_upcoming]
 *
 *     Shortcode wrapper que reutiliza la vista TARJETAS (sección 8)
 *     y añade título opcional, contador y paginación. Solo necesita
 *     estilos del wrapper porque el grid de cards ya está cubierto.
 * ============================================================ */

.eisilc-upcoming {
	margin: 24px 0;
}

.eisilc-upcoming__title {
	margin: 0 0 8px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #111;
}

.eisilc-upcoming__count {
	margin: 0 0 16px;
	color: #555;
	font-size: 14px;
}

/* ============================================================
 * 12. Countdown — [eisilc_event_countdown]
 *
 *     Bloque DD:HH:MM:SS al final de cada card. Cajas blancas con
 *     borde celeste ISIL, números negros, labels en gris. El JS
 *     (assets/js/eventos-isil-custom.js) actualiza los valores
 *     cada segundo leyendo el atributo data-eisilc-countdown.
 * ============================================================ */

.eisilc-countdown-wrap {
	margin: 24px 0;
}

.eisilc-countdown-wrap__title {
	margin: 0 0 16px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #111;
}

.eisilc-countdown {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	/* Empuja el countdown al fondo del body (que es flex column).
	 * Así todas las cards alinean su countdown abajo aunque difieran
	 * en cantidad de tags/categorías. */
	margin-top: auto !important;
	margin-top: 12px;
}

.eisilc-countdown__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 4px;
	background: #fff;
	/* Borde fijo en amarillo ISIL — ignora la variable
	 * --eisilc-countdown-color que inyecta PHP por categoría para
	 * mantener el color de marca consistente en todos los countdowns. */
	border: 1.5px solid #fdbf10;
	border-radius: 8px;
	min-height: 56px;
}

.eisilc-countdown__num {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #111;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.eisilc-countdown__label {
	font-size: 9px;
	font-weight: 600;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 4px;
}

/* Estado finalizado: el evento ya empezó (todo a 00). Atenuamos visualmente. */
.eisilc-countdown.is-started .eisilc-countdown__box {
	border-color: #d4d4d4;
	background: #f6f7f7;
}

.eisilc-countdown.is-started .eisilc-countdown__num {
	color: #999;
}

/* ---- Card featured (primer card del countdown: ocupa 4 columnas) ---- */

.eisilc-card-rich--featured {
	grid-column: 1 / -1; /* spans toda la grilla */
}

/* En desktop: layout horizontal imagen | body */
@media (min-width: 768px) {
	.eisilc-card-rich--featured {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0;
	}
	.eisilc-card-rich--featured .eisilc-card-rich__media {
		aspect-ratio: auto; /* fill column height */
		height: 100%;
		min-height: 320px;
	}
	.eisilc-card-rich--featured .eisilc-card-rich__body {
		padding: 28px;
		gap: 18px;
	}
	.eisilc-card-rich--featured .eisilc-card-rich__title,
	.eisilc-card-rich--featured .eisilc-card-rich__title a {
		font-size: 34px !important;
		line-height: 1.2 !important;
	}
	.eisilc-card-rich--featured .eisilc-countdown {
		grid-template-columns: repeat(4, minmax(64px, 90px));
		justify-content: start;
	}
	.eisilc-card-rich--featured .eisilc-countdown__num {
		font-size: 26px;
	}
}

/* Badge "EL QUE SIGUE" sobre la imagen del featured */
.eisilc-card-rich__featured-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: #1a2332;
	color: #fff;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.eisilc-card-rich__featured-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10b981;
}

/* ============================================================
 * 13. Slider de cards — [eisilc_event_upcoming mode="slider"]
 *                      [eisilc_event_countdown mode="slider"]
 *
 * Layout:
 *   .eisilc-slider-wrap  → flex con arrows como hermanos del track
 *   .eisilc-cards--slider → el track horizontal con scroll-snap
 *
 * El ancho de cada item se calcula con --eisilc-visible (variable
 * CSS inyectada inline desde PHP). Pasa de 1 en 1 con las flechas
 * y respeta el snap al final de la animación.
 * ============================================================ */

.eisilc-slider-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.eisilc-cards--slider {
	display: flex !important;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 16px;
	padding: 4px 2px;
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	/* ocultar scrollbar pero mantener funcionalidad */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.eisilc-cards--slider::-webkit-scrollbar {
	display: none;
}

/* Cada item ocupa 1/visible del ancho disponible, restando los gaps. */
.eisilc-cards--slider > .eisilc-card-rich {
	flex: 0 0 calc((100% - (var(--eisilc-visible, 4) - 1) * 16px) / var(--eisilc-visible, 4));
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* En modo slider la card "featured" no debe ocupar todo el ancho ni
 * el layout grid 2-columnas del desktop: el slider la trata como un
 * item normal del carrusel.
 *
 * IMPORTANTE: forzar flex column (no block ni grid) porque la card base
 * es flex column y el body usa flex: 1 para crecer. Si rompemos ese
 * contrato, el countdown no llega al fondo con margin-top: auto. */
.eisilc-cards--slider > .eisilc-card-rich--featured {
	grid-column: auto;
	display: flex;
	flex-direction: column;
}
.eisilc-cards--slider > .eisilc-card-rich--featured .eisilc-card-rich__media {
	aspect-ratio: 5 / 3;
	height: auto;
	min-height: 0;
}
.eisilc-cards--slider > .eisilc-card-rich--featured .eisilc-card-rich__title,
.eisilc-cards--slider > .eisilc-card-rich--featured .eisilc-card-rich__title a {
	font-size: 20px !important;
	line-height: 1.3 !important;
}
.eisilc-cards--slider > .eisilc-card-rich--featured .eisilc-card-rich__body {
	padding: 16px;
	gap: 12px;
}
.eisilc-cards--slider > .eisilc-card-rich--featured .eisilc-countdown {
	grid-template-columns: repeat(4, 1fr);
	justify-content: stretch;
}
.eisilc-cards--slider > .eisilc-card-rich--featured .eisilc-countdown__num {
	font-size: 18px;
}

/* Flechas a los costados — círculo amarillo (marca ISIL) con flecha
 * negra. Estados hover/focus/active invierten a celeste con flecha
 * blanca. El char Unicode ‹/› queda visualmente desplazado hacia
 * arriba en la mayoría de fuentes; padding-bottom lo baja al centro
 * óptico del círculo sin afectar layout. */
.eisilc-slider-arrow {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #fdbf10;
	background: #fdbf10;
	color: #000;
	font-size: 30px;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 4px 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease,
		transform 0.15s ease;
}

.eisilc-slider-arrow:hover,
.eisilc-slider-arrow:focus,
.eisilc-slider-arrow:focus-visible,
.eisilc-slider-arrow:active {
	background: #00aeef !important;
	color: #fff !important;
	border-color: #00aeef !important;
	outline: none;
}

.eisilc-slider-arrow:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Estado "tope": al llegar al inicio/fin del slider la flecha
 * correspondiente se pinta en gris y deja de reaccionar al hover.
 * La clase la alterna el JS según la posición de scroll del track. */
.eisilc-slider-arrow.is-disabled,
.eisilc-slider-arrow.is-disabled:hover,
.eisilc-slider-arrow.is-disabled:focus,
.eisilc-slider-arrow.is-disabled:active {
	background: #e5e5e5 !important;
	border-color: #e5e5e5 !important;
	color: #9a9a9a !important;
	cursor: default !important;
}

/* ---- Variante: flechas FUERA del wrap (cards 100% ancho) ----
 *
 * Modo de uso:
 *   [eisilc_event_upcoming  mode="slider" arrows="outside"]
 *   [eisilc_event_countdown mode="slider" arrows="outside"]
 *
 * El wrap deja de ser flex y los cards ocupan el 100%. Las flechas
 * pasan a position absolute, flotando a los costados del wrap. Si el
 * contenedor padre (Elementor) tiene padding/margin lateral, las
 * flechas quedan "afuera" del bloque visual de los cards. */

.eisilc-slider-wrap--arrows-outside {
	display: block;
	gap: 0;
}

.eisilc-slider-wrap--arrows-outside .eisilc-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}

.eisilc-slider-wrap--arrows-outside .eisilc-slider-arrow--prev {
	left: -52px;
}

.eisilc-slider-wrap--arrows-outside .eisilc-slider-arrow--next {
	right: -52px;
}

/* Mobile: si no hay espacio afuera (Elementor sin margen), las flechas
 * vuelven a quedar sobre los bordes internos del wrap, solapadas sobre
 * los cards. Mantiene la usabilidad en pantallas estrechas sin que las
 * flechas se salgan del viewport. */
@media (max-width: 768px) {
	.eisilc-slider-wrap--arrows-outside .eisilc-slider-arrow--prev {
		left: 4px;
	}
	.eisilc-slider-wrap--arrows-outside .eisilc-slider-arrow--next {
		right: 4px;
	}
}

/* Responsive: en pantallas chicas limitar el máximo de items visibles
 * pero respetando `visible` cuando ya es menor. Así visible="1" sigue
 * ocupando 100% en mobile en lugar de mostrarse a 50% u 85%. */
@media (max-width: 1024px) {
	.eisilc-cards--slider > .eisilc-card-rich {
		flex-basis: calc((100% - (min(var(--eisilc-visible, 4), 3) - 1) * 16px) / min(var(--eisilc-visible, 4), 3));
	}
}
@media (max-width: 768px) {
	.eisilc-cards--slider > .eisilc-card-rich {
		flex-basis: calc((100% - (min(var(--eisilc-visible, 4), 2) - 1) * 16px) / min(var(--eisilc-visible, 4), 2));
	}
}
@media (max-width: 520px) {
	.eisilc-cards--slider > .eisilc-card-rich {
		flex-basis: 100%;
	}
	.eisilc-slider-arrow {
		width: 38px;
		height: 38px;
		font-size: 24px;
		padding: 0 0 3px 0;
	}
}

/* ============================================================
 * 15. Hero card — [eisilc_event_hero]
 *
 * Card grande horizontal con imagen de fondo + velo negro encima.
 * 3 estados visuales: active (verde) | upcoming (celeste) | past (gris).
 * El estado past también aplica filtro grayscale a la imagen.
 * ============================================================ */

.eisilc-hero {
	position: relative;
	margin: 24px 0;
	padding: 56px 48px;
	border-radius: 16px;
	overflow: hidden;
	color: #fff;
	background-color: #0a1228;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 280px;
	display: flex;
	align-items: center;
}

/* Estado past: la imagen va a escala de grises. El velo negro sigue. */
.eisilc-hero--past {
	filter: grayscale(80%);
}

.eisilc-hero__body {
	position: relative;
	max-width: 720px;
	width: 100%;
}

.eisilc-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.eisilc-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	border-radius: 99px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.eisilc-hero__pill--featured {
	background: #7c3aed;
	color: #fff;
}

.eisilc-hero__pill--state {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.eisilc-hero__pill-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.eisilc-hero__pill--state-active .eisilc-hero__pill-dot {
	background: #10b981;
}
.eisilc-hero__pill--state-upcoming .eisilc-hero__pill-dot {
	background: #00aeef;
}
.eisilc-hero__pill--state-past .eisilc-hero__pill-dot {
	background: #9ca3af;
}

.eisilc-hero__title {
	margin: 0 0 14px;
	font-family: "Poppins", system-ui, sans-serif;
	/* !important para vencer al Elementor Kit (.elementor-kit-XXX h2 {...})
	 * que tiene specificity 0,1,1 y le pisa esta regla. */
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	color: #fff !important;
}

.eisilc-hero__title a {
	color: inherit !important;
	text-decoration: none;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

.eisilc-hero__title a:hover {
	color: #00aeef !important;
}

.eisilc-hero__description {
	margin: 0 0 22px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88) !important;
}

.eisilc-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.eisilc-hero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.92);
}

.eisilc-hero__meta-icon {
	font-size: 16px;
	line-height: 1;
}

.eisilc-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 28px;
	border-radius: 99px;
	background: #fff;
	color: #0a1228 !important;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		transform 0.15s ease;
}

.eisilc-hero__cta:hover {
	background: #00aeef !important;
	color: #fff !important;
	transform: translateX(3px);
}

/* En estado past, el CTA se ve más sobrio */
.eisilc-hero--past .eisilc-hero__cta {
	background: rgba(255, 255, 255, 0.12);
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.eisilc-hero__cta-arrow {
	transition: transform 0.15s ease;
}

.eisilc-hero__cta:hover .eisilc-hero__cta-arrow {
	transform: translateX(3px);
}

@media (max-width: 768px) {
	.eisilc-hero {
		padding: 32px 24px;
		min-height: 240px;
	}
	.eisilc-hero__title {
		font-size: 22px !important;
	}
	.eisilc-hero__description {
		font-size: 15px;
	}
	.eisilc-hero__meta {
		gap: 12px;
	}
	.eisilc-hero__cta {
		padding: 10px 22px;
		font-size: 14px;
	}
}

/* ============================================================
 * 16. Etiquetas standalone — [eisilc_event_tags]
 *
 * Mismo estilo de chips que usan los cards del listado. Uso típico:
 * en el template del single evento, justo encima o debajo del título.
 * ============================================================ */

.eisilc-event-tags {
	margin: 12px 0;
}

.eisilc-event-tags__title {
	margin: 0 0 8px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #50575e;
}

.eisilc-event-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.eisilc-event-tags__tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 99px;
	background: #f3f4f6;
	color: #1a2332 !important;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none !important;
	line-height: 1.4;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

a.eisilc-event-tags__tag:hover {
	background: #00aeef !important;
	color: #fff !important;
}

/* ============================================================
 * 14. Sesiones — [eisilc_event_sessions]
 *
 * Timeline agrupado por día. Cada día tiene un header con un bullet
 * azul + label tipo "Viernes 4 de junio · 2026" seguido de una pila
 * de cards de sesión.
 *
 * Cada card tiene:
 *   - Columna izquierda: hora inicio + divisor vertical + hora fin
 *   - Columna derecha: pildoras (tipo + estado) + título + meta (sala,
 *     responsable)
 *   - Esquina superior derecha: número de sesión (01, 02, ...)
 *   - Borde izquierdo celeste decorativo (cambia de color según estado)
 * ============================================================ */

.eisilc-sessions {
	margin: 16px 0;
	font-family: "Poppins", system-ui, sans-serif;
	color: #1a2332;
}

.eisilc-sessions__title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: #111;
}

.eisilc-sessions__day {
	position: relative;
	margin: 0 0 14px;
}

.eisilc-sessions__day:last-child {
	margin-bottom: 0;
}

/* Línea vertical conectora que va desde el bullet del día hasta el
 * último card. Pasa por la izquierda de cada card, con ticks horizontales
 * que se conectan al borde del card. */
.eisilc-sessions__day::before {
	content: "";
	position: absolute;
	left: 3px; /* centro del bullet (que mide 7px) */
	top: 14px; /* arranca debajo del label del día */
	bottom: 6px;
	width: 1px;
	background: #d4d4d8;
	z-index: 0;
}

.eisilc-sessions__day-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #50575e;
	letter-spacing: 0.01em;
}

.eisilc-sessions__day-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #00aeef;
	flex-shrink: 0;
}

.eisilc-sessions__items {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 22px; /* deja espacio para la línea vertical + tick */
}

/* Card de sesión — compacto */
.eisilc-sessions__item {
	position: relative;
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 10px 14px 10px 18px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}

/* Tick horizontal que conecta cada card con la línea vertical */
.eisilc-sessions__item::after {
	content: "";
	position: absolute;
	left: -19px; /* punto donde está la línea vertical */
	top: 50%;
	width: 17px;
	height: 1px;
	background: #d4d4d8;
}

/* Línea vertical decorativa al inicio, color según estado */
.eisilc-sessions__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 2px;
	background: #00aeef;
}

.eisilc-sessions__item--past::before {
	background: #d4d4d8;
}
.eisilc-sessions__item--ongoing::before {
	background: #10b981;
}
.eisilc-sessions__item--upcoming::before {
	background: #00aeef;
}

/* Columna izquierda: horas en columna con divisor pequeño */
.eisilc-sessions__item-time {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1px;
	line-height: 1;
}

.eisilc-sessions__time-value {
	font-size: 14px;
	font-weight: 700;
	color: #1a2332;
}

.eisilc-sessions__time-value--end {
	font-size: 11px;
	font-weight: 500;
	color: #8c8f94;
}

.eisilc-sessions__time-divider {
	display: block;
	width: 12px;
	height: 1px;
	background: #d4d4d8;
	margin: 1px 0;
}

/* Columna central: body */
.eisilc-sessions__item-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.eisilc-sessions__item-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.eisilc-sessions__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 7px;
	border-radius: 99px;
	font-size: 9px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.03em;
}

.eisilc-sessions__pill--type {
	background: #e0f2fe;
	color: #0369a1;
	text-transform: uppercase;
}

.eisilc-sessions__pill--state {
	background: transparent;
	color: #50575e;
	padding-left: 0;
}

.eisilc-sessions__pill-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.eisilc-sessions__pill--past .eisilc-sessions__pill-dot {
	background: #9ca3af;
}
.eisilc-sessions__pill--ongoing .eisilc-sessions__pill-dot {
	background: #10b981;
}
.eisilc-sessions__pill--upcoming .eisilc-sessions__pill-dot {
	background: #00aeef;
}

.eisilc-sessions__item-title {
	margin: 0;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #1a2332 !important;
}

.eisilc-sessions__item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1px;
}

.eisilc-sessions__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: #50575e;
}

.eisilc-sessions__meta-icon {
	font-size: 11px;
	line-height: 1;
}

/* Número de sesión arriba a la derecha */
.eisilc-sessions__item-number {
	align-self: flex-start;
	font-size: 10px;
	font-weight: 600;
	color: #c4c7c9;
	letter-spacing: 0.04em;
}

/* Estado past: card atenuado */
.eisilc-sessions__item--past .eisilc-sessions__time-value,
.eisilc-sessions__item--past .eisilc-sessions__item-title {
	color: #6b7280;
}

/* Mobile: hora a la izquierda horizontal, body abajo */
@media (max-width: 640px) {
	.eisilc-sessions__item {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"time   number"
			"body   body";
		gap: 6px;
		padding: 9px 12px 9px 16px;
	}
	.eisilc-sessions__item-time {
		grid-area: time;
		flex-direction: row;
		align-items: center;
		gap: 5px;
	}
	.eisilc-sessions__item-body {
		grid-area: body;
	}
	.eisilc-sessions__item-number {
		grid-area: number;
	}
	.eisilc-sessions__time-divider {
		width: 8px;
	}
}

/* ============================================================
 * Campo de fecha — Flatpickr datepicker + chips de shortcut
 *
 * Reemplaza el antiguo <select name="eisilc_when"> por:
 *   - Input "Fecha específica" que abre Flatpickr al hacer click.
 *   - Chips rápidos abajo: Cualquier fecha / Hoy / Próximos / Pasados.
 *
 * Comparte el wrapper visual con .eisilc-searchx__field--select.
 * ============================================================ */
.eisilc-searchx__field--date {
	border: 1px solid #e1e1e1;
	cursor: pointer;
	position: relative;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

.eisilc-searchx__field--date > .eisilc-searchx__field-icon {
	position: absolute;
	top: 24px;
	left: 12px;
}

.eisilc-searchx__field--date > .eisilc-searchx__field-content {
	padding-left: 30px;
	position: relative;
}

/* El tema (Hello Elementor Child) pinta input[type=text] con
 * border, padding y border-radius vía selector de baja especificidad.
 * Forzamos el reset con !important para que el input quede "limpio"
 * dentro del wrap que ya provee su propio borde. */
.eisilc-searchx__date-input {
	width: 100% !important;
	border: 1px solid #ddd !important;
	background: transparent !important;
	font-size: 14px !important;
	color: #111 !important;
	font-family: inherit !important;
	padding: 5px !important;
	outline: none !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	border-radius: 5px !important;
	box-shadow: none !important;
	transition: none !important;
}

.eisilc-searchx__date-input::placeholder {
	color: #777;
	font-weight: 500;
}

/* Campo "bonito" de Flatpickr (altInput): formato 12-JUN-2026.
 * Flatpickr guarda el mes con su forma del locale ("Jun"); lo pasamos a
 * mayúsculas solo en el valor visible. El placeholder se deja sin
 * transformar para que "Elegir día" no salga en mayúsculas. */
.eisilc-date-altinput {
	text-transform: uppercase !important;
	letter-spacing: 0.02em;
}

.eisilc-date-altinput::placeholder {
	text-transform: none;
	letter-spacing: normal;
}

.eisilc-searchx__date-clear {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-8px);
	background: transparent !important;
	border: 0;
	color: #999 !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 4px 8px !important;
	border-radius: 10px !important;
}

.eisilc-searchx__date-clear:hover {
	color: #111;
	background: rgba(0, 0, 0, 0.05);
}

/* Override de Flatpickr para usar los colores de marca ISIL.
 * Solo apuntamos a las clases que cambian visualmente (día seleccionado
 * y hover); el resto del tema default queda como está. */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange {
	background: #fdbf10 !important;
	border-color: #fdbf10 !important;
	color: #000 !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
	background: #00aeef !important;
	color: #fff !important;
	border-color: #00aeef !important;
}

.flatpickr-day.today {
	border-color: #00aeef !important;
}

.flatpickr-day.today:not(.selected) {
	color: #00aeef !important;
}

/* ------------------------------------------------------------
 * Encabezado mes/año — UI de marca ISIL.
 *
 * Contexto: el tema (Hello Elementor Child) pinta <select> e <input>
 * globales con borde, padding y ancho 100%, lo que descuadraba el header
 * de Flatpickr (mes y año superpuestos). Aquí reseteamos esos controles
 * y los re-estilizamos como "pills" inline con hover de marca, chevron
 * propio y flechas de navegación circulares.
 * ------------------------------------------------------------ */

/* Barra del header: un poco más de aire y centrado vertical. */
.flatpickr-months {
	align-items: center !important;
	padding: 6px 4px !important;
}

.flatpickr-current-month {
	white-space: nowrap !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	font-size: 15px !important;
	padding: 0 !important;
}

/* Reset común para el <select> de mes y el <input> de año: sin el borde
 * ni el fondo que les inyecta el tema; tipografía consistente. */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	display: inline-block !important;
	vertical-align: middle !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: 600 !important;
	color: #111 !important;
	height: auto !important;
	line-height: 1 !important;
	min-height: 0 !important;
	float: none !important;
	cursor: pointer !important;
	border-radius: 8px !important;
	transition:
		background-color 0.15s ease,
		color 0.15s ease !important;
}

/* Mes: chevron propio (quitamos la flecha nativa) + pill con hover. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 5px 26px 5px 10px !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
	background-size: 12px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
	background-color: #f1f5f9 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-month {
	color: #111 !important;
}

/* Año: pill con hover; las flechitas de spinner aparecen al hover. */
.flatpickr-current-month .numInputWrapper {
	width: auto !important;
	display: inline-block !important;
	vertical-align: middle !important;
	border-radius: 8px !important;
	transition: background-color 0.15s ease !important;
}

.flatpickr-current-month .numInputWrapper:hover {
	background-color: #f1f5f9 !important;
}

.flatpickr-current-month input.cur-year {
	width: 8ch !important;
	padding: 5px 15px 5px 8px !important;
	margin: 0 !important;
	text-align: center !important;
}

/* Spinner del año en celeste de marca al pasar el cursor. */
.flatpickr-current-month .numInputWrapper span:hover {
	background: rgba(0, 174, 239, 0.1) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
	border-bottom-color: #00aeef !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
	border-top-color: #00aeef !important;
}

/* Flechas de navegación prev/next: botones circulares con hover de marca. */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	transition: background-color 0.15s ease !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	background-color: #f1f5f9 !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: #00aeef !important;
}

/* ============================================================
 * Choices.js — select custom de Modalidad
 *
 * Override del tema default de Choices para:
 *   - Integrar el control "cerrado" con el wrap del field
 *     (.eisilc-searchx__field--select) sin doble borde ni padding extra.
 *   - Colores ISIL: hover/keyboard en celeste, opción ya seleccionada
 *     en amarillo.
 * ============================================================ */

/* Control "cerrado": el div que Choices crea envolviendo el select.
 * Lo hacemos transparente y sin borde para que se vea como antes
 * (el wrap padre ya da el contorno). */
.eisilc-searchx__field--select .choices {
	margin-bottom: 0 !important;
	width: 100%;
}

.eisilc-searchx__field--select .choices__inner {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	font-size: 14px !important;
	font-family: inherit !important;
	color: #111 !important;
	font-weight: 500 !important;
}

.eisilc-searchx__field--select .choices__list--single {
	padding: 0 16px 0 0 !important;
}

.eisilc-searchx__field--select .choices__list--single .choices__item {
	padding-right: 0 !important;
	width: 100%;
	border: solid 1px #ddd;
	padding: 5px;
	border-radius: 4px;
}

/* Flecha custom (chevron) en lugar de la default de Choices. */
.eisilc-searchx__field--select .choices[data-type*="select-one"]::after {
	border: 0 !important;
	width: 14px !important;
	height: 14px !important;
	margin-top: -7px !important;
	right: 0 !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
}

/* Cuando el dropdown está abierto: ocultar el chevron por defecto
 * (Choices lo rota; el nuestro lo mantenemos estático). */
.eisilc-searchx__field--select .choices.is-open::after {
	margin-top: -7px !important;
	border: 0 !important;
}

/* Menú desplegable (cuando se abre) */
.eisilc-searchx__field--select .choices__list--dropdown,
.eisilc-searchx__field--select .choices__list[aria-expanded] {
	border: 1px solid #e1e1e1;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	margin-top: 4px;
	padding: 4px;
	overflow: hidden;
}

/* Opciones individuales */
.eisilc-searchx__field--select .choices__list--dropdown .choices__item,
.eisilc-searchx__field--select .choices__list[aria-expanded] .choices__item {
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 14px;
	color: #111;
}

/* Hover / focus (keyboard) → celeste */
.eisilc-searchx__field--select .choices__list--dropdown .choices__item--selectable.is-highlighted,
.eisilc-searchx__field--select .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
	background-color: #00aeef !important;
	color: #fff !important;
}

/* Opción ya seleccionada (la que está activa) → amarillo ISIL */
.eisilc-searchx__field--select .choices__list--dropdown .choices__item--selectable[aria-selected="true"],
.eisilc-searchx__field--select .choices__list[aria-expanded] .choices__item--selectable[aria-selected="true"] {
	background-color: #fdbf10 !important;
	color: #000 !important;
	font-weight: 600;
}

/* Si la seleccionada también está highlighted (hover), gana el celeste
 * porque el usuario está apuntando a otra acción visual. */
.eisilc-searchx__field--select .choices__list--dropdown .choices__item--selectable[aria-selected="true"].is-highlighted,
.eisilc-searchx__field--select
	.choices__list[aria-expanded]
	.choices__item--selectable[aria-selected="true"].is-highlighted {
	background-color: #00aeef !important;
	color: #fff !important;
}

/* Focus visible del control cerrado (no del menú) */
.eisilc-searchx__field--select .choices:focus-within .choices__inner {
	outline: none !important;
}