/* ═══════════════════════════════════════════════════════
   CATÁLOGO DE MOEDAS — Tema Cinza Moderno
   Fonte: Roboto · Paleta: Cinzas quentes + Âmbar/Dourado
   ═══════════════════════════════════════════════════════ */

:root
{
    /* ── Escala de cinza (tons quentes, não frios) */
    --bg-base: #2B2B2B; /* fundo da página */
    --bg-card: #333333; /* cards e painéis */
    --bg-header: #3A3A3A; /* cabeçalho de card, navbar */
    --bg-elevated: #404040; /* hover, inputs */
    --bg-input: #2E2E2E; /* campos de formulário */
    --bg-stripe: #363636; /* linhas alternadas */
    /* ── Bordas */
    --borda: #484848;
    --borda-hover: #5A5A5A;
    --borda-light: #3E3E3E;
    /* ── Textos — todos com contraste garantido sobre cinza */
    --txt-primary: #F0F0F0; /* texto principal */
    --txt-secondary: #BDBDBD; /* texto secundário */
    --txt-muted: #888888; /* texto apagado */
    --txt-disabled: #606060;
    /* ── Âmbar / Dourado (destaque, posse, foco) */
    --ouro: #F5A623;
    --ouro-claro: #FFBE57;
    --ouro-escuro: #C47F0A;
    --ouro-muted: rgba(245,166,35,0.13);
    --ouro-glow: rgba(245,166,35,0.28);
    /* ── Azul (links, ações secundárias) */
    --azul: #5B9BD5;
    --azul-hover: #4A87C2;
    --azul-muted: rgba(91,155,213,0.13);
    /* ── Vermelho */
    --vermelho: #E05252;
    --vermelho-muted: rgba(224,82,82,0.13);
    /* ── Verde */
    --verde: #5CB85C;
    --verde-muted: rgba(92,184,92,0.13);
    /* Bootstrap overrides */
    --bs-body-bg: var(--bg-base);
    --bs-body-color: var(--txt-primary);
    color-scheme: dark;
    accent-color: var(--ouro);
}

/* ─── Reset e Base ──────────────────────────────────── */
*, *::before, *::after
{
    box-sizing: border-box;
}

body
{
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    background-color: var(--bg-base);
    color: var(--txt-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 0.9375rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6
{
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-weight: 700;
    color: var(--txt-primary);
    line-height: 1.3;
    letter-spacing: 0.01em;
}

a
{
    color: var(--azul);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover
{
    color: var(--azul-hover);
}

::selection
{
    background: var(--ouro-muted);
    color: var(--txt-primary);
}

/* ─── Navbar ────────────────────────────────────────── */
#navbar-principal
{
    background: #222222;
    border-bottom: 3px solid var(--ouro-escuro);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

#navbar-principal .container-xl
{
    display: flex;
    align-items: stretch;
    min-height: 54px;
}

.navbar-brand
{
    display: flex !important;
    align-items: center;
    align-self: flex-start;
    height: 54px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.brand-logo
{
    height: 36px;
    width: auto;
    display: block;
}

.navbar-dark .nav-link
{
    color: var(--txt-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.78rem;
    transition: color 0.15s, border-color 0.15s;
}

.navbar-dark .nav-link:hover
{
    color: var(--ouro-claro);
    border-bottom-color: var(--ouro);
}

.navbar-dark .nav-link.active
{
    color: var(--ouro);
    border-bottom-color: var(--ouro);
}

/* ─── Page Header ───────────────────────────────────── */
.page-header
{
    background: var(--bg-header);
    border-bottom: 1px solid var(--borda);
    padding: 1.5rem 0 1.1rem;
}

.page-header-sm
{
    padding: 0.9rem 0 0.75rem;
}

.page-title
{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--txt-primary);
    margin: 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.page-subtitle
{
    color: var(--txt-muted);
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    font-weight: 400;
}

/* ─── Botões ────────────────────────────────────────── */
.btn
{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    border-radius: 4px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    letter-spacing: 0.02em;
}

/* Primário = dourado (ação principal) */
.btn-primary
{
    --bs-btn-active-bg: var(--ouro-escuro);
    --bs-btn-active-border-color: var(--ouro-escuro);
    --bs-btn-active-color: #fff;
    background: var(--ouro-escuro);
    border: 1px solid var(--ouro-escuro);
    color: #fff;
}

.btn-primary:hover
{
    background: var(--ouro);
    border-color: var(--ouro);
    color: #1a1a1a;
    box-shadow: 0 2px 10px var(--ouro-glow);
}

.btn-primary:active
{
    transform: translateY(1px);
}

.btn-primary:focus-visible
{
    box-shadow: 0 0 0 3px var(--ouro-glow);
    outline: none;
}

/* Garante que o :active de todos os botões não vaze azul do Bootstrap */
.btn-primary:active,
.btn-primary:first-child:active,
:not(.btn-check) + .btn-primary:active
{
    background-color: var(--ouro-escuro) !important;
    border-color: var(--ouro-escuro) !important;
    color: #fff !important;
}

.btn-outline-primary:active,
.btn-outline-primary:first-child:active,
:not(.btn-check) + .btn-outline-primary:active
{
    background-color: var(--ouro-muted) !important;
    border-color: var(--ouro-escuro) !important;
    color: var(--ouro) !important;
}

.btn-outline-secondary:active,
.btn-outline-secondary:first-child:active,
:not(.btn-check) + .btn-outline-secondary:active
{
    background-color: var(--bg-elevated) !important;
    border-color: var(--borda-hover) !important;
    color: var(--txt-primary) !important;
}

.btn-outline-danger:active,
.btn-outline-danger:first-child:active,
:not(.btn-check) + .btn-outline-danger:active
{
    background-color: var(--vermelho) !important;
    border-color: var(--vermelho) !important;
    color: #fff !important;
}

.btn-secondary:active,
.btn-secondary:first-child:active,
:not(.btn-check) + .btn-secondary:active
{
    background-color: var(--bg-elevated) !important;
    border-color: var(--borda-hover) !important;
    color: var(--txt-primary) !important;
}

.btn-outline-primary
{
    --bs-btn-active-bg: var(--ouro-muted);
    --bs-btn-active-border-color: var(--ouro-escuro);
    --bs-btn-active-color: var(--ouro);
    border: 1px solid var(--ouro-escuro);
    color: var(--ouro);
    background: transparent;
}

.btn-outline-primary:hover
{
    background: var(--ouro-muted);
    border-color: var(--ouro);
    color: var(--ouro-claro);
}
/* Botão Editar no card usa btn-primary diretamente no HTML */

.btn-outline-secondary
{
    --bs-btn-active-bg: var(--bg-elevated);
    --bs-btn-active-border-color: var(--borda-hover);
    --bs-btn-active-color: var(--txt-primary);
    border: 1px solid var(--borda);
    color: var(--txt-secondary);
    background: transparent;
}

.btn-outline-secondary:hover
{
    border-color: var(--borda-hover);
    color: var(--txt-primary);
    background: var(--bg-elevated);
}

.btn-outline-danger
{
    --bs-btn-active-bg: var(--vermelho);
    --bs-btn-active-border-color: var(--vermelho);
    --bs-btn-active-color: #fff;
    border: 1px solid #884040;
    color: var(--vermelho);
    background: transparent;
}

.btn-outline-danger:hover
{
    background: var(--vermelho);
    border-color: var(--vermelho);
    color: #fff;
}

.btn-secondary
{
    --bs-btn-active-bg: var(--bg-elevated);
    --bs-btn-active-border-color: var(--borda-hover);
    --bs-btn-active-color: var(--txt-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--borda);
    color: var(--txt-secondary);
}

.btn-secondary:hover
{
    background: var(--bg-stripe);
    border-color: var(--borda-hover);
    color: var(--txt-primary);
}

.btn-xs
{
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    border-radius: 3px;
}

.barra-acoes
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 767.98px)
{
    .barra-acoes
    {
        flex: 1 1 100%;
        justify-content: space-between;
    }
}

.btn-nova-moeda
{
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─── Filtros Card ──────────────────────────────────── */
.filtros-card
{
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 1rem 1.25rem;
}

.filtros-card .form-label
{
    color: var(--txt-secondary); /* era --txt-muted */
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.25rem;
}

.filtros-card .form-check-label
{
    color: var(--txt-secondary);
    font-size: 0.875rem;
}

.filtros-card .form-check-input:checked
{
    background-color: var(--ouro-escuro);
    border-color: var(--ouro-escuro);
}

/* ─── Formulários ───────────────────────────────────── */
.form-control,
.form-select
{
    background: var(--bg-input);
    border: 1px solid var(--borda);
    color: var(--txt-primary);
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus,
.form-select:focus
{
    background: var(--bg-input);
    border-color: var(--ouro);
    color: var(--txt-primary);
    box-shadow: 0 0 0 3px var(--ouro-muted);
    outline: none;
}

.form-control::placeholder
{
    color: var(--txt-disabled);
}
/* ── Dropdown de ordenação ───────────────────────────── */
.dropdown-ordenar .dropdown-toggle
{
    background: var(--bg-input);
    border: 1px solid var(--borda);
    color: var(--txt-primary);
    font-size: 0.9rem;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dropdown-ordenar .dropdown-toggle:hover,
.dropdown-ordenar .dropdown-toggle:focus
{
    background: var(--bg-input);
    border-color: var(--ouro);
    color: var(--txt-primary);
    box-shadow: 0 0 0 3px var(--ouro-muted);
}

.dropdown-ordenar .dropdown-toggle::after
{
    margin-left: auto;
    flex-shrink: 0;
}

.dropdown-ordenar .dropdown-menu
{
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 4px;
    padding: 4px 0;
    min-width: 100%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.dropdown-ordenar .dropdown-item
{
    color: var(--txt-secondary);
    font-size: 0.9rem;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-ordenar .dropdown-item:hover
{
    background: var(--ouro-muted);
    color: var(--ouro);
}

.dropdown-ordenar .dropdown-item.ativo
{
    color: var(--ouro);
    font-weight: 600;
}

.dropdown-ordenar .dropdown-item.ativo::before
{
    content: "\f272";
    font-family: "bootstrap-icons";
    font-size: 0.8rem;
    color: var(--ouro);
}

.dropdown-ordenar .dropdown-item:not(.ativo)::before
{
    content: "\f272";
    font-family: "bootstrap-icons";
    font-size: 0.8rem;
    visibility: hidden;
}

.form-select option
{
    background-color: var(--bg-card);
    color: var(--txt-primary);
}

.form-select option:checked
{
    background: linear-gradient(var(--ouro-muted), var(--ouro-muted));
    color: var(--ouro);
}
/* Chrome 135+ — controle total sobre o dropdown nativo */
@supports (appearance: base-select)
{
    .form-select
    {
        appearance: base-select;
    }

    .form-select option:hover
    {
        background-color: var(--bg-elevated);
        color: var(--txt-primary);
    }

    .form-select option:checked
    {
        background-color: var(--ouro-muted);
        color: var(--ouro);
    }
}

.form-control:disabled,
.form-select:disabled
{
    background: var(--bg-elevated);
    color: var(--txt-muted);
    opacity: 0.7;
}

.form-label
{
    color: var(--txt-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.required-label::after
{
    content: ' *';
    color: var(--ouro);
}

.input-group-text
{
    background: var(--bg-elevated);
    border: 1px solid var(--borda);
    color: var(--txt-muted);
    font-size: 0.85rem;
    font-family: 'Roboto', sans-serif;
}

textarea.form-control
{
    resize: vertical;
    min-height: 80px;
}

.form-check-input
{
    background-color: var(--bg-input);
    border: 1px solid var(--borda-hover);
}

.form-check-input:checked
{
    background-color: var(--ouro-escuro);
    border-color: var(--ouro-escuro);
}

.form-check-input:focus
{
    box-shadow: 0 0 0 3px var(--ouro-muted);
    border-color: var(--ouro);
}

.form-switch .form-check-input
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.3%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-text
{
    color: var(--txt-muted);
    font-size: 0.78rem;
}

/* ─── Moeda Card ────────────────────────────────────── */
.moeda-card
{
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    position: relative;
}

.moeda-card:hover
{
    border-color: var(--borda-hover);
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    transform: translateY(-2px);
}

.moeda-card.possui
{
    border-color: var(--ouro-escuro);
    border-top: 3px solid var(--ouro);
}

.moeda-card-img
{
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-elevated);
    overflow: hidden;
}

.cedula-card-img
{
    aspect-ratio: 2 / 1;
}

.moeda-card-img img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.moeda-card:hover .moeda-card-img img
{
    transform: scale(1.05);
}

/* Link clicável na imagem do card */
.moeda-img-link
{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.moeda-img-link img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.moeda-img-link .moeda-sem-foto
{
    position: absolute;
    inset: 0;
}

.moeda-sem-foto
{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--txt-muted);
    opacity: 0.2;
}

.badge-possuo
{
    position: absolute;
    top: 7px;
    left: 7px; /* movido para o canto esquerdo */
    background: rgba(30,30,30,0.85);
    color: var(--ouro);
    font-size: 0.95rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid rgba(245,166,35,0.4);
}

.moeda-card-body
{
    padding: 0.8rem 0.9rem;
    flex: 1;
}

.moeda-nome
{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--txt-primary);
    margin-bottom: 0.45rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.moeda-infos
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.info-chip
{
    font-size: 0.69rem;
    font-weight: 500;
    color: var(--txt-primary); /* era secondary, pouco contraste */
    background: var(--bg-elevated);
    border: 1px solid var(--borda); /* borda um pouco mais visível */
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.01em;
}

.info-chip i
{
    font-size: 0.62rem;
    color: var(--txt-secondary);
}

/* Footer removido — ações ficam no overlay da imagem */

/* ─── Botão excluir overlay (aparece no hover do card) ── */
.btn-excluir-card
{
    position: absolute;
    top: 7px;
    right: 7px;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: none;
    background: rgba(20, 20, 20, 0.85);
    color: #ccc;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.18s, transform 0.18s, background 0.15s, color 0.15s;
    z-index: 5;
    backdrop-filter: blur(4px);
}

.moeda-card:hover .btn-excluir-card
{
    opacity: 1;
    transform: scale(1);
}

.btn-excluir-card:hover
{
    background: var(--vermelho);
    color: #fff;
}

/* ─── Empty State ───────────────────────────────────── */
.empty-state
{
    padding: 5rem 0;
}

.empty-icon
{
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.35;
}

/* ─── Edição Cards ──────────────────────────────────── */
.edicao-card
{
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 6px;
    overflow: hidden;
}

.edicao-card-header
{
    background: var(--bg-header);
    border-bottom: 1px solid var(--borda);
    padding: 0.65rem 1.25rem;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--txt-secondary);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.edicao-card-header i
{
    color: var(--ouro);
    font-size: 0.9rem;
}

.edicao-card-body
{
    padding: 1.25rem;
}

.status-leitura
{
    color: var(--txt-secondary) !important;
}

/* Ícone composto: moeda com estrela sobreposta (usado em "Comemorativa") */
.icone-comemorativa
{
    position: relative;
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1;
    vertical-align: -0.15rem;
}

.icone-comemorativa .bi-star-fill
{
    position: absolute;
    bottom: 17px;
    right: -7px;
    font-size: 0.7rem;
}

/* ─── Tabela ────────────────────────────────────────── */
.table
{
    color: var(--txt-primary);
    margin: 0;
    font-size: 0.875rem;
    --bs-table-color: var(--txt-primary);
    --bs-table-bg: transparent;
    --bs-table-hover-color: var(--txt-primary);
    --bs-table-hover-bg: rgba(245,166,35,0.06);
}

.table thead th
{
    background: #272727;
    border-bottom: 2px solid var(--ouro-escuro);
    color: var(--txt-secondary); /* era --txt-muted, subiu o contraste */
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.65rem 1rem;
    white-space: nowrap;
}

.table tbody tr
{
    border: none;
}

.table tbody td
{
    padding: 0.7rem 1rem;
    vertical-align: middle;
    color: var(--txt-primary);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--borda-light);
}

.table tbody tr:nth-child(even) td
{
    background: rgba(0,0,0,0.1);
}

.table tbody tr:last-child td
{
    border-bottom: none;
}

.table-hover tbody tr:hover td
{
    background: rgba(245,166,35,0.06) !important;
    color: var(--txt-primary) !important;
}

.table tbody td.text-muted,
.table tbody td .text-muted
{
    color: var(--txt-secondary) !important;
}

.table tbody td.fw-semibold
{
    color: var(--txt-primary);
    font-weight: 600;
}

/* ─── Botão Possuo (estrela) ────────────────────────── */
.btn-possuo
{
    background: var(--bg-input);
    border: 1px solid var(--borda);
    font-size: 1.05rem;
    color: var(--txt-muted);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    transition: all 0.15s;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─── Botões de ação da tabela de tiragem (mesmo tamanho do btn-possuo) ─── */
.btn-acao-tiragem
{
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    border-radius: 4px;
}

.btn-possuo:hover
{
    border-color: var(--ouro);
    color: var(--ouro);
    background: var(--ouro-muted);
}

.btn-possuo.ativo
{
    color: var(--ouro);
    border-color: var(--ouro-escuro);
    background: var(--ouro-muted);
}

.btn-possuo:focus-visible
{
    box-shadow: 0 0 0 3px var(--ouro-glow);
    outline: none;
}

/* ─── Galeria de Fotos ──────────────────────────────── */
.galeria-fotos
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.foto-item
{
    display: grid;
    grid-template-columns: 1fr auto;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--borda);
    background: var(--bg-elevated);
    transition: border-color 0.2s;
}

.foto-item.principal
{
    border-color: var(--ouro);
}

.foto-item img
{
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

.foto-acoes
{
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 6px 5px;
    background: var(--bg-header);
    border-left: 1px solid var(--borda);
    align-items: center;
    justify-content: center;
}

.btn-foto-acao
{
    background: var(--bg-elevated);
    border: 1px solid var(--borda);
    color: #ddd;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.btn-foto-acao:hover
{
    background: var(--ouro-muted);
    border-color: var(--ouro);
    color: var(--ouro);
}

.btn-foto-excluir:hover
{
    background: var(--vermelho) !important;
    border-color: var(--vermelho) !important;
}

.foto-principal-badge
{
    background: rgba(196,127,10,0.9);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Upload Area ───────────────────────────────────── */
.upload-area
{
    border: 2px dashed #6A6A6A !important;
    border-radius: 5px;
    padding: 1.4rem 1rem;
    text-align: center;
    cursor: pointer;
    color: #D0D0D0 !important;
    font-size: 0.82rem;
    transition: all 0.2s;
    background: var(--bg-input) !important;
}

.upload-area .bi
{
    color: #C8C8C8 !important;
    font-size: 2rem;
    display: block;
    margin-bottom: 0.4rem;
}

.upload-area p
{
    color: #E8E8E8 !important;
    margin: 0.35rem 0 0.1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.upload-area small
{
    color: #AAAAAA !important;
    font-size: 0.74rem !important;
}

.upload-area:hover,
.upload-area.drag-over
{
    border-color: var(--ouro-claro) !important;
    background: rgba(245,166,35,0.1) !important;
    color: var(--ouro-claro) !important;
}

.upload-area:hover p, .upload-area.drag-over p
{
    color: #FFD580 !important;
}

.upload-area:hover small, .upload-area.drag-over small
{
    color: var(--ouro-claro) !important;
}

.upload-area:hover .bi, .upload-area.drag-over .bi
{
    color: var(--ouro-claro) !important;
}

/* ─── Modal ─────────────────────────────────────────── */
.modal-content
{
    background: var(--bg-card);
    border: 1px solid var(--borda-hover);
    border-radius: 6px;
    color: var(--txt-primary);
    box-shadow: 0 16px 50px rgba(0,0,0,0.55);
}

.modal-header
{
    background: #272727;
    border-bottom: 2px solid var(--ouro-escuro);
    padding: 0.9rem 1.4rem;
    border-radius: 6px 6px 0 0;
}

.modal-footer
{
    background: var(--bg-header);
    border-top: 1px solid var(--borda);
    padding: 0.8rem 1.4rem;
    border-radius: 0 0 6px 6px;
}

.modal-body
{
    padding: 1.2rem 1.4rem;
}

.modal-title
{
    font-family: 'Roboto Condensed', sans-serif;
    color: var(--txt-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-title i
{
    color: var(--ouro);
}

.btn-close
{
    filter: invert(0.65) sepia(0) saturate(0);
    opacity: 0.7;
}

.btn-close:hover
{
    opacity: 1;
}

.btn-close:focus
{
    box-shadow: 0 0 0 3px var(--ouro-glow);
    outline: none;
}

/* ─── Breadcrumb ────────────────────────────────────── */
.breadcrumb
{
    margin: 0;
    font-size: 0.8rem;
    font-family: 'Roboto', sans-serif;
    --bs-breadcrumb-divider-color: var(--txt-muted);
}

.breadcrumb-item a
{
    color: var(--ouro);
}

.breadcrumb-item a:hover
{
    color: var(--ouro-claro);
}

.breadcrumb-item.active
{
    color: var(--txt-muted);
}

.breadcrumb-item + .breadcrumb-item::before
{
    color: var(--borda-hover);
}

/* ─── Alertas ───────────────────────────────────────── */
.alert
{
    border-radius: 4px;
    font-size: 0.875rem;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
}

.alert-success
{
    background: var(--verde-muted);
    border: 1px solid rgba(92,184,92,0.35);
    color: #98e098;
}

.alert-danger
{
    background: var(--vermelho-muted);
    border: 1px solid rgba(224,82,82,0.35);
    color: #f5a0a0;
}

.alert-dismissible .btn-close
{
    filter: invert(0.5) sepia(0);
}

/* ─── Footer ────────────────────────────────────────── */
.footer
{
    background: #222222;
    border-top: 1px solid var(--borda);
    margin-top: auto;
    padding: 0.7rem 0;
}

.footer .text-muted
{
    color: var(--txt-muted) !important;
    font-size: 0.78rem;
}

/* ─── Progress ──────────────────────────────────────── */
.progress
{
    background: var(--bg-elevated);
    border-radius: 3px;
    height: 5px;
}

.progress-bar
{
    background: var(--ouro-escuro);
}

/* ─── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar
{
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track
{
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb
{
    background: var(--borda-hover);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover
{
    background: #6A6A6A;
}

/* ─── Responsivo ────────────────────────────────────── */
@media (max-width: 768px)
{
    .page-title
    {
        font-size: 1.2rem;
    }

    .edicao-card-body
    {
        padding: 1rem;
    }

    .moeda-card-body
    {
        padding: 0.7rem 0.8rem;
    }
}

@media (max-width: 576px)
{
    .galeria-fotos
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Toggle de visualização (galeria / lista) ──────── */
.btn-toggle-view.active
{
    background: var(--bg-elevated);
    border-color: var(--ouro-escuro);
    color: var(--ouro);
}

.btn-toggle-view:focus-visible
{
    box-shadow: 0 0 0 3px var(--ouro-glow);
    outline: none;
}

/* ─── Tabela de listagem de moedas ──────────────────── */
.tabela-moedas-wrap
{
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 6px;
    overflow: hidden;
}

.tabela-moedas-wrap .thumb-moeda
{
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid var(--borda);
    display: block;
}

.tabela-moedas-wrap .thumb-placeholder
{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: 4px;
    border: 1px solid var(--borda);
    font-size: 1.1rem;
    opacity: 0.35;
}

.tabela-moedas-wrap .nome-link
{
    color: var(--txt-primary);
    font-weight: 600;
}

.tabela-moedas-wrap .nome-link:hover
{
    color: var(--ouro-claro);
}

.tabela-moedas-wrap .possuo-star
{
    color: var(--ouro);
    font-size: 1rem;
}

.tabela-moedas-wrap th[data-sort]
{
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.tabela-moedas-wrap th[data-sort]:hover
{
    color: var(--ouro-claro);
}

.tabela-moedas-wrap th[data-sort].col-sorted
{
    color: var(--ouro);
}

.tabela-moedas-wrap th[data-sort] .sort-icon
{
    font-size: .75rem;
    margin-left: 3px;
    opacity: .7;
}

/* ─── Filtro de posse (toggle triplo) ──────────────── */
.tri-state-toggle
{
    background: var(--bg-input);
    border: 1px solid var(--borda);
    border-radius: 4px;
    display: flex;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 2px;
    box-sizing: border-box;
}

.tri-state-btn
{
    flex: 1;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--txt-muted);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.02em;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    padding: 0 8px;
}

.tri-state-btn:hover
{
    color: var(--txt-primary);
}

.tri-state-btn.active
{
    background: var(--ouro);
    color: var(--bg-base);
    font-weight: 700;
}

/* ─── Filtro form (flex puro, sem Bootstrap grid) ───── */
.filtro-form
{
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.filtro-campos
{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* linha 1: Busca / Ordenar / Ano — Ano ganha um pouco mais de espaço pelo slider */
.filtro-linha-1
{
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: 12px;
}

/* linha 2: Possuo / Comemorativa / Foto — Possuo tem 4 opções, os outros dois 3 */
.filtro-linha-2
{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 12px;
}

.filtro-grupo
{
    display: flex;
    flex-direction: column;
}

.filtro-grupo .form-label i
{
    color: var(--ouro);
}

.filtro-limpar
{
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
}

/* tablet: 3 colunas iguais em cada linha */
@media (max-width: 991px)
{
    .filtro-linha-1,
    .filtro-linha-2
    {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* mobile: 1 coluna, form em coluna, limpar alinhado à direita */
@media (max-width: 575px)
{
    .filtro-form
    {
        flex-direction: column;
        align-items: stretch;
    }

    .filtro-linha-1,
    .filtro-linha-2
    {
        grid-template-columns: 1fr;
    }

    .filtro-limpar
    {
        align-self: flex-end;
    }
}

/* ─── Paginação ─────────────────────────────────────── */
.pagination .page-link
{
    background-color: var(--bg-card);
    border-color: var(--borda);
    color: var(--txt-secondary);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.pagination .page-link:hover
{
    background-color: var(--ouro-muted);
    border-color: var(--ouro);
    color: var(--ouro);
}

.pagination .page-item.active .page-link
{
    background-color: var(--ouro);
    border-color: var(--ouro-escuro);
    color: var(--bg-base);
    font-weight: 600;
}

.pagination .page-item.disabled .page-link
{
    background-color: var(--bg-card);
    border-color: var(--borda-light);
    color: var(--txt-disabled);
}

.pagination .page-link:focus
{
    box-shadow: 0 0 0 0.2rem var(--ouro-glow);
    outline: none;
}

@media (max-width: 575px)
{
    .pagination .page-link
    {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }
}

/* ── Painel de estatísticas (stats cards) ────────────── */
.stats-cards
{
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.stats-card
{
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-top: 3px solid var(--ouro);
    border-radius: 0 0 8px 8px;
    padding: 10px 16px 12px;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stats-card-top
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.stats-card-label
{
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--txt-muted);
}

.stats-card-icon
{
    font-size: 0.95rem;
    color: var(--ouro);
    opacity: 0.55;
}

.stats-card-valor
{
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ouro);
    line-height: 1;
}

.stats-card-pct
{
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--txt-secondary);
    margin-left: 3px;
}

@media (max-width: 767px)
{
    .stats-cards
    {
        display: none;
    }
}

.stats-mobile
{
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 8px 14px;
}

.stats-mobile-item
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.82rem;
    color: var(--txt-secondary);
}

.stats-mobile-item + .stats-mobile-item
{
    border-top: 1px solid var(--borda);
}

.stats-mobile-label
{
    flex: 1;
}

.stats-mobile-valor
{
    font-weight: 600;
    color: var(--ouro);
}

.stats-mobile-valor small
{
    font-weight: 400;
    color: var(--txt-secondary);
    margin-left: 3px;
}

/* ── Dashboard Home ──────────────────────────────────── */
.dashboard-card
{
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 16px;
    overflow: hidden;
    color: var(--txt-primary);
    transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
    cursor: pointer;
}

.dashboard-card:hover
{
    border-color: var(--ouro);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px var(--ouro);
    color: var(--txt-primary);
}

.dashboard-card-header
{
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 180px;
    padding: 1.5rem 1.75rem;
    border-bottom: 3px solid var(--ouro);
    overflow: hidden;
}
/* pseudo-element carrega a imagem e faz o zoom no hover */
.dashboard-card-header::before
{
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
    z-index: 0;
}

.dashboard-card:hover .dashboard-card-header::before
{
    transform: scale(1.06);
}

.dashboard-card-header--moedas1::before
{
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.74) 100%), url('/img/bg_moedas1.png');
}

.dashboard-card-header--cedulas1::before
{
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.74) 100%), url('/img/bg_cedulas1.png');
}

.dashboard-card-icone
{
    font-size: 2.4rem;
    color: var(--ouro);
    line-height: 1;
    flex-shrink: 0;
}

.dashboard-card-titulo
{
    position: relative;
    z-index: 1;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    line-height: 1;
}

.dashboard-card-titulo::after
{
    content: '';
    display: block;
    margin-top: 0.45rem;
    width: 2.5rem;
    height: 3px;
    background: var(--ouro);
    border-radius: 2px;
}

.dashboard-card-body
{
    padding: 1.75rem 2rem;
}

.dashboard-card-stats
{
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.75rem;
}

.dashboard-stat
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.dashboard-stat + .dashboard-stat
{
    border-left: 1px solid var(--borda);
}

.dashboard-stat-valor
{
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--ouro);
    line-height: 1;
    text-shadow: 0 0 24px rgba(245,166,35,0.35);
}

.dashboard-stat-label
{
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--txt-muted);
}

.dashboard-card-pct
{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-pct-row
{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-pct-bar
{
    flex: 1;
    min-width: 0;
    height: 7px;
    background: var(--borda);
    border-radius: 4px;
    overflow: hidden;
}

.dashboard-pct-fill
{
    height: 100%;
    width: 0;
    background: linear-gradient(to right, var(--ouro-escuro), var(--ouro-claro));
    border-radius: 4px;
    animation: dashFill 1.2s ease forwards;
    animation-delay: 0.25s;
}

@keyframes dashFill
{
    to
    {
        width: var(--pct, 0%);
    }
}

.dashboard-pct-texto
{
    font-size: 1rem;
    color: var(--txt-muted);
    white-space: nowrap;
}

/* ─── Painel: Top moedas mais raras ─────────────────── */
.top-raras-separador
{
    height: 1px;
    background: var(--borda);
    margin: 3rem 0 1rem;
}

.dashboard-secao-titulo
{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--txt-secondary);
    margin: 0 0 1.25rem;
}

.top-raras-titulo
{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ouro);
    margin-bottom: 0.35rem;
}

.dashboard-rankings
{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.top-raras-card
{
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 1rem;
    flex: 1 1 300px;
    max-width: calc(50% - 0.75rem);
}

/* tablet/mobile: cada ranking ocupa a largura toda */
@media (max-width: 991px)
{
    .top-raras-card
    {
        max-width: 100%;
    }
}

.top-raras-subtitulo
{
    color: var(--txt-muted);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

/* wrapper próprio para permitir scroll horizontal sem afetar a tabela de listagem (que usa overflow: hidden).
   Sem borda própria — o card (.top-raras-card) já delimita a área, duas bordas aninhadas seria ruído.
   O respiro extra (+4px) fica aqui, no container inteiro — não no padding de cada célula,
   senão a 1ª/última coluna ficam com padding esquerdo/direito diferentes uma da outra
   e o conteúdo centralizado (text-align:center) passa a ficar visualmente descentralizado. */
.top-raras-tabela-wrap
{
    overflow-x: auto;
    border: none;
    border-radius: 0;
    padding: 0 4px;
    /* mostra só as top 10 linhas (cabeçalho ~28px + 10 linhas de 32px); o resto (até
       o top 20 pedido no controller) fica disponível via rolagem vertical */
    max-height: 348px;
    overflow-y: auto;
}

/* cabeçalho fixo durante a rolagem — sem isso, ele soma junto com as linhas */
.top-raras-tabela thead th
{
    position: sticky;
    top: 0;
    z-index: 1;
}

.top-raras-tabela
{
    font-size: 0.8rem;
    table-layout: fixed;
    width: 100%;
}

/* altura fixa por linha — evita variação de 1px entre linhas com conteúdos diferentes
   (chip, texto, ícone) e mantém tudo centralizado de forma consistente */
.top-raras-tabela tbody tr
{
    height: 32px;
}

/* line-height uniforme (1) nas células — texto/link/chip têm "leading" (entrelinha)
   default diferentes por serem elementos distintos, o que desloca cada um de forma
   diferente dentro do vertical-align:middle da célula. Zerando o leading, todos usam
   a mesma referência de altura e ficam realmente alinhados entre si. */
.top-raras-tabela tbody td
{
    line-height: 1;
}

/* Bootstrap usa padding fixo (.5rem .5rem) e o site tem uma regra própria só para
   "thead th" (0.65rem 1rem) — sem isto, cabeçalho e corpo ficam com paddings
   diferentes e a coluna da direita parece colada na borda. !important garante que
   vence as duas, mantendo o padding simétrico em todas as células. */
.top-raras-tabela > :not(caption) > * > *,
.top-raras-tabela.table thead th
{
    padding: 0.3rem !important;
}

.top-raras-tabela.table thead th
{
    font-size: 0.85rem;
}

/* linhas do corpo com divisor bem sutil — hierarquia vem do espaçamento, não das bordas */
.top-raras-tabela tbody td
{
    border-bottom-color: rgba(72, 72, 72, 0.45);
}

.top-raras-tabela tbody tr:last-child td
{
    border-bottom: none;
}

/* coluna "Moeda" fica com a largura restante (sem width fixo) — trunca em vez de quebrar linha */
.top-raras-tabela .top-raras-col-moeda
{
    overflow: hidden;
}

.top-raras-tabela .top-raras-col-moeda .nome-link
{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* .nome-link é branco/negrito por padrão (usado nas telas de listagem); aqui o
       nome não deve chamar mais atenção que posição/cunhagem, então usa a mesma cor
       que Ano/Cunhagem (a classe .text-muted deles resolve pra --txt-secondary, não
       --txt-muted — são cores diferentes no site) e peso normal. */
    color: var(--txt-secondary);
    font-weight: 400;
}

.top-raras-tabela .possuo-star
{
    font-size: 0.85rem;
}

/* número da posição vira um "chip" — sem isso, ele se confunde com nomes de moeda que
   também começam com dígito (ex.: "1 CENTAVO..."), parecendo repetição do texto.
   É um <span> DENTRO do <td> (não o td em si) — assim o td continua uma célula de
   tabela 100% normal (o vertical-align:middle/text-align:center dele é que centraliza
   o span, como centralizaria qualquer texto). O span só recebe padding/background/
   border-radius; display:inline-block (não flex) evita esticar e colar num "quadrado"
   do tamanho da coluna — ele fica do tamanho do próprio número + padding. */
.top-raras-posicao
{
    display: inline-block;
    min-width: 9px;
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--bg-elevated);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--txt-muted);
}

.tabela-moedas-wrap tr:nth-child(1) .top-raras-posicao,
.tabela-moedas-wrap tr:nth-child(2) .top-raras-posicao,
.tabela-moedas-wrap tr:nth-child(3) .top-raras-posicao
{
    background: rgba(245, 166, 35, 0.14);
    color: var(--ouro);
}

/* mais respiro entre o chip de posição e o nome da moeda */
.top-raras-tabela .top-raras-col-moeda
{
    padding-left: calc(0.3rem + 6px) !important;
}

/* ── Hamburger ───────────────────────────────────────── */
.navbar-toggler
{
    border: none !important;
    padding: 5px 10px;
    box-shadow: none !important;
    align-self: flex-start;
    height: 54px;
    display: flex;
    align-items: center;
}

.navbar-toggler:focus
{
    box-shadow: none !important;
    outline: none;
}

.navbar-toggler-icon
{
    filter: invert(0.7);
}

/* ── Abas de navegação (Moedas / Cédulas) ─────────────── */
.navbar-abas
{
    gap: 4px;
    align-self: flex-end;
}

.nav-aba
{
    display: flex !important;
    align-items: center;
    gap: 0.45rem !important;
    padding: 8px 22px !important;
    border-radius: 8px 8px 0 0;
    background: rgba(255,255,255,0.05) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--txt-secondary) !important;
    border-bottom: none;
    margin-bottom: -3px;
    transition: background 0.15s, color 0.15s;
}

.nav-aba i
{
    font-size: 1.2rem;
}

.nav-aba:hover
{
    background: rgba(255,255,255,0.1) !important;
    color: var(--txt-primary) !important;
}

.nav-aba.active
{
    background: var(--ouro) !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
}

/* ── Animação do menu collapse ───────────────────────── */
.navbar-collapse
{
    transition: none;
}

.navbar-collapse.collapsing
{
    transition: height 0.28s ease;
    overflow: hidden;
}

/* Mobile: abas em lista vertical — sem o estilo "tab sobre linha" */
@media (max-width: 991px)
{
    #navbar-principal .container-xl
    {
        align-items: center;
        flex-wrap: wrap;
    }

    .navbar-abas
    {
        align-self: auto;
        border-top: 1px solid var(--borda);
        padding-top: 4px;
        margin-top: 4px;
    }

    .nav-aba
    {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        border-radius: 6px !important;
        padding: 10px 14px !important;
        width: 100%;
    }

    .nav-aba.active
    {
        background: var(--ouro-muted) !important;
        color: var(--ouro) !important;
        border-left: 3px solid var(--ouro) !important;
        border-radius: 0 6px 6px 0 !important;
        padding-left: 11px !important;
        font-weight: 700 !important;
    }

    .nav-aba:hover
    {
        background: rgba(255,255,255,0.06) !important;
        color: var(--txt-primary) !important;
    }

    /* Links de ação (Sair / Entrar) — mesmo porte das abas */
    .navbar-nav.ms-auto
    {
        border-top: 1px solid var(--borda);
        padding-top: 4px;
        margin-top: 4px;
    }

    .navbar-nav.ms-auto .nav-link,
    .navbar-nav.ms-auto .btn.btn-link.nav-link
    {
        font-size: 0.95rem !important;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-weight: 500;
        padding: 10px 14px !important;
        border-bottom: none !important;
        margin-bottom: 0 !important;
        border-radius: 6px;
        width: 100%;
        text-align: left;
    }

    .navbar-nav.ms-auto .nav-link:hover,
    .navbar-nav.ms-auto .btn.btn-link.nav-link:hover
    {
        background: rgba(255,255,255,0.06);
        color: var(--txt-primary) !important;
    }
}