/* ============================================================
   DANGOFE OS LIQUID V2 — save-bar.css  (V1.0.37 · DANGOFE-UI-037)
   BARRA DE GUARDADO GLOBAL reutilizable.

   Componente fijo inferior que cualquier vista puede mostrar cuando
   tiene cambios pendientes (API: NS.saveBar.show/hide/setStatus).
   Los estilos se GENERALIZARON a partir de la barra de estado de la
   vista Configuración (.cfgx-statusbar), para que el mismo lenguaje
   visual (Liquid Glass, pastilla morada, botones Guardar/Descartar)
   esté disponible en todo el sistema.

   · Respeta Liquid Glass: el contenedor usa la clase .glass-strong.
   · Escritorio: pastilla centrada flotante sobre el contenido.
   · Móvil (≤820px): barra a lo ancho, anclada abajo, objetivos
     táctiles de 44px, sin tapar los últimos controles (el body añade
     padding inferior mientras la barra está visible: body.has-savebar).
   ============================================================ */

.savebar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: var(--z-modal, 100);
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  padding: 10px 16px;
  border-radius: var(--radius-pill, 999px);
  max-width: min(720px, calc(100vw - 32px));
  /* Oculta por defecto, con entrada/salida animada (sin usar display:none
     para poder animar). is-visible la muestra. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(140%);
  transition: transform 0.34s var(--spring, cubic-bezier(0.34, 1.35, 0.4, 1)),
    opacity 0.24s ease, visibility 0s linear 0.34s;
}

.savebar.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: transform 0.42s var(--spring, cubic-bezier(0.34, 1.35, 0.4, 1)),
    opacity 0.24s ease, visibility 0s linear 0s;
}

.savebar__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--fs-sm, 0.875rem);
  color: var(--text-secondary);
  white-space: nowrap;
}

.savebar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: 0 0 auto;
}

.savebar.is-dirty  .savebar__dot { background: #e8a020; }
.savebar.is-saving .savebar__dot { background: #6c8cff; }
.savebar.is-saved  .savebar__dot { background: #3ecf6a; }
.savebar.is-error  .savebar__dot { background: #ff5a5a; }

.savebar__actions {
  display: flex;
  gap: var(--space-2, 8px);
}

/* Mientras la barra global está visible, el contenido deja espacio
   inferior para que no queden controles tapados al final del scroll. */
body.has-savebar .view-container {
  padding-bottom: 108px;
}

/* ------------------------------------------------------------
   Móvil / pantallas pequeñas: barra a lo ancho, anclada abajo.
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .savebar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    flex-wrap: wrap;
    justify-content: center;
    transform: translateY(140%);
  }
  .savebar.is-visible { transform: translateY(0); }

  /* Objetivos táctiles mínimos de 44×44 px en los botones de la barra */
  .savebar .btn {
    min-height: 44px;
    min-width: 44px;
  }

  body.has-savebar .view-container {
    padding-bottom: 132px;
  }
}