/* Reset y estilos base */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--background);
    color: white;
}

.minvh-100 {
    min-height: 100vh;
}

/* Clases de fondo */
.bg-sidebar {
    background-color: var(--background-content) !important;
}

.bg-search {
    background-color: var(--background-search) !important;
    border-color: var(--background-search) !important;
    color: white;
}

.bg-search::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.bg-content {
    background-color: var(--background-content) !important;
}

.bg-tags {
    background-color: var(--background-tags-popular) !important;
}

/* Componentes de navegación */
.btn-toggle {
    background-color: var(--background-search) !important;
    border-color: var(--background-search) !important;
}

.nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

.nav-link:hover {
    color: white !important;
}

/* Contenedor de autenticación */
.auth-container {
    max-width: 1000px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

/* Sistema de mensajes flotantes */
.floating-messages {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.message-bubble {
    position: absolute;
    opacity: 0;
    bottom: -50px; /* Empezamos desde abajo del contenedor */
    transform: translateY(0); /* Reseteamos el transform inicial */
    animation: floatUp 8s linear infinite; /* Aumentamos la duración a 12s */
    min-width: 200px;
    max-width: 80%;
}

/* Retrasos de animación para los mensajes */
.message-bubble:nth-child(1) { animation-delay: 0s; }
.message-bubble:nth-child(2) { animation-delay: 1s; }
.message-bubble:nth-child(3) { animation-delay: 2s; }
.message-bubble:nth-child(4) { animation-delay: 3s; }

@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    5% {
        opacity: 0.8;
        transform: translateY(0);
    }
    80% {
        opacity: 0.8;
        transform: translateY(-400px); /* Ajustamos la distancia total del movimiento */
    }
    100% {
        opacity: 0;
        transform: translateY(-500px);
    }
}

/* Botones de género */
.gender-btn.selected {
    border-width: 2px;
    border-style: solid;
}

.gender-btn.male.selected {
    background-color: var(--comment-gener-male) !important;
    border-color: var(--comment-gener-male);
}

.gender-btn.female.selected {
    background-color: var(--pink) !important;
    border-color: var(--pink);
}

.gender-btn.other.selected {
    background-color: var(--purple) !important;
    border-color: var(--purple);
}
.bg-content {
    background-color: var(--background-content);
    border: none;
    padding: 10px;
}

textarea.whisper-box, input.tags-box {
    background-color: var(--background-link-profile);
    border: none;
    padding: 15px;
    color: white;
    font-size: 1em;
}

textarea.whisper-box::placeholder, input.tags-box::placeholder {
    color: white; 
    opacity: 0.8; 
}

textarea:focus, input:focus {
    outline: none;
    box-shadow: none;
}

.btn-publish {
    background-color: var(--orange);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}

.btn-publish:hover {
    background-color: var(--pink);
}

textarea.whisper-box:focus, input.tags-box:focus {
    background-color: var(--background-link-profile);
    color: white; 
    outline: none; 
    box-shadow: 0 0 5px var(--orange); 
}

.link-a{
    text-decoration: none;
    color: white;
}