/**************************************/
/************** CUSTOM ****************/
/**************************************/

body{
    font-family: "Outfit", sans-serif;
}

.nav-item a {
    font-family: "Outfit", sans-serif;
    font-weight: 500;
}

.logo {
    width: 150px;
}
.logo-cliente{
    width: 250px;
}
footer {
    background-image: url('assets/img/patron.png');
}

.banner-home {
    height: 250px;
    object-fit: cover;
}

.bg-naranja {
    background-color: #ff6800;
}

.text-naranja {
    color: #ff6800; 
}

.texto-disclaimer {
    font-size: 0.6rem;
}

.logo-editar-negocio {
    max-height: 150px;
}

.badge{
    border-radius: 0px !important;
}

/************** HISTORIAL DE ESTADOS DE UNA DENUNCIA ****************/

.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    padding-bottom: 20px;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 20px;
    bottom: -10px;
    width: 2px;
    background-color: #e0e0e0;
}

.timeline-marker {
    position: absolute;
    left: -28px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #6c757d;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #e0e0e0;
}

.timeline-item.active .timeline-marker {
    background-color: #28a745;
    width: 16px;
    height: 16px;
    left: -30px;
    top: 3px;
}

button, a{
    border-radius: 0px !important;
}

/* ==========================================
   ESTILOS DEL CHAT
   ========================================== */

   .mensaje {
    max-width: 70%;
    word-wrap: break-word;
}


.mensaje-recibido {
    align-self: flex-start;
}

.mensaje-sistema {
    align-self: center;
    font-style: italic;
}

.mensaje-info {
    font-size: 0.75rem;
    opacity: 0.8;
}

.mensaje-archivo:hover {
    background-color: rgba(0,0,0,0.05);
}

@media (max-width: 767px) {
    .banner-home {
        height: 200px;
    }
}