/* O visual que as três telas dividem: paleta, tipografia, botões, anexos e a barra de
   navegação. Antes disto, cada página tinha a sua cópia — e a cópia é o problema: mudar
   uma cor exigia lembrar de mudar nos três lugares, e quem esquecesse produzia duas telas
   do mesmo produto com caras diferentes.

   O que NÃO entra aqui: o que só existe numa tela (o card da agenda, a tabela do mês a
   mês, a listinha de horários). Estilo compartilhado bom é o que é mesmo comum; forçar o
   resto para cá só cria regra com exceção. */

:root{
  --mar:#0E3B43; --mar-claro:#2E7D82; --areia:#FBF8F1; --areia-2:#F2ECDD;
  --sol:#E9A03B; --tinta:#1C2B2E; --branco:#FFFFFF;

  /* Duas cores de apoio, escolhidas pelo contraste e não pelo olho: sobre branco dão
     4,8 e 5,9 — acima do mínimo de 4,5 que texto pequeno exige para ser legível por
     quem enxerga menos. O valor, em --tinta, fica em 14,6: a hierarquia continua
     clara sem que o secundário vire ilegível.
       --apagado  detalhe dentro do campo ("chegada", campo vazio)
       --rotulo   o nome do campo na coluna da esquerda */
  --apagado:#647574;
  --rotulo:#256E73;

  /* Verde e telha para entrada e saída de dinheiro: são as duas cores que carregam
     significado, e não decoração. Ambas passam do contraste mínimo. */
  --entra:#1F6B50; --sai:#9C4326;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Outfit',sans-serif;color:var(--tinta);background:var(--areia);
  line-height:1.5;-webkit-font-smoothing:antialiased;padding:1.2rem 5vw 3rem;
}

h1{
  font-family:'Fraunces',serif;font-weight:500;color:var(--mar);
  font-size:clamp(1.5rem,4vw,2rem);
}
h1 em{font-style:italic;color:var(--sol)}
h2{font-family:'Fraunces',serif;font-weight:500;color:var(--mar);font-size:1.1rem;margin:0 0 .6rem}

/* ---- botões ---- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;border:none;cursor:pointer;
  background:var(--sol);color:var(--mar);text-decoration:none;
  padding:.55rem 1.2rem;border-radius:999px;font-weight:600;font-size:.9rem;font-family:inherit;
  transition:transform .15s ease, background .15s ease;min-height:2.4rem;
}
.btn:hover{transform:translateY(-1px);background:#f0b054}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.sec{background:transparent;color:var(--rotulo);border:1.5px solid rgba(37,110,115,.4);font-weight:400}
.btn.sec:hover{background:rgba(37,110,115,.08)}
/* precisa do !important porque o .btn define display, e display vence o atributo hidden */
[hidden]{display:none !important}

/* ---- a barra que liga as três telas ----
   Em cima no computador; embaixo no celular, ao alcance do polegar. Três telas não
   justificam coluna lateral: ela rouba a largura que a tabela de doze meses precisa, e
   só compensa quando o produto tiver seis ou mais seções com hierarquia dentro. */
.navegacao{
  display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap;
  margin:0 0 1.4rem;padding-bottom:.6rem;border-bottom:1px solid rgba(14,59,67,.1);
}
.navegacao .casa{
  font-family:'Fraunces',serif;color:var(--mar);font-size:1rem;margin-right:.9rem;
  white-space:nowrap;
}
.navegacao a{
  font-size:.88rem;color:var(--apagado);text-decoration:none;
  padding:.35rem .85rem;border-radius:999px;white-space:nowrap;
}
.navegacao a:hover{background:var(--areia-2);color:var(--mar)}
.navegacao a[aria-current]{background:var(--mar);color:var(--areia);font-weight:500}
.navegacao a:focus-visible{outline:2px solid var(--sol);outline-offset:2px}

/* O canto da conta: "Entrar" ou "Sair". Empurrado para a ponta direita, e mais apagado
   que as seções — ele não é um lugar para onde se vai, é um estado. */
.navegacao .conta{
  margin-left:auto;font:inherit;font-size:.8rem;color:var(--apagado);
  background:none;border:0;cursor:pointer;text-decoration:none;
  padding:.35rem .7rem;border-radius:999px;white-space:nowrap;
}
.navegacao .conta:hover{background:var(--areia-2);color:var(--mar)}
.navegacao .conta:focus-visible{outline:2px solid var(--sol);outline-offset:2px}

@media (max-width:37rem){
  /* No celular a barra ocupa a largura toda e fica GRUDADA NO TOPO.
     Ela já morou embaixo, que é onde o polegar alcança — e foi um erro: no Chrome do
     Android, elemento com position:fixed preso ao rodapé é posicionado pela altura da
     janela COM a barra de endereço recolhida. Com ela aberta, que é como a página abre,
     a barra nasce fora da área visível e só aparece depois de rolar. Grudada no topo, o
     navegador não tem como escondê-la: o alto da área de rolagem está sempre à vista. */
  .navegacao{
    position:sticky;top:0;z-index:30;
    margin:-1.2rem -5vw 1.1rem;padding:.45rem 5vw;
    background:var(--areia);border-bottom:1px solid rgba(14,59,67,.12);
    gap:.15rem;
  }
  .navegacao .casa{display:none}
  .navegacao a{
    flex:1;text-align:center;border-radius:8px;padding:.5rem .2rem;min-height:2.9rem;
    display:flex;align-items:center;justify-content:center;font-size:.78rem;
  }
  /* A conta NÃO divide a largura com as quatro seções: `flex:1` nela faria a barra ter
     cinco partes iguais, e "Despesas" quebraria no meio. Ela fica do tamanho da palavra. */
  .navegacao .conta{
    flex:0 0 auto;margin-left:.2rem;padding:.5rem .55rem;min-height:2.9rem;
    display:flex;align-items:center;font-size:.72rem;
  }
}

/* ---- a faixa de "não salvou" ----
   Ela existe porque, com login, gravação pode ser recusada — e o estrago é o nome que a
   pessoa acabou de digitar existindo só na tela. Por isso ela é vermelha, larga e NÃO
   some sozinha: aviso que se apaga é aviso que se perde enquanto se digita. */
#falha-api{
  background:rgba(193,86,60,.12);color:var(--sai);
  border-left:3px solid var(--sai);border-radius:0 8px 8px 0;
  padding:.65rem .85rem;margin:0 0 1rem;font-size:.88rem;line-height:1.45;
}
#falha-api[hidden]{display:none}

/* ---- anexos: comprovante, nota, contrato ---- */
.anexar{
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:.82rem;color:var(--rotulo);padding:.3rem .75rem;border-radius:999px;
  /* a mesma espessura e o mesmo tom das etiquetas à espera — a nota que explica por que
     1,5px e não 1px está no card da agenda, junto da regra irmã */
  border:1.5px dashed rgba(37,110,115,.85);
  /* Altura em PIXEL INTEIRO, pelo mesmo motivo das etiquetas: a altura vinha do texto mais
     o padding e dava 29,688px, então a borda de baixo caía no meio de um pixel e era
     desenhada meio apagada. Era só este elemento na tela toda — as etiquetas já estão em
     32px cravados —, e é por isso que só o clipe parecia mais claro que os vizinhos.
     32px também o iguala à etiqueta ao lado, que é onde ele vive na agenda. */
  min-height:32px;
}
.anexar:hover{border-color:var(--sol);background:rgba(233,160,59,.08)}
.anexar input{display:none}
.anexos{display:flex;flex-wrap:wrap;gap:.35rem}
.anexo{
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--areia-2);border-radius:999px;padding:.15rem .3rem .15rem .7rem;
  font-size:.78rem;max-width:100%;
}
.anexo a{
  color:var(--mar);text-decoration:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:14rem;
}
.anexo a:hover{text-decoration:underline}
.anexo-apagar{
  border:none;background:transparent;cursor:pointer;color:var(--apagado);
  font-size:1rem;line-height:1;padding:.1rem .35rem;border-radius:999px;
}
.anexo-apagar:hover{background:rgba(156,67,38,.15);color:var(--sai)}
.enviando{font-size:.78rem;color:var(--rotulo);font-style:italic}

/* Dedo é maior que seta de mouse: no celular, nada de alvo com menos de 44px. */
@media (pointer: coarse), (hover: none){
  .btn{min-height:44px}
}

/* ---- a linha de lista ----
   Serve ao histórico de hospedagens e à lista de despesas: as duas mostram a mesma forma —
   quando, o quê, quanto, e um botão. Está aqui porque duas cópias disto viram, em um mês,
   duas listas com cara diferente na mesma aplicação.

   As colunas têm largura fixa e ficam juntas à esquerda, com a sobra na direita. Com a
   coluna do meio esticando até o fim, o valor e o botão iam para a outra ponta da tela e a
   linha virava uma ponte: o olho perdia o caminho entre o nome e o que ele custou. */
.mes{margin-bottom:1.1rem}
.mes-titulo{
  font-family:'Fraunces',serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:.8rem;font-weight:600;color:var(--mar-claro);
  border-bottom:1px solid rgba(14,59,67,.12);padding-bottom:.25rem;margin:0 0 .3rem;
}
.linha{
  display:grid;
  grid-template-columns:var(--col-quando,10.5rem) minmax(0,16rem) 7rem auto;
  /* alinhado pela PRIMEIRA LINHA DE TEXTO de cada célula, e não pelo centro: quando o
     lançamento tem anexo, a célula do meio fica mais alta, e centralizar fazia a data, o
     valor e o botão descerem para o meio dela — o nome ficava sozinho lá em cima. Com
     baseline, os quatro se leem na mesma linha e o anexo fica logo abaixo dela. */
  justify-content:start;align-items:baseline;gap:.3rem 1.2rem;
  padding:.5rem .3rem;border-top:1px solid rgba(14,59,67,.07);
}
.mes .linha:first-of-type{border-top:none}
.linha.pendente{background:rgba(233,160,59,.07);border-radius:8px}
.linha.editando{background:rgba(233,160,59,.14);border-radius:8px}
.linha-quando{font-size:.85rem;color:var(--mar);font-weight:600;white-space:nowrap}
.linha-quando .seta{color:var(--sol);margin:0 .25rem}
.linha-principal{display:flex;flex-direction:column;min-width:0}
.linha-nome{font-weight:600;color:var(--tinta);overflow-wrap:anywhere}
.linha-nome i{font-style:italic;font-weight:400;color:var(--apagado)}
.linha-meta{font-size:.8rem;color:var(--apagado)}
/* o anexo é informação, não ação: fica junto do que descreve o lançamento, e não no canto
   com os botões, onde ficava pendurado acima deles */
.linha-principal .anexos{margin-top:.25rem}
.linha-valor{
  font-variant-numeric:tabular-nums;font-weight:600;
  white-space:nowrap;text-align:right;color:var(--tinta);
}
.linha-valor.entra{color:var(--entra)}
.linha-valor.sai{color:var(--sai)}
.linha-acoes{display:flex;align-items:center;gap:.4rem}
.contagem{
  font-family:'Outfit',sans-serif;font-size:.85rem;color:var(--apagado);font-weight:400;
}
@media (max-width:37rem){
  /* No celular a linha continua sendo UMA linha. Ela já foi quebrada em três alturas —
     data, depois nome e valor, depois o botão — e o resultado foi uma faixa de 96px por
     lançamento: o botão de editar, alto por causa do alvo de dedo, esticava a altura toda
     e os outros itens ficavam boiando em torno dele.
     Cabe em uma porque o ANO SOME: o cabeçalho do mês já diz de que ano se trata, e é essa
     largura que faltava. O anexo, quando existe, é a única coisa que desce. */
  .linha{
    grid-template-columns:var(--col-quando-cel,5rem) minmax(0,1fr) auto auto;
    gap:.15rem .5rem;align-items:baseline;justify-content:stretch;
    padding:.35rem .2rem;
  }
  .linha-quando{font-size:.78rem;font-weight:500}
  .linha .ano{display:none}
  .linha-nome{font-size:.9rem}
  .linha-meta{font-size:.75rem}
  .linha-valor{font-size:.9rem;text-align:right}
  .linha-principal .anexos{margin-top:.2rem}
  /* o botão encolhe um pouco: continua com alvo de dedo pela altura da linha inteira */
  .linha-acoes .acao{padding:.3rem .6rem;font-size:.75rem}
}

/* ---- a barra de filtros ----
   Fica logo abaixo do título, antes de qualquer conteúdo, porque ela manda em tudo o que
   vem depois. Ao lado de um dos blocos — como já esteve, ao lado de "Mês a mês" — ela
   parece mandar só naquele bloco, e o leitor passa a duvidar se os números lá de cima
   estão no mesmo período. */
.filtros{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:baseline;margin:-.4rem 0 .2rem}
.filtro-ano{
  font-size:.78rem;color:var(--apagado);text-transform:uppercase;letter-spacing:.08em;
}
.filtro-ano select{
  font-family:inherit;font-size:.9rem;color:var(--mar);font-weight:600;text-transform:none;
  letter-spacing:0;background:transparent;border:none;
  border-bottom:1.5px solid rgba(14,59,67,.2);padding:.15rem .2rem;cursor:pointer;
}

/* ---- A lista ordenada: um rótulo, um número e a fatia ----
   Nasceu no card de canal do Financeiro, em HTML e não em SVG, e pela mesma razão que vale
   aqui: rótulo de tamanho variável não cabe em SVG no celular — o texto não quebra linha, a
   fonte escala junto com o desenho e a largura fixa obriga o card a rolar para o lado.

   Mora aqui, e não dentro de uma página, porque o relatório de hóspedes está no Histórico e
   o card de canal está no Financeiro. A versão do Financeiro pinta cada barra de uma cor
   posicional (.c0, .c1) porque são dois canais que se comparam; aqui é uma escala só, que é
   o certo quando as linhas são vinte e nenhuma delas é "a outra". */
.ranque{display:flex;flex-direction:column;gap:.5rem}
.ranque-linha{display:grid;grid-template-columns:1fr auto auto;gap:.5rem .6rem;align-items:baseline}
.ranque-nome{font-size:.88rem;color:var(--tinta)}
.ranque-conta{font-size:.88rem;font-weight:600;color:var(--mar);font-variant-numeric:tabular-nums}
.ranque-fatia{font-size:.78rem;color:var(--apagado);font-variant-numeric:tabular-nums;min-width:2.4rem;text-align:right}
.ranque-trilho{
  grid-column:1/-1;height:7px;border-radius:3px;
  background:rgba(14,59,67,.07);overflow:hidden;
}
.ranque-trilho i{display:block;height:100%;border-radius:3px;background:var(--mar-claro)}
/* A cauda e o exterior não são um lugar: são um agrupamento. Tom mais claro para que a
   leitura de cima para baixo não os confunda com uma cidade de verdade. */
.ranque-linha.agrupado .ranque-nome{color:var(--apagado);font-style:italic}
.ranque-linha.agrupado .ranque-trilho i{background:rgba(37,110,115,.35)}