:root {
    --fg: #111;
    --muted: #666;
    --border: #ddd;
    --radius: 12px;
    --space: 16px;
}

/* Base */
body {
    font-family: system-ui, sans-serif;
    margin: 22px;
    color: var(--fg);
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Badge */
.badge {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef;
}

/* Hero */
.hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    margin: 20px 0;
}

/* Avatar */
.avatar {
    width: 148px;
    height: 148px;
    border-radius: 50%;
}

/* Row */
.row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;        /* ⬅ Centramos */
}

/* Buttons */
button,
.btn {
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    width: auto;
    display: inline-block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.btn-primary {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* Mobile behavior */
@media (max-width: 640px) {
    button,
    .btn {
        width: 100%;
    }
}

/* Hide helper */
.hide {
    display: none;
}

/* Text styles */
.small {
    color: var(--muted);
}

/* Card */
.card {
    border: 1px solid #eee;
    border-radius: var(--radius);
    padding: 16px;
}

/* subtitles */
.sub {
    color: var(--muted);
}

/* Grid for forms */
.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Center submit button in grid forms */
.grid button {
    grid-column: 1 / -1;
    justify-self: center;
}