/*
 Theme Name:   Attorna Child
 Theme URI:    http://demo.goodlayers.com/attorna
 Description:  Goodlayers Attorna Child Theme
 Author:       Goodlayers
 Author URI:   http://goodlayers.com
 Template:     attorna
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, right-sidebar, responsive-layout
 Text Domain:  attorna-child

 START YOUR CHILD THEME CSS HERE
*/

/* --- Estilo Base para el Botón ResponsiveVoice --- */
.responsivevoice-button {
    /* Fondo y Borde */
    background-color: #0073aa !important; /* Color azul primario de WordPress o el de tu marca */
    color: #ffffff !important; /* Texto blanco */
    border: none !important;
    border-radius: 5px !important; /* Esquinas redondeadas */

    /* Espaciado y Fuente */
    padding: 10px 20px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: all 0.3s ease; /* Transición suave para el efecto hover */
    display: inline-flex !important; /* Para alinear mejor el icono y el texto */
    align-items: center;
	/* Aseguramos que el botón se muestre como un elemento de bloque para centrarlo */
    display: block !important; 
    margin: 0 auto 20px auto !important;
}
p:has(.responsivevoice-button) {
    text-align: center;
}


/* --- Estilo al Pasar el Ratón (Hover) --- */
.responsivevoice-button:hover {
    background-color: #005177 !important; /* Un tono de azul más oscuro al pasar el ratón */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

/* --- Estilo del Icono de Altavoz --- */
/* (Para separarlo un poco del texto) */
.responsivevoice-button .responsivevoice-icon {
    margin-right: 8px; 
}