/* --- Global Resets y Base --- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%; /* Asegura que el HTML y el BODY ocupen el 100% del ancho */
    overflow-x: hidden; /* Evita el scroll horizontal no deseado */
    box-sizing: border-box; /* Incluye padding y border en el ancho/alto total de los elementos */
    font-family: Arial, sans-serif;
    background-color: #f5f5f5; /* Color de fondo general del cuerpo */
    /* Las propiedades justify-content y align-items en el body no son típicas a menos que el body sea un flex/grid container específico.
       En tu caso, el body contiene bloques, por lo que estas líneas se pueden eliminar o mover a un contenedor flexbox/grid si se usan para diseño principal.
       Si quieres centrar el contenido, lo haremos a nivel de section/div, no en el body directamente. */
}

/* --- Header --- */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px; /* Espaciado interno */
    background-color: #005f73; /* Fondo azul oscuro */
    color: white;
    /* Las propiedades 'padding: 20px;' y 'text-align: center;' ya están cubiertas por las anteriores, pero si quieres más padding general, puedes dejar 20px.
       'border-bottom: 2px solid #ddd;' fue sobrescrito por el background-color. */
    border-bottom: 2px solid #ddd; /* Si quieres la línea inferior, asegúrate de que sea visible */
    text-align: center; /* Para centrar los textos dentro del header si flex-direction es column */
}

header h1, header h3 {
    margin: 0; /* Elimina márgenes predeterminados de los encabezados dentro del header */
    padding: 5px 0; /* Pequeño padding vertical para los textos */
}

.logo img {
    max-height: 75px;
    width: auto;
}

/* --- Navegación --- */
nav {
    background-color: #0a9396; /* Fondo azul más claro */
    display: flex;
    justify-content: center;
    padding: 10px 0;
    width: 100%; /* Asegura que la nav ocupe todo el ancho */
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

/* --- Secciones de Contenido --- */
section {
    padding: 20px;
    /* margin: 20px auto; Esto centra el contenido y le da un margen fijo. */
    /* max-width: 800px; Esto limita el ancho de la sección. */
    /* Para que ocupe todo el ancho y se adapte, haremos lo siguiente: */
    width: 90%; /* Un porcentaje para que tenga un margen lateral en pantallas grandes, pero no un ancho fijo */
    max-width: 1200px; /* Un máximo para que no se extienda demasiado en pantallas muy grandes */
    margin: 20px auto; /* Esto ahora centrará tu contenido dentro de ese 90%/1200px */
    background: rgb(175, 216, 243);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Ajustes específicos para la sección del mapa si necesitas que sea de borde a borde */
#proyectos { /* La sección que contiene tu mapa */
    width: 90%; /* Ocupa el 90% del ancho de la pantalla */
    max-width: 1200px; /* Límite para pantallas muy grandes */
    margin: 20px auto; /* Centra la sección y le da margen superior/inferior */
    padding: 20px; /* Padding interno para que el mapa no se pegue a los bordes de la sección */
    background: rgb(175, 216, 243); /* Mantén el fondo de la sección */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


 #mapjs {
     width: 100%; /* Ocupará el 100% del ANCHO de su padre (#proyectos) */
    height: 100vh; /* O la altura que desees */
    /* Elimina el margin: 0 auto; de #mapjs si el padre ya está centrado y tiene padding */
    margin: 0; /* Asegúrate de que no haya margen interno en el mapa */
    border: 2px solid rgb(15, 70, 223);
    position: relative;
    box-sizing: border-box;
}

/* Asegura que el div del mapa dentro de la sección #proyectos ocupe todo el espacio */



/* --- Hero Section --- */
.hero {
    text-align: center;
    background-image: url('./img/DJI_80572.JPG');
    background-size: cover;
    background-position: center; /* Centra la imagen de fondo */
    opacity: 0.9;
    color: white;
    padding: 200px 20px;
    width: 100%; /* Asegura que el hero ocupe todo el ancho */
}

.hero h1 {
    margin: 0;
    font-size: 2.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* --- Botones de Contacto --- */
.contenedor-botones {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0; /* Añade padding para separar del contenido */
    /* Si quieres que los botones ocupen todo el ancho y se adapten, podrías hacer esto: */
    width: 100%;
    flex-wrap: wrap; /* Permite que los botones se envuelvan a la siguiente línea en pantallas pequeñas */
}

/* Ajusta los contenedores individuales de cada botón para que el display flex dentro de ellos no afecte el contenedor principal de botones */
.contenedor-linkedin,
.contenedor-whatsapp {
    display: block; /* Vuelve a ser un bloque normal */
    height: auto; /* No necesitas una altura fija aquí */
}

.boton-linkedin,
.boton-whatsapp,
.boton-gmail {
    display: inline-flex; /* Usa inline-flex para que el ícono y texto estén alineados y el botón se ajuste a su contenido */
    align-items: center; /* Centra verticalmente el contenido del botón */
    justify-content: center; /* Centra horizontalmente el contenido del botón */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    white-space: nowrap; /* Evita que el texto del botón se rompa en varias líneas */
    color: white;
}

.boton-linkedin { background-color: #0e76a8; }
.boton-linkedin:hover { background-color: #005682; }

.boton-whatsapp { background-color: #25d366; }
.boton-whatsapp:hover { background-color: #1ebe57; }

.boton-gmail { background-color: #D44638; }
.boton-gmail:hover { background-color: #a7352c; }

.boton-linkedin i,
.boton-whatsapp i,
.boton-gmail i {
    font-size: 20px;
}

/* --- Clientes (Tabla de Imágenes) --- */
#Clientes table {
    width: 90%; /* Ocupa el 90% del ancho de su contenedor de sección */
    max-width: 1200px; /* Igual que las secciones */
    margin: 0 auto; /* Centra la tabla dentro de la sección */
    border-collapse: collapse;
}

#Clientes img {
    width: 100%; /* Hace que las imágenes ocupen el 100% del ancho de su celda */
    max-width: 200px; /* Limita el tamaño máximo individual de cada imagen */
    height: auto;
    display: block;
    margin: 0 auto; /* Centra la imagen dentro de la celda */
}

/* --- Footer --- */
footer {
    background-color: #005f73;
    color: white;
    text-align: center;
    padding: 15px 0; /* Ajusta el padding para una mejor visibilidad */
    width: 100%;
    /* Remueve position: fixed; bottom: 0; height: 6%;
       Esto hace que el footer se superponga al contenido si la página no es lo suficientemente larga.
       Si quieres un footer pegado al fondo sin importar el contenido, considera 'sticky footer' con flexbox en el body o una solución JS.
       Para la mayoría de los casos, un footer estático al final del contenido es preferible. */
    position: relative; /* O simplemente elimínalo si quieres que fluya con el contenido */
    bottom: auto;
    height: auto;
}

/* --- Media Queries (Responsiveness) --- */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    header {
        flex-direction: column; /* Apila el logo y los títulos */
        padding: 10px;
    }
    nav {
        flex-wrap: wrap; /* Permite que los enlaces de navegación se envuelvan */
        padding: 10px;
    }
    nav a {
        margin: 5px 10px; /* Ajusta el margen para enlaces en pantallas pequeñas */
    }
    section {
        width: 95%; /* Las secciones ocupan más ancho en pantallas pequeñas */
        padding: 15px;
        margin: 15px auto;
    }
    .hero {
        padding: 100px 10px; /* Reduce el padding para el hero en pantallas pequeñas */
    }
    .hero h1 {
        font-size: 1.8em;
    }
    .contenedor-botones {
        flex-direction: column; /* Apila los botones de contacto en pantallas pequeñas */
        align-items: center; /* Centra los botones apilados */
    }
    .boton-linkedin,
    .boton-whatsapp,
    .boton-gmail {
        width: 80%; /* Los botones ocupan más ancho en pantallas pequeñas */
        max-width: 250px; /* Para que no sean demasiado grandes */
    }
    /* La tabla de clientes ya tiene max-width: 100% en la imagen,
       pero podrías ajustar la tabla si las imágenes son muy pequeñas o grandes */
    #Clientes table {
        width: 95%; /* La tabla de clientes también se expande un poco más */
    }
      #mapjs {
       height: 60vh; /* Ocupa el 60% de la altura del viewport */
    }
     #legend, .coordinates {
        display: none;
     }
      /* Ajustar la posición de otros controles si es necesario */
    .ol-layerswitcher {
        /* Puedes ajustar su posición, o si es un control complejo, también ocultarlo */
        top: 0.5em; /* Un poco más cerca de la parte superior */
        right: auto; /* Desactivar posicionamiento de la derecha */
        left: 0.5em; /* Moverlo a la izquierda */
        max-height: 50vh; /* Limitar la altura para que no se desborde si tiene muchas capas */
        overflow-y: auto; /* Permitir scroll si hay muchas capas */
    }

    .zoom-extent, .proy-ol-full-screen, .rotacion-norte {
        /* Si estos se superponen, puedes ajustar su 'top' o 'left' */
        /* Ejemplo: */
        top: auto; /* Desactivar el top fijo */
        bottom: 10px; /* Anclarlos a la parte inferior si hay espacio */
        left: 10px;
    }
    .proy-ol-full-screen {
        left: 60px; /* Mover el segundo botón un poco para que no se superponga */
    }
    .rotacion-norte {
        left: 110px; /* Mover el tercer botón */
    }

    /* Si usas la API de IGN, sus controles también pueden necesitar ajustes */
    /* Por ejemplo, sus toolbars o paneles de plugins */
    .ign-api-toolbar { /* Si existe esta clase en la toolbar principal */
        flex-wrap: wrap; /* Permitir que los botones se envuelvan */
         max-width: 100%;
        overflow-x: auto;
          overflow-x: auto;
    white-space: nowrap;
    }
}

/* --- Otros Estilos (Manteniéndolos de tu CSS) --- */
main { /* Asegúrate de que esto se use si tienes un tag <main> en tu HTML */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.ol-layerswitcher li span {
    color: rgb(47, 0, 255);
}
.ol-layerswitcher {
    font-family: Arial, sans-serif;
    font-size: 12px;
}
.texto {
    line-height: 1.8;
    font-size: 16px;
}
.botones { /* Este selector parece ser genérico y no está en uso con tus botones específicos */
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}
.botones:hover {
    background-color: #0056b3;
}
.center-text-vertical-horizontal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    border: 1px solid black;
}
.zoom-extent {
    left:0.5em;
    top: 3.5em;
}
.proy-ol-full-screen{
    left:0.5em;
    top: 5em;
}
.rotacion-norte{
    top: 7.2em;
    left: 0.5em
}
.layer-control{
    position: absolute;
    background-color: rgb(60, 236, 248);
    padding: 10px;
    z-index: 1000;
}
.coordinates{
    position: relative;
    top: 20px;
    right: 0.5em;
    border-radius: 5px;
    background-color: rgba(60, 236, 248, 0.8);
    border: 2px solid #333;
    padding: 8px;
    font-size: 12px;
    z-index: 1000;
    font-family:'Verdana'
}
#tools{
    position: absolute;
    top: 1rem;
    right: 1rem;
}
#tools a{
    display: inline-block;
    padding: 0.5rem;
    background-color: rgb(218, 108, 108);
    color: rgb(89, 204, 44);
    cursor: pointer;
}
#legend{
    position: absolute;
    top:20em;
    right: 10px;
    background-color: rgba(220, 230, 85, 0.8);
    border: 2px solid #333;
    padding: 2px;
    border-radius: 15px;
    max-width: 200px;
    font-size: 12px;
    z-index: 1000;
    font-family:'Verdana'
}
.legend-item{
    display:flex;
    align-items: center;
    margin-bottom: 5px;
}
.legend-symbol{
    width: 20px;
    height: 20px;
    margin-right: 8px;
}
.ol-popup {
    background-color: white;
    border: 1px solid black;
    padding: 10px;
    position: absolute;
    min-width: 200px;
    max-width: 300px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}
.ol-popup:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: white;
    border: 1px solid black;
    transform: rotate(45deg);
    pointer-events: none;
    top: -5px;
    left: 50%;
    margin-left: -5px;
}
.posicion-raton {
    font-size: 12px;
    background-color: rgb(111, 201, 236);
    padding: 1px;
    border-radius: 5px;
    border: 1.5px solid var(--ol-background-color);
    bottom: 25px;
    right: 1px;
    position: relative;
}