/* Componente Botón (genérico) — A&G Elementor Components
 * Solo estilos propios del componente. El color base del botón (.btn,
 * .green-dark, .green-light, .ghost) viene del design system del tema.
 */

.ayg-boton-component {
    width: 100%;
}

.ayg-boton-component.is-gray {
    background-color: #F3F3F4; /* $gray-5 */
}

.ayg-boton-wrap {
    display: flex;
    justify-content: flex-start; /* sobrescrito por el control de alineación */
    width: 100%;
}

/* Ghost por color: el design system solo define ghost en azul.
 * Aquí completamos las variantes verde oscuro y verde claro. */
.ayg-boton-component .btn.ghost {
    background-color: transparent;
}

.ayg-boton-component .btn.ghost.green-dark {
    color: #388C8A; /* $green-dark */
    border-color: #388C8A;
    background-color: transparent;
}

.ayg-boton-component .btn.ghost.green-light {
    color: #AFB765; /* $green-light */
    border-color: #AFB765;
    background-color: transparent;
}