/* ============================================================================
   FINANCEIRO GGPEL
   Direcao: livro razao, nao painel de startup. A tela e uma folha pautada, com
   fio de cabelo no lugar de sombra e raio de 4px no lugar de cartao arredondado.
   O produto responde UMA pergunta ("o caixa aguenta?"), entao a cor tem UMA
   ideia: verde-cofre = acima do piso, ambar = encostando, vermelho-tinta =
   rompeu. O verde tambem e a cor de acao, para nao existir um segundo idioma.
   Todo numero e monoespacado e tabular, porque coluna de dinheiro que nao
   alinha e coluna que ninguem confere.
   ========================================================================= */

@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fontes/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fontes/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fontes/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fontes/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fontes/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fontes/ibm-plex-mono-latin-700-normal.woff2') format('woff2');
}

:root {
  --tinta:        #141a24;
  --tinta-2:      #1d2531;
  --tinta-3:      #2a3442;
  --papel:        #f0f2f5;
  --folha:        #ffffff;
  --regua:        #dde1e7;
  --regua-fraca:  #eaedf1;
  --grafite:      #5a6675;
  --grafite-2:    #8b95a3;

  --cofre:        #1f6f5c;
  --cofre-fundo:  #e4f0ec;
  --cofre-forte:  #175443;
  --ambar:        #a9720c;
  --ambar-fundo:  #faf0dd;
  --sangue:       #b3202e;
  --sangue-fundo: #fbe9ea;
  --nota:         #2f5d9e;
  --nota-fundo:   #e8eef8;

  --raio: 4px;
  --fio: 1px solid var(--regua);
  --sombra-alta: 0 18px 48px rgba(20, 26, 36, .28);

  --fonte: 'Plex Sans', 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --numero: 'Plex Mono', 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

/* O atributo `hidden` vem da folha do navegador e PERDE para qualquer regra do
   autor. Como varios blocos aqui declaram `display: flex` na classe (.entrada,
   .aplicacao, .modal), sem esta linha eles aparecem todos ao mesmo tempo:
   login, troca de senha e modal empilhados na mesma tela. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  font-family: var(--fonte);
  font-size: 15px; line-height: 1.5;
  color: var(--tinta); background: var(--papel);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.015em; }

/* Todo numero do sistema alinha coluna com coluna. */
.num, .cartao__valor, .grade td, .lista-dados dd, .dia__valor, .dia__saldo,
.celula input, .campo--numero input, .cifra {
  font-family: var(--numero);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.olho {
  font-size: 10.5px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--grafite-2);
}

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

/* ---------------------------------------------------------------- entrada -- */

.entrada {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--tinta);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.035) 31px 32px);
}
.entrada__cartao {
  width: 100%; max-width: 372px; background: var(--folha);
  border-radius: var(--raio); padding: 34px 32px 30px;
  box-shadow: var(--sombra-alta);
  display: flex; flex-direction: column; gap: 15px;
}
.entrada__marca {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grafite-2); font-weight: 600;
}
.entrada__marca strong { color: var(--tinta); font-weight: 700; }
.entrada__titulo { font-size: 23px; margin: -8px 0 0; }
.entrada__texto { margin: -8px 0 4px; color: var(--grafite); font-size: 13px; }
.entrada__erro {
  margin: 0; padding: 10px 12px; border-left: 3px solid var(--sangue);
  background: var(--sangue-fundo); color: #8a1a25; font-size: 13px;
}

.campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.campo > span { font-weight: 600; color: var(--grafite); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 14px; color: var(--tinta); width: 100%;
  padding: 9px 11px; border: var(--fio); border-radius: var(--raio); background: var(--folha);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--cofre); box-shadow: inset 0 0 0 1px var(--cofre);
}
.campo--numero input { text-align: right; }
.campo__dica { font-size: 11.5px; color: var(--grafite-2); }

/* -------------------------------------------------------------- estrutura -- */

.aplicacao { display: flex; min-height: 100vh; }

.barra {
  width: 218px; flex: 0 0 218px; background: var(--tinta); color: #aeb8c6;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.barra__topo {
  padding: 20px 18px 16px; display: flex; align-items: flex-start; justify-content: space-between;
  border-bottom: 1px solid var(--tinta-3);
}
.barra__marca { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6f7c8e; font-weight: 600; }
.barra__marca strong { display: block; font-size: 17px; letter-spacing: -.01em; text-transform: none; color: #fff; font-weight: 700; }
.barra__fechar { display: none; background: none; border: 0; color: #6f7c8e; font-size: 24px; line-height: 1; cursor: pointer; }
.barra__menu { flex: 1; overflow-y: auto; padding: 10px 10px 18px; display: flex; flex-direction: column; gap: 1px; }
.barra__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 11px; border-radius: var(--raio); border: 0; background: none;
  color: #aeb8c6; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.barra__item:hover { background: var(--tinta-2); color: #fff; }
.barra__item--ativo { background: var(--cofre); color: #fff; font-weight: 600; }
.barra__item--ativo:hover { background: var(--cofre); }
.barra__icone { width: 16px; text-align: center; font-size: 13px; opacity: .85; }
.barra__rodape { padding: 13px 18px 16px; border-top: 1px solid var(--tinta-3); font-size: 11.5px; color: #6f7c8e; display: flex; flex-direction: column; gap: 3px; }
.barra__rodape strong { display: block; color: #cfd6de; font-weight: 600; font-size: 12.5px; }
.barra__rodape > span { display: block; overflow-wrap: anywhere; }
.barra__rodape .botao--texto { align-self: flex-start; margin-top: 2px; }
.barra__versao { font-family: var(--numero); font-size: 10px; color: #4b5765; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecalho {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 15px 26px; background: var(--papel); border-bottom: var(--fio);
}
.cabecalho__menu { display: none; background: none; border: 0; font-size: 19px; cursor: pointer; color: var(--tinta); }
.cabecalho__titulo { font-size: 18px; flex: 1; }
.cabecalho__acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.tela { padding: 22px 26px 60px; display: flex; flex-direction: column; gap: 18px; }

/* ---------------------------------------------------------------- botoes -- */

.botao {
  border: var(--fio); background: var(--folha); color: var(--tinta);
  padding: 7px 13px; border-radius: var(--raio);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.botao:hover { border-color: var(--grafite-2); }
.botao:disabled { opacity: .45; cursor: not-allowed; }
.botao--primario { background: var(--cofre); border-color: var(--cofre); color: #fff; }
.botao--primario:hover { background: var(--cofre-forte); border-color: var(--cofre-forte); }
.botao--perigo { background: var(--sangue); border-color: var(--sangue); color: #fff; }
.botao--perigo:hover { background: #8f1a25; border-color: #8f1a25; }
.botao--largo { justify-content: center; width: 100%; padding: 11px; font-size: 14px; }
.botao--texto { border: 0; background: none; padding: 0; color: #6f7c8e; font-size: 11.5px; font-weight: 500; }
.botao--texto:hover { color: #fff; }
.botao--pequeno { padding: 4px 9px; font-size: 11.5px; }

.abas { display: inline-flex; border: var(--fio); border-radius: var(--raio); overflow: hidden; background: var(--folha); }
.abas button {
  border: 0; border-right: var(--fio); background: none; padding: 7px 14px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--grafite); cursor: pointer;
}
.abas button:last-child { border-right: 0; }
.abas button:hover { background: var(--regua-fraca); }
.abas button.ativo { background: var(--tinta); color: #fff; }

/* -------------------------------------------------- hero: o numero e a regua -- */

.hero {
  background: var(--folha); border: var(--fio); border-radius: var(--raio);
  display: grid; grid-template-columns: minmax(260px, 320px) 1fr;
}
.hero__caixa { padding: 22px 24px; border-right: var(--fio); display: flex; flex-direction: column; gap: 3px; }
.hero__valor {
  font-family: var(--numero); font-variant-numeric: tabular-nums;
  font-size: 36px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1;
}
.hero__valor--verde { color: var(--cofre); }
.hero__valor--amarelo { color: var(--ambar); }
.hero__valor--vermelho { color: var(--sangue); }
.hero__nota { font-size: 12.5px; color: var(--grafite); }
.hero__margem { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--regua); font-size: 12.5px; color: var(--grafite); }
.hero__margem b { font-family: var(--numero); font-variant-numeric: tabular-nums; }

/* Recebiveis levam borda tracejada porque ainda NAO sao dinheiro na conta. */
.recebivel { margin-top: 10px; padding: 9px 11px; border: 1px dashed var(--regua); border-radius: var(--raio); background: #fafbfc; }
.recebivel__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; }
.recebivel__linha + .recebivel__linha { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--regua); }
.recebivel b { font-family: var(--numero); font-variant-numeric: tabular-nums; font-weight: 600; }
.recebivel__aviso { margin-top: 6px; font-size: 11px; color: var(--grafite-2); line-height: 1.4; }

/* A REGUA DOS 90 DIAS: cada dia e uma barra medida a partir do piso de
   seguranca. O piso e a linha do meio, entao romper o piso e literalmente
   a barra atravessar a linha e crescer para baixo. */
.regua { padding: 16px 20px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.regua__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.regua__legenda { font-size: 11.5px; color: var(--grafite); }
.regua__legenda b { font-family: var(--numero); font-variant-numeric: tabular-nums; }
.regua__pista { position: relative; height: 116px; display: flex; align-items: center; gap: 1px; }
.regua__piso { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--grafite-2); pointer-events: none; }
.regua__piso span {
  position: absolute; right: 0; top: -17px; font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grafite-2); background: var(--folha); padding-left: 6px;
}
.regua__dia { flex: 1 1 0; min-width: 0; height: 100%; position: relative; cursor: pointer; border: 0; background: none; padding: 0; }
.regua__dia::after { content: ''; position: absolute; inset: 0; background: transparent; }
.regua__dia:hover::after { background: rgba(20, 26, 36, .07); }
.regua__barra {
  position: absolute; left: 0; right: 0; height: 0;
  transition: height .5s cubic-bezier(.2, .8, .3, 1);
}
.regua__barra--acima { bottom: 50%; background: var(--cofre); }
.regua__barra--atencao { top: 50%; background: var(--ambar); }
.regua__barra--abaixo { top: 50%; background: var(--sangue); }
.regua__dia--hoje { box-shadow: inset 1px 0 0 var(--tinta), inset -1px 0 0 var(--tinta); }
.regua__marcas { display: flex; justify-content: space-between; font-size: 10px; color: var(--grafite-2); font-family: var(--numero); }
.regua__quebra {
  font-size: 12px; padding: 7px 10px; border-left: 3px solid var(--sangue);
  background: var(--sangue-fundo); color: #8a1a25;
}
.regua__quebra--ok { border-left-color: var(--cofre); background: var(--cofre-fundo); color: var(--cofre-forte); }

@media (prefers-reduced-motion: reduce) {
  .regua__barra { transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------- tira de numeros (ledger strip) -- */

/* A tira e uma faixa de numeros dividida por fio de cabelo. O fio vem de
   box-shadow em cada cartao, e nao de um fundo cinza aparecendo pelo vao: com
   fundo cinza, a ultima fila incompleta deixava um retangulo cinza vazio com
   cara de tela quebrada. */
.tira {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  background: var(--folha); border: var(--fio); border-radius: var(--raio); overflow: hidden;
}
.cartao {
  background: var(--folha); padding: 13px 16px; display: flex; flex-direction: column;
  gap: 3px; min-width: 0; box-shadow: 1px 0 0 var(--regua), 0 1px 0 var(--regua);
}
.cartao__rotulo { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grafite-2); }
.cartao__valor { font-size: 21px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.cartao__valor--medio { font-size: 17px; }
.cartao__nota { font-size: 11.5px; color: var(--grafite); line-height: 1.4; }
.cartao--verde .cartao__valor { color: var(--cofre); }
.cartao--amarelo .cartao__valor { color: var(--ambar); }
.cartao--vermelho .cartao__valor { color: var(--sangue); }

.painel { background: var(--folha); border: var(--fio); border-radius: var(--raio); overflow: hidden; }
.painel__cabeca { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: var(--fio); }
.painel__titulo { font-size: 13.5px; font-weight: 700; flex: 1; }
.painel__sub { font-size: 11.5px; color: var(--grafite-2); font-weight: 400; }
.painel__corpo { padding: 16px; }
.painel__corpo--liso { padding: 0; }

.colunas { display: grid; gap: 16px; grid-template-columns: 1.9fr 1fr; align-items: start; }
.colunas--meio { grid-template-columns: 1fr 1fr; }

/* --------------------------------------------------------------- tabelas -- */

.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grade { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grade th, table.grade td { padding: 7px 10px; text-align: right; white-space: nowrap; }
table.grade th {
  position: sticky; top: 0; z-index: 2; background: var(--folha);
  color: var(--grafite-2); font-size: 9.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; border-bottom: 1px solid var(--tinta); text-align: right;
}
table.grade th.texto, table.grade td.texto { text-align: left; font-family: var(--fonte); }
table.grade tbody tr { border-bottom: 1px solid var(--regua-fraca); }
table.grade tbody tr:hover { background: #fafbfc; }
table.grade tfoot td { border-top: 1px solid var(--tinta); font-weight: 700; background: var(--folha); }
.grade__separador td { background: var(--regua-fraca); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--grafite); padding: 4px 10px; text-align: left; font-family: var(--fonte); font-weight: 600; }

.linha--fechada td:first-child { border-left: 3px solid var(--cofre); }
.linha--hoje { background: #fbfcfd; }
.linha--hoje td:first-child { border-left: 3px solid var(--tinta); font-weight: 700; }
.linha--fds td:first-child { color: var(--grafite-2); }
.linha--rompeu td.saldo { color: var(--sangue); font-weight: 700; }
.linha--encostou td.saldo { color: var(--ambar); font-weight: 700; }

.celula { padding: 0 !important; }
.celula input {
  width: 100%; min-width: 96px; border: 0; background: none; font: inherit;
  font-family: var(--numero); font-variant-numeric: tabular-nums;
  padding: 7px 10px; text-align: right; color: var(--tinta); border-radius: 2px;
}
.celula input::placeholder { color: #c3cad3; }
.celula input:hover:not(:disabled) { background: var(--regua-fraca); }
.celula input:focus { outline: 2px solid var(--cofre); outline-offset: -2px; background: var(--folha); }
.celula input:disabled { color: var(--grafite-2); cursor: not-allowed; }
.celula--salvando input { background: var(--ambar-fundo); }
.celula--salvo input { background: var(--cofre-fundo); transition: background .9s ease .3s; }

.marca-obs { border: 0; background: none; cursor: pointer; color: var(--nota); font-size: 12px; padding: 0 0 0 5px; line-height: 1; }
.etiqueta { display: inline-block; padding: 1px 7px; border-radius: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.etiqueta--realizado { background: var(--cofre-fundo); color: var(--cofre-forte); }
.etiqueta--previsto { background: var(--regua-fraca); color: var(--grafite); }
.etiqueta--parcial { background: var(--ambar-fundo); color: var(--ambar); }

.positivo { color: var(--cofre); }
.negativo { color: var(--sangue); }
.neutro { color: var(--grafite-2); }

/* --------------------------------------------------- alertas e insights -- */

.pilha { display: flex; flex-direction: column; gap: 1px; background: var(--regua); }
.aviso-linha { display: block; padding: 11px 14px; font-size: 12.5px; line-height: 1.5; background: var(--folha); border-left: 3px solid var(--regua); }
.aviso-linha strong { display: block; font-size: 12px; margin-bottom: 2px; }
.aviso-linha--vermelho { border-left-color: var(--sangue); background: var(--sangue-fundo); color: #7d1a24; }
.aviso-linha--amarelo { border-left-color: var(--ambar); background: var(--ambar-fundo); color: #7d5309; }
.aviso-linha--azul { border-left-color: var(--nota); background: var(--nota-fundo); color: #23477a; }
.aviso-linha--bom { border-left-color: var(--cofre); background: var(--cofre-fundo); color: var(--cofre-forte); }
.aviso-linha--atencao { border-left-color: var(--ambar); background: var(--ambar-fundo); color: #7d5309; }
.aviso-linha--neutro { border-left-color: var(--grafite-2); color: var(--tinta); }

.vazio { padding: 30px 20px; text-align: center; color: var(--grafite-2); font-size: 12.5px; line-height: 1.6; }
.vazio strong { display: block; color: var(--tinta); font-size: 13.5px; margin-bottom: 4px; }

/* ------------------------------------------------------------ calendario -- */

.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--regua); border: var(--fio); border-radius: var(--raio); overflow: hidden; }
.calendario__cabeca { background: var(--folha); text-align: center; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--grafite-2); padding: 7px 0; }
.dia { background: var(--folha); padding: 7px 8px; min-height: 94px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; cursor: pointer; border: 0; text-align: left; font-family: inherit; color: inherit; }
.dia:hover { background: #fafbfc; }
.dia--fora { background: var(--regua-fraca); cursor: default; }
.dia--hoje { box-shadow: inset 0 0 0 2px var(--tinta); }
.dia__numero { font-weight: 700; font-size: 12px; display: flex; justify-content: space-between; align-items: center; }
.dia__valor { font-size: 10.5px; }
.dia__saldo { margin-top: auto; font-weight: 700; font-size: 11px; padding-top: 4px; border-top: 1px dashed var(--regua); }
/* Intensidade da saida: quanto mais escuro, maior o desembolso do dia. */
.dia--peso1 { background: #fdf6f6; } .dia--peso2 { background: #fbeced; }
.dia--peso3 { background: #f7dcde; } .dia--peso4 { background: #f2c9cc; }

/* ------------------------------------------------------------- graficos -- */

.grafico { position: relative; height: 340px; }
.grafico--baixo { height: 240px; }

/* -------------------------------------------------------------- torradas -- */

.avisos { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: min(430px, calc(100vw - 32px)); }
.torrada { background: var(--tinta); color: #fff; padding: 11px 14px; border-radius: var(--raio); font-size: 12.5px; line-height: 1.45; box-shadow: var(--sombra-alta); display: flex; gap: 10px; align-items: flex-start; border-left: 3px solid var(--grafite-2); }
.torrada--erro { border-left-color: var(--sangue); }
.torrada--alerta { border-left-color: var(--ambar); }
.torrada--ok { border-left-color: var(--cofre); }
.torrada button { background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; font-size: 15px; line-height: 1; }

/* ---------------------------------------------------------------- modal -- */

.modal { position: fixed; inset: 0; z-index: 70; background: rgba(20, 26, 36, .6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__caixa { background: var(--folha); border-radius: var(--raio); box-shadow: var(--sombra-alta); width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 13px; }
.modal__titulo { font-size: 17px; }
.modal__texto { font-size: 13px; color: var(--grafite); margin: 0; }
.modal__acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 4px; }
.modal__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.lista-dados { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 12.5px; align-items: baseline; margin: 0; }
.lista-dados dt { color: var(--grafite); }
.lista-dados dd { margin: 0; text-align: right; font-weight: 600; }
.lista-dados__regra { grid-column: 1 / -1; border-top: 1px solid var(--regua); margin: 3px 0; }

/* -------------------------------------------------------------- celular -- */

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero__caixa { border-right: 0; border-bottom: var(--fio); }
  .colunas, .colunas--meio { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .barra { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; height: 100dvh; }
  .barra--aberta { transform: translateX(0); box-shadow: var(--sombra-alta); }
  .barra__fechar { display: block; }
  .cabecalho__menu { display: block; }
  .cabecalho { padding: 13px 15px; }
  .tela { padding: 16px 13px 52px; }
  .modal__grade { grid-template-columns: 1fr; }
  .hero__valor { font-size: 30px; }
  .regua__pista { height: 92px; }
  .calendario { gap: 1px; }
  .dia { min-height: 74px; padding: 5px; font-size: 10px; }
  .dia__valor { font-size: 9.5px; }
}

/* ------------------------------------------------- utilitarios de arranjo --
   Estes existem porque a politica de seguranca da pagina (CSP) bloqueia o
   atributo `style` inline. Sem classe, todo formulario desmonta em uma coluna
   so. Sao poucos e nomeados pelo que fazem, nao pelo valor que carregam.      */

.empilha { display: flex; flex-direction: column; gap: 16px; }
.empilha--curta { gap: 8px; }
.empilha--media { gap: 10px; }

.formulario {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.formulario--largo { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.formulario--medio { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: stretch; }
.formulario--estreito { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.formulario--duplo { grid-template-columns: 1fr 1fr; }
.formulario--par { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.formulario--topo { align-items: start; }
.formulario__total { grid-column: 1 / -1; }
.formulario__acao { grid-column: 1 / -1; justify-self: start; }

.linha { display: flex; gap: 12px; align-items: center; }
.linha--junta { gap: 6px; }
.linha--quebra { flex-wrap: wrap; }
.linha__cresce { flex: 1; min-width: 0; }

/* Caixa de marcar: rotulo ao lado, nao embaixo. */
.campo--marca { flex-direction: row; align-items: center; gap: 8px; }
.campo--marca input { width: auto; }

.seletor-mes { padding: 6px 9px; }
/* Precisa ser mais especifico que `.campo select`, que forca 100%. */
.campo .modo-valor { width: auto; min-width: 68px; padding: 8px 6px; }
.estreito { max-width: 240px; }
.clicavel { cursor: pointer; }
.senha-gerada { font-size: 15px; letter-spacing: .04em; }

.espaco { margin-top: 14px; }
.espaco--curto { margin-top: 12px; }
.espaco--longo { margin-top: 16px; }
.espaco--minimo { margin-top: 8px; }
.acao-do-lado { margin-left: 8px; }
.menu__secao { padding: 14px 11px 5px; }

@media (max-width: 900px) {
  .formulario, .formulario--duplo, .formulario--par { grid-template-columns: 1fr; }
}

.empilha--larga { gap: 18px; }
.linha--forte td { font-weight: 700; }
.dia__saldo--amarelo { color: var(--ambar); }
.dia__saldo--vermelho { color: var(--sangue); }