body {
            background: #f6f7f9;
        }

  

#app {
    height: 100vh;
}

/* MAPA */
#map 
{
    width: 100%;
    height: 60%;
}

/* PANEL DERECHO */
#rightPanel {
    width: 300px;
    background: #ffffff;
    border-left: 1px solid #ddd;
    padding: 1rem;
    transition: transform 0.3s ease;
}

/* BOTÓN FLOTANTE PANEL */
#togglePanelBtn {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1100;
    display: none;
}

/* MENU MAPA */
.map-top-left {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
}

.search-bar {
    position: absolute;
    top: 10px;
    left: 60px;
    right: 320px;
    z-index: 1000;
}

.search-result {
    display: none;
    width: 328px;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: var(--Spacing-2, 2px);
    background: var(--Neutral-White, #FFF);
    box-shadow: -2px 4px 13.3px 0px rgba(0, 0, 0, 0.20);
    position: fixed;
    top: 160px;
    left: 100px;
    z-index: 1000;
}

.search-result p {
    color: var(--Body-text-medium, #484848);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

@media (max-width: 1024px) {
    .search {
        display: none;
        margin: 10px;
    }

    .navigation-container {
        justify-content: space-between;
        width: 100%;
    }

    .search-mobile {
        display: flex;
    }

    .search-result {
        left: 0;
        margin: 10px;
        width: 100%;
    }
}

/* MOBILE */
@media (max-width: 768px) {
.search-bar {
        right: 60px;
    }
    #rightPanel {
        height: 50%;
    }

    #map {
        height: 50%;
    }
}

.leaflet-touch .leaflet-bar a {
    display: none;
}

/* Estilos */
       :root 
       {
            --brand: #7d2447;
           
        }

        .main-row {
            flex: 1;
            display: flex;
            gap: 0.75rem;
            padding: 1rem;
        }

        .sidebar {
            width: 360px;
            max-width: 42%;
            min-width: 280px;
        }

        .map-container {
            flex: 1;
            min-height: 70vh;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
        }

        /* Map needs explicit height */
        #map 
        {
            width: 100%;
            height: 85%;   /* control de la altura del mapa hay que corregir se sale del marco */
            min-height: 72vh;
        }



/* ===== FIX DROPDOWN HAMBURGUESA MOBILE ===== */
@media (max-width: 992px) {

    .map-top-left {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 3000; /* por encima del mapa y panel */
    }

    .dropdown-menu {
        z-index: 3100;
    }

    /* IMPORTANTE: permitir overflow visible SOLO aquí */
    .mapa {
        overflow: visible;
    }

}


/* ================= MOBILE FIXED SPLIT ================= */
@media (max-width: 992px) {

    .navbar {
        display: none;
    }

    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    #logo-puebla {
        width: 40%;
        height: 40%;
    }

    /* Contenedor principal */
    #app {
        display: flex;
        flex-direction: column;
        height: 100dvh; /* viewport real en mobile */
        overflow: hidden;
    }

    /* MAPA */
    .mapa {
        position: relative;
        width: 100%;
        height: 50dvh;
        flex: 0 0 auto;
        overflow: hidden;
    }

    #map {
        width: 100%;
        height: 80%;
    }

    /* PANEL DERECHO */
    #rightPanel {
        position: relative;
        width: 100%;
        height: 50dvh;
        flex: 0 0 auto;
        overflow-y: auto;
        overflow-x: hidden;
        background: #ffffff;
        -webkit-overflow-scrolling: touch;
    }

}



        /* Custom controls */
        .leaflet-control.custom-btn a {
            background: var(--brand);
            color: #fff;
            padding: 6px 8px;
            border-radius: 6px;
            display: inline-block;
            text-decoration: none;
        }

        .legend-item {
            display: flex;
            gap: .6rem;
            align-items: center;
            margin-bottom: .5rem;
        }

        .swatch {
            width: 22px;
            height: 14px;
            border-radius: 3px;
            display: inline-block;
        }

        .card-quiet {
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 0.75rem;
        }

        .btn-primary {
            background-color: #861943 !important;
            border: solid #861943;
        }

        #chkRisks, #chkIncidents{
            background-color: #7d2447;
            border: solid #861943;
        }
/* Fin Estilos */

.titulo-mapas{
  background-color: #7d2447;
  color: #fff;
  padding: 0.5rem 0.75rem;   /* altura natural */
  margin: 0;
  font-weight: 600;
  display: block;
  width: 100%;
  line-height: 1.2;
  border-radius: 0.25rem 0.25rem 0 0; /* opcional */
}

/* Acordion */
/* Estado cerrado */
.accordion-button.collapsed{
  background-color: #fff !important;
  color: #333 !important;
}

/* Estado abierto (expandido) */
.accordion-button:not(.collapsed){
  background-color: #eaf2ff !important; /* iluminado */
  color: #0b3d91 !important;
  font-weight: 600;
}

/* Opcional: transición suave */
.accordion-button{
  transition: background-color .15s ease, color .15s ease;
}

/*.accordion-button:not(.collapsed) {
    background-color: #ffffff !important;
    color: #000;
    
}*/

.form-control {
    width: 30%;
}

/* ================= RIGHT PANEL ================= */
#rightPanel {
    position: fixed;
    top: 116px;
    right: 0;
    width: 36%;
    min-width: 340px;
    height: 85vh;
    background: #ffffff;
    overflow-y: auto;           /* scroll interno */
    transition: transform .35s ease;
    z-index: 2000;
    box-shadow: -6px 0 18px rgba(0,0,0,.15);
}

/* PANEL OCULTO → SE DESLIZA A LA DERECHA */
#rightPanel.collapsed {
    transform: translateX(100%);
}

/* ================= BOTÓN TOGGLE ================= */
.panel-toggle {
    position: fixed;
    top: 117px;                 /* ajústalo según tu header */
    right: 36%;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 8px 0 0 8px;
    z-index: 3000;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: right .35s ease;
}

/* CUANDO EL PANEL SE OCULTA */
#rightPanel.collapsed + .panel-toggle,
.panel-collapsed .panel-toggle {
    right: 0;
}

@media (max-width: 1000px) {

#rightPanel {
        height: 50vh;
        max-height: 50vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* scroll fluido iOS */
    }s

    #togglePanel {
        display: none;
    }

    :root {
        --navbar-height: 90px; /* ajusta si tu navbar cambia */
    }

    #app {
        flex-direction: column;
        height: 100vh;
    }

    /* MAPA */
    .mapa {
        position: relative;
        width: 100%;
        height: calc(50vh - var(--navbar-height));
        margin-top: 0;
        flex: none;
    }

    #map {
        width: 100%;
        height: 100%;
    }

    /* PANEL DERECHO */
    #rightPanel {
        position: relative;
        top: 0;
        width: 100%;
        height: 50vh;
        overflow-y: auto;
        border-left: none;
        border-top: 1px solid #ddd;
        flex: none;
    }

}

/* PANEL DERECHO CON SCROLL */
#rightPanel {
    overflow-y: auto;      /* scroll vertical */
    overflow-x: hidden;    /* evita scroll horizontal */
    scrollbar-gutter: stable;
}


/* LOADING GIF */
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.6;
    display: none;
    z-index: 1000; /* should be large enough to be on top of everything */
    align-content: center;
}

.centrado {
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}
/* FIN LOADING GIF */
.menu {
    margin: 0 auto;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px 12px 0px 0px;
    border: 1px solid var(--Foundation-Grey-White, #FFF);
    background: white;
    backdrop-filter: blur(50px);
    padding: 16px 24px;
    position: relative;
}

.menu-item {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.menu-item .popup {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%; /* Muestra el popup arriba */
    left: 70%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-item .popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.menu-item:hover .popup {
    visibility: visible;
    opacity: 1;
}


.zoom {
    background: white;
    border-radius: 10px;
    padding: 10px;
    gap: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;    
}

.zoom .popup {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    /*bottom: 100%;*/ /* Muestra el popup arriba */
    left: 70%;
    transform: translateX(10%);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/*.zoom .popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}*/

.zoom:hover .popup {
    visibility: visible;
    opacity: 1;
}

.search {
    margin: 16px 16px 16px 0;
    align-items: center;
}
.search-input {
    border-radius: 4px;
    border: 1px solid var(--Foundation-Grey-grey-50, #E8E8E8);
    background: var(--Neutral-White, #FFF);
    padding: 12px;
    left: 10px;
    width: 90%;
}


.search-icon {
    position: absolute;
    left: 40%;
    top: 50%;
    transform: translateY(-50%);
}

.busqueda-tema-icon {
    position: absolute;
    left: 80%;
    top: 50%;
    transform: translateY(-50%);
}

/* Risks */
.risks-search-container {
    background: #FAFAFC;
    display: flex;
    width: 310px;
    padding: var(--Spacing-12, 12px);
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
}

.risks-text {
    color: var(--Body-text-primary, #55212E);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

.risks-text-circle {
    display: flex;
    padding: 2px 8px;
    align-items: center;
    gap: 10px;
    border-radius: 32px;
    background: var(--Foundation-gray-gray-50, #EEEFF6);
}

.risks-buttons-container {
    display: flex;
    padding: 4px 0px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.risks-button {
    display: flex;
    align-items: center;
    gap: 4px;
}

.risks-categories-container {
    display: flex;
    padding: 4px 0px;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.risks-item {
    display: flex;
    padding: var(--Spacing-16, 16px) 12px;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    align-self: stretch;
    border-bottom: 1px solid var(--Foundation-primary-primary-50, #EEE9EA);
    background: var(--Neutral-White, #FFF);
    width: 100%;
}

.risks-children {
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    background: #FAFAFC;
    margin-top: 8px;
}

/*búsqueda por tema*/

.busqueda-result {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-family: Arial, sans-serif;
  border-bottom: 1px solid #eee;
  padding: 6px 10px;
  cursor: pointer;
}

.busqueda-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
}

.busqueda-result input[type="checkbox"] 
{
  margin-top: 4px;
}

.busqueda-preview 
{  
  color: #444;
  font-weight: 500;
  padding-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-size: 11px;
}

.busqueda-result.abierta .busqueda-preview {
  display: none;
}

.busqueda-texto {
  display: none;
  flex-direction: column;
  font-size: 11px;
}

.busqueda-result.abierta .busqueda-texto {
  display: flex;
}

.busqueda-nivel {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 18px;
  line-height: 1.4;
}

.busqueda-nivel::before {
  content: "▶";
  font-size: 12px;
  color: #888;
  position: absolute;
  left: 0;
}

.busqueda-leyenda-wrapper {
  padding: 6px 0 0 20px;
}

.busqueda-leyenda {
  max-height: 45px;
  display: block;
}


/* para el analisis */

/* Poblation */
.poblation-container {
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 4px;
    background: rgba(238, 239, 246, 0.30);
    width: 100%;
}

.sizes-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
}

.sizes-dark {
    background: var(--Body-text-white, #E8E8E8);
    padding: 8px 12px;
}

.sizes-item p {
    color: var(--Foundation-Grey-grey-700, #121212);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
}

.sizes-item span {
    color: var(--Body-text-medium, #484848);
    font-family: Gotham;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

/* Infra */
.infra-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    background: rgba(238, 239, 246, 0.30);
}

.infra-item {
    display: flex;
    padding: 8px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color .15s ease, outline-color .15s ease;
}

.infra-item.item-analisis.activo
{
  background-color: #eaf2ff;
  outline: 1px solid #cfe0ff;
}

.infra-text {
    color: var(--Foundation-gray-gray-700, #000);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

.infra-text-container {
    display: flex;
    padding: 2px 8px;
    align-items: center;
    gap: 10px;
    border-radius: 32px;
    background: var(--Foundation-gray-gray-50, #EEEFF6);
}

.infra-btns {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}

.infra-btn button {
    display: flex;
    padding: 4px 8px !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
}