/* ============================================================================
   GNP · Hoja de estilos para las consultas embebidas
   Obituario y Búsqueda de fallecidos
   Grupo Nuestros Parques — sistema de diseño GNP-color-2026
   Entregado por Tipddy · 2026-10-07
   ============================================================================

   PARA QUÉ ES ESTE ARCHIVO
   El Obituario y la Búsqueda de fallecidos se muestran dentro de un lightbox
   del nuevo sitio de GNP. Ambas funcionan bien, pero se ven como otra
   aplicación: distinta tipografía, distintos colores, botones de otro sistema.
   Esta hoja contiene los estilos del sitio para que, una vez aplicada, el
   visitante no perciba el salto.

   ES UNA SOLA HOJA PARA LAS DOS CONSULTAS, a propósito: comparten tabla,
   botones, tarjetas y paginación, y mantenerlas separadas garantizaba que un
   día dejaran de parecerse entre sí.

   CÓMO USARLA
   1. Enlazar esta hoja DESPUÉS de los estilos actuales.
   2. Envolver el contenido en un elemento con la clase `gnp-obit`.
   3. Usar las clases de este archivo en lugar de las actuales. Las carpetas
      `obituario/` y `fallecido/` muestran el marcado de cada pantalla.

   NO HACE FALTA REESCRIBIR LA APLICACIÓN. Todo está acotado bajo `.gnp-obit` y
   los nombres llevan el prefijo `gnp-`, así que nada de esto puede afectar a
   otras pantallas del portal.

   TIPOGRAFÍAS
   Inter (texto) y Outfit (títulos). Si prefieren alojarlas ustedes, quiten el
   @import: las familias de respaldo ya están declaradas y el diseño no se rompe.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

/* ── Tokens ──────────────────────────────────────────────────────────────────
   Los colores de la marca. El azul es el color primario: el verde pasó a ser
   un acento secundario y el naranjo quedó reservado para Funeraria Nuestros
   Parques, así que conviene no usarlo aquí.
   -------------------------------------------------------------------------- */
.gnp-obit {
  --gnp-primary: #0a4f96;        /* azul institucional — primario */
  --gnp-primary-deep: #073a70;   /* hover / pressed */
  --gnp-primary-soft: #e9f1fb;   /* fondo suave */
  --gnp-sky: #019edb;            /* foco */
  --gnp-meadow: #009226;         /* verde, solo como acento puntual */

  --gnp-canvas: #ffffff;
  --gnp-linen: #faf8f5;          /* fondo de la página */
  --gnp-whisper: #f2f2f2;        /* separadores y fondos sutiles */
  --gnp-stone: #898a8d;          /* texto terciario */
  --gnp-charcoal: #2d3436;       /* texto de cuerpo (nunca negro puro) */
  --gnp-graphite: #1a1a2e;       /* títulos */

  --gnp-radius-sm: 6px;
  --gnp-radius: 10px;
  --gnp-radius-md: 12px;
  --gnp-radius-lg: 16px;
  --gnp-radius-pill: 9999px;

  --gnp-shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.04);
  --gnp-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
  --gnp-shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.13), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* Toda la animación del sitio dura menos de 250 ms. Es deliberado: en un
     sitio de este rubro nada debe sentirse festivo ni hacerse esperar. */
  --gnp-dur: 200ms;
  --gnp-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Base ────────────────────────────────────────────────────────────────────
   OJO CON EL ALTO. Esta página vive dentro de un iframe. `height: 100vh` o
   `position: fixed` se calculan contra el alto del iframe, no de la ventana, y
   dejan la pantalla cortada o con elementos flotando en el lugar equivocado.
   Conviene dejar que el contenido crezca y que el iframe haga su scroll.
   -------------------------------------------------------------------------- */
.gnp-obit {
  box-sizing: border-box;
  min-height: 100%;
  margin: 0;
  padding: 1.5rem 1.25rem 2.5rem;
  background: var(--gnp-linen);
  color: var(--gnp-charcoal);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

.gnp-obit *,
.gnp-obit *::before,
.gnp-obit *::after {
  box-sizing: inherit;
}

/* El reset de márgenes va con :where() para que su especificidad sea cero.
   Escrito como `.gnp-obit p` le ganaba a las clases de componente —que son de
   especificidad menor— y les anulaba el margen: el párrafo del estado vacío
   perdía su `margin: auto` y quedaba descentrado, y la nota al pie se pegaba a
   la tarjeta. Así el reset solo actúa donde no hay una clase que mande. */
:where(.gnp-obit) :where(h1, h2, h3) {
  margin: 0;
}

.gnp-obit h1,
.gnp-obit h2,
.gnp-obit h3 {
  font-family: Outfit, Inter, sans-serif;
  color: var(--gnp-graphite);
  text-wrap: balance;
}

:where(.gnp-obit) :where(p) {
  margin: 0;
}

/* El contenido no se estira de borde a borde: el lightbox llega a 1152 px y
   una tabla de ese ancho se vuelve incómoda de leer. */
.gnp-obit__inner {
  max-width: 60rem;
  margin: 0 auto;
}

/* Pantallas de formulario: columna angosta y centrada.
   Con los 60rem de arriba, un formulario de 34rem quedaba pegado al borde
   izquierdo y dejaba medio modal vacío a la derecha. Se acota la COLUMNA
   ENTERA, no solo el formulario, para que el título, el aviso y los campos
   compartan el mismo eje. */
.gnp-obit__inner--form {
  max-width: 36rem;
}

/* Foco visible en todo. Es requisito de accesibilidad del sitio (WCAG 2.1 AA)
   y acá importa más que en otras pantallas: hay gente navegando esto con
   lectores de pantalla o sin mouse. */
.gnp-obit :focus-visible {
  outline: 3px solid var(--gnp-sky);
  outline-offset: 2px;
  border-radius: 4px;
}

.gnp-obit__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Cabecera de la pantalla ─────────────────────────────────────────────────
   ⚠️ SIN LOGO NI NOMBRE DE GNP. El lightbox del sitio ya muestra la cabecera
   con el logo y el título «Obituario» justo encima de esta página: repetirlos
   deja dos cabeceras una sobre otra y le roba altura útil al contenido, que es
   lo que la persona vino a leer.

   Alcanza con el nombre del parque y el botón de volver.
   -------------------------------------------------------------------------- */
.gnp-obit__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.gnp-obit__title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.gnp-obit__subtitle {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(45, 52, 54, 0.7);
}

/* Etiqueta pequeña sobre el título, como en el resto del sitio. */
.gnp-obit__overline {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gnp-primary);
}

/* ── Botones ─────────────────────────────────────────────────────────────────
   Alto mínimo de 44 px en todos: es el tamaño mínimo de toque del sitio.
   -------------------------------------------------------------------------- */
.gnp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: var(--gnp-radius-pill);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--gnp-dur) var(--gnp-ease),
              box-shadow var(--gnp-dur) var(--gnp-ease),
              background-color var(--gnp-dur) var(--gnp-ease);
}

.gnp-btn--primary {
  background: var(--gnp-primary);
  color: var(--gnp-canvas);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.gnp-btn--secondary {
  background: transparent;
  color: var(--gnp-primary);
  border: 2px solid var(--gnp-primary);
}

/* Para «Volver»: una acción de retroceso no necesita un bloque de color. */
.gnp-btn--ghost {
  background: transparent;
  color: #0055a3;
  padding: 0.75rem 1rem;
}

.gnp-btn--sm {
  min-height: 40px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

/* El hover solo donde hay un puntero de verdad: en pantallas táctiles se queda
   «pegado» después de tocar. */
@media (hover: hover) and (pointer: fine) {
  .gnp-btn--primary:hover { background: var(--gnp-primary-deep); }
  .gnp-btn--secondary:hover { background: rgba(10, 79, 150, 0.07); }
  .gnp-btn--ghost:hover { background: var(--gnp-primary-soft); }
}

.gnp-btn:active { transform: scale(0.97); }

/* ── Selección de parque ─────────────────────────────────────────────────────
   Tarjetas blancas con sombra suave, no recuadros de borde verde.
   -------------------------------------------------------------------------- */
.gnp-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .gnp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .gnp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gnp-park {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.5rem;
  padding: 1.5rem 1.25rem;
  background: var(--gnp-canvas);
  border: 1px solid var(--gnp-whisper);
  border-radius: var(--gnp-radius-lg);
  box-shadow: var(--gnp-shadow-card);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--gnp-dur) var(--gnp-ease),
              box-shadow var(--gnp-dur) var(--gnp-ease);
}

/* Los logotipos de cada parque se mantienen: son activos de marca.
   Se les da un ancho de referencia y un tope de alto para que la grilla quede
   pareja. Sin el `width`, cada SVG se dibuja a su tamaño intrínseco —que en los
   archivos de autoconsulta es pequeño— y el logo queda perdido dentro de la
   tarjeta. `object-fit: contain` conserva la proporción de cada uno. */
.gnp-park img {
  width: 100%;
  max-width: 11rem;
  height: auto;
  max-height: 4.5rem;
  object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
  .gnp-park:hover {
    transform: translateY(-4px);
    box-shadow: var(--gnp-shadow-lift);
  }
}

/* ── Pestañas de día ─────────────────────────────────────────────────────────
   Un control segmentado, no tres botones de colores distintos. La pestaña
   activa se distingue por fondo sólido, y además por `aria-selected` para
   quien no ve el color.
   -------------------------------------------------------------------------- */
.gnp-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 1.25rem;
  background: var(--gnp-whisper);
  border-radius: var(--gnp-radius-pill);
}

.gnp-tab {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  background: transparent;
  border: 0;
  border-radius: var(--gnp-radius-pill);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(45, 52, 54, 0.75);
  cursor: pointer;
  transition: background-color var(--gnp-dur) var(--gnp-ease),
              color var(--gnp-dur) var(--gnp-ease);
}

.gnp-tab[aria-selected='true'] {
  background: var(--gnp-primary);
  color: var(--gnp-canvas);
}

@media (hover: hover) and (pointer: fine) {
  .gnp-tab:not([aria-selected='true']):hover { background: rgba(0, 0, 0, 0.04); }
}

/* ── Tabla de servicios ──────────────────────────────────────────────────────
   La cabecera naranja sólida se reemplaza por una franja clara con el texto en
   mayúsculas pequeñas. El dato importante es el nombre, y en el diseño actual
   compite con una banda de color que ocupa todo el ancho.
   -------------------------------------------------------------------------- */
.gnp-card {
  background: var(--gnp-canvas);
  border: 1px solid var(--gnp-whisper);
  border-radius: var(--gnp-radius-lg);
  box-shadow: var(--gnp-shadow-card);
  overflow: hidden;
}

.gnp-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.gnp-table thead th {
  padding: 0.875rem 1rem;
  background: var(--gnp-linen);
  border-bottom: 1px solid var(--gnp-whisper);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gnp-stone);
  white-space: nowrap;
}

.gnp-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--gnp-whisper);
  vertical-align: middle;
}

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

@media (hover: hover) and (pointer: fine) {
  .gnp-table tbody tr:hover { background: rgba(250, 248, 245, 0.8); }
}

/* El nombre es lo que la persona vino a buscar: que sea lo más legible. */
.gnp-table__nombre {
  font-family: Outfit, Inter, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gnp-graphite);
}

.gnp-table__hora {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* Área y sector como etiquetas discretas. Mantienen la distinción entre un
   dato y otro sin recurrir a dos colores saturados. */
.gnp-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--gnp-radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gnp-chip--area {
  background: var(--gnp-primary-soft);
  color: var(--gnp-primary);
}

.gnp-chip--sector {
  background: var(--gnp-whisper);
  color: var(--gnp-charcoal);
}

/* ── La tabla en pantallas angostas ──────────────────────────────────────────
   Bajo 720 px cada fila pasa a ser una ficha. Una tabla de seis columnas en un
   teléfono obliga a desplazarse de lado y se pierde la relación entre el nombre
   y su ubicación. El `data-label` de cada celda es lo que dibuja la etiqueta.
   -------------------------------------------------------------------------- */
@media (max-width: 719px) {
  .gnp-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .gnp-table tbody tr {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid var(--gnp-whisper);
  }

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

  .gnp-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    border: 0;
  }

  .gnp-table tbody td div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
  }

  .gnp-table tbody td div::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gnp-stone);
  }

  /* El nombre encabeza la ficha: sin etiqueta y ocupando la línea entera. */
  .gnp-table tbody td div[data-label='Nombre'] {
    display: block;
    margin-bottom: 0.5rem;
  }

  .gnp-table tbody td div[data-label='Nombre']::before { content: none; }

  .gnp-table tbody td span[data-label='Ubicación'] {
    display: block;
    margin-top: 0.75rem;
  }

  .gnp-table tbody td div[data-label='Ubicación']::before { content: none; }

  .gnp-table tbody td div[data-label='Ubicación'] .gnp-btn { width: 100%; }
}

/* ── Formulario de búsqueda ──────────────────────────────────────────────────
   Para «Buscar fallecido». Los campos toman el mismo aspecto que los del resto
   del sitio: borde suave, fondo levemente gris y un anillo de foco celeste.
   -------------------------------------------------------------------------- */
.gnp-form {
  display: grid;
  gap: 1.125rem;
  max-width: 36rem;
  margin-inline: auto;
}

.gnp-field-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gnp-charcoal);
}

/* «Obligatorio» se dice con palabras, no con un asterisco naranjo suelto: un
   símbolo de color no se percibe si no se distinguen los colores, y el naranjo
   está reservado para Funeraria. */
.gnp-field-label .gnp-req {
  margin-left: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--gnp-stone);
}

.gnp-field {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--gnp-whisper);
  border: 1.5px solid rgba(137, 138, 141, 0.4);
  border-radius: var(--gnp-radius-md);
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--gnp-charcoal);
  transition: border-color var(--gnp-dur) var(--gnp-ease),
              box-shadow var(--gnp-dur) var(--gnp-ease);
}

.gnp-field::placeholder { color: var(--gnp-stone); }

.gnp-field:focus {
  outline: none;
  border-color: var(--gnp-sky);
  box-shadow: 0 0 0 3px rgba(1, 158, 219, 0.15);
}

select.gnp-field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232d3436' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.75rem;
}

.gnp-form__ayuda {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(45, 52, 54, 0.7);
}

/* ── Aviso dentro de la pantalla ─────────────────────────────────────────────
   Reemplaza al modal que hoy aparece cuando la búsqueda no encuentra nada. Un
   modal dentro de un lightbox son dos capas encima de la página, y la de abajo
   queda a medias detrás; además el visitante tiene que cerrar dos cosas.

   Tampoco lleva una gran X naranja: no encontrar un resultado no es un error de
   la persona ni una falla del sistema. Es una respuesta.
   -------------------------------------------------------------------------- */
.gnp-aviso {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  /* Mismo ancho que el formulario que va debajo: a todo lo ancho del modal la
     línea pasaba de los 100 caracteres y quedaba incómoda de leer. */
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  background: var(--gnp-primary-soft);
  border: 1px solid rgba(10, 79, 150, 0.15);
  border-radius: var(--gnp-radius-lg);
}

.gnp-aviso__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--gnp-canvas);
  border-radius: var(--gnp-radius-pill);
  color: var(--gnp-primary);
}

.gnp-aviso__title {
  font-size: 1.0625rem;
  font-weight: 600;
}

.gnp-aviso__text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(45, 52, 54, 0.75);
}

/* ── Panel de mapa ───────────────────────────────────────────────────────────
   El mapa se abre DENTRO de la misma pantalla, no en otra pestaña: la persona
   no pierde de vista la consulta que estaba haciendo y vuelve al listado con un
   botón, sin depender del historial del navegador.

   Se comprobó que mapas.nuestrosparques.cl no envía X-Frame-Options ni CSP, así
   que admite ser embebido.

   Acá sí corresponde usar `vh`: dentro de un iframe equivale al alto del propio
   iframe, que es justo lo que queremos ocupar. La advertencia de más arriba es
   para la PÁGINA, que no debe fijarse a 100vh; para este panel el `clamp` da un
   alto cómodo tanto en el lightbox como a pantalla completa.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

.gnp-map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid var(--gnp-whisper);
}

.gnp-map__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

/* El título recibe el foco al abrir el panel, para que un lector de pantalla
   anuncie dónde quedó. Sin esto el foco se queda en el botón de una fila que ya
   no está a la vista. */
.gnp-map__title:focus-visible {
  outline-offset: 4px;
}

.gnp-map__sub {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: rgba(45, 52, 54, 0.7);
}

.gnp-map__frame {
  display: block;
  width: 100%;
  height: clamp(20rem, 58vh, 34rem);
  border: 0;
  background: var(--gnp-whisper);
}

.gnp-map__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--gnp-whisper);
  font-size: 0.875rem;
  color: var(--gnp-stone);
}

/* ── Paginación ──────────────────────────────────────────────────────────── */
/* .gnp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
} */

ul.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  list-style-type: none;
}

/* .gnp-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  background: var(--gnp-canvas);
  border: 1px solid var(--gnp-whisper);
  border-radius: var(--gnp-radius-pill);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gnp-primary);
  cursor: pointer;
  transition: background-color var(--gnp-dur) var(--gnp-ease);
} */

a.page-link {
  text-decoration: none;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  background: var(--gnp-canvas);
  border: 1px solid var(--gnp-whisper);
  border-radius: var(--gnp-radius-pill);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gnp-primary);
  cursor: pointer;
  transition: background-color var(--gnp-dur) var(--gnp-ease);
}

/* .gnp-pager__btn[aria-current='page'] {
  background: var(--gnp-primary);
  border-color: var(--gnp-primary);
  color: var(--gnp-canvas);
} */

.page-item.active > .page-link {
  background: var(--gnp-primary);
  border-color: var(--gnp-primary);
  color: var(--gnp-canvas);
}

/* .gnp-pager__btn[disabled] {
  opacity: 0.4;
  cursor: default;
} */

@media (hover: hover) and (pointer: fine) {
  /* .gnp-pager__btn:not([disabled]):not([aria-current='page']):hover {
    background: var(--gnp-primary-soft);
  } */

  .page-item:not(.active) > .page-link:hover {
    background: var(--gnp-primary-soft);
  }
}

/* ── Estado sin servicios ────────────────────────────────────────────────────
   Un día sin ceremonias no es un error: hay que decirlo con calma y dejar una
   salida. Una tabla vacía o un mensaje de error deja a la persona sin saber si
   falló algo.
   -------------------------------------------------------------------------- */
.gnp-empty {
  padding: 3rem 1.5rem;
  text-align: center;
}

.gnp-empty__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  background: var(--gnp-primary-soft);
  border-radius: var(--gnp-radius-pill);
  color: var(--gnp-primary);
}

.gnp-empty__title {
  font-size: 1.25rem;
  font-weight: 600;
}

.gnp-empty__text {
  max-width: 28rem;
  margin: 0.5rem auto 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(45, 52, 54, 0.7);
}

/* ── Nota al pie ─────────────────────────────────────────────────────────── */
.gnp-note {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--gnp-stone);
  text-align: center;
}

/* ── Movimiento reducido ─────────────────────────────────────────────────────
   Quien lo pide en su sistema no debería ver nada desplazarse.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gnp-obit *,
  .gnp-obit *::before,
  .gnp-obit *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .gnp-park:hover,
  .gnp-btn:active { transform: none; }
}