/* Corrección de colores para los botones del directorio */

/* Variables de colores que coinciden con la paleta del sitio */
:root {
    --primary-color: #d97706; /* Naranja principal */
    --primary-hover: #b45309; /* Naranja oscuro para hover */
    --secondary-color: #8B4513; /* Marrón para botones secundarios */
    --secondary-hover: #6d370f; /* Marrón oscuro para hover */
    --light-bg: #fffbeb; /* Fondo claro */
    --text-color: #78350f; /* Color de texto */
}

/* Selectores específicos para los botones del directorio */

/* Contenedores de servicios y tarjetas */
.directory-categories .card,
.featured-services .card,
#services-container .card,
.service-card .card {
    /* Estilos para las tarjetas de servicios */
}

/* Botón de llamada (antes azul) - Solo en el directorio */
.directory-categories .btn-outline-primary,
.featured-services .btn-outline-primary,
#services-container .btn-outline-primary,
.service-card .btn-outline-primary,
.card-footer .btn-outline-primary,
.card-footer .btn-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

.directory-categories .btn-outline-primary:hover,
.featured-services .btn-outline-primary:hover,
#services-container .btn-outline-primary:hover,
.service-card .btn-outline-primary:hover,
.card-footer .btn-outline-primary:hover,
.card-footer .btn-primary:hover {
    color: white !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Botón de email (antes gris) - Solo en el directorio */
.directory-categories .btn-outline-secondary,
.featured-services .btn-outline-secondary,
#services-container .btn-outline-secondary,
.service-card .btn-outline-secondary,
.card-footer .btn-outline-secondary {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    background-color: transparent !important;
}

.directory-categories .btn-outline-secondary:hover,
.featured-services .btn-outline-secondary:hover,
#services-container .btn-outline-secondary:hover,
.service-card .btn-outline-secondary:hover,
.card-footer .btn-outline-secondary:hover {
    color: white !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

/* Botón de sitio web (antes turquesa) - Solo en el directorio */
.directory-categories .btn-outline-info,
.featured-services .btn-outline-info,
#services-container .btn-outline-info,
.service-card .btn-outline-info,
.card-footer .btn-outline-info {
    color: var(--text-color) !important;
    border-color: var(--text-color) !important;
    background-color: transparent !important;
}

.directory-categories .btn-outline-info:hover,
.featured-services .btn-outline-info:hover,
#services-container .btn-outline-info:hover,
.service-card .btn-outline-info:hover,
.card-footer .btn-outline-info:hover {
    color: white !important;
    background-color: var(--text-color) !important;
    border-color: var(--text-color) !important;
}

/* Estilo para los botones de llamar y email en las tarjetas de servicios */
a[href^="tel:"].btn,
a[href^="mailto:"].btn,
a[href^="http"].btn {
    margin-right: 5px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

/* Botones Llamar específicos */
.btn-llamar {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

.btn-llamar:hover {
    color: white !important;
    background-color: var(--primary-color) !important;
}

/* Botones Email específicos */
.btn-email {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    background-color: transparent !important;
}

.btn-email:hover {
    color: white !important;
    background-color: var(--secondary-color) !important;
}

/* Botones Sitio web específicos */
.btn-sitio-web {
    color: var(--text-color) !important;
    border-color: var(--text-color) !important;
    background-color: transparent !important;
}

.btn-sitio-web:hover {
    color: white !important;
    background-color: var(--text-color) !important;
}