/**
@file public/css/index.css
@version 1.0.0

@description
Estilos asociados a componentes o vistas.
Este archivo forma parte del proyecto "Plataforma de Monitoreo Ambiental IoT",
desarrollado por Geotrends - Geographic and Data Analytics, en colaboración con el Área Metropolitana
del Valle de Aburrá y la Universidad de San Buenaventura en el marco del Convenio 273 de 2024.

⚖️ Propiedad Intelectual:
Este software es propiedad intelectual compartida según el Convenio 273 de 2024.

📌 Entidades involucradas:
- Geotrends - Geographic and Data Analytics
- Área Metropolitana del Valle de Aburrá
- Universidad de San Buenaventura

👨‍💻 Equipo de desarrollo:
- Jonathan Ochoa Villegas (Geotrends)
- Diego Murillo Gómez (USB)
- Camilo Herrera Arcila (Geotrends)

📅 Creación: Noviembre 2024
📅 Actualización: 30-03-2025

📜 Licencia: MIT License

© 2025 Geotrends. Todos los derechos reservados.
 */

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}

.container {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    background-color: rgb(230, 230, 230);
}

/* Menu Base Styles */
.menu {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 250px; /* Ancho inicial */
    height: 100vh;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    transition: flex 0.3s, width 0.3s; /* Animación para contracción */
    overflow: hidden;
}

.menu.menu-collapsed {
    flex: 0 0 60px; /* Ancho reducido */
}

.menu-toggle {
    background: none;
    border: none;
    padding: 10px;
    margin: 10px;
    font-size: 20px;
    cursor: pointer;
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 10px 10px;
    margin: 5px 10px;
    border-radius: 20px;
    color: black;
    transition: background-color 0.3s;
    position: relative; /* Para ubicar correctamente el tooltip */
}

.menu-item i {
    margin-right: 12px;
    font-size: 18px;
}

.menu-item span {
    white-space: nowrap; /* Evita que el texto se corte */
    overflow: hidden;
    text-overflow: ellipsis; /* Muestra "..." si el texto es muy largo */
    transition: opacity 0.3s; /* Animación para la opacidad */
}

.menu-collapsed .menu-item span {
    opacity: 0; /* Oculta el texto al contraer el menú */
    pointer-events: none;
}

.menu-item:not(.menu-item-selected):hover {
    background-color: lightgray;
    cursor: pointer;
}

.menu-item-selected {
    background-color: #82cc19;
    color: white;
    font-weight: bold;
}

.menu-item-blocked {
    color: rgb(192, 192, 192);
    pointer-events: none;
    display: flex;
    align-items: center;
    padding: 10px 10px;
    margin: 5px 10px;
    border-radius: 20px;
    transition: background-color 0.3s;
    position: relative;
}

.menu-divider {
    border: 1px solid lightgray;
    margin: 10px;
}

/* Imagen antes de "Casa" */
.menu-header-image {
    margin: 10px auto;
    display: block;
    width: 80%; /* Ajusta el tamaño según sea necesario */
    height: auto; /* Mantener proporción */
}

/* Imagen del footer */
.menu-footer-image {
    position: absolute;
    margin: auto;
    display: block;
    width: 70%; /* Ajusta el tamaño según sea necesario */
    height: auto; /* Mantener proporción */
    border-radius: 10px; /* Opcional: Añadir bordes redondeados */
    position: absolute; /* Fijar la posición en el footer del menú */
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.menu-collapsed .menu-header-image,
.menu-collapsed .menu-footer-image {
    display: none;
}

/* Responsiveness */
@media (max-width: 1000px) {
    .menu {
        flex: 0 0 60px; /* Menú siempre contraído en pantallas pequeñas */
    }

    .menu-item span {
        opacity: 0;
        pointer-events: none;
    }

    .menu-header-image {
        display: none;
    }

    .menu-footer-image {
        display: none;
    }

    .menu-toggle {
        display: none;
    }
}

.content {
    flex: 1; /* Toma el resto del espacio disponible */
    margin: 10px; /* Margen de 10px en todos los lados */
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box; /* Incluye los márgenes en el cálculo del tamaño */
    height: calc(100% - 20px); /* Reduce la altura para respetar el margen superior e inferior */
    border-radius: 10px;
    /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);*/
}


.header-image {
    position: relative;
    display: flex;
    align-items: center; justify-content: left;
    top: 0px; left: 0px;
    width: 100%; height: 400px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0)), 
                url('/images/panoramica1.jpg'); /* Gradiente + imagen de fondo */
    background-size: cover; /* Ajusta la imagen para cubrir todo el contenedor */
    background-position: center; /* Centra la imagen dentro del contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.header-image-text {
    margin-left: 40px; /* Asegura que no haya márgenes extras en el texto */
    font-size: 36px; /* Tamaño del texto */
    width: 500px;
    font-weight: bold; /* Negrita */
    color: white;
}

.info-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten automáticamente */
    top: -60px;
    gap: 20px; /* Espaciado uniforme entre elementos */
    width: 85%;
    margin: auto;
    padding: 20px;
    border-radius: 20px;
    background-color: #09202e;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

.info-bar .item {
    flex: 1 1 calc(33.333% - 50px); /* Ajusta el ancho relativo de los elementos */
    display: flex;
    flex-direction: column; /* Contenido apilado */
    align-items: flex-start; /* Alinea el contenido al inicio */
    justify-content: center;
    min-width: 100px; /* Evita que los elementos se reduzcan demasiado */
    background-color: rgba(255, 255, 255, 0.1); /* Fondo translúcido */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease; /* Efecto visual al pasar el mouse */
}

.info-bar .item:hover {
    transform: scale(1.01); /* Escala el elemento ligeramente al pasar el mouse */
}

.info-bar .item .item-content {
    margin: 0;
}

.info-bar .item .item-title {
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 0.5em;
}

.info-bar .item .item-text {
    color: white;
    font-size: 1em;
    line-height: 1.5;
}

.info-bar .division {
    display: none; /* No necesario con este diseño */
}

/* Responsiveness */
@media (max-width: 1024px) {
    .info-bar .item {
        flex: 1 1 calc(50% - 20px); /* Dos elementos por fila en pantallas medianas */
    }
}

@media (max-width: 768px) {
    .info-bar {
        flex-direction: column; /* Cambia a disposición vertical */
    }

    .info-bar .item {
        flex: 1 1 100%; /* Cada elemento ocupa toda la fila */
    }
}



.container-1 {
    padding: 0px 4em 2em 4em;
}

.content-1 {
    display: flex;
    flex-direction: row;
    align-items: center; /* Centra verticalmente los elementos */
    justify-content: space-between; /* Distribuye los elementos horizontalmente */
    gap: 30px; /* Espaciado entre imagen y texto */
    width: 100%;
    padding-bottom: 2em;
    box-sizing: border-box;
    flex-wrap: wrap; /* Permite que los elementos se ajusten automáticamente en filas */
}

.content-1 .image {
    display: flex;
    align-items: center; /* Centra verticalmente el contenido dentro de la imagen */
    justify-content: center;
    flex: 1 1 40%; /* Ajusta dinámicamente el ancho relativo de la imagen */
    max-width: 600px; /* Limita el ancho máximo de la imagen */
}

.content-1 .info {
    display: flex;
    flex-direction: column; /* Permite apilar elementos verticalmente */
    justify-content: center; /* Centra el texto verticalmente */
    flex: 1 1 45%; /* Ajusta dinámicamente el ancho relativo del texto */
    max-width: 100%;
}

.content-1 .info-content {
    margin: 0;
}

.content-1 .image-container {
    width: 100%;
    height: auto; /* Permite que la altura se ajuste dinámicamente */
    max-height: 300px; /* Limita la altura máxima */
    border-radius: 10px;
    overflow: hidden; /* Asegura que la imagen no se desborde */
}

.content-1 .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen para llenar el contenedor */
    display: block;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 30px;
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: white;
    background-color: #82cc19;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
    cursor: pointer;
    color: black;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

/* Responsiveness */
@media (max-width: 1024px) {
    .content-1 {
        flex-direction: column; /* Apila los elementos verticalmente */
        gap: 20px; /* Reduce el espaciado entre elementos */
    }

    .content-1 .image,
    .content-1 .info {
        flex: 1 1 100%; /* Ocupan el 100% del ancho disponible */
        max-width: none; /* Elimina límites de ancho */
    }
}

@media (max-width: 768px) {
    .container-1 {
        padding: 0px 2em 1em 2em; /* Reduce los márgenes laterales */
    }

    .content-1 .image-container {
        max-height: 250px; /* Reduce la altura máxima de la imagen */
    }

    .btn {
        font-size: 0.9em; /* Ajusta el tamaño del texto del botón */
    }
}

@media (max-width: 480px) {
    .container-1 {
        padding: 0px 1em 1em 1em; /* Reduce los márgenes para pantallas muy pequeñas */
    }

    .content-1 .image-container {
        max-height: 200px; /* Limita aún más la altura de la imagen */
    }

    .btn {
        font-size: 0.8em; /* Reduce el tamaño del texto del botón */
        padding-left: 15px;
        padding-right: 15px;
    }
}



.icon-section {
    text-align: center;
    width: 100%;
    background-color: rgba(129, 204, 25, 0.1); /* Color verde claro */
    padding: 2em 4em;
    box-sizing: border-box;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2);
}

.section-header {
    margin-bottom: 20px;
}

.section-header .line {
    width: 100px;
    height: 5px;
    background-color: #82cc19; /* Verde principal */
    margin: 0 auto;
    border-radius: 5px;
}

.section-header h3 {
    color: #82cc19;
    font-weight: bold;
    margin-top: 10px;
}

.icon-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
}

.icon-circle {
    width: 100px;
    height: 100px;
    perspective: 1000px; /* Profundidad para el efecto 3D */
}

.flip-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
}

.icon-circle:hover .flip-card {
    transform: rotateY(180deg); /* Gira al pasar el mouse */
}

.flip-card-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #82cc19; /* Verde principal */
    color: white;
    font-size: 32px;
}

.flip-card-back {
    background-color: #ffffff; /* Fondo blanco para la imagen */
    transform: rotateY(180deg); /* Oculta la cara trasera inicialmente */
    overflow: hidden;
}

.flip-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.icon-text {
    color: #555555; /* Texto oscuro */
    text-align: center;
    font-weight: 500;
}

.footer {
    background-color: #09202e;
    color: white;
    padding: 2em 4em;
    text-align: center;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2);
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2em;
}

.footer-section {
    flex: 1;
    min-width: 250px;
}

.footer-section h3 {
    font-weight: bold;
    margin-bottom: 1em;
}

.footer-section p, .footer-section ul {
    margin: 0;
    line-height: 1.5;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 0.5em;
}

.footer-socials a {
    color: white;
    margin: 0 0.5em;
    font-size: 1.5em;
    transition: color 0.3s;
}

.footer-socials a:hover {
    color: black;
}

.footer-bottom {
    margin-top: 2em;
    font-size: 0.875em;
}


/* Call to Action Section */
.call-to-action {
    background-color: white;
    padding: 4em 2em;
    text-align: center;
    border-top: 1px solid #ddd;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.cta-text h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 0.5em;
}

.cta-text p {
    color: #555;
    font-size: 1em;
    line-height: 1.6;
}

.cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    width: 100%;
}

.cta-item {
    background-color: #f9f9f9;
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.cta-item i {
    font-size: 2.5em;
    color: #82cc19;
    margin-bottom: 1em;
}

.cta-item h3 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 0.5em;
}

.cta-item p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
}

.cta-button .btn {
    display: inline-block;
    padding: 0.8em 1.5em;
    border-radius: 25px;
    color: white;
    background-color: #82cc19;
    font-size: 1em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.cta-button .btn:hover {
    background-color: #6aaa17;
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .cta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-text h2 {
        font-size: 1.8em;
    }
}

@media (max-width: 768px) {
    .cta-grid {
        grid-template-columns: 1fr;
    }

    .cta-text h2 {
        font-size: 1.5em;
    }
}

.menu-item::after {
    content: attr(data-tooltip);
    position: fixed; /* Fijo respecto al viewport */
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999; /* Máxima prioridad */
    left: calc(60px + 10px); /* Ajuste para que aparezca a la derecha del menú lateral */
    transform: translateY(-50%);
}

.menu-item:hover::after {
    opacity: 1;
}

/* Triángulo a la izquierda del tooltip */
.menu-item::before {
    content: '';
    position: fixed; /* Fijo respecto al viewport */
    border-width: 5px;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 9999;
    left: calc(60px + 1px); /* Justo al borde derecho del menú lateral */
    transform: translateY(-50%);
}

.menu-item:hover::before {
    opacity: 1;
}

/* Posición vertical dinámica */
.menu-item:hover::after,
.menu-item:hover::before {
    top: var(--tooltip-top, 0px); /* Variable dinámica que ajustaremos con JS */
}