/* ============================================
   style.css — Solo fuentes y reset básico.
   Todo el layout y diseño usa Tailwind CSS.
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; }

/* Smooth scroll en containers internos */
.overflow-y-auto { scroll-behavior: smooth; }

/* Ocultar scrollbar nativa (estético móvil) */
.overflow-y-auto::-webkit-scrollbar { display: none; }
.overflow-y-auto { -ms-overflow-style: none; scrollbar-width: none; }

/* Animación de entrada suave para el resultado de pronunciación */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.4s ease forwards; }

/* Pulso del micrófono al grabar (morado) */
@keyframes micPulse {
    0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
    70%  { box-shadow: 0 0 0 22px rgba(124, 58, 237, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
.recording { animation: micPulse 1.4s infinite; }

/* Pulso rojo — micrófono en escucha activa (Azure) */
@keyframes micPulseRed {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70%  { box-shadow: 0 0 0 24px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.listening-pulse { animation: micPulseRed 1.2s infinite; }

/* Pulso sutil para botones secundarios */
@keyframes subtlePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.7; }
}
.animate-pulse-subtle { animation: subtlePulse 2s ease-in-out infinite; }

/* Barra de progreso indeterminada */
@keyframes progressIndeterminate {
    0%   { transform: translateX(-100%) scaleX(0.4); }
    40%  { transform: translateX(0%)    scaleX(0.7); }
    100% { transform: translateX(100%)  scaleX(0.4); }
}
.animate-progress-indeterminate {
    animation: progressIndeterminate 1.4s ease-in-out infinite;
    transform-origin: left center;
}

/* Círculo de score SVG — aparición animada */
.score-circle-fill {
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Barras de score — animación al aparecer */
.score-bar {
    transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Word chips — hover */
.word-chip {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}
.word-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Transcript parcial — fade in cada nueva palabra */
@keyframes wordAppear {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
.word-appear { animation: wordAppear 0.2s ease forwards; }