/*------*/
/* ESTILOS TABS */
#menuToc {
	width: 100%;
}

.nav.nav-tabs a {
	width: 50%;
	text-align: center;
	-webkit-transition: border 300ms ease-out;
	-moz-transition: border 300ms ease-out;
	-o-transition: border 300ms ease-out;
	transition: border 300ms ease-out;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.tab-content>.active {
	-webkit-transition: 300ms ease-out;
	-moz-transition: 300ms ease-out;
	-o-transition: 300ms ease-out;
	transition: 300ms ease-out;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
	background: none;
	color: var(--color-font-tab);
	border: none;
	border-bottom: solid 3px var(--main-color);
}

.nav-tabs .nav-link {
	color: var(--gris-secundario);
	border: none;
	border-bottom: solid 3px var(--color-border-tab);
}

.nav-tabs {
	border: none;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
	border-color: var(--main-color);
}
/*-----------------------------------------------*/

/* ESTILOS MENU TOC */
div#containerToc {
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	grid-template-columns: 1fr;
	grid-template-areas:
		"header-toc-visitas"
		"header-toc-aux"
		"header-toc"
		"body-toc";
	padding: 0px 0px;
	gap: 0px;
	height: 100vh;
}

.container-header-toc {
	grid-area: header-toc;
	display: flex;
	flex-direction: column;
}

#divSlideBaseMaps {
	padding: 0px 10px 10px;
}

#headersTabs {
	padding: 0px 10px;
}

#nav-tabContent {
	grid-area: body-toc;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: 1fr;
	grid-template-areas: "div-buscador" 
						 "list-capas";
	padding: 0px 0px;
	gap: 5px;
	position: relative;
	overflow: overlay;
}

div#divBuscadorCapas {
	grid-area: div-buscador;
	padding: 0px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

div#nav-explorar-mapa.active.show  {
	grid-area: list-capas;
	overflow: auto;
}

div#nav-armar-mapa.active.show {
	grid-area: list-capas;
	overflow: auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas: "armar-tabs"
		"armar-content";
	height: 100%;
	padding: 0px 10px;
}

div#nav-armar-mapa.active.show div#headersTabsArmarMapa{
	grid-area: armar-tabs;
}

div#nav-armar-mapa.active.show div#nav-tab-armarContent{
	grid-area: armar-content;
	overflow: hidden;
	/* padding: 0px 5px; */
}

div#nav-armar-mapa.active.show div#nav-nuevo-mapa.active.show{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas:
		"armar-head"
		"armar-categorias"
		"armar-body"
		"armar-acciones";
	height: 100%;
}

div#nav-nuevo-mapa.active.show div#tituloCategorias {
    grid-area: armar-head;
}

div#nav-nuevo-mapa.active.show div#sectionArmarMapaCategorias {
    grid-area: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

div#nav-nuevo-mapa.active.show div#armarMapaCategorias {
    display: block;
    width: 100%;
    padding: 0px 6px;
}

.right-direction-categoria {
  transform: rotate(-90deg);
  cursor: pointer;
  display: flex;
}

.left-direction-categoria {
  transform: rotate(90deg);
  cursor: pointer;
  display: flex;
}

div#nav-nuevo-mapa.active.show div#layersAgregadas {
    grid-area: armar-body;
    overflow: overlay;
    border-top: solid 2px var(--bg-thumb-scroll);
}

div#nav-nuevo-mapa.active.show #accionesGuardar {
	grid-area: armar-acciones;
}

#sectionIconsGuardar {
	border-top: solid 2px var(--bg-thumb-scroll);
	padding-top: 5px;
	padding-bottom: 0px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

div#nav-armar-mapa.active.show div#nav-mis-mapas.active.show{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto 1fr;
	grid-template-areas:
		"mis-mapas"
		"title-compartidos"
		"compartidos";
	height: 100%;
}

.icon-collapse-categoria {
	width: 14px;
	height: 14px;
	background-size: contain;
	background-image: url(../images/openData/colapsar.svg);
	background-repeat: no-repeat;
	filter: var(--filtro-colapse-tipo-mapa);
	background-position: center;
	margin-right: 9px;
	display: flex;
}

.icon-categoria {
	width: 20px;
	height: 20px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	float: right;
	margin-right: 5px;
	filter: var(--filter-tools-toc);
}

.icon-add-layer {
	width: 15px;
	height: 20px;
	background-image: url(../images/openData/nuevo.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	float: right;
	margin-right: 5px;
	filter: var(--filter-tools-toc);
	cursor: pointer;
}


.count-layers {
	width: 15px;
	height: 15px;
	background-color: var(--main-color);
	float: right;
	border-radius: 10px;
	position: absolute;
	top: 1px;
	font-size: 9px;
	text-align: center;
	right: 12px;
	line-height: 13px;
	color: var(--blanco);
	filter: none;
	z-index: 1;
}

.count-layers-subcategoria {
	width: 13px;
	height: 13px;
	background-color: var(--main-color);
	float: right;
	border-radius: 10px;
	position: relative;
	font-size: 9px;
	text-align: center;
	line-height: 13px;
	color: var(--blanco);
}

.label-categoria {
	cursor: pointer;
	color: var(--color-label-categoria);
	border-bottom: solid 1px var(--color-border-categoria);
	display: flex;
	align-items: center;
	padding: 7px 10px;
	margin-bottom: 0px;
	position: relative;
}

.label-categoria .categoria-title {
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin-right: auto;
	flex: 1;
}

.div-container-header-categoria {
	padding: 0px 8px;
	margin-bottom: 2px;
}

.active-categoria h6.label-categoria {
	border: none;
}

.div-container-header-categoria.active-categoria {
	padding: 0px 8px;
	background-color: var(--bg-active-category);
}

.div-categoria {
	padding: 0px 10px;
}

.div-categoria>ul>li {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.icon-collapse-subcategoria {
	width: 12px;
	height: 12px;
	background-size: contain;
	background-image: url(../images/openData/colapsar.svg);
	background-repeat: no-repeat;
	filter: var(--filtro-colapse-tipo-mapa);
	background-position: center;
	float: left;
	margin-right: 5px;
	-webkit-transition: 300ms ease-out;
	-moz-transition: 300ms ease-out;
	-o-transition: 300ms ease-out;
	transition: 300ms ease-out;
	cursor: pointer;
}

.subcategoria-open {
	transform: rotate(180deg);
	-webkit-transition: 300ms ease-out;
	-moz-transition: 300ms ease-out;
	-o-transition: 300ms ease-out;
	transition: 300ms ease-out;
}

.div-subcategoria {
	padding-left: 10px;
	width: 100%;
	flex: 100%;
	margin-top: 5px;
}

.list-legend {
	margin-left: 14px;
}

.list-legend li {
	margin-top: 3px !important;
	margin-bottom: 0 !important;
}

.list-images-legend li {
	margin-top: 1px !important;
	margin-bottom: 0 !important;
}

#nav-explorar-mapa ul, ul#listLayersArmarMapa, #nav-armar-mapa ul,
	#container-legend ul {
	list-style-type: none;
	padding-left: 5px;
	color: var(--main-color);
	font-size: 12px;
	text-transform: capitalize;
	line-height: 20px;
	margin-bottom: 0;
	display: block;
}

#container-legend ul {
	padding-left: 0 !important;
}

#container-legend li {
	display: flex;
	flex-direction: row;
}

#nav-explorar-mapa li, #listLayersArmarMapa li, #listLayersAgregadas li,
	#container-legend li, #listMisMapas li {
	line-height: 14px;
	color: var(--color-fuente);
	margin-bottom: 6px !important;
	font-size: 12px;
}

#listLayersAgregadas {
	padding-top: 7px;
	width: 100%;
}

#listMisMapas {
	padding-top: 7px;
	width: 100%;
}

#listMisMapas li {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
}
button.btn.btn-agregar-url {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 9px;
	color: var(--color-fuente);
}

.btn-nuevo-mapa {
	color: var(--color-fuente);
	padding-top: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	margin-right: auto;
}

.btn-nuevo-mapa .activo {
	color: black;
	filter: var(--filter-main-color);
}

.icon-nuevo-mapa {
	color: black;
	background-image: url(../images/openData/nuevo.svg);
	width: 15px;
	height: 14px;
	background-size: contain;
	background-repeat: no-repeat;
	display: flex;
	filter: var(--filter-tools-toc);
}

.check-layer {
	height: 13px;
	margin-right: 5px;
	cursor: pointer;
	float: left;
	position: relative;
}

.check-layer:disabled, .span-disabled>span {
	cursor: default;
}

.span-disabled>span {
	color: var(--gris-secundario);
}

.icon-view-layer {
	width: 14px;
	height: 14px;
	background-size: contain;
	background-image: url(../images/openData/Capa_Apagada.svg);
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 5px;
	display: flex;
}

#divApagarCapas {
	cursor: pointer;
}

.icon-apagar-layers {
	width: 14px;
	height: 14px;
	background-size: contain;
	background-image: url(../images/openData/apagar_servicios.svg);
	background-repeat: no-repeat;
	background-position: center;
	float: left;
	margin-right: 10px;
	margin-top: 3px;
	filter: var(--filter-main-color);
}

.icon-filter-layer {
	width: 16px;
	height: 24px;
	background-size: contain;
	background-image: url(../images/openData/filter.svg);
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 2px;
	filter: var(--filtro-iconos-login);
	cursor: pointer;
}

div#containerFilterLayers {
	display: flex;
	width: 100%;
	gap: 2px;
}

#buscadorCapas {
	display: flex;
	flex: 1;
	border-radius: 15px;
	padding: 4px 5px 4px 10px;
	box-shadow: none;
	outline: none;
	font-size: 10px;
	color: var(--gris-oscuro-principal);
	border: solid 1px var(--gris-secundario);
}

.icon-config-layer, .icon-sort-layer, .icon-eliminar-mapa,
	.icon-compartir-mapa, .icon-config-meta-data {
	width: 14px;
	height: 14px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	float: right;
	margin-right: 5px;
	filter: var(--filter-tools-toc);
	cursor: pointer;
}

.icon-sort-layer {
	background-image: url(../images/openData/Arrastrar_Capa.svg);
}

.icon-eliminar-mapa {
	background-image: url(../images/openData/borrar_mapa.svg);
	margin-right: 0px;
}

.icon-compartir-mapa {
	background-image: url(../images/openData/Share.svg);
	margin-right: 0px;
}

.icon-config-layer {
	background-image: url(../images/openData/Configuracion_capa.svg);
}

.icon-config-meta-data {
	background-image: url(../images/openData/configuracion-metadata.svg);
}

.icon-eliminar-mapa:hover, .icon-compartir-mapa:hover,
	.icon-config-meta-data:hover {
	filter: var(--filter-main-color);
}

.config-activo {
	filter: var(--filter-main-color);
}

.service-visible {
	background-image: url(../images/openData/activo.svg);
	filter: var(--filter-main-color);
}

.feature-disabled .service-visible {
	filter: brightness(0) saturate(100%) invert(41%) sepia(56%)
		saturate(2827%) hue-rotate(332deg) brightness(89%) contrast(94%);
}

.icon-collapse-legend {
	width: 10px;
	height: 13px;
	background-size: contain;
	background-image: url(../images/openData/colapsar.svg);
	background-repeat: no-repeat;
	filter: var(--filtro-colapse-tipo-mapa);
	background-position: center;
	float: left;
	margin-right: 5px;
	transform: rotate(-90deg);
	-webkit-transition: 300ms ease-out;
	-moz-transition: 300ms ease-out;
	-o-transition: 300ms ease-out;
	transition: 300ms ease-out;
	cursor: pointer;
}

.legend-open {
	transform: rotate(0deg);
	-webkit-transition: 300ms ease-out;
	-moz-transition: 300ms ease-out;
	-o-transition: 300ms ease-out;
	transition: 300ms ease-out;
}

.label-layer, .icon-view-layer {
	cursor: pointer;
}

.layer-buscada {
	background-color: var(--color-buscador);
}

.label-layer {
	color: var(--color-label-categoria);
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	flex: 1;
	padding-right: 2px;
}

.label-apagar-layer {
	color: var(--main-color);
	display: inline-block;
	font-size: 13px;
	font-weight: inherit;
}

.icon-legend {
	width: 15px;
	height: 14px;
	margin-right: 5px;
	position: relative;
	top: -3px;
}

ul.list-images-legend {
	padding-left: 15px !important;
	margin-top: 2px
}

.icon-layer {
	height: 8px;
	width: 20px;
	float: left;
	margin-right: 5px;
	border-bottom: solid 3px;
}

.icon-feature-layer {
	position: relative;
	top: -3px;
	margin-right: 5px;
}

.label-tools-toc {
	color: var(--main-color);
	display: flex;
	flex-direction: row;
	text-align: center;
	line-height: 14px;
	margin-bottom: 5px;
}

#container-descargar .label-tools-toc {
	justify-content: space-between;
}

.label-tools-toc label {
	color: var(--main-color) !important;
	font-size: 11px;
	font-weight: inherit;
	display: flex;
	flex: 1;
	padding-left: 10px;
	justify-content: center;
}

.icon-close-tools-toc {
	width: 14px;
	height: 14px;
	background-image: url(../images/openData/Cerrar.svg);
	float: right;
	background-size: 8px;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	filter: var(--filter-tools-toc);
}

.icon-return-tools-toc {
	width: 14px;
	height: 14px;
	background-image: url(../images/openData/regresar.svg);
	float: left;
	background-size: 10px;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	filter: var(--filter-tools-toc);
}

#tabExplorarMapa, #layersAgregadas, #misMapas, #divMapasCompartidos {
	overflow-x: hidden;
	overflow-y: overlay;
	-webkit-transition: 300ms ease-out;
	-moz-transition: 300ms ease-out;
	-o-transition: 300ms ease-out;
	transition: 300ms ease-out;
}

div#labelCompartidos {
	margin: 4px 0px;
	border-bottom: dashed 2px var(--main-color);
}

div#labelCompartidos label {
	color: var(--main-color) !important;
	font-size: 12px;
}

.icon-layers-no-agregadas {
	background-image: url(../images/openData/Capas.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: block;
	width: 30px;
	height: 30px;
	margin: auto;
	filter: var(--filter-capas-no-agregadas);
}

.icon-eliminar-grupo{
	width: 20px;
	height: 20px;
	background-image: url(../images/openData/borrar_mapa.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	float: right;
	margin-right: 5px;
	filter: var(--filter-tools-toc);
	cursor: pointer;
}

.text-layers-no-agregadas {
	width: 50%;
	display: block;
	margin: auto;
	text-align: center;
	font-size: 18px;
	color: var(--color-font-capas-no-agregadas);
}

#mensajeLayersNoAgregadas {
	margin-top: calc(50% - 42px);
}
/*----------------------------------*/