/**
 * Diócesis de Rafaela — shell de aplicación.
 *
 * Carga después de publico.css y reusa sus tokens (.dr). Acá vive el marco
 * "app": barra superior, barra de pestañas inferior fija, hero de la portada y
 * el ritmo de las vistas nuevas (Cronogramas, Lectura del día).
 *
 * Pensado primero para celular. La barra de pestañas es la navegación en
 * pantallas chicas; en escritorio pasa a una fila de enlaces en la barra
 * superior y la de abajo desaparece.
 */

/* ------------------------------------------------------------------ */
/* Base del documento propio                                           */
/* ------------------------------------------------------------------ */

.dr-app {
	--dr-fuente-titulo: "Spectral", Georgia, "Times New Roman", serif;
	--dr-fuente-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	--dr-appbar-h: 56px;
	--dr-tabbar-h: 64px;

	/* Fondo cálido de toda la app, un punto más cálido que el papel de las tarjetas. */
	--dr-app-fondo: #f6f1e9;

	margin: 0;
	padding: 0;
	background: var(--dr-app-fondo);
	color: var(--dr-texto, #24201c);
	font-family: var(--dr-fuente-texto);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

.dr-app * {
	box-sizing: border-box;
}

/* Enlace para saltar al contenido: oculto hasta que recibe foco por teclado. */
.dr-saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.6rem 1rem;
	background: var(--dr-principal, #6b2d2d);
	color: #fff;
	border-radius: 0 0 8px 0;
	font-weight: 600;
	text-decoration: none;
}

.dr-saltar:focus {
	left: 0;
}

.dr-app h1,
.dr-app h2,
.dr-app h3,
.dr-app .dr-titulo,
.dr-app .dr-hero__titulo {
	font-family: var(--dr-fuente-titulo);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ */
/* Barra superior                                                      */
/* ------------------------------------------------------------------ */

.dr-appbar {
	position: sticky;
	top: 0;
	z-index: 30;
	height: var(--dr-appbar-h);
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0 1rem;
	background: rgba(246, 241, 233, 0.92);
	backdrop-filter: saturate(150%) blur(8px);
	-webkit-backdrop-filter: saturate(150%) blur(8px);
	border-bottom: 1px solid var(--dr-borde, #e6e0d6);
}

.dr-appbar__marca {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--dr-fuente-titulo);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--dr-principal, #6b2d2d);
	text-decoration: none;
	white-space: nowrap;
}

.dr-appbar__cruz {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--dr-acento, #b8860b);
}

.dr-appbar__marca small {
	display: block;
	font-family: var(--dr-fuente-texto);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dr-tenue, #6d665d);
}

/* Navegación en escritorio: una sola línea a la derecha. */
.dr-appbar__nav {
	display: none;
	margin-left: auto;
	gap: 0.15rem;
}

.dr-appbar__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.85rem;
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--dr-tenue, #6d665d);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dr-appbar__enlace svg {
	width: 18px;
	height: 18px;
}

.dr-appbar__enlace:hover {
	background: #efe6d8;
	color: var(--dr-principal, #6b2d2d);
}

.dr-appbar__enlace.is-activo {
	background: var(--dr-principal, #6b2d2d);
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Contenedor de contenido                                             */
/* ------------------------------------------------------------------ */

.dr-app__main {
	display: block;
	max-width: 62rem;
	margin-inline: auto;
	padding: 1.25rem 1rem calc(var(--dr-tabbar-h) + env(safe-area-inset-bottom, 0px) + 1.5rem);
}

/* Las vistas del plugin ya traen su propio <main class="dr ...">; acá lo
   dejamos a ancho completo dentro del contenedor de la app. */
.dr-app__main > .dr {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* La portada rompe el margen para que el hero llegue a los bordes. */
.dr-app__main.dr-app__main--inicio {
	padding-top: 0;
}

/* ------------------------------------------------------------------ */
/* Barra de pestañas inferior (celular)                                */
/* ------------------------------------------------------------------ */

.dr-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: #fffdf9;
	border-top: 1px solid var(--dr-borde, #e6e0d6);
	box-shadow: 0 -2px 14px rgba(60, 42, 26, 0.07);
}

.dr-tabbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.18rem;
	min-height: var(--dr-tabbar-h);
	padding: 0.4rem 0.25rem 0.5rem;
	color: var(--dr-tenue, #6d665d);
	text-decoration: none;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	position: relative;
}

.dr-tabbar__item svg {
	width: 24px;
	height: 24px;
}

.dr-tabbar__item span {
	line-height: 1;
	text-align: center;
}

.dr-tabbar__item.is-activo {
	color: var(--dr-principal, #6b2d2d);
}

.dr-tabbar__item.is-activo::before {
	content: "";
	position: absolute;
	top: 0;
	width: 30px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--dr-principal, #6b2d2d);
}

.dr-tabbar__item:active {
	background: #f6efe3;
}

/* ------------------------------------------------------------------ */
/* Hero de la portada                                                  */
/* ------------------------------------------------------------------ */

.dr-hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 1.75rem;
	padding: 2.5rem 1rem 2.25rem;
	background:
		radial-gradient(120% 90% at 100% 0%, #f3e2c9 0%, rgba(243, 226, 201, 0) 60%),
		linear-gradient(165deg, #f7efe1 0%, #efe0cb 100%);
	border-bottom: 1px solid var(--dr-borde, #e6e0d6);
}

/* Sangrado a los bordes de la pantalla dentro del contenedor centrado. */
.dr-app__main--inicio .dr-hero {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1rem, calc(50vw - 31rem));
}

.dr-hero__motivo {
	position: absolute;
	right: -12%;
	top: -18%;
	width: min(70vw, 420px);
	height: auto;
	color: #e4c99f;
	opacity: 0.55;
	pointer-events: none;
}

.dr-hero__contenido {
	position: relative;
	max-width: 34rem;
}

.dr-hero__eyebrow {
	margin: 0 0 0.7rem;
	font-family: var(--dr-fuente-texto);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9a6a1f;
}

.dr-hero__titulo {
	margin: 0 0 0.7rem;
	font-size: clamp(2rem, 7vw, 2.9rem);
	line-height: 1.08;
	color: var(--dr-principal, #6b2d2d);
}

.dr-hero__bajada {
	margin: 0 0 1.4rem;
	font-size: 1rem;
	line-height: 1.55;
	color: #514a40;
	max-width: 30rem;
}

.dr-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
}

.dr-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 48px;
	padding: 0.7rem 1.35rem;
	border-radius: 999px;
	background: var(--dr-principal, #6b2d2d);
	color: #fff;
	font-size: 0.98rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(107, 45, 45, 0.22);
	transition: transform 0.06s ease, box-shadow 0.15s ease;
}

.dr-hero__cta svg {
	width: 18px;
	height: 18px;
}

.dr-hero__cta:active {
	transform: translateY(1px);
	box-shadow: 0 3px 10px rgba(107, 45, 45, 0.22);
}

.dr-hero__link {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--dr-principal, #6b2d2d);
	text-underline-offset: 3px;
	text-decoration-color: #d8b98c;
}

/* ------------------------------------------------------------------ */
/* Encabezado de sección compartido                                    */
/* ------------------------------------------------------------------ */

.dr-seccion {
	margin-bottom: 2rem;
}

.dr-seccion__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.dr-seccion__titulo {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.2;
	color: var(--dr-principal, #6b2d2d);
}

.dr-seccion__accion {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--dr-principal, #6b2d2d);
	text-decoration: none;
	white-space: nowrap;
}

.dr-seccion__accion::after {
	content: " \203A";
}

.dr-seccion__accion:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Vista con cabecera propia (Cronogramas, Lectura, Parroquias) */
.dr-vista-cabecera {
	margin-bottom: 1.6rem;
}

.dr-vista-cabecera h1 {
	margin: 0 0 0.35rem;
	font-size: clamp(1.7rem, 5.5vw, 2.15rem);
	line-height: 1.12;
	color: var(--dr-principal, #6b2d2d);
}

.dr-vista-cabecera p {
	margin: 0;
	color: var(--dr-tenue, #6d665d);
	font-size: 0.96rem;
}

/* ------------------------------------------------------------------ */
/* Cronogramas: agenda de 7 días                                       */
/* ------------------------------------------------------------------ */

.dr-crono__filtro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
	padding: 0.9rem;
	background: #fffdf9;
	border: 1px solid var(--dr-borde, #e6e0d6);
	border-radius: var(--dr-radio, 14px);
}

.dr-crono__filtro label {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--dr-tenue, #6d665d);
	margin-bottom: 0.3rem;
}

.dr-crono__filtro select {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--dr-borde-fuerte, #d3cabb);
	border-radius: var(--dr-radio-chico, 9px);
	background: #fff;
	font: inherit;
	font-size: 1rem;
	color: inherit;
}

.dr-crono__filtro-campo {
	flex: 1 1 14rem;
}

.dr-crono__dia {
	margin-bottom: 1.75rem;
}

.dr-crono__fecha {
	position: sticky;
	top: var(--dr-appbar-h);
	z-index: 5;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0.5rem 0;
	background: linear-gradient(var(--dr-app-fondo) 78%, rgba(246, 241, 233, 0));
	font-family: var(--dr-fuente-titulo);
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--dr-principal, #6b2d2d);
}

.dr-crono__fecha b {
	font-weight: 600;
}

/* "Hoy" / "Mañana" y el nombre del día ya vienen en mayúscula desde el helper;
   el resto de la fecha va en minúscula ("Sábado 12 de septiembre"). */
.dr-crono__fecha b::first-letter {
	text-transform: uppercase;
}

.dr-crono__fecha span {
	font-family: var(--dr-fuente-texto);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--dr-tenue, #6d665d);
}

.dr-crono__cuenta {
	margin-left: auto;
	font-family: var(--dr-fuente-texto);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--dr-tenue, #6d665d);
	background: #efe6d8;
	border-radius: 999px;
	padding: 0.08rem 0.55rem;
	align-self: center;
}

/* ------------------------------------------------------------------ */
/* Lectura del día: página completa                                    */
/* ------------------------------------------------------------------ */

.dr-lectura-pagina {
	max-width: 42rem;
}

.dr-lectura-pagina__fecha {
	margin: 0 0 1.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #9a6a1f;
}

.dr-lectura-pagina__cuerpo {
	font-size: 1.02rem;
	line-height: 1.7;
	color: #322e28;
}

.dr-lectura-pagina__cuerpo h1,
.dr-lectura-pagina__cuerpo h2,
.dr-lectura-pagina__cuerpo h3,
.dr-lectura-pagina__cuerpo h4 {
	font-family: var(--dr-fuente-titulo);
	font-weight: 600;
	color: var(--dr-principal, #6b2d2d);
	line-height: 1.25;
	margin: 1.8rem 0 0.5rem;
}

.dr-lectura-pagina__cuerpo :first-child {
	margin-top: 0;
}

.dr-lectura-pagina__cuerpo p {
	margin: 0 0 1rem;
}

.dr-lectura-pagina__cuerpo em,
.dr-lectura-pagina__cuerpo i {
	color: #6d665d;
}

.dr-lectura-pagina__oficial {
	margin-top: 1.75rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--dr-borde, #e6e0d6);
	font-size: 0.92rem;
}

.dr-lectura-pagina__oficial a {
	color: var(--dr-principal, #6b2d2d);
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Tarjetas de parroquia sin foto                                      */
/* ------------------------------------------------------------------ */

.dr-app .dr-tarjeta-lugar__foto {
	background: radial-gradient(circle at 50% 38%, #f0e2cb, #e6d3b6);
}

/* Reemplaza el emoji por un templo dibujado, más nítido y en paleta. */
.dr-app .dr-tarjeta-lugar__sinfoto {
	font-size: 0;
	width: 58px;
	height: 58px;
	opacity: 0.6;
	background: center / contain no-repeat
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b2d2d" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v3M10.5 3.5h3"/><path d="M12 5 5 10v11h14V10L12 5Z"/><path d="M10 21v-5h4v5"/><path d="M9 11.6h.01M15 11.6h.01"/></svg>');
}

/* ------------------------------------------------------------------ */
/* Pie institucional dentro de la app                                  */
/* ------------------------------------------------------------------ */

.dr-app .dr-pie-institucional {
	margin-top: 2.5rem;
}

/* ------------------------------------------------------------------ */
/* Escritorio                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 54em) {
	.dr-app {
		--dr-appbar-h: 62px;
	}

	.dr-appbar {
		padding-inline: 1.5rem;
	}

	.dr-appbar__nav {
		display: flex;
	}

	.dr-tabbar {
		display: none;
	}

	.dr-app__main {
		padding: 1.75rem 1.5rem 3rem;
	}

	.dr-hero {
		padding: 3.75rem 1.5rem 3.5rem;
	}

	.dr-app__main--inicio .dr-hero {
		padding-inline: max(1.5rem, calc(50vw - 31rem));
	}

	.dr-hero__contenido {
		max-width: 38rem;
	}

	.dr-crono__fecha {
		font-size: 1.25rem;
	}
}

/* ------------------------------------------------------------------ */
/* Preferencias del sistema                                            */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.dr-app * {
		transition-duration: 0.01ms !important;
	}
}