/* ============================================================
   CAMPO 9 INMOBILIARIA
   HEADER NUEVO - INDEX2
============================================================ */


/* ============================================================
   HEADER
============================================================ */

.c9-header-nuevo{
    width:100%;
    background:#ffffff;
    font-family:'Poppins',sans-serif;
    position:relative;
    z-index:10000;
    border-bottom:1px solid #eeeeee;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
}


/* ============================================================
   CONTENEDOR PRINCIPAL
============================================================ */

.c9-nav-nuevo{
    width:92%;
    max-width:1380px;
    min-height:88px;
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:35px;

    box-sizing:border-box;
}


/* ============================================================
   LOGO
============================================================ */

.c9-logo-nuevo{
    display:flex;
    align-items:center;

    flex-shrink:0;

    text-decoration:none;
}

.c9-logo-nuevo img{
    display:block;

    width:auto;
    height:67px;

    object-fit:contain;
}


/* ============================================================
   MENÚ ESCRITORIO
============================================================ */

.c9-menu-nuevo{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:38px;
}

.c9-menu-nuevo a{
    position:relative;

    display:block;

    padding:32px 0;

    color:#333333;

    text-decoration:none;

    font-size:14px;
    font-weight:500;

    white-space:nowrap;

    transition:.2s ease;
}

.c9-menu-nuevo a:hover{
    color:#98001b;
}

.c9-menu-nuevo a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:21px;

    width:0;
    height:2px;

    background:#98001b;

    transform:translateX(-50%);

    transition:.25s ease;
}

.c9-menu-nuevo a:hover::after{
    width:100%;
}


/* ============================================================
   ACCIONES
============================================================ */

.c9-acciones-nuevo{
    display:flex;
    align-items:center;

    gap:15px;

    flex-shrink:0;
}


/* ============================================================
   BOTÓN PUBLICAR / PERFIL
============================================================ */

.c9-publicar-nuevo{
    min-height:43px;

    padding:0 20px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    background:#98001b;
    color:#ffffff;

    text-decoration:none;

    border-radius:7px;

    font-size:13px;
    font-weight:600;

    white-space:nowrap;

    box-shadow:
        0 5px 14px
        rgba(152,0,27,.16);

    transition:.2s ease;
}

.c9-publicar-nuevo:hover{
    background:#790016;
    color:#ffffff;

    transform:translateY(-1px);
}


/* ============================================================
   BOTÓN HAMBURGUESA
============================================================ */

.c9-burger-nuevo{
    display:none;

    width:43px;
    height:43px;

    padding:0;

    border:0;

    background:transparent;
    color:#98001b;

    align-items:center;
    justify-content:center;

    font-size:24px;

    cursor:pointer;
}


/* ============================================================
   MENÚ MOBILE
============================================================ */

.c9-menu-mobile-nuevo{
    display:none;
}


/* ============================================================
   NOTEBOOK
============================================================ */

@media (max-width:1100px){

    .c9-nav-nuevo{
        width:94%;
        gap:20px;
    }

    .c9-menu-nuevo{
        gap:22px;
    }

    .c9-menu-nuevo a{
        font-size:13px;
    }

    .c9-publicar-nuevo{
        padding:0 14px;
    }

}


/* ============================================================
   TABLET / MOBILE
============================================================ */

@media (max-width:900px){

    .c9-header-nuevo{
        position:relative;
    }

    .c9-nav-nuevo{
        width:100%;

        min-height:70px;

        padding:0 18px;

        gap:15px;
    }

    .c9-logo-nuevo img{
        height:52px;
    }

    .c9-menu-nuevo{
        display:none;
    }

    .c9-publicar-nuevo{
        display:none;
    }

    .c9-burger-nuevo{
        display:flex;
    }


    /* ========================================================
       MENÚ MOBILE DESPLEGADO
    ======================================================== */

    .c9-menu-mobile-nuevo{
        position:absolute;

        top:100%;
        left:0;

        width:100%;

        padding:8px 18px 20px;

        box-sizing:border-box;

        background:#ffffff;

        border-top:1px solid #eeeeee;

        box-shadow:
            0 15px 25px
            rgba(0,0,0,.10);

        z-index:9999;
    }

    .c9-menu-mobile-nuevo.open{
        display:flex;

        flex-direction:column;
    }

    .c9-menu-mobile-nuevo a{
        display:block;

        padding:13px 5px;

        color:#333333;

        text-decoration:none;

        font-size:14px;
        font-weight:500;

        border-bottom:1px solid #f0f0f0;
    }

    .c9-menu-mobile-nuevo a:hover{
        color:#98001b;
    }

    .c9-menu-mobile-nuevo .publicar{
        margin-top:12px;

        padding:12px 15px;

        background:#98001b;
        color:#ffffff;

        border:0;
        border-radius:7px;

        text-align:center;
    }

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width:520px){

    .c9-nav-nuevo{
        min-height:66px;

        padding:0 14px;
    }

    .c9-logo-nuevo img{
        height:48px;
    }

    .c9-burger-nuevo{
        width:40px;
        height:40px;

        font-size:22px;
    }
    
    /* ============================================================
   FAVORITOS MOBILE
============================================================ */

.c9-favoritos-nuevo{
    position:relative;

    width:42px;
    height:42px;
    min-width:42px;

    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#98001b;

    text-decoration:none;

    background:#fff;
}

.c9-favoritos-nuevo > i{
    font-size:22px;

    color:#98001b;
}

.c9-favoritos-texto{
    display:none;
}

.c9-favoritos-contador{
    position:absolute;

    top:-1px;
    right:-3px;

    width:18px;
    height:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:2px solid #fff;
    border-radius:50%;

    background:#98001b;

    color:#fff;

    font-size:9px;
    line-height:1;
    font-weight:700;
}

}


/* ============================================================
   CHAT FLOTANTE
============================================================ */

.chat-float{
    position:fixed;

    right:20px;
    bottom:130px;

    width:60px;
    height:60px;

    border-radius:50%;

    background:#98001b;
    color:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:25px;

    text-decoration:none;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.22);

    z-index:999999;

    transition:.2s ease;
}

.chat-float:hover{
    transform:scale(1.06);
}


/* ============================================================
   BADGE CHAT
============================================================ */

.chat-badge{
    position:absolute;

    top:-4px;
    right:-4px;

    min-width:24px;
    height:24px;

    padding:0 5px;

    box-sizing:border-box;

    border-radius:20px;

    background:#e00000;
    color:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:12px;
    font-weight:700;
}


/* ============================================================
   CHAT WIDGET
============================================================ */

#chatWidget{
    position:fixed;

    left:2px;
    bottom:20px;

    width:320px;
    height:550px;

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.25);

    z-index:999999;

    display:none;

    flex-direction:column;
}


/* ============================================================
   CABECERA CHAT
============================================================ */

#chatHeader{
    background:#98001b;
    color:#ffffff;

    padding:15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    font-weight:600;
}

#chatClose{
    background:none;

    border:0;

    color:#ffffff;

    font-size:24px;

    cursor:pointer;
}


/* ============================================================
   LISTA USUARIOS CHAT
============================================================ */

#chatUsuarios{
    overflow-y:auto;

    border-bottom:1px solid #eeeeee;
}

.chatUser{
    padding:12px;

    cursor:pointer;

    border-bottom:1px solid #f2f2f2;
}

.chatUser:hover{
    background:#fafafa;
}


/* ============================================================
   MENSAJES CHAT
============================================================ */

#chatMensajes{
    flex:1;

    height:320px;

    overflow-y:auto;

    padding:15px;

    background:#f5f6fa;

    display:flex;

    flex-direction:column;

    gap:10px;
}

.message{
    max-width:75%;

    padding:10px 14px;

    border-radius:14px;

    word-wrap:break-word;

    font-size:14px;
    line-height:1.4;
}

.message.me{
    align-self:flex-end;

    background:#98001b;
    color:#ffffff;

    border-bottom-right-radius:4px;
}

.message.other{
    align-self:flex-start;

    background:#ffffff;
    color:#333333;

    border:1px solid #dddddd;

    border-bottom-left-radius:4px;
}


/* ============================================================
   ENVÍO CHAT
============================================================ */

#chatEnviar{
    display:flex;

    gap:10px;

    padding:12px;

    border-top:1px solid #eeeeee;
}

#chatTexto{
    flex:1;

    padding:10px;

    border:1px solid #dddddd;

    border-radius:10px;
}


/* ============================================================
   NUEVO CHAT
============================================================ */

#chatLista{
    flex:1;

    overflow-y:auto;

    background:#ffffff;
}

#chatConversacion{
    display:none;

    flex-direction:column;

    height:100%;
}

#chatTop{
    padding:15px;

    border-bottom:1px solid #eeeeee;

    display:flex;
    align-items:center;

    gap:10px;

    background:#ffffff;
}

#chatNombre{
    font-weight:700;

    color:#222222;
}

#chatSubtitulo{
    font-size:12px;

    color:#888888;
}

#chatVolver{
    width:36px;
    height:36px;

    border:0;

    border-radius:50%;

    background:#98001b;
    color:#ffffff;

    cursor:pointer;
}

.chatUserName{
    font-size:16px;
    font-weight:700;

    color:#222222;
}

.chatUserRole{
    margin-top:2px;

    font-size:12px;

    color:#888888;
}

.chatUserLast{
    margin-top:6px;

    font-size:13px;

    color:#666666;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


/* ============================================================
   CHAT MOBILE
============================================================ */

@media (max-width:768px){

    .chat-float{
        right:15px;
        bottom:140px;

        width:54px;
        height:54px;

        font-size:22px;
    }

    #chatWidget{
        left:10px;
        right:10px;

        width:auto;

        max-width:none;
    }

}