/* ════════════════════════════════════════════════════════════════════════════
   EL INDICADOR DE GUARDADO
   ════════════════════════════════════════════════════════════════════════════
   Vive entero en clases propias (`est-*`) y no toca una línea de las viejas.
   `plataforma.css` es un sistema que comparten dieciséis pantallas, y una
   pieza nueva que le pide prestada una clase es como se rompió ZnappView.

   POR QUÉ ABAJO A LA DERECHA Y NO ARRIBA: el usuario está mirando lo que acaba
   de tocar —una pill, una lista de PDVs— y eso está en el cuerpo de la
   pantalla. Un cartel arriba obliga a levantar la vista para confirmar algo que
   en el 99% de los casos salió bien. Abajo se ve de reojo y sólo pide atención
   cuando se pone rojo, que es el único caso en que hay algo que hacer.
   ══════════════════════════════════════════════════════════════════════════ */
.est-chip{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px;
  font:500 13px/1.2 'DM Sans',system-ui,sans-serif;
  color:#0f172a; background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 6px 24px rgba(15,23,42,.13);
  /* APAGADO ES INVISIBLE Y SIN CAJA: `opacity:0` solo dejaría un rectángulo
     capturando clics sobre el contenido de la pantalla. */
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.est-chip.on{ opacity:1; transform:none; pointer-events:auto; }
.est-chip .est-tx{ white-space:nowrap; }
.est-chip .est-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  font-size:11px; font-weight:700; line-height:1;
  background:rgba(15,23,42,.08);
}
.est-chip.bien{ border-color:rgba(19,193,172,.35); }
.est-chip.bien .est-ico{ background:#13c1ac; color:#fff; }
.est-chip.mal{ border-color:rgba(220,38,38,.35); background:#fef2f2; color:#7f1d1d; }
.est-chip.mal .est-ico{ background:#dc2626; color:#fff; }
.est-chip .est-btn{
  border:0; background:#dc2626; color:#fff; cursor:pointer;
  padding:5px 11px; border-radius:999px;
  font:600 12px/1 'DM Sans',system-ui,sans-serif;
}
.est-chip .est-btn:hover{ background:#b91c1c; }

/* el giro del «guardando…» */
.est-chip .est-giro{
  background:none;
  border:2px solid rgba(15,23,42,.18);
  border-top-color:#13c1ac;
  animation:est-girar .7s linear infinite;
}
@keyframes est-girar{ to{ transform:rotate(360deg); } }

/* QUIEN PIDIÓ MENOS MOVIMIENTO NO NECESITA VER GIRAR NADA para entender que
   algo está en curso: el texto ya lo dice. */
@media (prefers-reduced-motion:reduce){
  .est-chip{ transition:none; }
  .est-chip .est-giro{ animation:none; border-top-color:#13c1ac; }
}

@media (max-width:760px){
  .est-chip{ right:12px; bottom:12px; padding:8px 12px; font-size:12px; }
}