/* === geoportal.css === */

/* ESTRUCTURA PRINCIPAL*/
.DISENO_APLICACION {
    display: flex;
    height: calc(100vh - 56px);
    overflow: hidden;
}

.BARRA_LATERAL {
    width: 400px;
    overflow-y: auto;
    flex-shrink: 0;
}

.CONTENEDOR_MAPA {
    flex-grow: 1;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.oculto {
    display: none !important;
}

/* COMPONENTES VISUALES  */
.FILTRO_ICONO {
    filter: brightness(0) saturate(100%) invert(14%) sepia(50%) saturate(5424%) hue-rotate(213deg) brightness(91%) contrast(106%);
}

/* SELECTOR DE COORDENADAS */
.SELECTOR_COORDENADAS {
    display: flex;
    padding: 10px 10px;
    background-color: var(--ORO_UNAM);
}

.BOTON_PESTANA {
    flex: 1;
    border: none;
    padding: 0.6em;
    border-radius: 0.3em;
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--AZUL_UNAM);
    font-weight: 500;
    margin: 0 4px;
}

.BOTON_PESTANA.ACTIVO {
    background-color: var(--AZUL_UNAM);
    color: var(--BLANCO_PURO);
    font-weight: bold;
}

/* CUADRÍCULA DE DATOS  */

.CUADRICULA_DATOS {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    padding: 0 1.5em 1.5em;
}

.ITEM_DATO {
    display: flex;
    flex-direction: column;
}


.ETIQUETA_DATO {
    font-size: 0.8em;
    color: var(--TEXTO_ATENUADO);
}

.VALOR_DATO {
    font-size: 1.1em;
}

/* TARJETAS DE INFORMACIÓN */
.CONTENEDOR_FORMULA {
    background-color: var(--ORO_UNAM);
    padding: 0.2em;
    margin: 0 1.5em 1.5em;
    border-radius: 0.4em;
}

.TARJETA_FORMULA_INTERNA {
    background-color: var(--BLANCO_PURO);
    padding: 1em;
    border-radius: 0.3em;
    text-align: center;
}

.TITULO_FORMULA {
    color: var(--AZUL_UNAM);
    font-weight: bold;
    font-size: 0.9em;
}

.PANTALLA_FORMULA {
    font-size: 1.5em;
    font-weight: 800;
    color: var(--AZUL_UNAM);
    font-family: monospace;
}

.TARJETA_UBICACION {
    margin: 0 1.5em 1.5em;
    padding: 1em;
    border: 1px solid #dee2e6;
    border-radius: 0.5em;
}

.TITULO_UBICACION {
    color: var(--AZUL_UNAM);
    font-weight: bold;
    border-left: 4px solid var(--ORO_UNAM);
    padding-left: 8px;
    font-size: 1em;
}

.CONTENEDOR_IMAGEN_MAPA {
    height: 180px;
    border-radius: 0.3em;
    overflow: hidden;
    margin-bottom: 0.5em;
}

.IMAGEN_MAPA {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.BOTON_ACCION_PRIMARIA {
    background-color: var(--AZUL_UNAM);
    color: var(--BLANCO_PURO);
    border: none;
    padding: 0.8em;
    border-radius: 0.5em;
    font-weight: bold;
    transition: 0.2s;
}

.BOTON_ACCION_PRIMARIA:hover {
    background-color: var(--AZUL_MARINO);
}

.BOTON_ACCION_SECUNDARIA {
    background-color: var(--AZUL_UNAM);
    color: var(--BLANCO_PURO);
    border: none;
    padding: 0.8em;
    border-radius: 2em;
    font-weight:bold;
    transition: 0.2s;
}

.BOTON_ACCION_SECUNDARIA:hover {
    background-color: var(--AZUL_MARINO);
}

/* PANEL DE TEMATIZACIÓN */
.PANEL_CONTROL_TEMA {
    position: absolute;
    bottom: 30px;
    right: 20px;
    background-color: var(--BLANCO_PURO);
    padding: 15px;
    border-radius: 1em;
    z-index: 1000;
    width: 250px;
}

.TITULO_TEMA {
    font-size: 0.95em;
    color: var(--AZUL_UNAM);
    font-weight: bold;
    text-align: center;
    margin-bottom: 12px;
}

.OPCIONES_TEMA {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.BOTON_TEMA {
    background: none;
    border: 1px solid var(--AZUL_BALTICO);
    color: var(--AZUL_BALTICO);
    padding: 6px;
    border-radius: 1em;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
}

span.unidadFisica {
    padding: 0;
    margin: 0;
    font-size: 0.7em;
}

.BOTON_TEMA.ACTIVO {
    background-color: var(--AZUL_UNAM);
    color: var(--BLANCO_PURO);
    border-color: var(--AZUL_UNAM);
}

.LEYENDA_TEMA {
    margin-top: 15px;
    display: flex;
    align-items: space-between;
    font-size: 0.75em;
    color: var(--TEXTO_ATENUADO);
    font-weight: bold;
}

.ESCALA_COLOR {
    flex-grow: 1;
    height: 12px;
    margin: 0 10px;
    background: linear-gradient(to right, rgba(13, 71, 161, 1), rgba(0, 230, 118, 1), rgba(251, 192, 45, 1), rgba(211, 47, 47, 1));
    border-radius: 1em;
}


/* BOTÓN FLOTANTE DE INFORMACIÓN */
.BOTON_INFO_FLOTANTE {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    border-radius: 2em;
    background-color: var(--ORO_UNAM);
    color: var(--AZUL_UNAM);
    border: 3px solid var(--BLANCO_PURO);
    display: flex;
    align-items: center;
    justify-content: center;
}

.BOTON_INFO_FLOTANTE:hover {
    transform: scale(1.1);
    background-color: var(--AZUL_UNAM);
    color: var(--BLANCO_PURO);
    border-color: var(--ORO_UNAM);
}


/* BOTÓN FLOTANTE DE DESCARGA */
.BOTON_DESCARGA_FLOTANTE {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1000;

    width: 48px;
    height: 48px;
    border-radius: 2em;

    background-color: var(--ORO_UNAM);
    color: var(--AZUL_UNAM);
    border: 3px solid var(--BLANCO_PURO);

    display: flex;
    align-items: center;
    justify-content: center;

}

.BOTON_DESCARGA_FLOTANTE:hover {
    transform: scale(1.1);
    background-color: var(--AZUL_UNAM);
    color: var(--BLANCO_PURO);
    border-color: var(--ORO_UNAM);
}

/* TEXTO VERTICES */

.ETIQUETA_CIRCULO_VERTICE {
    background: transparent;
    outline: none;
    border: none;
    pointer-events: none;
    user-select: none;
    border-radius: 1em;
}

.ETIQUETA_CIRCULO_VERTICE span {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 1em;
    user-select:none;
}

.ETIQUETA_CIRCULO_VERTICE .TEXTO_CIRCULO_PEQUENO { 
    font-size: 8.5px; 
    letter-spacing: -0.8px; 
}

/* REGLAS RESPONSIVAS  */
@media (max-width: 768px) {
    .PANEL_CONTROL_TEMA {
        bottom: 20px;
        right: 10px;
        width: 200px;
        padding: 10px;
    }
    .ETIQUETA_CIRCULO_VERTICE span {
        font-size: 10px;
    }


}

@media (min-width: 768px) {
    span.unidadFisica {
        font-size: 0.8em;
    }

    #sidebar #vista-detalles:not(.oculto) {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    #sidebar .CONTENEDOR_DATOS_GEODESICOS {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}