/* ============================================================
   wwwroot/css/Shared/mic.css
   Botón de micrófono + countdown ring
   Mobile-first · paleta rosa-púrpura TraduceHombres
   ============================================================ */

/* ─── Contenedor ─────────────────────────────────────────── */
.th-mic-wrap {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .75rem;
    justify-content: center;
}

/* ─── Botón ──────────────────────────────────────────────── */
.th-mic-btn {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #fce4ec, #f3e5f5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(233, 30, 140, .15);
    outline: none;
}

    .th-mic-btn:hover:not(:disabled) {
        transform: scale(1.08);
        box-shadow: 0 4px 16px rgba(233, 30, 140, .25);
        background: linear-gradient(135deg, #f8bbd0, #e1bee7);
    }

    .th-mic-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

/* Icono Lucide dentro del botón */
.th-mic-btn__icon i {
    width: 20px;
    height: 20px;
    color: #e91e8c;
    display: block;
}

/* ─── Estado: grabando ───────────────────────────────────── */
.th-mic-btn--grabando {
    background: linear-gradient(135deg, #e91e8c, #9c27b0) !important;
    box-shadow: 0 0 0 0 rgba(233, 30, 140, .5);
    animation: micPulse 1.2s ease-in-out infinite;
}

    .th-mic-btn--grabando .th-mic-btn__icon i {
        color: #fff !important;
    }

@keyframes micPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 30, 140, .45);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(233, 30, 140, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(233, 30, 140, 0);
    }
}

/* ─── Estado: transcribiendo ─────────────────────────────── */
.th-mic-btn--transcribiendo {
    background: linear-gradient(135deg, #9c27b0, #3f51b5) !important;
    cursor: wait;
}

    .th-mic-btn--transcribiendo .th-mic-btn__icon i {
        color: #fff !important;
        animation: micSpin .8s linear infinite;
    }

@keyframes micSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Ring SVG de countdown ──────────────────────────────── */
.th-mic-ring {
    position: absolute;
    inset: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border-radius: 50%;
    transform: rotate(-90deg); /* Empezar desde arriba */
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.th-mic-btn--grabando .th-mic-ring {
    opacity: 1;
}

.th-mic-ring__track {
    fill: none;
    stroke: rgba(233, 30, 140, .15);
    stroke-width: 3;
}

.th-mic-ring__fill {
    fill: none;
    stroke: #e91e8c;
    stroke-width: 3;
    stroke-linecap: round;
    /* stroke-dasharray y stroke-dashoffset se controlan desde JS */
    transition: stroke-dashoffset .9s linear;
}

/* ─── Countdown numérico ─────────────────────────────────── */
.th-mic-countdown {
    font-size: 1.1rem;
    font-weight: 800;
    color: #e91e8c;
    min-width: 22px;
    text-align: center;
    opacity: 0;
    transform: scale(.7);
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
}

.th-mic-wrap--grabando .th-mic-countdown {
    opacity: 1;
    transform: scale(1);
}

/* Animación "pop" al cambiar número */
.th-mic-countdown--pop {
    animation: micCountPop .25s ease both;
}

@keyframes micCountPop {
    0% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

/* ─── Etiqueta de estado/segundos ────────────────────────── */
.th-mic-label {
    font-size: .75rem;
    font-weight: 600;
    color: #8a8aaa;
    white-space: nowrap;
    transition: color .2s ease;
}

.th-mic-wrap--grabando .th-mic-label {
    color: #e91e8c;
}

/* Link "▲Pro" inline */
.th-mic-label__pro {
    color: #9c27b0;
    text-decoration: none;
    font-size: .68rem;
    font-weight: 700;
    margin-left: .25rem;
    opacity: .75;
    transition: opacity .2s;
}

    .th-mic-label__pro:hover {
        opacity: 1;
        text-decoration: underline;
    }

/* ─── Toast de permiso denegado ──────────────────────────── */
.th-mic-permiso-denied {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: #ef4444;
    font-weight: 600;
    margin-top: .5rem;
    animation: micFadeIn .3s ease both;
}

@keyframes micFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (min-width: 480px) {
    .th-mic-btn {
        width: 52px;
        height: 52px;
    }

    .th-mic-btn__icon i {
        width: 22px;
        height: 22px;
    }

    .th-mic-countdown {
        font-size: 1.25rem;
    }
}