@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;500;600&family=Roboto:wght@300;400;900&display=swap');
@import url("bootstrap-icons.min.css");
*,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding:0;outline:none;}
html{overflow-y:scroll; overflow-x:hidden;}
article,aside,details,figcaption,figure,footer,header,hgroup,sub,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{color:#333;font-family: 'Roboto', sans-serif;font-size:14px; font-weight:400;margin:0;counter-reset:contador;}
a{color:#333;background:transparent;text-decoration:none}
a:focus{outline:0}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:800}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0;line-height:0}
img{width:100%}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],/* 1 */
input[type="reset"],input[type="submit"]{cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="search"]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
.clear{clear:both}
[class^="show"]{display: none}
a,button,a:after,button:after,a:before,button:before,input[type="submit"],button[type="submit"],input[type="reset"],button[type="reset"]{
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}
a:hover,a:after,button:after,a:before,button:before,button:hover,input[type="submit"]:hover,button[type="submit"]:hover,input[type="reset"]:hover,button[type="reset"]:hover{
    -webkit-transform: opacity(1);
    -moz-transform: opacity(1);
    -ms-transform: opacity(1);
    -o-transform: opacity(1);
    transform: opacity(1)
}
:root {
    --rykem-textgen:#777;
    --rykem-textTit:#444;
    --real-extra-blue:#54C8E8;
    --real-extra-yellow:#F4B223;
    --real-extra-orange:#FF6C0E;
    --real-extra-rojo:#EA0029;
    --real-extra-purple:#520dc2;
    --real-extra-green:#0f5132;
    --real-extra-pink:#ab296a;
    --real-bg-body:#f5f7fa;
}
         
.btn-primary-real {
    color: #FFF;
    transition: 0.5s;
    background-image: linear-gradient(to right, var(--real-blue) 0%,  var(--real-blue-dark)  51%, var(--real-blue)  100%);
    background-size: 200% auto;
    border-color: var(--real-blue);
}
.btn-primary-real:hover {
    color: #FFF;
    background-position: right center;
    background-color: var(--real-blue-dark);
    border-color: var(--real-blue-dark);
}
/* LOGIN */
.btn-primary {
    color: #fff;
    background-color: #1e468a;
    border-color: #1e468a;
}
.body-login {
    height: 100%;
    margin: 0;
    background-color:var(--real-bg-body);
    overflow: hidden; /* Evita scrollbars si el video se ajusta */
}
.brand-logo {
    color:#6c757d
}
 .content-login {
    position:relative;
    display:flex;
    align-items: center;
    height:100vh;
}
.login-logo {
    width:200px;
    display:block;
    margin: 0 auto 10px auto;
}
.content-login:before {
    content:'';
    display:block;
    position:absolute;
    background:#1e468a;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    width: 100%;
    height: 45%;
    left:0;
    top:0;
}
.main-container {
    width:90%;
    max-width: 520px;
    position: relative;
    z-index: 1;
    margin:0 auto;
    display:block;
}
.login i:before {
    font-size: 25px;
    color:var(--rykem-textTit);
}
#login-form input {
    background-color: rgba(0,0,0,.03);
}
/* LOGIN */
.btn-secondary {
    color: #FFF;
    background-color: var(--real-blue-dark);
    border-color: var(--real-blue-dark);
}
.btn-secondary:hover {
    color: #FFF;
    background-color: var(--real-blue);
    border-color: var(--real-blue);
}
.card  .card-title {
    color: var(--real-blue-dark);
}
.popover {
    max-width: 350px;
}
.main {
    background-color: var(--real-bg-body);
}
.navbar-movil {
    display: none;
}
.navbar-header {
    border-bottom: 2px solid var(--real-blue-dark);
    background-color: #FFF;
}
.navbar-logo img {
    height:50px;
    width:auto
}
.navbar-logo span {
    color: var(--rykem-textgen);
    font-size: 20px;
    font-weight: 500;
    vertical-align: middle;
}
.icon-session {
    font-size: 30px;
    color: var(--real-blue);
}
.notifications-panel {
    position: absolute;
    right: 0;
    top: 40px;
    width: 300px;
}
/* Botones real */
.btn-real-primary {
    color: var(--real-blue);
    border: 1px solid var(--real-blue);
    background-color: var(--real-blue-dark)0d;
}
.btn-real-primary:hover {
    color: var(--real-blue-dark);
}
.btn-real-green {
    font-size: 12px;
    font-weight: 400;
    border: inherit;
    color: var(--real-extra-green);
    background-color: rgba(217, 251, 208, 0.7);
}
.btn-real-blue {
    font-size: 12px;
    font-weight: 400;
    border: inherit;
    color: var(--real-blue);
    background-color: rgba(0, 130, 202, 0.07);
}
.btn-real-orange {
    font-size: 12px;
    font-weight: 400;
    border: inherit;
    color: var(--real-extra-rojo);
    background-color: rgba(234, 0, 41, 0.07);
}
.nav-link {
    color: var(--real-blue);
}
.previewImage img{
    width: auto;
    height: auto;
    max-height: 440px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
/* Nav lateral */
.navbar-vertical {
    background-image: linear-gradient( 45deg,  var(--real-blue) 11.2%, var(--real-blue-dark) 74.6% );
    position: fixed;
    display: inline-block;
    z-index: 1020;
    top: 4rem;
    padding: 15px 10px;
    background-color: #FFF;
    border-right:1px solid var(--real-blue);
    height: calc(100vh - 4rem);
}
.navbar-vertical-content {
    max-height: 100vh;
    overflow: auto;
}
.navbar-vertical-footer {
    position: fixed;
      width: 15.875rem;
      height: 4rem;
      display: none;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      bottom: 0;
      border-top: 1px solid var(--phoenix-navbar-footer-border-color);
      border-right: 1px solid var(--phoenix-navbar-footer-border-color);
      -webkit-transition: width 0.2s ease;
      -o-transition: width 0.2s ease;
      transition: width 0.2s ease;
    background-color: var(--real-blue-dark);
    color: #FFF;
}
.navbar-vertical .mav-item a:hover .nav-link-text-wrapper{
    color: var(--real-blue);
}
.navbar-top .nav-item  i {
    color: var(--real-blue);
}
.navbar-vertical .mav-item {
    border-bottom: 1px solid #DDDDDD4f;
}
.mav-item a {
    color: #FFF;
    padding: 7px 3px;
    font-weight: 600;
}
.list-group .list-icon {
    color: var(--real-blue-dark);
    font-size: 16px;
    margin-right: 5px;
}
.mav-item .nav-link-icon{
    color: #FFF;
    font-size: 16px;
    margin-right: 5px;
}
.list-group .list-text, 
.mav-item .nav-link-text-wrapper {
    font-size: 14px;
    color: var(--rykem-textgen);
}
/* Templates Propiety*/
.content {
      min-height: 100vh;
      padding: calc(var(--phoenix-navbar-top-height) + 2rem) 1.5rem 6.375rem 1.5rem;
      position: relative;
      margin-left: 16.6%;
      margin-top: 4rem;
}
.vertical-tab .nav-link.active::after {
    content: "";
    position: absolute;
    width: .75rem;
    height: .75rem;
    top: 18px;
    right: -6px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #f5f7fa;
    border-width: 1px 0 0 1px;
    border-style: solid;
    border-color:#dee2e6;
}
.tit-header {
    color: var(--rykem-textTit);
    border-bottom:2px solid var(--rykem-textTit) ;
}
.text-gen p {
    margin-bottom: 0;
    font-size: 12px;
    color: var(--rykem-textgen);
}
.form-label {
    font-weight: 600;
    color: var(--rykem-textgen);
}
/* Templates Propiety*/
/* Pagos */
.mesContrato {
    background-color: #FFF;
    border-radius: 15px;
    padding: 2rem;
    width: 100%;
    margin-bottom: 25px;
}
.imageFileCard {
    color: var(--rykem-textgen);
    width: 100%;
    text-align: center;
    padding: 3rem 2rem;
    border: 1px dashed #dee2e6;
    border-radius: .5rem;
    cursor: pointer;
    margin-top: 5px;
}
.imageFileCard i{
    font-size: 40px;
    color: #6e7891;
} 
.timeline-item-bar {
    position: relative;
    height: 100%;
}
.icon-item {
    color: #888;
    background-color: #f8f9fa;
    border: 1px solid #CCC;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    position: relative;
    z-index: 1;
}
.timeline-item {
    cursor: pointer;
    position: relative;
}
.timeline-item:hover .icon-item {
    background-color: #FFF;
    color: #000;
}
.tipo-renta.active .icon-item,
.timeline-item.tipo-renta:hover .icon-item{
    border:1px solid var(--real-blue);
    color:var(--real-blue);
}
.tipo-agua.active .icon-item,
.timeline-item.tipo-agua:hover .icon-item{
    border:1px solid #005585;
    color:#005585;
}
.tipo-luz.active .icon-item,
.timeline-item.tipo-luz:hover .icon-item{
    border:1px solid #ffcc85;
    color:#ffcc85;
}
.tipo-mantenimiento.active .icon-item,
.timeline-item.tipo-mantenimiento:hover .icon-item{
    border:1px solid #1c6c09;
    color:#1c6c09;
}
.tipo-gas.active .icon-item,
.timeline-item.tipo-gas:hover .icon-item{
    border:1px solid #60c6ff;
    color:#60c6ff;
}
.timeline-item.active .timeline-bar,
.timeline-item:hover .timeline-bar {
    border-right: 2px dashed #444;
}
.timeline-item-bar .timeline-bar {
    border-right: 2px dashed #CCC;
    z-index: 0;
    position: absolute;
    height: 100%;
    left: 20px;
    top: 0;
}
.editAdmin {
  border: 1px solid #CCC;
  font-size: 15px;
  color: #000;
}
.delateAdmin {
  border: 1px solid #CCC;
  font-size: 15px;
  color: var(--real-extra-rojo);
}
.badge-lessor,
.badge-complete {
    line-height: initial;
    text-transform: uppercase;
      padding: 2px 8px;
      background-color: #d9fbd0;
      color: #1c6c09;
      border: 1px solid #90d67f;
}
.badge-tenant,
.badge-pendiente {
    line-height: initial;
    text-transform: uppercase;
      padding: 2px 8px;
      background-color: #ffefca;
      color: #bc3803;
      border: 1px solid #ffcc85;
}
.badge-admin,
.badge-proximo {
    line-height: initial;
    text-transform: uppercase;
      padding: 2px 8px;
      background-color: #c7ebff;
      color: #005585;
      border: 1px solid #60c6ff;
}
.badge-rechazado {
    line-height: initial;
    text-transform: uppercase;
      padding: 2px 8px;
      background-color: #ffe0db;
      color: #b81800;
      border: 1px solid #f48270;
}
.scroll-image {
    max-width: max-content;
    overflow-x: scroll;
}
#resultado {
    top: 5rem;
}
.btn-Pagos {
    display: none;
}
.contImagePage .card {
    background-color: transparent;
}
.btn-group button {
    width: 100%;
}
#previewImage {
    text-align: center;
    background-color: transparent;
}
#previewImage img{
    width: auto;
    height: auto;
    max-height: 300px;
    max-width: 100%;
}
.lightboxModalContent {
    min-width: 250px;
    max-width: 100%;
}
.lightboxModal {
    background-image: var(--back-inspect);
    background-size: cover;
    background-position: center;
    width: 100%;
    display: inline-block;
    height: 200px;
    min-width: 250px;
    max-width: 250px;
}
.imgePropeties {
    min-width: 250px;
    margin-right: 15px;
    height: 200px;
}
div.modal-backdrop:nth-child(2) {
    display: none;
}
.whatsapp-float-btn {
      position: fixed;
      bottom: 20px;
      right: 10px;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #25d366;
      color: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-float-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.whatsapp-float-btn i {
      font-size: 2.5rem;
}
/* Estilo de la Tarjeta Row "Tech" */
.tech-card-item {
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
}

/* Efecto Hover para sensación tecnológica */
.tech-card-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--real-blue);
}

/* Indicador lateral de estado (Línea de color a la izquierda) */
.status-indicator {
    width: 5px;
    height: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}
.status-active { background-color: #10b981; } /* Verde */
.status-pending { background-color: #f59e0b; } /* Naranja */

/* Imagen */
.prop-img-container {
    width: 100%;
    height: 200px; /* Altura fija en móvil */
    overflow: hidden;
}

.prop-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.tech-card-item:hover .prop-img {
    transform: scale(1.2);
}

/* Textos y Datos */
.data-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 2px;
}
.data-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: #212529;
}
.amount-value {
    color: var(--real-blue);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Barra de Progreso Tech */
.progress-tech {
    height: 6px;
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
}
.progress-bar-tech {
    background: linear-gradient(90deg, var(--real-blue) 0%, #818cf8 100%);
}

/* Botones de Acción */
.btn-tech-action {
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
}
.btn-tech-outline {
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #4b5563;
}
.btn-tech-outline:hover {
    background: #f3f4f6;
    color: #111827;
    border-color: #d1d5db;
}
.btn-tech-primary {
    background: rgba(79, 70, 229, 0.1);
    border: none;
}
.btn-tech-primary:hover {
    background: rgba(79, 70, 229, 0.2);
    color: var(--real-blue);
}

.btn-tech-secondary {
    background: #95dbfc;
    border: none;
}
.btn-tech-secondary:hover {
    background: rgb(0 50 89);
    color:#FFF;
}

/* Media Query para Escritorio (Hacerlo Row) */
@media (min-width: 992px) {
    .tech-card-item {
        display: flex;
        align-items: center;
    }
    .prop-img-container {
        width: 220px; /* Ancho fijo imagen escritorio */
        height: auto;
        min-height: 180px; /* Altura mínima */
        align-self: stretch; /* Estirar imagen a la altura de la tarjeta */
    }
    .card-content {
        flex: 1;
        padding: 1.5rem;
    }
    .actions-container {
        border-left: 1px solid #f0f0f0;
        padding-left: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.5rem;
        min-width: 160px;
    }
}

/* Media Query para Móvil (Ajustes) */
@media (max-width: 991px) {
    .card-content {
        padding: 1.25rem;
    }
    .actions-container {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #f0f0f0;
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .btn-tech-action {
        flex: 1;
        text-align: center;
    }
    .status-indicator {
        height: 5px;
        width: 100%;
        top: 0;
        left: 0;
    }
}
@media screen and (max-width : 936px) {
    .navbar-header {
        background-color: var(--real-blue-dark);
    }
    .navbar-top .nav-item i,
    .navbar-logo span {
        color: #FFF;
    }
    .mb-4 {
        margin-bottom: 0.5rem !important;
    }
    #infPagos {
        padding: 0;
    }
    .tit-header {
        border-bottom: inherit;
    }
      .navbar-movil {
          display:block;
    }
    .lightboxModal {
    min-width: 140px;
    height: 100px;
    }

  .telphone-header b {
      display: none;
  }
  .whatsapp-float-btn {
      bottom: 70px;
  }
  .btn-Pagos {
        display: block;
        background-color: transparent;
        color: #FFF;
        font-size: 35px;
        border-style: none;
        width: 100%;
        text-align: end;
    }
  .contImagePage {
      position: fixed;
      display: none;
      z-index: 9;
      left: 0;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      align-content: center;
      top: 0;
  }
  .contImagePage a {
      pointer-events: none
  }
  .navbar-logo img {
      height:40px;
  }
  .navbar-logo span {
      font-size: 14px;
  }
  .navbar-vertical {
      display: none;
  }
  .content {
      margin-bottom: 2rem;
      margin-left: 0;
  }
  .navbar-logo img {
      height: 40px;
  }
  .navbar-nav li {
      font-size: 20px;
  }
  .navbar-nav li.icon-session {
      font-size: 18px;
  }
  .custom-bottom-nav {
      background-color: #FFF;
      box-shadow: 0px -3px 9px -4px rgba(0, 0, 0, .15);
  }
  .custom-bottom-nav a i {
      font-size: 20px;
  }
  .nav-center {
      background-color: var(--real-blue);
      color: #FFF;
      border-radius: 50%;
  }
  .content.col-10 {
      width: 100%;
  }
  #infPagos {
      width: 100%;
  }
  .mesContrato {
      padding: 2rem 0.5rem;
  }
  /*Pagos*/
}