/* ==========================================================================
   Supermercado Diez — Encuesta de Satisfacción
   Estilos de apoyo: accesibilidad, tamaño de texto y animaciones.
   Todo lo demás se resuelve con Tailwind.
   ========================================================================== */

[v-cloak] { display: none; }

/* --- Enlace de salto para lectores de pantalla y teclado --- */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #035d92;
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 700;
}
.salto-contenido:focus { left: 0; }

/* --- Foco siempre visible y con buen contraste --- */
:focus-visible {
  outline: 3px solid #035d92;
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Escala de texto: tres tamaños que la persona elige y quedan guardados.
   Se aplica sobre la raíz para que todo el rem escale de forma proporcional.
   -------------------------------------------------------------------------- */
html { font-size: 16px; }
html[data-texto="grande"]   { font-size: 18px; }
html[data-texto="enorme"]   { font-size: 21px; }

/* --------------------------------------------------------------------------
   Estrellas de valoración
   -------------------------------------------------------------------------- */
.estrella {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 4.6rem;
  border-radius: 1rem;
  background: #fff;
  border: 2px solid #d6ecf8;
  color: #cbd5e1;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.estrella svg { width: 62%; height: 62%; }
.estrella:hover { border-color: #7cc2e7; transform: translateY(-2px); }
.estrella[aria-checked="true"],
.estrella.activa {
  background: #fffaeb;
  border-color: #fbbf24;
  color: #f59e0b;
}
.estrella.activa svg { filter: drop-shadow(0 3px 6px rgba(245,158,11,.35)); }
.estrella:active { transform: scale(.94); }

/* --------------------------------------------------------------------------
   Entrada de cada paso.

   Se usa una animación CSS y no una transición coordinada por JavaScript a
   propósito: si el navegador congela los frames (por ejemplo, cuando la
   persona cambia de aplicación en pleno cambio de pantalla), una transición
   puede quedarse a medias y dejar la pantalla anterior congelada. Con una
   animación, el estado final es el estado normal del elemento: si la
   animación no llega a ejecutarse, el contenido igual se ve completo.
   -------------------------------------------------------------------------- */
@keyframes entrada-paso {
  from { opacity: .4; transform: translateX(14px); }
  to   { opacity: 1;  transform: none; }
}
main > section,
main > div[role="status"] {
  animation: entrada-paso .26s ease-out;
}

/* --------------------------------------------------------------------------
   Premio: brillo del código y confeti
   -------------------------------------------------------------------------- */
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.45); }
  50%      { box-shadow: 0 0 0 16px rgba(245,158,11,0); }
}
.codigo-premio { animation: latido 2.2s ease-out infinite; }

@keyframes caer {
  0%   { transform: translateY(-12vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(680deg); opacity: 0; }
}
.confeti {
  position: fixed;
  top: 0;
  width: 9px;
  height: 15px;
  border-radius: 2px;
  animation: caer linear forwards;
  pointer-events: none;
  z-index: 5;
}

/* --------------------------------------------------------------------------
   Fila de categorías del buscador de productos
   -------------------------------------------------------------------------- */
.fila-categorias {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.fila-categorias::-webkit-scrollbar { display: none; }
.fila-categorias > button { scroll-snap-align: start; }

/* --------------------------------------------------------------------------
   Respeto por quienes prefieren menos movimiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .confeti { display: none; }
}

/* --------------------------------------------------------------------------
   Más contraste si el sistema lo pide
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  .estrella { border-width: 3px; border-color: #08496f; }
  .texto-suave { color: #0f172a !important; }
}

/* --- Impresión: útil si alguien imprime el comprobante del premio --- */
@media print {
  .no-imprimir { display: none !important; }
  body { background: #fff; }
}