/* Área de toque mínima de 44px: a usuária real acessa pelo celular. */
.btn,
.form-control,
.form-select {
    min-height: 44px;
}

/* Com a altura mínima de 44px, o texto de um .btn-sm (ou de um botão
   numa linha mais alta) ficava colado no TOPO da caixa — parecia um
   botão quebrado/desabilitado. Flex centraliza o conteúdo nas duas
   direções, qualquer que seja a altura do botão. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Botão só com ícone (ex.: as setas "‹"/"›" de navegação de dia/semana):
   min-height já garante os 44px de altura, mas um caractere sozinho não
   preenche os 44px de LARGURA só com o padding padrão do Bootstrap
   (ficava com uns 30px) — min-width fecha o quadrado de toque. */
.btn-icone {
    min-width: 44px;
    font-size: 1.5rem;
    line-height: 1;
}

/* Menu da conta na navbar (nome da conta → "Minha conta" / "Sair"): o
   "Sair" já foi um btn-outline-light — branco com moldura sobre o verde,
   o elemento de MAIOR destaque do sistema, para a ação menos importante.
   O botão da conta tem o peso dos links do menu, e o nome é cortado com
   "…" para caber ao lado do hambúrguer em 390px. */
.btn-conta {
    --bs-btn-color: rgba(255, 255, 255, .75);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.btn-conta:hover {
    text-decoration: underline;
}

.nome-conta {
    display: inline-block;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.navbar-toggler {
    min-height: 44px;
    min-width: 44px;
}

/* ==========================================================================
   Identidade visual — "Sessão"

   Sobrescreve as variáveis CSS do Bootstrap 5.3 em vez de trocar classes
   nos templates: os componentes continuam sendo .btn-primary, .bg-primary
   etc., só a cor por trás muda. Duas camadas são necessárias:

   1) --bs-primary / --bs-primary-rgb no :root — cobre as classes utilitárias
      que já leem essas variáveis (.bg-primary, .text-primary, .border-primary,
      links).
   2) Várias classes de componente (.btn-primary, .btn-outline-primary, os
      estados :focus de formulário, o checkbox marcado, a barra de progresso)
      vêm do Bootstrap com a cor #0d6efd "cravada" em variáveis PRÓPRIAS de
      cada componente (--bs-btn-bg e afins), não em var(--bs-primary) — essas
      precisam ser sobrescritas uma a uma, feito abaixo.

   As variáveis "-subtle"/"-text-emphasis" de --bs-primary também foram
   redefinidas (selos de categoria). As cores semânticas (sucesso/erro/
   aviso) NÃO: continuam comunicando estado, não marca (pedido explícito
   do TCC).
   ========================================================================== */
:root {
    --bs-primary: #0f6b5f;
    --bs-primary-rgb: 15, 107, 95;
    --sessao-primary-hover: #0a544a;
    --sessao-primary-hover-rgb: 10, 84, 74;

    --bs-body-bg: #f6f8f7;
    --bs-body-color: #16211f;

    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--sessao-primary-hover);
    --bs-link-hover-color-rgb: var(--sessao-primary-hover-rgb);

    /* Anel de foco (teclado) de links de navegação, botão de fechar
       alerta etc.: no Bootstrap vem azul, rgba(13,110,253,.25). */
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .25);

    /* Tom claro da marca, para selos de CATEGORIA (encaixe, pacote) —
       que não são estado e não devem usar o ciano "info" do Bootstrap. */
    --bs-primary-bg-subtle: #d5ebe7;
    --bs-primary-text-emphasis: #07403a;
    --bs-primary-border-subtle: #9fd0c7;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--sessao-primary-hover);
    --bs-btn-hover-border-color: var(--sessao-primary-hover);
    --bs-btn-active-bg: var(--sessao-primary-hover);
    --bs-btn-active-border-color: var(--sessao-primary-hover);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-link {
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--sessao-primary-hover);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

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

.progress {
    --bs-progress-bar-bg: var(--bs-primary);
}

/* Mais componentes com o azul #0d6efd cravado em variável própria
   (procurados no bootstrap.min.css; ficam aqui só os que o sistema usa):
   abas de Horários fixos, item clicado dos menus suspensos da navbar,
   item ativo de list-group (lista de pacotes). */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

.list-group {
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
}

/* Largura confortável de leitura em telas grandes: o Bootstrap já limita
   .container a até 1320px por padrão, mas nosso conteúdo (formulários e
   listas estreitas) fica mais legível com um teto menor. Abaixo de 960px
   o container continua 100% da largura disponível — não afeta o celular. */
main.container {
    max-width: 960px;
}

/* Saldo: vermelho "deve" / verde "em haver" precisam continuar
   claramente distintos do verde-azulado da marca (--bs-primary). O tom de
   "em haver" foi ajustado para um verde mais puro (menos azulado) do que
   a cor da marca, para não ficarem parecidos a um olhar rápido no celular. */
.saldo-credor {
    color: #1e7a34;
    font-weight: 600;
}

.saldo-devedor {
    color: #b02a37;
    font-weight: 600;
}

.saldo-zerado {
    color: #495057;
    font-weight: 600;
}

/* Tela de login: sem navbar (ver base.html), cartão centralizado na tela
   inteira em vez de colado no topo.

   O flex do body centraliza o seu ÚNICO filho, o <main class="container">
   — não o cartão. O <main> tem a largura do container (até 960px, ver
   main.container acima), e o cartão (400px) ficava encostado na esquerda
   DENTRO dele: em 1920px, 268px à esquerda do centro. Por isso o cartão
   precisa se centralizar sozinho dentro do <main> (margin-inline: auto),
   e o <main> desta tela não leva o pb-5 das outras (ver main_class em
   base.html) — senão o centro vertical sobe 24px. */
body.pagina-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.cartao-login {
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
}

/* Telas de conta de quem já entrou (e-mail, senha) e as páginas de termos
   e privacidade: coluna de leitura estreita, centralizada. */
.cartao-gerenciar {
    max-width: 560px;
}

/* Termos e privacidade: lacuna ainda por preencher (CNPJ, endereço...).
   Vermelho de propósito — tem que saltar aos olhos na tela; o
   deploy/publicar.sh também recusa publicar enquanto houver alguma. */
.lacuna {
    background-color: #f8d7da;
    color: #842029;
    font-weight: 600;
    padding: 0 .25rem;
    border: 1px dashed #842029;
    border-radius: .2rem;
}

/* Faixa da conta de demonstração (base.html): discreta e informativa —
   tom claro da marca, NÃO o amarelo de alerta (não é um problema a
   resolver, é uma informação sobre os dados que estão na tela). */
.faixa-demonstracao {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: .875rem;
    text-align: center;
    padding: .375rem 1rem;
}

/* Rodapé de todas as telas (base.html): links para termos e privacidade. */
.rodape-sessao a {
    display: inline-block;
    padding: .5rem .25rem;
}

/* Barra do resumo anual (Painel): CSS puro, sem biblioteca de gráficos —
   o sistema precisa funcionar offline na apresentação. Uma cor só (a
   primária), largura proporcional ao maior mês do ano (calculada no
   servidor, ver resumo_ano() em views.py). */
.barra-mes {
    background-color: var(--bs-tertiary-bg, #e9ecef);
    border-radius: .25rem;
    height: 1rem;
    overflow: hidden;
}

.barra-mes-preenchida {
    background-color: var(--bs-primary);
    height: 100%;
}