/* ============================================================================
   APP.CSS — Piezas conectadas a datos reales
   ============================================================================
   Las otras cinco hojas son el sistema de diseño (tokens, base, componentes,
   secciones, animaciones). Esta viste lo que llega del servidor y lo que pinta
   el JavaScript, usando esos mismos tokens — aquí no hay ningún color suelto.

   Índice:
     1.  Hero (rotación por JS)
     2.  Tarjetas-cartel de evento
     3.  Estado vacío de eventos
     4.  Último mensaje
     5.  Formularios (campos y avisos)
     6.  Petición de oración
     7.  Modales — armazón común
     8.  Detalle de evento
     9.  Registro
     10. Calendario público (marcado de v2_calendar.js)
     11. Utilidades
   ========================================================================== */


/* ============================================================================
   1. HERO
   ----------------------------------------------------------------------------
   Las fotos vienen de la base de datos, así que pueden ser una o nueve. La
   versión del maquetado cruzaba exactamente cuatro con @keyframes y retrasos
   fijos; eso no escala. Aquí la rotación la lleva app.js y el CSS solo hace
   el fundido.
   ========================================================================== */

.hero__slides { position: absolute; inset: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: none;                       /* anula el cruce fijo de 4 fotos */
  transition: opacity 1.6s var(--ease-in-out);
}
.hero__slide:first-child { opacity: 0; } /* la visibilidad la decide .is-visible */
.hero__slide.is-visible  { opacity: 1; }

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  animation: none;
  transform: scale(1.04);
  transition: transform 8s linear;
}
.hero__slide.is-visible img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__slide img { transform: none; transition: none; }
}


/* ============================================================================
   2. TARJETAS-CARTEL DE EVENTO
   ----------------------------------------------------------------------------
   El componente .poster-card vive en components.css. Aquí van solo los
   añadidos que necesita la versión con datos reales: el cartel es un <button>
   (abre el detalle), puede no haber imagen, y hay un esqueleto de carga.
   ========================================================================== */

/* Con uno o dos eventos, la parrilla de 3 columnas deja la tarjeta arrinconada
   a la izquierda y media sección vacía. Se centran y se les pone un ancho
   propio para que la fila se lea como una decisión, no como un hueco. */
.poster-grid--few {
  grid-template-columns: repeat(auto-fit, minmax(0, 22rem));
  justify-content: center;
}

/* El cartel y el título son botones: hay que quitarles la piel de botón. */
.poster-card__media,
.poster-card__title button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.poster-card__title button { display: block; }
.poster-card__media { display: block; }

.poster-card__media:focus-visible,
.poster-card__title button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* --- Sin cartel ----------------------------------------------------------
   Un degradado con el color del tipo de evento y su inicial. Es mucho mejor
   que una caja gris, y evita tener que subir imágenes de relleno. */
.poster-card__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(150deg, var(--event-color), color-mix(in srgb, var(--event-color) 55%, var(--oat-500)));
}
.poster-card__fallback-mark {
  width: clamp(3rem, 18%, 4.5rem);
  height: auto;
  color: #fff;
  opacity: 0.42;
}

/* --- Agotado ------------------------------------------------------------- */
.poster-card--full .poster-card__media > img { filter: grayscale(0.55); }

/* --- Esqueleto de carga --------------------------------------------------- */
.poster-card--skeleton { pointer-events: none; }
.poster-card--skeleton .poster-card__media { background: var(--color-bg-subtle); }
.poster-card--skeleton .poster-card__body { gap: 0.6rem; }

.sk {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-bg-subtle) 25%, rgba(255, 255, 255, 0.7) 50%, var(--color-bg-subtle) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s var(--ease-in-out) infinite;
}
.sk--title { height: 1.35rem; width: 72%; }
.sk--line  { height: 0.8rem;  width: 100%; }
.sk--short { width: 55%; }

@keyframes sk-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
}


/* ============================================================================
   3. ESTADO VACÍO DE EVENTOS
   ========================================================================== */

.events-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.events-empty svg { color: var(--color-border); }
.events-empty p { margin: 0; }
.events-empty__hint { font-size: var(--text-sm); }

.events__more { margin-top: var(--space-6); }
.events__more .link-arrow {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}


/* ============================================================================
   4. ÚLTIMO MENSAJE
   ========================================================================== */

.sermon__layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--grid-gap);
  /* stretch, no start: las dos tarjetas terminan a la misma altura. Con `start`
     cada una medía lo suyo y la fila quedaba descuadrada. */
  align-items: stretch;
}
@media (max-width: 60rem) {
  .sermon__layout { grid-template-columns: minmax(0, 1fr); }
}

.sermon-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--card-radius);
  border-top: 1px solid var(--card-edge-top);
  border-bottom: 1px solid var(--card-edge-bottom);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.sermon-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--oat-500);
}
.sermon-card__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sermon-card__loading,
.sermon-card__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-sm);
}
.sermon-card__loading p,
.sermon-card__empty p { margin: 0; }

.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

.sermon-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--card-pad);
  flex: 1;                 /* reparte el alto sobrante al igualar con la otra */
}
.sermon-card__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.sermon-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.sermon-card__meta span:empty { display: none; }
/* El enlace se ancla abajo: si a esta tarjeta le sobra alto porque la otra es
   más larga, el hueco queda entre el texto y el enlace, no colgando debajo. */
.sermon-card__body .link-arrow { margin-top: auto; padding-top: var(--space-2); }

/* --- Tarjeta de pastores -------------------------------------------------- */
.pastors-card { height: 100%; }
.pastors-card__media { aspect-ratio: 4 / 3; }
.pastors-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* En dos columnas se recorta a cuatro líneas: el texto lo edita el hub y, si
   se alarga, arrastra el alto de toda la fila (las dos tarjetas se igualan).
   En móvil las tarjetas van apiladas y cada una manda sobre su propio alto,
   así que ahí se lee entero — con el recorte se perdían dos líneas. */
@media (min-width: 60.001rem) {
  .pastors-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ============================================================================
   5. FORMULARIOS
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 0.35rem; }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.field__optional {
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.field__req { color: var(--color-accent); }
.field__hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.field__input {
  width: 100%;
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field__input::placeholder { color: var(--color-text-muted); opacity: 0.75; }
.field__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.field__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}
.field__check input {
  margin-top: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--color-accent);
  flex: none;
}

/* --- Avisos de formulario ------------------------------------------------- */
.form-feedback {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.form-feedback.is-error {
  color: var(--blueberry-400);
  background: var(--blueberry-100);
  border-color: var(--blueberry-200);
}
.form-feedback.is-success {
  color: var(--lime-400);
  background: var(--lime-100);
  border-color: var(--lime-200);
}


/* ============================================================================
   6. PETICIÓN DE ORACIÓN
   ----------------------------------------------------------------------------
   Los datos de contacto están ocultos hasta que se escribe algo. Pedir nombre,
   teléfono y correo de entrada convierte una caja acogedora en un trámite.
   ========================================================================== */

/* Ojo: `display: grid` en una clase gana al `[hidden] { display: none }` del
   navegador. Sin esta primera regla, los campos salen desde el principio. */
/* Campo trampa. No se usa `display:none` ni `hidden`: los robots que valen algo
   los detectan y saltan el campo. Se saca de la pantalla, que cuesta más notar. */
.prompt__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.prompt__details[hidden] { display: none; }

.prompt__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) 0 0;
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  animation: prompt-reveal var(--dur-base) var(--ease-out) both;
}
@media (max-width: 44rem) {
  .prompt__details { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}
@keyframes prompt-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .prompt__details { animation: none; }
}

#prayerForm .form-feedback { margin-top: var(--space-4); }

/* Enviada: la caja se atenúa un punto para que el aviso sea el protagonista. */
#prayerForm.is-sent .prompt__field,
#prayerForm.is-sent .prompt__chips { opacity: 0.55; }


/* ============================================================================
   7. MODALES — armazón común
   ----------------------------------------------------------------------------
   .is-open es lo que usa app.js. .active se acepta también porque
   v2_calendar.js (compartido con el resto del sitio) abre y cierra con esa
   clase; cambiarlo allí rompería las otras pantallas que lo usan.
   ========================================================================== */

.pmodal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-overlay);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out);
}
.pmodal.is-open,
.pmodal.active { opacity: 1; visibility: visible; }

.pmodal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(46rem, 100%);
  /* height:auto — el panel mide lo que necesita. Un alto fijo deja un hueco
     enorme bajo el contenido cuando el evento tiene poca información. */
  max-height: min(88vh, 52rem);
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transform: translateY(14px) scale(0.985);
  transition: transform var(--dur-base) var(--ease-out);
}
.pmodal.is-open .pmodal__panel,
.pmodal.active .pmodal__panel { transform: none; }

.pmodal--tiny    .pmodal__panel { width: min(26rem, 100%); }

/* El calendario NO se ajusta al contenido: ocupa siempre el 80 % de la
   pantalla. Con un solo evento quedaba una tarjetita perdida en medio que no
   parecía un calendario, y al cambiar de mes el panel daba saltos de alto.
   Un alto fijo lo convierte en un sitio estable donde navegar los meses. */
.pmodal--calendar .pmodal__panel {
  width: min(38rem, 100%);
  height: 80vh;
  max-height: 80vh;
}
.pmodal--calendar .pmodal__body { flex: 1 1 auto; }

.pmodal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex: none;
}
.pmodal__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pmodal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5);
}
.pmodal__body--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-7) var(--space-5);
}
.pmodal__body--center h2 { font-size: var(--text-h4); font-weight: var(--weight-semibold); }
.pmodal__body--center p  { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.pmodal__body--center .btn { margin-top: var(--space-3); }

.pmodal__foot {
  flex: none;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.pmodal__foot:empty { display: none; }

/* --- Botón de cerrar ------------------------------------------------------ */
.pmodal__close {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.pmodal__close:hover { background: var(--color-bg-subtle); transform: scale(1.05); }
.pmodal__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Flotante: en el detalle no hay cabecera, el botón va sobre la foto. */
.pmodal__close--float {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* El scroll del fondo se bloquea mientras haya cualquier modal abierto. */
body.has-modal { overflow: hidden; }

/* En móvil los modales ocupan la pantalla desde abajo: es el patrón que la
   gente espera en el teléfono, y da más sitio al contenido. */
@media (max-width: 40rem) {
  .pmodal { padding: 0; align-items: flex-end; }
  .pmodal__panel {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    transform: translateY(100%);
  }
  .pmodal__foot { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  .pmodal--tiny { align-items: center; padding: var(--space-4); }
  .pmodal--tiny .pmodal__panel { border-radius: var(--radius-2xl); transform: translateY(14px) scale(0.985); }
}


/* ============================================================================
   8. DETALLE DE UN EVENTO
   ========================================================================== */

.pmodal--detail .pmodal__body { padding: 0; }

/* --- Cabecera con el cartel ----------------------------------------------
   La imagen y el color llegan por custom properties, nunca como
   background-image en el style: así el valor puede sanearse en JS y el CSS
   decide cómo componerlos. */
.edetail__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 12rem;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: linear-gradient(150deg, var(--evt-color, var(--blueberry-400)), color-mix(in srgb, var(--evt-color, var(--blueberry-400)) 55%, var(--oat-500)));
}
/* Con foto, la cabecera manda: es el cartel del evento y suele llevar la
   información en la propia imagen. Una franja recortada de 15rem no dejaba
   verla. Con aspect-ratio ocupa una proporción real y se lee completa. */
.edetail__hero.has-image {
  background-image: var(--evt-image);
  background-size: cover;
  background-position: center;
  aspect-ratio: 4 / 3;
  min-height: 18rem;
  max-height: 55vh;
}
.edetail__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 12, 10, 0.86) 0%, rgba(20, 12, 10, 0.45) 45%, rgba(20, 12, 10, 0.08) 100%);
}
.edetail__hero.no-image .edetail__hero-overlay {
  background: linear-gradient(to top, rgba(20, 12, 10, 0.45), transparent 70%);
}
.edetail__hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.edetail__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  backdrop-filter: blur(6px);
}
.edetail__chip-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--evt-color, #fff);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.edetail__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: #fff;
  text-wrap: balance;
}

/* --- Cuerpo --------------------------------------------------------------- */
.edetail__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
}

/* align-items: stretch — el bloque de fecha debe medir lo mismo que la
   columna de la derecha, no encogerse a su contenido. */
.edetail__when {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
}

.edetail__date {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 4.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.edetail__date-month {
  flex: none;
  padding: 0.3rem 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  color: #fff;
  background: var(--evt-color, var(--blueberry-400));
}
.edetail__date-day {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.04em;
  line-height: 1;
  padding: 0.5rem 0;
}

.edetail__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
}
.edetail__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.edetail__meta-item svg { flex: none; margin-top: 0.15em; opacity: 0.7; }
.edetail__meta-item > span { min-width: 0; }
.edetail__location {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Acciones ------------------------------------------------------------- */
.edetail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.edetail__cal { position: relative; display: inline-flex; }

.edetail__cal-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast) var(--ease-out);
}
.edetail__cal-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.edetail__cal-menu a {
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out);
}
.edetail__cal-menu a:hover { background: var(--color-bg-subtle); }

/* --- Zoom ----------------------------------------------------------------- */
.edetail__zoom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: var(--slushie-100);
  border: 1px solid var(--slushie-200);
}
.edetail__zoom-head { display: flex; align-items: center; gap: var(--space-3); }
.edetail__zoom-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--slushie-400);
  color: #fff;
}
.edetail__zoom-title { font-weight: var(--weight-medium); font-size: var(--text-md); }
.edetail__zoom-sub   { font-size: var(--text-sm); color: var(--color-text-muted); }
.edetail__zoom-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.edetail__zoom-actions .btn.is-copied { color: var(--color-success); border-color: var(--lime-200); }

/* --- Descripción ---------------------------------------------------------- */
.edetail__about { display: flex; flex-direction: column; gap: var(--space-2); }
.edetail__label {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.edetail__desc {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-text);
  /* La descripción la escribe el equipo en el hub: conserva sus saltos. */
  white-space: pre-wrap;
}

/* --- Cupos ---------------------------------------------------------------- */
.edetail__spots { display: flex; flex-direction: column; gap: 0.45rem; }
.edetail__spots-text { font-size: var(--text-sm); color: var(--color-text-muted); }
.edetail__spots-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--color-bg-subtle);
  overflow: hidden;
}
.edetail__spots-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--evt-color, var(--blueberry-400));
}
.edetail__spots.is-full .edetail__spots-fill { background: var(--color-text-muted); }

@media (max-width: 40rem) {
  .edetail__hero { min-height: 10rem; padding: var(--space-5) var(--space-4) var(--space-4); }
  .edetail__hero.has-image { min-height: 15rem; max-height: 50vh; }
  /* El panel arranca más arriba para que quepa el cartel entero. */
  .pmodal--detail .pmodal__panel { min-height: 70vh; }
  .pmodal--calendar .pmodal__panel { height: 85vh; max-height: 85vh; }
  .edetail__main { padding: var(--space-4); gap: var(--space-4); }
  .edetail__when { gap: var(--space-4); }
  .edetail__actions .btn { flex: 1 1 auto; justify-content: center; }
}


/* ============================================================================
   9. REGISTRO
   ========================================================================== */

.reg__summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--card-pad);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-bg-subtle);
}
.reg__summary-date {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 4rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-align: center;
  line-height: 1.3;
}
.reg__summary-title { font-weight: var(--weight-medium); line-height: 1.3; }
.reg__summary-meta  { font-size: var(--text-sm); color: var(--color-text-muted); }

.reg__form { display: flex; flex-direction: column; gap: var(--space-4); }

/* Aviso para cuando el evento tiene cupo: explica por qué no se puede indicar
   acompañantes, en vez de dejar el hueco sin más. */
.reg__note {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted, #f6f5f2);
  border-left: 3px solid var(--slushie-400, #6aa5d8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ============================================================================
   10. CALENDARIO PÚBLICO
   ----------------------------------------------------------------------------
   El marcado lo genera assets/js/v2_calendar.js, que es compartido: sus clases
   (.v2-evrow, .v2-calendar-*) no se pueden renombrar sin tocar las otras
   pantallas que lo usan. Se re-viste desde aquí.
   ========================================================================== */

.pmodal--calendar .pmodal__body { padding: var(--space-3) var(--space-4) var(--space-5); }

.v2-calendar-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.v2-calendar-nav-btn {
  appearance: none;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.v2-calendar-nav-btn:hover { background: var(--color-bg-subtle); }
.v2-calendar-nav-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.v2-calendar-month-wrap { text-align: center; }
.v2-calendar-month-label {
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  text-transform: capitalize;
}
.v2-calendar-month-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.v2-events-list-container { display: flex; flex-direction: column; gap: var(--space-2); }

/* --- Fila de evento ------------------------------------------------------- */
.v2-evrow {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.v2-evrow:hover {
  border-color: var(--evt-color, var(--color-border-strong));
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.v2-evrow:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.v2-evrow-date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  padding: 0.4rem 0;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--evt-color, var(--blueberry-400)) 12%, transparent);
  color: var(--evt-color, var(--blueberry-400));
}
.v2-evrow-date-month {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: var(--tracking-eyebrow);
}
.v2-evrow-date-day {
  font-size: 1.3rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.v2-evrow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.v2-evrow-title {
  font-weight: var(--weight-medium);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-evrow-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.v2-evrow-meta i { opacity: 0.65; }

.v2-evrow-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.v2-evrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.55rem;
}
.v2-evrow-chip-dot {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--evt-color, var(--color-text-muted));
}
.v2-evrow-chip--full { color: var(--blueberry-400); background: var(--blueberry-100); }

.v2-evrow-chevron { flex: none; color: var(--color-border); }
.v2-evrow:hover .v2-evrow-chevron { color: var(--evt-color, var(--color-text-muted)); }

/* --- Vacío y error -------------------------------------------------------- */
.v2-calendar-no-events,
.v2-calendar-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}
.v2-calendar-no-events i,
.v2-calendar-error i { font-size: 1.75rem; color: var(--color-border); }
.v2-calendar-no-events p,
.v2-calendar-error p { margin: 0; font-size: var(--text-sm); }

.v2-calendar-next-month-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: var(--space-2);
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.v2-calendar-next-month-btn:hover { background: var(--color-bg-subtle); }

@media (max-width: 40rem) {
  .v2-calendar-nav-row { padding: var(--space-3) var(--space-4); }
  .v2-evrow { gap: var(--space-3); }
}


/* ============================================================================
   11. UTILIDADES
   ========================================================================== */

/* --- Visor del cartel a tamaño completo -----------------------------------
   El hero del detalle recorta la imagen, y los flyers suelen llevar texto
   (horarios, teléfonos) que en el recorte no se lee. */
.poster-viewer {
  position: fixed;
  inset: 0;
  z-index: 1400;                    /* por encima de los .pmodal (1200) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(15, 10, 9, 0.92);
  animation: poster-in var(--dur-fast) var(--ease-out);
}
.poster-viewer img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.poster-viewer__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--oat-500);
  cursor: pointer;
}
.poster-viewer__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@keyframes poster-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .poster-viewer { animation: none; } }

/* Lupa sobre el cartel del detalle: sin ella no se adivina que se puede abrir. */
.edetail__hero[data-poster] { cursor: zoom-in; }
.edetail__hero-zoom {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--oat-500);
  cursor: zoom-in;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.edetail__hero:hover .edetail__hero-zoom { opacity: 1; transform: scale(1.06); }

.success-mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--lime-100);
  color: var(--color-success);
  margin-bottom: var(--space-2);
}


/* ============================================================================
   12. QUIÉNES SOMOS
   ----------------------------------------------------------------------------
   Sección corta y centrada. Además de contar quiénes son, sostiene el ancla
   #sobre-nosotros que enlaza app/includes/footer.php desde las otras páginas.
   ========================================================================== */

.statement__inner {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.statement .section-head { margin-bottom: var(--space-5); }
.statement__text {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text);
}
.statement__motto {
  margin-top: var(--space-5);
  font-size: var(--text-h5);
  line-height: 1.4;
  color: var(--color-text-muted);
  font-style: italic;
  text-wrap: balance;
}


/* ============================================================================
   13. RETOQUES DE ACCESIBILIDAD
   ========================================================================== */

/* La × del anuncio medía 26×16: por debajo del mínimo de 24×24 de WCAG 2.2, y
   es la única forma de quitar una barra que tapa lo alto de cada pantalla. */
.announce__close {
  min-width: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
}

/* Última línea de defensa de la legibilidad del hero.
   El degradado (.hero__scrim, en sections.css) resuelve el promedio, pero una
   foto puede tener un reflejo blanco justo detrás de una letra. La sombra es
   local: cubre esos puntos sin tener que oscurecer la foto entera. */
.hero__eyebrow-link {
  text-shadow: 0 1px 3px rgba(20, 12, 10, 0.85), 0 0 14px rgba(20, 12, 10, 0.6);
}
/* Ojo con el desenfoque: en el titular, que es enorme y muy pesado, un blur
   grande solapa el halo de todas las letras y se ve un RECTÁNGULO oscuro
   detrás del texto en vez de una sombra. Sombras cortas y suaves; el trabajo
   de contraste lo hace el degradado, no esto. */
.hero__title {
  text-shadow: 0 1px 3px rgba(20, 12, 10, 0.45);
}
.hero__sub,
.hero__times {
  text-shadow: 0 1px 3px rgba(20, 12, 10, 0.55);
}

/* En móvil el botón flotante de WhatsApp se sentaba justo encima del chip de
   «Mié 7:30 PM». Se le reserva sitio al final del hero en vez de mover el
   botón: el botón tiene que quedarse donde la gente lo busca. */
/* El botón flotante de WhatsApp se sienta encima de lo último de cada pantalla
   en móvil. Se le reserva sitio al final del hero y del pie en vez de mover el
   botón: tiene que quedarse donde la gente lo busca. */
@media (max-width: 48rem) {
  .hero__intro { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  .footer      { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Un panel plegado seguía en el árbol de accesibilidad: el lector de pantalla
   leía las cuatro respuestas del FAQ estuvieran abiertas o no. `visibility`
   sí lo saca, y sigue siendo animable. */
.accordion__panel {
  visibility: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out);
}
.accordion__item.is-open .accordion__panel,
.accordion__trigger[aria-expanded="true"] + .accordion__panel {
  visibility: visible;
}

/* Icono de la caja de petición de oración. Es un glifo de Font Awesome, no un
   SVG: hay que darle tamaño y color a mano y alinearlo con la primera línea
   del textarea. */
.prompt__icon {
  flex: none;
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0.5rem;
  color: var(--color-accent);
}


/* ============================================================================
   14. MENÚ MÓVIL ABIERTO — relleno de los laterales
   ----------------------------------------------------------------------------
   La barra de navegación flota: 95 % de ancho y esquinas inferiores
   redondeadas. Sobre la foto del hero eso es justo lo que se busca, pero al
   desplegar el menú —que ocupa todo el ancho— la página asomaba por las dos
   franjas que quedan a los lados y por el hueco de las curvas.

   Se tapan con una capa blanca DETRÁS de la barra, que se despliega desde el
   centro hacia los lados. No se toca ni el ancho del contenedor ni las
   esquinas ni el logo: la barra sigue siendo exactamente la misma, solo deja
   de tener la página detrás.
   ========================================================================== */

.nav-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;                       /* .nav__layout va en z-index 2 */
  background: var(--color-surface);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

body.nav-open .nav-wrap::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .nav-wrap::before { transition: none; }
}

/* El mega-menú de escritorio vive detrás de la barra; con el menú móvil
   abierto no pinta nada y podría asomar al cambiar de tamaño. */
body.nav-open .nav__dropdown { display: none; }


/* ============================================================================
   15. SEPARACIÓN DE LAS TARJETAS DEL FONDO
   ----------------------------------------------------------------------------
   El sistema pinta las tarjetas en --color-surface (#ffffff) sobre un lienzo
   --color-bg (#fefdfb). Son prácticamente el mismo color: la separación la
   daba un borde de dos tonos (luz arriba, sombra abajo) pensado para un fondo
   más marcado, y aquí el cuerpo de la tarjeta se fundía con la página — se veía
   la foto flotando y el texto suelto debajo, sin tarjeta.

   Se añade un borde completo suave y una sombra corta. Sigue siendo un diseño
   plano: lo justo para que el borde de la tarjeta se lea.
   ========================================================================== */

.poster-card,
.media-card {
  border: 1px solid color-mix(in srgb, var(--oat-300) 60%, transparent);
  box-shadow: 0 1px 2px rgba(27, 26, 24, 0.04);
}

/* Al pasar por encima, la tarjeta se despega un poco más. */
.poster-card:hover,
.media-card.card--hover:hover {
  border-color: color-mix(in srgb, var(--oat-300) 90%, transparent);
  box-shadow: var(--shadow-md);
}

/* Los esqueletos de carga no son tarjetas de verdad: sin sombra. */
.poster-card--skeleton { box-shadow: none; }

/* Glifo grande dentro de la ilustración de una tarjeta de recurso. Las otras
   tarjetas llevan un SVG dibujado; aquí importa más que el icono se reconozca
   al instante que la coherencia de estilo del dibujo.

   El selector lleva el padre a propósito: components.css tiene
   `.media-card__media > * { width:100%; height:100% }` para que las fotos
   llenen el hueco, y ese universal también estiraba el glifo hasta ocupar la
   caja entera y encajarlo en la esquina. Hay que ganarle en especificidad. */
.media-card__media > .resource-card__glyph {
  width: auto;
  height: auto;
  font-size: clamp(4rem, 12vw, 5.5rem);
  line-height: 1;
  color: var(--blueberry-300);
  object-fit: initial;
}


/* ============================================================================
   16. DESTINOS DE ANCLA BAJO LA BARRA FLOTANTE
   ----------------------------------------------------------------------------
   La barra es sticky, así que al saltar a un #ancla el navegador deja el
   elemento pegado al borde superior… y la barra se lo come. Se comprobó con
   #sobre-nosotros: su antetítulo caía a 52px con la barra ocupando hasta 64px.

   scroll-margin-top le dice al navegador dónde parar de verdad. Va en los
   destinos reales de ancla, no en todo lo que tenga id.
   ========================================================================== */

main section[id],
#pastores,
#ubicacion,
.footer[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}