/* ===========================================================================
   AUTOPROF — aparência do portal.

   A ideia visual é a CADERNETA ESCOLAR, que é justamente o objeto que
   este sistema substitui: papel claro, tinta escura, linha pautada
   separando um registro do outro, números alinhados em coluna. Daí saem
   três decisões que valem para o site inteiro:

   1. SEPARAR COM LINHA, NÃO COM SOMBRA. Sombra cinza embaixo de cada
      caixinha é o visual de template pronto -- e, pior, some na tela do
      celular no sol. Uma pauta de 1px separa melhor e não pesa.
   2. NÚMERO E TÍTULO EM SERIFA, resto em sans. Serifa é a letra de
      documento de escola. Como não se pode baixar fonte de fora (ver
      abaixo), vem do próprio aparelho: Noto Serif no Android, Georgia no
      Windows, ambos instalados de fábrica.
   3. VERDE DE QUADRO, não azul de sistema. O azul #1f6feb que estava
      aqui é o azul de qualquer painel do mundo; o verde escuro é de sala
      de aula e é só nosso.

   MOBILE-FIRST, e isso é decisão, não estilo: a professora usa isto no
   celular, e o plano é empacotar o mesmo site como aplicativo (APK). No
   celular a navegação fica embaixo, onde o polegar alcança; a partir de
   900px ela vira barra lateral.

   Nada de framework e nada de fonte de fora: o portal precisa abrir
   rápido em internet de escola e funcionar sem baixar nada (o que também
   é exigência do modo aplicativo).
   ========================================================================= */

:root {
  /* Papel e tinta */
  --cor-fundo: #faf9f6;
  --cor-superficie: #ffffff;
  --cor-borda: #e4e2db;      /* a pauta */
  --cor-borda-forte: #cfccc2;
  --cor-texto: #1a2430;
  --cor-texto-fraco: #6a7280;

  /* Verde de quadro */
  --cor-marca: #14594a;
  --cor-marca-escura: #0e4137;
  --cor-marca-clara: #e8f0ec;

  --cor-ok: #1f6b43;
  --cor-ok-fundo: #e9f2eb;
  --cor-pendente: #8a5a12;
  --cor-pendente-fundo: #f7efe0;
  --cor-erro: #a3241c;
  --cor-erro-fundo: #f9ebe9;

  --serifa: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --raio: 6px;       /* papel não tem canto redondo de 12px */
  --raio-pequeno: 4px;
  --altura-nav: 66px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #14171a;
    --cor-superficie: #1c2024;
    --cor-borda: #2e333a;
    --cor-borda-forte: #3d444d;
    --cor-texto: #e9eaec;
    --cor-texto-fraco: #99a1ab;

    --cor-marca: #5ab99f;
    --cor-marca-escura: #74c9b1;
    --cor-marca-clara: #17302a;

    --cor-ok: #6fc08d;
    --cor-ok-fundo: #16301f;
    --cor-pendente: #d6a352;
    --cor-pendente-fundo: #32270f;
    --cor-erro: #e98b83;
    --cor-erro-fundo: #331b19;
  }
}

* { box-sizing: border-box; }

/* O atributo `hidden` precisa ganhar de qualquer `display` do CSS. Sem
   isto, `button { display: inline-flex }` vencia, e um botão marcado como
   escondido ("Desistir da edição") continuava aparecendo na tela. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px; /* 16px evita o zoom automático do iOS ao focar um campo */
  line-height: 1.55;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* --- Tipografia ---------------------------------------------------------
   Escala de 1.2 a partir de 16px. Títulos em serifa; textos corridos em
   sans, que é mais legível em tela pequena e ruim.                       */

h1, h2, h3 {
  font-family: var(--serifa);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cor-texto);
}
h1 { font-size: 1.728rem; line-height: 1.2; margin: 0 0 6px; }
h2 { font-size: 1.2rem; margin: 28px 0 0; }
h3 { font-size: 1.1rem; margin: 0 0 14px; }

/* h4 é o subtítulo dentro de um formulário longo. Sem estilo próprio ele
   ficava igual a texto comum -- era o que deixava "1. Identificação"
   solto no meio da tela. Aqui ele ganha a pauta que separa as etapas. */
h4 {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cor-marca);
  margin: 26px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cor-borda);
}
h4:first-child { margin-top: 0; }

p { margin: 0 0 12px; }
small { color: var(--cor-texto-fraco); font-size: 0.8125rem; line-height: 1.45; }
a { color: var(--cor-marca); text-underline-offset: 2px; }

/* --- Estrutura ---------------------------------------------------------- */

.layout { min-height: 100vh; }

.main {
  padding: 20px 16px;
  /* Espaço para a navegação de baixo não cobrir o fim do conteúdo. */
  padding-bottom: calc(var(--altura-nav) + 28px);
  max-width: 1080px;
  /* O `width: 100%` não é enfeite: `.main` é item de grade, e item de
     grade com margem automática encolhe até o tamanho do conteúdo em vez
     de ocupar a coluna. Sem isto, a tela fica com faixa vazia dos dois
     lados no computador. */
  width: 100%;
  margin: 0 auto;
}

/* O cabeçalho da página é ancorado por um traço verde curto: é o único
   lugar com cor forte, e serve de ponto de partida para o olho. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-top: 14px;
  border-top: 2px solid var(--cor-marca);
}
.page-head p {
  color: var(--cor-texto-fraco);
  margin: 0;
  font-size: 0.9rem;
  max-width: 62ch;
}

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

.sidebar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--altura-nav);
  display: flex;
  align-items: stretch;
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda-forte);
  z-index: 20;
  /* Respeita a faixa do gesto de "voltar" nos celulares sem botão. */
  padding-bottom: env(safe-area-inset-bottom);
  /* O admin tem sete itens, e sete não cabem em 390px sem virar letra
     ilegível e nome cortado no meio. Então a barra rola de lado, como a
     de qualquer aplicativo: o item seguinte fica meio aparecendo na
     borda, que é o sinal de que há mais. A professora tem três itens e
     nunca vê isto acontecer. */
  overflow-x: auto;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar .brand { display: none; }

.sidebar a {
  flex: 1 0 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--cor-texto-fraco);
  font-size: 0.68rem;
  text-align: center;
  padding: 8px 2px;
  /* Reservado para a marca de aba ativa, abaixo. Transparente no resto
     para que nenhum item pule de lugar ao mudar de tela. */
  border-top: 2px solid transparent;
}
.sidebar a .icone {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* No celular o item ativo é marcado por um traço em cima, como uma aba. */
.sidebar a.ativo {
  color: var(--cor-marca);
  font-weight: 600;
  border-top-color: var(--cor-marca);
}
.sidebar .sair { display: none; }

/* "Falar com o assistente": o único item do menu com cor própria, porque é
   a ação principal do sistema e sai para o WhatsApp. O verde é o do
   próprio WhatsApp, para ela reconhecer de longe onde vai cair. */
.sidebar a.item-conversa { color: #128c4b; font-weight: 600; }
.sidebar a.item-conversa .icone { stroke: #128c4b; }
/* No menu de baixo do celular cabe uma palavra; na barra lateral, a frase. */
.sidebar a.item-conversa .rotulo-longo { display: none; }

@media (min-width: 900px) {
  :root { --altura-nav: 0px; }

  .layout {
    display: grid;
    grid-template-columns: 244px 1fr;
    /* O menu é "grudado" (sticky) e mede uma tela de altura. Numa página
       longa, a coluna dele terminava no meio do caminho e o branco
       simplesmente acabava, como se a barra tivesse sido cortada. Pintar
       a faixa aqui, na página inteira, resolve sem prender o menu. */
    background-image: linear-gradient(
      to right,
      var(--cor-superficie) 0 243px,
      var(--cor-borda) 243px 244px,
      transparent 244px
    );
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    background: var(--cor-superficie);
    border-top: none;
    border-right: 1px solid var(--cor-borda);
    padding: 24px 14px;
  }
  .sidebar .brand {
    display: block;
    font-family: var(--serifa);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    padding: 0 10px 18px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--cor-borda);
  }
  .sidebar .brand small {
    display: block;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.78rem;
    margin-top: 2px;
  }
  .sidebar { overflow-x: visible; }
  .sidebar a {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    font-size: 0.9rem;
    padding: 9px 11px;
    border-radius: var(--raio-pequeno);
    text-align: left;
    border-top: none;
  }
  .sidebar a:hover { background: var(--cor-fundo); color: var(--cor-texto); }
  .sidebar a.ativo { background: var(--cor-marca-clara); }
  .sidebar a.item-conversa { background: #e7f6ec; }
  .sidebar a.item-conversa .rotulo-longo { display: inline; }
  .sidebar a.item-conversa .rotulo-curto { display: none; }
  .sidebar a.item-conversa:hover { background: #d6f0de; color: #0e7a40; }
  .sidebar .sair {
    display: block;
    margin-top: auto;
    padding: 14px 11px 0;
    border-top: 1px solid var(--cor-borda);
  }
  .main { padding: 32px 40px 48px; }
}

/* --- Cartões e blocos ---------------------------------------------------
   Sem sombra, de propósito: a borda de 1px já separa, e sombra igual
   embaixo de tudo é o que dá cara de template.                           */

.ficha, .cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 18px;
  margin-bottom: 16px;
}
@media (min-width: 700px) {
  .ficha, .cartao { padding: 22px 24px; }
}

/* O título de um bloco fica em cima da pauta que o separa do conteúdo. */
.cartao > h3, .ficha > h3 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cor-borda);
}

/* A ficha de uma professora: nome, os dados dela em pares rótulo/valor, e
   as turmas embaixo, uma por linha da pauta. */
.ficha-cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 4px;
}
.ficha-cabeca h3 { margin: 0 0 8px; padding: 0; border: none; }

.ficha-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 0;
  font-size: 0.85rem;
}
.ficha-meta dt { color: var(--cor-texto-fraco); }
.ficha-meta dd { margin: 0; font-variant-numeric: tabular-nums; }

.lista-turmas { list-style: none; margin: 0; padding: 0; }
.lista-turmas li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--cor-borda);
}
.lista-turmas li:last-child { border-bottom: none; }
.lista-turmas .detalhe { color: var(--cor-texto-fraco); font-size: 0.875rem; flex: 1; }

/* --- Números ------------------------------------------------------------
   Aqui é onde o visual se permite ser forte: numeral em serifa, grande,
   com a coluna alinhada (tabular-nums). É o que a professora quer saber
   em um olhar -- quantos dias já foram e quantos faltam.                 */

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  margin-bottom: 22px;
  /* O `overflow: hidden` trabalha junto com a margem negativa de cada
     número: a linha que sobraria na primeira coluna e na primeira
     fileira cai em cima da borda da moldura e some. Assim a pauta
     aparece exatamente entre um número e outro, seja qual for a
     quebra -- três números viram 3 colunas no computador e 2+1 no
     celular, e em nenhum dos dois casos falta ou sobra linha. */
  overflow: hidden;
}
.numero {
  padding: 18px 20px;
  border-left: 1px solid var(--cor-borda);
  border-top: 1px solid var(--cor-borda);
  margin-left: -1px;
  margin-top: -1px;
}
.numero .valor {
  font-family: var(--serifa);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.05;
  /* Algarismo de altura cheia e largura fixa: é número de documento, e
     precisa alinhar em coluna. A serifa do aparelho usa, por padrão,
     algarismo de texto (com perna para baixo), que em dinheiro engana. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.numero .rotulo {
  font-size: 0.8rem;
  color: var(--cor-texto-fraco);
  margin-top: 2px;
}
.numero.ok .valor { color: var(--cor-ok); }
.numero.pendente .valor { color: var(--cor-pendente); }

/* --- Listas de dias (relatório) -----------------------------------------
   Cada dia é uma linha de caderneta: data à esquerda, alinhada em coluna,
   e o conteúdo do dia ao lado.                                           */

.lista-dias { list-style: none; margin: 0; padding: 0; }
.lista-dias li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--cor-borda);
}
.lista-dias li:last-child { border-bottom: none; }
.lista-dias .data {
  font-family: var(--serifa);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 5.6em;
}
.lista-dias .materias { color: var(--cor-texto-fraco); font-size: 0.9rem; flex: 1; }
.lista-dias .quem {
  font-size: 0.75rem;
  color: var(--cor-texto-fraco);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 20px;
  padding: 1px 9px;
}

/* --- Etiquetas ---------------------------------------------------------- */

.etiqueta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.etiqueta.ok { color: var(--cor-ok); background: var(--cor-ok-fundo); border-color: var(--cor-ok-fundo); }
.etiqueta.pendente { color: var(--cor-pendente); background: var(--cor-pendente-fundo); border-color: var(--cor-pendente-fundo); }
.etiqueta.erro { color: var(--cor-erro); background: var(--cor-erro-fundo); border-color: var(--cor-erro-fundo); }
.etiqueta.admin { color: var(--cor-marca); background: var(--cor-marca-clara); border-color: var(--cor-marca-clara); }

/* --- Formulários -------------------------------------------------------- */

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 5px;
}
input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
}
input::placeholder, textarea::placeholder { color: var(--cor-texto-fraco); opacity: 0.75; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--cor-marca);
  outline-offset: -1px;
  border-color: var(--cor-marca);
}
textarea { min-height: 160px; resize: vertical; font-family: inherit; }

.campo { margin-bottom: 16px; }
.campo small { display: block; margin-top: 5px; }
.grid-2 { display: grid; gap: 16px; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* --- Botões ------------------------------------------------------------- */

button, .botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  padding: 11px 18px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cor-borda-forte);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  text-decoration: none;
  cursor: pointer;
  /* 44px é o mínimo confortável para o dedo -- vale mais que o visual. */
  min-height: 44px;
}
button:hover, .botao:hover { border-color: var(--cor-texto-fraco); }
button.primario, .botao.primario {
  background: var(--cor-marca);
  border-color: var(--cor-marca);
  color: #fff;
}
button.primario:hover, .botao.primario:hover {
  background: var(--cor-marca-escura);
  border-color: var(--cor-marca-escura);
}
/* Botão que abre a conversa com o bot no WhatsApp. Verde do próprio
   WhatsApp: é reconhecido de longe, e diz para onde o toque leva. */
.botao.whatsapp, button.whatsapp {
  background: #1fa855;
  border-color: #1fa855;
  color: #fff;
}
.botao.whatsapp:hover, button.whatsapp:hover { background: #178a45; border-color: #178a45; }
.botao.whatsapp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }

button.perigo { color: var(--cor-erro); border-color: var(--cor-borda-forte); background: transparent; }
button.perigo:hover { border-color: var(--cor-erro); }
button.link {
  background: none;
  border: none;
  color: var(--cor-marca);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 6px 0;
  min-height: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }

.acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Avisos -------------------------------------------------------------
   A barra colorida à esquerda faz o aviso ser notado sem precisar pintar
   o bloco inteiro de cor.                                                */

.aviso {
  border-radius: var(--raio-pequeno);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 0.92rem;
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-borda-forte);
  background: var(--cor-superficie);
}
.aviso.ok { color: var(--cor-ok); background: var(--cor-ok-fundo); border-color: var(--cor-ok-fundo); border-left-color: var(--cor-ok); }
.aviso.erro { color: var(--cor-erro); background: var(--cor-erro-fundo); border-color: var(--cor-erro-fundo); border-left-color: var(--cor-erro); }
.aviso.atencao { color: var(--cor-pendente); background: var(--cor-pendente-fundo); border-color: var(--cor-pendente-fundo); border-left-color: var(--cor-pendente); }
.aviso.info { color: var(--cor-marca); background: var(--cor-marca-clara); border-color: var(--cor-marca-clara); border-left-color: var(--cor-marca); }
.aviso a { color: inherit; }

.vazio {
  color: var(--cor-texto-fraco);
  padding: 18px 0 6px;
  font-size: 0.92rem;
  margin: 0;
}

/* --- Tabelas ------------------------------------------------------------ */

.tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--cor-borda);
}
th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cor-texto-fraco);
  border-bottom-color: var(--cor-borda-forte);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
td .valor-dinheiro, .dinheiro { font-variant-numeric: tabular-nums; }

/* --- Entrar, cadastrar, recuperar senha ---------------------------------
   Telas de fora do portal. A folha é centralizada e estreita: é um
   formulário curto, não uma página.                                      */

.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: var(--cor-fundo);
}
.caixa-login {
  width: 100%;
  max-width: 400px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-top: 3px solid var(--cor-marca);
  border-radius: var(--raio);
  padding: 32px 28px;
}
.caixa-login h1 {
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.caixa-login .subtitulo {
  text-align: center;
  color: var(--cor-texto-fraco);
  font-size: 0.875rem;
  margin-bottom: 26px;
}
.caixa-login button[type="submit"] { width: 100%; margin-top: 8px; }
.rodape-login {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.85rem;
  color: var(--cor-texto-fraco);
  text-align: center;
  line-height: 1.9;
}

/* --- Impressão ----------------------------------------------------------
   O relatório impresso é documento de escola: vai para pasta, para a
   secretaria, para reunião. Então sai em preto no branco, sem menu, sem
   botões, e sem quebrar um dia no meio da página.                        */

@media print {
  :root {
    --cor-fundo: #fff;
    --cor-superficie: #fff;
    --cor-texto: #000;
    --cor-texto-fraco: #444;
    --cor-borda: #bbb;
    --cor-borda-forte: #888;
    --cor-marca: #000;
  }
  body { font-size: 12pt; }
  .sidebar, .acoes, button, .nao-imprimir { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; max-width: none; }
  .ficha, .cartao, .numeros { border: 1px solid #bbb; break-inside: avoid; }
  .lista-dias li { break-inside: avoid; }
  .so-impressao { display: block !important; }
  a[href]:after { content: ""; } /* não imprimir o endereço dos links */
}

.so-impressao { display: none; }

/* --- Tabela que vira cartão no celular ----------------------------------
 *
 * Tabela de verdade é o formato certo no computador: colunas alinhadas,
 * fácil de comparar linha a linha. No celular, a mesma tabela obriga a
 * arrastar de lado -- e o que fica escondido do lado direito costuma ser
 * justamente o botão de ação.
 *
 * Abaixo de 700px cada linha vira um cartão, e cada célula ganha o nome da
 * coluna à esquerda (vem do atributo data-rotulo). Nada fica fora da tela.
 */
@media (max-width: 699px) {
  .tabela-cartoes thead { display: none; }

  .tabela-cartoes,
  .tabela-cartoes tbody,
  .tabela-cartoes tr,
  .tabela-cartoes td {
    display: block;
    width: 100%;
  }

  .tabela-cartoes tr {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 14px 16px;
    margin-bottom: 12px;
  }

  .tabela-cartoes td {
    border: none;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .tabela-cartoes td::before {
    content: attr(data-rotulo);
    font-size: 0.8rem;
    color: var(--cor-texto-fraco);
    flex-shrink: 0;
  }

  /* A célula de ações ocupa a largura toda, com os botões lado a lado. */
  .tabela-cartoes td.acoes-celula {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cor-borda);
  }
  .tabela-cartoes td.acoes-celula::before { content: none; }
  .tabela-cartoes td.acoes-celula .acoes button { flex: 1; }

  /* Sem rolagem lateral: no celular não há o que rolar. */
  .tabela-rolavel { overflow-x: visible; }
}

/* --- Acessibilidade ----------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}