/* ============================================================================
   CRM da Carteira — sistema de design
   ----------------------------------------------------------------------------
   Um painel de instrumentos, não um site. Quem usa isto passa o dia lendo
   tarifa, curva de carga e data de vigência: o trabalho do desenho é fazer um
   número ser fácil de achar e de confiar.

   PALETA — tirada do próprio logotipo: o navy do "D", o âmbar do raio e o
   cinza do anel. Nada de cor inventada.

   TIPOGRAFIA — IBM Plex, que foi desenhada para contexto técnico e tem
   algarismos tabulares de verdade. A regra que organiza o uso:
       mono      = código que se compara caractere a caractere (UC, CNPJ, REH)
       tabular   = grandeza que se compara por magnitude (kWh, kW, R$)
   Condensed só nos cabeçalhos de tabela, onde densidade é o objetivo.

   ASSINATURA — o "trilho energizado": uma barra âmbar de 3px que marca a seção
   ativa da navegação, a borda do título da página e a aresta do botão primário
   em foco. Um dispositivo só, três usos consistentes: "é aqui que você está".
   Todo o resto fica quieto — navy, cinza, fios de 1px e espaço.

   Este arquivo assume o Bootstrap 5.3 carregado antes dele e trabalha pelas
   variáveis dele (--bs-*), em vez de brigar por especificidade.
   ========================================================================= */

/* ---------------------------------------------------------------- fontes -- */
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Regular.77bc02670657.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Medium.f7016cd446d2.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-SemiBold.196e3cbc5fee.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans Condensed";
    src: url("../fonts/IBMPlexSansCondensed-SemiBold.bac89dc82014.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/IBMPlexMono-Regular.79936b18df9f.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------------- tokens -- */
:root {
    /* Marca — amostradas do logotipo. */
    --tinta: #0d1a26;
    --marca: #123a66;
    --marca-clara: #1e5490;
    --marca-fraca: #eaf0f7;
    --raio: #ffc400;
    --raio-escuro: #b88c00;
    --anel: #7d8b96;

    /* Superfícies. */
    --papel: #f4f6f8;
    --superficie: #ffffff;
    --superficie-fria: #f8fafb;
    --traco: #dde3e8;
    --traco-forte: #c3ccd4;

    /* Texto. */
    --texto: #17242f;
    --texto-fraco: #5d6c78;

    /* Estado — o vocabulário de bandeira do próprio setor. Reservadas para
       significado: nenhum elemento decorativo usa estas cores.
       Os três passos foram escolhidos pelo validador de paleta, não a olho: o
       par âmbar/vermelho anterior tinha ΔE 14,2 em visão normal (abaixo do
       piso de 15) e 5,2 em deuteranopia — indistinguível para quem não
       enxerga vermelho. Este trio dá ΔE 24,5 normal e 13,7 no pior caso CVD.
       Ainda assim, estado nunca aparece só como cor: vem com ícone e rótulo. */
    --ok: #1b7a4b;
    --ok-fundo: #e8f5ee;
    --atencao: #ce8e00;
    --atencao-escuro: #8a5f00;
    --atencao-fundo: #fdf4e3;
    --critico: #9e1b17;
    --critico-fundo: #fceceb;

    /* Ritmo. */
    --raio-borda: 5px;
    --fio: 1px solid var(--traco);

    /* Bootstrap: redefinir por variável evita uma cascata de !important. */
    --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-body-color: var(--texto);
    --bs-body-bg: var(--papel);
    --bs-secondary-color: var(--texto-fraco);
    --bs-emphasis-color: var(--tinta);
    --bs-border-color: var(--traco);
    --bs-border-radius: var(--raio-borda);
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 7px;
    --bs-link-color: var(--marca-clara);
    --bs-link-hover-color: var(--marca);
    --bs-link-decoration: none;
    --bs-primary: #123a66;
    --bs-primary-rgb: 18, 58, 102;
    --bs-font-monospace: "IBM Plex Mono", ui-monospace, monospace;
}

/* ------------------------------------------------------------------ base -- */
body {
    font-family: var(--bs-body-font-family);
    background-color: var(--papel);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
    /* Algarismos alinhados por padrão: a coluna de R$ só é comparável se os
       dígitos tiverem a mesma largura. */
    font-variant-numeric: tabular-nums;
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--tinta);
    font-weight: 600;
    letter-spacing: -0.011em;
}
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
h3, .h3 { font-size: 1.18rem; }
h4, .h4 { font-size: 1.05rem; }
h5, .h5 { font-size: 0.96rem; }
h6, .h6 { font-size: 0.86rem; }

.text-muted {
    color: var(--texto-fraco) !important;
}

/* Foco visível e consistente — o teclado é caminho de primeira classe aqui:
   quem lança faturamento o dia inteiro não solta o Tab. */
:focus-visible {
    outline: 2px solid var(--marca-clara);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------- navbar --- */
.navbar {
    --bs-navbar-padding-y: 0;
    background-color: var(--tinta) !important;
    border-bottom: 3px solid var(--marca);
}

.navbar .navbar-brand {
    padding-block: 0.7rem;
    margin-right: 1.75rem;
}

.navbar .nav-link {
    --bs-navbar-nav-link-padding-x: 0.85rem;
    position: relative;
    padding-block: 0.95rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #c8d2da;
    border-radius: 0;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
}

/* O trilho energizado: onde você está. */
.navbar .nav-link.ativo {
    color: #ffffff;
}
.navbar .nav-link.ativo::after {
    content: "";
    position: absolute;
    inset: auto 0.55rem -3px;
    height: 3px;
    background: var(--raio);
}

.navbar .dropdown-menu {
    --bs-dropdown-border-color: var(--traco);
    --bs-dropdown-link-active-bg: var(--marca-fraca);
    --bs-dropdown-link-active-color: var(--marca);
    --bs-dropdown-font-size: 0.875rem;
    --bs-dropdown-padding-y: 0.3rem;
    border-radius: 0 0 var(--raio-borda) var(--raio-borda);
    box-shadow: 0 10px 24px rgba(13, 26, 38, 0.14);
}

.navbar .dropdown-item {
    padding-block: 0.42rem;
}

/* ---------------------------------------------------- cabeçalho de página -- */
/* Barra do título: filete âmbar à esquerda, sobrenome da seção acima, ações à
   direita. É o mesmo trilho da navegação, na escala da página. */
.pagina-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 0 0 0.85rem 0.85rem;
    margin-bottom: 1.25rem;
    border-bottom: var(--fio);
    border-left: 3px solid var(--raio);
}

.pagina-cabecalho h1,
.pagina-cabecalho h2,
.pagina-cabecalho h3 {
    margin: 0;
}

.rotulo {
    display: block;
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--anel);
    margin-bottom: 0.2rem;
}

/* ------------------------------------------------------------ indicador --- */
/* Faixa de números do topo das listas. O número manda; o rótulo é legenda.
   Sem caixa colorida: cor aqui é reservada para estado, e "104 empresas" não
   é um estado. */
.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    background: var(--traco);
    border: var(--fio);
    border-radius: var(--raio-borda);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.indicador {
    position: relative;
    background: var(--superficie);
    padding: 0.8rem 1rem;
}

/* Indicador que também filtra a lista abaixo. O trilho âmbar marca o filtro
   em vigor — mesmo dispositivo da navegação, mesmo significado. */
a.indicador {
    display: block;
    color: inherit;
    transition: background-color 0.12s ease;
}
a.indicador:hover {
    background: var(--superficie-fria);
    text-decoration: none;
}
.indicador.ativo {
    background: var(--superficie-fria);
}
.indicador.ativo::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--raio);
}

.indicador-valor.critico { color: var(--critico); }
.indicador-valor.atencao { color: var(--atencao); }
.indicador-valor.ok { color: var(--ok); }

.indicador-valor {
    display: block;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.indicador-rotulo {
    display: block;
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--anel);
    margin-top: 0.15rem;
}

/* ------------------------------------------------------------ hero ------- */
/* O número de abertura. Não é gráfico: é uma grandeza só, e a forma certa para
   uma grandeza só é escrevê-la grande. */
.hero {
    background: var(--superficie);
    border: var(--fio);
    border-left: 3px solid var(--raio);
    border-radius: var(--raio-borda);
    padding: 1.4rem 1.5rem;
}

.hero-valor {
    font-size: clamp(2rem, 5vw, 2.9rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.hero-legenda {
    color: var(--texto-fraco);
    font-size: 0.86rem;
    margin-top: 0.45rem;
}

/* --------------------------------------------------------- régua --------- */
/* A assinatura desta tela: o valor de cada oportunidade vira comprimento,
   sempre na mesma escala (o maior da carteira = 100%). Uma tabela de cem
   números vira uma paisagem que se lê de relance.

   Um tom só, porque o trabalho da cor aqui é **magnitude**, não identidade —
   o tipo do estudo é dito por escrito, ao lado. Cor por categoria exigiria
   quatro matizes distinguíveis para carregar informação que o texto já dá. */
.regua {
    position: relative;
    height: 6px;
    background: #e9edf1;
    border-radius: 3px;
    overflow: hidden;
    min-width: 3rem;
}

.regua-barra {
    display: block;
    height: 100%;
    background: var(--marca-clara);
    /* Ponta arredondada só do lado que representa o dado; o outro fica preso
       à linha do zero. */
    border-radius: 0 3px 3px 0;
    /* Sem piso de largura: um valor zero tem que aparecer como trilho vazio.
       Um traço mínimo diria "existe um pouco" onde não existe nada. */
    min-width: 0;
}

/* Valor + régua na mesma célula, com o número mandando. */
.valor-com-regua {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-end;
    min-width: 8.5rem;
}

/* -------------------------------------------------------- quebra --------- */
/* Quebra do total por tipo de estudo: quatro grandezas comparáveis, rotuladas
   diretamente. Barras, não pizza — comprimento se compara, ângulo não. */
.quebra {
    display: grid;
    gap: 0.7rem;
}

.quebra-linha {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.75rem;
    align-items: baseline;
}

.quebra-rotulo {
    font-size: 0.82rem;
    color: var(--texto);
}

.quebra-valor {
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
}

.quebra-linha .regua {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------- fila --------- */
/* "O que exige ação hoje". Cada item traz ícone + rótulo + número: estado
   nunca é comunicado só por cor. */
.fila {
    display: grid;
    gap: 1px;
    background: var(--traco);
    border: var(--fio);
    border-radius: var(--raio-borda);
    overflow: hidden;
}

.fila-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 1rem;
    background: var(--superficie);
    color: inherit;
    transition: background-color 0.12s ease;
}

a.fila-item:hover {
    background: var(--superficie-fria);
    text-decoration: none;
}

.fila-numero {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 2.4rem;
    text-align: right;
}

.fila-texto {
    flex: 1;
    font-size: 0.86rem;
    line-height: 1.35;
}

.fila-item .bi {
    font-size: 1rem;
}

.fila-item.critico .fila-numero,
.fila-item.critico .bi { color: var(--critico); }
.fila-item.atencao .fila-numero,
.fila-item.atencao .bi { color: var(--atencao-escuro); }
.fila-item.ok .fila-numero,
.fila-item.ok .bi { color: var(--ok); }
.fila-item.neutro .fila-numero,
.fila-item.neutro .bi { color: var(--anel); }

/* --------------------------------------------------------- painel -------- */
.painel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
    align-items: start;
}

.painel-largo {
    grid-column: 1 / -1;
}

/* Linha inteira clicável: o alvo de clique passa a ser a linha, não um ícone
   de 24px no fim dela. */
tr.linha-clicavel { cursor: pointer; }
tr.linha-clicavel:hover { background: var(--marca-fraca); }
tr.linha-clicavel a { color: inherit; }

/* Cabeçalho de tabela que ordena — precisa parecer clicável. */
.th-sort {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--traco-forte);
}
.th-sort:hover {
    color: var(--marca-clara);
    border-bottom-color: var(--marca-clara);
    text-decoration: none;
}

/* --------------------------------------------------------- filtros ------- */
.barra-filtros {
    background: var(--superficie);
    border: var(--fio);
    border-radius: var(--raio-borda);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

/* ----------------------------------------------------------------- cards -- */
.card {
    --bs-card-border-color: var(--traco);
    --bs-card-bg: var(--superficie);
    --bs-card-cap-bg: var(--superficie-fria);
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1.1rem;
    box-shadow: none;
}

.card-header {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    border-bottom-color: var(--traco);
}

/* A sombra vira sinal de "isto responde ao clique", não enfeite. */
.shadow-sm {
    box-shadow: none !important;
}

a.card,
.card-clicavel {
    transition: border-color 0.12s ease, transform 0.12s ease;
}
a.card:hover,
.card-clicavel:hover {
    border-color: var(--traco-forte);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------- tabelas -- */
.table {
    --bs-table-bg: var(--superficie);
    --bs-table-color: var(--texto);
    --bs-table-border-color: var(--traco);
    --bs-table-hover-bg: var(--marca-fraca);
    --bs-table-striped-bg: var(--superficie-fria);
    margin-bottom: 0;
}

/* Fios só na horizontal: a grade vertical completa transforma a tabela em
   gaiola e atrapalha justamente a leitura por linha. */
.table > :not(caption) > * > * {
    padding: 0.55rem 0.7rem;
    border-bottom-width: 1px;
}

.table-bordered > :not(caption) > * > * {
    border-left-width: 0;
    border-right-width: 0;
}

.table > thead th,
.table-light > tr > th,
th.table-light {
    background-color: var(--superficie-fria);
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    white-space: nowrap;
    border-bottom: 1px solid var(--traco-forte);
}

/* A unidade sob o nome da coluna é grandeza, não rótulo: "MWm" e "kWh" perdem
   o sentido em caixa alta. */
.table > thead th small,
.table > thead th .unidade {
    display: block;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--anel);
}

.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

/* Cabeçalho fixo em tabelas longas — o painel de consumo tem 124 linhas e
   perder o nome da coluna no meio da rolagem é o que faz ler errado. */
.tabela-longa {
    max-height: 70vh;
    overflow: auto;
}
.tabela-longa thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Número: sempre à direita e tabular. */
.table td.text-end,
.table th.text-end,
.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Código: mono, levemente menor, sem quebra. UC, CNPJ e REH são para conferir
   caractere a caractere, não para ler como palavra. */
.codigo {
    font-family: var(--bs-font-monospace);
    font-size: 0.86em;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--texto-fraco);
}

/* -------------------------------------------------------------- unidades -- */
/* A unidade é contexto do número, não parte dele: fica menor e mais fraca. */
.unidade {
    font-size: 0.78em;
    color: var(--anel);
    margin-left: 0.15em;
}

/* -------------------------------------------------------------- botões ---- */
.btn {
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: 0.42rem;
    --bs-btn-padding-x: 0.85rem;
    --bs-btn-border-radius: var(--raio-borda);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.btn-sm {
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-padding-y: 0.28rem;
    --bs-btn-padding-x: 0.6rem;
}

.btn-primary {
    --bs-btn-bg: var(--marca);
    --bs-btn-border-color: var(--marca);
    --bs-btn-hover-bg: var(--marca-clara);
    --bs-btn-hover-border-color: var(--marca-clara);
    --bs-btn-active-bg: var(--tinta);
    --bs-btn-active-border-color: var(--tinta);
    --bs-btn-disabled-bg: var(--anel);
    --bs-btn-disabled-border-color: var(--anel);
}

/* O trilho, terceira aparição: a aresta do botão primário acende no foco. */
.btn-primary:focus-visible {
    outline-color: var(--raio);
    box-shadow: inset 3px 0 0 var(--raio);
}

.btn-outline-secondary {
    --bs-btn-color: var(--texto-fraco);
    --bs-btn-border-color: var(--traco-forte);
    --bs-btn-hover-color: var(--tinta);
    --bs-btn-hover-bg: var(--superficie-fria);
    --bs-btn-hover-border-color: var(--anel);
    --bs-btn-active-bg: var(--traco);
    --bs-btn-active-border-color: var(--anel);
    --bs-btn-active-color: var(--tinta);
}

.btn-outline-primary {
    --bs-btn-color: var(--marca);
    --bs-btn-border-color: var(--traco-forte);
    --bs-btn-hover-bg: var(--marca-fraca);
    --bs-btn-hover-color: var(--marca);
    --bs-btn-hover-border-color: var(--marca-clara);
}

.btn-success {
    --bs-btn-bg: var(--ok);
    --bs-btn-border-color: var(--ok);
    --bs-btn-hover-bg: #16653e;
    --bs-btn-hover-border-color: #16653e;
}

.btn-danger,
.btn-outline-danger {
    --bs-btn-color: var(--critico);
    --bs-btn-border-color: var(--critico);
}
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--critico);
    --bs-btn-hover-bg: #8f1e18;
    --bs-btn-hover-border-color: #8f1e18;
}
.btn-outline-danger {
    --bs-btn-border-color: #e6b9b6;
    --bs-btn-hover-bg: var(--critico-fundo);
    --bs-btn-hover-color: var(--critico);
    --bs-btn-hover-border-color: var(--critico);
}

/* Herdado do tema antigo; mantido porque templates ainda o usam. */
.btn-pastel-red {
    --bs-btn-color: var(--critico);
    --bs-btn-bg: var(--critico-fundo);
    --bs-btn-border-color: #f0cdcb;
    --bs-btn-hover-bg: #f8dbd9;
    --bs-btn-hover-color: #7d1a15;
    --bs-btn-hover-border-color: #e6b9b6;
}

/* --------------------------------------------------------------- badges --- */
.badge {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.045em;
    padding: 0.32em 0.6em;
    border-radius: 3px;
    text-transform: uppercase;
}

.bg-secondary {
    background-color: var(--superficie-fria) !important;
    color: var(--texto-fraco) !important;
    box-shadow: inset 0 0 0 1px var(--traco);
}
.bg-primary {
    background-color: var(--marca-fraca) !important;
    color: var(--marca) !important;
    box-shadow: inset 0 0 0 1px #c9d9ea;
}
.bg-success {
    background-color: var(--ok-fundo) !important;
    color: var(--ok) !important;
    box-shadow: inset 0 0 0 1px #c3e4d2;
}
.bg-warning {
    background-color: var(--atencao-fundo) !important;
    /* O passo claro de âmbar não tem contraste de texto; o rótulo usa o escuro
       e a cor de estado fica no fundo e no ícone. */
    color: var(--atencao-escuro) !important;
    box-shadow: inset 0 0 0 1px #f0dcb4;
}
.bg-danger {
    background-color: var(--critico-fundo) !important;
    color: var(--critico) !important;
    box-shadow: inset 0 0 0 1px #f0cdcb;
}
.bg-dark {
    background-color: var(--tinta) !important;
    color: #fff !important;
}

.text-danger { color: var(--critico) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--atencao) !important; }
.text-primary { color: var(--marca) !important; }

/* ------------------------------------------------------------ formulários -- */
.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--texto-fraco);
    margin-bottom: 0.28rem;
}

.form-control,
.form-select {
    --bs-border-color: var(--traco-forte);
    font-size: 0.9rem;
    padding: 0.42rem 0.65rem;
    background-color: var(--superficie);
    color: var(--texto);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--marca-clara);
    box-shadow: 0 0 0 3px rgba(30, 84, 144, 0.13);
}

.form-control::placeholder {
    color: #a9b4bd;
}

.form-control-sm,
.form-select-sm {
    font-size: 0.83rem;
    padding: 0.28rem 0.5rem;
}

/* Campo numérico alinhado à direita: é assim que se confere uma coluna de
   valores digitados. */
input[type="number"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.form-text,
.form-check-label {
    font-size: 0.8rem;
    color: var(--texto-fraco);
}

.invalid-feedback,
.errorlist {
    color: var(--critico);
    font-size: 0.8rem;
}

.errorlist {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
}

/* Largura fixa herdada do tema antigo; vira limite, para não estourar no
   celular. */
.form-layout {
    width: 100%;
    max-width: 800px;
    border-radius: var(--bs-border-radius-lg);
}

/* --------------------------------------------------------------- alertas -- */
.alert {
    --bs-alert-border-color: transparent;
    border-left-width: 3px;
    border-left-style: solid;
    border-radius: 0 var(--raio-borda) var(--raio-borda) 0;
    font-size: 0.88rem;
    padding: 0.7rem 0.95rem;
}
.alert-info {
    --bs-alert-bg: var(--marca-fraca);
    --bs-alert-color: var(--marca);
    border-left-color: var(--marca-clara);
}
.alert-success {
    --bs-alert-bg: var(--ok-fundo);
    --bs-alert-color: #14603a;
    border-left-color: var(--ok);
}
.alert-warning {
    --bs-alert-bg: var(--atencao-fundo);
    --bs-alert-color: #7a5200;
    border-left-color: var(--atencao);
}
.alert-danger,
.alert-error {
    --bs-alert-bg: var(--critico-fundo);
    --bs-alert-color: #8f1e18;
    border-left-color: var(--critico);
}

/* ------------------------------------------------------------- paginação -- */
.pagination {
    --bs-pagination-font-size: 0.85rem;
    --bs-pagination-color: var(--texto-fraco);
    --bs-pagination-border-color: var(--traco);
    --bs-pagination-hover-bg: var(--superficie-fria);
    --bs-pagination-hover-color: var(--marca);
    --bs-pagination-active-bg: var(--marca);
    --bs-pagination-active-border-color: var(--marca);
}

/* ----------------------------------------------------------------- login -- */
.tela-login {
    min-height: calc(100vh - 4rem);
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.cartao-login {
    width: 100%;
    max-width: 21rem;
    background: var(--superficie);
    border: var(--fio);
    border-top: 3px solid var(--raio);
    border-radius: var(--raio-borda);
    padding: 1.75rem;
}

/* ----------------------------------------------------------------- vazio -- */
/* Tela vazia é convite para agir, não recado de erro. */
.estado-vazio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--texto-fraco);
}
.estado-vazio .bi {
    font-size: 1.75rem;
    color: var(--traco-forte);
    display: block;
    margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------- rodapé -- */
footer {
    background-color: var(--superficie);
    border-top: var(--fio);
    padding: 1.1rem;
    text-align: center;
    color: var(--anel);
    font-size: 0.8rem;
}

/* ------------------------------------------------------ memória de cálculo -- */
/* A conta aberta: componentes em linha, cenários em coluna. Fica dentro de um
   <details> porque é a resposta à segunda pergunta ("por quê?"), não à
   primeira — quem só quer o número não deveria ter que rolar por ela. */
.memoria > summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--texto-fraco);
    padding: 0.15rem 0;
}

.memoria > summary:hover {
    color: var(--marca);
}

.memoria-corpo {
    margin-top: 0.75rem;
}

.memoria-tabela {
    --bs-table-bg: transparent;
    font-size: 0.85rem;
}

.memoria-tabela tfoot th,
.memoria-tabela tfoot td {
    border-top: 1px solid var(--traco-forte);
    font-weight: 600;
    background-color: var(--superficie-fria);
}

/* A coluna recomendada é a resposta do estudo: ela se destaca do resto da
   tabela sem precisar de cor, que aqui já significa economia e custo. */
.memoria-tabela .coluna-vencedora {
    background-color: var(--marca-fraca);
}

.memoria-tabela thead th.coluna-vencedora {
    color: var(--marca);
}

/* Economia e custo a mais. Nunca sozinhos: o sinal do número vem junto, porque
   ~8% dos homens não distinguem vermelho de verde. */
.memoria-tabela .positivo {
    color: var(--ok);
}

.memoria-tabela .negativo {
    color: var(--critico);
}

.memoria-premissas h3 {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    margin: 1rem 0 0.4rem;
}

.memoria-premissas dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    margin: 0;
    font-size: 0.82rem;
}

.memoria-premissas dt {
    color: var(--texto-fraco);
    font-weight: 400;
    white-space: nowrap;
}

.memoria-premissas dd {
    margin: 0;
    color: var(--texto);
}

.memoria-notas {
    margin: 0.9rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    color: var(--texto-fraco);
}

.memoria-notas li + li {
    margin-top: 0.25rem;
}

@media (max-width: 575.98px) {
    .memoria-premissas dl {
        grid-template-columns: 1fr;
        gap: 0 0;
    }
    .memoria-premissas dd {
        margin-bottom: 0.4rem;
    }
}

/* ----------------------------------------------------------------- misc --- */
hr {
    border-color: var(--traco);
    opacity: 1;
}

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

code, kbd, pre, samp {
    font-family: var(--bs-font-monospace);
}

/* Sparklines de consumo desenhados na view. */
svg.sparkline {
    display: block;
    overflow: visible;
}

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

@media (max-width: 575.98px) {
    .pagina-cabecalho {
        align-items: flex-start;
        flex-direction: column;
    }
    .table > :not(caption) > * > * {
        padding: 0.45rem 0.5rem;
    }
}

@media print {
    .navbar,
    footer,
    .btn,
    .pagination {
        display: none !important;
    }
    body {
        background: #fff;
    }
    .card {
        border-color: #ccc;
    }
}