/* core/static/css/custom.css */

/* Color azul oscuro del logo */
:root {
    --serca-dark-blue: #1b3d5b; /* Ajusta este color si es necesario */
    --serca-orange: #f28b00;    /* Ajusta este color si es necesario */
}

/* Estilo para el navbar */
.navbar.navbar-light.bg-light {
    background-color: var(--serca-dark-blue) !important; /* Fondo del navbar */
    border-bottom: 3px solid var(--serca-orange); /* Borde inferior para destacar */
}

/* Estilo para los enlaces del navbar */
.navbar-nav .nav-link {
    color: white !important; /* Texto blanco para contraste */
    transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--serca-orange) !important; /* Color naranja al pasar el ratón o estar activo */
}

/* Estilo para el botón del toggler en móviles */
.navbar-toggler {
    border-color: var(--serca-orange); /* Borde naranja para el botón */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f28b00' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; /* Icono del toggler naranja */
}

/* Estilo para el texto del dropdown de usuario (si es necesario) */
.navbar-nav .dropdown-menu {
    background-color: var(--serca-dark-blue); /* Fondo del menú desplegable */
    border: none;
}

.navbar-nav .dropdown-item {
    color: white !important;
}

.navbar-nav .dropdown-item:hover {
    background-color: var(--serca-orange) !important;
    color: var(--serca-dark-blue) !important;
}

.navbar-nav .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.2);
}

/* Estilo para el botón flotante de WhatsApp */
.whatsapp-button-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366; /* Color verde de WhatsApp */
    color: #fff;
    border-radius: 50%; /* Borde circular */
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4); /* Sombra para efecto 3D */
    z-index: 100; /* Asegura que esté por encima de otros elementos */
    display: flex; /* Centra el ícono */
    align-items: center;
    justify-content: center;
}

.whatsapp-button-float .fa-whatsapp {
    margin-top: 0;
}

/* Opcional: animación al pasar el ratón */
.whatsapp-button-float:hover {
    background-color: #128c7e; /* Un verde más oscuro al pasar el ratón */
    text-decoration: none;
    color: #fff;
}

.btn-custom-orange {
    background-color: var(--serca-orange);
    color: white;
    border: 1px solid var(--serca-orange);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-custom-orange:hover {
    background-color: #d97900; /* Un poco más oscuro que serca-orange */
    color: white;
    border-color: #d97900;
    transform: translateY(-2px); /* Efecto de levantamiento */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Estilo para el botón azul personalizado */
.btn-custom-dark-blue {
    background-color: var(--serca-dark-blue);
    color: white;
    border: 1px solid var(--serca-dark-blue);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-custom-dark-blue:hover {
    background-color: #2c5b8a; /* Un azul más claro para el hover */
    color: white;
    border-color: #2c5b8a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-border-orange {
    border-color: var(--serca-orange) !important;
    border-width: 2px;
}

/* Para la imagen de la tarjeta de servicio */
.service-card-img {
    height: 200px; /* Altura fija para estandarizar */
    width: 100%;   /* Ocupa todo el ancho de su columna */
    object-fit: cover; /* Asegura que la imagen cubra el área sin deformarse */
}

/* Para asegurar que el texto dentro de la tarjeta-enlace se vea bien */
.card-link-wrapper,
.card-link-wrapper:hover {
    color: inherit;
    text-decoration: none;
}