/* ==========================================================================
   myValen — sistema visual
   --------------------------------------------------------------------------
   Tema escuro ancorado no violeta da marca (o gradiente da logo vai de
   #3C3C9C a #914DE4), com a paleta de apoio para dados. O fundo escuro não é
   estética pela estética: a tela é lida à noite, com frequência, e números
   claros sobre superfície escura cansam menos do que o inverso.

   Camadas de superfície, da mais funda para a mais próxima:
     canvas -> surface -> raised -> overlay
   Cada degrau sobe o brilho um pouco e ganha uma borda de 1px. É o que
   substitui a sombra pesada para criar profundidade no escuro.
   ========================================================================== */

:root {
    /* --- Marca (extraída da logo) --- */
    --brand-deep: #3C3C9C;
    --brand: #5352E5;
    --brand-lift: #7B7AFF;
    --brand-violet: #914DE4;
    --brand-wash: rgba(83, 82, 229, 0.14);
    --brand-edge: rgba(123, 122, 255, 0.28);

    /* --- Dados --- */
    --positive: #69D27D;
    --positive-wash: rgba(105, 210, 125, 0.13);
    --negative: #EC575D;
    --negative-wash: rgba(236, 87, 93, 0.13);
    --warm: #F2A93C;
    --warm-wash: rgba(242, 169, 60, 0.13);
    --info: #468EF7;
    --info-wash: rgba(70, 142, 247, 0.13);
    --sand: #E7CD77;
    --coral: #EF865C;

    /* --- Superfícies --- */
    --canvas: #0E1015;
    --surface: #161922;
    --raised: #1D2029;
    --overlay: #232733;
    --hairline: rgba(255, 255, 255, 0.07);
    --hairline-strong: rgba(255, 255, 255, 0.12);

    /* --- Texto --- */
    --ink: #F1F2F6;
    --ink-soft: #A6B0BD;
    --ink-faint: #767D8B;

    /* --- Métrica --- */
    --rail-w: 248px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 2px 14px rgba(0, 0, 0, 0.3);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* --- Variáveis do Bootstrap -------------------------------------------
       O Bootstrap reaplica a própria cor de texto em vários componentes
       (.card, .modal, .list-group, .table usam var(--bs-body-color)), então
       definir color só no body não basta: qualquer texto dentro de um cartão
       que não tivesse classe de cor caía no #212529 e sumia no fundo escuro.
       Reapontar as variáveis na raiz resolve para todos eles de uma vez. */
    --bs-body-color: #F1F2F6;
    --bs-body-color-rgb: 241, 242, 246;
    --bs-body-bg: #0E1015;
    --bs-body-bg-rgb: 14, 16, 21;
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: rgba(241, 242, 246, 0.72);
    --bs-tertiary-color: rgba(241, 242, 246, 0.5);
    --bs-border-color: rgba(255, 255, 255, 0.07);
    --bs-heading-color: #F1F2F6;
    --bs-link-color: #7B7AFF;
    --bs-link-hover-color: #A6A5FF;
    --bs-card-color: #F1F2F6;
    --bs-card-bg: #161922;
    --bs-card-border-color: rgba(255, 255, 255, 0.07);
    --bs-modal-color: #F1F2F6;
    --bs-modal-bg: #161922;
    --bs-list-group-color: #F1F2F6;
    --bs-table-color: #F1F2F6;
    --bs-emphasis-color-rgb: 255, 255, 255;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink);
    background-color: var(--canvas);
    /* Duas luzes frias bem diluídas: tiram o chapado do preto sem virar
       "gradiente decorativo". Ficam fixas para não brigar com o scroll. */
    background-image:
        radial-gradient(900px 520px at 12% -6%, rgba(83, 82, 229, 0.16), transparent 62%),
        radial-gradient(760px 480px at 96% 4%, rgba(145, 77, 228, 0.10), transparent 58%);
    background-attachment: fixed;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: 'Sora', system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* Todo número que o olho compara em coluna usa figuras tabulares: sem isso
   os dígitos mudam de largura e as casas decimais desalinham entre linhas. */
.summary-value,
.summary-subvalue,
.asset-value-desktop,
.stat-figure,
table td,
table th,
.badge {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

::selection {
    background: var(--brand);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--brand-lift);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --- Barra de rolagem ------------------------------------------------- */
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #2C3140;
    border: 3px solid var(--canvas);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3A4052;
}

/* ==========================================================================
   Barra superior
   --------------------------------------------------------------------------
   A navegação vive no topo para devolver a largura inteira ao conteúdo — a
   lista de ativos é a razão da tela existir e ganha ~250px com isso.

   A marcação interna continua sendo a mesma do rail (#sidebar > ul.components
   > li > a): o app.js depende dela para alternar seções e marcar o item ativo.
   O que muda é só a apresentação — barra no desktop, gaveta no celular.
   ========================================================================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 1045;
    display: flex;
    align-items: center;
    gap: 22px;
    height: 62px;
    padding: 0 22px;
    background: rgba(14, 16, 21, 0.9);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--hairline);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    font-family: 'Sora', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-decoration: none;
}

.topbar-brand:hover {
    color: var(--ink);
}

.topbar-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    box-shadow: 0 0 0 1px var(--brand-edge), 0 5px 14px rgba(83, 82, 229, 0.3);
}

/* --- Navegação --- */

.sidebar {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.sidebar-header,
.sidebar-foot {
    display: none;
}

.sidebar .components {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.sidebar .components::-webkit-scrollbar {
    display: none;
}

.sidebar .components li {
    flex: 0 0 auto;
}

.sidebar .components li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: var(--r-sm);
    color: var(--ink-faint);
    font-size: 0.83rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.16s, background-color 0.16s;
}

.sidebar .components li a i {
    font-size: 0.8rem;
    color: inherit;
    opacity: 0.85;
}

.sidebar .components li a:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.05);
}

.sidebar .components li.active a {
    color: var(--ink);
    background: var(--brand-wash);
    box-shadow: inset 0 0 0 1px var(--brand-edge);
}

.sidebar .components li.active a i {
    color: var(--brand-lift);
    opacity: 1;
}

.sidebar .components li a.text-danger {
    color: var(--ink-faint) !important;
}

.sidebar .components li a.text-danger:hover {
    color: var(--negative) !important;
    background: var(--negative-wash);
}

/* --- Usuário --- */

.topbar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 18px;
    border-left: 1px solid var(--hairline);
}

.topbar-avatar {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--brand), var(--brand-violet));
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
}

.topbar-name {
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--ink-soft);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-close-white {
    display: none;
    background: none;
    border: 0;
    color: var(--ink-faint);
    font-size: 1rem;
    margin-left: auto;
    cursor: pointer;
}

#sidebarCollapse {
    display: none;
    width: 38px;
    height: 38px;
    padding: 0;
    flex: 0 0 38px;
    border-radius: 10px;
    background: var(--raised);
    border: 1px solid var(--hairline);
    color: var(--ink);
}

/* Sem rail, o conteúdo ocupa a largura toda. */
#content {
    min-height: calc(100vh - 62px);
}

.container-fluid.mt-4 {
    padding: 24px 26px 40px;
    max-width: 1880px;
    margin-top: 0 !important;
}

/* --- Cabeçalho da página --- */

.page-head {
    margin-bottom: 20px;
}

.page-head h1 {
    font-size: 1.2rem;
    font-weight: 650;
    margin: 0;
    letter-spacing: -0.025em;
}

.page-head p {
    margin: 2px 0 0;
    font-size: 0.79rem;
    color: var(--ink-faint);
}

/* ==========================================================================
   Cartões de resumo
   ========================================================================== */

.summary-card {
    position: relative;
    height: 100%;
    min-height: 152px;
    padding: 18px 20px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--hairline);
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s var(--ease);
}

/* Fio de luz no topo do cartão — separa a superfície do fundo sem borda dura. */
.summary-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-edge) 45%, transparent);
    opacity: 0.7;
}

.summary-card:hover {
    transform: translateY(-2px);
    border-color: var(--hairline-strong);
}

.summary-content {
    position: relative;
    z-index: 1;
}

.summary-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--ink-faint);
    margin-bottom: 7px;
}

.summary-value {
    font-family: 'Sora', sans-serif;
    font-size: 1.54rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: var(--ink);
}

.summary-separator {
    height: 1px;
    background: var(--hairline);
    margin: 13px 0 11px;
}

/* Fio entre dois recortes no rodapé do cartão. Vertical, para separar sem
   pesar: a linha horizontal já é o separador do bloco. */
.summary-divisoria {
    width: 1px;
    background: var(--hairline);
    align-self: stretch;
    flex: 0 0 1px;
}

.summary-subtitle {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.summary-subvalue {
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--ink-soft);
}

/* Estado do cartão de rentabilidade: a cor carrega o sinal do número. */
.summary-card.profit-card {
    border-color: rgba(105, 210, 125, 0.24);
    background:
        linear-gradient(145deg, var(--positive-wash), transparent 58%),
        var(--surface);
}

.summary-card.profit-card::after {
    background: linear-gradient(90deg, transparent, rgba(105, 210, 125, 0.45) 45%, transparent);
}

.summary-card.loss-card {
    border-color: rgba(236, 87, 93, 0.24);
    background:
        linear-gradient(145deg, var(--negative-wash), transparent 58%),
        var(--surface);
}

.summary-card.loss-card::after {
    background: linear-gradient(90deg, transparent, rgba(236, 87, 93, 0.45) 45%, transparent);
}

.summary-value.positive {
    color: var(--positive);
}

.summary-value.negative {
    color: var(--negative);
}

.summary-value i {
    font-size: 0.86rem;
    vertical-align: middle;
    margin-right: 2px;
}

/* Em telas largas sobra espaço dentro dos cartões de resumo; o número, que é
   o que se lê primeiro, cresce junto. */
@media (min-width: 1400px) {
    .summary-value {
        font-size: 1.72rem;
    }

    .summary-card {
        padding: 20px 22px;
    }
}

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
    font-family: 'Manrope', sans-serif;
    font-weight: 650;
    font-size: 0.83rem;
    border-radius: var(--r-sm);
    transition: all 0.17s var(--ease);
}

.btn-primary-custom {
    background: linear-gradient(135deg, var(--brand), var(--brand-violet));
    border: none;
    color: #fff;
    box-shadow: 0 6px 18px rgba(83, 82, 229, 0.32);
}

.btn-primary-custom:hover {
    color: #fff;
    filter: brightness(1.1);
    box-shadow: 0 9px 24px rgba(83, 82, 229, 0.45);
    transform: translateY(-1px);
}

.btn-outline-primary-custom {
    background: var(--raised);
    border: 1px solid var(--hairline);
    color: var(--ink-soft);
}

.btn-outline-primary-custom:hover {
    background: var(--brand-wash);
    border-color: var(--brand-edge);
    color: var(--brand-lift);
}

.btn-outline-secondary,
.btn-light {
    background: var(--raised);
    border: 1px solid var(--hairline);
    color: var(--ink-soft);
}

.btn-outline-secondary:hover,
.btn-light:hover {
    background: var(--overlay);
    border-color: var(--hairline-strong);
    color: var(--ink);
}

.btn-outline-danger {
    background: var(--raised);
    border: 1px solid var(--hairline);
    color: var(--ink-faint);
}

.btn-outline-danger:hover {
    background: var(--negative-wash);
    border-color: rgba(236, 87, 93, 0.35);
    color: var(--negative);
}

.btn-outline-success {
    background: var(--raised);
    border: 1px solid var(--hairline);
    color: var(--ink-faint);
}

.btn-outline-success:hover {
    background: var(--positive-wash);
    border-color: rgba(105, 210, 125, 0.35);
    color: var(--positive);
}

.btn-outline-primary {
    background: var(--raised);
    border: 1px solid var(--hairline);
    color: var(--ink-faint);
}

.btn-outline-primary:hover {
    background: var(--brand-wash);
    border-color: var(--brand-edge);
    color: var(--brand-lift);
}

.btn-outline-warning:hover {
    background: var(--warm-wash);
    border-color: rgba(242, 169, 60, 0.35);
    color: var(--warm);
}

.action-btn {
    border-radius: var(--r-md) !important;
    font-size: 0.68rem;
}

.action-btn i {
    font-size: 0.92rem;
    margin-bottom: 3px;
}

.btn-text {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.btn-link {
    color: var(--ink-faint);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--brand-lift);
}

/* ==========================================================================
   Cartões de conteúdo
   ========================================================================== */

.card,
.premium-card {
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: none;
    margin-bottom: 20px;
    overflow: hidden;
}

.premium-card:hover {
    transform: none;
    box-shadow: none;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding: 15px 20px !important;
}

.card-header {
    gap: 12px;
    flex-wrap: wrap;
}

/* O grupo de controles à direita do título não pode empurrar nem cobrir o
   título quando falta largura. */
.card-header .d-flex {
    flex-wrap: wrap;
    gap: 8px;
}

.card-header .form-select {
    min-width: 0;
    max-width: 210px;
}

.card-header h5 {
    font-size: 0.97rem;
    font-weight: 650;
    letter-spacing: -0.015em;
}

.card-body {
    padding: 18px 20px;
}

/* ==========================================================================
   Lista de ativos
   ========================================================================== */

.list-group-flush {
    background: transparent;
}

.list-group-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
    padding: 11px 20px;
}

.list-group-item:last-child {
    border-bottom: 0;
}

.group-header {
    background: var(--raised) !important;
    font-family: 'Sora', sans-serif;
    font-size: 0.83rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    padding: 12px 20px;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.subgroup-header {
    background: rgba(255, 255, 255, 0.017) !important;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 9px 20px 9px 30px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.subgroup-header:hover {
    background: rgba(255, 255, 255, 0.045) !important;
    color: var(--ink);
}

.subgroup-header .fa-chevron-down {
    font-size: 0.62rem;
    color: var(--ink-faint) !important;
}

.asset-row {
    padding: 9px 20px 9px 30px;
    transition: background-color 0.14s;
}

.asset-row:hover {
    background: rgba(255, 255, 255, 0.032);
}

.asset-value-desktop {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--ink);
}

.font-label-small {
    font-size: 0.6rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-faint) !important;
    margin-bottom: 1px;
}

.asset-name-mobile {
    font-size: 0.86rem;
    letter-spacing: -0.01em;
}

.asset-sub-mobile {
    font-size: 0.71rem;
    color: var(--ink-faint) !important;
}

/* ==========================================================================
   Selos
   ========================================================================== */

.badge {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0.3em 0.6em;
    border-radius: 7px;
    letter-spacing: 0.01em;
}

.badge.bg-success {
    background: var(--positive-wash) !important;
    color: var(--positive) !important;
    box-shadow: inset 0 0 0 1px rgba(105, 210, 125, 0.24);
}

.badge.bg-danger {
    background: var(--negative-wash) !important;
    color: var(--negative) !important;
    box-shadow: inset 0 0 0 1px rgba(236, 87, 93, 0.24);
}

.badge.bg-secondary {
    background: var(--overlay) !important;
    color: var(--ink-soft) !important;
}

.badge.bg-primary {
    background: var(--brand-wash) !important;
    color: var(--brand-lift) !important;
    box-shadow: inset 0 0 0 1px var(--brand-edge);
}

.badge.bg-light {
    background: var(--overlay) !important;
    color: var(--ink-soft) !important;
    border: 1px solid var(--hairline) !important;
}

/* ==========================================================================
   Painel do mês
   ========================================================================== */

.stat-figure {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.month-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.month-legend::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.month-legend.is-wallet::before { background: var(--positive); }
.month-legend.is-cdi::before { background: var(--info); }
.month-legend.is-ipca::before { background: var(--warm); }

.border-end {
    border-color: var(--hairline) !important;
}

/* ==========================================================================
   Formulários
   ========================================================================== */

.form-control,
.form-select {
    background-color: var(--raised);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 0.86rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.16s, box-shadow 0.16s;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--raised);
    border-color: var(--brand);
    color: var(--ink);
    box-shadow: 0 0 0 3px var(--brand-wash);
}

.form-control::placeholder {
    color: var(--ink-faint);
}

/* Um campo somente-leitura ainda precisa ser lido: o Bootstrap aplica opacity
   e um cinza claro que, no escuro, deixavam o e-mail quase invisível. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--hairline);
    color: var(--ink-soft);
    opacity: 1;
    cursor: not-allowed;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A6B0BD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 15px 11px;
    padding-right: 2.2rem;
}

.form-select option,
.form-select optgroup {
    background: var(--overlay);
    color: var(--ink);
}

.form-label {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--ink-soft);
    margin-bottom: 5px;
}

.input-group-text {
    background: var(--overlay);
    border: 1px solid var(--hairline);
    color: var(--ink-faint);
    font-size: 0.82rem;
}

.form-check-input {
    background-color: var(--overlay);
    border-color: var(--hairline-strong);
}

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

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

.form-check-label {
    color: var(--ink-soft);
}

.form-text {
    color: var(--ink-faint);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.62);
    cursor: pointer;
}

/* ==========================================================================
   Tabelas
   ========================================================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    color: var(--ink);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    background: transparent;
    border-bottom-color: var(--hairline);
    padding: 0.62rem 0.75rem;
    font-size: 0.83rem;
}

.table thead th,
.table .table-light,
.table .table-light > * {
    background: var(--raised) !important;
    color: var(--ink-faint) !important;
    font-size: 0.67rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom-color: var(--hairline) !important;
}

.table-hover > tbody > tr:hover > * {
    background: rgba(255, 255, 255, 0.035) !important;
    color: var(--ink);
}

.table .text-muted {
    color: var(--ink-faint) !important;
}

/* ==========================================================================
   Janelas modais
   ========================================================================== */

.modal-content {
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lift);
}

.modal-header {
    border-bottom: 1px solid var(--hairline) !important;
    padding: 20px 24px 16px;
}

.modal-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    border-top: 1px solid var(--hairline) !important;
    padding: 14px 24px 20px;
}

.modal-backdrop.show {
    opacity: 0.78;
}

.btn-close {
    filter: invert(1) grayscale(1) brightness(1.7);
    opacity: 0.5;
}

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

.nav-tabs {
    border-bottom: 1px solid var(--hairline);
    gap: 3px;
}

.nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ink-faint);
    font-size: 0.85rem;
    font-weight: 650;
    padding: 9px 15px;
}

.nav-tabs .nav-link:hover {
    color: var(--ink-soft);
}

.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--brand-lift);
    border-bottom-color: var(--brand);
}

/* Resultados da busca de ativos, sobrepostos ao campo. */
.list-group.position-absolute {
    background: var(--overlay);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}

.list-group-item-action {
    background: transparent;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--hairline);
    font-size: 0.83rem;
    padding: 10px 14px;
}

.list-group-item-action:hover {
    background: var(--brand-wash);
    color: var(--ink);
}

/* ==========================================================================
   Avisos
   ========================================================================== */

.alert {
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: 0.83rem;
    padding: 11px 15px;
}

.alert-info {
    background: var(--info-wash);
    border-color: rgba(70, 142, 247, 0.26);
    color: #9EC5FD;
}

.alert-success {
    background: var(--positive-wash);
    border-color: rgba(105, 210, 125, 0.26);
    color: var(--positive);
}

.alert-danger {
    background: var(--negative-wash);
    border-color: rgba(236, 87, 93, 0.26);
    color: #F79197;
}

.alert-warning {
    background: var(--warm-wash);
    border-color: rgba(242, 169, 60, 0.26);
    color: var(--sand);
}

/* ==========================================================================
   Utilitários redefinidos para o fundo escuro
   ========================================================================== */

.bg-white,
.bg-light {
    background: transparent !important;
}

.text-muted {
    color: var(--ink-faint) !important;
}

.text-dark {
    color: var(--ink) !important;
}

.text-success {
    color: var(--positive) !important;
}

.text-danger {
    color: var(--negative) !important;
}

.text-warning {
    color: var(--warm) !important;
}

.text-primary {
    color: var(--brand-lift) !important;
}

.border-top,
.border-start,
.border-bottom {
    border-color: var(--hairline) !important;
}

hr {
    border-color: var(--hairline);
    opacity: 1;
}

a {
    color: var(--brand-lift);
}

.text-primary-custom {
    color: var(--brand-lift);
}

/* ==========================================================================
   Entrada da página
   --------------------------------------------------------------------------
   Um único reveal escalonado no carregamento. Curto e discreto: a tela é de
   consulta rápida, não pode fazer o usuário esperar por animação.
   ========================================================================== */

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.container-fluid.mt-4 > .row {
    animation: rise 0.44s var(--ease) both;
}

.container-fluid.mt-4 > .row:nth-of-type(1) { animation-delay: 0.02s; }
.container-fluid.mt-4 > .row:nth-of-type(2) { animation-delay: 0.1s; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Telas de autenticação
   ========================================================================== */

.auth-card {
    background: rgba(22, 25, 34, 0.9);
    backdrop-filter: blur(22px);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lift);
}

.auth-mark {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    box-shadow: 0 0 0 1px var(--brand-edge), 0 10px 30px rgba(83, 82, 229, 0.36);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 991.98px) {
    /* Abaixo de 992px a mesma navegação vira gaveta: os itens não cabem em
       linha e, no toque, alvos empilhados são mais fáceis de acertar. */
    .topbar {
        gap: 12px;
        padding: 0 14px;
        /* Sem backdrop-filter aqui de propósito: a propriedade cria um
           containing block, e a gaveta (#sidebar, position:fixed) passa a se
           posicionar em relação à barra em vez da janela — ficava com a altura
           do cabeçalho e os itens do menu não apareciam. */
        backdrop-filter: none;
        background: var(--canvas);
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1046;
        width: var(--rail-w);
        flex-direction: column;
        align-items: stretch;
        padding: 20px 14px 16px;
        background: rgba(18, 21, 28, 0.98);
        backdrop-filter: blur(18px);
        border-right: 1px solid var(--hairline);
        box-shadow: var(--shadow-lift);
        transform: translateX(calc(-1 * var(--rail-w) - 12px));
        transition: transform 0.32s var(--ease);
    }

    .sidebar.active {
        transform: none;
    }

    .sidebar-header {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 4px 6px 20px;
    }

    .sidebar-header h3 {
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0;
        letter-spacing: -0.03em;
    }

    .sidebar-mark {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        flex: 0 0 34px;
        box-shadow: 0 0 0 1px var(--brand-edge), 0 6px 18px rgba(83, 82, 229, 0.3);
    }

    .sidebar .components {
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        flex: 1;
        overflow-y: auto;
    }

    .sidebar .components li a {
        padding: 11px 12px;
        font-size: 0.87rem;
        gap: 12px;
    }

    .sidebar .components li a i {
        width: 20px;
        text-align: center;
    }

    .sidebar-foot {
        display: block;
        margin-top: auto;
        padding: 12px 10px 2px;
        border-top: 1px solid var(--hairline);
        font-size: 0.7rem;
        color: var(--ink-faint);
    }

    .btn-close-white {
        display: block;
    }

    #sidebarCollapse {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Com o menu na gaveta, a marca fica centralizada entre o botão e o avatar. */
    .topbar-brand span {
        display: none;
    }

    .topbar-name {
        display: none;
    }

    .topbar-user {
        padding-left: 0;
        border-left: 0;
    }

    .container-fluid.mt-4 {
        padding: 16px 14px 32px;
    }

    .page-head {
        margin-bottom: 14px;
    }

    .page-head h1 {
        font-size: 1.06rem;
    }

    /* No celular os quatro cartões empilhados empurravam a lista de ativos
       para muito abaixo da dobra. Aqui eles ficam mais densos, sem perder a
       hierarquia entre rótulo, valor e informação de apoio. */
    .summary-card {
        min-height: 0;
        padding: 13px 16px;
    }

    .summary-card .row.mb-3,
    .summary-title {
        margin-bottom: 3px;
    }

    .summary-value {
        font-size: 1.3rem;
    }

    .summary-separator {
        margin: 9px 0 7px;
    }

    .summary-subtitle {
        font-size: 0.68rem;
    }

    .summary-subvalue {
        font-size: 0.87rem;
    }

    .row.mb-4 > [class*="col-"] {
        margin-bottom: 10px !important;
    }

    .list-group-item,
    .group-header {
        padding-left: 15px;
        padding-right: 15px;
    }

    .subgroup-header,
    .asset-row {
        padding-left: 20px;
        padding-right: 15px;
    }

    .card-header,
    .card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .modal-body,
    .modal-header,
    .modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 575.98px) {
    .summary-value {
        font-size: 1.26rem;
    }

    .navbar-brand {
        font-size: 0.94rem !important;
    }

    .card-header {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ==========================================================================
   Importação do extrato da B3
   ========================================================================== */

.b3-drop {
    border: 1.5px dashed var(--hairline-strong);
    border-radius: var(--r-lg);
    padding: 34px 20px;
    text-align: center;
    cursor: pointer;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.18s, background-color 0.18s;
}

.b3-drop:hover,
.b3-drop.dragover {
    border-color: var(--brand);
    background: var(--brand-wash);
    color: var(--ink);
}

.b3-drop i {
    font-size: 1.7rem;
    color: var(--brand-lift);
}

.b3-bloco {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 14px;
}

.b3-bloco-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--raised);
    border-bottom: 1px solid var(--hairline);
    font-size: 0.85rem;
    font-weight: 650;
}

.b3-todos {
    display: flex;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ink-faint);
    cursor: pointer;
    margin: 0;
}

.b3-bloco .alert {
    margin: 12px 14px 0;
}

.b3-bloco .table {
    font-size: 0.82rem;
}

/* Linha desmarcada recua para o segundo plano: dá para varrer só o que foi
   escolhido sem ler a lista inteira. */
.b3-bloco tr:has(input[type="checkbox"]:not(:checked)) td {
    opacity: 0.45;
}

.b3-tick {
    font-size: 0.83rem;
    font-weight: 700;
}

.b3-nome {
    font-size: 0.71rem;
    color: var(--ink-faint);
}

/* --- Importação: operações por data e corretora --- */

.b3-dia {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 12px;
}

.b3-dia-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--raised);
    border-bottom: 1px solid var(--hairline);
}

.b3-dia-data {
    font-family: 'Sora', sans-serif;
    font-size: 0.86rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* A corretora é a segunda chave do agrupamento: o mesmo papel em custódias
   diferentes são posições diferentes na carteira. */
.b3-corretora {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 99px;
    background: var(--brand-wash);
    color: var(--brand-lift);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 1px var(--brand-edge);
}

.b3-dia-tot {
    margin-left: auto;
    display: flex;
    gap: 14px;
    font-size: 0.72rem;
    color: var(--ink-faint);
}

.b3-op {
    display: grid;
    grid-template-columns: 34px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--hairline);
}

.b3-op:last-child { border-bottom: 0; }

.b3-op.pendente { background: rgba(242, 169, 60, 0.06); }
.b3-op.fora { opacity: 0.5; }

.b3-op-tipo {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 5px;
}

.b3-op-tipo.compra { background: var(--positive-wash); color: var(--positive); }
.b3-op-tipo.venda { background: var(--negative-wash); color: var(--negative); }

.b3-destino {
    font-size: 0.71rem;
    color: var(--ink-faint);
}

.b3-op select {
    font-size: 0.75rem;
    padding: 3px 26px 3px 8px;
    max-width: 260px;
}

@media (max-width: 767.98px) {
    .b3-op {
        grid-template-columns: 30px 1fr;
        row-gap: 6px;
    }

    .b3-op > :nth-child(3),
    .b3-op > :nth-child(4) {
        grid-column: 2;
        text-align: left;
    }

    .b3-dia-tot { width: 100%; margin-left: 0; }
}

/* Filtro de corretora: o botão apagado indica custódia fora da importação. */
.b3-filtro-corretora {
    opacity: 0.45;
    border-color: var(--hairline) !important;
}

.b3-filtro-corretora.ativo {
    opacity: 1;
    background: var(--brand-wash) !important;
    border-color: var(--brand-edge) !important;
    color: var(--brand-lift) !important;
}

/* Selo por tipo de provento. Cupom e amortização ganham destaque porque
   corrigem o preço do papel, não só somam dinheiro. */
.b3-prov-tipo {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--overlay);
    color: var(--ink-soft);
}

.b3-prov-tipo.juros,
.b3-prov-tipo.amortizacao {
    background: var(--warm-wash);
    color: var(--warm);
    box-shadow: inset 0 0 0 1px rgba(242, 169, 60, .3);
}

.b3-prov-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 99px;
    background: var(--raised);
    border: 1px solid var(--hairline);
    font-size: .74rem;
    color: var(--ink-soft);
}

.b3-prov-chip strong {
    font-family: 'Sora', sans-serif;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Período da rentabilidade na lista de ativos — o mesmo seletor de
   "Evolução do Patrimônio", na página de rentabilidade. */
#periodoRange .btn {
    font-size: .72rem;
    padding: 3px 11px;
    opacity: .5;
}

#periodoRange .btn.ativo {
    opacity: 1;
    background: var(--brand-wash);
    border-color: var(--brand-edge);
    color: var(--brand-lift);
}

/* Ativo sem preço no início do período: sem número, em vez de um palpite. */
.badge.sem-historico {
    background: var(--raised);
    color: var(--ink-faint);
    border: 1px dashed var(--hairline);
    font-weight: 500;
}