/* ═══════════════════════════════════════════════════════════════
   Indicador global de guardado (js/save-status.js), en la barra
   superior azul. Interfaz, no escenografía: densidad alta y
   movimiento mínimo (solo el giro mientras guarda; el cambio de
   estado es instantáneo, se repite muchas veces al día).
   ═══════════════════════════════════════════════════════════════ */
.efs-save { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  min-width: 0; height: 32px; padding: 0 .75rem; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; line-height: 1;
  color: rgba(255,255,255,.86); white-space: nowrap; flex-shrink: 0; }
.efs-save[hidden] { display: none; }
.efs-save:not([hidden]) + .efs-topbar__cta { margin-left: .75rem; }
.efs-save__icon { display: inline-flex; flex-shrink: 0; color: #d6e949; }
.efs-save__ico { display: block; }
.efs-save__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.efs-save__m, .efs-save__s { display: none; }
.efs-save__s:empty { display: none !important; }
/* Con el indicador visible, el menú de escritorio se aprieta un poco para que
   quepa en una línea (8 entradas + indicador + avatar). Solo con el menú a la
   vista (>1024 px): en móvil el hueco entre piezas sigue siendo el de topbar.css. */
@media (min-width: 1025px) {
  .efs-topbar__inner:has(.efs-save:not([hidden])) { gap: 1.25rem; }
  .efs-topbar__inner:has(.efs-save:not([hidden])) .efs-topbar__menu { gap: 1.15rem; }
  /* Error o cambios sin guardar (pastilla con botón, más ancha): un poco más. */
  .efs-topbar__inner:has(.efs-save[data-state="error"]:not([hidden])),
  .efs-topbar__inner:has(.efs-save[data-state="dirty"]:not([hidden])) { gap: 1rem; }
  .efs-topbar__inner:has(.efs-save[data-state="error"]:not([hidden])) .efs-topbar__menu,
  .efs-topbar__inner:has(.efs-save[data-state="dirty"]:not([hidden])) .efs-topbar__menu { gap: .8rem; }
}
.efs-save__spin { width: 13px; height: 13px; border-radius: 50%; display: block;
  border: 2px solid rgba(214,233,73,.35); border-top-color: #d6e949;
  animation: efs-save-spin .8s linear infinite; }
@keyframes efs-save-spin { to { transform: rotate(360deg); } }

/* Cambios sin guardar: llamada a la acción en lima. */
.efs-save[data-state="dirty"] { color: #fff; }
/* Error: pastilla clara sobre el azul, tinta de marca e icono rojo. */
.efs-save[data-state="error"] { background: #fdf3f1; color: #222351; }
.efs-save[data-state="error"] .efs-save__icon { color: #b3261e; }

.efs-save__btn { flex-shrink: 0; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 12px;
  padding: .3rem .7rem; border-radius: 999px; line-height: 1.2;
  background: #d6e949; color: #222351; transition: transform .12s ease; }
.efs-save__btn[hidden] { display: none; }
.efs-save__btnico, .efs-save__btnwarn { display: none; flex-shrink: 0; }
.efs-save[data-state="error"] .efs-save__btn { background: #3c45a3; color: #fff; margin-right: -.45rem; }
.efs-save[data-state="dirty"] .efs-save__btn { margin-right: -.45rem; }
.efs-save__btn:active { transform: scale(.97); }
/* En táctil, main.css pone 44 px de alto a todos los botones: aquí el botón
   se queda en la pastilla y el área de toque se amplía por fuera. */
.efs-save__btn { position: relative; min-height: 0 !important; }
.efs-save__btn::after { content: ''; position: absolute; inset: -8px -4px; }
.efs-save__btn:focus-visible { outline: 2px solid #d6e949; outline-offset: 2px; }
.efs-save[data-state="error"] .efs-save__btn:focus-visible { outline-color: #222351; }

@media (hover: hover) and (pointer: fine) {
  .efs-save__btn:hover { filter: brightness(1.06); }
}

/* Escritorio con el menú a la vista (8 entradas: no cabe más): textos cortos
   («No guardado», «Sin guardar»). La frase completa queda en title y para
   lectores de pantalla. */
@media (min-width: 1025px) {
  .efs-save__l { display: none; }
  .efs-save__m { display: inline; }
}
/* Escritorio estrecho (1025-1279 px): el menú ya va justo sin indicador;
   solo icono (✓ o el giro) y, si hace falta actuar, icono + botón. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .efs-save__m { display: none; }
  .efs-save { padding: 0 .5rem; }
  .efs-topbar__inner:has(.efs-save:not([hidden])) { gap: .9rem; }
  .efs-topbar__inner:has(.efs-save:not([hidden])) .efs-topbar__menu { gap: .8rem; }
}
/* Por debajo de 1150 px ni así cabe la palabra: el botón queda en icono
   (con aria-label y title del indicador). */
@media (min-width: 1025px) and (max-width: 1149px) {
  .efs-save__btntxt { display: none; }
  .efs-save__btnico { display: block; }
  .efs-save__btn { padding: .3rem .4rem; }
}
/* Barra plegada (≤1024 px): el menú se va a la hamburguesa y hay sitio. */
@media (max-width: 1024px) {
  .efs-save { padding: 0 .55rem; }
  .efs-save:not([hidden]) + .efs-topbar__cta { margin-left: .4rem; }
}
/* Móvil (≤600 px): «Guardando…» y «Guardado» con texto corto. En fallo o
   cambios sin guardar, el indicador es una sola pieza: el propio botón
   (⚠ + «Reintentar» claro; disquete + «Guardar» lima), 30 px de alto y una
   línea. Avatar y menú no encogen nunca: es el indicador el que cede. */
@media (max-width: 600px) {
  .efs-save { font-size: 12px; gap: .3rem; padding: 0 .35rem; flex-shrink: 1; }
  .efs-save:not([hidden]) + .efs-topbar__cta { margin-left: 0; flex-shrink: 0; min-width: 38px; }
  .efs-topbar__inner:has(.efs-save:not([hidden])) .efs-topbar__toggle { flex-shrink: 0; }
  .efs-save__l, .efs-save__m { display: none; }
  .efs-save__s { display: inline; }
  .efs-save[data-state="error"], .efs-save[data-state="dirty"] { background: transparent; padding: 0; height: auto; flex-shrink: 0; }
  .efs-save[data-state="error"] .efs-save__icon,
  .efs-save[data-state="dirty"] .efs-save__icon,
  .efs-save[data-state="error"] .efs-save__txt,
  .efs-save[data-state="dirty"] .efs-save__txt { display: none; }
  .efs-save[data-state="error"] .efs-save__btn,
  .efs-save[data-state="dirty"] .efs-save__btn {
    display: inline-flex; align-items: center; gap: .3rem; height: 30px; margin: 0;
    padding: 0 .6rem 0 .5rem; font-size: 12px; line-height: 1; white-space: nowrap; }
  .efs-save[data-state="error"] .efs-save__btn { background: #fdf3f1; color: #222351; }
  .efs-save[data-state="error"] .efs-save__btnwarn { display: block; color: #b3261e; }
  .efs-save[data-state="dirty"] .efs-save__btnico { display: block; }
}
/* Móvil muy estrecho (≤340 px): el botón queda en icono (30×30) con
   aria-label; la frase completa sigue en title y para lectores de pantalla. */
@media (max-width: 340px) {
  .efs-save { padding: 0 .2rem; }
  /* «Guardando…» no cabe junto al avatar: solo el giro (el texto, en title/sr). */
  .efs-save[data-state="saving"] .efs-save__txt { display: none; }
  .efs-save[data-state="error"] .efs-save__btntxt,
  .efs-save[data-state="dirty"] .efs-save__btntxt { display: none; }
  .efs-save[data-state="error"] .efs-save__btn,
  .efs-save[data-state="dirty"] .efs-save__btn { width: 30px; padding: 0; justify-content: center; }
}

/* Móvil estrecho: el logo cede unos píxeles para que quepan indicador,
   avatar y menú sin montarse (solo cuando el indicador está a la vista). */
@media (max-width: 420px) {
  .efs-topbar__inner:has(.efs-save:not([hidden])) .efs-topbar__logo { height: 14px; }
}
@media (max-width: 340px) {
  .efs-topbar__inner:has(.efs-save:not([hidden])) .efs-topbar__logo { height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .efs-save__spin { animation-duration: 2.4s; }
  .efs-save__btn { transition-duration: .01ms; }
}