/* ==========================================================================
   Programación Diocesana – Diócesis de Bata
   Colores configurables desde Programación › Ajustes (variables CSS).
   ========================================================================== */

.dbp-wrap,
.dbp-modal,
.dbp-ficha {
	--dbp-principal: #032553;
	--dbp-secundario: #ebaf35;
	--dbp-contraste: #ffffff;

	/* Valores derivados (con alternativa para navegadores antiguos) */
	--dbp-suave: #f2f4f8;
	--dbp-borde: #d9dee8;
	--dbp-texto-suave: #4a5a78;
	--dbp-dorado-suave: #fbeecd;

	--dbp-serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.dbp-wrap,
	.dbp-modal,
	.dbp-ficha {
		--dbp-suave: color-mix(in srgb, var(--dbp-principal) 5%, var(--dbp-contraste));
		--dbp-borde: color-mix(in srgb, var(--dbp-principal) 15%, var(--dbp-contraste));
		--dbp-texto-suave: color-mix(in srgb, var(--dbp-principal) 72%, var(--dbp-contraste));
		--dbp-dorado-suave: color-mix(in srgb, var(--dbp-secundario) 25%, var(--dbp-contraste));
	}
}

.dbp-wrap *,
.dbp-modal *,
.dbp-ficha * {
	box-sizing: border-box;
}

/* Protección frente a estilos de botones y enlaces del tema */
.dbp-wrap button,
.dbp-modal button {
	font: inherit;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.dbp-modal a,
.dbp-ficha a {
	box-shadow: none;
}

.dbp-wrap button:focus-visible,
.dbp-modal button:focus-visible,
.dbp-modal a:focus-visible,
.dbp-ficha a:focus-visible {
	outline: 3px solid var(--dbp-secundario);
	outline-offset: 2px;
}

/* ---------- Fecha de hoy + botón ---------- */

.dbp-barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.dbp-fecha-hoy {
	margin: 0;
	padding: 0 0 2px;
	font-family: var(--dbp-serif);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--dbp-principal);
	border-bottom: 3px solid var(--dbp-secundario);
}

/* ---------- Botón "Programación del mes" ---------- */

.dbp-boton {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.55em 1.35em 0.55em 0.55em;
	background: var(--dbp-principal);
	color: var(--dbp-contraste);
	border: 0;
	border-radius: 999px;
	font-family: var(--dbp-serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dbp-boton-icono {
	display: grid;
	place-items: center;
	width: 2.3em;
	height: 2.3em;
	border-radius: 50%;
	background: var(--dbp-secundario);
	color: var(--dbp-principal);
	flex: none;
}

.dbp-boton-icono svg {
	width: 1.2em;
	height: 1.2em;
}

.dbp-boton:hover {
	background: var(--dbp-secundario);
	color: var(--dbp-principal);
}

.dbp-boton:hover .dbp-boton-icono {
	background: var(--dbp-principal);
	color: var(--dbp-secundario);
}

/* ---------- Ventana emergente ---------- */

html.dbp-sin-scroll {
	overflow: hidden;
}

.dbp-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.dbp-modal[hidden] {
	display: none;
}

.dbp-modal-fondo {
	position: absolute;
	inset: 0;
	background: rgba(3, 17, 40, 0.7);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.dbp-modal-caja {
	position: relative;
	width: 100%;
	max-width: 1100px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: var(--dbp-contraste);
	border-radius: 16px;
	box-shadow: 0 30px 80px rgba(3, 17, 40, 0.45);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.dbp-modal.abierto .dbp-modal-fondo { opacity: 1; }
.dbp-modal.abierto .dbp-modal-caja { opacity: 1; transform: none; }

.dbp-cerrar {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: transparent;
	color: var(--dbp-contraste);
	font-size: 26px;
	line-height: 1;
}

.dbp-cerrar:hover {
	background: var(--dbp-secundario);
	border-color: var(--dbp-secundario);
	color: var(--dbp-principal);
}

/* ---------- Calendario ---------- */

.dbp-calendario {
	container-type: inline-size;
	background: var(--dbp-contraste);
	color: var(--dbp-principal);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

.dbp-modo-insertado .dbp-calendario {
	border: 1px solid var(--dbp-borde);
	border-radius: 16px;
	overflow: hidden;
}

.dbp-cab {
	padding: 24px 76px 22px 28px;
	background: var(--dbp-principal);
	color: var(--dbp-contraste);
	border-bottom: 5px solid var(--dbp-secundario);
}

.dbp-cab-titulo {
	margin: 0;
	padding: 0;
	font-family: var(--dbp-serif);
	font-size: clamp(1.3rem, 3vw, 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
	border: 0;
}

.dbp-cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.dbp-col-cal {
	padding: 22px 26px 26px;
}

.dbp-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.dbp-mes {
	flex: 1;
	margin: 0;
	font-family: var(--dbp-serif);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--dbp-principal);
}

.dbp-hoy {
	padding: 0.5em 1.1em;
	border-radius: 999px;
	border: 1.5px solid var(--dbp-secundario);
	background: transparent;
	color: var(--dbp-principal);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
}

.dbp-hoy:hover {
	background: var(--dbp-secundario);
}

.dbp-flecha {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0 0 3px;
	border-radius: 50%;
	border: 1px solid var(--dbp-borde);
	background: transparent;
	color: var(--dbp-principal);
	font-size: 26px;
	line-height: 1;
}

.dbp-flecha:hover {
	background: var(--dbp-principal);
	border-color: var(--dbp-principal);
	color: var(--dbp-contraste);
}

.dbp-semana,
.dbp-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
}

.dbp-semana {
	margin-bottom: 6px;
}

.dbp-semana span {
	padding: 4px 0;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--dbp-texto-suave);
}

.dbp-dia,
.dbp-vacia {
	min-height: 86px;
	border-radius: 8px;
}

.dbp-vacia {
	background: var(--dbp-suave);
	opacity: 0.55;
}

.dbp-dia {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 6px;
	background: var(--dbp-contraste);
	border: 1px solid var(--dbp-borde);
	color: var(--dbp-principal);
	line-height: 1.2;
	text-align: left;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.dbp-dia:hover {
	border-color: var(--dbp-principal);
}

.dbp-num {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 0.9rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.dbp-dia.es-hoy .dbp-num {
	background: var(--dbp-secundario);
	color: var(--dbp-principal);
}

.dbp-dia.con-eventos {
	background: var(--dbp-suave);
}

.dbp-chips {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.dbp-chip {
	display: block;
	padding: 2px 6px;
	border-left: 3px solid var(--dbp-secundario);
	border-radius: 3px;
	background: var(--dbp-principal);
	color: var(--dbp-contraste);
	font-size: 0.72rem;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dbp-chip-mas {
	padding-left: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--dbp-texto-suave);
}

.dbp-puntos {
	display: none;
	justify-content: center;
	gap: 3px;
	margin-top: auto;
}

.dbp-puntos i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dbp-secundario);
}

.dbp-dia.es-sel {
	background: var(--dbp-principal);
	border-color: var(--dbp-principal);
	color: var(--dbp-contraste);
}

.dbp-dia.es-sel .dbp-chip {
	background: var(--dbp-contraste);
	color: var(--dbp-principal);
}

.dbp-dia.es-sel .dbp-chip-mas {
	color: var(--dbp-contraste);
}

.dbp-cargando .dbp-grid {
	opacity: 0.5;
}

/* ---------- Panel de actividades ---------- */

.dbp-panel {
	padding: 22px 24px 26px;
	background: var(--dbp-suave);
	border-top: 1px solid var(--dbp-borde);
}

.dbp-panel-cab {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 14px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--dbp-secundario);
}

.dbp-panel-titulo {
	margin: 0;
	padding: 0;
	font-family: var(--dbp-serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--dbp-principal);
}

.dbp-ver-mes {
	padding: 0;
	border: 0;
	background: none;
	color: var(--dbp-principal);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: underline;
	text-decoration-color: var(--dbp-secundario);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.dbp-lista {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dbp-evento {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 14px;
	background: var(--dbp-contraste);
	border: 1px solid var(--dbp-borde);
	border-radius: 10px;
}

.dbp-evento::before {
	content: none;
}

.dbp-evento-fecha {
	display: flex;
	flex: 0 0 54px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 60px;
	border-radius: 8px 8px 4px 4px;
	background: var(--dbp-principal);
	border-bottom: 4px solid var(--dbp-secundario);
	color: var(--dbp-contraste);
}

.dbp-evento-dia {
	font-family: var(--dbp-serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.dbp-evento-mes {
	margin-top: 3px;
	font-size: 0.75rem;
	line-height: 1;
}

.dbp-evento-cuerpo {
	flex: 1;
	min-width: 0;
}

.dbp-evento-tipos {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 6px;
}

.dbp-evento-tipo {
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--dbp-dorado-suave);
	color: var(--dbp-principal);
	font-size: 0.75rem;
	font-weight: 700;
}

.dbp-evento-titulo {
	margin: 0 0 6px;
	padding: 0;
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
}

.dbp-evento-titulo a {
	color: var(--dbp-principal);
	text-decoration: none;
}

.dbp-evento-titulo a:hover {
	text-decoration: underline;
	text-decoration-color: var(--dbp-secundario);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.dbp-evento-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0 0 6px;
	font-size: 0.82rem;
	color: var(--dbp-texto-suave);
}

.dbp-meta-dato {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.dbp-meta-dato svg {
	flex: none;
	width: 14px;
	height: 14px;
}

.dbp-evento-resumen {
	margin: 0 0 10px;
	font-size: 0.87rem;
	color: var(--dbp-texto-suave);
}

.dbp-evento-link {
	display: inline-block;
	padding: 0.35em 1em;
	border: 1.5px solid var(--dbp-secundario);
	border-radius: 999px;
	color: var(--dbp-principal);
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
}

.dbp-evento-link:hover {
	background: var(--dbp-secundario);
	color: var(--dbp-principal);
}

.dbp-vacio {
	margin: 0;
	padding: 28px 12px;
	text-align: center;
	color: var(--dbp-texto-suave);
	font-style: italic;
}

/* ---------- Adaptación al ancho disponible ---------- */

@container (min-width: 820px) {
	.dbp-cuerpo { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
	.dbp-panel { border-top: 0; border-left: 1px solid var(--dbp-borde); max-height: 680px; overflow-y: auto; }
}

@container (max-width: 560px) {
	.dbp-col-cal { padding: 16px 14px 18px; }
	.dbp-mes { font-size: 1.3rem; }
	.dbp-semana, .dbp-grid { gap: 4px; }
	.dbp-semana span { font-size: 0.72rem; }
	.dbp-dia, .dbp-vacia { min-height: 50px; }
	.dbp-dia { align-items: center; padding: 4px 2px; }
	.dbp-chips { display: none; }
	.dbp-puntos { display: flex; }
	.dbp-dia.es-sel .dbp-puntos i { background: var(--dbp-contraste); }
	.dbp-panel { padding: 18px 14px 22px; }
	.dbp-cab { padding: 20px 66px 18px 18px; }
}

/* Navegadores sin consultas de contenedor */
@supports not (container-type: inline-size) {
	@media (min-width: 900px) {
		.dbp-modal .dbp-cuerpo { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
		.dbp-modal .dbp-panel { border-top: 0; border-left: 1px solid var(--dbp-borde); }
	}
	@media (max-width: 600px) {
		.dbp-dia, .dbp-vacia { min-height: 50px; }
		.dbp-dia { align-items: center; }
		.dbp-chips { display: none; }
		.dbp-puntos { display: flex; }
	}
}

@media (max-width: 480px) {
	.dbp-barra { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
	.dbp-modal { padding: 0; }
	.dbp-modal-caja { height: 100%; max-height: 100%; border-radius: 0; }
	.dbp-cerrar { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.dbp-modal-fondo,
	.dbp-modal-caja,
	.dbp-boton,
	.dbp-dia { transition: none; }
	.dbp-modal-caja { transform: none; }
}

/* ---------- Ficha en la página de cada actividad ---------- */

.dbp-ficha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin: 0 0 1.75em;
	padding: 18px 22px;
	background: var(--dbp-principal);
	border-left: 5px solid var(--dbp-secundario);
	border-radius: 10px;
	color: var(--dbp-contraste);
}

.dbp-ficha-datos {
	display: flex;
	flex: 1 1 320px;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
}

.dbp-ficha-datos dt {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--dbp-secundario);
}

.dbp-ficha-datos dd {
	margin: 0;
	font-weight: 600;
	color: var(--dbp-contraste);
}

.dbp-ficha-enlace {
	display: inline-block;
	padding: 0.55em 1.3em;
	border-radius: 999px;
	background: var(--dbp-secundario);
	color: var(--dbp-principal) !important;
	font-weight: 700;
	text-decoration: none !important;
}

.dbp-ficha-enlace:hover {
	background: var(--dbp-contraste);
}