/*body { font-family: 'Segoe UI', sans-serif; background: #f0f2f5; display: flex; justify-content: center; }
.container-central { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; margin-top: 50px; }
.btn { padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block; margin: 10px; }
.btn-primario { background: #007bff; color: white; }
.btn-secundario { background: #6c757d; color: white; }
.caja-mensajes { height: 400px; overflow-y: auto; background: #e5ddd5; padding: 15px; display: flex; flex-direction: column; }
.item-usuario { display: flex; justify-content: space-between; padding: 15px; background: white; margin-bottom: 5px; text-decoration: none; color: black; border-radius: 5px; }
.status-bolita { width: 12px; height: 12px; border-radius: 50%; }
.online { background: #28a745; }
.offline { background: #ccc; }*/



/* Ajuste para el contenedor principal para que no se pegue al banner */
.container-central {
    margin-top: -50px; /* Sube un poco el contenido sobre el banner para un efecto moderno */
    position: relative;
    z-index: 10;
}

/* Estilo de la tarjeta profesional */
.tarjeta-profesional {
    background: white;
    border-radius: 15px;
    padding: 15px; /* Reducimos padding para ganar espacio */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 15px;
    position: relative; /* Mantenemos esto para el rating */
    text-align: left;
}

/* Encabezado con Nombre y Match */
.tarjeta-header-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.tarjeta-header-user h4 {
    margin: 0;
    font-size: 1.1em;
    font-weight: bold;
}

/* El badget Match ahora NO es absoluto */
.badget-match-inline {
    background: #ff8c00;
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
}

#caja-mensajes {
    height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: #fdfdfd;
    border: 1px solid #ddd;
}

.burbuja {
    max-width: 70%;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    font-family: sans-serif;
    word-wrap: break-word;
}

.enviado {
    align-self: flex-end;
    background-color: #dcf8c6; /* Verde tipo WhatsApp */
    border-bottom-right-radius: 2px;
}

.recibido {
    align-self: flex-start;
    background-color: #ffffff;
    border: 1px solid #eee;
    border-bottom-left-radius: 2px;
}

.btn-nuevo-mensaje {
    background: #ff5722; /* Naranja vibrante */
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    animation: pulso 1.5s infinite; /* Opcional: un efecto de parpadeo */
}

@keyframes pulso {
    0% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 87, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0); }
}