:root {
  --light-blue: #c7eeff;
  --light-green: #c0ff94;
  --light-gray: #95a4b9;
  --azul-inmobiliaria: #7ac5ff;
  --azul-oscuro-inmobiliaria: #4b9bd8;
  --gris-oscuro-inmobiliaria: #2c3e50;
  --verde-suave: rgb(73, 213, 118);
  --rojo-suave : rgb(228, 88, 88);
}

.inmobiliaria-img{
  filter: drop-shadow(0px 0px 10px rgba(0,0,0, .3));
}


.inmobiliaria-img:hover{
  filter: drop-shadow(0px 0px 15px rgb(0, 168, 225,.5));
}



/* Estilos Generales */
.full-height {
  height: 100vh;
  min-height: 100vh;
}

.max-height {
  max-height: 100vh;
}

@keyframes enviando {
  0% {
    gap: 0rem;
  }

  100% {
    gap: 2rem;
  }
}

body {
  min-width: 320px;
}

.gap {
  gap: 2rem;
  animation: enviando 1s ease;
}

/* Estilos inicio */

#container-pagos-atrasados{
  border-radius: 25px;
  color: var(--rojo-suave);
}

.item-pago-atrasado{
  border: var(--rojo-suave) 1px solid;
  border-radius: 25px;
  color: #222222;
  transition: all .2s ease-in;
  background-color: rgb(254, 229, 229);
}
.item-pago-atrasado:hover{
  scale: 103%;
  box-shadow: var(--rojo-suave) 0px 0px 5px 0px;
}


.item-pago-atrasado .dias-mora{
  background-color:var(--rojo-suave);
}

.item-pago-atrasado a{
  border: 1px solid var(--rojo-suave);
}

.item-pago-atrasado a:hover{
  background-color: var(--rojo-suave);
  color: #FFF;
}


#container-proximos-pagos{
  border-radius: 25px;
  color: var(--verde-suave);
}

.item-proximo-pago{
  border: var(--verde-suave) 1px solid;
  border-radius: 25px;
  color: #222222;
  transition: all .2s ease-in;
  background-color: rgb(227, 248, 233);
}
.item-proximo-pago:hover{
  scale: 103%;
  box-shadow: var(--verde-suave) 0px 0px 5px 0px;
}

.item-proximo-pago .dias-restantes{
  background-color:var(--verde-suave);
}

.item-proximo-pago a{
  border: 1px solid var(--verde-suave);
}

.item-proximo-pago a:hover{
  background-color: var(--verde-suave);
  color: #FFF;
}

#container-pagos-recientes{
  border-radius: 25px;
  color: var(--verde-suave);
}

.item-pagos-recientes{
  border: var(--azul-inmobiliaria) 1px solid;
  border-radius: 25px;
  color: #222222;
  transition: all .2s ease-in;
  background-color: rgb(208, 233, 253);
}
.item-pagos-recientes:hover{
  scale: 103%;
  box-shadow: var(--azul-inmobiliaria) 0px 0px 5px 0px;
}

.item-pagos-recientes .dias-restantes{
  background-color:var(--azul-inmobiliaria);
}

.item-pagos-recientes a{
  border: 1px solid var(--azul-inmobiliaria);
}

.item-pagos-recientes a:hover{
  background-color: var(--azul-inmobiliaria);
  color: #FFF;
}



/* Estilos barra lateral */
.barra-lateral {
  max-width: 5.5rem;
  min-width: 4rem;
  transition: all ease-in 200ms;
}

.barra-lateral-extendida {
  max-width: 21rem;
  min-width: 20rem;
}

.nombre {
  transform-origin: 0 0;
  transform: translateX(-100px);
  opacity: 0;

  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-delay: 0.2s;
  transition-timing-function: ease;
}

.nombre-extendido {
  transform: translateX(0);
  opacity: 100%;
}

.grow-clip {
  clip-path: inset(0 100% 0 0); /* Inicialmente oculto hacia la derecha */
  transition: clip-path 0.5s ease;
}

.grow-clip-extend {
  clip-path: inset(
    0 0 0 0
  ); /* Crece hacia la derecha hasta mostrarse completo */
}
.hover-btn {
  color: #fff;
}

.hover-btn:hover {
  background-color: #fff;
  color: #000;
}

.drop-inmuebles {
  transform: rotate(0deg);
  transition: all ease 0.2s;
}

.drop-inmuebles-rotate {
  transform: rotate(180deg);
}

/* Estilo links Side bar */
.link-side-bar i {
  color: #fff;
}

.carta-inmuebles {
  scale: 1;
  transition: all 0.5s ease;
}
.carta-inmuebles:hover {
  scale: 1.02;
  box-shadow: 0.09rem 0.09rem 0.7rem 0.01rem rgba(0, 0, 0, 0.3);
}

/* Colores de fondo */
.bg-light-blue {
  background-color: var(--light-blue);
}

.bg-light-green {
  background-color: var(--light-green);
}

.bg-azul-inmobiliaria {
  background-color: var(--azul-inmobiliaria);
}

.bg-azul-oscuro-inmobiliaria {
  background-color: var(--azul-oscuro-inmobiliaria);
}

.bg-gris-oscuro-inmobiliaria {
  background-color: var(--gris-oscuro-inmobiliaria);
}
/* Estilos SVG */
/* svg sin resultados */

.svg-sin-resultados {
  min-height: auto;
  min-width: 12rem;
}

.spinner-border {
  width: 3rem;
  height: 3rem;
  color: var(--light-gray);
}

.contenedor-imagen {
  height: 12rem;
  align-items: center;
}

.img-inmueble {
  max-width: 100%;
  max-height: 12rem;
}

/* Contenedor Slider */
.contenedor-slider {
  min-height: 65vh;
}

/* Estilos Iconos */
/* Iconos */

.icono-general {
  width: 2rem;
}

.icono-detalles {
  width: 2rem;
  height: auto;
}

.icono-pequeño {
  width: 1.5rem;
  height: auto;
}

/* Estilos botonoes de Configuracion */
.icono {
  transition: transform 0.3s;
}

.desplegado {
  transform: rotate(180deg);
}

/* Estilos pagos pendientees */
.atrasado {
  z-index: 1000;
}

.atrasado::before {
  content: "Pago atrasado";
  position: absolute;
  top: px;
  right: -90px;
  background-color: rgb(250, 34, 34);
  color: white;
  font-weight: bold;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.9rem;
  cursor: pointer;
}

.pago-item{
  transition: all .3s ease-in;
}

.pago-item:hover{
  scale: 1.01;
}

.pago-item .atrasado::before{
  transition: all .5s ease;
}

.pago-item:hover .atrasado::before{
  transform: translate(-10px, -10px);
}

.spinner {
  min-width: 100px;
}

/* Estilo tabla */

.table-container {
  max-height: 300px;
}

.table-container-historial {
  max-height: 500px;
}

/* Estilos Scroll */
/* Estilo del scrollbar completo */
::-webkit-scrollbar {
  width: 0.5rem; /* Ancho de la barra */
  height: 0.4rem;
}

/* Estilo del "thumb" (la parte que se mueve) */
::-webkit-scrollbar-thumb {
  background-color: #ede9e9; /* Color del thumb */
  border-radius: 5px; /* Bordes redondeados */
  /* border: 3px solid #fff     Espacio alrededor del thumb */
}

/* Estilo del "track" (la pista de fondo) */
::-webkit-scrollbar-track {
  background-color: var(--gris-oscuro-inmobiliaria); /* Color del track */
}

/* Opcional: Color del track cuando está inactivo */
::-webkit-scrollbar-track-piece {
  background-color: var(
    --gris-oscuro-inmobiliaria
  ); /* Color cuando no está siendo usado */
}

/* Estilo para la esquina (si hay barra vertical y horizontal) */
::-webkit-scrollbar-corner {
  background-color: var(--gris-oscuro-inmobiliaria);
}