/* Mini anuncio "usa un código de creador" (js/aviso-codigo.js). Usa el acento de cada tienda
   (--game-accent-rgb, --game-text) y el glass común; ver .claude/UI_RULES.md */

.aviso-codigo {
  position: fixed;
  left: 16px;
  /* Justo encima del botón de WhatsApp (abajo a la izquierda, 54 px a 84 px del borde):
     84 + 54 + 12 de aire. Así no tapa ni ese botón ni el del chat (derecha) ni la barra de compra. */
  bottom: calc(150px + env(safe-area-inset-bottom));
  max-width: min(260px, calc(100vw - 32px));
  z-index: 9998;
  display: flex;
  align-items: stretch;
  border-radius: 16px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(var(--game-accent-rgb), 0.45);
  box-shadow: var(--shadow-lg), 0 10px 25px -5px rgba(var(--game-accent-rgb), 0.25);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, box-shadow 0.25s ease;
}
.aviso-codigo.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s, box-shadow 0.25s ease;
}
.aviso-codigo:hover, .aviso-codigo:focus-within {
  box-shadow: var(--shadow-lg), 0 12px 30px -5px rgba(var(--game-accent-rgb), 0.45);
}

.aviso-codigo-abrir {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 8px 12px;
  background: none;
  border: none;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  border-radius: 16px 0 0 16px;
  font-family: 'Poppins', sans-serif;
}
.aviso-codigo-icono { font-size: 20px; line-height: 1; }
.aviso-codigo-texto { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.aviso-codigo-texto strong {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: var(--game-text);
  letter-spacing: 0.3px;
}

/* La X se ve pequeña, pero su zona táctil mide 44 px */
.aviso-codigo-cerrar {
  flex: none;
  width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  border-radius: 0 16px 16px 0;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.aviso-codigo-cerrar:hover { color: var(--text-main); }
.aviso-codigo-abrir:focus-visible, .aviso-codigo-cerrar:focus-visible {
  outline: 2px solid var(--game-text);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .aviso-codigo, .aviso-codigo.visible { transition: none; transform: none; }
}