/* =====================================================================
   G.S. Auto Import — complementos.css

   Lo único que el CSS del mockup no cubre, porque no existía en él:
   la pantalla de carga entre páginas y la paginación real (el mockup
   pintaba el inventario completo desde localStorage, sin paginar).

   Va aparte para que base/components/pages/admin sigan siendo byte a
   byte los del mockup y este añadido quede aislado y sea auditable.

   Las variables se escriben con respaldo —var(--linea, var(--border))—
   porque el sitio público y el panel usan dos juegos de tokens y este
   archivo se carga en los dos.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Pantalla de carga (sólo público)
   --------------------------------------------------------------- */
.cargador {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity var(--t-media), visibility var(--t-media);
}

/* En reposo: invisible y transparente al ratón, pero sin display:none,
   para que pueda volver a animarse al salir de la página. */
.cargador.fuera {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cargador__logo {
  height: clamp(44px, 7vw, 64px);
  width: auto;
  animation: cargador-pulso 1.15s var(--ease) infinite;
}

[data-theme='dark'] .cargador__logo { filter: invert(1); }

@keyframes cargador-pulso {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .cargador { transition: none; }
  .cargador__logo { animation-duration: 2.4s; animation-timing-function: ease-in-out; }
}

/* ---------------------------------------------------------------
   2. Paginación
   --------------------------------------------------------------- */

/* admin.css sólo viste los <button> del paginador falso del mockup. El
   paginador real usa <a> para las páginas a las que se puede ir, que es
   lo que permite navegar sin JavaScript y que Google las siga. */
.paginacion__nums a {
  min-width: 32px;
  height: 32px;
  padding-inline: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea, var(--border));
  border-radius: 6px;
  background: var(--panel, var(--surface));
  font-size: .82rem;
  font-weight: 600;
  color: var(--fg-suave);
  transition: border-color var(--t-rapida), color var(--t-rapida);
}

.paginacion__nums a:hover {
  border-color: var(--border-fuerte);
  color: var(--fg);
}

.paginacion__nums .gap {
  display: inline-flex;
  align-items: center;
  padding-inline: .35rem;
  color: var(--muted);
}

/* El sitio público no carga admin.css, así que la envoltura del catálogo
   reconstruye aquí lo que allí define .paginacion. */
.paginacion-publica .paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--muted);
}

.paginacion-publica .paginacion__nums { display: flex; gap: .25rem; }

.paginacion-publica .paginacion__nums button {
  min-width: 32px;
  height: 32px;
  padding-inline: .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: .82rem;
  font-weight: 600;
  color: var(--fg-suave);
}

.paginacion-publica .paginacion__nums button.activo {
  background: var(--inverso-bg);
  border-color: var(--inverso-bg);
  color: var(--inverso-fg);
}

.paginacion-publica .paginacion__nums button[disabled] { opacity: .4; pointer-events: none; }