/*
 * Sistema CP. Nenhum hexadecimal aqui — só tokens.
 *
 * HERDADO DO SeiWebFront. O prompt pediu a linguagem visual do guarda-chuva SeiWeb, e reproduzir à
 * mão um sistema de design já provado em produção daria um resultado pior e levaria mais tempo. O
 * vocabulário `.cp-*` e o raciocínio dos comentários são de lá.
 *
 * DÍVIDA REGISTRADA: ele carrega regras para telas que este produto NÃO TEM — boleto, financeiro,
 * cobrança, tesouraria. São peso, não risco: CSS que não casa com marcação nenhuma não faz nada.
 * Podar agora, sem as telas do domínio existirem, arriscaria remover o que ainda vai ser usado —
 * a poda é para quando a grade de aulas estiver escrita e der para ver o que sobrou sem uso.
 *
 * Este arquivo REVESTE as bibliotecas: o desenho é do sistema, e a biblioteca fornece o
 * comportamento. Nenhuma delas aparece com o visual de fábrica.
 */

/* ============================================================================================
   Base
   ============================================================================================ */

body {
  background: var(--cp-fundo);
  color: var(--cp-texto);
  font-family: var(--cp-fonte);
  /* 15px, e nao 14. O Poppins e uma geometrica de display: quanto menor o corpo, mais grossa a
     haste fica em PROPORCAO, porque abaixo de certo tamanho ela nao desce de 1 pixel. A 14px o
     texto inteiro lia como semibold sem que nenhuma regra pedisse peso. */
  font-size: 0.9375rem;
}

/* Foco visível em tudo que recebe teclado. Sem isto, quem navega por Tab fica sem saber onde
   está -- o padrão do navegador some assim que a gente redesenha o botão. */
:focus-visible {
  outline: 2px solid var(--cp-primaria);
  outline-offset: 2px;
  border-radius: 4px;
}

a { color: var(--cp-primaria); }

::selection {
  background: var(--cp-primaria-suave);
  color: var(--cp-texto);
}

/* ============================================================================================
   Layout: duas colunas por duas linhas, com a lateral atravessando as duas linhas.
   ============================================================================================ */

.cp-app {
  display: grid;
  grid-template-columns: var(--cp-sidebar-largura) 1fr;
  grid-template-rows: var(--cp-navbar-altura) 1fr;
  min-height: 100vh;
}

/* A colocação é EXPLÍCITA nos três filhos. A ordem no DOM é navbar, lateral, conteúdo -- que não é
   a ordem visual --, e o preenchimento automático jogaria a lateral para a direita. */
.cp-navbar { grid-column: 2; grid-row: 1; }
.cp-sidebar { grid-column: 1; grid-row: 1 / span 2; }

.cp-conteudo {
  grid-column: 2;
  grid-row: 2;
  padding: 1.5rem;
  /* min-width: 0 não é enfeite: sem ele uma tabela larga estica a coluna do grid, e o CORPO da
     página passa a rolar na horizontal em vez de a tabela rolar dentro do próprio container. */
  min-width: 0;
}

/* ============================================================================================
   Marca Gourmet PDV (partials/marca.php).

   A cloche e o "Gourmet" ficam de fora desta lista de propósito: usam currentColor e herdam a cor
   de quem envolve a marca, para acompanharem o tema sem uma regra por tema. O "PDV" e os dois
   traços têm token próprio, e o valor dele muda por fundo (ver tokens.css).
   ============================================================================================ */

.cp-marca { display: block; height: 100%; width: auto; }

.cp-marca__destaque { fill: var(--cp-marca-destaque); }
.cp-marca__tracos { stroke: var(--cp-marca-tracos); }

/* O símbolo sozinho: os traços sempre no verde claro, como no ícone do aplicativo (ver partials/marca.php). */
.cp-marca--simbolo .cp-marca__tracos { stroke: var(--cp-marca-destaque); }

/* ============================================================================================
   Barra lateral — sempre escura, nos dois temas (carrega data-bs-theme="dark" no elemento).
   ============================================================================================ */

.cp-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--cp-superficie);
  border-right: 1px solid var(--cp-borda);
  position: sticky;
  top: 0;
  height: 100vh;
}

/* A FAIXA do topo da lateral: a marca, e -- só no estreito -- o X que fecha a gaveta.

   MESMA altura da navbar, do mesmo token. É disto que depende a linha contínua que os dois fios
   inferiores formam atravessando a tela: alturas diferentes deixam um degrau de poucos pixels
   no ponto para onde o olho vai primeiro. Ela mora AQUI, e não no link, porque a faixa é a linha
   inteira -- com o X dentro, o link deixou de ocupá-la sozinho. */
.cp-sidebar__topo {
  height: var(--cp-navbar-altura);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--cp-borda);
  flex: 0 0 auto;
}

.cp-sidebar__marca {
  display: flex;
  align-items: center;
  /* CENTRALIZADA na faixa, pedido do usuario. No telefone o X de fechar divide a faixa, e a marca fica
     no centro do espaco que sobra - que e o que o olho le como centro da gaveta. */
  justify-content: center;
  padding: 0 1rem;
  color: var(--cp-texto);
  text-decoration: none;

  /* Cresce e ENCOLHE: com o X ao lado, um `flex: 0 0 auto` empurraria o botão para fora da coluna
     em vez de a marca se apertar -- o mesmo motivo do min-width nos blocos dela. */
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}


/* Altura FIXA, largura livre: a proporção do desenho decide o resto. Amarrar a largura seria pedir
   ao navegador que escolhesse a altura, e a linha contínua com a navbar dependeria de sorte. */
/* A palavra SEi dividindo a faixa com o nome por extenso.

   A ALTURA E DERIVADA DA FAIXA, e este cálculo é o do CpFront -- `.cp-sidebar-header .cp-marca`
   lá, mesma conta. Quem manda no tamanho do desenho é a faixa que o contém; a largura acompanha
   sozinha, pela proporção.

   Havia aqui um `2.0625rem` escrito à mão, com a justificativa de que o lápis passa acima e abaixo
   das letras e que uma caixa menor encolheria as letras. A justificativa não se sustenta: o
   desenho desta lateral vem de `marca-plataforma.php`, e o viewBox dele é `600 190 1000 445` -- o
   MESMO do CpFront. Mesmo desenho, mesma proporção, e cinco pixels a mais de caixa só aqui.

   O número escrito à mão também não acompanhava `--cp-navbar-altura`: mudar a altura da barra
   deixaria o desenho na medida antiga, e a linha contínua com a navbar dependeria de alguém
   lembrar de refazer a conta em dois lugares. */
/* 1.75rem DE RESPIRO, e nao 1.5rem: a marca Gourmet PDV e larga (8:1, contra 5:1 da anterior), e com
   1.5rem ela ocupava a faixa inteira de 17,5rem. O max-width deixa a gaveta do telefone, que divide a
   faixa com o X, encolher o desenho em vez de empurrar o botao para fora. */
.cp-sidebar__marca .cp-marca { height: calc(var(--cp-navbar-altura) - 1.75rem); max-width: 100%; }

.cp-sidebar__marca { gap: 0.625rem; }

/*
   A MARCA E UMA FILA DE TRES BLOCOS, separados por fios:

     SEi | Sistema Escolar Integrado | Grade de aulas

   O primeiro e a plataforma. O segundo diz o que a sigla quer dizer, a quem chega pela primeira
   vez. O terceiro diz qual modulo desta plataforma esta aberto - e e o unico que muda de janela
   para janela.

   O `min-width: 0` nao e enfeite: sem ele, um bloco de texto que nao caiba estica o <a> alem da
   coluna em vez de se apertar, e a marca passa por cima da borda da lateral.
*/
.cp-sidebar__marca-completa {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}


/* Fio de 1px separando marca e nome. currentColor com transparência, e não um token de borda: ele
   acompanha a cor do texto do cabeçalho, seja qual for o tema do elemento. */
.cp-sidebar__fio {
  width: 1px;
  align-self: stretch;

  /* 0.75rem, que é o do CpFront (`.cp-marca-fio`). Eram 0.5rem, e o fio saía mais comprido que o
     de lá sobre a mesma faixa -- a diferença que fazia os dois cabeçalhos não se sobreporem. */
  margin: 0.75rem 0;
  background: color-mix(in srgb, currentColor 22%, transparent);
  flex: none;
}

/* Empilhado e apertado: as três palavras são UMA unidade de leitura, não três linhas de texto.
   O line-height baixo é o que as mantém coladas o suficiente para o olho ler o bloco inteiro. */
.cp-sidebar__extenso {
  display: flex;
  flex-direction: column;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--cp-texto-suave);
  min-width: 0;
}

/*
   O NOME DO MODULO NAO TEM ESTILO PROPRIO -- ele le como qualquer bloco por extenso.

   ESTA CLASSE E GANCHO DE ESTRUTURA, E SO ISSO. Ela existe para a regra da gaveta, la embaixo,
   poder dizer "esconde os blocos por extenso MENOS o do modulo" quando o X rouba largura. Sem ela
   nao ha como nomear o bloco que fica.

   ELA TINHA `color: var(--cp-texto)` e `font-weight: 600`, e a justificativa escrita aqui era que
   o nome do modulo "e o que mais pesa dos tres". E uma tese defensavel, e nao e a do CpFront: la o
   complemento -- "Provas & Simulados", que ocupa este mesmo lugar -- nao ganha destaque nenhum,
   fica em `.cp-marca-extenso` puro, peso 500 e `--cp-texto-suave`. O comentario de la diz o porque
   com todas as letras: "quem nomeia o produto e a marca, e este texto explica".

   O CpFront E O PADRAO VISUAL, entao quem muda e este lado. Com o peso 600 e a cor cheia, o
   "Grade de aulas" daqui saia mais escuro e mais grosso que o "Provas & Simulados" de la, sobre um
   cabecalho que deveria ser o mesmo.
*/

.cp-sidebar__marca:hover { color: var(--cp-texto); }

/* O BLOCO INTEIRO CLAREIA JUNTO NO HOVER -- ele e um alvo so, e nao marca de um lado e texto do
   outro. Portado do CpFront (`.cp-sidebar-header .cp-marca-alvo:hover .cp-marca-extenso`).

   A regra acima, sozinha, nao dava conta: ela clareia o <a>, e o texto por extenso tem COR PROPRIA
   -- entao ele ignorava o hover e so o desenho reagia. Metade do alvo acendia. */
.cp-sidebar__marca:hover .cp-sidebar__extenso { color: var(--cp-texto); }

/* O FIO QUE SEPARA BLOCOS na lateral -- e ele e um so, em duas posicoes.

   Abaixo do nome do modulo, na area propria: sem ele, um item escrito "Tesouraria" vira a primeira
   linha de uma lista de cinco e some entre elas, justamente o que ele nao pode fazer, porque e a
   porta de volta.

   Acima do bloco administrativo, no sistema principal: ali ele separa o que e de qualquer um do que
   e de quem administra. Foi o que sobrou dos grupos recolhiveis, e chega -- tres botoes para
   esconder sete itens era mais trabalho do que os sete itens a mostra. */
/*
   A COR VAI DENTRO DO ATALHO, e isso nao e estilo de escrita.

   `border-top: 1px solid` sem cor redefine border-top-color para currentColor. Escrito depois de
   uma regra de `border-color`, ele a ANULA - e o fio, que devia ser um tom de 18%, saia na cor
   plena do texto. Sob o titulo do grupo isso le como um sublinhado, e foi assim que apareceu.

   O CSS nao avisa que uma declaracao virou letra morta. A unica defesa e nao separar a cor do
   atalho que a redefine.
*/
.cp-sidebar__modulo-topo {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/*
   O TITULO DE GRUPO E UM BOTAO, e continua parecendo um rotulo - mesmo desenho do CpFront.

   TRES CONSERTOS NUMA REGRA:

   1. `color` PROPRIO. A .cp-sidebar declara `background` e nao declara `color`, e o titulo nao
      tinha cor sua: herdava a do body, calculada FORA do <aside>, com o tema da PAGINA. No tema
      claro isso era texto escuro sobre a barra escura - os titulos desapareciam. Os itens
      escapavam porque .cp-sidebar__item declara a cor dele; so o titulo nao declarava.

   2. SEM BORDA. Um fio logo abaixo do texto le como sublinhado, por fraco que seja. No CpFront nao
      ha borda no titulo: a separacao vem do espacamento e do maiusculo, e e suficiente.

   3. ELE ABRE E FECHA. O menu tem vinte itens em quatro grupos, e a coluna rola. Uma sessao
      anterior tirou os grupos recolhiveis - "tres botoes para esconder sete itens" - e o menu
      cresceu desde entao.

   O fundo NAO muda no hover: fundo aqui o faria parecer um item de menu, que leva a algum lugar, e
   este so abre e fecha o que ja esta na coluna.
*/
.cp-sidebar__grupo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem 0.25rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-texto-suave);
  text-align: left;
  cursor: pointer;
}

.cp-sidebar__grupo:hover { color: var(--cp-texto); }

.cp-sidebar__grupo:focus-visible {
  outline: 2px solid var(--cp-primaria);
  outline-offset: 1px;
  border-radius: var(--cp-raio);
}

/*
   A SETA APONTA PARA ONDE O GRUPO VAI: para baixo quando aberto - o conteudo desce dali -, e para
   o lado quando fechado. O estado vem do `aria-expanded`, que o Bootstrap mantem em dia: sem uma
   classe propria para sincronizar, nao ha como os dois discordarem.
*/
.cp-sidebar__seta {
  font-size: 0.625rem;
  opacity: 0.7;
  transition: transform var(--cp-transicao);
}

.cp-sidebar__grupo[aria-expanded="false"] .cp-sidebar__seta { transform: rotate(-90deg); }

.cp-sidebar__modulo-topo .cp-sidebar__item span {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ============================================================================================
   Quem sou e onde estou -- fixo na lateral, logo abaixo da marca.
   ============================================================================================ */

/* Bloco de LEITURA: organização e email, sem ação nenhuma. Por isso não tem hover nem cursor de
   clique -- parecer clicável é prometer um menu que não existe. */
.cp-sidebar__usuario {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.875rem 0.875rem 0;

  /* A folga INTERNA é maior que a dos itens de menu de propósito. Este é o único cartão da
     lateral -- tem borda e fundo próprios --, e com pouca folga a borda encosta no texto e ele
     passa a se ler como campo de formulário. Espaço em volta é o que faz uma caixa parecer
     conteúdo, e não controle. */
  padding: 1.3rem;
  background: var(--cp-fundo);
  border: 1px solid var(--cp-borda);
  border-radius: 0.75rem;

  /* Não participa do encolhimento da coluna: sem isto ele cede largura para a navegação abaixo, e
     o texto perde espaço antes de precisar. */
  flex: none;
  min-width: 0;
}

.cp-sidebar__avatar {
  width: 2.5rem;
  height: 2.5rem;

  /* Quadrado arredondado, e NÃO círculo: distingue o bloco de identidade, que é leitura, do
     avatar redondo da navbar, que é menu. */
  border-radius: 0.625rem;
  object-fit: cover;
  background: var(--cp-superficie);

  /* Sem isto o avatar encolhe quando o email é longo: o flex tira de quem pode ceder, e uma foto
     de 8px de largura parece defeito. */
  flex: none;
}

/* min-width: 0 nao e enfeite: sem ele o filho com text-overflow nunca encolhe, porque a largura
   minima automatica de um item flex e o conteudo dele -- e o texto vaza em vez de cortar. */
/* min-width: 0 é o que permite o filho truncar: sem ele o item flex adota a largura do conteúdo,
   e o email empurra o bloco para fora da lateral. */
.cp-sidebar__usuario-texto {
  min-width: 0;
  flex: 1;
  line-height: 1.3;
}

.cp-sidebar__org {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--cp-texto);
}

.cp-sidebar__usuario-email {
  font-size: 0.75rem;
  color: var(--cp-texto-suave);
}

/* display: block NAO e redundante. O text-truncate do Bootstrap so define overflow, text-overflow
   e white-space, e nenhum dos tres tem efeito sobre caixa INLINE -- num <span> o texto vaza em vez
   de cortar. */
.cp-truncado {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O ponto e decorativo: quem ve a tela ja sabe que a sessao esta viva -- esta lendo dentro dela.
   Por isso aria-hidden, e a informacao NAO depende so da cor: o title diz em texto. */
.cp-sidebar__status {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cp-sucesso);
  flex: none;
}

/* ============================================================================================
   Menu do usuario na navbar.
   ============================================================================================ */

/* Sem moldura em repouso: ele so ganha caixa no hover. Uma borda permanente ao lado do seletor de
   organizacao -- que tem borda -- e dos botoes de icone empilha tres retangulos na mesma faixa. */
.cp-usuario {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 16rem;
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--cp-raio);
  color: var(--cp-texto);
  text-align: left;
}

.cp-usuario:hover {
  background: var(--cp-fundo);
  border-color: var(--cp-borda);
}

.cp-usuario-email {
  min-width: 0;
  font-size: 0.8125rem;
}

/*
 * QUADRADA, e nao redonda: e a MESMA foto que o menu logo abaixo mostra em 56px. Um circulo no
 * botao e um quadrado arredondado no menu, com a mesma imagem, se le como descuido. O raio e menor
 * porque a peca e menor -- o raio do sistema, em 28px, vira quase um circulo.
 *
 * Dimensao FIXA com object-fit: cover porque a origem e imagem enviada por gente. Sem isso, uma
 * foto muito larga estica a navbar inteira, e o layout passa a depender do que alguem mandou.
 */
.cp-avatar-navbar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  object-fit: cover;
  background: var(--cp-fundo);
  border: 1px solid var(--cp-borda);
  flex-shrink: 0;
}

/*
 * O MENU tem largura propria, e nao a do conteudo.
 *
 * O padrao do Bootstrap e encolher ate caber o maior item -- e isso deixa o cabecalho apertado: a
 * foto de 56px mais o email disputariam uma faixa medida por outro texto. Com o piso, o cabecalho
 * manda na largura e os itens sobram folgados.
 *
 * O TETO EXISTE PELO MOTIVO OPOSTO: um endereco longo -- e endereco de escola costuma ser --
 * esticaria o menu para fora da tela em vez de quebrar em duas linhas.
 */
.cp-menu-usuario {
  min-width: 20rem;
  max-width: 24rem;
}

.cp-usuario-resumo { max-width: 100%; }

/* RETRATO NA LINHA da tabela. Redondo, e não quadrado como o da navbar: aqui ele identifica uma
   PESSOA, e o círculo é a convenção que se lê como rosto. flex-shrink porque numa célula estreita
   o nome comprimiria a imagem em vez de quebrar. */
.cp-avatar-linha {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cp-fundo);
  border: 1px solid var(--cp-borda);
  flex-shrink: 0;
}

.cp-avatar-perfil {
  width: 56px;
  height: 56px;
  border-radius: var(--cp-raio);
  object-fit: cover;
  background: var(--cp-fundo);
  border: 1px solid var(--cp-borda);
  flex-shrink: 0;
}

/* Item de flex nao encolhe abaixo do proprio conteudo, e email sem espacos e conteudo indivisivel:
   sem min-width: 0 ele empurra a foto para fora do menu em vez de quebrar. */
.cp-usuario-identidade { min-width: 0; }

/* O papel em selo NEUTRO, de proposito: ele e o estado normal de todo mundo, e colori-lo
   competiria com o escudo de acesso total -- o unico sinal ali que pede atencao. */
.cp-selo-papel {
  background: var(--cp-fundo);
  color: var(--cp-texto-suave);
  border: 1px solid var(--cp-borda);
  font-weight: 500;
  font-size: 0.6875rem;
  vertical-align: middle;
}

/* Admin em tom NEUTRO. O papel já está escrito no selo ao lado -- o ícone só o torna reconhecível
   de relance. Colorido, ele disputaria com o escudo de acesso total, que é o único sinal ali que
   pede atenção; dois ícones no mesmo peso não distinguem nada. */
.cp-icone-admin {
  color: var(--cp-texto-suave);
  font-size: 0.875rem;
  vertical-align: middle;
}

.cp-icone-master {
  color: var(--cp-primaria);
  font-size: 0.875rem;
  vertical-align: middle;
}

/*
 * O MENU FECHADO VOLTA A FICAR FECHADO.
 *
 * .dropdown-menu se esconde com display: none e aparece com .show { display: block }. A
 * .list-group traz display: flex -- MESMA especificidade, e vem DEPOIS na folha do Bootstrap,
 * então ganha o desempate. Com as duas classes no mesmo elemento o menu computa flex o tempo
 * todo: ele abre e NÃO FECHA MAIS, e não há erro nenhum no console dizendo isso.
 *
 * O :not(.show) reescreve só o estado FECHADO. Aberto, quem decide continua sendo
 * .dropdown-menu.show -- que já ganhava de .list-group por ter duas classes --, e a aparência
 * segue exatamente a mesma.
 */
.cp-menu-usuario.list-group:not(.show) {
  display: none;
}

.cp-sidebar__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.75rem 0.625rem;

  /* BARRA FINA, na cor do cartão do usuário.

     A lateral é a única coluna que rola por conta própria, e a barra padrão do sistema tem quase o
     dobro da largura de um item de menu -- ela come a folga da direita e o texto passa a encostar
     nela. Seis pixels bastam para agarrar.

     A cor é --cp-fundo, a MESMA do cartão de usuário logo acima: o polegar fica mais escuro que a
     superfície da lateral, e não mais claro. É discreto de propósito; para torná-lo mais evidente,
     basta trocar por --cp-borda-forte aqui e no scrollbar-color. Ao passar o mouse ele já clareia,
     que é quando a pessoa precisa vê-lo. */
  scrollbar-width: thin;
  scrollbar-color: var(--cp-fundo) transparent;
}

/* WebKit não lê scrollbar-width; as duas declarações precisam existir para a barra ficar fina nos
   dois motores. */
.cp-sidebar__nav::-webkit-scrollbar { width: 6px; }

/* Os BOTOES de seta nas pontas somem: eles ocupam quase a altura de um item de menu cada um,
   num controle que existe para ser fino, e ninguem clica neles tendo roda e teclado. */
.cp-sidebar__nav::-webkit-scrollbar-button { display: none; }

.cp-sidebar__nav::-webkit-scrollbar-track { background: transparent; }

.cp-sidebar__nav::-webkit-scrollbar-thumb {
  background: var(--cp-fundo);
  border-radius: 999px;
}

.cp-sidebar__nav:hover::-webkit-scrollbar-thumb { background: var(--cp-borda-forte); }

.cp-sidebar__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--cp-raio);
  /* TEXTO PLENO, não cinza de apoio: uma coluna inteira em cinza põe o menu todo em segundo
     plano -- e o menu é o que a pessoa usa o dia inteiro. */
  color: var(--cp-texto);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background var(--cp-transicao);
}

/* Hover muda SÓ o fundo. Repetir a cor do texto seria uma declaração que não faz nada. */
/* FORA DO ITEM ACESO (e do que carrega): `:hover` pesa mais que a classe de ativo, e o atalho `background`
   apagava o degradê -- passar o ponteiro sobre o item da tela atual tirava dele o "você está aqui". */
.cp-sidebar__item:not(.cp-sidebar__item--ativo, .cp-sidebar__item--carregando):hover {
  background: color-mix(in srgb, var(--cp-texto) 8%, transparent);
}

.cp-sidebar__item i {
  /* Largura fixa para os rótulos alinharem: ícones de larguras diferentes serrilham a coluna. */
  width: 1.125rem;
  text-align: center;
  font-size: 1rem;
  color: var(--cp-texto-suave);
}

/* Degradê que nasce à esquerda e se esvai para a direita. Chapado, o realce compete com o próprio
   texto; assim a intensidade fica junto do ícone, por onde a leitura da coluna começa. */
.cp-sidebar__item--ativo {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cp-primaria) 55%, transparent),
    transparent
  );
  font-weight: 500;
}

.cp-sidebar__item--ativo i { color: var(--cp-primaria); }

/* Versão fraca do realce, para o item clicado enquanto a próxima tela não pinta: a faixa do topo
   diz que algo vem vindo, o item diz o quê. */
.cp-sidebar__item--carregando {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cp-primaria) 22%, transparent),
    transparent
  );
}

.cp-sidebar__rodape {
  flex: 0 0 auto;
  border-top: 1px solid var(--cp-borda);
  padding: 0.625rem;
}

/* Única ação da coluna que não leva a outra tela -- por isso mora separada, no pé. */
.cp-sidebar__sair {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  border: 0;
  border-radius: var(--cp-raio);
  background: transparent;
  color: var(--cp-perigo);
  font-size: 0.875rem;
  text-align: left;
  transition: background var(--cp-transicao), color var(--cp-transicao);
}

.cp-sidebar__sair i { width: 1.125rem; text-align: center; }

.cp-sidebar__sair:hover {
  background: var(--cp-perigo);
  color: var(--cp-sobre-perigo);
}

/* ============================================================================================
   Navbar
   ============================================================================================ */

.cp-navbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--cp-navbar-altura);
  padding: 0 1rem;

  /*
   * O MESMO `min-width: 0` DO CONTEUDO, e pelo mesmo motivo.
   *
   * A faixa e um item de grid, e item de grid nao encolhe abaixo do proprio conteudo por padrao.
   * Num telefone de 400px ela media 586: o seletor de escola, os icones e o menu da pessoa nao
   * cabiam, a coluna do grid esticava para acomodar, e a PAGINA INTEIRA passava a rolar na
   * horizontal - inclusive o conteudo, que ja tinha esta linha e mesmo assim ia junto.
   *
   * Com ela, quem cede e o unico que pode ceder sem perder informacao: o nome da escola, que ja
   * trunca com reticencias e tem o valor inteiro no `title`.
   */
  min-width: 0;
  background: var(--cp-superficie);
  border-bottom: 1px solid var(--cp-borda);
  position: sticky;
  top: 0;
  /* 1030 e nao 20: nao e disputa com a lateral -- e que os menus que descem daqui precisam passar
     POR CIMA do conteudo. Com z-index baixo o dropdown herda a camada da faixa, e um elemento
     qualquer da pagina pode cobri-lo. */
  z-index: 1030;
}

/*
 * BOTOES DE ICONE DA NAVBAR -- sem moldura, sem fundo, sem hover de caixa.
 *
 * Com borda eles viram retangulos numa faixa que ja tem borda embaixo, seletor de organizacao com
 * borda e avatar ao lado: o peso todo vem da CAIXA, e nao do simbolo, que e o que a pessoa
 * procura. Sem ela o alvo de clique continua do mesmo tamanho -- o padding permanece --, e quem
 * responde ao hover e o icone.
 *
 * NAO e o mesmo que .cp-acao: aquele estiliza os botoes de linha das tabelas, onde a moldura
 * separa uma acao da outra dentro da celula.
 */
.cp-btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: transparent;
  color: var(--cp-texto-suave);
  font-size: 0.875rem;
  line-height: 1;
  transition: color var(--cp-transicao);
}

.cp-btn-icone:hover { color: var(--cp-texto); }

/* So a visibilidade: a aparencia vem de .cp-btn-icone. */
.cp-navbar__gaveta { display: none; }

/* ----------------------------------------------------------------------------------------------
   O PAINEL -- as caixas de numero, o grafico e as pendencias.

   AS CAIXAS SAO UMA GRADE QUE SE ACOMODA, e nao quatro colunas fixas. Em `auto-fit` com um minimo,
   elas viram quatro numa tela larga, duas num tablet e uma no celular, sem uma media query por
   tamanho - e nenhuma delas fica com o numero cortado.
   ---------------------------------------------------------------------------------------------- */
.cp-painel-caixas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.cp-caixa {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  background: var(--cp-superficie);
}

/* SO O AZULEJO TEM COR. O numero fica na cor do texto: quatro numeros grandes e coloridos lado a
   lado disputam atencao entre si, e nenhum vence - o azulejo diz de que assunto e a caixa, e a
   hierarquia dentro dela continua sendo rotulo, numero, apoio. */
.cp-caixa__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  font-size: 0.9rem;
}

.cp-caixa__icone--primaria { background: var(--cp-primaria-suave); color: var(--cp-primaria); }
.cp-caixa__icone--sucesso { background: var(--cp-sucesso-suave); color: var(--cp-sucesso); }
.cp-caixa__icone--atencao { background: var(--cp-atencao-suave); color: var(--cp-atencao); }
.cp-caixa__icone--perigo { background: var(--cp-perigo-suave); color: var(--cp-perigo); }

.cp-caixa__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cp-caixa__rotulo {
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--cp-texto-apoio);
}

/* `tabular-nums` porque as caixas ficam lado a lado: com digitos de largura variavel, "78%" e
   "312" nao alinham entre uma caixa e a vizinha, e o olho le como desalinho de desenho. */
.cp-caixa__numero {
  font-size: 1.6rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--cp-texto);
  font-variant-numeric: tabular-nums;
}

.cp-caixa__apoio {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--cp-texto-apoio);
}

/* O GRAFICO precisa de um pai POSICIONADO e com altura: o Chart.js com
   `maintainAspectRatio: false` mede o pai, e um pai sem altura faz o desenho colapsar para zero -
   ele existe, desenha e nao aparece. A altura vem do script, que sabe quantas turmas ha. */
.cp-grafico {
  position: relative;
  width: 100%;
}

/* ------------------------------------------------------------------------ as pendencias */
.cp-pendencia {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
}

.cp-pendencia + .cp-pendencia { border-top: 1px solid var(--cp-borda); }

/* O PONTO DIZ A URGENCIA, e a frase diz o que e. Cor sozinha nao e informacao - aqui ela apenas
   ordena o olhar entre linhas que ele ja vai ler. */
.cp-pendencia__ponto {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--cp-texto-apoio);
}

.cp-pendencia__ponto--perigo { background: var(--cp-perigo); }
.cp-pendencia__ponto--atencao { background: var(--cp-atencao); }
.cp-pendencia__ponto--sucesso { background: var(--cp-sucesso); }

.cp-pendencia__texto { flex: 1 1 auto; min-width: 0; }

.cp-pendencia__titulo {
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--cp-texto);
}

.cp-pendencia__apoio {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--cp-texto-apoio);
}

/* ----------------------------------------------------------------------------------------------
   O MOTOR -- a bandeja das atividades.

   O BOTAO NAO TEM COR PROPRIA. Ele mora numa fileira de icones cinza e fica permanentemente na
   barra: pintar so ele de azul gastaria destaque o tempo todo para dizer uma coisa que e
   intermitente. Quem diz "tem algo agora" e o giro e o numero, que aparecem e somem.
   ---------------------------------------------------------------------------------------------- */
/*
 * O GIRO DE PROGRESSO -- portado do CpFront, regra e razao.
 *
 * A CLASSE VAI NO PROPRIO ICONE, posta pelo script. Nao e preferencia de estilo: enquanto o giro
 * dependia de um seletor de parente (`.cp-motor--ativo .cp-motor__engrenagem`), ele tinha
 * especificidade maior que a guarda de movimento reduzido e a vencia calado. Com as duas regras
 * falando do mesmo seletor, a cascata deixa de ter o que decidir errado.
 *
 * E COM MOVIMENTO REDUZIDO ELE NAO PARA: fica mais lento. A excecao e deliberada e estreita, e a
 * decisao e do CP, que ja atravessou este mesmo defeito -- movimento decorativo pode e deve ser
 * desligado a pedido, mas este aqui e a UNICA coisa dizendo que o sistema continua trabalhando, e
 * sem ele "processando" fica indistinguivel de "travado". Os tempos sao os de la, para os dois
 * produtos girarem igual.
 */
@keyframes cp-girar {
  to { transform: rotate(360deg); }
}

.cp-girando {
  animation: cp-girar 1.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cp-girando {
    animation: cp-girar 2.4s linear infinite !important;
  }
}

/* O NUMERO E VERMELHO, e nao da cor da marca.

   Da cor da marca ele se perdia contra um botao que tambem era: duas coisas azuis encostadas nao
   se leem como "aviso", se leem como um icone so. Vermelho e o unico tom que a pessoa nao precisa
   aprender - e ele so existe enquanto ha algo correndo, entao nao vira alarme de fundo. */
.cp-motor__conta {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  min-width: 1rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--cp-perigo);
  color: var(--cp-sobre-perigo);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------ a bandeja */
.cp-motor-menu {
  min-width: 21rem;
  max-width: 24rem;
  padding: 0.75rem 0 0.25rem;
}

.cp-motor-titulo {
  margin: 0 0 0.5rem;
  padding: 0 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-texto-apoio);
}

/* A LISTA ROLA, e a bandeja nao cresce sem fim: quatro linhas visiveis e o que cabe sem a barra
   virar uma pagina pendurada. */
#cp-motor-lista {
  max-height: 17rem;
  overflow-y: auto;
}

.cp-motor-item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.4rem 1rem;
}

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

/* UM ICONE POR ESTADO, como no CP -- e nao um ponto colorido. O de "correndo" e o mesmo giro do
   botao: a linha diz que esta viva pelo sinal que a pessoa acabou de aprender la em cima. */
.cp-motor-item__icone {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
}

.cp-motor-item__texto { min-width: 0; }

.cp-motor-item__nome {
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--cp-texto);
  overflow-wrap: anywhere;
}

.cp-motor-item__apoio {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--cp-texto-apoio);
}

.cp-motor-vazio {
  margin: 0;
  padding: 0.25rem 1rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--cp-texto-apoio);
}

.cp-motor-todas {
  display: block;
  padding: 0.35rem 1rem 0.4rem;
  font-size: 0.8125rem;
  color: var(--cp-primaria);
  text-decoration: none;
}

.cp-motor-todas:hover {
  color: var(--cp-primaria);
  text-decoration: underline;
}

/*
 * QUEM PEDIU MENOS MOVIMENTO NAO PERDE A INFORMACAO, e este e o caso oposto ao do cronometro do
 * aviso: la a barra que corre E o dado - ela mostra quanto tempo resta, e parada mentiria. Aqui o
 * giro so repete o que o numero ja diz, entao ele pode parar sem tirar nada de ninguem.
 */
/* O ESPELHO DO DE CIMA: um so existe no estreito, o outro so no largo -- e os dois vivem AQUI, e
   nao junto do desenho de cada um, porque `.cp-btn-icone` ja traz `display: inline-flex`. Uma
   classe cada, especificidade igual: quem esconde tem de vir DEPOIS de quem mostra. Escrita la em
   cima, junto da lateral, esta regra nao chegava ao botao -- e o X aparecia na tela grande. */
.cp-sidebar__fechar { display: none; }

/* ============================================================================================
   Lateral recolhida.

   TUDO PENDURADO NUM TOKEN SO. A largura da lateral e a mesma variavel que define a coluna do grid
   e a largura da gaveta no estreito, entao redefini-la no `:root` recolhido move o conteudo, a
   lateral e a gaveta de uma vez - sem uma regra de largura por lugar, que e como duas delas
   acabariam divergindo depois.
   ============================================================================================ */

/* Duas variantes da marca no HTML, e o CSS escolhe. A completa e a padrao. */
.cp-sidebar__marca-simbolo { display: none; }
.cp-sidebar__marca-simbolo .cp-marca { height: 1.75rem; }

/*
 * RECOLHER SO EXISTE ACIMA DE 992px, e a media query envolve o bloco INTEIRO por um motivo que
 * custou um teste: abaixo disso a lateral e GAVETA, e a gaveta abre com a largura cheia.
 *
 * Na primeira versao so a LARGURA voltava ao normal no estreito, e o resto das regras continuava
 * valendo. O resultado: a gaveta abria com 280px e, dentro dela, todos os rotulos e todos os
 * titulos de grupo seguiam escondidos - uma coluna de icones ocupando a tela inteira. A largura
 * estava certa e a gaveta estava inutil.
 */
@media (min-width: 992px) {
  :root[data-lateral="recolhida"] { --cp-sidebar-largura: 4.5rem; }

  :root[data-lateral="recolhida"] .cp-sidebar__marca-completa { display: none; }
  :root[data-lateral="recolhida"] .cp-sidebar__marca-simbolo { display: block; }

  :root[data-lateral="recolhida"] .cp-sidebar__marca,
  :root[data-lateral="recolhida"] .cp-sidebar__item,
  :root[data-lateral="recolhida"] .cp-sidebar__sair {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /*
   * O ROTULO SOME DA VISTA, MAS NAO DA ARVORE.
   *
   * Com `display: none` o <span> deixa de existir para o leitor de tela, e o icone ao lado e
   * `aria-hidden` - o item ficaria SEM NOME NENHUM, um link que se anuncia como "link" e mais nada.
   * Escondendo visualmente, o nome continua sendo lido, e o `title` que o layout.js pendura cobre o
   * ponteiro. Recolher e economia de espaco, e nao de acessibilidade.
   */

  :root[data-lateral="recolhida"] .cp-sidebar__item span,
  :root[data-lateral="recolhida"] .cp-sidebar__sair span,
  :root[data-lateral="recolhida"] .cp-sidebar__usuario-texto,
  :root[data-lateral="recolhida"] .cp-sidebar__grupo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /*
     COM A BARRA RECOLHIDA, TODO GRUPO FICA ABERTO. O botao esta escondido, e sem isto um grupo que
     a pessoa tinha fechado sumiria inteiro ao recolher a barra - itens perdidos sem nenhum jeito de
     traze-los de volta, porque o controle que os traria e o botao que acabou de sair da vista.
  */
  :root[data-lateral="recolhida"] .cp-sidebar__nav .collapse {
    display: block !important;
    height: auto !important;
  }

  /*
     O TITULO ESCONDIDO DEIXA OS GRUPOS SEM SEPARACAO, e o fio a assume: sem ele os vinte itens
     viram uma coluna unica de icones, e a divisao por assunto - a razao de existir dos grupos - se
     perde exatamente onde o rotulo nao cabe para dize-la.

     O `.collapse + .cp-sidebar__grupo +` no comeco nao e enfeite: ele exige um grupo ANTES deste, e
     e o que deixa o primeiro sem fio. Fio no topo do primeiro grupo separaria o menu do que vem
     acima dele, que nao e grupo nenhum.

     A cor vem de TOKEN e nao de currentColor. O aside e sempre escuro, mas .cp-sidebar nao declara
     `color`: currentColor ali dentro e a cor do body, calculada com o tema da PAGINA - o mesmo
     descuido que sumia com os titulos, e que num fio de 18% daria uma linha invisivel no claro.
  */
  :root[data-lateral="recolhida"] .cp-sidebar__nav > .collapse + .cp-sidebar__grupo + .collapse {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cp-borda-forte);
  }

  :root[data-lateral="recolhida"] .cp-sidebar__usuario {
    justify-content: center;
    padding: 0.6rem;
    margin: 0.875rem 0.6rem 0;

    /* Ancora o ponto de sessao ativa. Sem isto ele se posiciona pela lateral inteira - que e
       `sticky`, e portanto posicionada - e vai parar no canto superior dela. */
    position: relative;
  }

  /* O ponto verde de sessao ativa nao cabe ao LADO do avatar em 4.5rem: ele sobe para o canto dele,
     que e onde este ponto vive na maioria dos produtos. */
  :root[data-lateral="recolhida"] .cp-sidebar__status {
    position: absolute;
    right: 0.45rem;
    bottom: 0.45rem;
  }

  :root[data-lateral="recolhida"] .cp-navbar__recolher i { transform: rotate(180deg); }

  /* Abaixo de 992px a lateral ja e gaveta: recolher nao tem o que fazer ali, e o token volta ao
     valor cheio para a gaveta nao abrir com largura de tira. */
}

/* ============================================================================================
   O sino e a ajuda, na barra superior.

   A BUSCA NAO MORA MAIS AQUI. Ela ja foi um campo nesta faixa que digitava no campo da listagem,
   com o da listagem escondido no largo para as duas nao aparecerem juntas. Funcionava, mas o
   padrao da plataforma e o contrario: a grade tem a busca dela, e a barra nao tem busca nenhuma.
   O Ctrl + / continua valendo - ele leva o foco ao campo da grade. Ver layout.js.
   ============================================================================================ */

/*
 * NO TELEFONE A FAIXA VIRA DUAS LINHAS.
 *
 * Em 400px, dois seletores de contexto mais quatro botoes nao cabem numa linha - e as saidas que
 * cabiam eram piores: espremer as pilulas deixa "Colegi" cortado no meio da palavra, e esconder o
 * nome da escola contraria o proprio motivo de ele estar ali. Operar a unidade errada sem perceber
 * e o erro caro deste produto.
 *
 * Duas linhas custam 40px de altura uma vez, e devolvem o contexto inteiro legivel. O espacador
 * vira a quebra: com base de 100% ele empurra os botoes para a linha de baixo, sem uma unica
 * regra de posicao.
 *
 * Os botoes ficam a ESQUERDA nessa segunda linha, e nao a direita como no largo. Empurra-los para
 * a direita exigiria alinhar a faixa inteira ao fim, o que tiraria o botao do menu do canto onde
 * o polegar o alcanca - e nenhum dos dois arranjos e mais legivel que o outro.
 */
@media (max-width: 767.98px) {
  .cp-app { grid-template-rows: auto 1fr; }

  .cp-navbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--cp-navbar-altura);
    padding: 0.4rem 1rem;
    row-gap: 0.4rem;
  }

  .cp-navbar > .flex-grow-1 { flex-basis: 100%; }

  /* Com a linha inteira para os dois, o teto em `vw` deixa de ser o que aperta. */
  .cp-org-botao { max-width: min(18rem, 100%); }

  /*
   * EMPRESA E LOJA DIVIDEM A PRIMEIRA LINHA, cada uma com no maximo metade dela (menos o botao do
   * menu) - so quando as duas existem: com uma loja so nao ha seletor, e a empresa fica com a linha. Numa faixa com flex-wrap, o item QUEBRA na largura do conteudo antes de encolher - sem o
   * teto, "Loja Shopping" descia para uma linha propria e a barra ocupava tres linhas no telefone.
   * Com ele, o nome trunca e o `title` do botao continua dizendo o nome inteiro.
   */
  .cp-navbar:has(#cp-loja) .cp-org { flex: 0 1 auto; max-width: calc((100% - 3.5rem) / 2); }
}

.cp-ajuda-menu {
  min-width: 10rem;
  padding: 0.75rem 1rem;
}

.cp-ajuda-titulo {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-texto-apoio);
}

.cp-ajuda-linha {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.875rem;
}

.cp-ajuda-linha span { margin-left: 0.4rem; }

.cp-ajuda-linha kbd {
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--cp-borda);
  border-radius: 0.3rem;
  background: var(--cp-fundo);
  color: var(--cp-texto);
  font-size: 0.75rem;
}

/* O seletor de organizacao. A largura vem do CONTEUDO -- com teto, para um nome longo nao empurrar
   o tema e o menu do usuario para fora da faixa. */
.cp-org-botao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;

  /*
   * O TETO ACOMPANHA A JANELA, E NUNCA PASSA DO PROPRIO PAI.
   *
   * O `100%` e o que faltava e o que enganou a medicao: o `.cp-org` em volta encolhia certinho
   * como item de flex, mas o BOTAO dentro dele nao e item de flex nenhum - ele so obedecia ao
   * teto em `vw`. Encolhido o pai a 51px, o botao continuava com 168 e VAZAVA por cima do que
   * vinha depois: o sino aparecia desenhado dentro da pilula da unidade.
   *
   * A medicao dos filhos da faixa dizia que tudo cabia, porque nenhum RETANGULO DE LAYOUT se
   * cruzava - o que vazava era a pintura do filho para fora do pai. Foi o tiro de tela que
   * mostrou, e nao o numero.
   */
  max-width: min(18rem, 42vw, 100%);
  overflow: hidden;

  /* Encolhe antes dos icones: entre perder tres letras do nome da escola e empurrar o menu da
     pessoa para fora da tela, a escolha nao e dificil. */
  min-width: 0;
  padding: 0.375rem 0.625rem;
  background: var(--cp-fundo);
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  color: var(--cp-texto);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
}

.cp-org-botao:hover { border-color: var(--cp-borda-forte); }

/* Os icones NAO cedem: um botao de 28px espremido a 12 nao e um botao menor, e um alvo que
   se erra. Quem cede e o texto, que trunca sem deixar de ser alcancavel pelo `title`. */
.cp-navbar .cp-btn-icone,
.cp-navbar .cp-usuario { flex: 0 0 auto; }

.cp-org { min-width: 0; }

.cp-org-nome { flex: 1; min-width: 0; }

/* Preso a largura do botao, o menu ficaria estreito demais para os nomes que lista. */
.cp-org .dropdown-menu { min-width: 16rem; }

/* ============================================================================================
   Superfície — a base de tudo. Cartões, painéis e caixas de formulário são todos isto.
   Sem sombra: a hierarquia vem de peso e espaço, não de profundidade falsa.
   ============================================================================================ */

.cp-superficie,
.card {
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
}

.cp-titulo { font-size: 1.15rem; font-weight: 500; margin: 0; }

/* 13px, e não 12: abaixo de ~13px a haste do Poppins não desce de 1 pixel, então o texto
   pequeno ENGORDA proporcionalmente e passa a ler como negrito -- a 12px o traço ficava tão
   grosso quanto o do título, que é 18px/600. Diminuir para hierarquizar tinha o efeito
   contrário: chamava mais atenção, não menos. */
.cp-apoio { font-size: 0.8125rem; color: var(--cp-texto-suave); }

.cp-rotulo {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-texto-suave);
}

/* ============================================================================================
   Tabelas — o corpo do sistema.
   ============================================================================================ */

/* A tabela rola DENTRO do próprio container; o corpo da página nunca rola na horizontal. */
.cp-tabela-container { overflow-x: auto; }

.cp-tabela {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

/* Cabeçalho como RÓTULO, não como título: é etiqueta de coluna. */
.cp-tabela thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-texto-suave);
  background: var(--cp-fundo);
  border-bottom: 1px solid var(--cp-borda);
  padding: 0.625rem 0.875rem;
  text-align: left;
  white-space: nowrap;
}

/* Fio ENTRE linhas, sem moldura externa e sem zebra: a zebra cria um padrão que compete com o
   dado, e a moldura repete a borda da superfície que já está em volta. */
.cp-tabela tbody td {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--cp-borda);
  vertical-align: middle;
}

.cp-tabela tbody tr:last-child td { border-bottom: 0; }

.cp-tabela tbody tr:hover td { background: color-mix(in srgb, var(--cp-texto) 3%, transparent); }

/* Números à direita, com tabular-nums: sem isto os dígitos dançam de linha para linha, e a
   comparação vertical -- o motivo de a coluna existir -- para de funcionar. */
.cp-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Ações da linha: só ícone. Sem rótulo visível, title e aria-label são a ÚNICA forma de saber o
   que o botão faz. */
.cp-acao {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cp-borda);
  border-radius: 8px;
  background: transparent;
  color: var(--cp-texto-suave);
  transition: color var(--cp-transicao), border-color var(--cp-transicao);
}

.cp-acao:hover { color: var(--cp-texto); border-color: var(--cp-borda-forte); }
.cp-acao--perigo:hover { color: var(--cp-perigo); border-color: var(--cp-perigo); }

/* ============================================================================================
   Selos de estado — nunca só cor: o texto diz o estado por escrito.
   ============================================================================================ */

.cp-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.cp-selo--sucesso {
  background: color-mix(in srgb, var(--cp-sucesso) 14%, transparent);
  color: var(--cp-sucesso);
}

.cp-selo--atencao {
  background: var(--cp-atencao-suave);
  color: var(--cp-atencao);
}

.cp-selo--perigo {
  background: color-mix(in srgb, var(--cp-perigo) 14%, transparent);
  color: var(--cp-perigo);
}

.cp-selo--neutro {
  background: color-mix(in srgb, var(--cp-texto) 8%, transparent);
  color: var(--cp-texto-suave);
}

.cp-selo--marca {
  background: var(--cp-primaria-suave);
  color: var(--cp-primaria);
}

/* ============================================================================================
   Carregamento
   ============================================================================================ */

/* ESQUELETO, não spinner. O spinner diz "espere"; o esqueleto diz "espere, e o que vem é uma
   tabela de quatro colunas". */
.cp-esqueleto {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cp-texto) 6%, transparent) 25%,
    color-mix(in srgb, var(--cp-texto) 12%, transparent) 37%,
    color-mix(in srgb, var(--cp-texto) 6%, transparent) 63%
  );
  background-size: 400% 100%;
  animation: cp-brilho 1.2s ease-in-out infinite;
  border-radius: 6px;
  min-height: 0.875rem;
}

@keyframes cp-brilho {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Faixa da NAVEGAÇÃO: o intervalo entre o clique e a próxima tela pintar. Ela só aparece depois de
   150 ms -- abaixo disto a página já chegou, e mostrar algo seria o "pisca a cada clique". */
.cp-faixa {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2000;
  overflow: hidden;
  display: none;
}

.cp-faixa--visivel { display: block; }

.cp-faixa::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: var(--cp-primaria);
  animation: cp-atravessa 1.05s ease-in-out infinite;
}

@keyframes cp-atravessa {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Estado VAZIO, com a ação principal. Ele e o de erro são os esquecidos. */
.cp-vazio {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--cp-texto-suave);
}

.cp-vazio i {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.75rem;
  color: var(--cp-borda-forte);
}

.cp-erro {
  border: 1px solid var(--cp-borda);
  border-left: 3px solid var(--cp-perigo);
  border-radius: var(--cp-raio);
  background: var(--cp-superficie);
  padding: 1rem;
}

.cp-erro code { color: var(--cp-texto-suave); font-size: 0.75rem; }

/* Preloader de ação em curso: cobre a superfície e impede o segundo clique.
   No login, um segundo envio emite um SEGUNDO desafio de código, que derruba o primeiro -- a
   pessoa recebe dois emails e o que ela lê primeiro já não vale. */
.cp-preloader {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cp-raio);
  background: color-mix(in srgb, var(--cp-superficie) 88%, transparent);
}

/* Sobre a JANELA, e nao sobre um cartao: e a variante que o CP.carregando cria quando a tela nao
   traz preloader proprio. `fixed` para nao rolar junto com a pagina por baixo dele. */
.cp-preloader--tela {
  position: fixed;
  /* ACIMA DO MODAL (1055 no Bootstrap) e da caixa do SweetAlert (1060). Herdando a camada 10 do
     preloader de cartao, ele nascia ATRAS do modal aberto: a pagina escurecia por baixo do
     formulario e o modal parecia congelado, sem nada dizendo que havia algo em curso. Foi o que se
     viu ao editar a filiacao pela ficha do aluno. Abaixo dos avisos (2000), que precisam ser lidos
     mesmo enquanto algo carrega. */
  z-index: 1080;
  border-radius: 0;

  /* O VEU E LEVE DE PROPOSITO: 25%, e nao os 72% com que ele nasceu.

     O trabalho dele nao e ESCONDER a tela - e dizer que ha algo em curso e comer o segundo clique,
     e as duas coisas ele faz sendo fino: quem bloqueia e o elemento, que cobre a janela inteira e
     engole o ponteiro em qualquer opacidade, e quem fala e o spinner. A 72% o formulario por baixo
     sumia, e sumir e ruim aqui - a pessoa perde de vista o que estava preenchendo e, se a espera
     for longa, deixa de reconhecer a tela para a qual vai voltar. A 25% o contexto fica
     inteiramente legivel atras - o que diz que ha algo em curso passa a ser o spinner, e nao o
     escurecimento. Foram dois ajustes a pedido do Igor, 72% -> 45% -> 25%, na mesma direcao: quem
     bloqueia o clique e o elemento, que cobre a janela em qualquer opacidade. */
  background: color-mix(in srgb, var(--cp-fundo) 25%, transparent);
}

.cp-preloader__conteudo { text-align: center; color: var(--cp-texto-suave); }

/* O GIRO E O DO BOOTSTRAP, e nao o do FontAwesome.

   O `fa-spin` PARA quando o sistema pede menos movimento: o FontAwesome zera a duracao da animacao
   nesse caso, e no Windows com os efeitos de animacao desligados -- que e o estado de muita maquina
   -- o aviso de carregando virava um circulo parado, que se le como tela travada. O spinner do
   Bootstrap so desacelera para 1,5s: continua dizendo "estou trabalhando".

   A cor entra aqui porque ele se pinta com `currentcolor`. */
.spinner-border { color: var(--cp-primaria); }

.cp-preloader .spinner-border {
  --bs-spinner-width: 1.75rem;
  --bs-spinner-height: 1.75rem;
}

/* ============================================================================================
   Avisos (toast) — um cartão do sistema, não um retângulo de cor chapada.
   ============================================================================================ */

.cp-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  position: relative;
  min-width: 18rem;
  max-width: 26rem;
  padding: 0.875rem 0.875rem 1rem;
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  /* Duas camadas: um fio de CONTATO curto, que assenta o cartão na tela, e uma difusa e larga, que
     o separa do conteúdo por baixo. Uma camada só, larga e sozinha, lê como borrão cinza em vez de
     elevação. É a única sombra do sistema. */
  box-shadow: 0 1px 2px var(--cp-sombra-contato), 0 10px 28px var(--cp-sombra);
  overflow: hidden;
  color: var(--cp-texto);
  text-align: left;
}

/* Faixa de 3 px na borda esquerda, na cor do estado. */
.cp-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cp-cor-estado);
}

.cp-toast--sucesso { --cp-cor-estado: var(--cp-sucesso); }
.cp-toast--erro { --cp-cor-estado: var(--cp-perigo); }
.cp-toast--atencao { --cp-cor-estado: var(--cp-atencao); }

.cp-toast__icone {
  color: var(--cp-cor-estado);
  font-size: 1rem;
  line-height: 1.4;
  flex: 0 0 auto;
}

.cp-toast__texto { flex: 1 1 auto; font-size: 0.875rem; line-height: 1.4; }

.cp-toast__fechar {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--cp-texto-suave);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.125rem;
}

.cp-toast__fechar:hover { color: var(--cp-texto); }

/* Barra de progresso em DUAS camadas: trilho fraco (o percurso inteiro) e preenchimento forte (o
   que resta). Uma camada só vira um risco encurtando sem referência de tamanho. */
.cp-toast__trilho {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: color-mix(in srgb, var(--cp-cor-estado) 20%, transparent);
}

.cp-toast__progresso {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: var(--cp-cor-estado);
}

/* O CRONOMETRO DA BARRA. O cp.js a anima por este nome (e a duracao vem de la), e ele NAO EXISTIA nesta
   base: a animacao apontava para o vazio, e a barra ficava cheia e parada ate o aviso sumir de uma vez. */
@keyframes cp-toast-correndo {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* O Toastify de fábrica desenha um retângulo colorido com sombra própria: aqui ele é só o
   posicionador e o cronômetro. */
.toastify {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: var(--cp-raio);
  /* De fábrica o wrapper tem max-width: calc(50% - 20px). O cartão dentro dele tem min-width, NAO
     obedece esse limite, e como o wrapper está ancorado à direita o que sobra sai pela borda da
     tela -- em qualquer viewport abaixo de ~676px, ou seja, em todo telefone. */
  max-width: none;
}

/* Em tela estreita não existe "canto" a ocupar: o aviso ocupa a largura util, com a mesma folga
   dos dois lados. A media query de fábrica só age abaixo de 360px, o que deixa de fora a maioria
   dos telefones em uso. */
@media (max-width: 30rem) {
  .toastify.on.toastify-right,
  .toastify.on.toastify-left {
    left: 0.75rem;
    right: 0.75rem;
  }

  .cp-toast {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* ============================================================================================
   Formulários e botões
   ============================================================================================ */

/* Sem tamanho e sem peso proprios: o rotulo herda o corpo. Ele ja se distingue do valor pela COR
   e pela posicao -- encolher e engrossar era pedir duas vezes a mesma hierarquia, e a segunda
   cobrava o preco de ler como negrito. */
.form-label {
  color: var(--cp-texto-suave);
  margin-bottom: 0.25rem;
}

/* O RECADO EMBAIXO DO CAMPO DE REFERENCIA: a frase a esquerda, a acao a direita.

   Ele so existe quando a lista veio vazia ou nao carregou, e nos dois casos ha duas coisas a
   oferecer - ir cadastrar noutra aba, e trazer de volta o que foi cadastrado. As duas na mesma
   linha porque sao o mesmo assunto, e em pontas opostas porque uma e leitura e a outra e clique:
   encostadas, o olho tropeça no link ao mirar o botao.

   `baseline` e nao `center`: o botao tem icone e a frase nao, e alinhar pelo centro deixaria as
   duas linhas de texto em alturas visivelmente diferentes.

   `flex-wrap` porque a frase carrega o plural do cadastro - "Cadastre primeiro em horarios de
   aula" e bem mais longa que "em series" -, e em campo estreito a alternativa a quebrar seria
   espremer o botao ate o rotulo dele sumir. */
.cp-atalho-origem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

/* Herda o tamanho do recado - o `.btn-sm` do Bootstrap o deixaria MENOR que a frase ao lado, e
   um botao menor que o texto que o acompanha le como nota de rodape, nao como acao.

   `nowrap` para "Tentar de novo" nao quebrar em duas linhas dentro do proprio botao, que e o que
   acontece antes de o flex acima decidir quebrar a linha inteira. */
.cp-atalho-refresco {
  flex: 0 0 auto;
  font-size: inherit;
  white-space: nowrap;
  text-decoration: none;
}

.cp-atalho-refresco:hover { text-decoration: underline; }

/* `background-color`, e NAO o atalho `background`: o atalho zera o que ele nao cita, e o que ele
   nao citava era a background-image -- que no .form-select e a SETA do Bootstrap. Todo combo do
   sistema aparecia sem seta, e a unica que sobrava na tela era o triangulo que o select2 desenha
   por conta. Trocado o atalho pela propriedade, a seta volta e passa a ser a mesma no <select>
   simples e no combo. */
.form-control,
.form-select {
  background-color: var(--cp-superficie);
  border: 1px solid var(--cp-borda-forte);
  color: var(--cp-texto);
  border-radius: 8px;
  /* 16px NAO e escolha estetica: abaixo disso o Safari do iPhone amplia a pagina sozinho ao focar
     o campo, e a tela salta no meio da digitacao -- num formulario de login, bem quando a pessoa
     esta trocando entre email e senha. E o mesmo tamanho que o CpFront usa. */
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--cp-superficie);
  color: var(--cp-texto);
  border-color: var(--cp-primaria);
  box-shadow: none;
}

.form-control::placeholder { color: var(--cp-texto-suave); }

.form-control:disabled,
.form-control[readonly] {
  background: var(--cp-fundo);
  color: var(--cp-texto-suave);
}

.form-text { font-size: 0.75rem; color: var(--cp-texto-suave); }

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

/* SEM `padding` ESCRITO AQUI: o Bootstrap monta o respiro do botao por variavel, e um atalho neste
   ponto vencia calado as medidas do bloco de densidade la embaixo -- todo botao do sistema ficava
   8px mais alto do que o pedido, e quem pagava a conta era o campo ao lado: o bairro e o municipio
   do aluno vivem num input-group, e um input-group tem a altura do seu item mais alto. O combo
   parecia grande; grande era o botao encostado nele. */
.btn {
  font-size: 0.875rem;
  border-radius: 8px;
  transition: background var(--cp-transicao), border-color var(--cp-transicao), color var(--cp-transicao);
}

.btn-primary {
  background: var(--cp-primaria);
  border-color: var(--cp-primaria);
  color: var(--cp-sobre-primaria);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: color-mix(in srgb, var(--cp-primaria) 85%, var(--cp-texto));
  border-color: color-mix(in srgb, var(--cp-primaria) 85%, var(--cp-texto));
  color: var(--cp-sobre-primaria);
}

.btn-outline-secondary { border-color: var(--cp-borda-forte); color: var(--cp-texto); }

.btn-outline-secondary:hover {
  background: color-mix(in srgb, var(--cp-texto) 8%, transparent);
  border-color: var(--cp-borda-forte);
  color: var(--cp-texto);
}

.btn-outline-danger { border-color: var(--cp-perigo); color: var(--cp-perigo); }

.btn-outline-danger:hover {
  background: var(--cp-perigo);
  border-color: var(--cp-perigo);
  color: var(--cp-sobre-perigo);
}

/* ============================================================================================
   Revestimento das bibliotecas
   ============================================================================================ */

.modal-content {
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
}

.modal-header,
.modal-footer { border-color: var(--cp-borda); }

.dropdown-menu {
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  font-size: 0.875rem;
}

.dropdown-item { color: var(--cp-texto); }

.dropdown-item:hover {
  background: color-mix(in srgb, var(--cp-texto) 8%, transparent);
  color: var(--cp-texto);
}

.dropdown-item.active { background: var(--cp-primaria-suave); color: var(--cp-primaria); }

.alert { border-radius: var(--cp-raio); font-size: 0.875rem; border: 1px solid var(--cp-borda); }
.alert-warning { background: var(--cp-atencao-suave); color: var(--cp-atencao); border-color: var(--cp-atencao); }
.alert-success { background: color-mix(in srgb, var(--cp-sucesso) 12%, transparent); color: var(--cp-sucesso); border-color: var(--cp-sucesso); }
.alert-danger { background: color-mix(in srgb, var(--cp-perigo) 12%, transparent); color: var(--cp-perigo); border-color: var(--cp-perigo); }
.alert-secondary { background: var(--cp-fundo); color: var(--cp-texto-suave); }

/* ================================================================================================
   A GRADE -- o mesmo desenho do CP.

   Ela e a tela dos cadastros e do log, e era o elemento mais fora do padrao: este tema vestia a
   MOLDURA do DataTables e deixava a `<table>` no Bootstrap de fabrica. As regras abaixo sao as do
   CpFront, com os mesmos tokens; os comentarios que explicam CADA escolha estao la, e o que segue
   guarda so o que muda de um produto para o outro.

   A forma, em seis tracos: cabecalho numa superficie rebaixada com rotulo miudo em caixa alta,
   corpo dividido por fio de 1px em vez de moldura, realce de linha discreto, anel de foco de 3px,
   paginacao em pilula e vazio centrado com folga generosa.
   ================================================================================================ */

/* Sem folga externa -- a tabela ENCOSTA na borda do cartao, e por isso o `<div class="card-body">`
   das telas de listagem leva `p-0`. Era o respiro do cartao que impedia o fio do cabecalho de
   atravessar a largura inteira: ele morria a 1rem de cada lado e a faixa ficava flutuando dentro
   do cartao, que e o oposto do desenho. */
.dt-container { padding: 0; position: relative; }

/* AS DUAS FAIXAS DE FERRAMENTAS: "por pagina" em cima, contagem e paginas embaixo.

   O seletor e `div.row`, e nao `div.dt-layout-row`: e o que esta versao do DataTables emite. E o
   `--bs-gutter-x: 0` nao e enfeite -- elas SAO `.row` do Bootstrap, que nasce com margem NEGATIVA
   de meia calha; somada ao respiro daqui, a faixa sairia mais larga que a tabela e vazaria por
   fora do cartao. Zerar a calha torna a conta previsivel: a folga e a que esta escrita. */
.dt-container > div.row:not(.dt-layout-table) {
  --bs-gutter-x: 0;
  margin: 0;
  padding: 0.75rem 1rem;
  align-items: center;
}

.dt-container > div.row:not(.dt-layout-table):first-child { border-bottom: 1px solid var(--cp-borda); }
.dt-container > div.row:not(.dt-layout-table):last-child { border-top: 1px solid var(--cp-borda); }

/* A FAIXA DA TABELA vai de borda a borda, sem respiro proprio. */
.dt-container > div.row.dt-layout-table { --bs-gutter-x: 0; margin: 0; }

/* As variaveis do Bootstrap, amarradas aos tokens. `--bs-table-bg` vira transparente de proposito:
   as celulas passam a deixar ver a superficie do cartao, e o realce de linha deixa de disputar com
   um fundo opaco pintado por baixo dele. */
.dt-container table.dataTable {
  --bs-table-bg: transparent;
  --bs-table-color: var(--cp-texto);
  --bs-border-color: var(--cp-borda);

  border-color: var(--cp-borda);
  width: 100%;
  margin: 0;
}

/* O Bootstrap desenha `border-top: 2px solid currentColor` entre `<thead>` e `<tbody>`. E o fio
   duplo grosso que denuncia uma tabela como "Bootstrap padrao" a metros de distancia; no lugar
   dele fica o fio de 1px do proprio cabecalho. */
.dt-container table.dataTable > :not(:first-child) { border-top: 0; }

/* -- Cabecalho: rotulo, e nao titulo ---------------------------------------------------------- */

/* Miudo, em caixa alta, espacado e em cinza: o cabecalho de coluna e ROTULO, e nao conteudo.
   Rebaixa-lo assim faz o dado da linha ganhar o peso da leitura sem precisar engrossar o dado. */
.dt-container table.dataTable > thead > tr > th,
.dt-container table.dataTable > thead > tr > td {
  background: var(--cp-fundo);
  color: var(--cp-texto-suave);
  border-bottom: 1px solid var(--cp-borda);
  padding: 0.625rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* A FOLGA DA SETA, reposta. O DataTables reserva `padding-right: 30px` na coluna ordenavel porque
   o indicador e um `span` POSICIONADO POR CIMA da celula: sem a folga ele nao empurra nada, ele
   cobre. A regra acima usa `padding` abreviado e, ganhando em especificidade, apagava a reserva --
   e o sintoma aparece justamente nas colunas alinhadas a direita, que sao as que menos se olha. */
.dt-container table.dataTable > thead > tr > th.dt-orderable-asc,
.dt-container table.dataTable > thead > tr > th.dt-orderable-desc,
.dt-container table.dataTable > thead > tr > th.dt-ordering-asc,
.dt-container table.dataTable > thead > tr > th.dt-ordering-desc {
  padding-right: 2rem;
}

.dt-container table.dataTable > thead > tr > th.dt-orderable-asc:hover,
.dt-container table.dataTable > thead > tr > th.dt-orderable-desc:hover {
  background: var(--cp-superficie);
  color: var(--cp-texto);
}

.dt-container table.dataTable > thead > tr > th.dt-ordering-asc,
.dt-container table.dataTable > thead > tr > th.dt-ordering-desc {
  color: var(--cp-texto);
}

/* -- Corpo: fio entre linhas, e nao moldura --------------------------------------------------- */

/* O fio fica EM CIMA de cada linha, e nao embaixo: assim a ultima linha nao desenha um segundo
   traco a um pixel da borda do cartao. */
.dt-container table.dataTable > tbody > tr > td,
.dt-container table.dataTable > tbody > tr > th {
  border-top: 1px solid var(--cp-borda);
  border-bottom: 0;
  padding: 0.625rem 1rem;
  color: var(--cp-texto);
  vertical-align: middle;
}

/* O cabecalho ja fechou com o fio dele; sem isto, a primeira linha desenha o segundo por cima. */
.dt-container table.dataTable > tbody > tr:first-child > td,
.dt-container table.dataTable > tbody > tr:first-child > th { border-top: 0; }

/* O REALCE DE LINHA E SOMBRA, e nao fundo. O DataTables pinta o hover com
   `box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover),.075)`, por variavel propria que e um
   TRIO RGB -- e os tokens daqui sao hexadecimais. Entao a sombra inteira e substituida, com cor
   opaca do token; ela precisa continuar sendo sombra porque e sombra que vence. */
.dt-container table.table.dataTable.table-hover > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px var(--cp-fundo);
}

.dt-container table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n + 1) > * {
  box-shadow: inset 0 0 0 9999px var(--cp-fundo);
}

/* A tabela densa so muda de folga -- todo o resto vem das regras acima. */
.dt-container table.dataTable.table-sm > thead > tr > th,
.dt-container table.dataTable.table-sm > thead > tr > td,
.dt-container table.dataTable.table-sm > tbody > tr > td,
.dt-container table.dataTable.table-sm > tbody > tr > th {
  padding: 0.4375rem 0.75rem;
}

/* "Nenhum registro" ocupa espaco de proposito: espremido na altura de uma linha, o vazio se le
   como uma linha de dado em branco -- parece defeito de carregamento. Com folga em volta e
   centrado, se le como resposta. */
.dt-container table.dataTable > tbody > tr > td.dt-empty {
  padding: 2.5rem 1rem;
  color: var(--cp-texto-suave);
  font-size: 0.875rem;
  text-align: center;
}

/* -- Ferramentas: busca, quantidade, contagem ------------------------------------------------- */

.dt-container .dt-search input,
.dt-container .dt-length select {
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda);
  color: var(--cp-texto);
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  transition: border-color var(--cp-transicao), box-shadow var(--cp-transicao);
}

.dt-container .dt-search input::placeholder { color: var(--cp-texto-suave); }

/* O anel de foco. O `outline: 0` sozinho seria remover o indicador de foco de quem navega por
   teclado -- ele so pode sair porque a sombra abaixo o SUBSTITUI, e com area maior. */
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
  outline: 0;
  border-color: var(--cp-primaria);
  box-shadow: 0 0 0 3px var(--cp-primaria-suave);
}

.dt-container .dt-info,
.dt-container .dt-length label,
.dt-container .dt-search label {
  color: var(--cp-texto-suave);
  font-size: 0.8125rem;
  margin: 0;
}

.dt-container .dt-length label { white-space: nowrap; }

/* -- Paginacao: pilulas soltas, e nao um bloco emendado --------------------------------------- */

/* O Bootstrap emenda os botoes num bloco unico -- `margin-left: -1px` para as bordas colapsarem.
   O desenho daqui e o oposto: cada pagina e uma pilula independente, separada por folga, sem borda
   enquanto esta em repouso. Zerar a margem e o que desfaz a emenda. */
.dt-container .dt-paging ul.pagination { margin: 0; gap: 0.25rem; }

.dt-container .dt-paging .page-item .page-link {
  margin: 0;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--cp-texto-suave);
  font-size: 0.8125rem;
  padding: 0.25rem 0.625rem;
  min-width: 2rem;
  text-align: center;
  transition: background var(--cp-transicao), color var(--cp-transicao),
    border-color var(--cp-transicao);
}

/* O `:not(.active):not(.disabled)` existe para o hover nao apagar a pagina atual ao passar por
   cima dela, nem prometer clique numa seta que nao leva a lugar nenhum. */
.dt-container .dt-paging .page-item:not(.active):not(.disabled) .page-link:hover {
  background: var(--cp-fundo);
  border-color: var(--cp-borda);
  color: var(--cp-texto);
}

.dt-container .dt-paging .page-item.active .page-link {
  background: var(--cp-primaria);
  border-color: var(--cp-primaria);
  color: var(--cp-sobre-primaria);
}

.dt-container .dt-paging .page-item.disabled .page-link {
  background: transparent;
  border-color: transparent;
  color: var(--cp-texto-suave);
  opacity: 0.45;
}

/* `:focus-visible`, e nao `:focus`: o anel aparece para quem chegou de teclado e nao para quem
   acabou de clicar -- que ja sabe onde esta, e para quem o anel so fica no caminho. */
.dt-container .dt-paging .page-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--cp-primaria-suave);
}

div.dt-processing {
  /* `position: absolute` E `z-index` VÊM DAQUI, e não do DataTables.

     A folha de estilo dele não é carregada neste tema -- só o script --, e era ela que posicionava
     esta caixa. Sem isso, `top`, `left` e o `transform` abaixo não tinham sobre o que agir: o aviso
     virava um bloco estático da largura inteira da grade, deslocado meia largura para a esquerda
     pelo próprio transform. Era o "carregando quebrado".

     `z-index` porque ele se sobrepõe às linhas: sem ele, a primeira linha da tabela passa por cima. */
  position: absolute;
  z-index: 10;

  /* NO TOPO DA GRADE, e não no meio dela.

     O padrão do DataTables é `top: 50%` com margens negativas fixas -- pensado para uma caixa de
     200px que este tema não usa mais. Duas coisas quebravam: as margens sobravam por baixo do
     `transform` e empurravam o aviso para fora do lugar, e o meio de uma tabela de 25 linhas fica
     abaixo da dobra -- o aviso existia e ninguém via, que é o mesmo que não existir.

     No topo ele aparece onde o olho já está: logo abaixo da busca, sobre as primeiras linhas. */
  top: 0.75rem;
  left: 50%;
  width: auto;
  margin: 0;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  border: 1px solid var(--cp-borda);
  border-radius: 999px;
  background: var(--cp-superficie);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  color: var(--cp-texto);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* AS BOLINHAS SÃO AS DO DATATABLES, e elas ficam.

   Estiveram escondidas enquanto o rótulo daqui trazia um ícone girando -- duas animações dizendo a
   mesma coisa competem em vez de somar. Agora o indicador é só o dele, e o que sobra para este tema
   é o LUGAR onde ele aparece, logo acima.

   A margem própria do último filho sai: ela existe para centrar as bolinhas numa caixa de 200px, e
   esta é do tamanho do conteúdo. */
/* AS BOLINHAS SÃO AS DO DATATABLES -- a mesma marcação e a mesma animação que ele desenha.

   ELAS PRECISAM ESTAR AQUI porque a folha do DataTables que o layout carrega é a da INTEGRAÇÃO
   com o Bootstrap (`dataTables.bootstrap5.min.css`), e ela não traz o indicador: ele mora na folha
   BASE, que não entra. Sem estas regras, os quatro <div> que ele cria existem no DOM sem tamanho,
   sem cor e sem `@keyframes` -- e o "carregando" vira um retângulo vazio.

   O QUE MUDA em relação ao original é a COR: lá ela sai de `--dt-row-selected`, que só existe na
   folha dele. Uma `var()` indefinida invalida a declaração inteira -- as bolinhas ficariam
   transparentes, que é pior que sem estilo. Aqui elas usam a cor da marca. */
div.dt-processing > div:last-child {
  position: relative;
  width: 80px;
  height: 15px;
  margin: 0 auto;
}

div.dt-processing > div:last-child > div {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cp-primaria);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

div.dt-processing > div:last-child > div:nth-child(1) { left: 8px; animation: datatables-loader-1 0.6s infinite; }
div.dt-processing > div:last-child > div:nth-child(2) { left: 8px; animation: datatables-loader-2 0.6s infinite; }
div.dt-processing > div:last-child > div:nth-child(3) { left: 32px; animation: datatables-loader-2 0.6s infinite; }
div.dt-processing > div:last-child > div:nth-child(4) { left: 56px; animation: datatables-loader-3 0.6s infinite; }

@keyframes datatables-loader-1 {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes datatables-loader-2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(24px, 0); }
}

@keyframes datatables-loader-3 {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}

/* ------------------------------------------------------------------------------------------------
   LINHA DE DETALHE da grade -- hoje, pai e mãe do aluno.
   ------------------------------------------------------------------------------------------------ */

/* A coluna do controle é só o que o botão ocupa: ela não tem cabeçalho a defender. */
.cp-tabela th.cp-abrir,
.cp-tabela td.cp-abrir { width: 1%; white-space: nowrap; padding-right: 0; }

.cp-abrir__botao i { transition: transform 0.15s ease; }

@media (prefers-reduced-motion: reduce) {
  .cp-abrir__botao i { transition: none; }
}

/* AS AÇÕES DO ALUNO no topo do detalhe: fila que quebra em duas no estreito, e não rolagem lateral
   -- rolagem horizontal dentro de uma linha de tabela é onde o botão some sem ninguém perceber.

   O respiro embaixo separa as ações do ALUNO da lista de filiação, que fala de outras pessoas. */
.cp-detalhe-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem 2.5rem;
}

/* O detalhe recuado e sobre fundo: assim ele se lê como PARTE da linha de cima, e não como duas
   linhas novas de aluno. */
.cp-filiacao {
  margin: 0 0 0 2.5rem;
  border-left: 2px solid var(--cp-borda);
  border-radius: 0;
}

.cp-filiacao .list-group-item {
  background: var(--cp-fundo);
  border-color: var(--cp-borda);
  color: var(--cp-texto);
}

/* Os botões de contato herdam a cor do meio pelo qual falam: o verde do WhatsApp é reconhecido
   antes de o ícone ser lido. */
.cp-acao--ligar:hover { color: var(--cp-primaria); border-color: var(--cp-primaria); }
.cp-acao--whats:hover { color: var(--cp-sucesso); border-color: var(--cp-sucesso); }
.cp-acao--email:hover { color: var(--cp-atencao); border-color: var(--cp-atencao); }

/* ------------------------------------------------------------------------------------------------
   MENU DE AÇÕES da grade.

   Os itens têm a medida do list-group, e não a do dropdown-item do Bootstrap: são o mesmo alvo de
   toque das listas do sistema. No celular, onde o dedo é o ponteiro, essa diferença é a diferença
   entre acertar e abrir a ação vizinha.
   ------------------------------------------------------------------------------------------------ */
.cp-menu__lista {
  padding: 0;
  min-width: 13rem;
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  overflow: hidden;
}

/* A MESMA ARMADILHA de .cp-menu-usuario, e pelo mesmo motivo: na folha do Bootstrap o
   .list-group { display: flex } vem DEPOIS do .dropdown-menu { display: none }, e apaga o none que
   mantém o menu fechado. Sem esta linha o menu de ações nasce ABERTO em toda linha da grade, e
   nada no console reclama.

   São dois menus com a mesma combinação hoje; um terceiro vai precisar da linha de novo. */
.cp-menu__lista.list-group:not(.show) {
  display: none;
}

.cp-menu__lista .list-group-item {
  display: flex;
  align-items: center;
  width: 100%;
  border-left: 0;
  border-right: 0;
  background: var(--cp-superficie);
  color: var(--cp-texto);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.cp-menu__lista .list-group-item:first-child { border-top: 0; }
.cp-menu__lista .list-group-item:last-child { border-bottom: 0; }

.cp-menu__lista .list-group-item:hover,
.cp-menu__lista .list-group-item:focus { background: var(--cp-fundo); }

/* ============================================================================================
   A FICHA COMPACTA -- cadastro de pessoa, aluno e responsável.

   O modal cresceu campo a campo ate passar da altura da tela, e um formulario que rola esconde o
   proprio botao de salvar: quem preenche o ultimo campo nao ve para onde ir. Apertar aqui rende
   mais que remover campo, porque o desperdicio nao estava nos campos -- estava no ar entre eles.

   O respiro que sai e o SUPERFLUO: o rotulo colado no seu campo, a ajuda colada no dela. O que
   separa um campo do outro continua, porque e ele que faz o par rotulo-campo ser lido como um.
   ============================================================================================ */
.cp-ficha .form-label {
  margin-bottom: 0.125rem;
  font-size: 0.8125rem;
}

.cp-ficha .form-text {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.3;
}

.cp-ficha .cp-secao {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.cp-ficha .form-check { margin-top: 0.25rem; }

/* ============================================================================================
   A opção de PESSOA na busca de responsável: retrato, nome e CPF.

   Marcação de list-group dentro do resultado do select2. O item traz padding e borda próprios,
   então o resultado do select2 devolve os dele -- dois paddings somados deixariam a lista com o
   dobro da altura, e são os itens que precisam caber na tela sem rolar.

   A borda de baixo some no último, que é o que o `flush` faz: lista sem moldura, separada só por
   linhas entre os itens.
   ============================================================================================ */
.select2-results__option:has(.cp-opcao-pessoa) { padding: 0; }

.cp-opcao-pessoa {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  padding: 0.5rem 0.75rem;
}

.select2-results__option:last-child .cp-opcao-pessoa { border-bottom-width: 0; }

/* O destaque é do select2 -- ele marca a opção sob o cursor e a navegada pelo teclado. O item
   herda, em vez de pintar por conta: pintando, o teclado deixaria de mostrar onde está. */
.select2-container--default .select2-results__option--highlighted .cp-opcao-pessoa {
  background: transparent;
  color: inherit;
}

.cp-opcao-pessoa__texto { min-width: 0; }

.cp-opcao-pessoa__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Escolhido, cabe uma linha: o retrato encolhe para não empurrar a altura do campo.
   `line-height: 1` porque o retrato é uma imagem numa LINHA de texto: a linha reserva o espaço do
   rabo das letras abaixo dele, e esses poucos pixels esticavam o campo do pai e da mãe acima de
   todos os outros da ficha. */
.cp-opcao-pessoa__escolhida {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  line-height: 1;
  /* E `middle` porque a caixa do retrato senta na LINHA DE BASE por padrao -- e abaixo da linha de
     base ainda cabe o rabo das letras, que e altura que o campo paga sem mostrar nada. */
  vertical-align: middle;
}

/* O retrato do escolhido encolhe para caber na linha do campo -- e o seletor traz o pai porque a
   definição-base de .cp-avatar-linha (34px) é escrita mais abaixo neste arquivo e, com a mesma
   especificidade, vencia por ser a última: o modificador não encolhia nada, e o combo do pai e da
   mãe ficava alto por causa de um retrato de tabela dentro de um campo. */
.cp-opcao-pessoa__escolhida .cp-avatar-linha--mini { width: 1rem; height: 1rem; }

/* ============================================================================================
   Vínculo na grade de alunos: o RM colado no selo da situação, os dois dentro do mesmo link.

   inline-flex para que RM e selo não se separem numa quebra de linha -- partidos, viram duas
   coisas soltas e ninguém sabe qual situação é de qual matrícula. O aluno com três vínculos quebra
   ENTRE eles, que é onde a quebra não custa sentido.
   ============================================================================================ */
.cp-vinculo {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.125rem 0.375rem 0.125rem 0;
  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
  border: 1px solid var(--cp-borda);
  border-radius: 999px;
  background: var(--cp-superficie);
  color: inherit;
  font-size: 0.8125rem;
  line-height: 1.7;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cp-vinculo:hover,
.cp-vinculo:focus-visible {
  border-color: var(--cp-primaria);
  background: var(--cp-fundo);
  color: inherit;
}

/* O selo dentro do botão perde a margem que ele tem solto na tabela: aqui quem dá o respiro é o
   gap do flex, e a margem duplicada abriria um vinco entre o RM e a situação. */
.cp-vinculo .cp-selo { margin: 0; }

/* Largura fixa no ícone para os rótulos comecarem todos na mesma coluna. */
.cp-menu__icone { width: 1.25rem; margin-right: 0.5rem; text-align: center; }

.swal2-popup {
  background: var(--cp-superficie);
  color: var(--cp-texto);
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  font-family: var(--cp-fonte);
  font-size: 0.875rem;
}

.swal2-title { color: var(--cp-texto); font-size: 1.15rem; font-weight: 600; }
.swal2-html-container { color: var(--cp-texto-suave); font-size: 0.875rem; }

/* ============================================================================================
   Telas anônimas (login e afins): sem barra lateral, cartão centrado.
   ============================================================================================ */

.cp-anonimo {
  /* dvh, e nao vh: no telefone a barra do navegador entra na conta de 100vh, e o cartao fica
     empurrado para fora da area visivel -- centrado num retangulo maior que a tela. */
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

/* QUEM E O CARTAO e este contêiner, e nao o .card das views.
   A marca precisa ficar DENTRO da moldura, e ela e escrita pelo cabecalho, um nivel acima do
   .card que cada view abre. Em vez de reescrever as seis telas anonimas, o contêiner assume o
   fundo, a borda e o respiro, e o .card interno deixa de desenhar qualquer coisa. */
.cp-anonimo__cartao {
  width: 100%;
  max-width: 26rem;
  position: relative;
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  padding: 2rem;
}

/* O !important nao e preguica: o p-4 do Bootstrap ja vem com !important, e sem ele o respiro
   dobraria -- 2rem do contêiner mais 1,5rem do .card. */
.cp-anonimo__cartao > .card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 !important;
}

/* A MARCA e o unico bloco centrado: ela e o centro visual do cartao. Titulo e linha de apoio
   ficam a ESQUERDA, alinhados com os rotulos e os campos -- uma unica margem de leitura, em vez
   de o olho voltar ao centro e sair de novo para a esquerda a cada linha. */

.cp-anonimo__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;

  /* A TINTA DA MARCA, e nao a cor do texto: a cloche e o "Gourmet" usam currentColor, e saem no
     verde da identidade no cartao claro e em branco no escuro (ver --cp-marca-tinta). */
  color: var(--cp-marca-tinta);
}

/* LEGENDA, e não título: ela diz o que o produto faz para quem chega pela primeira vez, sem
   repetir o nome -- a marca logo acima já o escreve, e escrevê-lo de novo em texto enfraqueceria
   as duas coisas. Por isso vem menor e na cor de apoio: quem já conhece o sistema passa por ela
   sem ler, que é o comportamento certo para uma tela que se visita todo dia. */
.cp-anonimo__legenda {
  margin: 0;
  max-width: 22rem;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--cp-texto-suave);

  /* A ESQUERDA, e nao centrada. O comentario acima ja dizia isso - "titulo e linha de apoio
     ficam a ESQUERDA, alinhados com os rotulos e os campos" - e a regra fazia o contrario. O
     resultado era o titulo a esquerda com a legenda centrada logo abaixo, e o olho voltando ao
     centro e saindo de novo para a esquerda em tres linhas seguidas. */
}

/* MAIOR que na lateral, e por um motivo diferente do dela: lá a marca divide a faixa da barra
   superior; aqui ela está sozinha no topo do cartão e é o que a pessoa vê primeiro. É a variante
   COMPLETA, larga, e por isso a altura é menor que a do símbolo que morava aqui: 3rem de altura
   já dão uns 16rem de largura, o que cabe no cartão sem encostar nas bordas. */
/* 2.5rem: a marca e larga (8:1), e 2.5rem de altura ja dao uns 21rem, o que cabe nos 22rem uteis do cartao. */
.cp-anonimo__marca .cp-marca { height: 2.5rem; max-width: 100%; }

@media (max-width: 30rem) {
  /* No telefone o cartão encosta nas bordas: a marca encolhe junto para não empurrar o respiro
     lateral que ainda sobra. */
  .cp-anonimo__marca .cp-marca { height: 2.125rem; }

  /* Em tela estreita, 2rem de respiro de cada lado comem a largura util e quebram a linha dos
     links em duas. O cartao ja esta colado nas bordas -- o que falta e conteudo, nao margem. */
  .cp-anonimo { padding: 1rem; }
  .cp-anonimo__cartao { padding: 1.5rem; }
}

/* Aviso do formulario: a mensagem fica DENTRO do cartao, junto do campo que a pessoa vai
   corrigir. Um toast diria a mesma coisa no canto da tela e sumiria em quatro segundos --
   levando embora justamente o texto que ela precisa reler enquanto digita de novo. */
.cp-alerta { margin-bottom: 1rem; font-size: 0.8125rem; }

.cp-campo-codigo {
  font-size: 1.75rem;
  letter-spacing: 0.75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cp-foto {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cp-borda);
  background: var(--cp-fundo);
}

/* ============================================================================================
   Abaixo de 992px a lateral vira gaveta, e as outras duas áreas ocupam a coluna 1.
   ============================================================================================ */

@media (max-width: 991.98px) {
  .cp-app { grid-template-columns: 1fr; }

  .cp-navbar,
  .cp-conteudo { grid-column: 1; }

  .cp-navbar__gaveta { display: inline-flex; align-items: center; justify-content: center; }
  .cp-navbar__recolher { display: none; }

  .cp-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--cp-sidebar-largura);
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform var(--cp-transicao);
  }

  .cp-sidebar--aberta { transform: translateX(0); }

  /* Aqui a gaveta cobre a barra superior inteira, hamburguer incluído: sem este X, o único jeito
     de fechar seria navegar para algum lugar. */
  .cp-sidebar__fechar { display: inline-flex; margin-right: 0.5rem; }

  /* E A GLOSA SAI PARA ELE CABER.
     Os três blocos foram desenhados para os 17,5rem inteiros; o X tira 2,5rem, e quem se apertava
     era o último -- "Grade de aulas" quebrando em três linhas. O bloco do meio é o que explica a
     sigla a quem chega, e quem está com a gaveta aberta já entrou. Ficam os dois que IDENTIFICAM:
     a casa e o módulo. */
  .cp-sidebar__marca-completa > .cp-sidebar__extenso:not(.cp-sidebar__modulo),
  .cp-sidebar__marca-completa > .cp-sidebar__fio:first-of-type { display: none; }

  .cp-veu {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: color-mix(in srgb, var(--cp-texto) 45%, transparent);
  }
}

@media print {
  .cp-sidebar,
  .cp-navbar,
  .cp-faixa { display: none; }

  .cp-app { display: block; }
  .cp-conteudo { padding: 0; }
  /* !important: a regra base do rodape vem DEPOIS deste bloco no arquivo e, com a mesma especificidade, vencia -
     o rodape com a versao saia impresso em toda tela (visto no cupom da NFC-e). */
  .cp-rodape { display: none !important; }
  body { background: var(--cp-superficie); }
}

/* ==============================================================================================
   MÓDULO ESCOLAR
   ============================================================================================== */

/* Título de bloco dentro de um formulário longo. A ficha da pessoa e a matrícula têm três ou
   quatro assuntos cada; sem uma separação visível, o formulário vira uma parede de campos e quem
   preenche perde o lugar ao rolar. */
.cp-secao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cp-texto-suave);
  padding-bottom: 0.4rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--cp-borda);
}

/* ------------------------------------------------------------------------------------------------
   O ÍCONE DA SEÇÃO, numa pastilha.

   Foi cogitado um badge colorido, e ele seria pior: neste sistema badge já quer dizer SITUAÇÃO --
   ativa, trancada, vencida -- e pô-lo num título faria a tela ensinar duas gramáticas para a mesma
   forma. Um título não tem estado; ele nomeia.

   A pastilha resolve o que o badge resolveria -- dar peso e ponto de entrada ao título -- sem
   disputar significado. E o ícone é achado antes do texto: quem procura o endereço encontra o pino
   antes de ler "endereço", que é como se percorre uma ficha longa.

   Discreta de propósito: fundo em 10% da cor da marca. Cheia, cinco delas empilhadas na mesma
   ficha virariam um semáforo, e o olho pararia em cada uma como se fosse aviso.
   ------------------------------------------------------------------------------------------------ */
.cp-secao__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--cp-primaria) 10%, transparent);
  color: var(--cp-primaria);
  font-size: 0.75rem;
}

/* Cabeçalho de seção COM AÇÃO à direita.
   A linha de baixo passa a ser da faixa inteira: deixada no título, ela pararia onde o texto acaba
   e viraria um sublinhado, com o botão flutuando fora da divisão. */
.cp-secao-acao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* O h3 la dentro perde a propria linha: quem desenha a divisoria aqui e o cabecalho inteiro. */
  padding-bottom: 0.4rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--cp-borda);
}

.cp-secao-acao .cp-secao {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* Números que se comparam de coluna a coluna -- RM, RA, código de turma, lotação. Em fonte
   proporcional, "1/20" e "18/20" não alinham, e o olho precisa ler cada um em vez de varrer. */
.cp-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: 0.01em;
}

.cp-avatar-linha {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cp-borda);
  background: var(--cp-superficie);
}

.cp-foto-ficha {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cp-borda);
  background: var(--cp-superficie);
}

/* ABAS EM FORMATO DE BOTÃO.
   Os pills do Bootstrap desenham só o ATIVO -- os outros ficam texto solto, e três "botões" em que
   dois não parecem botão não se leem como um conjunto de escolhas: parecem um botão e dois links.
   Aqui os três ganham a borda e o fundo de um botão de contorno, e o ativo continua preenchido.
   Escopo próprio (.cp-abas) para isto não alcançar qualquer nav-pills que apareça depois. */
.cp-abas .nav-link {
  border: 1px solid var(--cp-borda);
  background: var(--cp-superficie);
  color: var(--cp-texto);
}

.cp-abas .nav-link:hover:not(.active) {
  border-color: var(--cp-borda-forte);
  background: var(--cp-fundo);
}

.cp-abas .nav-link.active {
  border-color: transparent;
}

/* A LOGOMARCA NÃO É UM RETRATO, e por isso não herda .cp-foto.
   Retrato é redondo e recortado -- `object-fit: cover` corta o que sobra, e num rosto centralizado
   isso não custa nada. Logomarca é quase sempre larga, e cortar sobras nela decapita a palavra:
   "COLÉGIO EXEMPLO" vira "LÉGIO EXEMP". Daí `contain`, que cabe a imagem inteira na caixa, e o
   canto reto, que é como a marca aparece no papel. */
.cp-logomarca {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio, 6px);
  background: var(--cp-fundo);
  padding: 4px;
  flex: 0 0 auto;
}

/* O esqueleto do avatar tem a FORMA do que vem: um retângulo no lugar de um círculo faz a linha
   "pular" quando a foto chega. */
.cp-esqueleto--avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  min-height: 34px;
}

/* ================================================================================================
   SELECT2 VESTINDO O FORM-SELECT DO BOOTSTRAP.

   O select2 não estiliza um <select>: ele esconde o campo e desenha um <span> no lugar, com a
   roupa do tema "default" -- outra altura, outra borda, outro raio, uma seta desenhada à mão.
   Enquanto essas medidas eram copiadas aqui, era uma corrida atrás do Bootstrap: bastava a
   densidade mudar num lado para o combo ficar um degrau mais alto que o campo ao lado, que é o
   tipo de desalinho que se vê sem saber o que se está vendo -- foi o que aconteceu com o bairro e
   o município do aluno, que vivem dentro de um input-group e ficavam altos.

   Agora a caixa desenhada RECEBE AS CLASSES DO CAMPO ORIGINAL -- `form-select form-select-sm`, via
   `selectionCssClass: ':all:'` em CP.combo. O que sobra para o CSS é tirar do caminho o que o tema
   do select2 pinta por cima: a altura fixa, a borda, o fundo e a seta própria. Medida, cor, raio e
   foco passam a ser os do Bootstrap -- os mesmos do <select> vizinho, por construção.

   Fundo, borda e raio aparecem repetidos abaixo: não são medidas novas, são as MESMAS três linhas
   que o bloco de .form-control/.form-select escreve lá em cima, reescritas porque o seletor do tema
   do select2 tem mais especificidade que a classe e venceria calado. Se aquelas mudarem, estas
   mudam junto -- é o único ponto deste arquivo em que isso é preciso lembrar.
   ================================================================================================ */
.select2-container--default .select2-selection--single.form-select {
  /* Flex para centrar o texto na altura que o padding do form-select define -- sem line-height
     fixo, que era o que precisava ser recalculado a cada mudança de densidade. */
  display: flex;
  align-items: center;
  height: auto;
  background-color: var(--cp-superficie);
  border: 1px solid var(--cp-borda-forte);
  border-radius: 8px;
}

.select2-container--default .select2-selection--single.form-select .select2-selection__rendered {
  /* O respiro já é o do form-select, e a sobra à direita é onde a seta dele mora. */
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  line-height: inherit;
  color: inherit;
}

.select2-container--default .select2-selection--single.form-select .select2-selection__placeholder {
  color: var(--cp-texto-suave);
}

/* A SETA É UMA SÓ: o form-select já desenha a dele no fundo, e o triângulo do select2 ficaria
   ao lado -- duas setas no mesmo campo. */
.select2-container--default .select2-selection--single.form-select .select2-selection__arrow {
  display: none;
}

/* O X DE LIMPAR VEM DEPOIS DO TEXTO. Ele e irmao do texto na marcacao do select2, e nao filho:
   numa caixa flex o `float: right` do tema deixa de valer e ele cairia na frente do nome -- lia-se
   "xJardim das Acacias". A ordem devolve o X para a direita, encostado na seta do form-select em
   vez de guardar lugar para a que sumiu. */
.select2-container--default .select2-selection--single.form-select .select2-selection__clear {
  order: 2;
  /* Sem respiro e sem entrelinha propria: e um <button>, e o que o navegador lhe da de fabrica o
     deixava 2px mais alto que a linha de texto -- alto o bastante para ESTICAR o campo. Um combo
     que se pode limpar nao pode ser mais alto que um que nao se pode. */
  height: auto;
  padding: 0;
  line-height: 1;
  margin-right: 0;
  color: var(--cp-texto-suave);
}

/* O FOCO É O MESMO DO CAMPO AO LADO: só a borda muda de cor, sem anel -- é o que .form-select:focus
   faz neste tema. E entra por CLASSE porque o <span> não recebe foco: quem recebe é a busca dentro
   da lista, então `:focus` aqui nunca casaria e o combo ficaria sem sinal nenhum ao ser aberto. */
.select2-container--default.select2-container--focus .select2-selection--single.form-select,
.select2-container--default.select2-container--open .select2-selection--single.form-select {
  border-color: var(--cp-primaria);
  box-shadow: none;
}

/* Desabilitado como um campo desabilitado deste tema: fundo da pagina, texto apagado. */
.select2-container--default.select2-container--disabled .select2-selection--single.form-select {
  background-color: var(--cp-fundo);
  color: var(--cp-texto-suave);
}

/* ================================================================================================
   O SELECT2 MULTIPLO -- as habilitacoes do professor, os recursos da sala.

   Ele desenha OUTRA marcacao que o simples: em vez de uma caixa com um texto, uma caixa que cresce
   com uma PILULA por escolha. Sem regra propria ela sai com a altura, a borda e o raio de fabrica
   ao lado de campos que seguem o Bootstrap -- o mesmo desalinho que o bloco acima existe para
   evitar no simples.

   A ALTURA E LIVRE, e nao fixa: com oito disciplinas escolhidas as pilulas ocupam tres linhas, e
   uma altura fixa esconderia as duas de baixo atras de uma rolagem de 4px.
   ================================================================================================ */
.select2-container--default .select2-selection--multiple {
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.25rem 0.4rem;
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda-forte);
  border-radius: var(--cp-raio);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--cp-primaria);
  box-shadow: none;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background: var(--cp-fundo);
}

/* A PILULA usa o tom suave da marca: ela e um valor escolhido, e nao um aviso. Cinza a faria
   parecer desabilitada; a cor cheia gritaria mais que o texto do formulario. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0.25rem 0.15rem 0;
  padding: 0.1rem 0.5rem;
  background: var(--cp-primaria-suave);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--cp-primaria);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* O X VOLTA AO FLUXO, e e disso que dependem o respiro e a ordem.
 *
 * O select2 o desenha em `position: absolute; left: 0` e reserva o lugar com `padding-left: 20px`
 * na pilula - duas metades de um arranjo so. A regra de padding acima apagou a reserva sem tirar
 * o botao do absoluto, e o × passou a ficar POR CIMA do comeco do nome.
 *
 * Fora do fluxo ele nao e item de flex: nem `gap` nem `order` o alcancavam. Em `static` os dois
 * voltam a valer, e o × vai para DEPOIS do nome - onde a convencao de pilula o poe. A ordem da
 * marcacao nao muda, entao o leitor de tela continua anunciando "Remover, Artes".
 */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: static;
  order: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cp-primaria);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.65;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: transparent;
  color: var(--cp-primaria);
  opacity: 1;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  order: 1;
  padding: 0;
}

/* O campo de digitar divide a caixa com as pilulas, e por isso ele nao tem moldura propria. */
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin: 0.15rem 0;
  color: var(--cp-texto);
  font-size: 0.875rem;
}

.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
  color: var(--cp-texto-apoio);
}

/* A OPCAO JA ESCOLHIDA CONTINUA NA LISTA, apagada: some-la faria a lista encurtar a cada escolha,
   e a pessoa perderia o lugar onde estava lendo. */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--cp-fundo);
  color: var(--cp-texto-suave);
}

/* SELECT2 DENTRO DE INPUT-GROUP.

   O select2 substitui o <select> por dois <span> aninhados, e o input-group do Bootstrap só sabe
   esticar o filho direto. Sem estas regras o campo encolhe para o tamanho do texto e o botão ao
   lado fica no meio da linha.

   O caminho inteiro vira flex -- container, embrulho e caixa -- para que a altura ATRAVESSE os
   dois <span> até a borda que se vê. Com `height: 100%` no lugar disso, o percentual media a caixa
   por fora e ela terminava 2px mais alta que o botão vizinho: pouco para se nomear, o bastante
   para a linha parecer torta.

   O raio da direita é zerado à mão porque o Bootstrap o zeraria no filho direto -- que aqui é o
   container do select2, e não a caixa que tem a borda. */
.input-group > .select2-container {
  display: flex;
  flex: 1 1 auto;
  width: 1% !important;
}

.input-group > .select2-container > .selection {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.input-group > .select2-container .select2-selection {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-dropdown {
  background: var(--cp-superficie);
  border-color: var(--cp-borda);
  color: var(--cp-texto);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--cp-primaria);
  color: var(--cp-sobre-primaria);
}

/* CADA OPÇÃO EM UMA LINHA, e isso conserta a POSIÇÃO da lista, não só o texto dela.
   O select2 mede a altura da lista antes de lhe dar a largura definitiva do campo. Numa largura
   provisória menor, um rótulo como "Fulano de Tal - 000.000.000-00" quebra em três linhas, e a
   lista é medida quase três vezes mais alta do que vai ficar. Com essa altura inflada ele conclui
   que não cabe abaixo do campo, vira a lista para cima -- e a posiciona usando a mesma altura
   errada, deixando-a solta no meio do formulário, longe do campo que a abriu.
   Sem quebra, a altura medida é a altura final. */
.select2-results__option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--cp-superficie);
  color: var(--cp-texto);
  border: 1px solid var(--cp-borda);
  border-radius: 0.375rem;
}

/* ----------------------------------------------------------------------------------------------
   LINHA DO TEMPO DA MATRÍCULA
   A vida do vínculo na ordem em que aconteceu. Campos soltos diriam o estado de hoje; a linha diz
   como se chegou nele -- que é a pergunta que a secretaria faz quando algo parece errado.
   ---------------------------------------------------------------------------------------------- */
.cp-linha-tempo {
  position: relative;
  padding-left: 1.25rem;
}

.cp-linha-tempo::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--cp-borda);
}

.cp-tempo-item {
  position: relative;
  padding: 0.75rem 0 0.75rem 0.5rem;
  border-bottom: 1px solid var(--cp-borda);
}

.cp-tempo-item:last-child { border-bottom: 0; }

.cp-tempo-item::before {
  content: '';
  position: absolute;
  left: -1.05rem;
  top: 1.1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cp-superficie);
  border: 2px solid var(--cp-borda);
}

/* A etapa vigente ganha o ponto preenchido: qual delas vale hoje é a primeira coisa que se procura
   ao abrir o histórico. */
.cp-tempo-item--atual::before {
  background: var(--cp-primaria);
  border-color: var(--cp-primaria);
}

.cp-movimentos {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  font-size: 0.875rem;
}

.cp-movimentos li {
  padding: 0.15rem 0;
  border-left: 2px solid var(--cp-borda);
  padding-left: 0.6rem;
  margin-left: 0.1rem;
}

/* ----------------------------------------------------------------------------------------------
   CONFIGURAÇÕES
   ---------------------------------------------------------------------------------------------- */

/* Três colunas: o que é, o valor, e o que fazer com ele. Em telas estreitas viram três linhas --
   o campo precisa da largura inteira para um select de texto longo caber sem truncar. */
.cp-config {
  display: grid;
  grid-template-columns: 1fr 16rem auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-top: 1px solid var(--cp-borda);
}

.cp-config:first-of-type { border-top: 0; }

.cp-config__texto { min-width: 0; }

.cp-config__acoes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cp-config code {
  font-size: 0.8125rem;
  background: var(--cp-fundo);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

/* A PRÉVIA fica destacada do resto do bloco: ela é o resultado, e não mais um campo. Com o mesmo
   peso visual dos controles, ela se lê como algo a preencher. */
.cp-config__previa {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: var(--cp-primaria-suave);
  border-radius: 0.5rem;
}

.cp-config__previa strong { font-size: 1.05rem; }

@media (max-width: 62rem) {
  .cp-config {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* ----------------------------------------------------------------------------------------------
   RODAPÉ
   ---------------------------------------------------------------------------------------------- */

/* O RODAPÉ FIXO, com a versão publicada.

   `sticky` no pé da coluna de conteúdo, e não `fixed`: o `fixed` atravessa a lateral e exige ajustar a
   largura à mão, recolhida ou não. Numa tela curta o margin-top: auto o empurra para o fim da coluna; numa
   longa, o sticky o prende ao pé da janela enquanto se rola. A margem negativa anula o padding da coluna,
   para a faixa ir de borda a borda. A altura é um token porque o "voltar ao topo" e o convite de
   notificação sobem por ela. */
.cp-rodape {
  position: sticky;
  bottom: 0;
  z-index: 1020;
  margin: auto -1.5rem -1.5rem;
  min-height: calc(var(--cp-rodape-altura) + env(safe-area-inset-bottom, 0px));
  padding: 0 1.5rem env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--cp-borda);
  background: var(--cp-superficie);
  color: var(--cp-texto-apoio);
  font-size: 0.75rem;
}

/* tabular-nums: sem isso "1.0.0+886e78a" e "1.0.0+f4fa9a3" saem com larguras diferentes, e a linha
   dança a cada deploy. */
.cp-rodape__versao {
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

/* A coluna de conteúdo precisa ser uma coluna flex para o margin-top: auto do rodapé ter contra o
   que empurrar. */
.cp-conteudo {
  display: flex;
  flex-direction: column;
}

/* O filho direto que não é o rodapé não deve esticar: sem isto, o primeiro bloco da tela cresceria
   para ocupar a altura toda e o conteúdo ficaria espalhado. */
.cp-conteudo > *:not(.cp-rodape) { flex: 0 0 auto; }

/* ----------------------------------------------------------------------------------------------
   DETALHE DA MATRÍCULA

   Duas colunas: o VÍNCULO à esquerda, o CONTEXTO à direita. A esquerda responde "o que é esta
   matrícula"; a direita, "como ela chegou aqui" e "quem é a pessoa". Empilhado, o contexto ficaria
   abaixo da dobra e ninguém rolaria para vê-lo.
   ---------------------------------------------------------------------------------------------- */
.cp-detalhe {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 62rem) {
  .cp-detalhe { grid-template-columns: 1fr; }
}

.cp-detalhe__cartao {
  border: 1px solid var(--cp-borda);
  border-radius: 0.75rem;
  padding: 1.25rem;
  background: var(--cp-superficie);
}

.cp-detalhe__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--cp-borda);
}

.cp-detalhe__nome {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

/* LISTA DE DEFINIÇÃO em duas colunas: rótulo à esquerda com largura fixa, valor à direita. A
   largura fixa é o que alinha os valores numa coluna só -- com largura automática, cada linha
   começaria num lugar e o olho perderia a régua ao descer. */
.cp-defs { display: grid; gap: 0.55rem; }

.cp-def {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
}

.cp-def__rotulo { color: var(--cp-texto-suave); }

.cp-def__valor { min-width: 0; }

@media (max-width: 48rem) {
  .cp-def { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* A MESMA lista, agora com campo no lugar do valor -- é o formulário da matrícula vestido com o
   desenho do detalhe, para que cadastrar e conferir sejam a mesma leitura.

   Duas diferenças, e as duas por causa da altura do campo: o alinhamento sai de baseline (que com
   um input de 38px joga o rótulo para o meio dele) e vai para o topo, com um respiro que põe o
   rótulo na linha do texto dentro do campo; e a folga entre linhas cresce, porque campos
   encostados leem como um bloco só em vez de perguntas separadas. */
.cp-defs--formulario { gap: 0.9rem; }

.cp-defs--formulario .cp-def { align-items: start; }

.cp-defs--formulario .cp-def__rotulo { padding-top: 0.45rem; }

/* A ajuda embaixo do campo não repete a folga do Bootstrap: dentro desta grade ela já vem depois
   de um campo, e o espaço dobrado separava a explicação da pergunta que ela explica. */
.cp-defs--formulario .form-text { margin-top: 0.25rem; }

@media (max-width: 48rem) {
  .cp-defs--formulario .cp-def__rotulo { padding-top: 0; }
}

.cp-progresso {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cp-borda);
}

.cp-progresso__texto {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.cp-detalhe__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cp-borda);
}

/* ETIQUETA: o código curto que identifica a turma ou o ano. Fonte tabular porque eles se comparam
   de linha a linha. */
.cp-etiqueta {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 0.35rem;
  background: var(--cp-atencao-suave);
  color: var(--cp-texto);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cp-etiqueta--marca {
  background: var(--cp-primaria);
  color: var(--cp-sobre-primaria);
}

/* O código da turma vestido com a cor do TURNO. Quem varre uma lista de turmas procura "as da
   manhã" antes de procurar um código específico, e a cor responde antes da leitura.

   Não é cor sozinha: o turno vem escrito por extenso ao lado, entre parênteses. A cor apressa
   quem já conhece a convenção e não esconde nada de quem não a conhece -- inclusive de quem não
   distingue estes quatro tons. */
/* A CONTAGEM dentro do módulo selecionado.

   A linha ativa fica azul de ponta a ponta, e os dois selos que moram nela nasceram para fundo
   claro: o verde de "2 de 4" é verde translúcido com texto verde, e sobre o azul ele vira um
   borrão. Some justamente no módulo em que a pessoa está mexendo -- o único cuja contagem ela
   está olhando.

   Aqui os dois trocam de roupa pela mesma regra: fundo sólido claro, texto azul escuro. Vale para
   o selo verde e para a pílula cinza, senão a mesma linha teria dois tratamentos. */
#cp-modulos .list-group-item.active .cp-selo,
#cp-modulos .list-group-item.active .badge {
  background: var(--cp-sobre-selecao);
  color: var(--cp-selecao-texto);
}

.cp-etiqueta--manha {
  background: var(--cp-atencao-suave);
  color: var(--cp-atencao);
}

.cp-etiqueta--tarde {
  background: var(--cp-primaria-suave);
  color: var(--cp-primaria);
}

.cp-etiqueta--noite {
  background: color-mix(in srgb, var(--cp-texto) 12%, transparent);
  color: var(--cp-texto);
}

.cp-etiqueta--integral {
  background: color-mix(in srgb, var(--cp-sucesso) 14%, transparent);
  color: var(--cp-sucesso);
}

/* PAINÉIS da direita: cada um responde uma pergunta, e o título fica preso no topo do cartão. */
.cp-painel {
  border: 1px solid var(--cp-borda);
  border-radius: 0.75rem;
  background: var(--cp-superficie);
  margin-bottom: 1rem;
  overflow: hidden;
}

.cp-painel__titulo {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cp-borda);
}

.cp-painel__item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cp-borda);
}

/* ---------------------------------------------------------------------------------------------
   SELETOR DE ANO LETIVO -- o contexto da tela de matrículas, na barra de ações.

   Rótulo em cima e campo estreito embaixo, ocupando a altura dos botões ao lado: ele não é um
   botão, e alinhá-lo como se fosse faria parecer que clicar nele executa alguma coisa.

   O yearpicker desenha um popup próprio; estas regras só vestem o campo e devolvem ao popup as
   cores do tema, que ele não tem como conhecer.
   --------------------------------------------------------------------------------------------- */
.cp-ano {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-right: 0.25rem;
}

.cp-ano__rotulo {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cp-texto-suave);
  line-height: 1;
}

/* Largura de quatro dígitos e não mais: o campo aceita só um ano, e um campo largo promete que
   cabe outra coisa. Cursor de clique porque ele é readonly -- sem isso, parece desabilitado. */
.cp-ano__campo {
  width: 5.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  background: var(--cp-superficie);
}

.yearpicker-container {
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda);
  border-radius: 0.75rem;
  box-shadow: var(--cp-sombra) 0 8px 24px;
  color: var(--cp-texto);
  z-index: 1060;
}

.yearpicker-header { border-bottom: 1px solid var(--cp-borda); }

.yearpicker-year li:hover { background: var(--cp-primaria-suave); }

.yearpicker-year li.selected {
  background: var(--cp-primaria);
  color: var(--cp-sobre-primaria);
}

/* RESPIRO no corpo do painel de ETAPAS, e só nele.
   Os itens da trilha não têm risco embaixo -- é o que emenda os traços laterais num fio contínuo --,
   então o primeiro encostava no título e o último na borda de baixo do cartão, com o fio saindo do
   nada e terminando no nada. Nos outros painéis o risco horizontal já separa, e um padding aqui
   dobraria a folga.

   :has() em vez de uma classe no container porque quem monta a lista são dois lugares diferentes --
   a prévia do formulário e o detalhe --, e a regra é sobre o que a lista CONTÉM, não sobre quem a
   escreveu. */
.cp-painel__corpo:has(.cp-painel__item--trilha) { padding: 0.5rem 0; }

.cp-painel__item:last-child { border-bottom: 0; }

/* TRILHA: cada etapa ganha um risco à esquerda, e as etapas em sequência formam uma linha contínua
   descendo o cartão. É o desenho que diz "isto é um histórico" antes de qualquer palavra ser lida --
   uma lista sem o risco parece três registros soltos que por acaso estão no mesmo lugar.

   O risco só vale para as etapas: nos painéis de histórico e do aluno não há sequência nenhuma. */
.cp-painel__item--trilha {
  /* AFASTADO da borda do cartão, e sem risco embaixo.
     Colado na borda, o traço de 3px encosta na borda do cartão e some dentro dela -- foi o que
     aconteceu na primeira tentativa: a etapa vigente aparecia marcada e as outras não, como se o
     desenho estivesse quebrado. Afastado, a linha vira uma coluna própria descendo o cartão.
     E sem o risco horizontal embaixo: com as etapas encostadas, os traços laterais se emendam num
     fio contínuo, que é o que faz três registros lerem como uma sequência. */
  border-bottom: 0;
  border-left: 3px solid var(--cp-borda-forte);
  margin-left: 1.25rem;
  padding-left: 0.75rem;
}

/* A VIGENTE em verde, e não na cor da marca: a pergunta que se faz ao abrir a lista é "qual vale
   hoje", e verde já responde isso em todo o resto da tela. */
.cp-painel__item--atual {
  border-left-color: var(--cp-sucesso);
}

/* ----------------------------------------------------------------------------------------------
   O CABECALHO DA TELA: o titulo a esquerda, a acao a direita.

   UMA LINHA, E NAO UM CARTAO - o mesmo arranjo dos projetos irmaos. O `margin-bottom` e o que
   separa o botao "Novo" da tabela logo abaixo: esta regra morava num bloco de CSS herdado que foi
   podado junto com o dominio da grade, e sem ela o botao encostava na grade em todas as telas.
   ---------------------------------------------------------------------------------------------- */
.cp-barra-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* ================================================================================================
   DENSIDADE — o tamanho "sm" do Bootstrap como padrão do sistema inteiro.

   O pedido foi form-control-sm, form-select-sm, input-group-sm e btn-sm em todo o projeto. Está
   feito aqui, e não classe por classe na marcação, por três razões concretas:

   1. UM TERÇO DOS CONTROLES NÃO ESTÁ NA MARCAÇÃO. Quarenta são escritos em JavaScript, e outros
      tantos nascem prontos do select2, do DataTables e do SweetAlert -- a lista de opções, o
      seletor de "quantos por página", os botões de paginação, os botões dos diálogos. Nenhum
      deles receberia a classe, e a tela ficaria com dois tamanhos convivendo.

   2. O QUE SE QUER É UMA DECISÃO, não duzentas repetições dela. Escrito assim, o dia em que a
      densidade mudar de ideia -- ou ganhar um modo confortável para telas de toque -- é um bloco
      que muda, e não duzentos lugares onde alguém vai esquecer três.

   3. As classes -sm continuam funcionando. Onde já existem, passam a não mudar nada -- pedem
      exatamente estas medidas.

   As medidas são as do Bootstrap para o tamanho "sm": 0.25rem/0.5rem de respiro e 0.875rem de
   corpo. Não inventei número nenhum: um sistema com espaçamento próprio deixa de casar com os
   componentes de terceiros que ele usa.
   ================================================================================================ */

/* Botões por variável, que é como o Bootstrap 5.3 os monta -- assim .btn-lg continua maior e
   .btn-sm continua válido, em vez de brigarem com uma altura fixa escrita por cima. */
.btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
}

.form-control,
.form-select {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
}

.form-control {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* A seta do select precisa do espaço dela: encurtando o padding sem mover o fundo, o texto passa
   por baixo do triângulo. */
.form-select {
  padding-left: 0.5rem;
  padding-right: 2rem;
  background-position: right 0.5rem center;
}

.input-group-text {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* A área de texto respira um pouco mais que um campo de uma linha: nela o conteúdo é o que se lê,
   e não o rótulo acima. */
textarea.form-control { padding: 0.375rem 0.5rem; }

.form-check-input { margin-top: 0.2rem; }

.form-label {
  margin-bottom: 0.2rem;
  font-size: 0.8125rem;
}

.form-text {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  line-height: 1.35;
}

/* O ESPAÇO ENTRE UM CONTROLE E O PRÓXIMO, dentro de formulário e de modal.

   `!important` porque .mb-3 é utilitário do Bootstrap e já vem com um -- sem ele, esta linha não
   tem como vencer, e utilitário é justamente o que se escreve para vencer. Fora de formulário a
   margem continua a de sempre: ali ela separa blocos, e não campos. */
form .mb-3,
.modal-body .mb-3 { margin-bottom: 0.75rem !important; }

form .mb-2,
.modal-body .mb-2 { margin-bottom: 0.5rem !important; }

.modal-body { padding: 1rem; }

.modal-footer,
.modal-header { padding: 0.75rem 1rem; }

/* A CAIXA do select2 não aparece aqui: ela veste `form-select form-select-sm` e já é medida pelas
   regras acima, junto com todo campo do sistema. O que resta é o que o select2 desenha FORA dela
   -- a lista, que vive pendurada no body ou no modal e não recebe classe do Bootstrap nenhuma. */
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.select2-results__option { font-size: 0.875rem; }

/* Os botões do SweetAlert usam .btn deste tema e já herdam o tamanho; o que sobra é o respiro
   interno do diálogo, que foi desenhado para botões maiores. */
.swal2-actions { margin-top: 0.75rem; }

/* ================================================================================================
   OS CARTOES DE MODULO, no painel principal.

   Sao a unica porta para as areas proprias, e por isso eles tem de parecer PORTA: superficie
   inteira clicavel, icone grande a esquerda e a seta de "abre em outra aba" a direita. Um item de
   lista com um link no meio do texto seria mais barato de escrever e pediria mira para acertar.
   ================================================================================================ */
/* Os cartoes ABREM o painel, entao o respiro fica embaixo: e o que separa as portas do que a tela
   tem a dizer sobre a organizacao. No fim da pagina era o contrario, e a regra mudou de lado junto
   com eles. */
.cp-secao-modulos { margin-bottom: 1.5rem; }

.cp-modulo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 100%;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--cp-borda);
  transition: border-color var(--cp-transicao), background var(--cp-transicao);
}

.cp-modulo:hover,
.cp-modulo:focus-visible {
  border-color: var(--cp-primaria);
  background: var(--cp-primaria-suave);
  color: inherit;
}

/* O icone num quadrado proprio: ele identifica o modulo de relance, e solto no meio do texto teria
   o mesmo peso visual de um marcador de lista. */
.cp-modulo__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--cp-raio);
  background: var(--cp-primaria-suave);
  color: var(--cp-primaria);
  font-size: 1.125rem;
}

.cp-modulo__texto {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.cp-modulo__nome { font-weight: 600; }

/* Discreta ate o hover: ela informa, nao chama. */
.cp-modulo__seta {
  margin-left: auto;
  flex: none;
  font-size: 0.75rem;
  color: var(--cp-texto-suave);
}

.cp-modulo:hover .cp-modulo__seta { color: var(--cp-primaria); }

/* O TRACO no lugar do numero, no painel de um modulo que ainda nao apura nada. Fica na altura e na
   posicao da figura que vai chegar -- e nao a direita, como .cp-numero, que existe para coluna de
   tabela: aqui o cartao tem um numero so, e ele mora a esquerda, onde o rotulo comeca. */
.cp-sem-dado {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--cp-texto-suave);
}

/* ================================================================================================
   OS CARTOES DO PAINEL -- o mesmo desenho das fichas do painel do CpFront, e as mesmas cores: os dois
   projetos leem o mesmo tokens.css, entao --cp-serie-1, -2 e -3 sao literalmente a mesma cor la e
   aqui.

   FAIXA DE 3px NA LATERAL, e nao o cartao inteiro colorido: fundo colorido obriga a recalcular o
   contraste do texto por cima, e o texto e o que precisa ser lido.

   CP-CARTAO, E NAO CP-FICHA como no CpFront: aqui `.cp-ficha` JA EXISTE, e e a `row` do formulario
   de cadastro -- copiar o nome junto com o desenho deu a essa row um `gap`, e tres colunas de 33%
   mais o gap nao cabem em 100%: a identificacao quebrava para baixo da foto, e o modal parecia
   quebrado. Nome de classe e API: copiar o CSS de outro projeto nao pode arrastar o namespace dele.
   ================================================================================================ */
.cp-cartao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  background: var(--cp-superficie);
  padding: 0.75rem 0.875rem;
  height: 100%;
}

/* `min-width: 0` deixa o texto encolher em vez de empurrar o icone para fora do cartao. */
.cp-cartao__texto {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * O ICONE: coluna propria, inteiro e legivel.
 *
 * Ele responde "de que e este cartao" sem obrigar a ler o rotulo -- e para isso precisa ser VISTO.
 * A opacidade de marca d'agua funciona sobre fundo colorido; sobre superficie clara ela some, e um
 * icone que mal se ve nao ajuda ninguem.
 */
.cp-cartao__icone {
  flex: 0 0 auto;
  font-size: 1.5rem;
  opacity: 0.55;
  pointer-events: none;
}

.cp-cartao__faixa {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--cp-raio) 0 0 var(--cp-raio);
}

/* No painel do modulo a ficha e PORTA, e nao indicador: no lugar do numero vai o nome da tela, e o
   cartao inteiro e o alvo do clique -- um alvo desse tamanho nao pede mira. */
.cp-cartao--porta {
  color: inherit;
  text-decoration: none;
  transition: border-color var(--cp-transicao), background var(--cp-transicao);
}

.cp-cartao--porta:hover,
.cp-cartao--porta:focus-visible {
  border-color: var(--cp-primaria);
  background: var(--cp-primaria-suave);
  color: inherit;
}

.cp-cartao__titulo {
  display: block;
  font-weight: 600;
  line-height: 1.25;
}

/* O NUMERO dentro do cartao: o mesmo corpo das fichas do CpFront (fs-4), e tabular para que dois
   cartoes lado a lado alinhem os digitos em vez de dancar conforme o valor. */
.cp-cartao__numero {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* O esqueleto ocupa o lugar do numero antes de ele chegar -- largura de tres digitos, que e o que
   quase todo total desta tela tem. */
.cp-esqueleto.cp-cartao__numero {
  width: 3rem;
  height: 1.5rem;
  border-radius: var(--cp-raio);
}

/*
  O RETRATO DO ALUNO ESCOLHIDO, ao lado do select da matricula.

  Maior que o avatar de linha da grade -- 3rem contra 2 --, porque aqui ele nao acompanha um nome
  numa lista: ele E a conferencia. Do tamanho da grade, o rosto vira uma mancha que nao responde
  "e este mesmo?".

  A ALTURA CASA COM O INPUT-GROUP ao lado: menor, a linha desalinha; maior, ela empurra o campo
  para baixo e a etiqueta deixa de ficar sobre ele.
*/
/* Cresceu quando o bloco do aluno virou duas colunas: em 3rem o rosto ficava do tamanho de um
   avatar de lista -- reconhecivel de relance, mas nao o bastante para CONFERIR quem se matricula. */
/* MESMO TAMANHO da `.cp-ficha-aluno__foto`, la embaixo: as duas telas mostram o mesmo rosto para a
   mesma pergunta -- "e este mesmo?" --, e dois tamanhos fariam a interface parecer montada por
   pessoas diferentes. Mudou aqui, muda la. O que difere e so o recorte: quadrado arredondado na
   escolha, redondo na ficha. */
.cp-retrato-escolhido {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.5rem;
  object-fit: cover;
  border: 1px solid var(--cp-borda);
  background: var(--cp-superficie-2);
  flex: 0 0 auto;
}

/* O mesmo retrato, no tamanho de quem abriu a ficha para OLHAR -- e nao para conferir de relance. */
.cp-retrato-ficha {
  width: 6rem;
  height: 6rem;
  border-radius: 0.75rem;
  object-fit: cover;
  border: 1px solid var(--cp-borda);
  background: var(--cp-superficie-2);
  flex: 0 0 auto;
}

/* ==============================================================================================
   VOLTAR AO TOPO
   ============================================================================================== */

/*
  DISCRETO E O REQUISITO: ele divide o canto inferior direito com o ultimo botao de todo formulario
  e com os avisos do sistema. Redondo, pequeno e translucido, ele fica legivel sem disputar
  atencao -- e ganha contraste so quando o ponteiro chega.

  z-index ABAIXO do modal (1055 no Bootstrap) e do toast: um botao de rolagem por cima de uma
  confirmacao seria um clique que a pessoa nao quis dar.
*/
.cp-ao-topo {
  position: fixed;
  right: 1.25rem;
  bottom: calc(var(--cp-rodape-altura) + 1.25rem);
  z-index: 1030;

  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--cp-borda);
  background: color-mix(in srgb, var(--cp-superficie-2) 88%, transparent);
  color: var(--cp-texto-apoio);

  display: none;
  align-items: center;
  justify-content: center;

  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  opacity: 0.55;
}

.cp-ao-topo--visivel { display: flex; }

.cp-ao-topo:hover,
.cp-ao-topo:focus-visible {
  opacity: 1;
  color: var(--cp-texto);
  border-color: var(--cp-borda-forte);
}

/* Numa tela estreita ele sobe um pouco: no celular o canto inferior e onde o polegar descansa. */
@media (max-width: 48rem) {
  .cp-ao-topo { right: 0.75rem; bottom: 4.5rem; }
}

/* Quem pede menos movimento vai ao topo DIRETO -- o comportamento suave e ignorado no JS. */
@media (prefers-reduced-motion: reduce) {
  .cp-ao-topo { transition: none; }
}

@media print {
  .cp-ao-topo { display: none !important; }
}

/* ==============================================================================================
   O cupom da NFC-e (DANFE NFC-e), na bobina de 80 mm
   ============================================================================================== */

/* A MESA E O PAPEL: na tela, o cupom e uma tira branca no meio - e o que vai sair da impressora termica, nos dois
   temas. As cores sao tokens proprios (tokens.css), que o tema escuro nao redefine de proposito. */
.cp-cupom-mesa {
  display: flex;
  justify-content: center;
  padding: 1rem 0 2rem;
}

.cp-cupom {
  width: 80mm;
  max-width: 100%;
  padding: 4mm 3mm;
  background: var(--cp-cupom-papel);
  color: var(--cp-cupom-tinta);
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.35;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cp-cupom-tinta) 25%, transparent);
}

.cp-cupom hr {
  margin: 2mm 0;
  border: 0;
  border-top: 1px dashed var(--cp-cupom-fio);
  opacity: 1;
}

.cp-cupom p { margin: 0; }
.cp-cupom__centro { text-align: center; }
.cp-cupom__direita { text-align: right; }
.cp-cupom__forte { font-weight: 700; }

.cp-cupom__itens { width: 100%; border-collapse: collapse; }
.cp-cupom__itens th, .cp-cupom__itens td { padding: 0; vertical-align: top; font-weight: 400; }
.cp-cupom__itens th { font-weight: 700; }
.cp-cupom__itens td:first-child, .cp-cupom__itens th:first-child { padding-right: 2mm; white-space: nowrap; }
.cp-cupom__conta td { padding-bottom: 1mm; }

.cp-cupom__totais { margin: 0; }
.cp-cupom__totais > div { display: flex; justify-content: space-between; gap: 2mm; }
.cp-cupom__totais dt, .cp-cupom__totais dd { margin: 0; font-weight: inherit; }
.cp-cupom__cabecalho { margin-top: 1mm; font-weight: 700; }

/* A URL QUEBRA EM QUALQUER PONTO (nao tem espaco, e estouraria a bobina). A CHAVE NAO: ela ja vem em grupos de 4, e
   quebrar dentro de um grupo ("000" numa linha, "0" na outra) faz quem digita a chave errar a contagem. */
.cp-cupom__url { word-break: break-all; }
.cp-cupom__chave { font-size: 12px; font-weight: 700; margin-bottom: 2mm; }

/* O QR Code com lado fixo em milimetros, contando a zona de silencio (4 modulos brancos, que vem no proprio SVG): o
   modulo fica perto de 0,7 mm, que a camera do celular pega a um palmo, na tela e no papel termico. crispEdges: sem
   ele o navegador suaviza a borda de cada modulo, e na impressora termica o cinza da borda vira ruido. */
.cp-cupom__qr { display: flex; justify-content: center; }
.cp-cupom__qr svg { width: 40mm; height: 40mm; shape-rendering: crispEdges; }

/* NA IMPRESSAO, SO O CUPOM. O layout do app (lateral, barra, rodape) e a faixa de acoes desta tela somem, e o cupom
   vai para o canto da folha, sem sombra: a impressora termica recebe exatamente os 80 mm. */
@media print {
  @page { size: 80mm auto; margin: 0; }

  .cp-sem-impressao { display: none !important; }
  .cp-cupom-mesa { display: block; padding: 0; }

  .cp-cupom {
    width: 80mm;
    box-shadow: none;
  }

  /* O FUNDO DA FOLHA E O PAPEL: no tema escuro o corpo da pagina imprimia escuro abaixo do cupom. */
  body:has(.cp-cupom) { background: var(--cp-cupom-papel) !important; }
}

/* ==============================================================================================
   As telas de administração
   ============================================================================================== */

/* Nenhum valor de cor aqui: tudo sai de tokens.css. É o que faz o tema escuro ser troca de
   variável em vez de reescrita -- e o que a conferência de aceite procura. */

.cp-avatar-tabela {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  color: var(--cp-texto-apoio);
}

/* O flex precisa DISSO para deixar o filho encolher. Sem min-width: 0, um nome longo estica a
   célula em vez de ser truncado -- e a tabela ganha barra horizontal por causa de um e-mail. */
.min-w-0 {
  min-width: 0;
}

/* ---------------------------------------------------------------------------------------------
   Perfis e o quadro de permissões
   --------------------------------------------------------------------------------------------- */

.cp-lista-perfis,
.cp-quadro-perfis {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cp-quadro-perfis {
  max-height: 12rem;
  overflow-y: auto;
}

.cp-perfil-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  transition: var(--cp-transicao);
}

.cp-perfil-item:hover {
  border-color: var(--cp-borda-forte);
}

/* O perfil escolhido se distingue por FUNDO e BORDA, e não por engrossar o texto: peso é
   hierarquia, e uma lista inteira em semibold não destaca nada. */
.cp-perfil-item--ativo {
  border-color: var(--cp-primaria);
  background: var(--cp-primaria-suave);
}

.cp-perfil-nome {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}

.cp-quadro-permissoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  max-height: 28rem;
  overflow-y: auto;
}

.cp-grupo-permissoes {
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  padding: 0.75rem;
  margin: 0;
  min-width: 0;
}

.cp-grupo-permissoes__titulo {
  float: none;
  width: auto;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

/* Marcar o grupo inteiro é um BOTÃO, e não um checkbox extra. Um checkbox de grupo precisaria de
   um terceiro estado para "alguns marcados" -- e um checkbox meio marcado é a coisa que ninguém
   entende na primeira vez. */
.cp-marcar-grupo {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--cp-primaria);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------
   Notificação
   --------------------------------------------------------------------------------------------- */

.cp-lista-aparelhos {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cp-aparelho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
}

.cp-desfechos {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
}

/*
   O CONVITE FICA NO RODAPÉ, e não no alto.

   No alto ele empurra o conteúdo para baixo a cada carregamento de página, e a pessoa perde a
   linha que estava lendo. No rodapé ele fica FORA do fluxo -- e sai de vista com um gesto.
*/
.cp-convite-push {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(var(--cp-rodape-altura) + 1rem);
  z-index: 1040;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;

  padding: 0.875rem 1rem;
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda-forte);
  border-radius: var(--cp-raio);
  box-shadow: var(--cp-sombra);
}

@media (min-width: 40rem) {
  .cp-convite-push {
    left: auto;
    max-width: 34rem;
  }
}

.cp-convite-push__texto {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--cp-texto);
}

.cp-convite-push__acoes {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------------------------
   O olho de mostrar a senha
   --------------------------------------------------------------------------------------------- */

/* Discreto de proposito: ele fica ao lado de TODO campo de senha, inclusive na tela de entrada,
   e um botao chamativo ali competiria com o de entrar -- que e o que a pessoa foi fazer. */
.cp-olho {
  border-color: var(--cp-borda);
  color: var(--cp-texto-suave);
}

.cp-olho:hover,
.cp-olho:focus {
  background: var(--cp-fundo);
  border-color: var(--cp-borda-forte);
  color: var(--cp-texto);
}

/* ============================================================================================
   A busca do menu.
   ============================================================================================ */

/*
   O RECUO DE CIMA REPOE O QUE ESTE BLOCO TIROU.

   O cartao do usuario tem `margin-bottom: 0` - o respiro dele vinha do `padding-top: 0.75rem` do
   <nav> logo abaixo. A busca entrou ENTRE os dois e, com recuo zero em cima, o campo colou na
   borda do cartao.

   Os 0.75rem aqui sao os mesmos do <nav>: a folga nao mudou de tamanho, mudou de dono.

   O RECUO LATERAL ACOMPANHA OS ITENS DO MENU (0.625rem), e nao o cartao do usuario (0.875rem): o
   campo filtra os itens, e a borda esquerda dele alinhada com a deles e o que diz que um comanda
   os outros.

   E O ESPACO E MARGEM, E NAO RECUO INTERNO - isso nao e estilo de escrita.

   Este elemento e o CONTEXTO DE POSICIONAMENTO da lupa e do X, que sao absolutos. Com recuo
   interno, a caixa dele e maior que a do campo, e os dois icones passam a ser posicionados contra
   uma borda que nao e a que se ve: encostar ou afastar o campo do bloco de cima mexeria em onde a
   lupa cai DENTRO dele.

   Com margem, a caixa deste elemento E a do campo - o input e o unico filho em fluxo. Os offsets
   dos icones passam a ser medidos da borda que eles precisam respeitar, e mudar o espacamento em
   volta deixa de ter efeito colateral nenhum.
*/
.cp-sidebar__busca {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0.75rem 0.625rem 0.5rem;
  flex: none;
}

/* A LUPA E DECORACAO E NAO BOTAO: quem busca digita, e um icone clicavel ali prometeria uma acao
   que nao existe. Por isso ela e `aria-hidden` no gabarito e `pointer-events: none` aqui - sem
   isto, clicar nela nao focaria o campo, e o clique cairia no nada. */
.cp-sidebar__busca-lupa {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;

  /* A MESMA TINTA DO PLACEHOLDER, e declarada, e nao herdada: herdando, ela vinha da cor do bloco
     e nao da do campo, e saia num tom diferente do "Buscar no menu" ao lado. Cor e opacidade sao as
     da regra ::placeholder logo abaixo - mude as duas juntas. */
  color: var(--cp-texto);
  opacity: 0.5;
  pointer-events: none;
}

.cp-sidebar__busca-campo {
  width: 100%;
  padding: 0.375rem 1.75rem 0.375rem 2rem;
  font-size: 0.8125rem;
  color: var(--cp-texto);
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 0.375rem;
}

/* A COR DO PLACEHOLDER VEM DO PROPRIO CAMPO, e nao do token de texto suave: a lateral carrega o
   tema escuro por conta propria, e o token calculado no tema da PAGINA sairia escuro sobre escuro
   no tema claro - o mesmo defeito que o titulo de grupo ja teve. */
.cp-sidebar__busca-campo::placeholder {
  color: currentColor;
  opacity: 0.5;
}

.cp-sidebar__busca-campo:focus {
  outline: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  outline-offset: 1px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* O CENTRO VERTICAL E DECLARADO, e nao herdado do `align-items` do pai: elemento absoluto sai do
   fluxo, e o alinhamento do flex nao o alcanca de forma confiavel entre navegadores. */
.cp-sidebar__busca-limpar {
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 0.125rem;
  font-size: 0.75rem;
  color: inherit;
  background: none;
  border: 0;
  opacity: 0.6;
}

.cp-sidebar__busca-limpar:hover { opacity: 1; }

.cp-sidebar__busca-vazio {
  padding: 0.5rem 0.75rem;
  margin: 0;
  font-size: 0.8125rem;
  opacity: 0.7;
}

/*
   O QUE FAZ A BUSCA ENXERGAR DENTRO DE GRUPO FECHADO - e o motivo de ela nao precisar de
   JavaScript para abrir nada.

   Um item que casa quase sempre esta num grupo fechado, porque a lateral abre um grupo por vez.
   Abrir os grupos por codigo brigaria com o componente: precisaria guardar qual estava aberto para
   restaurar depois, e erraria na primeira vez em que alguem digitasse no meio de uma animacao.

   Aqui o Bootstrap continua achando que o mesmo grupo de sempre esta aberto. So a APARENCIA muda
   enquanto ha texto no campo, e limpar devolve o estado que ele nunca deixou de ter.

   `height: auto` junto do `display` por causa do `.collapsing`: no meio da animacao o componente
   escreve uma altura em pixels no elemento, e so o display nao bastaria - a caixa apareceria com
   a altura congelada do instante em que a tecla foi digitada.
*/
.cp-sidebar__nav--buscando .collapse,
.cp-sidebar__nav--buscando .collapsing {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  transition: none !important;
}

/* A SETA SOME ENQUANTO SE BUSCA: os grupos aparecem abertos, e uma seta apontando para o lado
   sobre um grupo aberto diria que ele esta fechado. Como o `aria-expanded` nao muda - de proposito,
   porque o estado real nao mudou -, quem tem de sumir e o desenho. */
.cp-sidebar__nav--buscando .cp-sidebar__seta { display: none; }

/*
   NO RECOLHIDO A BUSCA SOME, com os rotulos e pelo mesmo motivo: a coluna tem 4,5rem e so cabem os
   icones. Um campo de texto espremido ali seria um campo em que nao se le o que se digita.

   O JS limpa o filtro ao recolher - ver `aplicarRecolhimento`. Sem isso o texto continuaria valendo
   invisivel, e a coluna apareceria com tres icones e dezessete faltando.
*/
@media (min-width: 992px) {
  :root[data-lateral="recolhida"] .cp-sidebar__busca { display: none; }
}


/* ================================================================================================
   ESTOQUE — a barra de filtros, a coluna de contagem e a de quantidade da transferência.

   LARGURAS MÍNIMAS, e não fixas: o select de categoria mostra o caminho inteiro ("Bebidas ›
   Refrigerantes"), e o de produto recebe o select2, que sem largura mínima nasce do tamanho do
   placeholder e corta o nome escolhido depois.
   ================================================================================================ */
.cp-filtro { min-width: 11rem; }
.cp-filtro--largo { min-width: 18rem; }
.cp-contagem { width: 7rem; margin-left: auto; }
.cp-coluna-quantidade { width: 10rem; }

/* O CODIGO DE VINCULACAO e a senha sorteada: ditados e digitados num POS, entao grandes, espacados e
   em fonte monoespacada - "8" e "B" nao podem se parecer. */
.cp-codigo-de-vinculacao {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--cp-primaria);
}

.cp-senha-terminal-campos {
  max-width: 14rem;
}

.cp-campo-senha-terminal {
  letter-spacing: 0.3em;
}

/* OS GRAFICOS DO PAINEL: altura fixa no contentor, porque o Chart.js com maintainAspectRatio: false
   ocupa o pai inteiro - sem altura declarada, o grafico cresce a cada redimensionamento. */
.cp-painel-grafico { position: relative; height: 260px; }

/* ----------------------------------------------------------------------------------------------
   VENDAS DE HOJE -- o total em destaque, vendas e ticket nas caixas do painel, e as formas de pagamento.

   O TOTAL E O QUE SE VEIO VER, e por isso e o unico numero grande: tres numeros do mesmo tamanho lado a
   lado disputam o olho. A comparacao e contra ontem ATE ESTA HORA - contra o dia fechado, toda manha
   seria "queda". Seta e texto na variacao: a cor sozinha nao e informacao.
   ---------------------------------------------------------------------------------------------- */
.cp-vendas-hoje {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem 1.5rem;
  align-items: center;
}

.cp-vendas-hoje__valor {
  margin: 0.15rem 0 0.4rem;
  font-size: 2.1rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--cp-texto);
  font-variant-numeric: tabular-nums;
}

.cp-vendas-hoje__comparacao {
  font-size: 0.8125rem;
  color: var(--cp-texto-apoio);
}

.cp-vendas-hoje__variacao {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  background: var(--cp-superficie-2);
  color: var(--cp-texto);
  font-variant-numeric: tabular-nums;
}

.cp-vendas-hoje__variacao--sobe { background: var(--cp-sucesso-suave); color: var(--cp-sucesso); }
.cp-vendas-hoje__variacao--desce { background: var(--cp-perigo-suave); color: var(--cp-perigo); }

.cp-vendas-hoje__numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.cp-vendas-hoje__numero { background: var(--cp-superficie-2); }

.cp-vendas-hoje__numero-valor {
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--cp-texto);
  font-variant-numeric: tabular-nums;
}

/* As formas ocupam a largura inteira, abaixo: a barra so e legivel com espaco. */
.cp-vendas-hoje__formas {
  grid-column: 1 / -1;
  padding-top: 1rem;
  border-top: 1px solid var(--cp-borda);
}

.cp-vendas-hoje__barra {
  display: flex;
  gap: 2px;
  height: 0.6rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--cp-superficie-2);
}

.cp-vendas-hoje__barra span { display: block; min-width: 4px; }

.cp-vendas-hoje__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--cp-texto);
}

.cp-vendas-hoje__legenda li { display: inline-flex; align-items: center; gap: 0.4rem; }

.cp-vendas-hoje__legenda strong { font-weight: 600; font-variant-numeric: tabular-nums; }

.cp-vendas-hoje__ponto {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.cp-vendas-hoje__vazio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 48rem) {
  .cp-vendas-hoje { grid-template-columns: 1fr; }
}

/* O campo de arquivo dos documentos da conta: largo o bastante para o nome, sem ocupar a linha toda. */
.cp-docs-arquivo { max-width: 28rem; }

/* O saldo do mes na pizza do painel: a cor repete o que a palavra "negativo" diria, e o sinal ja esta no valor. */
.cp-saldo--positivo { color: var(--cp-sucesso); }
.cp-saldo--negativo { color: var(--cp-perigo); }

/* A venda no terminal: a quantidade ao lado da busca do produto, estreita (um numero curto, e nao uma linha). */
.cp-vt-quantidade {
  width: 6rem;
  flex: 0 0 6rem;
}

/* A espera da venda no terminal: o valor grande, e as tres etapas com a marca de cada uma (feita, atual, adiante). */
.cp-vt-espera-valor {
  font-size: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cp-primaria);
}

/* O giro da etapa atual no verde da marca (o text-primary do Bootstrap e azul). */
.cp-vt-etapas .spinner-border {
  color: var(--cp-primaria);
}

.cp-vt-etapas {
  max-width: 18rem;
  margin-inline: auto;
}

.cp-vt-etapas li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  color: var(--bs-secondary-color);
}

.cp-vt-etapas li.is-atual,
.cp-vt-etapas li.is-feita {
  color: var(--bs-body-color);
}

.cp-vt-etapas li.is-atual {
  font-weight: 600;
}

.cp-vt-etapa-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  flex: 0 0 1.25rem;
}


/* A escolha dos complementos (venda no terminal e balcao): um grupo por bloco, com fio entre eles; o extra na cor de atencao (e
   cobrado a mais) e o sem custo na de sucesso - a palavra diz o mesmo, a cor so ajuda a varrer a lista. */
.cp-compl-grupo + .cp-compl-grupo {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cp-borda);
}

.cp-compl-opcao {
  padding: 0.25rem 0;
}

.cp-compl-opcao.is-escolhida .cp-compl-nome {
  font-weight: 600;
}

.cp-compl-opcao.is-bloqueada .cp-compl-nome {
  color: var(--cp-texto-suave);
}

/* O contador fica com largura fixa, para os botoes nao pularem quando o numero passa de 9. */
.cp-compl-vezes {
  min-width: 2.25rem;
  font-variant-numeric: tabular-nums;
  opacity: 1;
}

.cp-compl-gratis {
  color: var(--cp-sucesso);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.cp-compl-extra,
.cp-cdp-extra {
  color: var(--cp-atencao);
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.cp-compl-preco {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--cp-primaria);
}

/* Os complementos do produto: um bloco por grupo oferecido, com a posicao na frente (a ordem e a da escolha na venda). */
.cp-cdp-grupo {
  padding: 0.75rem 0;
}

.cp-cdp-grupo + .cp-cdp-grupo {
  border-top: 1px solid var(--cp-borda);
}

.cp-cdp-posicao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--cp-primaria-suave);
  color: var(--cp-primaria);
}

.cp-cdp-limite {
  width: 4.5rem;
}

.cp-cdp-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding-left: 2rem;
}

/* O pedido do balcao: o CODIGO GRANDE, porque e o que o atendente chama em voz alta ("pedido 012") e o que o cliente
   confere na via - lido de longe, e nao so por quem esta na frente da tela. Numeros de largura fixa: 011 e 012 alinham. */
.cp-pedido-codigo {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--cp-primaria);
}

.cp-pedido-codigo--grande {
  font-size: 3rem;
}

/* O selo "Pedido 012" na lista de vendas enviadas: na cor suave da marca, para nao competir com o selo da situacao. */
.cp-selo-pedido {
  background: var(--cp-primaria-suave);
  color: var(--cp-primaria);
  font-variant-numeric: tabular-nums;
}

/* A lista do balcao: os complementos embaixo de cada item, e o codigo na primeira coluna, do tamanho de ser achado. */
.cp-balcao-codigo {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* A mesa ao lado do codigo: alinhada pela base do numero grande, e nao pelo meio - de outro jeito ela parece flutuar. */
.cp-balcao-mesa {
  vertical-align: text-bottom;
  font-weight: 600;
}

.cp-balcao-itens {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Na lista, os itens sao a coluna que se veio ler: sem largura minima, a tabela os espremia a uma palavra por linha. */
#cp-bc-lista .cp-balcao-itens {
  min-width: 10rem;
}

/* O cabecalho de cada lancamento da conta da mesa (proposta mesa-do-cliente), com folga do grupo de cima. */
.cp-balcao-itens .cp-balcao-lancamento:not(:first-child) { margin-top: 0.4rem; }

/*
 * AS ACOES EMPILHADAS, na largura do maior botao: em linha, "Cobrar" + reimprimir + cancelar empurravam a tabela para
 * alem da tela a 1280 px, e o botao que mais se usa ficava escondido atras da rolagem horizontal.
 */
#cp-bc-lista td.cp-bc-acoes {
  width: 1%;
}

/* AS ACOES NUMA LINHA SO (pedido do usuario): todas so com icone na lista - o nome vem no title e no leitor de tela -,
   entao cabem lado a lado sem cortar a tabela em 1280 px. */
#cp-bc-lista td.cp-bc-acoes > div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

#cp-bc-lista td.cp-bc-acoes > div > .btn-group,
#cp-bc-lista td.cp-bc-acoes > div > span {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

/* O selo "Convertido em venda" quebra em duas linhas em vez de alargar a coluna. */
#cp-bc-lista .badge {
  white-space: normal;
  text-align: left;
}

/* ==============================================================================================
   O fechamento do caixa: a folha A4 que o gerente imprime e assina
   ============================================================================================== */

/* A FOLHA E PAPEL, nos dois temas: as cores sao os tokens do papel (os mesmos do cupom), que o tema escuro nao
   redefine de proposito. Na tela, uma folha branca centrada; na impressao, a folha inteira e nada mais. */
.cp-impressao {
  background: var(--cp-superficie-2);
  min-height: 100vh;
  padding: 1rem;
}

.cp-folha-acoes {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  max-width: 210mm;
  margin: 0 auto 1rem;
}

.cp-folha-largura { max-width: 210mm; }

.cp-folha {
  max-width: 210mm;
  margin: 0 auto;
  padding: 14mm 16mm;
  background: var(--cp-cupom-papel);
  color: var(--cp-cupom-tinta);
  font-size: 0.875rem;
  line-height: 1.45;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cp-cupom-tinta) 20%, transparent);
}

.cp-folha h1 { font-size: 1.25rem; margin: 0; }
.cp-folha h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.25rem 0 0.5rem;
  padding-bottom: 0.25rem;
  /* A cor dentro do atalho: `border-bottom: 1px solid` sozinho redefine a cor para currentColor. */
  border-bottom: 1px solid var(--cp-cupom-fio);
}

.cp-folha__cabeca {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--cp-cupom-tinta);
}

.cp-folha__cabeca p { margin: 0; font-weight: 500; }

.cp-folha__ficha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0.75rem 0 0;
}

.cp-folha__ficha dt { font-size: 0.75rem; font-weight: 500; opacity: 0.75; }
.cp-folha__ficha dd { margin: 0; }

.cp-folha__marca {
  margin: 0.75rem 0 0;
  padding: 0.375rem 0.625rem;
  border-left: 3px solid var(--cp-cupom-tinta);
  background: color-mix(in srgb, var(--cp-cupom-fio) 18%, transparent);
}

.cp-folha__tabela { width: 100%; border-collapse: collapse; }

.cp-folha__tabela th,
.cp-folha__tabela td {
  padding: 0.25rem 0.375rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cp-cupom-fio) 45%, transparent);
  vertical-align: top;
}

.cp-folha__tabela th { font-size: 0.75rem; font-weight: 600; text-align: left; }
.cp-folha__conta { max-width: 110mm; }
.cp-folha__sinal { width: 1.5rem; text-align: center; opacity: 0.7; }
.cp-folha__total td { border-bottom: 1px solid var(--cp-cupom-tinta); }

.cp-folha__nota { margin: 0.5rem 0 0; font-size: 0.75rem; opacity: 0.75; }

.cp-folha__assinaturas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}

.cp-folha__assinaturas div { text-align: center; font-size: 0.75rem; }

.cp-folha__assinaturas span {
  display: block;
  margin-bottom: 0.25rem;
  border-top: 1px solid var(--cp-cupom-tinta);
}

@media (max-width: 575.98px) {
  .cp-folha { padding: 1rem; }
  .cp-folha__ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* PAGINA NOMEADA, e nao um @page solto: o do cupom (80 mm, sem margem) tambem e global, e o que viesse depois no
   arquivo valeria para as duas folhas - o cupom sairia em A4, ou o fechamento numa bobina. */
@page folha-a4 { size: A4; margin: 12mm; }

@media print {
  .cp-folha { page: folha-a4; }

  .cp-impressao { background: var(--cp-cupom-papel) !important; padding: 0; min-height: 0; }
  .cp-impressao .cp-sem-impressao { display: none !important; }

  .cp-folha {
    max-width: none;
    padding: 0;
    box-shadow: none;
  }

  .cp-folha__tabela tr { break-inside: avoid; }
}

/* Meu caixa: o formulario de abrir e curto (um valor), e esticado na largura da tela ele se leria como um campo de busca. */
.cp-form-estreito { max-width: 22rem; }

/* A coluna do sinal da conta da gaveta (+, −, =): estreita, para a conta se ler de cima para baixo. */
.cp-sinal-da-conta { width: 1.5rem; }

/* A LINHA DO TOTAL da conta da gaveta (o esperado, a diferenca). Era `table-light` do Bootstrap, que e claro fixo: no
   tema escuro virava uma faixa branca com o texto claro por cima. O token da superficie acompanha o tema. */
.cp-conta-da-gaveta .cp-conta-total > td {
  background: var(--cp-superficie-2);
  color: var(--cp-texto);
}

/* ==============================================================================================
   O PDV Mercadorias: a tela cheia do caixa de balcao, com o leitor de codigo de barras
   ============================================================================================== */

/* A TELA CABE NO VISOR, sem rolar a pagina: o carrinho e a coluna da direita rolam cada um por dentro. Uma pagina que
   rola leva o campo do codigo (e o total) para fora da vista no trigesimo item - e o leitor segue "digitando" nele. */
.cp-pdv-corpo {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cp-fundo);
  color: var(--cp-texto);
}

.cp-pdv-corpo kbd {
  padding: 0.05em 0.35em;
  font-size: 0.75em;
  color: var(--cp-texto);
  background: var(--cp-superficie-2);
  border: 1px solid var(--cp-borda);
  border-radius: 4px;
  box-shadow: none;
}

.cp-pdv-topo {
  flex: 0 0 auto;
  height: var(--cp-pdv-topo-altura);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  background: var(--cp-superficie);
  border-bottom: 1px solid var(--cp-borda);
}

.cp-pdv-topo__marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cp-primaria);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.cp-pdv-topo__marca svg { height: 1.6rem; width: auto; }

.cp-pdv-topo__onde {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: flex;
  gap: 1.25rem;
  overflow: hidden;
  color: var(--cp-texto-apoio);
  font-size: 0.875rem;
}

.cp-pdv-topo__onde > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pdv-topo__onde i { color: var(--cp-texto-suave); }

.cp-pdv-topo__acoes { display: flex; gap: 0.5rem; flex: 0 0 auto; }

.cp-pdv-topo__botao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--cp-texto);
  background: transparent;
  border: 1px solid var(--cp-borda);
}

.cp-pdv-topo__botao:hover { color: var(--cp-texto); background: var(--cp-superficie-2); }

.cp-pdv-principal { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* O CARRINHO A ESQUERDA E A LEITURA A DIREITA: o olho do operador vai do produto na mao ao item que entrou (o topo da
   lista) e ao total, sem atravessar a tela. A coluna da direita tem largura contida - o campo do codigo e o total nao
   passeiam quando a janela muda de tamanho. */
.cp-pdv {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
  gap: 1rem;
  padding: 1rem;
}

.cp-pdv-carrinho {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  overflow: hidden;
}

.cp-pdv-carrinho__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--cp-borda);
}

.cp-pdv-itens { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; }

.cp-pdv-item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto 6.5rem 7.5rem 2.25rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--cp-borda);
  font-size: 1.05rem;
  cursor: pointer;
}

/* A LINHA ESCOLHIDA (a do F8, do Del, do + e -): fundo e fio a esquerda, e nao so a cor - quem nao a distingue ve o fio. */
.cp-pdv-item--selecionado {
  background: var(--cp-primaria-suave);
  box-shadow: inset 4px 0 0 var(--cp-primaria);
}

.cp-pdv-item__n { color: var(--cp-texto-suave); font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }

.cp-pdv-item__nome { min-width: 0; }
.cp-pdv-item__nome strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-pdv-item__nome small { display: block; color: var(--cp-texto-apoio); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cp-pdv-item__qtd { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-pdv-item__qtd .btn { width: 2rem; padding: 0.1rem 0; line-height: 1.4; }

.cp-pdv-item__preco { color: var(--cp-texto-apoio); text-align: right; white-space: nowrap; font-size: 0.9rem; font-variant-numeric: tabular-nums; }

.cp-pdv-item__total { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-pdv-item__total small { display: block; color: var(--cp-texto-apoio); font-size: 0.78rem; font-weight: 400; }

.cp-pdv-item__remover { color: var(--cp-texto-suave); padding: 0.2rem; }
.cp-pdv-item__remover:hover { color: var(--cp-perigo); }

.cp-pdv-vazio { margin: auto; padding: 2rem; text-align: center; color: var(--cp-texto-apoio); }
.cp-pdv-vazio > i { display: block; margin-bottom: 0.75rem; font-size: 3.5rem; color: var(--cp-texto-suave); }

.cp-pdv-lateral { min-height: 0; display: flex; flex-direction: column; gap: 0.75rem; overflow-y: auto; }

.cp-pdv-leitura {
  padding: 0.75rem;
  background: var(--cp-superficie);
  border: 2px solid var(--cp-borda);
  border-radius: var(--cp-raio);
}

.cp-pdv-leitura:focus-within { border-color: var(--cp-primaria); }

.cp-pdv-leitura__campo { display: flex; align-items: center; gap: 0.5rem; }
.cp-pdv-leitura__campo .form-control { font-size: 1.4rem; font-variant-numeric: tabular-nums; }

.cp-pdv-leitura__quantidade {
  padding: 0.35rem 0.55rem;
  border-radius: var(--cp-raio);
  background: var(--cp-primaria);
  color: var(--cp-sobre-primaria);
  font-weight: 700;
  white-space: nowrap;
}

.cp-pdv-leitura__recado { min-height: 1.4rem; margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--cp-texto-apoio); }
.cp-pdv-leitura__recado--sucesso { color: var(--cp-sucesso); }
.cp-pdv-leitura__recado--atencao { color: var(--cp-atencao); font-weight: 600; }
.cp-pdv-leitura__recado--info { color: var(--cp-texto); }

/* O CODIGO DESCONHECIDO: a moldura fica ambar e o fundo pisca uma vez. Com movimento reduzido nao ha piscada - a moldura
   e o fundo ambar ficam parados o mesmo tempo, que e a informacao; o piscar era so o chamado do olho. */
.cp-pdv-leitura.cp-pdv-leitura--piscando { border-color: var(--cp-atencao); animation: cp-pdv-piscar 1.6s ease-out 1; }

@keyframes cp-pdv-piscar {
  0%, 35% { background: var(--cp-atencao-suave); }
  100% { background: var(--cp-superficie); }
}

@media (prefers-reduced-motion: reduce) {
  .cp-pdv-leitura.cp-pdv-leitura--piscando { animation: none; background: var(--cp-atencao-suave); }
}

.cp-pdv-totais {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
}

.cp-pdv-totais > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cp-pdv-totais dt, .cp-pdv-totais dd { margin: 0; font-weight: 400; }

.cp-pdv-totais .cp-pdv-totais__total {
  align-items: baseline;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--cp-borda);
}

.cp-pdv-totais .cp-pdv-totais__total dt { font-size: 1.1rem; font-weight: 600; }
.cp-pdv-totais .cp-pdv-totais__total dd { font-size: 2.4rem; font-weight: 700; line-height: 1.1; }

.cp-pdv-pagar { padding: 0.8rem; font-size: 1.3rem; font-weight: 600; }

.cp-pdv-teclas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }

.cp-pdv-teclas button {
  width: 100%;
  padding: 0.35rem 0.5rem;
  text-align: left;
  font-size: 0.85rem;
  color: var(--cp-texto);
  background: transparent;
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
}

.cp-pdv-teclas button:hover { background: var(--cp-superficie-2); }

/* Os paineis de quando nao ha como vender (sem loja, sem caixa, qual caixa): no meio, grandes, com uma saida clara. */
.cp-pdv-aviso {
  max-width: 42rem;
  margin: 3rem auto;
  padding: 2rem;
  text-align: center;
  background: var(--cp-superficie);
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
}

.cp-pdv-aviso__icone { display: block; margin-bottom: 1rem; font-size: 3rem; color: var(--cp-primaria); }
.cp-pdv-aviso__lista { display: inline-block; margin: 0 auto 1.25rem; padding: 0; list-style: none; text-align: left; }
.cp-pdv-escolha { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

.cp-pdv-numero { text-align: right; font-variant-numeric: tabular-nums; }

.cp-pdv-resultados .list-group-item small { color: inherit; opacity: 0.8; }

/* O PAGAMENTO: o total, o pago e o que falta em tres caixas grandes - e a conta que o cliente acompanha do outro lado. */
.cp-pdv-conta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.5rem; }

.cp-pdv-conta > div {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.9rem;
  background: var(--cp-superficie-2);
  border-radius: var(--cp-raio);
}

.cp-pdv-conta span { color: var(--cp-texto-apoio); font-size: 0.85rem; }
.cp-pdv-conta strong { font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.cp-pdv-conta .cp-pdv-conta__falta strong { color: var(--cp-primaria); }

.cp-pdv-formas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }

/* COM O FIADO (so para quem tem a permissao), seis formas numa linha. */
.cp-pdv-formas:has(> :nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* O cliente do fiado: a lista de achados rola, e nao empurra o botao de confirmar para fora do visor. */
#cp-pdv-fiado-resultados { max-height: 12rem; overflow-y: auto; }

.cp-pdv-forma {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 0.4rem;
  font-size: 1.05rem;
  color: var(--cp-texto);
  background: var(--cp-superficie);
  border: 2px solid var(--cp-borda);
  border-radius: var(--cp-raio);
}

.cp-pdv-forma > i { font-size: 1.75rem; color: var(--cp-texto-apoio); }
.cp-pdv-forma > kbd { position: absolute; top: 0.3rem; right: 0.35rem; }

/* A FORMA ESCOLHIDA: moldura, fundo e o icone na cor da marca - tres sinais, e nao so a cor. */
.cp-pdv-forma.cp-pdv-forma--escolhida { border-color: var(--cp-primaria); background: var(--cp-primaria-suave); font-weight: 600; }
.cp-pdv-forma.cp-pdv-forma--escolhida > i { color: var(--cp-primaria); }

.cp-pdv-dividir { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.cp-pdv-dividir .cp-pdv-dividir__n { min-width: 2.75rem; color: var(--cp-texto); opacity: 1; font-variant-numeric: tabular-nums; }

.cp-pdv-troco {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  font-size: 1.4rem;
  color: var(--cp-texto);
  background: var(--cp-sucesso-suave);
  border-radius: var(--cp-raio);
}

.cp-pdv-troco strong { font-size: 2.5rem; font-variant-numeric: tabular-nums; }

.cp-pdv-sucesso__icone { font-size: 4rem; color: var(--cp-sucesso); }

.cp-pdv-sucesso__troco {
  display: inline-flex;
  flex-direction: column;
  padding: 0.75rem 2.5rem;
  color: var(--cp-texto);
  background: var(--cp-sucesso-suave);
  border-radius: var(--cp-raio);
}

.cp-pdv-sucesso__troco strong { font-size: 3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ABAIXO DE lg a tela empilha: o campo e o total primeiro (e o que se usa), o carrinho depois, e a pagina rola. Um PDV
   de balcao roda num monitor; o empilhado e para o notebook de apoio e o tablet, e nao some neles. */
@media (max-width: 991.98px) {
  .cp-pdv { height: auto; grid-template-columns: minmax(0, 1fr); }
  .cp-pdv-lateral { order: -1; overflow: visible; }
  .cp-pdv-carrinho { min-height: 16rem; }
  .cp-pdv-itens { max-height: 60vh; }
  .cp-pdv-formas,
  .cp-pdv-formas:has(> :nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .cp-pdv { padding: 0.5rem; gap: 0.5rem; }
  .cp-pdv-topo { gap: 0.5rem; padding: 0 0.5rem; }
  .cp-pdv-topo__nome, .cp-pdv-topo__rotulo { display: none; }

  /* NO TELEFONE, SO O TERMINAL: e o que diz em qual gaveta o dinheiro vai cair. Loja, operador e horario, cortados em
     tres reticencias, nao diriam nada - e a loja ja esta no terminal. */
  .cp-pdv-topo__onde > span:not(#cp-pdv-onde-terminal) { display: none; }
  .cp-pdv-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.25rem; padding: 0.5rem 0.75rem; font-size: 1rem; }
  .cp-pdv-item__n, .cp-pdv-item__preco { display: none; }
  .cp-pdv-item__qtd { grid-column: 1; }
  .cp-pdv-item__total { grid-column: 2; grid-row: 1; }
  .cp-pdv-item__remover { grid-column: 2; grid-row: 2; justify-self: end; }
  .cp-pdv-conta strong { font-size: 1.25rem; }
  .cp-pdv-teclas { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------------------------------------------------------------
 * AS MESAS ABERTAS (proposta mesas-no-admin): um cartao por mesa ocupada, lado a lado ate onde a tela deixar. O NOME DA MESA
 * e o maior numero do cartao - e o que o caixa procura quando o cliente diz "a mesa 4"; o pedido fica ao lado, menor.
 * ------------------------------------------------------------------------------------------------------------------------ */
.cp-mesas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.cp-mesa__nome {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--cp-primaria);
  overflow-wrap: anywhere;
}

.cp-mesa__total {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cp-mesa__itens { border-top: 1px solid var(--cp-borda); padding-top: 0.5rem; }
.cp-mesa__itens li + li { margin-top: 0.35rem; }

/* O TABLET DA MESA (proposta mesa-do-cliente). O cabecalho de cada lancamento separa os grupos de itens com um fio - a
   cor DENTRO do atalho, senao o `border-top` a redefine para currentColor. A mesa que pediu a conta ganha a borda do perigo
   (mais o selo com icone e palavra: cor sozinha nao e informacao). */
.cp-mesa__itens .cp-mesa__lancamento { padding-top: 0.35rem; }
.cp-mesa__itens .cp-mesa__lancamento + li { margin-top: 0.2rem; }
.cp-mesa__itens li + .cp-mesa__lancamento { margin-top: 0.6rem; border-top: 1px dashed var(--cp-borda); }
.cp-mesa__tablet { font-size: 1.1rem; color: var(--cp-texto-suave); vertical-align: middle; }
.cp-mesa--conta { border: 2px solid var(--cp-perigo); }
.cp-ma-chamado--conta { text-transform: uppercase; letter-spacing: 0.02em; }
.cp-cz-chamados .badge { font-size: 0.9rem; }

/* O PDV COBRANDO A CONTA DE UM PEDIDO: a faixa da mesa em cima dos itens, e o que mexeria nos itens some - o leitor, os
   botoes de quantidade e de remover, e as teclas que so servem ao carrinho. O recado da leitura continua: e por ele que a
   tela diz por que o item nao muda. */
.cp-pdv-pedido {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--cp-borda);
  background: var(--cp-primaria-suave);
  color: var(--cp-texto);
}

.cp-pdv-pedido--recusa { background: var(--cp-atencao-suave); }
.cp-pdv-pedido__voltar { white-space: nowrap; }

.cp-pdv--travado .cp-pdv-leitura > .form-label,
.cp-pdv--travado .cp-pdv-leitura__campo,
.cp-pdv--travado .cp-pdv-item__qtd .btn,
.cp-pdv--travado .cp-pdv-item__remover,
.cp-pdv--travado .cp-pdv-teclas li:has([data-tecla="F2"]),
.cp-pdv--travado .cp-pdv-teclas li:has([data-tecla="F4"]),
.cp-pdv--travado .cp-pdv-teclas li:has([data-tecla="F8"]),
.cp-pdv--travado .cp-pdv-teclas li:has([data-tecla="Delete"]) {
  display: none;
}

/* A DEVOLUCAO DE ITENS: a coluna da quantidade na largura de um numero, e a previa do reembolso em destaque. */
.cp-dv-coluna-qtd { width: 8rem; }
.cp-dv-previa { font-size: 1.05rem; }

/* A LINHA DE ASSINATURA DO CLIENTE no comprovante de devolucao: o espaco em cima e o traco que o papel precisa. */
.cp-cd-assinatura { margin-top: 10mm !important; padding-top: 1mm; border-top: 1px solid var(--cp-cupom-tinta); }

/* ------------------------------------------------------------------ entrada da nota no estoque (estoque-pela-nota) */

/* O ITEM DA NOTA nao encolhe ate quebrar palavra a palavra ("COCA-" / "COLA"): no telefone a tabela rola de lado, e a
   descricao do fornecedor continua legivel. */
.cp-entrada-item {
  min-width: 15rem;
}

/* A COLUNA DO PRODUTO e a que decide: larga o bastante para o nome escolhido caber no select2 sem cortar a palavra. */
.cp-entrada-produto {
  min-width: 18rem;
}

.cp-entrada-fator {
  width: 6.5rem;
}

/* O ITEM FORA DO ESTOQUE fica apagado, e nao some: continua na nota, e a decisao tem de ficar a vista para ser revista. */
.cp-entrada-fora > td {
  color: var(--cp-texto-apoio);
  background: var(--cp-superficie-2);
}

/* ------------------------------------------------------------------ o leiaute da etiqueta de balanca (codigos-de-barras) */

.cp-balanca-parte {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  background: var(--cp-primaria-suave);
  color: var(--cp-texto);
}

.cp-balanca-parte b {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
}

.cp-balanca-parte small {
  font-family: var(--cp-fonte);
  color: var(--cp-texto-apoio);
}

/* O DIGITO LIVRE e ignorado na leitura: tracejado, para nao se ler como parte do valor. */
.cp-balanca-livre {
  border-style: dashed;
  background: var(--cp-superficie-2);
}

/* ------------------------------------------------------------------------------------------------------------------------
 * A COZINHA (proposta comandas-da-cozinha): tres colunas - Novas, Em preparo, Prontas -, cada comanda um cartao. ONDE (a mesa,
 * ou o balcao) e o maior texto do cartao: e o que a cozinha grita para o garcom. O tempo fica ao lado, e ganha ambar aos 15 min
 * e vermelho aos 30. Em TELA CHEIA so o quadro aparece, com o fundo da pagina e rolagem propria.
 * ------------------------------------------------------------------------------------------------------------------------ */
.cp-cozinha:fullscreen {
  background: var(--cp-fundo);
  color: var(--cp-texto);
  padding: 1rem;
  overflow-y: auto;
}

.cp-cz-quadro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .cp-cz-quadro { grid-template-columns: 1fr; }
}

.cp-cz-coluna__titulo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--cp-borda);
  color: var(--cp-texto);
}

.cp-cz-coluna__titulo .badge { background: var(--cp-superficie-2); color: var(--cp-texto); }

.cp-cz-lista { display: grid; gap: 0.75rem; }

.cp-cz-card { border-left: 4px solid var(--cp-borda-forte); }
.cp-cz-card--atencao { border-left-color: var(--cp-atencao); }
.cp-cz-card--atrasada { border-left-color: var(--cp-perigo); }
.cp-cz-card--atencao .cp-cz-card__tempo { color: var(--cp-atencao); }
.cp-cz-card--atrasada .cp-cz-card__tempo { color: var(--cp-perigo); }

/* A QUE ACABOU DE CHEGAR: um contorno que some em 8 s (o script tira a classe). Com movimento reduzido, o contorno fica, sem pulso. */
.cp-cz-card--chegou {
  outline: 3px solid var(--cp-primaria);
  outline-offset: 2px;
  animation: cp-cz-chegou 1.2s ease-in-out 3;
}

@keyframes cp-cz-chegou {
  50% { outline-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-cz-card--chegou { animation: none; }
}

.cp-cz-card__onde {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cp-primaria);
  overflow-wrap: anywhere;
}

.cp-cz-card__tempo {
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--cp-texto-suave);
}

.cp-cz-itens { margin-top: 0.75rem; font-size: 1.05rem; }
.cp-cz-itens li + li { margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed var(--cp-borda); }
.cp-cz-item__qtd { font-weight: 700; font-variant-numeric: tabular-nums; }

/* A OBSERVACAO DO GARCOM e o que mais se erra na cozinha: fundo de atencao, e nunca so a cor (o icone vai junto). */
.cp-cz-obs {
  margin-top: 0.25rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.35rem;
  background: var(--cp-atencao-suave);
  color: var(--cp-texto);
  font-weight: 600;
  font-size: 0.9rem;
}

.cp-cz-selo { background: var(--cp-superficie-2); color: var(--cp-texto-suave); font-weight: 500; }
.cp-cz-proxima { min-width: 7rem; }

/* ==============================================================================================
   O cardapio digital no Admin (proposta cardapio-digital): a miniatura na lista de produtos, a foto do produto e o
   cartaz do QR Code da loja
   ============================================================================================== */

/* A MINIATURA DA LISTA: tamanho fixo (a linha nao pula quando a imagem chega) e o vazio com o mesmo tamanho. */
.cp-miniatura {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--cp-superficie-2);
  color: var(--cp-texto-apoio);
  vertical-align: middle;
}

.cp-foto-do-produto {
  aspect-ratio: 1;
  max-width: 480px;
  border: 1px solid var(--cp-borda);
  border-radius: var(--cp-raio);
  background: var(--cp-superficie-2);
  overflow: hidden;
}

.cp-foto-do-produto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cp-foto-do-produto__vazia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  color: var(--cp-texto-apoio);
}

/* O CARTAZ DO QR CODE: na tela e no papel, com o papel e a tinta do cupom (tokens que o tema escuro nao redefine) - o QR
   precisa de escuro sobre claro para a camera ler, em qualquer tema. crispEdges: sem ele a borda de cada modulo sai
   suavizada, e o cinza vira ruido na impressao. */
.cp-cartaz {
  max-width: 22rem;
  margin: 0 auto;
  padding: 1.5rem;
  border: 1px dashed var(--cp-cupom-fio);
  border-radius: var(--cp-raio);
  background: var(--cp-cupom-papel);
  color: var(--cp-cupom-tinta);
  text-align: center;
}

.cp-cartaz p { margin: 0; }
.cp-cartaz__chamada { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.75rem !important; }
.cp-cartaz__qr svg { width: 100%; max-width: 16rem; height: auto; shape-rendering: crispEdges; }
.cp-cartaz__loja { font-size: 1.1rem; font-weight: 600; margin-top: 0.75rem !important; }
.cp-cartaz__endereco { font-family: ui-monospace, 'Courier New', monospace; font-size: 0.8rem; word-break: break-all; }
.cp-cartaz__apoio { font-size: 0.8rem; margin-top: 0.5rem !important; }

/* NA IMPRESSAO, SO O CARTAZ, na folha A4 nomeada la de cima (`folha-a4`, a das folhas de fechamento): a regra do cupom
   declara @page { size: 80mm } para toda impressao do Admin, e sem o nome o cartaz sairia na bobina de 80 mm. */

@media print {
  body:has(.cp-cartaz) .cp-sem-impressao,
  body:has(.cp-cartaz) .card-body > .cp-sem-impressao { display: none !important; }

  body:has(.cp-cartaz) .card { border: 0; box-shadow: none; background: transparent; }

  .cp-cartaz {
    page: folha-a4;
    max-width: none;
    border: 0;
    padding: 0;
  }

  .cp-cartaz__qr svg { max-width: 110mm; }
  .cp-cartaz__chamada { font-size: 28pt; }
  .cp-cartaz__loja { font-size: 18pt; }
  .cp-cartaz__endereco { font-size: 11pt; }
  .cp-cartaz__apoio { font-size: 12pt; }

  body:has(.cp-cartaz) { background: var(--cp-cupom-papel) !important; }
}