/* ==========================================================================
 * Portal Natville - visual da casa (parte 2, 07/10/2026).
 *
 * Tokens (cores, tipografia, raios, sombras) e componentes copiados do
 * sistema de design da Gestao Comercial (css/00_design.css + app.css de la),
 * o padrao de aparencia de todos os sistemas da casa desde 03/10/2026. Veio
 * so o que o Portal usa: ele e pequeno (login, tela inicial, conta, admin).
 *
 * O que muda em relacao a casa, e por que:
 *   - Nada de estilo em linha: a politica de conteudo do Portal (CSP,
 *     main.py) e "style-src 'self'", sem unsafe-inline. Tudo que na casa era
 *     style="" virou classe aqui.
 *   - A dica "!" abre so com CSS (passar o mouse, focar, tocar). Na casa o
 *     balao e montado por JavaScript; aqui as telas que mostram segredo
 *     (cadastro do segundo fator, codigos de recuperacao) e as telas que a
 *     guarda devolve no endereco de outro sistema nao carregam script nenhum,
 *     e o "!" tem de funcionar nelas.
 *   - Sem menu lateral: sao poucas telas. Topo branco com a logo, a
 *     navegacao e o menu da pessoa.
 *   - Celular primeiro nas telas de entrada e na tela inicial (vendedor
 *     externo): alvos de toque de 44px, campos com letra de 16px (o iPhone
 *     amplia a tela ao focar campo de letra menor), nenhuma rolagem lateral.
 *
 * Tema: cada cor e UM token com os dois valores, light-dark(claro, escuro).
 * Quem escolhe e o color-scheme do :root - o do aparelho por padrao, ou o
 * que a pessoa escolheu (data-tema, posto por js/tema.js antes de pintar).
 * Cores SO por variavel; os hex abaixo SAO os tokens.
 * ========================================================================== */

/* ------------------------------------------------------------- tokens fixos */
:root {
  color-scheme: light dark;

  --fonte: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
           Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui,
                  -apple-system, Roboto, Arial, sans-serif;
  --fonte-mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;

  --raio-p: 6px;
  --raio: 8px;
  --raio-g: 14px;
  --raio-gg: 20px;

  --altura-topo: 60px;
  --folga: 28px;
  --toque: 36px;            /* altura minima de botao e campo; 44px no celular */

  --curva: cubic-bezier(.2, .8, .2, 1);

  /* Valores claros, para o navegador sem light-dark() (anterior a 2024). O
     bloco @supports abaixo os sobrepoe com os dois temas. */
  --fundo: #f4f6f9;
  --papel: #ffffff;
  --papel-2: #f8fafc;
  --tinta: #0f172a;
  --tinta-media: #334155;
  --tinta-fraca: #5b6b7f;
  --tinta-fraquissima: #69778a;
  --borda: #e3e8ef;
  --borda-forte: #cdd5df;
  --borda-campo: #8593a5;
  --cinza-fundo: #eef2f6;
  --marca: #003ea3;
  --marca-escura: #002d78;
  --marca-clara: #2a63c4;
  --marca-fundo: #ebf2fe;
  --marca-fundo-forte: #d6e4fb;
  --sobre-marca: #ffffff;
  --sobre-cor: #ffffff;
  --marca-hover: #002d78;
  --foco: #2a63c4;
  --verde: #13703f;
  --verde-fundo: #e3f5ea;
  --ambar: #8a5300;
  --ambar-fundo: #fdf1da;
  --vermelho: #b42318;
  --vermelho-fundo: #fdecea;
  --roxo: #5b3fc4;
  --roxo-fundo: #efebfd;
  --ciano: #0b6b80;
  --ciano-fundo: #e0f3f7;
  --linha-hover: #f5f8fd;
  --balao-fundo: #1e293b;
  --balao-tinta: #f8fafc;
  --sombra-1: 0 1px 2px rgb(15 23 42 / .06);
  --sombra: 0 1px 2px rgb(15 23 42 / .05), 0 4px 14px -6px rgb(15 23 42 / .10);
  --sombra-forte: 0 2px 6px -2px rgb(15 23 42 / .10), 0 18px 40px -12px rgb(15 23 42 / .28);
}
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }

/* ------------------------------------------------------- tokens de cor (tema) */
@supports (color: light-dark(#000, #fff)) {
  :root {
    --fundo:             light-dark(#f4f6f9, #0b1016);
    --papel:             light-dark(#ffffff, #121922);
    --papel-2:           light-dark(#f8fafc, #18212c);
    --tinta:             light-dark(#0f172a, #e7edf4);
    --tinta-media:       light-dark(#334155, #b8c4d2);
    --tinta-fraca:       light-dark(#5b6b7f, #8e9cad);
    /* 4,5:1 no papel: e a cor do travessao e das notas de apoio. */
    --tinta-fraquissima: light-dark(#69778a, #7c8a9b);
    --borda:             light-dark(#e3e8ef, #222d3a);
    --borda-forte:       light-dark(#cdd5df, #334153);
    /* Contorno de campo: 3:1 contra o papel (WCAG 1.4.11). */
    --borda-campo:       light-dark(#8593a5, #5a6878);
    --cinza-fundo:       light-dark(#eef2f6, #1c2531);

    /* Azul da logo (#003EA3, medido no arquivo); no escuro, clareado para
       manter 7:1 sobre o papel escuro. */
    --marca:             light-dark(#003ea3, #7aa8ff);
    --marca-escura:      light-dark(#002d78, #a9c6ff);
    --marca-clara:       light-dark(#2a63c4, #5b8fea);
    --marca-fundo:       light-dark(#ebf2fe, #13233d);
    --marca-fundo-forte: light-dark(#d6e4fb, #1b3359);
    --sobre-marca:       light-dark(#ffffff, #0a1426);
    --sobre-cor:         light-dark(#ffffff, #10151c);
    --marca-hover:       color-mix(in oklab, var(--marca), var(--tinta) 16%);
    --foco:              light-dark(#2a63c4, #8db5ff);

    --verde:             light-dark(#13703f, #4cc38a);
    --verde-fundo:       light-dark(#e3f5ea, #0e2a1c);
    --ambar:             light-dark(#8a5300, #f2b350);
    --ambar-fundo:       light-dark(#fdf1da, #2d220e);
    --vermelho:          light-dark(#b42318, #ff8b7f);
    --vermelho-fundo:    light-dark(#fdecea, #351816);
    --roxo:              light-dark(#5b3fc4, #b6a3ff);
    --roxo-fundo:        light-dark(#efebfd, #221c3d);
    --ciano:             light-dark(#0b6b80, #5cc9de);
    --ciano-fundo:       light-dark(#e0f3f7, #0d2a31);

    --linha-hover:       color-mix(in srgb, var(--marca) 5%, var(--papel));
    --balao-fundo:       light-dark(#1e293b, #e2e8f0);
    --balao-tinta:       light-dark(#f8fafc, #0f172a);

    --sombra-1: 0 1px 2px light-dark(rgb(15 23 42 / .06), rgb(0 0 0 / .4));
    --sombra:   0 1px 2px light-dark(rgb(15 23 42 / .05), rgb(0 0 0 / .45)),
                0 4px 14px -6px light-dark(rgb(15 23 42 / .10), rgb(0 0 0 / .5));
    --sombra-forte: 0 2px 6px -2px light-dark(rgb(15 23 42 / .10), rgb(0 0 0 / .5)),
                    0 18px 40px -12px light-dark(rgb(15 23 42 / .28), rgb(0 0 0 / .7));
  }
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--borda-campo) transparent; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
  text-rendering: optimizeLegibility;
  /* Palavra comprida (um e-mail, um endereco) quebra em vez de empurrar a
     tela para o lado no celular. */
  overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--tinta); letter-spacing: -.01em; margin: 0; }
h1 { font-size: 22px; font-weight: 650; line-height: 1.25; }
h2 { font-size: 16px; font-weight: 650; line-height: 1.3; }
h3 { font-size: 14px; font-weight: 650; }
p { margin: 0; }
a { color: var(--marca); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
::selection { background: color-mix(in srgb, var(--marca) 24%, transparent); }
code { font-family: var(--fonte-mono); font-size: .92em; background: var(--cinza-fundo);
       padding: 1px 6px; border-radius: var(--raio-p); }
[hidden] { display: none !important; }

/* Foco visivel em tudo que se alcanca pelo teclado; o clique do mouse nao
   desenha o anel. */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.icone {
  width: 20px; height: 20px; flex: none; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Texto que o leitor de tela le e o olho nao ve. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.pular-conteudo {
  position: fixed; left: 12px; top: -80px; z-index: 200;
  background: var(--marca); color: var(--sobre-marca); padding: 10px 16px;
  border-radius: var(--raio); font-weight: 600; transition: top .15s;
}
.pular-conteudo:focus { top: 12px; text-decoration: none; }

/* O que so faz sentido com o script carregado (trocar tema, copiar): sem a
   classe "js" (posta por js/tema.js) o botao nem aparece. */
:root:not(.js) .so-js { display: none !important; }
:root:not([data-tema="escuro"]) .so-escuro,
:root[data-tema="escuro"] .so-claro { display: none; }
.menu-usuario-item.so-estreito { display: none; }

/* A logo e azul sobre transparente; no escuro vira branca (o azul da marca
   some sobre o papel escuro). Com script, vale a escolha da pessoa
   (data-tema); sem script, a preferencia do aparelho. */
:root[data-tema="escuro"] .logo { filter: brightness(0) invert(.94); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .logo { filter: brightness(0) invert(.94); }
}

/* =================================================================== TOPO */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--altura-topo); padding: 0 var(--folga);
  background: var(--papel); border-bottom: 1px solid var(--borda);
}
.topo-marca {
  display: flex; align-items: center; gap: 10px; flex: none; min-height: 44px;
  color: inherit; border-radius: var(--raio);
}
.topo-marca:hover { text-decoration: none; }
.logo-cheia { height: 26px; width: auto; display: block; }
.topo-nome {
  font-size: 12.5px; font-weight: 600; line-height: 1.15; color: var(--tinta-fraca);
  padding-left: 10px; border-left: 1px solid var(--borda-forte);
}
.topo-nav { display: flex; align-items: center; gap: 4px; margin-left: 14px; min-width: 0; }
.topo-nav a {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border-radius: 9px; color: var(--tinta-media); font-weight: 500; white-space: nowrap;
  transition: background .12s, color .12s;
}
.topo-nav a .icone { color: var(--tinta-fraca); width: 18px; height: 18px; }
.topo-nav a:hover { background: var(--cinza-fundo); color: var(--tinta); text-decoration: none; }
.topo-nav a.ativo { background: var(--marca-fundo); color: var(--marca); font-weight: 600; }
.topo-nav a.ativo .icone { color: var(--marca); }
.topo-ferramentas { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }

.botao-icone {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--tinta-media); cursor: pointer;
  transition: background .12s, color .12s;
}
.botao-icone:hover { background: var(--cinza-fundo); color: var(--tinta); }

/* ------------------------------------------------------- menu da pessoa */
/* <details>: abre e fecha no toque mesmo sem script. */
.menu-usuario { position: relative; }
.menu-usuario > summary {
  list-style: none; display: flex; align-items: center; gap: 9px; cursor: pointer;
  min-height: 44px; padding: 3px 8px 3px 6px; border-radius: 999px; border: 1px solid transparent;
  transition: background .12s;
}
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario > summary:hover, .menu-usuario[open] > summary { background: var(--cinza-fundo); }
.menu-usuario[open] > summary { border-color: var(--borda); }
.menu-usuario-quem { display: grid; line-height: 1.2; max-width: 18ch; min-width: 0; }
.menu-usuario-quem .nome { font-size: 13px; font-weight: 600; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario-quem .perfil { font-size: 11.5px; color: var(--tinta-fraca); white-space: nowrap; }
.menu-usuario-seta { width: 16px; height: 16px; color: var(--tinta-fraca); transition: transform .15s; }
.menu-usuario[open] .menu-usuario-seta { transform: rotate(180deg); }
.menu-usuario-painel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: min(288px, calc(100vw - 24px));
  padding: 8px; background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-forte);
  animation: surge .14s var(--curva);
}
.menu-usuario-cabeca {
  display: flex; align-items: center; gap: 11px; padding: 8px 8px 12px;
  border-bottom: 1px solid var(--borda); margin-bottom: 8px; min-width: 0;
}
.menu-usuario-cabeca > div { min-width: 0; }
.menu-usuario-cabeca strong, .menu-usuario-cabeca span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-usuario-cabeca strong { font-size: 14px; }
.menu-usuario-cabeca span { font-size: 12px; color: var(--tinta-fraca); }
.menu-usuario-tema {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px;
  margin: 0 0 6px; background: var(--cinza-fundo); border-radius: 10px;
}
.menu-usuario-tema button {
  display: grid; justify-items: center; gap: 3px; min-height: 44px; padding: 7px 2px 6px;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: 500 11.5px/1.1 var(--fonte); color: var(--tinta-fraca);
}
.menu-usuario-tema button .icone { width: 18px; height: 18px; }
.menu-usuario-tema button:hover { color: var(--tinta); }
.menu-usuario-tema button[aria-pressed="true"] {
  background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-1); font-weight: 600;
}
.menu-usuario form { margin: 0; }
.menu-usuario-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 9px 10px;
  border: 0; border-radius: var(--raio); background: none; cursor: pointer; text-align: left;
  font: 500 13.5px/1.2 var(--fonte); color: var(--tinta);
}
.menu-usuario-item .icone { width: 18px; height: 18px; color: var(--tinta-fraca); }
.menu-usuario-item:hover { background: var(--cinza-fundo); text-decoration: none; }
.menu-usuario-item.ativo { color: var(--marca); font-weight: 600; }
.menu-usuario-item.ativo .icone { color: var(--marca); }

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(140deg, var(--marca-fundo-forte), var(--marca-fundo));
  color: var(--marca); font: 700 12.5px/1 var(--fonte); letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marca) 18%, transparent);
}
.avatar.grande { width: 40px; height: 40px; font-size: 14px; }

/* --------------------------------------------------------------- conteudo */
main.conteudo { width: 100%; margin: 0; padding: 24px var(--folga) 56px; }
main.conteudo:focus { outline: none; }
main.tela-solta {
  min-height: 100dvh; display: grid; place-items: center; align-content: center;
  gap: 14px; margin: 0; padding: 24px 16px;
  background:
    radial-gradient(900px 520px at 12% -12%, color-mix(in srgb, var(--marca) 20%, transparent), transparent 62%),
    radial-gradient(720px 520px at 108% 112%, color-mix(in srgb, var(--ciano) 16%, transparent), transparent 60%),
    var(--fundo);
}

/* ================================================================= DICA "!" */
/* So CSS. O "!" e focavel (tabindex): passar o mouse, chegar com Tab ou
   tocar mostra o balao; sair, tirar o foco ou tocar fora esconde. O texto
   fica no HTML, ligado por aria-describedby, e o leitor de tela o le ao
   chegar no "!".
   O balao NAO se posiciona pelo "!" e sim pelo bloco que o contem (titulo
   da pagina, topo do cartao, campo do formulario - a lista de seletores logo
   abaixo): comeca na borda esquerda desse bloco e nunca passa da largura
   dele. Dica nova fora desses blocos: acrescente o bloco a lista. Sem script nao ha como medir a
   tela; ancorado assim ele nunca sai pela lateral no celular. */
.dica-caixa { display: inline-flex; align-items: center; position: relative; }
:is(.cabecalho-pagina, .cartao-topo, .campo, .secao, .caixa-login-titulo, .linha-acao, .senha-entregue, .sistema) .dica-caixa { position: static; }
.cabecalho-pagina, .cartao-topo, .campo, .secao, .caixa-login-titulo, .linha-acao, .senha-entregue, .sistema { position: relative; }
.dica {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 18px; height: 18px; margin: 0 0 0 6px;
  border: 1.5px solid currentColor; border-radius: 50%; background: transparent;
  color: var(--tinta-fraquissima); cursor: pointer; user-select: none;
  font: 800 11px/1 var(--fonte); text-transform: none; letter-spacing: 0;
  transition: color .12s, background .12s;
}
/* Area de toque de 44px em volta do desenho de 18px. */
.dica::after { content: ""; position: absolute; inset: -13px; border-radius: 50%; }
.dica:hover, .dica:focus { color: var(--marca); background: var(--marca-fundo); }
.balao {
  display: none; position: absolute; z-index: 70;
  left: var(--balao-esq, 0); top: var(--balao-topo, 100%); margin-top: 6px;
  width: max-content; max-width: 260px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--balao-fundo); color: var(--balao-tinta);
  font: 450 13px/1.5 var(--fonte); text-align: left; text-transform: none; letter-spacing: 0;
  white-space: pre-line; overflow-wrap: anywhere; box-shadow: var(--sombra-forte);
}
:is(.cabecalho-pagina, .cartao-topo, .campo, .secao, .caixa-login-titulo, .linha-acao, .senha-entregue, .sistema) .balao {
  max-width: min(340px, calc(100% - 2 * var(--balao-esq, 0px)));
}
.dica:hover + .balao, .dica:focus + .balao, .balao:hover { display: block; animation: surge .12s ease-out; }
.cartao-topo { --balao-esq: 20px; }
/* No campo o balao desce logo abaixo do rotulo, por cima da caixa de digitar. */
.campo { --balao-topo: 22px; --balao-esq: 0px; }

/* ================================================================== PAGINA */
.cabecalho-pagina {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 18px; flex-wrap: wrap; margin: 0 0 20px;
}
.cabecalho-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.cabecalho-titulo .dica { margin-left: 0; }
.cabecalho-sub {
  font-size: 13px; font-weight: 600; color: var(--tinta-fraca);
  padding: 2px 10px; border-radius: 999px; background: var(--cinza-fundo);
}
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.secao { display: flex; align-items: center; gap: 8px 12px; margin: 30px 0 12px; flex-wrap: wrap; }
.secao h2 { font-size: 16.5px; }
.secao .dica { margin-left: -4px; }
.setor:first-of-type > .secao { margin-top: 0; }

/* Abas (as telas da administracao). Rolam para o lado no celular, sem
   empurrar a pagina. */
.abas {
  display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--borda);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.abas::-webkit-scrollbar { display: none; }
.abas a {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 9px 12px;
  font-size: 13.5px; font-weight: 500; color: var(--tinta-fraca); white-space: nowrap;
  border-bottom: 2px solid transparent; border-radius: var(--raio) var(--raio) 0 0;
}
.abas a > .icone { width: 16px; height: 16px; }
.abas a:hover { color: var(--tinta); background: var(--cinza-fundo); text-decoration: none; }
.abas a.ativa { color: var(--marca); border-bottom-color: var(--marca); font-weight: 600; }

/* ------------------------------------------------------------- cartoes */
.cartao {
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra); padding: 20px 22px; margin-bottom: 20px; min-width: 0;
}
.cartao-composto { padding: 0; display: flex; flex-direction: column; }
.cartao-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px;
  padding: 16px 20px 0; flex-wrap: wrap;
}
.cartao-composto.com-tabela .cartao-topo { padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.cartao-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cartao-titulo h2 { font-size: 15px; }
.cartao-titulo > .icone { color: var(--tinta-fraca); width: 18px; height: 18px; }
.cartao-titulo .dica { margin-left: -2px; }
.cartao-corpo { padding: 14px 20px 20px; min-width: 0; flex: 1; }
.cartao-composto.com-tabela .cartao-corpo { padding: 0; }
.cartao-estreito { max-width: 460px; }

.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 20px; align-items: start; margin-bottom: 20px; }
.grade-2 > .cartao { margin-bottom: 0; }

/* ----------------------------------------------- cartoes dos sistemas (inicio) */
/* Molde: a grade de atalhos da casa (.atalhos/.atalho). O link cobre o
   cartao inteiro por uma camada: o cartao todo e o alvo do toque. */
.grade-sistemas {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.sistema {
  position: relative; display: flex; align-items: flex-start; gap: 14px; min-width: 0;
  min-height: 96px; padding: 16px 18px;
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sistema:has(.sistema-link:hover) { border-color: var(--marca-clara); box-shadow: var(--sombra-forte); transform: translateY(-1px); }
.sistema:has(.sistema-link:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.sistema:has(.sistema-link:active) { transform: none; }
.sistema-icone {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 13px; background: var(--marca-fundo); color: var(--marca);
  font: 700 15px/1 var(--fonte-titulo); letter-spacing: .02em;
}
.sistema-icone .icone { width: 24px; height: 24px; }
.sistema-texto { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.sistema-nome, .sistema-link {
  font: 650 15px/1.3 var(--fonte-titulo); color: var(--tinta); overflow-wrap: anywhere;
}
.sistema-link:hover, .sistema-link:focus-visible { text-decoration: none; outline: none; }
.sistema-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sistema-descricao {
  max-width: 100%; font-size: 13px; color: var(--tinta-fraca);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sistema .etiqueta { margin-top: 3px; }
/* Cartao de sistema de ENTRADA DIRETA (usuario e senha proprios - decisao do
   dono do sistema, 08/10/2026): a etiqueta da situacao, a marca "Entrada
   direta" e o "!" ficam numa linha so. O "!" tem de ficar POR CIMA da camada
   do link, que cobre o cartao inteiro (.sistema-link::after): tocar nele abre
   o balao, nao o sistema. O balao se ancora no cartao (lista da secao DICA). */
.sistema-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; }
.sistema-etiquetas .etiqueta { margin: 0; }
.sistema-etiquetas .dica { z-index: 1; margin-left: 2px; }
.sistema-seta { flex: none; align-self: center; color: var(--tinta-fraquissima); transition: transform .15s, color .15s; }
.sistema:has(.sistema-link:hover) .sistema-seta { color: var(--marca); transform: translateX(2px); }
/* "Em breve": apagado pelo tom, nao por transparencia - o texto continua
   com contraste para ler. "Em manutencao" NAO fica apagado: e passageiro, e
   o cartao so perde o link (para quem nao e administrador). */
.sistema.apagado { background: var(--papel-2); box-shadow: none; border-style: dashed; border-color: var(--borda-forte); }
.sistema.apagado .sistema-icone { background: var(--cinza-fundo); color: var(--tinta-fraquissima); }
.sistema.apagado .sistema-nome { color: var(--tinta-fraca); }

/* ---------------------------------------------------------------- tabelas */
/* UMA linha por registro (pedido do usuario, 28/08/2026): texto longo e
   cortado com reticencias; a informacao de apoio (.sub) segue na mesma
   linha. Tabela larga rola DENTRO do cartao (.rolagem), nunca a pagina. */
.rolagem { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
/* A faixa do cabecalho da tabela e reta; sem isto o canto dela passaria por
   cima do canto arredondado do cartao. (Nao e "overflow: hidden" no cartao:
   cortaria o balao da dica do titulo.) */
.cartao-composto.com-tabela .rolagem { border-radius: 0 0 var(--raio-g) var(--raio-g); }
.cartao-composto.com-tabela > .rolagem:first-child { border-radius: var(--raio-g); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
th, td { padding: 0 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--borda); }
th {
  height: 40px; font: 600 12px/1.3 var(--fonte); color: var(--tinta-fraca);
  background: var(--papel-2); white-space: nowrap;
}
td { height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
td.compacto { max-width: 18ch; }
td.largo { max-width: 46ch; }
td.livre { max-width: none; }
td.numero, th.numero { text-align: right; }
td.serie, .serie { font-family: var(--fonte-mono); font-size: 12.5px; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--linha-hover); }
tbody tr:last-child td { border-bottom: 0; }
tbody td form { display: inline; margin: 0; }
td .sub { display: inline; font-size: 12px; color: var(--tinta-fraquissima); margin: 0 0 0 6px; }
td .etiqueta { vertical-align: middle; }
td.acao, th.acao { text-align: right; max-width: none; overflow: visible; }
.sub { display: block; font-size: 12px; color: var(--tinta-fraquissima); }
.nulo { color: var(--tinta-fraquissima); }
tr.inativa td { color: var(--tinta-fraca); }
td.vazio { height: auto; max-width: none; white-space: normal; text-align: center; padding: 6px 16px; }
td a.forte { font-weight: 600; }

/* -------------------------------------------------------------- etiquetas */
.etiqueta {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}
.etiqueta + .etiqueta { margin-left: 4px; }
.etiqueta.verde { background: var(--verde-fundo); color: var(--verde); }
.etiqueta.ambar { background: var(--ambar-fundo); color: var(--ambar); }
.etiqueta.vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.etiqueta.marca { background: var(--marca-fundo); color: var(--marca); }
.etiqueta.roxo { background: var(--roxo-fundo); color: var(--roxo); }
.etiqueta.ciano { background: var(--ciano-fundo); color: var(--ciano); }
.etiqueta.cinza { background: var(--cinza-fundo); color: var(--tinta-fraca); }
.etiqueta.ponto::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 0 -1px;
  border-radius: 50%; background: currentColor; vertical-align: 1px;
}

/* ----------------------------------------------------------------- botoes */
.botao, button.botao, a.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--toque); padding: 7px 14px; border-radius: var(--raio); cursor: pointer;
  font: 600 13.5px/20px var(--fonte); letter-spacing: 0; white-space: nowrap;
  background: var(--marca); color: var(--sobre-marca); border: 1px solid var(--marca);
  box-shadow: var(--sombra-1), inset 0 1px 0 rgb(255 255 255 / .12);
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .06s;
}
.botao:hover, button.botao:hover, a.botao:hover {
  background: var(--marca-hover); border-color: var(--marca-hover); color: var(--sobre-marca); text-decoration: none;
}
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao .icone { width: 17px; height: 17px; margin-left: -2px; }
.botao.secundario { background: var(--papel); color: var(--tinta); border-color: var(--borda-forte); box-shadow: var(--sombra-1); }
.botao.secundario:hover { background: var(--papel-2); color: var(--tinta); border-color: var(--borda-campo); }
.botao.fantasma { background: transparent; color: var(--tinta-media); border-color: transparent; box-shadow: none; }
.botao.fantasma:hover { background: var(--cinza-fundo); color: var(--tinta); border-color: transparent; }
.botao.perigo { background: var(--vermelho); border-color: var(--vermelho); color: var(--sobre-cor); }
.botao.perigo:hover {
  background: color-mix(in oklab, var(--vermelho), var(--tinta) 16%);
  border-color: color-mix(in oklab, var(--vermelho), var(--tinta) 16%); color: var(--sobre-cor);
}
.botao.secundario.perigo { background: var(--papel); color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 40%, transparent); }
.botao.secundario.perigo:hover { background: var(--vermelho-fundo); color: var(--vermelho); }
.botao.pequeno { min-height: 30px; padding: 4px 10px; font-size: 12.5px; line-height: 18px; }
.botao.pequeno .icone { width: 15px; height: 15px; }
.botao.largo { width: 100%; }
.botao:disabled, .botao[disabled] { opacity: .5; box-shadow: none; cursor: not-allowed; }

/* ------------------------------------------------------------ formularios */
form { margin: 0; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label { font-size: 12px; font-weight: 600; color: var(--tinta-fraca); }
.rotulo-campo { display: inline-flex; align-items: center; min-width: 0; }
.rotulo-campo .dica { width: 16px; height: 16px; font-size: 10px; margin-left: 5px; }
/* Seletor por exclusao (da casa): um <input> SEM type e campo de texto para
   o navegador, mas nao casa com input[type=text]. A cor da borda e do fundo
   vem de variaveis que os estados trocam, para nao depender de qual regra
   vence a disputa de especificidade. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
select, textarea {
  width: 100%; max-width: 100%; min-height: var(--toque);
  font-family: var(--fonte); font-size: 13.5px; line-height: 20px; padding: 7px 11px;
  border: 1px solid var(--campo-borda, var(--borda-campo)); border-radius: var(--raio);
  background: var(--campo-fundo, var(--papel)); color: var(--campo-tinta, var(--tinta));
  transition: border-color .12s, box-shadow .12s;
}
select { padding-right: 30px; }
input:hover, select:hover, textarea:hover { --campo-borda: var(--tinta-fraca); }
input:focus, select:focus, textarea:focus {
  --campo-borda: var(--marca-clara);
  outline: 2px solid transparent; outline-offset: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-clara) 28%, transparent);
}
input:disabled, select:disabled, textarea:disabled, input[readonly] {
  --campo-fundo: var(--cinza-fundo); --campo-tinta: var(--tinta-fraca); --campo-borda: var(--borda-forte);
  cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--tinta-fraquissima); opacity: 1; }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; margin: 0; flex: none; cursor: pointer; accent-color: var(--marca); }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 13px; }
.campo + .campo, .campo + .linha-campos, .linha-campos + .campo, .linha-campos + .linha-campos { margin-top: 15px; }
.linha-campos > .campo + .campo { margin-top: 0; }
.acoes-formulario { margin-top: 18px; justify-content: flex-end; }
label.marcavel {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 2px 0;
  font-size: 13.5px; font-weight: 500; color: var(--tinta); cursor: pointer;
}
label.marcavel .sub { display: inline; margin-left: 2px; }

/* Lista de marcar por grupo (os sistemas de cada setor). */
.lista-marcaveis { display: grid; gap: 16px 28px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.grupo-marcaveis { border: 0; padding: 0; margin: 0; min-width: 0; }
.grupo-marcaveis legend {
  padding: 0 0 4px; font-size: 11px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-fraquissima);
}

/* Barra de filtros: campos em linha, alinhados pela base. */
form.filtros {
  display: flex; gap: 10px 12px; flex-wrap: wrap; align-items: flex-end;
  padding: 12px 14px; margin-bottom: 18px;
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
}
form.filtros .campo { flex: 1 1 160px; max-width: 280px; margin-top: 0; }
form.filtros .campo label { font-size: 11.5px; }
form.filtros .acoes { flex: none; }

/* Campo com icone dentro e o botao de ver a senha (tela de entrada). */
.campo-icone { position: relative; display: block; }
.campo-icone > .icone {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--tinta-fraquissima); pointer-events: none;
}
.campo-icone > .icone ~ input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]) { padding-left: 38px; }
.campo-icone .ver-senha { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); }
.js .campo-icone:has(.ver-senha) input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]) { padding-right: 46px; }
.ver-senha .so-mostrando, .ver-senha.mostrando .so-escondida { display: none; }
.ver-senha.mostrando .so-mostrando { display: inline; }

/* Linha "o que e" + botao (acoes sobre um usuario, sobre a propria conta). */
.linha-acao {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--borda);
}
.linha-acao:first-child { padding-top: 0; }
.linha-acao:last-child { border-bottom: 0; padding-bottom: 0; }
.linha-acao-texto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-weight: 600; }
.linha-acao-texto .sub { display: inline; font-weight: 400; }
/* Acao que pede a senha de quem age, na mesma linha: campo + botao. */
.form-em-linha { display: flex; align-items: flex-end; gap: 8px 10px; flex-wrap: wrap; }
.form-em-linha .campo { flex: 1 1 170px; max-width: 240px; margin: 0; }
/* O campo "Sua senha" debaixo de uma lista de marcar. */
.senha-da-acao { margin-top: 18px; }
.senha-da-acao .campo { max-width: 280px; }

/* Ficha: pares "rotulo / valor". */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px 22px; margin: 0; }
.ficha .item { min-width: 0; }
.ficha dt { font-size: 12px; font-weight: 600; color: var(--tinta-fraca); }
.ficha dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.ficha + form, .ficha + .linha-acao, form + .ficha { margin-top: 18px; }

/* --------------------------------------------------------------- paginacao */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; }
.paginacao a, .paginacao span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: var(--toque);
  padding: 0 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta-media);
}
.paginacao a:hover { border-color: var(--borda-campo); color: var(--tinta); text-decoration: none; }
.paginacao .atual { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.paginacao .total { border: 0; background: none; color: var(--tinta-fraca); }

/* ---------------------------------------------------------- avisos na pagina */
.aviso, .erro, .info {
  padding: 12px 15px; border-radius: var(--raio); font-size: 13.5px; line-height: 1.5;
  border: 1px solid transparent; border-left-width: 3px; overflow-wrap: anywhere;
}
.aviso { background: var(--verde-fundo); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 28%, transparent); border-left-color: var(--verde); }
.erro { background: var(--vermelho-fundo); color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 28%, transparent); border-left-color: var(--vermelho); }
.info { background: var(--marca-fundo); color: var(--marca-escura); border-color: var(--marca-fundo-forte); border-left-color: var(--marca); }
.aviso.aviso-ambar { background: var(--ambar-fundo); color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 30%, transparent); border-left-color: var(--ambar); }
.com-icone { display: flex; align-items: center; gap: 8px; }
.com-icone .icone { width: 18px; height: 18px; }

/* Senha temporaria recem-criada: aparece UMA vez. Grande, de letra fixa e
   selecionavel de uma vez so. */
.senha-entregue {
  position: relative;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 20px;
  padding: 14px 18px; border-radius: var(--raio-g);
  background: var(--ambar-fundo); color: var(--ambar);
  border: 1px solid color-mix(in srgb, var(--ambar) 32%, transparent);
  --balao-esq: 18px;
}
.senha-entregue .dica { color: inherit; }
.senha-entregue-rotulo { display: inline-flex; align-items: center; font-weight: 650; }
.senha-entregue code {
  font-size: 19px; letter-spacing: .06em; padding: 6px 12px; user-select: all;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--borda-forte);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ estado vazio */
.estado-vazio { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 44px 20px; color: var(--tinta-fraca); }
.estado-vazio-icone {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px;
  border-radius: 16px; background: var(--cinza-fundo); color: var(--tinta-fraca);
  box-shadow: inset 0 0 0 1px var(--borda);
}
.estado-vazio-icone .icone { width: 26px; height: 26px; }
.estado-vazio-titulo { font: 650 15.5px/1.35 var(--fonte-titulo); color: var(--tinta); }
.estado-vazio-texto { font-size: 13.5px; max-width: 48ch; }
.estado-vazio .acoes { margin-top: 12px; justify-content: center; }
td.vazio .estado-vazio { padding: 22px 0; }

/* ---------------------------------------------------------------- toasts */
/* Avisos de redirecionar() nas telas com menu. Sem script ficam parados no
   canto, legiveis; com script o de sucesso some sozinho. */
.toasts {
  position: fixed; z-index: 95; top: calc(var(--altura-topo) + 12px); right: 16px;
  display: grid; gap: 10px; width: min(400px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  --toast-cor: var(--marca);
  position: relative; overflow: hidden; pointer-events: auto;
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 12px 8px 12px 15px; background: var(--papel); color: var(--tinta);
  border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-forte);
  animation: toast-entra .26s var(--curva);
}
.toast::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--toast-cor); }
.toast-ok { --toast-cor: var(--verde); }
.toast-erro { --toast-cor: var(--vermelho); }
.toast-icone { color: var(--toast-cor); margin-top: 1px; }
.toast-texto { font-size: 13.5px; line-height: 1.45; max-height: 40vh; overflow: auto; overflow-wrap: anywhere; }
.toast-fechar {
  display: grid; place-items: center; width: 32px; height: 32px; margin: -5px 0 0;
  border: 0; border-radius: 7px; background: none; color: var(--tinta-fraca); cursor: pointer;
}
.toast-fechar .icone { width: 16px; height: 16px; }
.toast-fechar:hover { background: var(--cinza-fundo); color: var(--tinta); }
.toast.saindo { animation: toast-sai .2s ease-in forwards; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes toast-sai { to { opacity: 0; transform: translateX(16px); } }

/* ---------------------------------------------- confirmacao (<dialog> nativo) */
dialog.modal {
  width: min(440px, calc(100vw - 32px)); padding: 0; margin: auto;
  border: 1px solid var(--borda); border-radius: var(--raio-gg);
  background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-forte);
}
dialog.modal[open] { animation: modal-entra .2s var(--curva); }
dialog.modal::backdrop { background: rgb(8 12 20 / .45); }
.modal-corpo { padding: 22px 22px 6px; }
.modal-corpo h2 { margin: 0 0 6px; font-size: 16px; }
.modal-corpo p { color: var(--tinta-media); font-size: 13.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 18px 22px 20px; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ============================================================ ENTRADA E ERRO */
.caixa-login {
  width: 100%; max-width: 400px; padding: 32px 24px 24px; border-radius: var(--raio-gg);
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  border: 1px solid var(--borda); box-shadow: var(--sombra-forte);
}
.caixa-login.larga { max-width: 460px; }
.login-logo { display: block; height: 46px; width: auto; margin: 0 auto 16px; }
.caixa-login-titulo { display: flex; align-items: center; justify-content: center; gap: 2px; margin: 0 0 20px; }
.caixa-login h1 { font-size: 19px; text-align: center; }
.caixa-login .campo label { font-size: 12.5px; color: var(--tinta-media); }
.caixa-login .botao.largo { margin-top: 18px; min-height: 44px; }
.caixa-login .erro, .caixa-login .aviso, .caixa-login .info { margin-bottom: 16px; }
.login-rodape { margin: 12px 0 0; text-align: center; font-size: 13px; }
.login-rodape a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
.login-marca { margin: 16px 0 0; text-align: center; font-size: 12px; color: var(--tinta-fraquissima); }

/* O codigo do aplicativo: seis numeros grandes, espacados. */
input.codigo:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]) {
  font: 600 24px/32px var(--fonte-mono); letter-spacing: .32em; text-align: center;
  padding: 8px 6px 8px 14px; min-height: 52px;
}
.qr {
  display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto 16px;
  padding: 6px; background: #ffffff; border: 1px solid var(--borda); border-radius: var(--raio-g);
}
.chave {
  display: block; padding: 9px 10px; text-align: center;
  font: 600 14px/1.5 var(--fonte-mono); word-spacing: .15em; overflow-wrap: anywhere; user-select: all;
  background: var(--papel-2); border: 1px dashed var(--borda-campo); border-radius: var(--raio);
}
details.recuperacao { margin-top: 14px; }
details.recuperacao > summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  color: var(--marca); font-size: 13px; font-weight: 600;
}
.codigos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.codigos code {
  display: block; text-align: center; padding: 9px 4px; font-size: 15px; letter-spacing: .04em;
  background: var(--papel-2); border: 1px solid var(--borda-forte); border-radius: var(--raio);
}

.cartao-mensagem {
  width: min(520px, 100%); margin: 0; text-align: center; padding: 34px 24px 28px;
  display: grid; justify-items: center; gap: 6px;
}
.cartao-mensagem .estado-vazio-icone { width: 60px; height: 60px; margin-bottom: 10px; }
.cartao-mensagem.perigo .estado-vazio-icone { background: var(--vermelho-fundo); color: var(--vermelho); box-shadow: none; }
.cartao-mensagem.atencao-tom .estado-vazio-icone { background: var(--ambar-fundo); color: var(--ambar); box-shadow: none; }
.cartao-mensagem h1 { font-size: 20px; }
.cartao-mensagem p { color: var(--tinta-media); max-width: 52ch; overflow-wrap: anywhere; }
.cartao-mensagem .acoes { margin-top: 16px; justify-content: center; }
.cartao-mensagem .botao { min-height: 44px; }

/* ------------------------------------------------------------ animacoes */
@keyframes surge { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================ TELA ESTREITA */
/* Celular e tablet em pe. Alvos de toque de 44px e letra de 16px nos campos
   (abaixo disso o iPhone amplia a tela ao focar e a pessoa fica "perdida"
   no zoom). */
@media (max-width: 760px) {
  :root { --folga: 16px; --altura-topo: 56px; --toque: 44px; }
  .topo { gap: 4px; }
  .topo-nav { display: none; }
  .menu-usuario-item.so-estreito { display: flex; }
  .menu-usuario-quem, .menu-usuario-seta { display: none; }
  .menu-usuario > summary { padding: 6px; }
  .botao-icone { width: 44px; height: 44px; }
  main.conteudo { padding: 18px var(--folga) 40px; }
  .cabecalho-pagina { margin-bottom: 16px; }
  .cartao { padding: 16px; }
  .cartao-composto { padding: 0; }
  .cartao-topo { padding: 14px 16px 0; --balao-esq: 16px; }
  .cartao-corpo { padding: 12px 16px 16px; }
  .toasts { top: 8px; right: 8px; left: 8px; width: auto; }
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
  select, textarea { font-size: 16px; }
  input.codigo:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]) { font-size: 24px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  label.marcavel { min-height: 44px; }
  .botao.pequeno { min-height: 36px; padding: 6px 12px; }
  .acoes-formulario .botao { flex: 1 1 auto; }
  form.filtros .campo { max-width: none; flex-basis: 100%; }
  form.filtros .acoes { width: 100%; }
  form.filtros .acoes .botao { flex: 1 1 auto; }
  .grade-sistemas { gap: 10px; }
  .sistema { padding: 14px; }
  .linha-acao > form, .linha-acao > .botao { width: 100%; }
  .linha-acao > form .botao { width: 100%; }
  .senha-entregue code { font-size: 17px; width: 100%; text-align: center; }
}
/* Aparelho de toque com tela larga (tablet deitado): os mesmos 44px. */
@media (pointer: coarse) {
  :root { --toque: 44px; }
  .botao-icone { width: 44px; height: 44px; }
  label.marcavel { min-height: 44px; }
}

/* ------------------------------------------------------------- impressao */
/* A tela dos codigos de recuperacao e feita para imprimir. */
@media print {
  .topo, .toasts, .pular-conteudo, .dica-caixa, .botao, .login-rodape, .abas { display: none !important; }
  body, main.tela-solta { background: #ffffff; }
  main.conteudo { padding: 0; }
  .cartao, .caixa-login, .sistema { box-shadow: none; break-inside: avoid; }
  .rolagem { overflow: visible; }
}