/* =====================================================================
   RV25 Relojería · INSIGNIA DE DISPONIBILIDAD
   ---------------------------------------------------------------------
   La pastilla "● Entrega inmediata" / "◷ Sobre pedido · 10–15 días".
   La arma js/componentes/estado.js.

     .estado-ya      punto verde que late suave (está listo para enviar)
     .estado-pedido  ícono de reloj, en tono arena

   Sobre fondo claro (tarjetas, ficha) es una pastilla blanca; dentro de
   .sobre-oscuro (portada azul noche) se vuelve translúcida y clara.
   ===================================================================== */

.estado {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 28px; padding: 0 11px;
  border-radius: var(--radio-pildora);
  background: #FFFFFF; color: var(--tinta);
  font: 600 12px/1 var(--letra); letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(6, 26, 40, .08);
}

/* Entrega inmediata: punto verde con un pulso suave */
.estado-punto {
  position: relative; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok-vivo);
}
.estado-punto::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ok-vivo);
  animation: estado-late 2.4s ease-out infinite;
}
@keyframes estado-late {
  from { transform: scale(1); opacity: .55; }
  to   { transform: scale(2.6); opacity: 0; }
}

/* Sobre pedido: ícono de reloj, más sobrio */
.estado-pedido { background: var(--arena); }
.estado-icono  { width: 14px; height: 14px; flex: none; color: var(--acento-texto); }

/* Sobre azul noche (portada) */
.sobre-oscuro .estado        { background: rgba(245, 239, 230, .12); color: var(--fondo); box-shadow: inset 0 0 0 1px rgba(245, 239, 230, .22); }
.sobre-oscuro .estado-icono  { color: var(--acento); }

@media (prefers-reduced-motion: reduce) {
  .estado-punto::after { animation: none; }
}