@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
/* BA PROPIEDADES */
*, *::before, *::after { padding: 0; margin: 0; box-sizing: border-box}
:root { --main-color: #202124; --main-color-dark: #245da4; --main-color-light: #5872f5; --text-color: #cfcde7; --text-color-hover: #cc2100; --color-th: #eee; --color-lateral: #5DA2F9} /*#a9d0ff*/

body { font-family: "Poppins", sans-serif; overflow-x: hidden; background-color: #e0e0e0; min-height: 100vh; display: flex; position: relative}
a { text-decoration: none; color:var(--main-color-dark)}
a:hover {color:var(--text-color-hover)}
ul { list-style: none}

/* solo para LOGIN */
.caja-nubes {position: relative; width: 100%; height: auto; display: inline-block; text-align: center}
.caja-nubes img {width: 100%; height: auto}
.caja-nubes-logo {position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%)}
.logo-nubes {height:5rem; width:auto}
.cajaLogin {position: absolute; width: 270rem; border: .06rem solid #fff; border-radius: .4rem; text-align: center; left: 50%; transform: translate(-50%, -50%); top: 20%; background-color: rgba(255,255,255,0.5) }
.inputUser {padding: 1.6rem; font-size: 1.5rem; text-align: center; background-color: #fff; border: .06rem solid #ccc; margin:1.6rem}
.login-boton {padding: 1.8rem 2.5rem 1.8rem 2.5rem; font-weight: bold; background-color: #fff; color:#CC2121; border: .06rem solid #CC2121; margin: 1.6rem; border-radius: .4rem }
.login-boton:hover {padding: 1.8rem 2.5rem 1.8rem 2.5rem; font-weight: bold; background-color: #cc2100; color:#fff; border: .06rem solid #CC2121; margin: 1.6rem; border-radius: .4rem }
/* end login */

nav { position: sticky; top: 0; left: 0; height: 100vh; background-color: var(--main-color); width: 11rem; padding: 2rem .5rem; color: #fff; display: flex; flex-direction: column; transition: width 0.5s ease-in-out}
nav::before { content: ""; position: absolute; width: 2rem; height: 100%; top: 0; left: 100%}
main { flex: 1; padding: 1rem; color: #1f2027; display: flex; flex-direction: column; flex-flow: column wrap; justify-content: flex-start}
h1 {margin-bottom: 1rem; font-size: 2.1rem; font-weight:200; color: var(--main-color-dark)}
h2 {margin-bottom: 1rem; font-size: 1rem; font-weight:200}
main {font-size: .7rem}
main .copyright { margin-top: auto; font-size: 0.8rem}
main .copyright span { color: var(--main-color); font-weight: 500; cursor: pointer}

.contenedor {width: 100%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch}
.valoracion {height: 1.31rem; width: auto}
/* añadidos ofifacil */
#cajabusqueda {background-color:#fff; padding:1rem; width:100%; border-radius: .4rem; margin-bottom: 1.2rem; border-left: .25rem solid var(--color-lateral) }
.caja { width:49%; background-color:#fff; padding: 1rem; border-radius: .4rem; margin-bottom: 1.2rem; margin-right: 1%; border-left: .25rem solid var(--color-lateral) }
.cajagrande { width:100%; background-color:#fff; padding: 1rem; border-radius: .4rem; margin-bottom: 1.2rem; border-left: .25rem solid var(--color-lateral) }
.cajita { width:31%; background-color:#fff; padding:1rem; border-radius: .4rem; margin-bottom: 1.2rem; margin-right: 1%; border-left: .25rem solid var(--color-lateral) }
.cajainterna { background-color:#fff; padding:1rem; border-radius: .4rem; margin: 1.2rem 0; border:.06rem solid #ccc; border-left: .25rem solid var(--color-lateral) }

.tablasinbordes { border-top: 0rem solid #ccc; width: 98%}
.tablasinbordes td { border-top: 0rem solid #ccc; border-bottom: 0rem solid #ccc; padding: .2rem}

table { border: .06rem solid #ccc; border-collapse: collapse; padding: 1rem; width: 100%}
.tablapetita {width: 50%}
th { border-bottom: .125rem solid var(--main-color-dark); padding: .4rem .4rem; vertical-align: top; font-weight: bold; background-color: var(--color-th); text-align: left}
td { border-top: .06rem solid #ccc; border-bottom: .06rem solid #ccc; padding: .4rem .4rem; vertical-align: top }
.filaColor { background-color: #f6f6f6}
tr:hover, .filaColor:hover { background-color: #e1edfc !important}

.borderBlack { border-left: .5rem solid black !important}
.borderRed { border-left: .5rem solid red !important}
.borderYellow { border-left: .5rem solid yellow !important}
.borderGreen { border-left: .5rem solid green !important}


.titulo { font-weight: bold}
.tercio { width: 33%}
.medio { width: 50%}
.float { float: left}
.pagado { background-color: rgba(224,250,213,1.00) !important}
.casillaroja { background-color: #FFD2E9 !important}
.casillaverde {background-color: rgba(224,250,213,1.00) !important}
.casillalila {background-color: #CC99FF !important}
.casillazul {background-color: #DFE5F9 !important}
.casillagris {background-color: #ccc !important}
.fotolistado { max-width:2.5rem; max-height:2.5rem; width:auto; height:auto }
.button { width: fit-content; height: 2rem; padding: .25rem 1.125rem; border-radius: .31rem; border: .06rem solid #245da4; cursor: pointer; background-color: #245da4; transition: all 0.2s ease-in-out 0ms; user-select: none; text-decoration: none; color: white; margin-right: .31rem}
.button:hover { background-color: #eee; color: #245da4}
.button:active { transform: scale(0.95)} 
.buttongrey { width: fit-content; min-width: 100rem; height: 3.31rem; padding: .25rem; border-radius: .31rem; cursor: pointer; background-color: #aaa; transition: all 0.2s ease-in-out 0ms; user-select: none; text-decoration: none; color: #fff; margin-right: .31rem}
.buttongrey:hover { background-color: #245da4; color: #fff}
.buttongrey:active { transform: scale(0.95)}  
.grande {padding: .4rem !important; height: 3.31rem}
.numero {text-align: right; min-width: 5rem}
.centrado {text-align: center}
.casillaform { border: .06rem solid #aaa; background-color: #fcfcfc; padding:.25rem; width:95%; border-radius: .4rem; height: 1.8rem; font-size: 0.8rem}
.casillaformpetita { border: .06rem solid #ddd; background-color: #fcfcfc; padding:.25rem; width:5rem;  border-radius: .4rem; height: 1.8rem; text-align: right; font-size: 0.8rem}
.casillaformmediana { border: .06rem solid #ddd; background-color: #fcfcfc; padding:.25rem; width:50%;  border-radius: .4rem; height: 1.8rem; font-size: 0.8rem}
.checkbox {height: 1.2rem !important}
select { border: .06rem solid #aaa; background-color: #fcfcfc; padding:.25rem; border-radius: .4rem; height: 1.8rem; font-size: 0.8rem}

.textmetas{ height: 11.2rem !important}
.textcontenido{ height: 11.2rem !important; width: 100% !important}
.textarea {font-size: 0.8rem; height: 10rem}
textarea {font-size: 0.8rem; height: 10rem !important; background-color: fcfcfc}

.sidebar-top { position: relative; display: flex; align-items: center}
.sidebar-top .logo { width: 10rem; margin:auto}
.sidebar-top h3 { padding-left: 0.5rem; font-weight: 600; font-size: 1.15rem}
.shrink-btn { position: absolute; top: 50%; height: 2.4rem; padding: 0 0.3rem; background-color: var(--main-color); border-radius: .4rem; cursor: pointer; box-shadow: 0 .18rem 1.6rem -.18rem rgba(70, 46, 118, 0.3); right: -2.65rem; transform: translateY(-50%) translateX(-.5rem); opacity: 0; pointer-events: none; transition: 0.3s}
.shrink-btn i {  line-height: 2.4rem; transition: 0.3s}
.shrink-btn:hover { background-color: var(--main-color-dark)}
nav:hover .shrink-btn, .shrink-btn.hovered { transform: translateY(-50%) translateX(0rem); opacity: 1; pointer-events: all}
.search { /*min-height: 2.7rem*/ height: 0; background-color: var(--main-color-light); /*margin: 2rem 0.5rem 1.7rem;*/ margin: 0; display: grid; grid-template-columns: 2.7rem 1fr; align-items: center; text-align: center; border-radius: 50rem; cursor: pointer; visibility: hidden}
.search input { height: 100%; border: none; background: none; outline: none; color: #fff; caret-color: #fff; font-family: inherit}
.search input::placeholder { color: var(--text-color)}
.sidebar-links ul { position: relative}
.sidebar-links li { position: relative; padding: .06rem 0}
.sidebar-links a { color: var(--text-color); font-weight: 400; font-size: 0.7rem; display: flex; align-items: center; height: 1.8rem}
.icon { font-size: 1.3rem; text-align: center; min-width: 2rem; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr}
.icon i { grid-column: 1 / 2; grid-row: 1 / 2; transition: 0.3s}
.icon i:last-child { opacity: 1; color: #fff}
.sidebar-links a.active, .sidebar-links a:hover { color: #fff}
.sidebar-links a .link { transition: opacity 0.3s 0.2s, color 0.3s}
.sidebar-links a.active i:first-child { opacity: 0}
.sidebar-links a.active i:last-child { opacity: 1}
.active-tab { width: 100%; /*height: 1.8rem; */ background-color: var(--main-color-dark); border-radius: .8rem; position: absolute; top: 2..31rem; left: 0;/* transition: top 0.3s*/}
.sidebar-links h4 { position: relative; font-size: 0.8rem; text-transform: uppercase; font-weight: 600; padding: 0 0.8rem; color: var(--text-color); letter-spacing: 0..31rem; height: 4.31rem; line-height: 4.31rem;transition: opacity 0.3s 0.2s, height 0.5s 0s}
.sidebar-footer { position: relative; margin-top: auto}
.account { display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--text-color); height: 1.8rem; width: 3.7rem; opacity: 0; pointer-events: none; transition: opacity 0.3s 0s, color 0.3s 0s}
.account:hover { color: #fff}
.admin-user { display: flex; align-items: center}
.admin-profile { white-space: nowrap; max-width: 100%; transition: opacity 0.3s 0.2s, max-width 0.7s 0s ease-in-out; display: flex; align-items: center; flex: 1; overflow: hidden}
.admin-user img { width: 2.9rem; border-radius: 50%; margin: 0 0.4rem}
.admin-info { padding-left: 0.3rem}
.admin-info h3 { font-weight: 500; font-size: 1rem; line-height: 1}
.admin-info h5 { font-weight: 400; font-size: 0.75rem; color: var(--text-color); margin-top: 0.3rem; line-height: 1}
.log-out { display: flex; height: 2.5rem; min-width: 2.4rem; background-color: var(--main-color-dark); color: var(--text-color); align-items: center; justify-content: center; font-size: 1.15rem; border-radius: 1.6rem; margin: 0 0.65rem; transition: color 0.3s}
.log-out:hover {color: #fff}
.tooltip { background-color: var(--main-color); position: absolute; right: -1.2rem; top: 0; transform: translateX(100%) translateY(-50%); padding: 0 0.8rem; font-size: 0.85rem; display: none; grid-template-rows: 1fr; grid-template-columns: 1fr; height: 1.8rem; align-items: center; border-radius: .4rem; box-shadow: 0 .18rem 1.6rem -.18rem rgba(70, 46, 118, 0.3); opacity: 0; pointer-events: none; transition: all 0.3s; text-align: center;
  white-space: nowrap}
.tooltip span { grid-column: 1 / 2; grid-row: 1 / 2; opacity: 0; transition: 0.3s}
.tooltip span.show { opacity: 1}
.tooltip-element:hover ~ .tooltip { opacity: 1; pointer-events: all}

/* When the menu shrinks */

.hide { transition: opacity 0.3s 0.2s}
body.shrink nav { width: 2rem; padding: .1rem}
body.shrink .hide { opacity: 0; pointer-events: none; transition-delay: 0s}
body.shrink .shrink-btn i { transform: rotate(-180deg)}
body.shrink .sidebar-links h4 { height: .8rem}
body.shrink .account { opacity: 1; pointer-events: all; transition: opacity 0.3s 0.3s, color 0.3s 0s}
body.shrink .admin-profile { max-width: 0; transition: opacity 0.3s 0s, max-width 0.7s 0s ease-in-out}
body.shrink .tooltip { display: grid}
body.shrink .logo {width: 3.31rem;}

/* especial bapropiedades */

.icono {width: 1.2rem; height: auto; filter: grayscale(100%); margin-right: .125rem}
.icono:hover {filter: grayscale(0%)}
.iconito {width: 1.60rem; height: auto; margin-right: .8rem}
.iconito:hover {filter: grayscale(100)}
.iconopetit  {width: 1.125rem; height: auto}
.iconogrande {width: 1.8rem; height: auto; filter: grayscale(100%); margin-right: .8rem}
.iconogrande:hover {filter: grayscale(0%)}
.iconoenorme {width: 4rem; height: auto; margin-right: .8rem; vertical-align: middle}
.iconoViviendas {width: 1.2rem; height: auto; filter: grayscale(100%); margin-right: .8rem}

.caja_profesionales {width: 100%; height: auto; text-align: center}
.boton_profesionales {width:7.9%; margin: ..06rem; transition: all 0.2s ease}
.boton_profesionales:hover {box-shadow: 0rem 0rem .25rem .125rem #999; transition: all .4s ease; text-align: center}

.caja_inmuebles {width: 100%; height: auto; text-align: center}
.boton_inmuebles {width:12%; margin: ..06rem; transition: all 0.2s ease}
.boton_inmuebles:hover {box-shadow: 0rem 0rem .25rem .125rem #999; transition: all .4s ease; text-align: center}

.cajaNoticias {width: 23%; float:left; height: auto; margin-right: 1%; border: .06rem solid #ccc}
.cajaNoticias:hover {box-shadow: 0rem 0rem .5rem .25rem #999; transition: all .4s ease}
.imagenNoticiasCaja {width: 100%; height: 15rem; overflow: hidden} 
.imagenNoticias {width: 100%; height: auto} 
.cajaModelos {width: 23%; float:left; height: auto; margin-right: 1%; border: .06rem solid #ccc}
.cajaModelos:hover {box-shadow: 0rem 0rem .5rem .25rem #999; transition: all .4s ease}
.imagenModelosCaja {width: 100%; height: 15rem; overflow: hidden} 
.imagenModelosCaja img {width: 100%; height: auto; overflow: hidden} 
.imagenModelos {width: 100%; height: auto} 
.imagenListadoFotos {max-width: 500rem; width: 100%; height: auto} 
.tipoinmueble { display: inline-block; padding: .125rem .25rem .125rem .25rem; color: #000000; text-decoration: none; border: .06rem solid #666666; position: relative; border-radius: .18rem; width: auto; font-weight: 400; font-size: 1.25rem}
.tipoinmueble:hover { opacity: .7}
.ganancias {background-color: #cef3d3 !important}
.perdidas {background-color: #f3cece !important}
/* calendario */
.noespacios {padding:0 !important; margin:0 !important}
.tablecal {width:100%; border:0rem solid #ccc; border-collapse:collapse; max-width:1200rem}
.tdcaldias {border-collapse:collapse; border:.06rem solid #ccc; text-align:center; color:#333}
.tdcal {border-collapse:collapse; border:.06rem solid #ccc; text-align:center; color:#333; height:50rem; vertical-align:top}
.cal {border-style:solid; border-width:thin; border-color:#E9ECEF; float:left; padding:.18rem; width:100%;  max-width:102.25rem}
.days {background-color: #F1F3F5}  
.hasday {background-color: #E8EEFD}  
.hasday:hover {background-color: #fff}    
.noday {background-color: #f3f3f3} 
.thcal {font-family: Arial, sans-serif; border-collapse:collapse; border:.06rem solid #ccc; background-color: #E9ECEF}
.marcarhoy {background-color: #FBDFE0 !important}
.marcarhoy:hover {background-color: #fff !important }
.fechapasada {background-color: #dadada !important}

.listadoFotos {width: 22%; float: left; margin: 1%}
.imagenListadoInmuebles {max-width: 300rem; width: 100%; height: auto} 
.imagenListadoInmueblesCRM {max-width: 100rem; width: 100%; height: auto} 
.imagenListadoInmueblesMini {max-width: 100rem; width: 100%; height: auto; margin-right: .8rem} 
.imagenListadoVivendas {max-width: 600rem; width: 100%; height: auto} 
/* bolitas de colores */
.balls{ border-radius: 50%; width: 1.25rem; height: 1.25rem; float:left; margin-right: .25rem; border: .06rem solid #cccccc}


/* botones switch */
.switch input { display: none; }
.switch { display: inline-block; width: 60px; /*=w*/ height: 30px; /*=h*/ margin: 4px; transform: translateY(50%); position: relative;}
.slider{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 30px; box-shadow: 0 0 0 2px #777, 0 0 4px #777; cursor: pointer; border: 4px solid transparent; overflow: hidden; transition: 0.2s;}
.slider:before{ position: absolute; content: ""; width: 100%; height: 100%; background-color: #777; border-radius: 30px; transform: translateX(-30px); /*translateX(-(w-h))*/ transition: 0.2s;}
input:checked + .slider:before{ transform: translateX(30px); /*translateX(w-h)*/ background-color: limeGreen;}
input:checked + .slider { box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen;}
.switch200 .slider:before { width: 200%; transform: translateX(-82px); /*translateX(-(w-h))*/ }
.switch200 input:checked + .slider:before { background-color: red; }
.switch200 input:checked + .slider {box-shadow: 0 0 0 2px red, 0 0 8px red;}


















@media (max-width: 63rem) {
  h1 {font-size: 1rem !important; font-weight: 400;}
  .caja { width:100% }
  .cajagrande { width:100% }
  .iconoenorme {width: 1.5rem}
  table { width:100% !important }
  .button { width: fit-content; height: 2rem; padding: .25rem 1.125rem; border-radius: .31rem; border: .06rem solid #245da4; cursor: pointer; background-color: #245da4; transition: all 0.2s ease-in-out 0ms; user-select: none; text-decoration: none; color: white; margin-right: .31rem}
  .botonesRapidos { display: none;}
  main {padding: 0rem;}
  .iconito {width: 2rem; height: auto; margin-right: .8rem}

}