/* ==========================================================================
   SGPrev · Sistema de Design
   Fonte única de verdade visual do SGPrev, RPPS Connect e material CONFIARii.
   Base: padrão aprovado em 31/08/2026 ("Tarefas da Equipe").

   Como usar:
     <link rel="stylesheet" href="/assets/sgprev-design.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap" rel="stylesheet">

   Regras invioláveis:
     1. Nenhuma cor fixa (hex/rgb literal) fora deste arquivo.
     2. Status e prioridade sempre via a variável local --c, nunca cor fixa.
     3. Um único acento de marca por tela: o azul (--accent).
     4. Profundidade vem da borda, não de sombra pesada.
     5. Modal cresce na vertical com rolagem interna, nunca na horizontal.
     6. O tema é escolha da pessoa. Só data-theme no <html> decide; o padrão,
        para quem nunca escolheu, é o claro. Ver o bloco TEMA logo abaixo.

   Contrato do tema (o HTML precisa cumprir):
     <html data-theme="<?= tema_usuario($u) ?>">   claro → atributo ausente
     A preferência mora na coluna `tema` do usuário e é carimbada pelo PHP na
     renderização — nunca aplicada por JS depois do load, senão a tela pisca
     no tema errado antes de corrigir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Triplas RGB sem vírgula para permitir opacidade: rgb(var(--accent) / .15)
   -------------------------------------------------------------------------- */

:root {
  /* Superfícies e texto */
  --bg:         241 245 249;
  --surface:    255 255 255;
  --surface-2:  248 250 252;
  --ink:         15  23  42;
  --muted:      100 116 139;
  --line:       226 232 240;

  /* Acento de marca */
  --accent:       2 132 199;   /* foco, sublinhado de aba, barra — não é fundo de texto */
  --accent-ink:   3 105 161;   /* link e rótulo sobre superfície */
  --btn-bg:       3 105 161;   /* fundo do botão primário: 5,9:1 com branco */
  --btn-bg-hover: 2  82 126;
  --on-accent:  255 255 255;   /* texto sobre --btn-bg; inverte no tema escuro */
  --sidebar:     15  23  42;

  /* Marca institucional CONFIARii — só para material impresso/apresentação.
     Não usar como acento de UI: a interface tem um acento só (--accent). */
  --brand-teal:  11 107 143;   /* #0b6b8f */
  --brand-green: 42 166  91;   /* #2aa65b */
  --brand-blue:  37  99 168;   /* #2563a8 */

  /* Escala tipográfica */
  --font-ui:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:'Sora', 'Inter', system-ui, sans-serif;
  --font-mono:   ui-monospace, 'SFMono-Regular', 'Cascadia Code', monospace;

  /* Raios e espaçamento */
  --r-card:   16px;
  --r-soft:   14px;
  --r-field:  10px;
  --r-pill:  999px;

  /* Sombra: sutil, apenas para camadas flutuantes (modal, dropdown) */
  --shadow-pop: 0 10px 30px rgb(15 23 42 / .18);
}

/* O tema é escolha da pessoa, não do sistema operacional.
   Só o atributo data-theme no <html> decide, e ele é carimbado pelo PHP a
   partir da preferência gravada no usuário. Sem data-theme, vale o claro
   acima — é o padrão de quem nunca escolheu.
   Não existe @media (prefers-color-scheme) neste arquivo, de propósito:
   o SO da máquina não sabe se a pessoa está conferindo repasse na tela ou
   conferindo o PDF impresso ao lado. */
:root[data-theme="dark"] {
  --bg:          2   6  23;
  --surface:    15  23  42;
  --surface-2:  30  41  59;
  --ink:       226 232 240;
  --muted:     148 163 184;
  --line:       51  65  85;
  --accent:     56 189 248;
  --accent-ink:125 211 252;
  --on-accent:   2   6  23;
  --sidebar:     2   6  23;
  --shadow-pop: 0 10px 30px rgb(0 0 0 / .5);
}

/* --------------------------------------------------------------------------
   2. CORES DE ESTADO
   Cada estado declara DUAS triplas:
     --c   cor de identidade  → fundo do chip, borda do kcard, barra, ponto
     --ci  cor de texto       → só o texto sobre o fundo do chip
   Por que duas: o texto na cor cheia sobre fundo a 15% dá 1,9:1 no tema claro
   (âmbar e sky são os piores) — ilegível. --ci é a mesma cor escurecida até
   ≥4,5:1. No tema escuro o problema se inverte e --ci é clareada.
   Regra: fundo/borda usam --c; texto de chip usa --ci. Nunca cor fixa.
   -------------------------------------------------------------------------- */

/* Status */
.s-nao-iniciado { --c: 148 163 184; --ci:  91 110 137; }
.s-em-progresso { --c:  59 130 246; --ci:  11  95 233; }
.s-em-teste     { --c: 245 158  11; --ci: 151  97   6; }
.s-aguardando   { --c: 139  92 246; --ci: 118  63 244; }
.s-completo     { --c:  34 197  94; --ci:  21 124  59; }

/* Prioridade */
.p-baixa        { --c: 148 163 184; --ci:  91 110 137; }
.p-media        { --c:  56 189 248; --ci:   6 116 164; }
.p-alta         { --c: 249 115  22; --ci: 177  75   5; }
.p-urgente      { --c: 244  63  94; --ci: 206  12  45; }

/* Semântica geral (alertas, validação, conformidade) */
.t-neutro       { --c: 148 163 184; --ci:  91 110 137; }
.t-info         { --c:  59 130 246; --ci:  11  95 233; }
.t-ok           { --c:  34 197  94; --ci:  21 124  59; }
.t-atencao      { --c: 245 158  11; --ci: 151  97   6; }
.t-risco        { --c: 249 115  22; --ci: 177  75   5; }
.t-critico      { --c: 244  63  94; --ci: 206  12  45; }

/* Tema escuro: --c continua igual (fundo), --ci é clareada para o texto */
:root[data-theme="dark"] .s-nao-iniciado,
:root[data-theme="dark"] .p-baixa,
:root[data-theme="dark"] .t-neutro     { --ci: 148 163 184; }
:root[data-theme="dark"] .s-em-progresso,
:root[data-theme="dark"] .t-info       { --ci:  78 142 247; }
:root[data-theme="dark"] .s-em-teste,
:root[data-theme="dark"] .t-atencao    { --ci: 245 158  11; }
:root[data-theme="dark"] .s-aguardando { --ci: 158 118 247; }
:root[data-theme="dark"] .s-completo,
:root[data-theme="dark"] .t-ok         { --ci:  34 197  94; }
:root[data-theme="dark"] .p-media      { --ci:  56 189 248; }
:root[data-theme="dark"] .p-alta,
:root[data-theme="dark"] .t-risco      { --ci: 249 115  22; }
:root[data-theme="dark"] .p-urgente,
:root[data-theme="dark"] .t-critico    { --ci: 245  80 108; }

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--ink));
  background: rgb(var(--bg));
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.015em;
  color: rgb(var(--ink));
  margin: 0 0 .5em;
}

h1 { font-size: 1.5rem;   font-weight: 800; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }

a { color: rgb(var(--accent-ink)); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted   { color: rgb(var(--muted)); }
.num     { font-variant-numeric: tabular-nums; }
.mono    { font-family: var(--font-mono); font-size: .8125rem; }

/* Foco visível — obrigatório, nunca remover sem substituir */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   4. SUPERFÍCIES
   -------------------------------------------------------------------------- */

.card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-card);
  padding: 1.25rem;
}

.softcard {
  background: rgb(var(--surface-2));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-soft);
  padding: 1rem;
}

/* Stat card: número grande em Sora, alinhado por tabular-nums */
.stat .n {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--ink));
}
.stat .k {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgb(var(--muted));
}

/* --------------------------------------------------------------------------
   5. CHIPS
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .75rem;
  padding: .16rem .55rem;
  white-space: nowrap;
}

/* Sempre combinado com uma classe de estado que define --c e --ci */
.tone {
  background: rgb(var(--c) / .15);
  color: rgb(var(--ci, var(--c)));
}

/* Variante contornada, para quando o chip fica sobre superfície colorida */
.tone-outline {
  background: transparent;
  color: rgb(var(--ci, var(--c)));
  box-shadow: inset 0 0 0 1px rgb(var(--c) / .45);
}

/* Ponto de estado, para tabelas densas onde o chip pesa demais */
.dot {
  width: .5rem; height: .5rem;
  border-radius: var(--r-pill);
  background: rgb(var(--c));
  display: inline-block;
  flex: none;
}

/* --------------------------------------------------------------------------
   6. BOTÕES
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-family: var(--font-ui);
  font-size: .8125rem;
  font-weight: 600;
  padding: .5rem .9rem;
  border-radius: var(--r-field);
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: rgb(var(--surface-2)); }

/* O fundo do botão é --btn-bg, não --accent: branco sobre --accent dá 4,1:1 no
   tema claro, abaixo do mínimo para texto de 13px. --btn-bg é o mesmo azul um
   passo mais escuro (5,9:1). No tema escuro o par inverte: fundo claro, texto
   slate-950 (9,4:1) — branco ali daria 2,1:1. */
.btn-pri {
  background: rgb(var(--btn-bg));
  border-color: rgb(var(--btn-bg));
  color: rgb(var(--on-accent));
}
.btn-pri:hover { background: rgb(var(--btn-bg-hover)); border-color: rgb(var(--btn-bg-hover)); }

/* Ação destrutiva — só no rodapé do modal, à esquerda */
.btn-danger {
  --c: 244 63 94;
  background: transparent;
  border-color: rgb(var(--c) / .45);
  color: rgb(var(--c));
}
.btn-danger:hover { background: rgb(var(--c) / .1); }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

.iconbtn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-field);
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  color: rgb(var(--muted));
  cursor: pointer;
}
.iconbtn:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }

/* --------------------------------------------------------------------------
   7. FORMULÁRIO
   -------------------------------------------------------------------------- */

.lbl {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgb(var(--muted));
  margin-bottom: .3rem;
}

.f {
  width: 100%;
  font-family: var(--font-ui);
  font-size: .875rem;
  color: rgb(var(--ink));
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-field);
  padding: .5rem .65rem;
}
.f:focus { border-color: rgb(var(--accent)); }
.f::placeholder { color: rgb(var(--muted)); }
textarea.f { min-height: 5rem; resize: vertical; }

/* Grid padrão de formulário: 2 colunas no desktop, 1 no mobile */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .span-2 { grid-column: 1 / -1; }
}

/* Mensagem de erro de campo */
.f-erro { --c: 244 63 94; }
.f-erro .f { border-color: rgb(var(--c)); }
.f-erro .msg { color: rgb(var(--c)); font-size: .75rem; margin-top: .25rem; }

/* --------------------------------------------------------------------------
   8. TABELA
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

table.std {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
}
table.std th {
  text-align: left;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgb(var(--muted));
  padding: .55rem .6rem;
  border-bottom: 1px solid rgb(var(--line));
  white-space: nowrap;
}
table.std td {
  padding: .6rem;
  border-bottom: 1px solid rgb(var(--line) / .7);
  vertical-align: middle;
}
table.std tbody tr:hover { background: rgb(var(--surface-2)); }
table.std .col-num { text-align: right; font-variant-numeric: tabular-nums; }
table.std .col-sel { width: 2.5rem; }

/* --------------------------------------------------------------------------
   9. NAVEGAÇÃO
   -------------------------------------------------------------------------- */

.navtab {
  display: inline-block;
  padding: .55rem .1rem;
  margin-right: 1.25rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgb(var(--muted));
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.navtab:hover { color: rgb(var(--ink)); text-decoration: none; }
.navtab.on {
  color: rgb(var(--accent-ink));
  border-bottom-color: rgb(var(--accent));
}

.rail {
  background: rgb(var(--sidebar));
  color: rgb(var(--line));
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .75rem 0;
}
.rail a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-field);
  color: rgb(var(--line) / .7);
}
.rail a:hover { background: rgb(255 255 255 / .08); color: #fff; text-decoration: none; }
.rail a.on   { background: rgb(var(--accent) / .2); color: rgb(var(--accent-ink)); }

/* Toolbar: ações à esquerda, busca à direita */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.toolbar .acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   10. AVATAR
   -------------------------------------------------------------------------- */

.avatar {
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .6875rem; font-weight: 700;
  background: rgb(var(--c, var(--accent)) / .18);
  color: rgb(var(--c, var(--accent)));
  flex: none;
}

/* --------------------------------------------------------------------------
   11. KANBAN
   -------------------------------------------------------------------------- */

.kcard {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-left: 3px solid rgb(var(--c));
  border-radius: var(--r-soft);
  padding: .75rem;
  margin-bottom: .6rem;
}
.kcard .titulo { font-weight: 600; font-size: .8125rem; }
.kcard .meta {
  display: flex; align-items: center; gap: .6rem;
  margin-top: .5rem;
  font-size: .75rem; color: rgb(var(--muted));
}

/* --------------------------------------------------------------------------
   12. MODAL
   Regra: cresce na vertical com rolagem interna. Largura travada.
   -------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgb(15 23 42 / .5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.modal-overlay[hidden] { display: none; }

.modal-card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  width: 100%;
  max-width: 42rem;        /* = max-w-2xl. Padrão para formulários. */
  margin: 1.5rem 0;
  padding: 1.5rem;
  max-height: 92vh;
  overflow-y: auto;
}
/* Só quando o conteúdo é genuinamente horizontal (tabela, pré-visualização) */
.modal-card.largo   { max-width: 48rem; }
.modal-card.extra   { max-width: 56rem; }

.modal-head {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1rem;
}
.modal-head .titulo { font-size: 1.125rem; font-weight: 800; font-family: var(--font-display); }
.modal-head .iconbtn { margin-left: auto; }

.modal-foot {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--line));
}
.modal-foot .direita { margin-left: auto; display: flex; gap: .5rem; }

/* --------------------------------------------------------------------------
   13. MINI-GRÁFICOS
   Rosca por stroke-dasharray, barra por largura %. Mesma paleta de estados.
   -------------------------------------------------------------------------- */

.donut { transform: rotate(-90deg); }
.donut .trilho { stroke: rgb(var(--line)); fill: none; }
.donut .arco   { stroke: rgb(var(--c)); fill: none; stroke-linecap: round;
                 transition: stroke-dashoffset .4s ease; }

.barra {
  height: .5rem;
  border-radius: var(--r-pill);
  background: rgb(var(--line));
  overflow: hidden;
}
.barra > i {
  display: block; height: 100%;
  background: rgb(var(--c));
  border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   14. IMPRESSÃO, RELATÓRIOS E PDF
   Aplica-se a relatórios do sistema e a material institucional CONFIARii.
   Documento oficial imprime sempre em tema claro, monocromático de marca.
   -------------------------------------------------------------------------- */

/* Capa de relatório — usar em qualquer PDF entregue ao município */
.rel-capa {
  --c: var(--brand-teal);
  padding: 3rem 2.5rem;
  border-top: 6px solid rgb(var(--brand-teal));
}
.rel-capa .orgao {
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgb(var(--brand-teal));
}
.rel-capa .titulo {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800;
  line-height: 1.15; margin: .75rem 0 .5rem;
}
.rel-capa .subtitulo { font-size: 1rem; color: rgb(var(--muted)); }
.rel-capa .rodape-capa {
  margin-top: 2.5rem; padding-top: 1rem;
  border-top: 1px solid rgb(var(--line));
  font-size: .75rem; color: rgb(var(--muted));
}

/* Cabeçalho corrido das páginas internas do relatório */
.rel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid rgb(var(--brand-teal));
  padding-bottom: .5rem; margin-bottom: 1.25rem;
  font-size: .75rem; color: rgb(var(--muted));
}
.rel-head .marca { font-weight: 700; color: rgb(var(--brand-teal)); letter-spacing: .04em; }

/* Bloco de assinatura — quatro olhos: dois signatários lado a lado */
.rel-assinaturas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  margin-top: 3rem;
  break-inside: avoid;
}
.rel-assinaturas .linha {
  border-top: 1px solid rgb(var(--ink));
  padding-top: .4rem;
  text-align: center;
  font-size: .75rem;
}

@media print {
  /* Documento oficial: sempre claro, independente do tema da tela */
  :root, :root[data-theme="dark"] {
    --bg: 255 255 255; --surface: 255 255 255; --surface-2: 250 250 250;
    --ink: 15 23 42; --muted: 90 100 115; --line: 200 210 220;
    --accent: var(--brand-teal); --accent-ink: var(--brand-teal);
  }

  @page { size: A4; margin: 18mm 16mm 20mm; }

  body { background: #fff; font-size: 10.5pt; }

  /* Fora do papel */
  .rail, .toolbar, .navtab, .btn, .iconbtn, .no-print { display: none !important; }

  /* Cartões viram blocos sóbrios */
  .card, .softcard {
    border: 1px solid rgb(var(--line));
    border-radius: 4px;
    padding: .75rem;
    break-inside: avoid;
  }

  /* Chip colorido não sobrevive a impressão em preto e branco:
     mantém o contorno e o texto, descarta o fundo */
  .chip.tone {
    background: transparent !important;
    color: rgb(var(--ci, var(--c)));
    box-shadow: inset 0 0 0 1px rgb(var(--c) / .6);
  }

  /* Tabelas longas: cabeçalho repete em cada página */
  table.std { break-inside: auto; }
  table.std thead { display: table-header-group; }
  table.std tr { break-inside: avoid; }

  h1, h2, h3 { break-after: avoid; }
  .rel-capa { break-after: page; }
  .quebra-pagina { break-before: page; }

  /* URLs explícitas: o leitor do PDF não pode clicar */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: rgb(var(--muted)); }
}

/* --------------------------------------------------------------------------
   15. APRESENTAÇÕES
   Paleta institucional para decks. Aqui o acento é o teal da marca, não o
   azul de UI: o deck representa a CONFIARii, não o produto.
   -------------------------------------------------------------------------- */

.deck {
  --accent: var(--brand-teal);
  --accent-ink: var(--brand-teal);
  font-family: var(--font-ui);
}
.deck h1, .deck h2 { font-family: var(--font-display); letter-spacing: -.02em; }
.deck .destaque { color: rgb(var(--brand-teal)); }
.deck .apoio    { color: rgb(var(--brand-green)); }

/* --------------------------------------------------------------------------
   16. ALTERNADOR DE TEMA
   Controle de dois estados. Mostra as duas opções e marca a ativa, em vez de
   um botão que diz "tema escuro" e obriga a pessoa a deduzir se isso é o
   estado atual ou o que vai acontecer ao clicar.
   -------------------------------------------------------------------------- */

.tema-switch {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-pill);
  background: rgb(var(--surface-2));
}
.tema-switch button {
  font-family: var(--font-ui);
  font-size: .75rem; font-weight: 600;
  padding: .3rem .75rem;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: rgb(var(--muted));
  cursor: pointer;
}
.tema-switch button:hover { color: rgb(var(--ink)); }
.tema-switch button[aria-pressed="true"] {
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  box-shadow: 0 1px 2px rgb(15 23 42 / .08);
}

/* --------------------------------------------------------------------------
   17. ACESSIBILIDADE E MOVIMENTO
   -------------------------------------------------------------------------- */

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

/* Texto só para leitor de tela — usar quando o chip de status for a única
   informação visual (a cor sozinha não comunica estado) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}