/* vecon/static/css/estilos.css */

.imagen-corporativa {
    max-width: 40%; /* Ajusta el ancho máximo de la imagen */
    height: auto;   /* Mantiene la proporción */
    margin-bottom: 2rem; /* Espacio inferior */
}

/* Opcional: para que las imágenes del carrusel no sean excesivamente altas */
.carousel-img {
    max-height: 500px; /* Ajusta esta altura según tu preferencia */
    object-fit: contain; /* Para que la imagen se ajuste sin recortarse */
    width: 100%;
}

/* vecon/static/css/estilos.css */

.mapa-container {
    width: 80%;
    overflow: hidden;
    position: relative;

    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0;
}

.mapa-container {
    width: 100%;
    margin-left: auto; /* Mueve el margen izquierdo automáticamente */
    margin-right: auto; /* Mueve el margen derecho automáticamente */
    /* O usar la forma abreviada: margin: 0 auto; */
    
    /* Para centrar el iframe internamente, usa flexbox */
    display: flex;
    justify-content: center;
}

.sombra-texto {
    color: #333; /* El color principal del texto, si lo deseas */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Cambia el color del icono (las flechas) a negro */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1); /* Invierte el color del icono de blanco a negro */
}

/* Para uniformar el tamaño de las imágenes en las cards */
.card-img-container {
    width: 100%;
    height: 180px; /* Ajusta esta altura si es necesario */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* Para uniformar el tamaño de las cards, limitando la descripción */
.card-body {
    height: 220px; /* Altura fija para el cuerpo de la card. Ajusta este valor si es necesario. */
    overflow: hidden; /* Oculta cualquier texto que se salga del contenedor */
}

/* Opcional: para mostrar puntos suspensivos (...) si el texto es muy largo */
.card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Muestra un máximo de 3 líneas de texto */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carousel-control-prev {
  left: -10%; /* Ajusta el valor para mover el botón hacia la izquierda */
}

.carousel-control-next {
  right: -10%; /* Ajusta el valor para mover el botón hacia la derecha */
}

.social-buttons-container {
    position: fixed; /* Mantiene los botones en una posición fija en la pantalla */
    top: 50%; /* Los alinea verticalmente al centro */
    right: 20px; /* Coloca los botones a 20px del borde derecho */
    transform: translateY(-50%); /* Ajuste para un centrado perfecto */
    z-index: 1000; /* Asegura que los botones estén por encima de otros elementos */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacio entre los botones */
}

.social-btn {
    width: 50px; /* Tamaño de los botones */
    height: 50px;
    border-radius: 10px; /* Bordes redondeados */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
    transition: transform 0.2s;
}

.social-btn:hover {
    transform: scale(1.1); /* Efecto al pasar el mouse */
}

.social-btn img {
    width: 30px; /* Tamaño de los iconos dentro de los botones */
    height: 30px;
}

/* Colores de fondo para cada botón */
.facebook {
    background-color: #3b5998;
}

.whatsapp {
    background-color: #25d366;
}

.email {
    background-color: #dd4b39;
}

.instagram {
    background-color: #e1306c;
}

/* Contenedor de la imagen para posicionar el logo */
.card-img-container {
    position: relative; /* Esencial para el posicionamiento absoluto del logo */
    overflow: hidden;   /* Oculta cualquier parte del logo o imagen que se desborde */
    height: 200px;      /* Altura fija para el contenedor de la imagen, ajusta si es necesario */
    display: flex;      /* Ayuda a que la imagen principal se centre si es más pequeña */
    justify-content: center; /* Centra horizontalmente la imagen del producto */
    align-items: center;     /* Centra verticalmente la imagen del producto */
}

/* Imagen principal del producto */
.card-img-top {
    width: 100%;       /* Asegura que la imagen ocupe todo el ancho disponible */
    height: 100%;      /* Asegura que la imagen ocupe toda la altura disponible */
    object-fit: cover; /* Recorta la imagen para que cubra el área sin distorsionarse */
}

/* El logo de la compañía */
.company-logo {
    position: absolute; /* Permite colocarlo libremente */
    top: 5px !important;    /* Ajusta la distancia desde arriba, usa !important si no funciona */
    right: 5px !important;  /* Ajusta la distancia desde la derecha, usa !important si no funciona */
    width: 25px !important; /* REDUCIMOS MÁS EL TAMAÑO, usa !important si no funciona */
    height: auto !important; /* Mantiene la proporción, usa !important si no funciona */
    z-index: 100;       /* Asegura que esté por encima de todo lo demás */
    border-radius: 3px; /* Bordes ligeramente redondeados */
    box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Opcional: una pequeña sombra para que resalte */
}

/* Contenedor de la imagen para posicionar el logo */
.card-img-container2 {
    position: relative; 
    overflow: hidden; 
    height: 150px; /* **Altura fija:** ajusta este valor para controlar el tamaño vertical de la imagen */
}

/* Imagen principal del producto */
.card-img-top2 {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ajusta la imagen sin recortarla */
}

/* El logo de la compañía */
.company-logo2 {
    position: absolute;  /* Permite colocarlo libremente */
    top: 5px;            /* Distancia desde arriba */
    right: 5px;          /* Distancia desde la derecha */
    width: 25px;         /* Tamaño del logo */
    height: auto;
    z-index: 10;         /* Asegura que esté por encima de la imagen del producto */
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Opcional: una pequeña sombra */
}

body {
    background-image: url('../images/fondoVecon.jpg'); /* Adjust the path to your image */
    background-size: cover; /* This makes the image cover the entire body */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: fixed; /* Keeps the background image in place when the user scrolls */
}
.titulo-destacado {
    color: #fffffe; /* Un amarillo/dorado, similar al color de advertencia de Bootstrap */
}


/* BARRA LATERAL DASHBOARD */
/* Sidebar visible por defecto en pantallas grandes */
#sidebar-wrapper {
    min-height: 100vh;
    margin-left: -15rem; /* Oculta la barra lateral fuera de la pantalla */
    transition: margin 0.25s ease-out;
}

#page-content-wrapper {
    min-width: 100vw;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0; /* Muestra la barra lateral en pantallas grandes (md o más) */
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem; /* Oculta la barra lateral cuando se hace clic en el botón de alternancia */
    }
}


/* Agrega un estilo para el estado 'toggled' del sidebar en móviles */
#sidebar-wrapper.toggled {
    margin-left: 0;
}