/* Cangrejo guía del acceso al panel (lib/auth.php).
   Empuja al personal que no es administrador a pedir primero su código de
   WhatsApp en vez de escribir una contraseña que no tiene. La pantalla no
   sabe el rol (no lo delata), así que el cangrejo sale para todos; los
   administradores pueden ocultarlo para la sesión del navegador. */

.cg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: end;
  gap: 4px;
  margin: 2px 0 -6px;
}
.cg[hidden] { display: none; }

/* Bocadillo */
.cg-bocadillo {
  position: relative;
  margin: 0 0 22px;
  padding: 12px 34px 12px 14px;
  background: #fff;
  border: 2px solid var(--sh-tinta, #1A1D21);
  border-radius: 16px 16px 4px 16px;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--sh-tinta, #1A1D21);
  transform-origin: 100% 100%;
  animation: cg-pop .38s cubic-bezier(.2, .9, .3, 1.25) .55s both;
}
.cg-bocadillo::after {           /* pico hacia el cangrejo */
  content: "";
  position: absolute;
  right: -11px;
  bottom: 10px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-right: 2px solid var(--sh-tinta, #1A1D21);
  border-bottom: 2px solid var(--sh-tinta, #1A1D21);
  transform: rotate(-45deg);
}
.cg-bocadillo strong { display: block; font-size: 1.125rem; }
.cg-cerrar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sh-tinta-3, #6b6f75);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.cg-cerrar:hover { background: var(--sh-pared, #E2E0DC); color: var(--sh-tinta, #1A1D21); }

/* Cangrejo */
.cg-bicho {
  width: 112px;
  height: auto;
  overflow: visible;
  animation: cg-entra .6s cubic-bezier(.2, .9, .3, 1.2) .25s both;
}
.cg-pinza   { transform-origin: 84px 58px; animation: cg-toca 2.4s ease-in-out 1.1s infinite; }
.cg-parpado { transform-origin: 50% 50%; transform-box: fill-box; animation: cg-parpadeo 4.2s 2s infinite; }
.cg-patas   { animation: cg-patitas .5s steps(2) .25s 3; }

/* Estado «código pedido»: la pinza apunta hacia arriba, al campo */
.cg[data-estado="codigo"] .cg-pinza { transform: scaleY(-1); animation: none; }
.cg[data-estado="codigo"] .cg-bicho { animation: cg-entra .6s cubic-bezier(.2, .9, .3, 1.2) .25s both, cg-flota 2.6s ease-in-out 1s infinite; }

/* Aviso: alguien escribe en el campo sin haber pedido el código */
.cg.cg-alerta .cg-bicho      { animation: cg-salto .7s cubic-bezier(.3, .7, .4, 1); }
.cg.cg-alerta .cg-bocadillo  { animation: cg-sacude .45s ease-in-out; border-color: var(--sh-tarde, #A61B1B); }
.cg.cg-alerta .cg-bocadillo::after { border-color: var(--sh-tarde, #A61B1B); }

/* El botón al que señala */
.cg-objetivo {
  position: relative;
  animation: cg-latido 1.8s ease-out 1.2s infinite;
  border-color: #1F9D55 !important;
}
.cg-campo { box-shadow: 0 0 0 3px #1F9D55; border-radius: var(--sh-radio-control, 12px); }

@keyframes cg-entra    { from { opacity: 0; transform: translateX(60px) rotate(12deg); } to { opacity: 1; transform: none; } }
@keyframes cg-pop      { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes cg-toca     { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(16deg); } 75% { transform: rotate(-4deg); } 85% { transform: rotate(12deg); } }
@keyframes cg-parpadeo { 0%, 94%, 100% { transform: scaleY(0); } 97% { transform: scaleY(1); } }
@keyframes cg-patitas  { to { transform: translateY(-2px); } }
@keyframes cg-flota    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes cg-salto    { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-18px) rotate(-6deg); } 55% { transform: translateY(0); } 72% { transform: translateY(-7px) rotate(4deg); } }
@keyframes cg-sacude   { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes cg-latido   { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(31, 157, 85, 0); } }

@media (prefers-reduced-motion: reduce) {
  .cg *, .cg, .cg-objetivo { animation: none !important; }
  .cg-objetivo { box-shadow: 0 0 0 3px rgba(31, 157, 85, .55); }
}