/* Painel de Oportunidades — 4 Reasons
   Cena de uso: duas pessoas decidindo, à noite, onde vale gastar esforço.
   O desenho existe para responder três perguntas em um olhar:
   quantos já estão disputando, quanto isso encosta no que a dupla sabe fazer,
   e se a leitura ainda vale. */

:root {
  --preto: #08090c;
  --fundo: #0b0d12;
  --camada: #11141b;
  --camada-alta: #161a23;
  --linha: #1f2530;
  --linha-forte: #2b3341;

  --texto: #e8ecf4;
  --texto-2: #9aa4b8;
  --texto-3: #626d82;

  --azul: #4d9dff;
  --azul-fundo: #12243d;
  --verde: #35c07a;
  --ambar: #e0a63a;
  --vermelho: #f2614f;

  --raio: 10px;
  --raio-p: 6px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { background: var(--preto); }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.011em; }
code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: .92em;
  color: var(--texto-2);
  background: var(--camada-alta);
  padding: .1em .4em;
  border-radius: 4px;
}
.fraco { color: var(--texto-3); }
.rot {
  display: block;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--texto-3);
  margin-bottom: 6px;
}

/* ---------------------------------------------------------------- topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 52px;
  padding: 0 18px;
  background: rgba(11, 13, 18, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topo-esq { display: flex; align-items: center; gap: 22px; }
.marca {
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: 15px;
}
.marca-ponto { color: var(--azul); }

.abas { display: flex; gap: 2px; }
.aba {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--raio-p);
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 500;
  transition: color .15s, background .15s;
}
.aba:hover { color: var(--texto); background: var(--camada); }
.aba.ativa { color: var(--texto); background: var(--camada-alta); }
.pino {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--azul);
  color: #04121f;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.topo-dir { display: flex; align-items: center; gap: 14px; }
.quem { color: var(--texto-3); font-size: 13px; }
.botao-texto {
  background: none;
  border: none;
  color: var(--texto-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  transition: color .15s;
}
.botao-texto:hover { color: var(--texto); }
.botao {
  background: var(--azul);
  color: #04121f;
  border: none;
  border-radius: var(--raio-p);
  padding: 7px 15px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: filter .15s;
}
.botao:hover { filter: brightness(1.1); }

main { padding: 18px; }
.main-quadro { padding: 14px 0 14px 18px; }
.coluna-unica { max-width: 780px; margin: 8px auto 60px; padding: 0 18px; }

/* ---------------------------------------------------------------- barra */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-right: 18px;
  margin-bottom: 16px;
}
.filtros { display: flex; align-items: center; gap: 16px; }

.campo-select { position: relative; }
select {
  appearance: none;
  background: var(--camada);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 6px 28px 6px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s;
}
select:hover { border-color: var(--linha-forte); }
.campo-select::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--texto-3);
  border-bottom: 1.5px solid var(--texto-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.alternador {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--texto-2);
  cursor: pointer;
  user-select: none;
}
.alternador input { position: absolute; opacity: 0; pointer-events: none; }
/* O pino tem classe propria de proposito: chamar de `.botao` colidia com o
   botao azul solido la de cima, que injetava padding 7px 15px e fazia o pino
   estourar o trilho. Nome generico dentro de componente e armadilha. */
.trilho {
  flex: none;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--linha-forte);
  padding: 2px;
  transition: background .2s var(--ease);
}
.trilho .trilho-pino {
  display: block;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--texto-3);
  transition: transform .22s var(--ease), background .2s;
}
.alternador input:checked + .trilho { background: var(--azul-fundo); }
.alternador input:checked + .trilho .trilho-pino {
  transform: translateX(14px);
  background: var(--azul);
}
.alternador input:focus-visible + .trilho { outline: 2px solid var(--azul); outline-offset: 2px; }

.resumo { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--texto-2); }
.resumo b { color: var(--texto); font-weight: 600; }
.resumo b.quente { color: var(--ambar); }
.resumo-sep { width: 1px; height: 13px; background: var(--linha-forte); }

/* ---------------------------------------------------------------- quadro */

/* O quadro ocupa a altura toda da janela e divide a largura entre as colunas
   que tem trabalho dentro. Coluna vazia vira uma faixa fina com o nome de pe:
   continua visivel como destino de arraste, sem cobrar espaco por isso. */
.quadro {
  display: flex;
  gap: 10px;
  height: calc(100vh - 122px);
  overflow-x: auto;
  padding-right: 18px;
  scrollbar-color: var(--linha-forte) transparent;
}
.coluna {
  flex: 1 1 0;
  min-width: 232px;
  max-width: 360px;
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px;
  display: flex;
  flex-direction: column;
  transition: flex-basis .22s var(--ease), min-width .22s var(--ease),
              max-width .22s var(--ease), background .16s;
}
.coluna.recolhida {
  flex: 0 0 46px;
  min-width: 46px;
  max-width: 46px;
  padding: 10px 0;
  background: transparent;
  border-style: dashed;
}

/* A entrada e a fila de triagem, e e onde o volume mora: ela toma a largura
   que sobra e dispoe os cartoes em grade. Uma coluna estreita com 50 cartoes
   obriga a rolar para saber o que existe — e o que existe e justamente a
   pergunta que esta tela responde. */
.coluna-entrada {
  flex: 4 1 0;
  max-width: none;
}
.coluna-entrada .pilha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  align-content: start;
  gap: 8px;
}
/* Enquanto um cartao esta no ar, toda coluna vira alvo de tamanho normal:
   mirar numa faixa de 46px com o dedo e pedir para errar.
   So o arraste expande — hover nao. Reflow do quadro inteiro porque o cursor
   passou por cima e o tipo de movimento que faz perder o lugar da leitura. */
.quadro.arrastando .coluna.recolhida,
.coluna.recolhida:focus-within {
  flex: 1 1 0;
  min-width: 232px;
  max-width: 360px;
  padding: 10px;
  background: var(--camada);
}

.coluna-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 10px;
}
.coluna-topo h2 {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-2);
  white-space: nowrap;
}
/* Na faixa recolhida o nome fica de pe e o contador some: o zero ja e dito
   pela propria coluna estar vazia. */
.coluna.recolhida .coluna-topo {
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 0;
}
.coluna.recolhida .coluna-topo h2 {
  writing-mode: vertical-rl;
  margin-top: 10px;
  color: var(--texto-3);
}
.coluna.recolhida .contador,
.coluna.recolhida .pilha { display: none; }
.quadro.arrastando .coluna.recolhida .coluna-topo,
.coluna.recolhida:focus-within .coluna-topo {
  flex-direction: row;
  justify-content: space-between;
  height: auto;
  padding: 2px 4px 10px;
}
.quadro.arrastando .coluna.recolhida .coluna-topo h2,
.coluna.recolhida:focus-within .coluna-topo h2 {
  writing-mode: horizontal-tb;
  margin-top: 0;
  color: var(--texto-2);
}
.quadro.arrastando .coluna.recolhida .contador,
.coluna.recolhida:focus-within .contador,
.quadro.arrastando .coluna.recolhida .pilha,
.coluna.recolhida:focus-within .pilha { display: flex; }
.quadro.arrastando .coluna.recolhida .contador { display: grid; }
.contador {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-3);
  background: var(--camada-alta);
  border-radius: 20px;
  padding: 1px 8px;
}
.coluna-entrada .coluna-topo h2 { color: var(--texto); }
.pilha {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Alvo de solta precisa existir mesmo com a coluna vazia. */
  min-height: 52px;
  border-radius: 8px;
  transition: background .16s, box-shadow .16s;
}
.coluna-vazia { color: var(--texto-3); font-size: 12px; padding: 6px 4px; margin: 0; }

/* ------------------------------------------------------------- arrastar */

.cartao { cursor: grab; touch-action: pan-y; }
.cartao:active { cursor: grabbing; }
/* O cartao original vira o buraco que mostra onde ele vai cair. */
.cartao.e-arrastando {
  opacity: .35;
  border-style: dashed;
  border-color: var(--azul);
  background: var(--azul-fundo);
}
/* A copia que segue o dedo. Fora do fluxo, sem capturar evento nenhum:
   se ela recebesse ponteiro, elementFromPoint devolveria ela mesma e o
   arraste nunca encontraria a coluna de baixo. */
.cartao-fantasma {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  margin: 0;
  animation: none;
  opacity: .95;
  transform-origin: top left;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .75);
  border-color: var(--azul);
  rotate: 1.4deg;
}
.sem-selecao { user-select: none; }
/* Enquanto o gesto corre, a coluna de destino se anuncia e nada mais se mexe:
   hover de cartao competindo com arraste faz o quadro inteiro tremer. */
.quadro.arrastando .cartao:hover { border-color: var(--linha); transform: none; }
.pilha.alvo {
  background: var(--azul-fundo);
  box-shadow: inset 0 0 0 1px var(--azul);
}
.cartao.e-gravado { animation: gravado .9s var(--ease); }
@keyframes gravado {
  0%   { box-shadow: 0 0 0 0 rgba(53, 192, 122, .55); }
  100% { box-shadow: 0 0 0 7px rgba(53, 192, 122, 0); }
}

.aviso {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 14px);
  max-width: min(520px, calc(100vw - 32px));
  background: var(--camada-alta);
  border: 1px solid var(--vermelho);
  border-radius: 8px;
  padding: 11px 15px;
  font-size: 13px;
  color: var(--texto);
  box-shadow: var(--sombra);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s var(--ease);
  z-index: 40;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .cartao.e-gravado { animation: none; }
  .aviso { transition: opacity .2s; }
}

/* ---------------------------------------------------------------- cartao */

.cartao {
  background: var(--camada-alta);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 11px 11px 9px;
  animation: entra .5s var(--ease) both;
  animation-delay: var(--atraso, 0ms);
  transition: border-color .16s, transform .16s var(--ease);
}
.cartao:hover { border-color: var(--linha-forte); transform: translateY(-1px); }
@keyframes entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cartao { animation: none; }
}

.cartao-titulo {
  display: block;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -.008em;
  margin-bottom: 10px;
}
.cartao-titulo:hover { color: var(--azul); }

/* A régua de disputa. O traço vertical é o teto; passar dele é o sinal. */
.disputa { margin-bottom: 10px; }
.disputa-trilho {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: var(--linha);
  overflow: hidden;
}
.disputa-nivel {
  height: 100%;
  border-radius: 2px;
  background: var(--verde);
}
.disputa-teto {
  position: absolute;
  left: 50%;
  top: -1px;
  width: 1px;
  height: 5px;
  background: var(--texto-3);
}
.disputa.media .disputa-nivel { background: var(--ambar); }
.disputa.alta .disputa-nivel { background: var(--vermelho); }
.disputa.sem-dado .disputa-nivel { background: repeating-linear-gradient(
    90deg, var(--linha-forte) 0 3px, transparent 3px 6px); }
.disputa-num {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-2);
}
.disputa.alta .disputa-num { color: var(--vermelho); }
.disputa.media .disputa-num { color: var(--ambar); }
.disputa .unidade { font-weight: 400; color: var(--texto-3); margin-left: 4px; }
.disputa.sem-dado .unidade { margin-left: 0; font-style: italic; }

.cartao-pe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 11.5px;
  color: var(--texto-3);
  margin-bottom: 9px;
}
.selo {
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--texto-2);
}
.valor { color: var(--verde); font-weight: 600; }
.aderencia { display: inline-flex; align-items: center; gap: 5px; color: var(--texto-2); }
.aderencia-barra {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--linha);
  overflow: hidden;
}
.aderencia-barra i { display: block; height: 100%; background: var(--azul); }
.marca-coment::before { content: "· "; }
.marca-velha { color: var(--ambar); }

/* Mover é ação secundária: fica quase invisível até a mão chegar no card. */
/* Com o arrastar funcionando, o select vira o caminho de teclado e o plano B
   sem JS: fica recolhido e aparece ao passar o mouse ou ao receber foco. */
.cartao .mover {
  max-height: 0;
  overflow: hidden;
  transition: max-height .18s var(--ease);
}
.cartao:hover .mover,
.cartao:focus-within .mover { max-height: 32px; }
.cartao .mover select {
  width: 100%;
  font-size: 11.5px;
  padding: 3px 22px 3px 7px;
  background: transparent;
  border-color: transparent;
  color: var(--texto-3);
}
.cartao:hover .mover select {
  background: var(--camada);
  border-color: var(--linha);
  color: var(--texto-2);
}
.cartao .mover select:focus { background: var(--camada); border-color: var(--azul); }

/* ---------------------------------------------------------------- detalhe */

.cabecalho-secao { margin: 26px 0 20px; }
.cabecalho-secao h1 { font-size: 21px; letter-spacing: -.02em; }
.apoio { color: var(--texto-2); margin: 7px 0 0; max-width: 62ch; }

.voltar { color: var(--texto-3); font-size: 13px; }
.voltar:hover { color: var(--texto); }
.detalhe h1 { font-size: 20px; line-height: 1.3; margin: 14px 0 10px; max-width: 30ch; }
.detalhe-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 12.5px; color: var(--texto-3); margin-bottom: 22px; }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: 20px;
}
.grade > div { background: var(--camada); padding: 13px 14px; }
.grade p { margin: 0; font-size: 14px; }
.grade .destaque { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.grade .ruim { color: var(--vermelho); }
.ausente { color: var(--texto-3); font-style: italic; }
small { display: block; color: var(--texto-3); font-size: 12px; margin-top: 5px; line-height: 1.45; }

.escopo {
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 15px;
  margin-bottom: 20px;
}
.escopo p { margin: 0; white-space: pre-wrap; max-width: 70ch; color: var(--texto); }

.acoes { display: flex; gap: 10px; align-items: center; margin-bottom: 30px; }
.acoes .mover { opacity: 1; min-width: 170px; }
.botao-link {
  background: var(--azul);
  color: #04121f;
  padding: 8px 15px;
  border-radius: var(--raio-p);
  font-weight: 600;
  font-size: 13px;
  transition: filter .15s;
}
.botao-link:hover { filter: brightness(1.1); }

.comentarios h2, .historico h2, .tabela h2, .linha-do-tempo h2 {
  font-size: 13px;
  color: var(--texto-2);
  margin-bottom: 12px;
}
.comentario {
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 8px;
}
.comentario p { margin: 5px 0 0; }
.hd { color: var(--texto-3); font-size: 12px; }
textarea {
  width: 100%;
  background: var(--camada);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 11px 13px;
  font: inherit;
  resize: vertical;
  transition: border-color .15s;
}
textarea::placeholder { color: var(--texto-3); }
textarea:focus { outline: none; border-color: var(--azul); }
.comentarios form { margin-top: 12px; display: flex; flex-direction: column;
  align-items: flex-end; gap: 9px; }

.historico { margin-top: 30px; }
.historico ul { list-style: none; padding: 0; margin: 0; }
.historico li {
  position: relative;
  padding: 7px 0 7px 16px;
  font-size: 13px;
  color: var(--texto-2);
  border-left: 1px solid var(--linha);
}
.historico li::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--linha-forte);
}
.historico em { color: var(--texto-3); font-style: normal; }

/* ---------------------------------------------------------------- agente */

.composicao {
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px;
  margin-bottom: 26px;
}
.composicao textarea { background: transparent; border: none; padding: 2px; }
.composicao-pe { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 10px; }
.dica { font-size: 12px; color: var(--texto-3); }
.alerta { color: var(--ambar); }

.instrucao {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 13px 14px;
  margin-bottom: 10px;
  background: var(--camada);
}
.instrucao header { display: flex; align-items: center; gap: 10px; font-size: 12px;
  margin-bottom: 8px; }
.instrucao header form { margin-left: auto; }
.estado-selo {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--camada-alta);
  color: var(--texto-2);
}
.estado-aberta .estado-selo { background: var(--azul-fundo); color: var(--azul); }
.estado-respondida .estado-selo { color: var(--verde); }
.estado-cancelada { opacity: .55; }
.instrucao-texto { margin: 0; }
.resposta {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--linha);
}
.resposta p { margin: 0; color: var(--texto-2); white-space: pre-wrap; }

.vazio-grande {
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  padding: 34px 20px;
  text-align: center;
}
.vazio-grande p { margin: 0 0 5px; }

.nota-tecnica {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}
.nota-tecnica ul { margin: 0; padding-left: 18px; color: var(--texto-2); font-size: 13px; }
.nota-tecnica li { margin-bottom: 6px; }

/* ---------------------------------------------------------------- rodadas */

.placar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: 30px;
}
.placar-item { background: var(--camada); padding: 14px 15px; }
.placar-nome { display: block; font-size: 12px; color: var(--texto-2); }
.placar-num {
  display: block;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 2px 0 4px;
}
.placar-detalhe { display: block; font-size: 12px; color: var(--texto-3); }

.tabela { margin-bottom: 34px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--linha);
}
th { color: var(--texto-3); font-weight: 500; font-size: 12px; }
td .selo { margin-right: 5px; }
.num { text-align: right; }
th.num { text-align: right; }

.linha-do-tempo ol { list-style: none; padding: 0; margin: 0; }
.linha-do-tempo li { display: flex; gap: 14px; padding: 8px 0;
  border-bottom: 1px solid var(--linha); font-size: 13px; }
.linha-do-tempo .quando { color: var(--texto-3); font-size: 12px; padding-top: 1px;
  min-width: 38px; }
.linha-do-tempo a { font-weight: 500; }
.linha-do-tempo a:hover { color: var(--azul); }
.evento { color: var(--texto-3); margin-left: 7px; font-size: 12px; }

/* ---------------------------------------------------------------- entrar */

.login {
  max-width: 320px;
  margin: 16vh auto;
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 30px;
  box-shadow: var(--sombra);
}
.login h1 { font-size: 19px; letter-spacing: -.02em; }
.login .sub { color: var(--texto-3); margin: 5px 0 24px; font-size: 13px; }
.login label { display: block; margin-bottom: 14px; font-size: 12px; color: var(--texto-2); }
.login input {
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border-radius: var(--raio-p);
  border: 1px solid var(--linha);
  background: var(--fundo);
  color: var(--texto);
  font: inherit;
  transition: border-color .15s;
}
.login input:focus { outline: none; border-color: var(--azul); }
.login .botao { width: 100%; padding: 10px; margin-top: 6px; }
.erro { color: var(--vermelho); font-size: 13px; margin-top: 0; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 3px; }

@media (max-width: 700px) {
  .barra { flex-direction: column; align-items: flex-start; }
  .quadro { grid-auto-columns: 84vw; }
  .topo { padding: 0 12px; }
  .abas .aba { padding: 6px 9px; }
}