/*
    Copyright (C) 2025 Consenso and Tania Karo Mesa Montórfano

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

*/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* Importar la fuente Lora desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');


:root {
    --font-family-headings: "Lora", serif;
    --font-weight-headings: 900;
    --font-family-body: "Lora", serif;
    --font-weight-body: 400;
    --font-size-body-offset: 1px;
}

.robot {
    font-family: 'Fira Code', monospace !important;
}

body {
    padding: 20px;
    margin: 0; /* Elimina margen global */
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-body);
    font-size: calc(1rem + var(--font-size-body-offset));
}

p {
    margin: 10px 0;
    padding: 5px;
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-body);
    font-size: calc(1rem + var(--font-size-body-offset));
    color: rgb(54, 55, 55);
}

h1, h2, h3, h4, h5, h6 {
    margin: 15px 0;
    padding: 5px;
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-headings);
    color: rgb(54, 55, 55);
}

#bajada {
    font-family: var(--font-family-headings);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: rgb(134, 135, 135);
}

#creditos {
    font-family: var(--font-family-headings);
    font-weight: 700;
    font-size: 24.75px;
    line-height: 28.71px;
    color: rgb(54, 55, 55);
}

.responsive-img {
    width: 600px; /* Tamaño por defecto */
    max-width: 100%; /* Permite que se haga más pequeña en móviles */
    height: auto; /* Mantiene la proporción */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Asegura que las imágenes queden centradas */
}
  
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

td {
    padding: 10px;
    text-align: left;
    font-size: 16px;
    font-family:'Fira Code', monospace;
    border: 1px solid #ddd; /* Borde sutil */
}

.boton, .boton1 {
    font-weight: bold; /* Hace el texto más legible */
    padding: 12px 24px; /* Un poco más de padding para mejor apariencia */
    font-size: 16px; 
    border-radius: 8px; /* Bordes más suaves */
    text-decoration: none; 
    display: inline-block;
    transition: all 0.3s ease-in-out; /* Suaviza los cambios */
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15); /* Sombra sutil */
}

/* Botón azul */
.boton {
    background-color: #0b3954;
    color: white;
    border: 2px solid #0b3954; /* Agrega un borde sólido */
}

.boton:hover {
    background-color: #082c43;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.25); /* Sombra más pronunciada al pasar el mouse */
}

/* Botón blanco con borde azul */
.boton1 {
    background-color: white;
    color: #0b3954;
    border: 2px solid #0b3954; 
}

.boton1:hover {
    background-color: #0b3954;
    color: white;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.25);
}

.logo {
    text-align: center;
}

hr {
    color:#a8a8a8;
}

#subtitulo {
    color: #4A4A4A;
}

.custom-div-icon i {
    font-size: 2rem;  
    color: #0b3954;  
    background-color: white;  
    padding: 10px;  
    border-radius: 50%;  
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
}

.custom-div-icon.selected i {
    background-color: #0b3954;
    color: white !important;
}

#map { 
    height: 70vh;
    width: 100%;
    max-width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
}

@media (max-width: 768px) {
    #map {
        width: 95vw; /* Usa un poco menos que 100vw */
        max-width: 100%;
        height: 80vh; 
        margin: 0 auto; /* Centra el mapa */
        border-radius: 0;
    }
}

.contenido {
    max-width: 750px; /* Ajusta según preferencia */
    width: 90%; /* En móviles usa casi todo el ancho */
    margin: 0 auto; /* Centra el contenido */
}

/* En pantallas grandes, aumenta el ancho máximo */
@media (min-width: 1024px) {
    .container {
        max-width: 1000px;
        width: 70%; /* Reduce el ancho relativo */
    }
}

.leaflet-sidebar-pane.active .leaflet-sidebar-header {
    background-color: #0b3954;
    color: #fff;
}

/* !!!!!!!! ICONS */
.tabs i {
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
    font-size: 24px; 
}

.leaflet-sidebar-tabs > li,
.leaflet-sidebar-tabs > ul > li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px; 
    height: 40px;
}

.leaflet-sidebar-tabs > li i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    padding: 5px;
}

.leaflet-sidebar-tabs > li.active,
.leaflet-sidebar-tabs > ul > li.active {
    background-color: #0b3954 !important; 
    color: #fff !important; 
}

.leaflet-sidebar-tabs > li.active i {
    background-color: #0b3954 !important;
    color: #fff !important;
    border-radius: 5px;
    padding: 5px;
}

@media (max-width: 768px) {
    .leaflet-sidebar {
        max-width: 50vw !important;
        transition: transform 0.3s ease-in-out; 
    }
}