.bpv-boton-voz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 42px;
    background-color: #E6b719;   /* fondo normal del botón (círculo oscuro) */
    color: #ffffff;              /* color del ícono (usa currentColor en el SVG) */
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 1px;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    vertical-align: middle;
}

.bpv-boton-voz:hover {
    background-color: #F9E4A7;   /* fondo al pasar el mouse */
}

.bpv-boton-voz:active {
    transform: scale(0.92);
}

.bpv-boton-voz .bpv-icono {
    display: inline-flex;
    font-size: 20px;
    line-height: 1;
}

.bpv-boton-voz .bpv-icono svg {
    width: 1em;
    height: 1em;
}

/* Estado "escuchando" (activo) */
.bpv-boton-voz.bpv-escuchando {
    background-color: #dc2626;   /* fondo rojo cuando está grabando */
    color: #ffffff;
    animation: bpv-pulso 1.2s infinite;
}

@keyframes bpv-pulso {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* Wrapper flotante (modo automático) */
.bpv-flotante-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: #E6b719;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
    padding: 8px;
}

.bpv-flotante-wrapper .bpv-boton-voz .bpv-icono {
    font-size: 22px;
}

/* Oculto cuando el navegador no soporta reconocimiento de voz */
.bpv-no-soportado {
    display: none !important;
}