/* =========================================
   COMPONENTES UI
========================================= */

/* ===== INPUT ===== */

input[type="text"] {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-md);
    border: 2px solid rgba(0,0,0,0.1);
    outline: none;
    background-color: #fff;
    color: var(--color-text-primary);
}

input[type="text"]::placeholder {
    color: var(--color-text-muted);
}

input[type="text"]:focus {
    border-color: var(--color-primary);
}

/* ===== BOTONES ===== */

button {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
}

.btn-primary {
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    font-size: var(--font-size-md);
    background: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-primary-dark)
    );
    color: #000;
}

/* ===== MESSAGE CARD ===== */

.message-card {
    background-color: var(--color-surface);
    padding: var(--space-lg);
    border-left: 6px solid var(--color-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.message-card.new {
    animation: fadeInUp var(--transition-normal);
}

.message-card .username {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.message-card .text {
    font-size: var(--font-size-md);
    font-weight: 500;
    letter-spacing: -0.2px;
}

/* ===== PREMIUM ===== */

.message-card.premium {
    border-left-color: var(--color-premium);
    background: linear-gradient(
        180deg,
        rgba(255,61,0,0.08),
        rgba(255,255,255,0)
    );
}

/* ===== BADGES ===== */

.badge {
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.badge-premium {
    color: var(--color-premium);
}