@charset "UTF-8";
/* =====================================================================
   SGCO — Sistema de Gestão da Casa de Oração
   Folha de estilo única. Mobile-first.
   Paleta e tipografia do tema institucional CCB.
   ===================================================================== */

/* ------------------------------------------------------------------
   1. Fontes
   As fontes ITC Novarese são licenciadas e ficam em diretório
   protegido. São servidas por assets/fonte.php, que exige sessão.
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'ITC Novarese Std';
  src: url('../fonte.php?f=book') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ITC Novarese Std';
  src: url('../fonte.php?f=book-italic') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'ITC Novarese Std';
  src: url('../fonte.php?f=bold') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ITC Novarese Std';
  src: url('../fonte.php?f=bold-italic') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ------------------------------------------------------------------
   2. Variáveis
   ------------------------------------------------------------------ */
:root {
  --azul-institucional: #033D60;
  --cinza-claro:        #CDD4DC;
  --laranja:            #DC3C00;
  --ambar:              #FFCC66;
  --verde:              #5DB196;
  --verde-claro:        #98CDBD;
  --petroleo:           #49656C;
  --grafite:            #201E1E;
  --branco:             #FFFFFF;

  --fonte-titulo: 'ITC Novarese Std', 'Verdana', Geneva, Tahoma, sans-serif;
  --fonte-texto:  Verdana, Geneva, Tahoma, sans-serif;

  --sidebar-largura: 260px;
  --topo-altura: 56px;
  --toque-min: 44px;
  --raio: 6px;
  --sombra: 0 2px 8px rgba(32, 30, 30, .15);
}

/* ------------------------------------------------------------------
   3. Base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--branco);
  color: var(--grafite);
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.5;
  /* Nenhuma tela pode rolar na horizontal: o sistema é usado em pé,
     com uma das mãos, no almoxarifado e no salão. */
  overflow-x: hidden;
}

/* Palavra longa sem espaço, como um nome de arquivo ou uma URL, quebra
   em vez de empurrar a largura da tabela. */
.tabela td, .tabela th, .cartao { overflow-wrap: anywhere; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--azul-institucional);
  margin: 0 0 .5rem;
  line-height: 1.25;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

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

img { max-width: 100%; }

hr { border: 0; border-top: 1px solid var(--cinza-claro); margin: 1.25rem 0; }

.pular-conteudo {
  position: absolute; left: -9999px; top: 0;
  background: var(--ambar); color: var(--grafite);
  padding: .75rem 1rem; z-index: 1000;
}
.pular-conteudo:focus { left: 0; }

.texto-secundario { color: var(--petroleo); }
.texto-pequeno { font-size: .85rem; }
.texto-direita { text-align: right; }
.texto-centro { text-align: center; }
.negrito { font-weight: 700; }
.oculto { display: none !important; }

/* ------------------------------------------------------------------
   4. Barra superior
   ------------------------------------------------------------------ */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  min-height: var(--topo-altura);
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem .5rem;
  background: var(--azul-institucional);
  color: var(--branco);
  flex-wrap: wrap;
  /* Nada pode passar da borda direita da janela. */
  max-width: 100%; overflow: hidden;
}

.topo__hamburguer {
  width: var(--toque-min); height: var(--toque-min);
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer; padding: 10px;
}
.topo__hamburguer span {
  display: block; height: 2px; background: var(--branco); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.topo__hamburguer.is-aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo__hamburguer.is-aberto span:nth-child(2) { opacity: 0; }
.topo__hamburguer.is-aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.topo__marca {
  display: flex; align-items: center; gap: .5rem;
  color: var(--branco); text-decoration: none; margin-right: auto;
  flex: 0 0 auto;
}
.topo__logo { height: 32px; width: auto; }
.topo__nome {
  font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: .06em;
  white-space: nowrap;
}

/* O bloco do usuário nunca encolhe nem é empurrado para fora: sem ele não há
   como sair do sistema. É o último a ceder espaço, e por isso vem com
   flex-shrink zero e margem esquerda automática. */
.topo__usuario {
  display: flex; align-items: center; gap: .5rem;
  flex: 0 0 auto; margin-left: auto;
}
.topo__usuario-nome { display: none; font-size: .85rem; }
.topo__sair {
  color: var(--branco); text-decoration: none; font-size: .85rem;
  border: 1px solid rgba(255,255,255,.5); border-radius: var(--raio);
  min-height: 34px; display: inline-flex; align-items: center; padding: 0 .75rem;
}
.topo__sair:hover { background: rgba(255,255,255,.12); color: var(--branco); }

/* Seletor de exercício
   ---------------------
   Os dois campos aqui são <select>, e a folha tem uma regra geral
   `select { width: 100% }` para os formulários das telas. Aplicada a estes
   dois, dentro de um formulário que se ajusta ao conteúdo, ela fazia cada
   select tentar ocupar a largura inteira da barra: o mês esticava, o ano era
   cortado na borda e o bloco do usuário, com o botão Sair, saía da tela.
   Por isso os campos aqui têm largura própria, declarada em pixels, e um
   seletor específico o bastante para não depender da ordem das regras. */
.exercicio {
  order: 3; width: 100%;
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem 0 .5rem;
  flex: 0 1 auto; min-width: 0;
}
.exercicio__rotulo {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cinza-claro); white-space: nowrap;
}
.topo .exercicio__campo {
  min-height: 36px; border: 0; border-radius: var(--raio);
  background: var(--branco); color: var(--grafite);
  font-family: var(--fonte-texto); font-size: .9rem; padding: 0 .4rem;
  flex: 1 1 auto; min-width: 0;
}
/* Largura suficiente para "Setembro" e para quatro dígitos, e nada além. */
.topo .exercicio__campo--mes { width: 140px; }
.topo .exercicio__campo--ano { width: 90px; }
.exercicio__ok {
  min-height: 36px; padding: 0 .8rem; border: 0; border-radius: var(--raio);
  background: var(--ambar); color: var(--grafite); font-weight: 700; cursor: pointer;
}
.js-ativo .exercicio__ok { display: none; }

/* ------------------------------------------------------------------
   5. Menu lateral
   ------------------------------------------------------------------ */
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
  width: var(--sidebar-largura); max-width: 85vw;
  background: var(--azul-institucional); color: var(--branco);
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y: auto;
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.sidebar.is-aberta { transform: translateX(0); }

.sidebar__topo { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.sidebar__casa { margin: 0; font-size: .8rem; line-height: 1.35; }
.sidebar__casa strong { display: block; font-family: var(--fonte-titulo); font-size: .95rem; }
.sidebar__casa span { color: var(--cinza-claro); }

.sidebar__lista { list-style: none; margin: 0; padding: .5rem 0; flex: 1; }

.sidebar__item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: var(--toque-min);
  padding: .6rem 1rem; text-align: left;
  color: var(--branco); text-decoration: none; font-size: .9rem;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--fonte-texto);
  border-left: 4px solid transparent;
}
.sidebar__item:hover { background: rgba(255,255,255,.08); color: var(--branco); }
.sidebar__item.is-ativo { background: rgba(255,255,255,.14); border-left-color: var(--ambar); font-weight: 700; }

.sidebar__seta { transition: transform .2s ease; }
.sidebar__grupo.is-aberto .sidebar__seta { transform: rotate(180deg); }

.sidebar__submenu { list-style: none; margin: 0; padding: 0; background: rgba(0,0,0,.18); }
.sidebar__subitem {
  display: flex; align-items: center; min-height: var(--toque-min);
  padding: .5rem 1rem .5rem 2rem; font-size: .85rem;
  color: var(--cinza-claro); text-decoration: none;
  border-left: 4px solid transparent;
}
.sidebar__subitem:hover { background: rgba(255,255,255,.08); color: var(--branco); }
.sidebar__subitem.is-ativo { color: var(--branco); border-left-color: var(--ambar); font-weight: 700; }

.sidebar__rodape {
  padding: .75rem 1rem; font-size: .75rem; color: var(--cinza-claro);
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex; flex-direction: column; gap: .15rem;
}

.mascara {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(32, 30, 30, .5);
}

/* ------------------------------------------------------------------
   6. Área de conteúdo
   ------------------------------------------------------------------ */
.conteudo {
  padding: 1rem .75rem 2rem;
  margin-top: calc(var(--topo-altura) + 44px); /* barra + linha do exercício */
  min-height: 60vh;
}

.pagina__cabecalho { margin-bottom: 1rem; }
.pagina__subtitulo { margin: 0; color: var(--petroleo); font-size: .9rem; }

.tarja-exercicio {
  background: var(--ambar); color: var(--grafite);
  font-weight: 700; text-align: center;
  padding: .6rem .75rem; border-radius: var(--raio);
  margin-bottom: 1rem;
}

.rodape {
  border-top: 1px solid var(--cinza-claro);
  padding: 1rem .75rem 2rem;
  color: var(--petroleo); font-size: .8rem;
}
.rodape p { margin: .15rem 0; }
.rodape__nota { font-style: italic; }

/* ------------------------------------------------------------------
   7. Alertas
   ------------------------------------------------------------------ */
.alerta {
  padding: .75rem 1rem; border-radius: var(--raio);
  margin-bottom: 1rem; border-left: 5px solid var(--petroleo);
  background: var(--cinza-claro); color: var(--grafite);
}
.alerta--sucesso { background: var(--verde-claro); border-left-color: var(--verde); }
.alerta--erro    { background: #F7DDD3; border-left-color: var(--laranja); }
.alerta--aviso   { background: #FFEFC9; border-left-color: var(--ambar); }
.alerta--info    { background: var(--cinza-claro); border-left-color: var(--azul-institucional); }

/* ------------------------------------------------------------------
   8. Cartões e painéis
   ------------------------------------------------------------------ */
.cartao {
  background: var(--branco);
  border: 1px solid var(--cinza-claro);
  border-radius: var(--raio);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
}
.cartao__titulo {
  font-family: var(--fonte-titulo); color: var(--azul-institucional);
  font-size: 1.05rem; margin: 0 0 .75rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--cinza-claro);
}

.grade { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.indicador {
  border: 1px solid var(--cinza-claro); border-radius: var(--raio);
  padding: .85rem; background: var(--branco);
}
.indicador__rotulo {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--petroleo); margin-bottom: .25rem;
}
.indicador__valor {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 1.4rem; color: var(--azul-institucional);
}
.indicador__nota { display: block; font-size: .78rem; color: var(--petroleo); margin-top: .25rem; }
.indicador--alerta   { border-color: var(--laranja); }
.indicador--alerta   .indicador__valor { color: var(--laranja); }
.indicador--positivo { border-color: var(--verde); background: var(--verde-claro); }

/* Destaque numérico para valores transcritos a caneta nos livros oficiais */
.valor-transcricao {
  display: block;
  border: 2px solid var(--azul-institucional);
  border-radius: var(--raio);
  background: var(--cinza-claro);
  padding: .75rem 1rem;
  margin: .5rem 0;
  text-align: center;
}
.valor-transcricao__rotulo {
  display: block;
  font-family: var(--fonte-texto);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--petroleo);
  margin-bottom: .25rem;
}
.valor-transcricao__numero {
  display: block;
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 2rem; line-height: 1.15;
  color: var(--grafite);
}
.valor-transcricao__nota {
  display: block; font-size: .72rem; color: var(--petroleo); margin-top: .25rem;
}
.valor-transcricao--positivo { border-color: var(--verde); background: var(--verde-claro); }
.valor-transcricao--alerta   { border-color: var(--laranja); }

/* ------------------------------------------------------------------
   9. Etiquetas de estado
   ------------------------------------------------------------------ */
.etiqueta {
  display: inline-block; padding: .2rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--cinza-claro); color: var(--grafite);
}
.etiqueta--aberto    { background: var(--ambar); }
.etiqueta--conferido { background: var(--verde-claro); }
.etiqueta--fechado   { background: var(--verde); color: var(--branco); }
.etiqueta--alerta    { background: var(--laranja); color: var(--branco); }
.etiqueta--inativo   { background: var(--cinza-claro); color: var(--petroleo); }
.etiqueta--ativo     { background: var(--verde); color: var(--branco); }

/* ------------------------------------------------------------------
   10. Formulários
   ------------------------------------------------------------------ */
.formulario { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo__rotulo { font-size: .82rem; font-weight: 700; color: var(--petroleo); }
.campo__ajuda { font-size: .78rem; color: var(--petroleo); line-height: 1.4; }
.campo__erro { font-size: .78rem; color: var(--laranja); font-weight: 700; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="search"], input[type="file"],
input:not([type]),
select, textarea {
  width: 100%;
  min-height: var(--toque-min);
  padding: .5rem .6rem;
  font-family: var(--fonte-texto); font-size: 16px; /* evita zoom automático no iOS */
  color: var(--grafite); background: var(--branco);
  border: 1px solid var(--petroleo); border-radius: var(--raio);
}
textarea { min-height: 90px; resize: vertical; }

input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--ambar); outline-offset: 1px;
}

input[disabled], select[disabled], textarea[disabled] {
  background: var(--cinza-claro); color: var(--petroleo); cursor: not-allowed;
}

.campo--inline { flex-direction: row; align-items: center; gap: .5rem; }
.campo--inline input[type="checkbox"], .campo--inline input[type="radio"] {
  width: 22px; height: 22px; min-height: 0; flex: 0 0 auto;
}

.acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--toque-min); padding: .5rem 1.1rem;
  border: 0; border-radius: var(--raio); cursor: pointer;
  font-family: var(--fonte-texto); font-size: .92rem; font-weight: 700;
  text-decoration: none; text-align: center;
  background: var(--azul-institucional); color: var(--branco);
}
.botao:hover { background: var(--petroleo); color: var(--branco); }
.botao--secundario { background: var(--cinza-claro); color: var(--grafite); }
.botao--secundario:hover { background: #B9C2CC; color: var(--grafite); }
.botao--positivo { background: var(--verde); }
.botao--perigo { background: var(--laranja); }
.botao--pequeno { min-height: 36px; padding: .3rem .7rem; font-size: .8rem; }
.botao--largo { width: 100%; }
.botao[disabled] { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------------
   11. Tabelas — viram cartões empilhados em tela pequena
   ------------------------------------------------------------------ */
.tabela-envolucro { width: 100%; overflow-x: auto; }

.tabela {
  width: 100%; border-collapse: collapse; font-size: .88rem;
  background: var(--branco);
}
.tabela caption {
  text-align: left; font-size: .8rem; color: var(--petroleo); padding-bottom: .4rem;
}
.tabela th, .tabela td { padding: .55rem .6rem; text-align: left; vertical-align: top; }
.tabela thead th {
  background: var(--azul-institucional); color: var(--branco);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.tabela tbody tr { border-bottom: 1px solid var(--cinza-claro); }
.tabela tbody tr:nth-child(even) { background: rgba(205, 212, 220, .35); }
.tabela tfoot td { font-weight: 700; background: var(--cinza-claro); }
.tabela .col-valor { text-align: right; white-space: nowrap; }
.tabela .col-acoes { white-space: nowrap; }

.vazio {
  padding: 1.25rem; text-align: center; color: var(--petroleo);
  background: var(--cinza-claro); border-radius: var(--raio);
}

@media (max-width: 767px) {
  .tabela--cartoes thead { display: none; }
  .tabela--cartoes, .tabela--cartoes tbody, .tabela--cartoes tr, .tabela--cartoes td {
    display: block; width: 100%;
  }
  .tabela--cartoes tr {
    border: 1px solid var(--cinza-claro); border-radius: var(--raio);
    margin-bottom: .75rem; padding: .35rem .5rem; background: var(--branco);
  }
  .tabela--cartoes tbody tr:nth-child(even) { background: var(--branco); }
  /* O rótulo fica posicionado à esquerda e o conteúdo segue em fluxo
     normal. Com flex, cada elemento da célula virava um item separado, e
     um número seguido do nome do produto quebrava no meio. */
  .tabela--cartoes td {
    display: block; position: relative;
    padding: .45rem .1rem .45rem 45%;
    border-bottom: 1px dashed var(--cinza-claro);
    text-align: right; min-height: 2rem;
  }
  .tabela--cartoes td:last-child { border-bottom: 0; }
  .tabela--cartoes td::before {
    content: attr(data-rotulo);
    position: absolute; left: 0; top: .45rem; width: 42%;
    font-weight: 700; color: var(--petroleo); text-align: left;
    text-transform: uppercase; font-size: .7rem; letter-spacing: .05em;
    line-height: 1.4;
  }
  .tabela--cartoes td.col-acoes { text-align: left; }
  .tabela--cartoes tfoot td { background: var(--cinza-claro); }

  /* Linha de título de grupo ocupa o cartão inteiro, sem o rótulo lateral */
  .tabela--cartoes tr.linha-grupo { padding: 0; border: 0; margin-bottom: .25rem; }
  .tabela--cartoes tr.linha-grupo td { text-align: left; border-bottom: 0; padding: .5rem; min-height: 0; }
  .tabela--cartoes tr.linha-grupo td::before { content: none; }

  /* Campos numéricos dentro de cartão: alvo de toque confortável,
     sem espremer o rótulo. Vale para a contagem do CNS. */
  .tabela--cartoes td input[type="number"],
  .tabela--cartoes td input[type="text"] {
    max-width: 8rem; text-align: right;
  }
}

/* ------------------------------------------------------------------
   11c. Alvos de toque em tela pequena
   O sistema é usado em pé, com uma das mãos. Abaixo de 768px todo
   controle passa a ter no mínimo 44px de altura, inclusive os que no
   desktop podem ser menores por serem operados com o mouse.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .botao--pequeno { min-height: var(--toque-min); }

  .exercicio__campo,
  .exercicio__ok { min-height: var(--toque-min); }

  /* A caixa de seleção é pequena por natureza; quem cresce é a linha
     inteira, que também é clicável pelo rótulo. */
  .campo--inline { min-height: var(--toque-min); }
  .campo--inline input[type="checkbox"],
  .campo--inline input[type="radio"] { width: 26px; height: 26px; }
  .campo--inline label { flex: 1; padding: .5rem 0; }

  /* As abas quebram em duas linhas em vez de sair da tela */
  .abas { flex-wrap: wrap; overflow-x: visible; }
  .abas__item { flex: 1 1 auto; padding: .5rem .6rem; font-size: .82rem; white-space: normal; text-align: center; }
}

/* Telas muito estreitas: o destaque numérico não pode estourar a largura */
@media (max-width: 420px) {
  .valor-transcricao__numero { font-size: 1.6rem; }
  .valor-transcricao { padding: .6rem .5rem; }
  .indicador__valor { font-size: 1.2rem; }
  .conteudo { padding-left: .6rem; padding-right: .6rem; }
  .abas__item { padding: .5rem .45rem; font-size: .76rem; }
}

/* ------------------------------------------------------------------
   11b. Abas de módulo, passos e linha de ajuste
   ------------------------------------------------------------------ */
.abas {
  display: flex; gap: .25rem; margin-bottom: 1rem;
  border-bottom: 2px solid var(--cinza-claro);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.abas__item {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: var(--toque-min); padding: .5rem 1rem;
  color: var(--petroleo); text-decoration: none; font-weight: 700; font-size: .9rem;
  border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap;
}
.abas__item:hover { color: var(--azul-institucional); background: rgba(205,212,220,.35); }
.abas__item.is-ativa {
  color: var(--azul-institucional); border-bottom-color: var(--azul-institucional);
  background: rgba(205,212,220,.35);
}

.passo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-right: .5rem;
  border-radius: 50%; background: var(--azul-institucional); color: var(--branco);
  font-family: var(--fonte-texto); font-size: .8rem; font-weight: 700;
  vertical-align: middle;
}

.tabela tbody tr.linha-ajuste,
.tabela tbody tr.linha-ajuste:nth-child(even) {
  background: #FFEFC9;
  border-left: 4px solid var(--ambar);
  font-style: italic;
}

/* Vínculo de voluntário pendente de revisão da função */
.tabela tbody tr.linha-pendente,
.tabela tbody tr.linha-pendente:nth-child(even) {
  background: #FFEFC9;
  border-left: 4px solid var(--ambar);
}

/* Linha de título de grupo dentro de uma tabela */
.tabela tbody tr.linha-grupo td {
  background: var(--cinza-claro);
  font-weight: 700;
}

/* ------------------------------------------------------------------
   12. Login e telas sem menu
   ------------------------------------------------------------------ */
.tela-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--azul-institucional); padding: 1.25rem;
}
.caixa-login {
  width: 100%; max-width: 400px; background: var(--branco);
  border-radius: var(--raio); padding: 1.75rem 1.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.caixa-login__marca { text-align: center; margin-bottom: 1.25rem; }
.caixa-login__marca img { height: 72px; width: auto; }
.caixa-login__nome {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.5rem;
  color: var(--azul-institucional); margin: .5rem 0 0; letter-spacing: .08em;
}
.caixa-login__descricao { font-size: .8rem; color: var(--petroleo); margin: .1rem 0 0; }

/* ------------------------------------------------------------------
   13. Utilitários de módulo em construção
   ------------------------------------------------------------------ */
.em-construcao {
  border: 2px dashed var(--cinza-claro); border-radius: var(--raio);
  padding: 2rem 1rem; text-align: center; color: var(--petroleo);
}
.em-construcao__titulo {
  font-family: var(--fonte-titulo); font-size: 1.2rem;
  color: var(--azul-institucional); margin-bottom: .5rem;
}

/* ------------------------------------------------------------------
   14. Telas médias e grandes
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  /* gap de 1rem entre marca, seletor de exercício e bloco do usuário: sem ele
     os três encostam quando a janela aperta. */
  .topo { flex-wrap: nowrap; padding: .25rem 1rem; gap: 1rem; }
  .topo__hamburguer { display: none; }
  .topo__usuario-nome {
    display: inline; max-width: 24ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Os três blocos ficam lado a lado: marca à esquerda, seletor à direita do
     centro e usuário na extremidade. As margens automáticas da marca e do
     bloco do usuário é que empurram o seletor para essa posição. */
  .exercicio {
    order: 0; width: auto; padding: 0; margin-left: auto; margin-right: 0;
    flex: 0 0 auto;
  }
  .topo .exercicio__campo { flex: 0 0 auto; }

  .sidebar {
    transform: translateX(0);
    top: var(--topo-altura);
    box-shadow: none;
  }
  .mascara { display: none !important; }

  .conteudo {
    margin-top: var(--topo-altura);
    margin-left: var(--sidebar-largura);
    padding: 1.5rem 1.75rem 3rem;
  }
  .rodape { margin-left: var(--sidebar-largura); }

  .grade--2 { grid-template-columns: repeat(2, 1fr); }
  .grade--3 { grid-template-columns: repeat(3, 1fr); }
  .formulario--2 { grid-template-columns: repeat(2, 1fr); }
  .formulario--2 .campo--largo { grid-column: 1 / -1; }
  .botao--largo { width: auto; }
}

@media (min-width: 1100px) {
  .grade--4 { grid-template-columns: repeat(4, 1fr); }
  .conteudo { padding-right: 2.5rem; }
}

@media print {
  .topo, .sidebar, .mascara, .rodape, .acoes, .exercicio { display: none !important; }
  .conteudo { margin: 0; padding: 0; }
  body { font-size: 11pt; }
}