/* ==========================================================================
   Calendario Tuyo Tienda
   - NO define tipografías: hereda la fuente/peso del tema (Divi/Elementor).
   - Colores configurables vía variables --ctt-primary / --ctt-secondary / --ctt-tag.
   ========================================================================== */
.ctt-cal {
	--ctt-primary: #c47f40;
	--ctt-secondary: #26785e;
	--ctt-tag: #a9603a;
	--ctt-borde: rgba(0, 0, 0, .1);
	max-width: 1000px;
	margin: 0 auto;
}
.ctt-cal * { box-sizing: border-box; }

/* ---------- Filtros ---------- */
.ctt-cal__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.4em;
}
.ctt-chip {
	font: inherit;
	cursor: pointer;
	padding: .5em 1.1em;
	border-radius: 999px;
	border: 1px solid var(--ctt-borde);
	background: transparent;
	color: inherit;
	line-height: 1.2;
	transition: all .2s ease;
}
.ctt-chip:hover { border-color: var(--ctt-secondary); }
.ctt-chip.is-active {
	background: var(--ctt-secondary);
	border-color: var(--ctt-secondary);
	color: #fff;
}

/* ---------- Grupos (Próximos / Anteriores) ---------- */
.ctt-grupo {
	margin: 1.4em 0 .8em;
	font-size: 1.05em;
	font-weight: 600;
	color: var(--ctt-primary);
	letter-spacing: .02em;
}
.ctt-grupo:first-child { margin-top: 0; }

/* ---------- Lista / loading ---------- */
.ctt-cal__lista.is-loading { opacity: .45; transition: opacity .2s ease; }

/* ---------- Tarjeta de evento ---------- */
.ctt-event {
	display: flex;
	gap: 16px;
	align-items: stretch;
	padding: 14px;
	margin-bottom: 14px;
	border: 1px solid var(--ctt-borde);
	border-radius: 14px;
	background: rgba(255, 255, 255, .65);
	transition: box-shadow .2s ease, transform .2s ease;
}
.ctt-event:hover {
	box-shadow: 0 8px 26px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

/* Mosaico de fecha */
.ctt-event__date {
	flex: 0 0 64px;
	width: 64px;
	border-radius: 10px;
	background: var(--ctt-primary);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
	line-height: 1.05;
}
.ctt-event__day { font-size: 1.7em; font-weight: 700; }
.ctt-event__mon { font-size: .8em; text-transform: uppercase; letter-spacing: .05em; }

/* Imagen */
.ctt-event__media { flex: 0 0 120px; }
.ctt-event__img {
	width: 120px;
	height: 100%;
	min-height: 88px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

/* Cuerpo */
.ctt-event__body { flex: 1 1 auto; min-width: 0; }
.ctt-event__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ctt-badge {
	font-size: .72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 3px 9px;
	border-radius: 6px;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
/* "En vivo ahora": solo cuando el evento está sucediendo → parpadea. */
.ctt-badge--ahora { background: var(--ctt-tag); }
.ctt-badge--ahora::before {
	content: '';
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
	animation: ctt-pulse 1.6s infinite;
}
/* Evento en vivo pero aún no sucediendo: etiqueta tranquila, sin parpadeo. */
.ctt-badge--vivo { background: var(--ctt-secondary); }
.ctt-badge--grabado { background: #6b6b6b; }
@keyframes ctt-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
	70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.ctt-cat {
	font-size: .72em;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 6px;
	color: #fff;
	background: var(--c, var(--ctt-secondary));
}
.ctt-event__title { margin: .15em 0 .25em; font-size: 1.18em; line-height: 1.25; }

/* Botón "Unirse al vivo" (debajo del título) */
.ctt-vivo { margin: .15em 0 .55em; }
.ctt-vivo-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--ctt-tag);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: .5em 1.15em;
	border-radius: 999px;
	font-size: .95em;
	line-height: 1.1;
}
.ctt-vivo-btn::before {
	content: '';
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: ctt-pulse 1.6s infinite;
}
.ctt-vivo-btn:hover { filter: brightness(.92); color: #fff; }

.ctt-event__meta { font-size: .9em; opacity: .8; margin-bottom: .4em; }
.ctt-event__desc { font-size: .95em; line-height: 1.55; margin: 0 0 .7em; opacity: .9; }

/* Acciones */
.ctt-event__actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ctt-btn {
	font: inherit;
	display: inline-block;
	background: var(--ctt-primary);
	color: #fff;
	text-decoration: none;
	padding: .55em 1.2em;
	border-radius: 999px;
	font-weight: 600;
	transition: filter .2s ease;
}
.ctt-btn:hover { filter: brightness(.92); color: #fff; }
.ctt-add {
	font-size: .85em;
	text-decoration: none;
	color: var(--ctt-secondary);
	border-bottom: 1px dashed currentColor;
	padding-bottom: 1px;
}
.ctt-add:hover { color: var(--ctt-primary); }

.ctt-vacio {
	padding: 1.6em;
	text-align: center;
	border: 1px dashed var(--ctt-borde);
	border-radius: 12px;
	opacity: .75;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.ctt-event { flex-wrap: wrap; }
	.ctt-event__media { flex-basis: 100%; order: -1; }
	.ctt-event__img { width: 100%; height: 160px; }
	.ctt-event__date {
		flex-direction: row;
		width: auto;
		gap: 6px;
		padding: 4px 12px;
	}
	.ctt-event__day { font-size: 1.2em; }
}

/* ---------- Barra superior: filtros + cambio de vista ---------- */
.ctt-cal__top { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: .6em; }
.ctt-cal__top .ctt-cal__filtros { margin: 0; }
.ctt-cal__views { display: inline-flex; border: 1px solid var(--ctt-borde); border-radius: 999px; overflow: hidden; }
.ctt-view { font: inherit; cursor: pointer; background: transparent; color: inherit; border: 0; padding: .5em 1.1em; line-height: 1.2; }
.ctt-view.is-active { background: var(--ctt-primary); color: #fff; }
.ctt-cal__tz { font-size: .85em; opacity: .7; margin: 0 0 1.1em; }
.ctt-cal__panel.is-loading { opacity: .45; transition: opacity .2s ease; }

.ctt-event { cursor: pointer; }
.ctt-event__more { display: inline-block; margin-top: .3em; font-size: .85em; font-weight: 600; color: var(--ctt-primary); }

/* ---------- Vista calendario (grilla mensual) ---------- */
.ctt-month__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: .8em; }
.ctt-month__title { font-weight: 600; font-size: 1.1em; min-width: 9em; text-align: center; }
.ctt-month__btn { font: inherit; cursor: pointer; background: transparent; border: 1px solid var(--ctt-borde); border-radius: 8px; width: 2.2em; height: 2.2em; line-height: 1; color: inherit; }
.ctt-month__btn:hover { border-color: var(--ctt-primary); color: var(--ctt-primary); }
.ctt-month__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ctt-month__dow { text-align: center; font-size: .8em; font-weight: 600; opacity: .7; padding: 4px 0; text-transform: uppercase; }
.ctt-month__cell { min-height: 78px; border: 1px solid var(--ctt-borde); border-radius: 8px; padding: 4px; background: rgba(255, 255, 255, .5); }
.ctt-month__cell.is-empty { background: transparent; border: 0; }
.ctt-month__cell.is-today { border-color: var(--ctt-primary); box-shadow: inset 0 0 0 1px var(--ctt-primary); }
.ctt-month__num { display: block; font-size: .85em; font-weight: 600; opacity: .7; margin-bottom: 2px; }
.ctt-month__ev { display: block; width: 100%; text-align: left; font: inherit; font-size: .78em; cursor: pointer; background: var(--ctt-primary); color: #fff; border: 0; border-radius: 5px; padding: 2px 5px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctt-month__ev:hover { filter: brightness(.92); }
.ctt-month__evh { font-weight: 700; opacity: .9; }

/* ---------- Ventana emergente (popup) ---------- */
html.ctt-modal-open { overflow: hidden; }
.ctt-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ctt-modal[hidden] { display: none; }
.ctt-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.ctt-modal__box {
	position: relative;
	z-index: 1;
	background: #fff;
	color: #222;
	width: 100%;
	max-width: 620px;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.ctt-modal__close {
	position: absolute; top: 8px; right: 10px; z-index: 2;
	width: 36px; height: 36px; line-height: 34px; text-align: center;
	font-size: 24px; cursor: pointer;
	background: rgba(255, 255, 255, .92); border: 0; border-radius: 50%; color: #333;
}
.ctt-modal__close:hover { background: #fff; }
.ctt-modal__content { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Detalle dentro del popup */
.ctt-detail__media .ctt-detail__img { width: 100%; height: auto; max-height: 300px; object-fit: cover; display: block; }
.ctt-detail__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 20px 0; }
.ctt-detail__title { margin: .3em 0 .2em; padding: 0 20px; font-size: 1.5em; line-height: 1.2; }
.ctt-detail .ctt-vivo { padding: 0 20px; }
.ctt-detail__when { padding: 0 20px; opacity: .8; margin: .2em 0 .6em; }
.ctt-detail__tz { font-size: .85em; opacity: .8; }
.ctt-detail__content { padding: 0 20px; line-height: 1.6; }
.ctt-detail__content img { max-width: 100%; height: auto; border-radius: 8px; }
.ctt-detail__actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 14px 20px 22px; }

@media (max-width: 640px) {
	.ctt-cal__top { flex-direction: column; align-items: stretch; }
	.ctt-month__cell { min-height: auto; }
	.ctt-month__ev { font-size: .7em; }
}