HOME.

CSS

.mapa-resultado{
height: 100%;
width: 100%;
z-index: 1;
}
#map{
width: 100%;
height: 100%;
}
/* Estilos para el indicador de carga */
#loadingIndicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 10px 20px;
border-radius: 5px;
z-index: 1000;
}
/*-------------- DISEÑO ASIDE --------------*/
aside {
background: #FFFFFF;
float: left;
width: 370px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
height: 100%;
overflow: hidden;
transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
position: relative;
}
.aside-oculto {
width: 72px;
background: #00ABC7;
}
.aside-oculto .filtro {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.aside-visible .filtro {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.accion-aside {
padding: 25px 25px 35px;
text-align: end;
transition: transform 0.5s ease-in-out;
}
.aside-oculto .accion-aside img {
transform: rotate(0deg);
}
.aside-visible .accion-aside img {
transform: rotate(180deg);
}
.accion-aside img {
transition: transform 0.5s ease-in-out;
}
/*-------------------- FILTRO ---------------*/
.columna-titulo {
display: flex;
padding: 0px 25px 40px;
justify-content: space-between;
align-items: center;
}
.columna-titulo img{
align-self: flex-start;
}
.columna-titulo span{
font-size: 20px;
color: #3E3E3E;
line-height: normal;
letter-spacing: -0.4px;
text-align: center;
flex: 1;
}
.columna-buscar {
padding: 0px 20px;
}
.label-titulo{
font-weight: 400;
font-size: 15px;
letter-spacing: -0.02em;
color: #3E3E3E;
}
.form-group{
width: 65%;
}
.form-group select{
border: none;
float:right;
background:#F0F0F0;
width: 100%;
height: 25px;
padding-left: 10px;
font-size: 13px;
outline: none;
font-weight: 400;
display: flex;
align-items: center;
letter-spacing: -0.02em;
color: #3E3E3E;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
option{
font-weight: 400;
}
.años, .region, .comuna, .calle, .numero, .manzana, .predio {
position: relative;
padding: 0px 0px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.inputs{
 display: flex;
justify-content: space-between;
align-items: center;
width: 65%;
}
.calle input, .manzana input{
width: 65%;
border: none;
height: 25px;
background: #F0F0F0;
outline: none;
padding-left: 10px;
font-size: 13px;
font-weight: 400;
letter-spacing: -0.02em;
color: #3E3E3E;
}
.inputs input{
width: 50%;
border: none;
height: 25px;
background: #F0F0F0;
outline: none;
padding-left: 10px;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
letter-spacing: -0.02em;
color: #3E3E3E;
}
.region .select-personalizado, .comuna .select-personalizado {
justify-content: center;
align-items: center;
display: flex;
width: 40px;
height: 25px;
background-color: #00B0CA;
position: absolute;
top: 0;
right: 0px;
cursor: pointer;
pointer-events: none;
}
.region:hover .select-personalizado, .comuna:hover .select-personalizado {
background-color: #002F5F;
color: white;
transition: 0.3s ease-in-out;
}

.inputs::-webkit-inner-spin-button,
.inputs::-webkit-outer-spin-button {
-webkit-appearance: none;
}

.group-input p {
color: #3E3E3E;
text-align: center;
font-weight: 400;
 font-size: 11px;
margin: 0px;
padding: 10px 0px;
letter-spacing: -0.2px;
}
.boton-busqueda {
display: flex;
align-items: center;
justify-content: space-between;
/* width: 100% !important; */
padding: 110px 0px 0px;
}
.boton-busqueda button {
outline: none;
font-size: 14px;
letter-spacing: -0.02em;
border: none;
background-color: #002F5F;
border-radius: 8px;
margin-bottom: 10px;
color: #FFFFFF;
height: 25px;
width: 160px;
line-height: normal;
}
.boton-busqueda button:hover{
background-color: #00B0CA;
transition: 0.3s ease-in-out;
}
/* ----------- BUSQUEDA RESULTADO ------------*/

.resultado {
display: none;
width: 100%;
height: 100%;
}
.busqueda {
padding: 0 85px;
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: center;
}
/* ------------- DISEÑO BOTONES BASES ------------*/
.titulo-busqueda {
display: flex;
align-items: center;
line-height: normal;
align-self: start;
}
.titulo-busqueda span {
padding-left: 8px;
color: #3E3E3E;
font-size: 20px;
}
.base-desplazable {
padding: 15px 0px 10px 0px;
display: flex;
 align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
button#izquierdo, button#derecho {
width: 25px;
height: 25px;
background: #002F5F;
}
button#izquierdo:hover, button#derecho:hover{
background: #00B0CA;
transition: 0.3s ease-in-out;
}
.base-desplazable button {
width: 160px;
height: 25px;
border-radius: 8px;
border: none;
outline: none;
color: #FFF;
text-align: center;
font-size: 12px;
line-height: normal;
letter-spacing: -0.24px;
background: #7C7C7C;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
}
/* --------------- DISEÑO TABLA ---------------*/
.table-responsive {
width: 100%;
}
[Link] {
border: none;
outline: none;
color: #3E3E3E;
font-size: 12px;
white-space: nowrap;
margin: 0;
}
thead {
background: #3E3E3E;
color: #FFF;
text-align: justify;
}
td {
border: none;
font-weight: 400;
vertical-align: middle;
}
.table button {
width: 40px;
height: 22px;
color: #FFFFFF;
background: #002F5F;
outline: none;
font-size: 12px;
 font-weight: 400;
letter-spacing: -0.02em;
border: none;
border-radius: 5px;
}
.table button:hover {
background: #7C7C7C;
transition: 0.3s ease-in-out;
}
.table button:active {
background-color: #00B0CA;
transition: 0s;
}
.table th {
font-weight: 400;
line-height: normal;
letter-spacing: -0.32px;
}
.table-hover tbody tr:hover {
transition: background-color 0.3s ease-out;
}
/* --------------- BOTONES SELECCIONADOS --------------- */
.base-desplazable button{
transition: background-color 0.3s ease-out;
}

button#[Link] {
background: #E03030;
}
button#[Link] {
background: #5675DF;
}
button#[Link] {
background: #1E9731;
}
button#[Link] {
background: #9265F2;
}
button#[Link] {
background: #F423C6;
}
button#[Link] {
background: #FC9A27;
}
button#[Link] {
background: #40ABC2;
}
/* ----------------------FILTROS DE RESULTADO DE BUSQUEDA ---------------------- */
.filtro-resultado {
width: 100%;
color: #3E3E3E;
font-size: 12px;
padding-bottom: 15px;
}
.filtro-resultado span {
font-weight: 400;
}
.grupo {
width: 100%;
 display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px;
}
.palabra-clave {
display: flex;
align-items: center;
flex: 1;
flex-wrap: wrap;
}
.palabra-clave span, .ordenar span, .tipo-propiedad span, .año span, .uso
span, .tipo-proyecto span, .año1 span {
margin-right: 15px;
}
.palabra-clave input, .ordenar select, .tipo-propiedad select, .año select, .uso
select, .tipo-proyecto select, .año1 select{
border-radius: 8px;
background: #F0F0F0;
height: 25px;
font-weight: 400;
border: none;
outline: none;
font-size: 11px;
padding-left: 20px;
letter-spacing: -0.24px;
width: auto;
line-height: normal;
color: #3E3E3E;
}
.palabra-clave input {
flex: 1;
}
.ordenar, .tipo-propiedad, .año, .uso, .tipo-proyecto{
display: flex;
align-items: center;
line-height: normal;
justify-content: start;
flex-wrap: wrap;
}
/* ------------- DISEÑO POPUP ---------------*/
.leaflet-popup {
margin-bottom: 8px !important;
}
.leaflet-popup-content-wrapper{
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
padding: 0 !important;
border-radius: 0px !important;
border-left-width: 5px;
border-left-color: #00B0CA;
border-left-style: solid;
}
.leaflet-popup-tip-container {
left: 50% !important;
margin-left: -20px !important;
}
.leaflet-popup-content {
display: flex;
 line-height: normal !important;
align-items: center;
margin: 0px !important;
height: 69px;
width: auto !important;
}
.detalle {
color: #3E3E3E;
margin: 0px 60px 0px 15px;
word-wrap: break-word;
letter-spacing: -0.24px;
display: inline-block;
}
.detalle span{
display: block;
white-space: nowrap;
width: max-content;
text-align: center;
margin: 0 auto;
}
.leaflet-popup-content .direccion {
font-size: 16px;
}
.leaflet-popup-content .coordenadas {
font-size: 11px;
font-weight: 400;
padding: 4px 0px 2px;
}
.leaflet-popup-content .location {
font-weight: 400;
font-size: 13px;
}
.leaflet-popup-content span:hover {
color: #00B0CA;
transition: 0.3s ease-in-out;
}
.leaflet-popup-close-button {
margin: 12px 8px 0px 0px;
background: #3E3E3E !important;
color: #FFFFFF !important;
width: 25px !important;
height: 25px !important;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
line-height: normal;
}
.leaflet-popup-close-button:hover {
background: #00B0CA !important;
transition: 0.3s ease-in-out;
}
.leaflet-popup-close-button span {
display: none;
}
.leaflet-popup-close-button::after {
content: "X";
display: inline-block;
font-size: 12px;
 font-family: 'Inter';
font-weight: 700;
line-height: normal;
}
.leaflet-marker-icon {
border-radius: 100%;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.leaflet-popup-tip{
width: 13px !important;
height: 15px !important;
}
/* --------------- DISEÑO TOOLTIP -----------------*/
.tooltip{
--bs-tooltip-bg: #00B0CA;
}
.tooltip-content{
text-align: start;
align-items: start;
display: flex;
justify-content: space-between;
}
.tooltip-content span{
font-size: 12px;
font-weight: 400;
padding: 5px;
}
.tooltip-content img {
margin-left: 5px;
}
.tooltip .tooltip-inner {
max-width: 250px;
border-radius: 0px;
}
/* ------------ DISEÑO MODAL LOCATION -------------*/
#modalLocation .modal-content {
border-radius: unset;
border-left-width: 15px;
border-left-color: #00B0CA;
--bs-modal-border-width: 0px;
}
#modalLocation .modal-header {
border-bottom: none;
padding: 38px 0px 0px 37px;
}
#locationModalLabel {
font-size: 34px;
text-transform: uppercase;
color: #00B0CA;
}
#modalLocation .modal-body {
padding: 27px 80px 0px 37px;
}
#modalLocation .modal-body ul {
list-style-type: none;
padding: 0px;
}
#modalLocation .modal-body li {
font-size: 16px;
 font-weight: 400;
padding-bottom: 21px;
}
#modalLocation .modal-body li span{
color: #00B0CA;
font-weight: 400;
}
/* --------------- VALIDACION CAMPOS --------------- */
.error-border {
outline: 1px solid;
--bs-text-opacity: 1;
color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important;
}
.error-label{
--bs-text-opacity: 1;
color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important;
}
.error-p{
--bs-text-opacity: 1;
color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important;
}
/* --------------- DISEÑO DE ZOOM ---------------*/
.leaflet-control-layers, .leaflet-control-zoom {
border: none !important;
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.25) !important;
border-radius: 8px !important;
}
.leaflet-control-zoom-in {
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
background-color: #002F5E !important;
color: #FFFFFF !important;
}
.leaflet-control-zoom-out {
border-bottom-left-radius: 8px !important;
border-bottom-right-radius: 8px !important;
background-color: #002F5E !important;
color: #FFFFFF !important
}
.leaflet-control-zoom-in:hover, .leaflet-control-zoom-out:hover{
background-color: #00B0CA !important;
transition: 0.3s ease-in-out;
}
.popup-open {
/* Estilos específicos cuando el popup está abierto */
border: 3px white solid;

}
/* --------------- DISEÑO MAPA --------------- */
.leaflet-pane {
z-index: 0 !important;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
 100% {
transform: scale(1);
}
}
/* ---------------- DISEÑO PAGINATION -------------*/
.pagination {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
margin-top: 15px;
flex-wrap: wrap;
}
.pagination a {
text-decoration: none;
justify-content: center;
align-items: center;
display: flex;
color: #3E3E3E;
}
a#firstPage, a#lastPage, a#previousPage, a#nextPage, .pagina {
background: #CFCFCF;
width: 25px;
height: 25px;
border-radius: 8px;
cursor: pointer;
}

a#firstPage:not(.active):hover,
a#lastPage:not(.active):hover,
a#previousPage:not(.active):hover,
a#nextPage:not(.active):hover,
.pagina:not(.active):hover {
background: #7F7F7F !important;
transition: 0.3s ease-in-out;
color: #FFFFFF;
}
.pagination a:hover svg path {
stroke: #FFFFFF;
transition: 0.3s ease-in-out;
}

.pagination [Link] {
background-color: #F0F0F0 !important;
pointer-events: none;
}

.pagination-center {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-grow: 1;
}
.pagination-center .pagination-link {
margin: 0 5px;
}
.pagina {
margin: 0 5px;
}
.[Link] {
background: #00B0CA;
color: #FFFFFF;
}
a#numberPages {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
/*----------------- CARGA DE BUSQUEDA ----------------*/
#cargaBusqueda {
justify-content: center;
display: flex;
align-items: center;
}
.lds-default {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-default div {
position: absolute;
width: 6px;
height: 6px;
background: #002F5F;
border-radius: 50%;
animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
animation-delay: 0s;
top: 37px;
left: 66px;
}
.lds-default div:nth-child(2) {
animation-delay: -0.1s;
top: 22px;
left: 62px;
}
.lds-default div:nth-child(3) {
animation-delay: -0.2s;
top: 11px;
left: 52px;
}
.lds-default div:nth-child(4) {
animation-delay: -0.3s;
top: 7px;
left: 37px;
}
.lds-default div:nth-child(5) {
animation-delay: -0.4s;
top: 11px;
left: 22px;
}
.lds-default div:nth-child(6) {
animation-delay: -0.5s;
top: 22px;
 left: 11px;
}
.lds-default div:nth-child(7) {
animation-delay: -0.6s;
top: 37px;
left: 7px;
}
.lds-default div:nth-child(8) {
animation-delay: -0.7s;
top: 52px;
left: 11px;
}
.lds-default div:nth-child(9) {
animation-delay: -0.8s;
top: 62px;
left: 22px;
}
.lds-default div:nth-child(10) {
animation-delay: -0.9s;
top: 66px;
left: 37px;
}
.lds-default div:nth-child(11) {
animation-delay: -1s;
top: 62px;
left: 52px;
}
.lds-default div:nth-child(12) {
animation-delay: -1.1s;
top: 52px;
left: 62px;
}
@keyframes lds-default {
0%, 20%, 80%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}
/* Estilos para el dropdown */
.dropdown {
position: relative;
display: inline-block;
}

.dropbtn {
color: #3E3E3E;
font-size: 11px;
border: none;
cursor: pointer;
border-radius: 8px;
background: #F0F0F0;
height: 25px;
font-weight: 400;
border: none;
outline: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #F0F0F0;
min-width: 160px;
overflow-y: auto;
border: 1px solid #ddd;
z-index: 1;
}

.dropdown-content a {
padding: 10px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {
background-color: #f1f1f1;
}

.show {
display: block;
}