/* Estilos Genrales */

/* Fuente Poppins: se carga con <link> en el <head> de layouts/guest.blade.php
   y dashboard/base.blade.php en vez de @import aquí — un @import dentro del
   CSS bloquea el render porque el navegador no lo descubre hasta que baja y
   parsea todo este archivo. */

body{
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Cormorant Garamond', serif !important; 
}

.bg-beige{
    background-color: #A8A299;
    color: #fff;
}


.info{
    margin-top: 15rem;
    color: #32302E;
    text-transform: uppercase;
    font-size: 4rem;
}

.fondo-obscuro{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 1;
}

.mb-6{
    margin-bottom: 5rem !important;
}
/* Estilos navbar */
#nav-logo{
    width: 170px;
}


.video-text{
    position: absolute;
    width: 100%;
    left: 0;
    top: 35%;
}

.contact-input {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    background-clip: padding-box;
    border-bottom: 1px solid #565e64;
    border-top: none;
    border-left: none;
    border-right: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-select {
    color: #212529;
    background-color: transparent;
    border-bottom: 1px solid #565e64;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.w-5{
    width: 5%;
}

.linea{
    height: 3px !important;
    width: 50%;
    opacity: 0.7;
}

.guest-footer{
    background-color: #A8A299;
    color: #fff;
}

.amenities h2{
   color: #32302E;
}

.amenities{
    margin-top: 7rem;
}

.amenitie{
    width: 160px;
    height: 160px;
    text-align: center;
    color: #32302E;
    font-size: 1.2rem;
}

.amenitie i{
    color: #32302E;
    font-size: 65px;
    position: relative;
    vertical-align: top;
    top: 20px;
    left: 0;
    width: 100%;
}

/*Inventory*/
.svg-container { 
    display: inline-block;
    position: relative;
    width: 100%;
    /* padding-bottom: 100%;  */
    vertical-align: middle; 
    overflow: hidden;
    z-index: 1;
}

.svg-container svg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.svg-container svg a{
    position: absolute;
    z-index: 10;
}

/* Colores del mapa de unidades según disponibilidad. La clase se arma en el
   blade con "building-{{ $unit->unit_status_id }}" (guest/inventory.blade.php
   y dashboard/pages/inventory.blade.php) — nunca aparece escrita tal cual en
   el código, así que una búsqueda de "código muerto" por texto literal no la
   detecta como usada. No borrar aunque parezca que nada la referencia. */
.svg-container .building-1{
    fill: darkgreen;
    fill-opacity: 0.4;
    stroke: darkgreen;
    stroke-width: 5px;
    transition: 0.2s;
}

.svg-container .building-1:hover{
    fill-opacity: 0.9;
    transition: 0.3s;
}

.svg-container .building-2{
    fill: goldenrod;
    fill-opacity: 0.4;
    stroke: goldenrod;
    stroke-width: 5px;
    transition: 0.2s;
}

.svg-container .building-3{
    fill: darkred;
    fill-opacity: 0.4;
    stroke: darkred;
    stroke-width: 5px;
    transition: 0.2s;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff !important;
    background-color: #8b8274 !important;
}

.nav-pills .nav-link {
    color: #212529;
}

.pagination{
    justify-content: center;
}

.page-item.active .page-link {
    background-color: #A8A299 !important;
    border-color: #A8A299 !important;
}

.page-link {
    color: #32302E;
}

.search-card{
    background-color: transparent;
    transition: 0.2s;
}

.search-card:hover{
    background-color: rgb(238, 238, 238);
    transition: 0.3s;
}

#master-plan h2 {
    color: #32302E;
}

#master-plan img{
    object-fit: cover;
    cursor: pointer;
}

#pay-plan{
    margin-top: 7rem;
}

#pay-plan h2{
    color: #32302E;
}

#pay-plan #pay-details{
    position: absolute;
    top: 10%;
    left: 50%;
    background-color: #EBEDEF;
    color: #32302E;
}

.payment-card{
    border-radius: 10px;
    box-shadow: 0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;
}

.payment-info{
    font-size: 1.75rem;
}

.pay-sm-text{
    font-size: 15px;
    vertical-align: top;
}

#const-specs img{
    height: 80vh;
    object-fit: cover;
    cursor: pointer;
    animation: ease-in-out;
    transition: 0.3s;
}

#const-specs img:hover{
    transform: scale(1.01);
    transition: 0.3s;
}

#const-specs h2 {
    color: #32302E;
}

#carouselExampleIndicators h2{
    color: #32302E;
}

#carouselExampleIndicators img:hover{
    cursor: pointer;
}

#carouselExampleIndicators img{
    height: 40vh;
    object-fit: cover;
}

#carouselExampleIndicators .col-lg-3 img{
    height: 30vh;
    object-fit: cover;
}

#carouselExampleIndicators{
    margin-top: 10rem;
}

#carouselExampleIndicators div span{
    font-weight: lighter;
    font-size: 2rem;
    text-align: center;
    z-index: 100;
    color: #fff;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 15px;
    text-decoration: underline;
}

/*profile card*/
.shadow-7 {
    box-shadow: 0 4px 5px -2px #0003,0 7px 10px 1px #00000024,0 2px 16px 1px #0000001f !important;
}
  /*dashboard admin-realtor*/
  .total-clients{
      background-color: #32302E;
      color: white;
      border-radius: 20px;
      box-shadow: 0px 16px 40px rgba(112, 144, 176, 0.2);
  }

  .total-realtors{
    background-color: #A8A299;
    color: white;
    border-radius: 20px;
    box-shadow: 0px 16px 40px rgba(112, 144, 176, 0.2);
}

.total-white{
    background-color: #fff;
    color: #444444;
    border-radius: 20px;
    box-shadow: 0px 16px 40px rgba(112, 144, 176, 0.2);
}

.white-tables{
    background-color: white;
    color: #444444;
    border-radius: 20px;
    box-shadow: 0px 16px 40px rgba(112, 144, 176, 0.2);
}

.d-pdf{
    background: #E5B04F;
    box-shadow: 0px 16px 40px rgba(112, 144, 176, 0.2);
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 1.4rem;
}

.d-excel{
    background: #427191;
    box-shadow: 0px 16px 40px rgba(112, 144, 176, 0.2);
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 1.4rem;
}

/*Estilos Inventory views*/
#back-to-building{
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 100;
    opacity: 0.8;
}

#carouselInventory{
    position: relative;
}

.section-views{
    width: 600px;
    height: auto;
}
rect{
    opacity: 0.85;
    animation: ease-in-out;
    transition: 0.3s;
}

rect:hover{
    opacity: 1;
}

.areasvg{
    width: 680px;
    height: 840px;
    background-color: lightcyan;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#carouselInventory .carousel-inner{
    width: 680px;
    height: 840px;
}

.section{
    fill:rgba(255, 255, 255, 0.3);
    stroke: lightslategray;
    stroke-width: 3;
    transition: 0.1s;
}

.section:hover{
    fill:rgba(255, 255, 255, 0.8);
    transition: 0.2s;
}

.disponible{
    fill:rgba(43, 126, 46, 0.4);
    stroke: darkgreen;
    stroke-width: 2;
    transition: 0.2s;
}

.disponible:hover{
    fill:rgba(43, 126, 46, 0.9);
    cursor: pointer;
    transition: 0.2s;
}


.apartado{
    fill:rgba(209, 169, 0, 0.4);
    stroke: goldenrod;
    stroke-width: 2;
    transition: 0.2s;
}

.apartado:hover{
    fill:rgba(209, 169, 0, 0.9);
    cursor: pointer;
    transition: 0.2s;
}

.vendido{
    fill:rgba(183, 0, 0, 0.4);
    stroke: darkred;
    stroke-width: 2;
    transition: 0.2s;
}

.vendido:hover{
    fill:rgba(183, 0, 0, 0.9);
    cursor: pointer;
    transition: 0.2s;
}


/* .nav-item button{
    background-color: #1f3f5d !important;
    transition: 0.2s;
}

.nav-item button:hover{
    background-color: #3c4b64 !important;
    transition: 0.3s;
} */

#searchModal .modal-header{
    border-bottom: none !important;
}

#unitModal .modal-content{
    background-color: #1f3f5d;
    color: #fff;
}

.unit-info{
    position: absolute;
    width: 100%;
    left: 0;
    top: 40%;
    color: #fff;
    text-align: center;
    z-index: 5;
}

.badge-success{
    background-color: #198754;
}

.badge-warning{
background-color: #ffc107;
}

.badge-danger{
    background-color: #dc3545;
}

.avaliable{
    background-color: #2B7E2E;
    border-radius: 4px;
    color: #fff;
}

.modal-footer{
    justify-content: space-between !important;
    border-top: none !important;
}

.btn-brown{
    background-color: #A8A299;
    color: #32302E;
    font-weight: bold;
    transition: 0.2s;
    box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
}

.btn-brown:hover{
    background-color: #8b8274;
    color: #32302E !important;
    transition: 0.3s;
}

.btn-addRealtor{
    background-color: #8b8274;
    color: #fff;
    transition: 0.2s;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.btn-addRealtor:hover{
    background-color: #776c5b;
    color: #fff !important;
    transition: 0.3s;
}

.btn-addClient{
    background-color: #161514;
    color: #fff;
    transition: 0.2s;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.btn-addClient:hover{
    background-color: #000000;
    color: #fff !important;
    transition: 0.3s;
}

.btn-blanco{
    background-color: #fff;
    color: #32302E;
    font-weight: bold;
    transition: 0.2s;
    box-shadow: 2px 2px rgba(0, 0, 0, 0.5);
}

.btn-blanco:hover{
    background-color: #3c4b64;
    color: #fff;
    transition: 0.3s;
}

/*Estilos menu inventory*/

.vista-frontal{
    width: 100%;
    height: 200px;
    text-decoration: none;
    position: relative;   
    border-radius: 10px;
    padding: 0;
}

.vista-frontal img{
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    z-index: 10;
}

.vista-frontal span{
    display: block;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    z-index: 15;
    border-radius: 10px;
    font-size: 4rem;
    line-height: 3;
    color: white;
    transition: 0.2s;
}

.vista-frontal span:hover{
    background-color: rgba(0, 0, 0, 0.3);
    transition: 0.3s;
    text-shadow: 1px 2px black;
}

/*Estilos single inventory*/

.form-select-inventory {
    display: block;
    width: 65%;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: none;
    border-radius: .25rem;
    /* transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@media (min-width: 360px) and (max-width: 767px) {

    .unit-info{
        top:30%;
    }

    #pay-plan h2{
    font-size: 1.5rem;
    }

.payment-info{
    font-size: 1rem;
}

#pay-plan #pay-details{
    position: relative;
    top: initial;
    left: initial;
}

.pay-sm-text{
    font-size: 0.5rem;
}


#inventory-info{
    background-color: #1f3f5d;
    color: #fff;
    margin-left:0;
    margin-right:0;
    font-size: 1rem;
}

    #const-specs h2 {
        font-size: 1.5rem;
  
    }

    .areasvg{
        width: 100%;
        height: 400px;
    }

    .section-views{
        width: 100%;
        height: auto;
    }

    .contact h3{
        font-size: 1.5rem;
    }
    .contact{
        right: 0px;
        left: 20px;
        top: 10px;
        width: 100%;
        height: 100%;
    }

    #carouselExampleIndicators{
        margin-top: 8rem;
    }

    #carouselExampleIndicators h2, #master-plan h2{
        font-size: 1.5rem;
    }

    .amenities .row{
        width: 100%;
        height: 70vh;
    }

    .amenities h2{
        font-size: 2rem;
    }

    .info{
        margin-top: 5rem;
        font-size: 1.5rem;
    }

    .vista-frontal span{
        font-size: 2rem;
        line-height: 6;
    }

   .form-select-inventory {
     width: 100%;
    }

    /* Estilos navbar */
    #nav-logo{
        width: 140px;
    }
    
}

@media(min-width: 768px) and (max-width: 992px){
    #pay-plan #pay-details{
        position: relative;
        top: initial;
        left: initial;
    }

    .amenities h2{
        font-size: 3rem;
    }

    #carouselExampleIndicators h2, #master-plan h2{
        font-size: 2.5rem;
    }

    #const-specs h2 {
        font-size: 2.5rem;
    }

    #pay-plan h2{
        font-size: 2.5rem;
    }

    .form-select-inventory {
        width: 100%;
    }
   
}
/* ==========================================================================
   Guest site only (fusionado desde guest-styles-v1.css)
   Estas reglas requieren la clase .guest-page en <body> — ver
   layouts/guest.blade.php y las landing pages en guest/landing-pages/.
   ========================================================================== */

.h171-main-navbar li{
    margin-left: 1.5rem;
}

.fs-0{
    font-size: 3.5rem !important;
}

nav.bg-transparent .h171-main-navbar li a{
    font-size: 1.2rem;
    color: #eee !important;
    padding: .4rem 1.2rem !important;
}

nav.bg-beige .h171-main-navbar li a{
    font-size: 1.2rem;
    padding: .4rem 1.2rem !important;
}

nav.bg-transparent .h171-main-navbar li a.active{
   border-bottom: 2px solid #eee;
}

nav.bg-beige .h171-main-navbar li a.active{
   border-bottom: 2px solid #eee;
}

nav.bg-transparent .h171-main-navbar li:last-child a{
    width: 50px;
    height: 50px;
    background-color: #eee;
    color: #1f3f5d !important;
    padding: .5rem .5rem !important;
    text-align: center;
    border-radius: 3rem;
    font-size:1.4rem;
}

nav.bg-beige .h171-main-navbar li:last-child a{
    width: 50px;
    height: 50px;
    background-color: #eee;
    color: #A8A299 !important;
    padding: .5rem .5rem !important;
    text-align: center;
    border-radius: 3rem;
    font-size:1.4rem;
}

.blackout{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Antes era un selector "label" global en guest-styles-v1.css. Se limita a
   .guest-page para no pintar todas las <label> del dashboard (front-style.css
   también lo carga dashboard/base.blade.php). */
.guest-page label{
    color: #768192;
}

#whatsapp {
    position: fixed;
    z-index: 1000;
    right: 25px;
    bottom: 25px;
    width: 60px;
    height: 60px;
    background-color:#25D366 ;
    color: #fff !important;
    text-align: center;
    border-radius: 50%;
    font-size: 45px;
    transition: 0.3s;
    line-height: 1.4;
}

#whatsapp:hover {
    transition: 0.3s;
    background-color: #128C7E;
    color: #F1F2F5 !important;
}
