/* -------------------------------------------------------------------
   A tela da profissional. Pensada para celular primeiro:
   tela estreita, alvo grande para o polegar, teclado subindo por baixo.
   ------------------------------------------------------------------- */

/* As duas fontes moram DENTRO do projeto (pasta fontes/). Nada de puxar
   de site de fora: o aplicativo tem que abrir sem internet.
     Jost  -> os títulos e os botões. Geométrica, de caixa alta larga.
     Inter -> o texto miúdo. Neutra, feita para tela pequena. */
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 300 600;
  font-display: swap; src: url(fontes/jost-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 300 600;
  font-display: swap; src: url(fontes/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(fontes/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(fontes/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------
   A IDENTIDADE (7/9/2026)

   Copiada do site da Bellami, que é a referência da categoria: preto e
   branco, bege quente nas faixas, um fio de dourado, nada arredondado,
   título em caixa alta espaçado.

   O que NÃO foi copiado, de propósito: o texto miúdo em cinza claro e
   os alvos pequenos. Vitrine se olha sentado; isto ela usa de pé, com
   o cabelo da cliente na mão.
   ------------------------------------------------------------------- */
:root {
  --fundo: #f5f3f0;        /* o cinza-areia bem claro das faixas */
  --papel: #ffffff;
  --tinta: #0b0b0b;        /* o preto da marca, não um cinza */
  --tinta-fraca: #6f6b67;
  --borda: #e3e0dc;
  --destaque: #0b0b0b;     /* a cor de ação é o próprio preto */
  --destaque-fraco: #f1eee9;
  --areia: #ebe3d7;        /* a faixa quente */
  --ouro: #b08d57;         /* o fio dourado, usado com conta-gotas */
  --minha-bolha: #0b0b0b;
  --erro: #a02316;

  --fonte-titulo: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.55 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* --- Telas de entrada e cadastro ----------------------------------- */

.tela-simples {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.cartao {
  width: 100%;
  max-width: 380px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 0;
  padding: 28px 24px;
}

.cartao h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--destaque);
}

.apoio { margin: 4px 0 20px; color: var(--tinta-fraca); font-size: 15px; }

label {
  display: block;
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--tinta-fraca);
}
label .opcional { font-weight: 400; opacity: 0.75; }
label small { display: block; margin-top: 4px; font-size: 12px; }

input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 13px 12px;
  border: 1px solid var(--borda);
  border-radius: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: inherit;
  font-size: 16px; /* 16px evita o iPhone dar zoom ao tocar no campo */
}
input:focus { outline: 2px solid var(--destaque); outline-offset: 1px; }

button[type="submit"] {
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  border: none;
  border-radius: 0;
  background: var(--destaque);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
button[type="submit"]:active { background: #333; }

.rodape-cartao {
  margin: 20px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--tinta-fraca);
}
.rodape-cartao a { color: var(--destaque); }

.aviso-erro {
  background: #fdeceb;
  border: 1px solid #f0b9b5;
  color: var(--erro);
  border-radius: 0;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 15px;
}

/* --- A conversa ---------------------------------------------------- */

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* acompanha o teclado do celular subindo */
}

.cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
  flex-shrink: 0;
}
.cabecalho .titulo {
  display: flex; flex-direction: column; line-height: 1.25;
  margin-left: auto; text-align: right; min-width: 0;
}
.cabecalho .titulo strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecalho strong { color: var(--destaque); font-size: 17px; }
.cabecalho span { color: var(--tinta-fraca); font-size: 13px; }

.cabecalho form { margin-left: auto; }
.sair {
  background: none;
  border: 1px solid var(--borda);
  border-radius: 0;
  padding: 6px 14px;
  color: var(--tinta-fraca);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.faixa-aviso {
  background: #fdf4e3;
  border-bottom: 1px solid #e8c98a;
  padding: 8px 16px;
  font-size: 13px;
  color: #7a5a12;
  text-align: center;
  flex-shrink: 0;
}

.conversa {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.dia {
  align-self: center;
  margin: 12px 0 4px;
  padding: 3px 12px;
  background: var(--destaque-fraco);
  color: var(--destaque);
  border-radius: 0;
  font-size: 12px;
}

.bolha {
  max-width: 82%;
  padding: 9px 13px 7px;
  border-radius: 0;
  background: var(--papel);
  border: 1px solid var(--borda);
  align-self: flex-start;
  border-bottom-left-radius: 5px;
  word-wrap: break-word;
}
.bolha.minha {
  align-self: flex-end;
  background: var(--minha-bolha);
  border-color: var(--minha-bolha);
  color: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 5px;
}

.bolha .texto { white-space: pre-wrap; }

.bolha time {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--tinta-fraca);
  text-align: right;
}
.bolha.minha time { color: rgba(255, 255, 255, 0.75); }

/* Os três pontinhos de "está escrevendo" */
.bolha.pensando .texto { display: flex; gap: 4px; padding: 4px 0; }
.bolha.pensando i {
  width: 7px; height: 7px;
  background: var(--tinta-fraca);
  border-radius: 50%;
  animation: pulsar 1.2s infinite;
}
.bolha.pensando i:nth-child(2) { animation-delay: 0.2s; }
.bolha.pensando i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulsar {
  0%, 60%, 100% { opacity: 0.25; }
  30%           { opacity: 1; }
}

/* --- Barra de escrever --------------------------------------------- */

.barra-escrever {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--papel);
  border-top: 1px solid var(--borda);
  flex-shrink: 0;
}

.barra-escrever textarea {
  flex: 1;
  resize: none;
  max-height: 140px;
  padding: 11px 14px;
  border: 1px solid var(--borda);
  border-radius: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
}
.barra-escrever textarea:focus { outline: 2px solid var(--destaque); outline-offset: 1px; }

#enviar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--destaque);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
#enviar:disabled { opacity: 0.4; }

/* --- Gravação de áudio --------------------------------------------- */

#gravar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: var(--fundo);
  color: var(--destaque);
  display: grid;
  place-items: center;
  cursor: pointer;
}
#gravar:active { background: var(--destaque-fraco); }
#gravar:disabled { opacity: 0.4; }

.barra-gravando {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--papel);
  border-top: 1px solid var(--borda);
  flex-shrink: 0;
}

.barra-gravando > button:first-child {
  background: none;
  border: none;
  color: var(--tinta-fraca);
  font: inherit;
  font-size: 15px;
  padding: 10px 4px;
  cursor: pointer;
}

.barra-gravando .pulso {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  color: var(--tinta);
}
.barra-gravando .pulso i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d0342c;
  animation: piscar 1.2s ease-in-out infinite;
}
@keyframes piscar {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

#pararGravacao {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--destaque);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* Bolha de áudio: mostra a transcrição com um sinalzinho de microfone */
.bolha .marca-audio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  opacity: 0.75;
  margin-bottom: 3px;
}

/* O atributo "hidden" do HTML tem que vencer o display:flex das barras.
   Sem esta linha, a barra de gravação aparece junto com a de escrever. */
[hidden] { display: none !important; }

/* --- Botão do WhatsApp --------------------------------------------- */

.botao-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 2px;
  padding: 10px 16px;
  border-radius: 0;
  background: #25d366;
  color: #08361a;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.botao-whatsapp:active { background: #1fb457; }
.bolha.minha .botao-whatsapp { color: #08361a; }

/* --- Fotos na conversa --------------------------------------------- */

#foto {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: var(--fundo);
  color: var(--destaque);
  display: grid;
  place-items: center;
  cursor: pointer;
}
#foto:active { background: var(--destaque-fraco); }
#foto:disabled { opacity: 0.4; }

.foto-da-conversa {
  display: block;
  width: 100%;
  max-width: 240px;
  border-radius: 0;
  margin-bottom: 6px;
}
.bolha .foto-da-conversa + .texto { margin-top: 2px; }

/* Com três botões, o campo de escrever precisa de mais folga */
.barra-escrever { gap: 6px; }
.barra-escrever textarea { min-width: 0; }

/* --- Cartão de orçamento ------------------------------------------- */

.cartao-orcamento {
  margin: 9px 0 4px;
}
.cartao-orcamento img {
  display: block;
  width: 100%;
  max-width: 260px;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}
.salvar-cartao {
  margin-top: 8px;
  padding: 9px 16px;
  border: 1px solid var(--borda);
  border-radius: 0;
  background: var(--papel);
  color: var(--destaque);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.salvar-cartao:disabled { opacity: 0.5; }
.bolha.minha .salvar-cartao { border-color: rgba(255, 255, 255, 0.4); }

/* --- Barra de baixo (trocar de tela) -------------------------------- */


/* Com o teclado aberto, a barra some para não roubar espaço da conversa. */

/* --- Tela "Hoje" ---------------------------------------------------- */

.rolagem-da-tela {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 24px;
}

.bloco {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 0;
  padding: 16px;
  margin-bottom: 12px;
}
.bloco h2 {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 600;
}
.bloco.atencao { border-color: #e8c98a; background: #fdf9f1; }

.bloco.dinheiro {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--destaque);
  border-color: var(--destaque);
  color: #fff;
}
.numero-grande strong { display: block; font-size: 32px; letter-spacing: -0.02em; }
.numero-grande span { font-size: 13px; opacity: 0.85; }
.numero-pequeno strong { display: block; font-size: 20px; }
.numero-pequeno span { font-size: 12px; opacity: 0.8; }

.horario {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}
.horario:last-child { border-bottom: none; padding-bottom: 0; }
.horario:first-of-type { padding-top: 0; }
.horario time {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: 17px;
  color: var(--destaque);
  min-width: 52px;
}
.horario strong { font-size: 16px; }
.horario .tipo { color: var(--tinta-fraca); font-size: 14px; margin-left: 6px; }
.horario .confirmado {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 0;
  background: #e3f1e6;
  color: #2f6b3d;
  font-size: 11px;
}

.linha {
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 15px;
}
.linha:last-child { border-bottom: none; padding-bottom: 0; }
.linha:first-of-type { padding-top: 0; }

.detalhe { color: var(--tinta-fraca); font-size: 13px; margin-top: 2px; }
.ok    { color: #2f6b3d; font-size: 13px; }
.falta { color: var(--erro); font-size: 13px; font-weight: 600; }

.dia-vazio {
  background: var(--papel);
  border: 1px dashed var(--borda);
  border-radius: 0;
  padding: 28px 20px;
  text-align: center;
  color: var(--tinta-fraca);
  margin-bottom: 12px;
}
.dia-vazio p { margin: 0 0 6px; }
.dia-vazio strong { color: var(--tinta); }

.rodape-da-tela {
  margin: 20px 4px 0;
  font-size: 13px;
  color: var(--tinta-fraca);
  text-align: center;
  line-height: 1.5;
}
.rodape-da-tela a { color: var(--destaque); }

/* --- Faz tempo que não vem -------------------------------------- */
/* O nome é um link porque a tela só mostra: quem age é a conversa.
   Tocar leva para o assessor com a frase já escrita, e ela decide. */
.chamar {
  color: var(--destaque);
  font-weight: 600;
  text-decoration: none;
}
.chamar:active { opacity: 0.6; }

/* O recado de apoio fecha o bloco, então a última linha perde a risca. */
.bloco .linha:last-of-type { border-bottom: none; }
.linha-apoio {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--tinta-fraca);
}
/* O que está escrito na ficha da cliente. Serve para ela NÃO chamar
   quem mudou de cidade ou parou — por isso não é um detalhe qualquer. */
.na-ficha {
  margin-top: 4px;
  font-size: 13px;
  color: #8a6d3b;
  background: #fdf9f1;
  border-radius: 0;
  padding: 4px 8px;
}

/* =====================================================================
   A AGENDA

   Feita para o polegar. Tudo que se toca tem no mínimo 44px de altura,
   que é o tamanho de um dedo — abaixo disso ela erra o alvo e desiste.
   ===================================================================== */

.agenda { display: flex; flex-direction: column; height: 100%; }

/* --- Cabeçalho: o mês e as setas da semana --- */
.cabecalho-agenda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6px;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
}
.cabecalho-agenda .seta {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--destaque); text-decoration: none;
}
.cabecalho-agenda .mes-atual {
  font-weight: 700; font-size: 17px; color: var(--tinta);
  text-decoration: none;
}

/* --- A tira da semana ---
   Sete dias sempre visíveis. É como ela pensa a agenda: "quinta",
   e não "17 de setembro". */
.tira-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
  padding: 4px 2px 8px;
}
.dia-da-tira {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 0 4px;
  text-decoration: none; color: var(--tinta);
  border-radius: 0;
  min-height: 58px;
}
.dia-da-tira .letra {
  font-size: 11px; color: var(--tinta-fraca); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dia-da-tira .numero { font-size: 17px; font-weight: 600; line-height: 1.1; }
.dia-da-tira.fechado .numero, .dia-da-tira.fechado .letra { color: #c3b8b2; }
.dia-da-tira.hoje .numero { color: var(--destaque); }
.dia-da-tira.escolhido { background: var(--destaque); }
.dia-da-tira.escolhido .letra,
.dia-da-tira.escolhido .numero { color: #fff; }
.dia-da-tira.escolhido .pontos i { background: #fff; }

/* Bolinhas em vez de número: densidade se lê de relance. */
.pontos { display: flex; gap: 2px; height: 5px; align-items: center; }
.pontos i { width: 4px; height: 4px; border-radius: 50%; background: var(--destaque); display: block; }
.pontos.vazio { height: 5px; }

/* --- O título do dia --- */
.titulo-do-dia {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin: 14px 4px 8px;
}
.titulo-do-dia h2 {
  margin: 0; font-size: 17px; font-weight: 700;
}
.hoje-marca {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #fff; background: var(--destaque);
  padding: 2px 7px; border-radius: 0; vertical-align: middle;
}
.voltar-hoje { font-size: 13px; color: var(--destaque); white-space: nowrap; }

/* --- A linha do resumo: ocupado / livre / na cadeira --- */
.resumo-do-dia { display: flex; gap: 6px; margin: 0 0 12px; }
.resumo-do-dia span {
  flex: 1; background: var(--papel); border: 1px solid var(--borda);
  border-radius: 0; padding: 8px 6px; text-align: center;
  font-size: 12px; color: var(--tinta-fraca);
}
.resumo-do-dia strong { display: block; font-size: 16px; color: var(--tinta); }

.aviso-palpite {
  background: #fdf9f1; border: 1px solid #e8c98a; border-radius: 0;
  padding: 8px 10px; font-size: 13px; color: #8a6d3b; margin: 0 0 12px;
}
.aviso-palpite a { color: #8a6d3b; }

/* --- Um horário marcado --- */
.horario-agenda {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--papel); border: 1px solid var(--borda);
  border-left: 4px solid var(--destaque);
  border-radius: 0; padding: 10px 8px 10px 10px; margin-bottom: 8px;
}
.horario-agenda.confirmado { border-left-color: #2f6b3d; }
.horario-agenda.feito      { border-left-color: #c3b8b2; opacity: 0.75; }
.horario-agenda.desmarcado { border-left-color: #c3b8b2; opacity: 0.6; }
.horario-agenda.desmarcado .nome { text-decoration: line-through; }

.horario-agenda .quando {
  display: flex; flex-direction: column; align-items: flex-end;
  min-width: 56px; padding-top: 1px;
}
.horario-agenda .quando strong { font-size: 16px; }
.horario-agenda .quando span { font-size: 12px; color: var(--tinta-fraca); }
.horario-agenda .quem { flex: 1; min-width: 0; }
.horario-agenda .nome { font-size: 16px; font-weight: 600; }
.horario-agenda .detalhe { margin-top: 1px; }
.horario-agenda .provavel {
  margin-top: 4px; font-size: 12px; color: var(--destaque);
  background: var(--destaque-fraco); border-radius: 0;
  padding: 3px 7px; display: inline-block;
}
.estimado {
  font-size: 11px; color: var(--tinta-fraca);
  border: 1px solid var(--borda); border-radius: 0; padding: 0 4px;
}
.selos { margin-top: 6px; }
.selo { font-size: 11px; border-radius: 0; padding: 2px 8px; }
.selo.marcado    { background: #f1ece9; color: var(--tinta-fraca); }
.selo.confirmado { background: #e6f0e8; color: #2f6b3d; }
.selo.desmarcado { background: #f1ece9; color: var(--tinta-fraca); }
.selo.feito      { background: #f1ece9; color: var(--tinta-fraca); }
.selo.sugerido   { background: #fdf9f1; color: #8a6d3b; }

.abrir-acoes {
  width: 40px; height: 40px; flex: 0 0 40px;
  border: none; background: none; color: var(--tinta-fraca);
  font-size: 22px; line-height: 1; cursor: pointer; border-radius: 0;
}
.abrir-acoes:active { background: var(--fundo); }

/* --- O buraco. É o que faz ela chamar alguém. --- */
.buraco {
  display: flex; align-items: center; gap: 8px;
  border: 1px dashed var(--borda); border-radius: 0;
  padding: 10px; margin-bottom: 8px;
  text-decoration: none; color: var(--tinta-fraca);
  min-height: 48px;
}
.buraco .texto { flex: 1; font-size: 14px; }
.buraco .texto em { font-style: normal; color: var(--tinta); font-weight: 600; }
.buraco .mais {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--destaque-fraco); color: var(--destaque);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600;
}
.buraco:active { background: var(--papel); }

.desmarcados { margin-top: 10px; }
.desmarcados summary {
  font-size: 13px; color: var(--tinta-fraca); padding: 8px 4px; cursor: pointer;
}

/* --- O botão de marcar, flutuando acima da barra de baixo --- */
.botao-flutuante {
  position: fixed; right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex; align-items: center; gap: 6px;
  background: var(--destaque); color: #fff;
  padding: 14px 20px; border-radius: 0;
  font-size: 15px; font-weight: 600; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.botao-flutuante span { font-size: 20px; line-height: 1; }
.botao-flutuante:active { opacity: 0.85; }

/* --- A grade do mês --- */
.grade-do-mes {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 0; padding: 8px;
}
.grade-do-mes .cabeca {
  text-align: center; font-size: 11px; color: var(--tinta-fraca);
  text-transform: uppercase; padding-bottom: 4px;
}
.grade-do-mes .quadrado {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; aspect-ratio: 1; border-radius: 0;
  text-decoration: none; color: var(--tinta); font-size: 14px;
}
.grade-do-mes .quadrado.fechado { color: #c3b8b2; background: #f3eeeb; }
.grade-do-mes .quadrado.hoje { outline: 2px solid var(--destaque); }
.grade-do-mes .quadrado.lotado { background: var(--destaque-fraco); }
.grade-do-mes .quadrado:active { background: var(--fundo); }

.legenda-do-mes {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin: 14px 0 0; font-size: 12px; color: var(--tinta-fraca);
}
.legenda-do-mes .amostra {
  width: 10px; height: 10px; border-radius: 0; display: inline-block;
  vertical-align: -1px; margin-right: 4px;
}
.amostra.ponto   { background: var(--destaque); border-radius: 50%; width: 6px; height: 6px; }
.amostra.cheio   { background: var(--destaque-fraco); }
.amostra.fechado { background: #ede7e3; }

/* --- Os horários de atendimento --- */
.explicacao { font-size: 13px; color: var(--tinta-fraca); margin: 0 4px 14px; }
.dia-da-semana {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 0; padding: 10px 12px 12px; margin: 0 0 10px;
}
.dia-da-semana legend {
  font-weight: 700; padding: 0 4px;
}
.dia-da-semana.fechado { opacity: 0.6; }
.dia-da-semana .atende {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; padding: 4px 0 10px;
}
.dia-da-semana .atende input { width: 20px; height: 20px; }
.faixa-de-horas { display: flex; gap: 10px; align-items: center; }
.faixa-de-horas.pausa { margin-top: 8px; }
.faixa-de-horas label {
  flex: 1; font-size: 12px; color: var(--tinta-fraca);
  display: flex; flex-direction: column; gap: 3px;
}
.faixa-de-horas input {
  font-size: 16px; padding: 9px 8px; border: 1px solid var(--borda);
  border-radius: 0; background: var(--fundo); color: var(--tinta);
  font-family: inherit; min-height: 44px;
}
.salvar-horarios {
  width: 100%; padding: 15px; border: none; border-radius: 0;
  background: var(--destaque); color: #fff; font-size: 16px;
  font-weight: 600; font-family: inherit; margin-top: 4px;
}

/* --- A folha de ações que sobe de baixo --- */
.fundo-escuro {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.18s;
  z-index: 40;
}
.fundo-escuro.aberto { opacity: 1; pointer-events: auto; }
.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--papel);
  border-radius: 0;
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform 0.22s ease-out;
  max-height: 84vh; overflow-y: auto;
}
.folha.aberta { transform: translateY(0); }
.folha .puxador {
  width: 38px; height: 4px; border-radius: 0; background: var(--borda);
  margin: 2px auto 12px;
}
.folha h3 { margin: 0 0 2px; font-size: 17px; }
.folha .sub { margin: 0 0 12px; font-size: 13px; color: var(--tinta-fraca); }
.folha .acao {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 12px; margin-bottom: 6px;
  border: 1px solid var(--borda); border-radius: 0;
  background: var(--fundo); color: var(--tinta);
  font-size: 15px; font-family: inherit; text-align: left;
  text-decoration: none; min-height: 48px;
}
.folha .acao:active { background: var(--destaque-fraco); }
.folha .acao.perigo { color: var(--erro); }
.folha form { margin: 0; }
.folha .campos { display: flex; gap: 10px; margin-bottom: 10px; }
.folha .campos label {
  flex: 1; font-size: 12px; color: var(--tinta-fraca);
  display: flex; flex-direction: column; gap: 3px;
}
.folha .campos input, .folha .campos select {
  font-size: 16px; padding: 10px 8px; border: 1px solid var(--borda);
  border-radius: 0; background: var(--fundo); color: var(--tinta);
  font-family: inherit; min-height: 44px;
}

/* O campo que ocupa a linha toda — a escolha da cliente, na tela de
   marcar. Um select estreito no celular abre uma lista minúscula. */
.campo-largo { display: block; }
.campo-largo select {
  width: 100%; font-size: 16px; padding: 11px 8px;
  border: 1px solid var(--borda); border-radius: 0;
  background: var(--fundo); color: var(--tinta);
  font-family: inherit; min-height: 48px;
}
.faixa-de-horas select {
  font-size: 16px; padding: 10px 8px; border: 1px solid var(--borda);
  border-radius: 0; background: var(--fundo); color: var(--tinta);
  font-family: inherit; min-height: 44px; width: 100%;
}


/* Título de bloco que leva para outra tela. A seta diz que dá para ir. */
.bloco h2.com-porta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.bloco h2.com-porta a {
  font-size: 13px; font-weight: 500; color: var(--destaque);
  text-transform: none; letter-spacing: 0; white-space: nowrap;
}

/* A caixinha de "marcar mesmo assim". Só aparece depois de um aviso —
   marcar em cima é decisão dela, mas tem que ser decisão, não descuido. */
.mesmo-assim {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; margin: 0 0 12px;
  border: 1px solid #e8c98a; border-radius: 0; background: #fdf9f1;
  font-size: 14px; color: #8a6d3b;
}
.mesmo-assim input { width: 20px; height: 20px; flex: 0 0 20px; }

/* O campo de escrever um serviço que ainda não existe. Fica abaixo da
   lista de propósito: quem já tem o serviço não precisa nem olhar. */
.servico-novo { margin-top: 12px; }
.servico-novo span {
  display: block; font-size: 12px; color: var(--tinta-fraca); margin-bottom: 4px;
}
.servico-novo input {
  width: 100%; font-size: 16px; padding: 11px 8px;
  border: 1px solid var(--borda); border-radius: 0;
  background: var(--fundo); color: var(--tinta);
  font-family: inherit; min-height: 48px;
}

/* --- A tela de serviços --- */
/* Excluir fica fora do cartão do serviço, e discreto: é a ação que ela
   menos vai usar e a única que dói se for por engano. */
.linha-excluir { margin: -6px 0 16px; text-align: right; }
button[type="submit"].excluir {
  border: none; background: none; font-family: inherit;
  font-size: 13px; font-weight: 400; color: var(--erro);
  padding: 8px 4px; width: auto; min-height: 40px;
  border-radius: 0; cursor: pointer;
}
button[type="submit"].excluir:active { background: none; opacity: 0.6; }
.dia-da-semana.novo { border-style: dashed; }

/* O título de cada categoria na lista de serviços. Discreto de
   propósito: é um separador, não um cabeçalho de tela. */
.titulo-de-categoria {
  margin: 22px 4px 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}
.titulo-de-categoria:first-child { margin-top: 4px; }
.campo-largo span em {
  font-style: normal;
  color: var(--tinta-fraca);
  font-weight: 400;
}


/* As duas telas de ajuste da agenda. Ficam discretas mas SEMPRE
   visíveis: antes só dava para chegar nelas por acidente. */
.ajustes-da-agenda {
  display: flex; gap: 8px; margin: 4px 0 14px;
}
.ajustes-da-agenda a {
  flex: 1; text-align: center;
  padding: 11px 8px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 0; text-decoration: none;
  font-size: 13px; color: var(--tinta);
}
.ajustes-da-agenda a:active { background: var(--destaque-fraco); }


/* Voltar para hoje é a ação mais repetida de uma agenda: ela anda pela
   semana, se perde, e quer voltar. Some quando já está em hoje — botão
   que não faz nada ensina a ignorar botão. */
.botao-hoje {
  background: var(--destaque); color: #fff;
  padding: 8px 16px; border-radius: 0;
  font-size: 14px; font-weight: 600; text-decoration: none;
  min-height: 36px; display: flex; align-items: center;
}
.botao-hoje:active { opacity: 0.85; }
/* Guarda o lugar do botão para o mês não pular quando ele some. */
.seta.vazia { width: 44px; height: 44px; }


/* --- Cada serviço é um cartão que abre --- */
.servico {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 0; margin: 0 0 8px; overflow: hidden;
}
.servico > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 12px; min-height: 52px;
  cursor: pointer; list-style: none;
}
.servico > summary::-webkit-details-marker { display: none; }
/* A setinha que gira ao abrir: diz que dá para abrir sem precisar de texto. */
.servico > summary::after {
  content: '›'; font-size: 20px; color: var(--tinta-fraca);
  transform: rotate(90deg); transition: transform 0.15s;
}
.servico[open] > summary::after { transform: rotate(270deg); }
.servico[open] > summary { border-bottom: 1px solid var(--borda); }
.servico > summary:active { background: var(--fundo); }
.nome-do-servico { font-size: 16px; font-weight: 600; flex: 1; }
.resumo-do-servico { font-size: 13px; color: var(--tinta-fraca); white-space: nowrap; }
.miolo-do-servico { padding: 12px; }


/* --- A lista de clientes --- */
.busca-de-cliente { display: flex; gap: 8px; margin: 0 0 14px; }
.busca-de-cliente input {
  flex: 1; font-size: 16px; padding: 11px 12px; min-height: 48px;
  border: 1px solid var(--borda); border-radius: 0;
  background: var(--papel); color: var(--tinta); font-family: inherit;
}
.busca-de-cliente button[type="submit"] {
  width: auto; padding: 0 18px; min-height: 48px; border-radius: 0;
  font-size: 14px;
}

.lista-de-clientes {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 0; overflow: hidden;
}
.cliente-na-lista {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; min-height: 60px;
  border-bottom: 1px solid var(--borda);
  text-decoration: none; color: var(--tinta);
}
.cliente-na-lista:last-child { border-bottom: none; }
.cliente-na-lista:active { background: var(--fundo); }
.cliente-na-lista .quem { flex: 1; min-width: 0; }
.cliente-na-lista strong { font-size: 16px; display: block; }
.seta-da-lista { color: var(--tinta-fraca); font-size: 20px; }

/* --- A ficha --- */
.quando-curto {
  min-width: 48px; font-size: 13px; color: var(--tinta-fraca); padding-top: 2px;
}
.valor-do-atendimento { font-size: 15px; font-weight: 600; white-space: nowrap; }
.bloco .linha { display: flex; gap: 10px; align-items: flex-start; }
.bloco .linha .quem { flex: 1; min-width: 0; }

/* Atalho que leva para a conversa com a frase pronta. Parece botão
   porque é ação — mas a ação acontece lá, não aqui. */
.acao-de-conversa {
  flex: 1; text-align: center;
  padding: 12px 8px; min-height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--destaque-fraco); border: 1px solid transparent;
  border-radius: 0; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--destaque);
}
.acao-de-conversa:active { opacity: 0.7; }


/* A caixa de anotações da ficha. */
.campo-largo textarea {
  width: 100%; font-size: 16px; padding: 11px 10px;
  border: 1px solid var(--borda); border-radius: 0;
  background: var(--fundo); color: var(--tinta);
  font-family: inherit; line-height: 1.5; resize: vertical;
}


/* =====================================================================
   A TELA DINHEIRO

   Duas listas: quem me deve, o que eu devo. O valor dela é ser lista —
   por isso nada de pizza, nada de painel.
   ===================================================================== */

.tira-de-horizontes {
  display: flex; gap: 5px; overflow-x: auto;
  padding: 8px 10px 10px;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
  flex-shrink: 0;
}
.tira-de-horizontes a {
  flex: 0 0 auto;
  padding: 8px 13px; border-radius: 0; min-height: 38px;
  display: flex; align-items: center;
  border: 1px solid var(--borda);
  font-size: 13px; color: var(--tinta-fraca);
  text-decoration: none; white-space: nowrap;
}
.tira-de-horizontes a.ativo {
  background: var(--destaque); border-color: var(--destaque);
  color: #fff; font-weight: 600;
}

.numeros-do-dinheiro {
  display: flex;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
  flex-shrink: 0;
}
.numeros-do-dinheiro div {
  flex: 1; padding: 12px 6px; text-align: center;
  border-right: 1px solid var(--borda);
}
.numeros-do-dinheiro div:last-child { border-right: none; }
.numeros-do-dinheiro strong {
  display: block; font-size: 17px; font-variant-numeric: tabular-nums;
}
.numeros-do-dinheiro span {
  font-size: 11px; color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: .05em;
}
.numeros-do-dinheiro .entra strong { color: #2f6b3d; }
.numeros-do-dinheiro .sai strong { color: var(--erro); }

.dia-do-dinheiro {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-fraca); margin: 18px 4px 7px;
}
.dia-do-dinheiro:first-child { margin-top: 4px; }

/* --- Um lançamento --- */
.movimento {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--papel); border: 1px solid var(--borda);
  border-left: 4px solid #2f6b3d;
  border-radius: 0; padding: 11px 8px 11px 11px; margin-bottom: 7px;
}
.movimento.sai { border-left-color: var(--erro); }
.movimento.vencida { border-color: var(--erro); }
.movimento.prevista { border-style: dashed; opacity: .82; }
.movimento .quem { flex: 1; min-width: 0; }
.movimento .nome { font-size: 15.5px; font-weight: 600; }
.movimento .detalhe { margin-top: 2px; }
.movimento.vencida .detalhe { color: var(--erro); font-weight: 600; }
.movimento .valor {
  font-size: 15.5px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; padding-top: 1px;
}
.movimento.entra .valor { color: #2f6b3d; }
.movimento.sai .valor { color: var(--erro); }
.marca-prevista {
  font-size: 10.5px; color: var(--tinta-fraca);
  border: 1px solid var(--borda); border-radius: 0;
  padding: 2px 6px; white-space: nowrap; align-self: center;
}
.abrir-acoes-dinheiro {
  width: 38px; height: 38px; flex: 0 0 38px;
  border: none; background: none; color: var(--tinta-fraca);
  font-size: 21px; line-height: 1; cursor: pointer; border-radius: 0;
}
.abrir-acoes-dinheiro:active { background: var(--fundo); }

/* --- As barras --- */
.barras { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 4px; }
.linha-de-barra { display: flex; align-items: center; gap: 9px; }
.rotulo-da-barra {
  width: 46px; flex: 0 0 46px; font-size: 11.5px; color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: .04em;
}
.par-de-barras { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.barra { display: flex; align-items: center; height: 12px; }
.barra i { display: block; height: 100%; border-radius: 0; }
.barra b {
  font-size: 11.5px; font-weight: 400; margin-left: 7px;
  color: var(--tinta-fraca); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.entra-cheia { background: #2f6b3d; }
.sai-cheia   { background: var(--erro); }
/* Vazado = previsto. A diferença entre o que existe e o que se repete
   nunca pode virar um número só. */
.entra-prevista {
  background: repeating-linear-gradient(135deg, #2f6b3d 0 3px, transparent 3px 6px);
  border: 1px solid #2f6b3d;
}
.sai-prevista {
  background: repeating-linear-gradient(135deg, var(--erro) 0 3px, transparent 3px 6px);
  border: 1px solid var(--erro);
}

.legenda-do-dinheiro {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 12px 2px 4px; font-size: 12px; color: var(--tinta-fraca);
}
.legenda-do-dinheiro span { display: flex; align-items: center; gap: 6px; }
.legenda-do-dinheiro .amostra {
  width: 20px; height: 10px; border-radius: 0; display: block;
}

.separa-previsto {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 0; padding: 12px 13px; margin-top: 14px;
  font-size: 13px; color: var(--tinta-fraca); line-height: 1.7;
}
.separa-previsto strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

.nao-invento {
  margin: 14px 4px 0; font-size: 13px; color: var(--destaque); font-weight: 600;
}

/* --- A folha de lançar --- */
.escolha-dupla { display: flex; gap: 8px; }
.escolha-dupla label {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 11px 6px; min-height: 46px;
  border: 1px solid var(--borda); border-radius: 0;
  background: var(--fundo); font-size: 14.5px; cursor: pointer;
}
.escolha-dupla input { width: 18px; height: 18px; }
.escolha-dupla label:has(input:checked) {
  border-color: var(--destaque); background: var(--destaque-fraco);
  color: var(--destaque); font-weight: 600;
}
.marcar-repete {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; margin: 4px 0 12px;
  border: 1px solid var(--borda); border-radius: 0;
  background: var(--fundo); font-size: 14px;
}
.marcar-repete input { width: 20px; height: 20px; flex: 0 0 20px; }
.folha .campo { margin-bottom: 12px; }
.folha .campo > label {
  display: block; font-size: 11.5px; color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px;
}

.dia-do-dinheiro.atrasado { color: var(--erro); }
/* O botão de lançar não pode cobrir a legenda das barras. */
.dinheiro .rolagem-da-tela { padding-bottom: 86px; }


/* =====================================================================
   O PERFIL NO CANTO

   O canto do cabeçalho tinha um botão "Sair" — a última coisa que
   alguém quer fazer num aplicativo de trabalho. Agora tem a cara dela,
   e atrás dela todas as telas.
   ===================================================================== */

.abrir-perfil {
  border: none; background: none; padding: 2px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 54px; flex: 0 0 auto;
  cursor: pointer; border-radius: 0;
  font-family: inherit;
}
/* O nome embaixo da foto: é o que faz o canto parecer "você", e não
   mais um ícone. Corta com reticências para um nome comprido não
   empurrar o título da tela. */
.nome-no-topo {
  font-size: 11.5px; font-weight: 600; color: var(--tinta-fraca);
  max-width: 76px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; line-height: 1;
}
.abrir-perfil:active { opacity: .7; }

.rostinho {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  object-fit: cover; flex: 0 0 38px;
  border: 1px solid var(--borda);
  background: var(--destaque-fraco);
  color: var(--destaque);
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
.rostinho.grande {
  width: 62px; height: 62px; flex-basis: 62px; font-size: 22px;
}

/* --- O cartão no alto da folha --- */
.cartao-do-perfil {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 2px 16px; margin-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}
.cartao-do-perfil strong { display: block; font-size: 17px; }
.cartao-do-perfil span { font-size: 13px; color: var(--tinta-fraca); }

.folha .acao svg { flex: 0 0 20px; color: var(--tinta-fraca); }
.folha .acao.aqui {
  border-color: var(--destaque);
  background: var(--destaque-fraco);
  color: var(--destaque); font-weight: 600;
}
.folha .acao.aqui svg { color: var(--destaque); }
.folha .acao.perigo svg { color: var(--erro); }
.risco-da-folha {
  height: 1px; background: var(--borda); margin: 10px 2px 12px;
}

/* --- Trocar a foto --- */
.troca-de-foto {
  display: flex; align-items: center; gap: 14px;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 0; padding: 14px; margin-bottom: 14px;
}
.lado-da-foto { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.botao-de-foto {
  display: inline-flex; align-items: center;
  padding: 10px 15px; min-height: 42px;
  border: 1px solid var(--destaque); border-radius: 0;
  color: var(--destaque); font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.botao-de-foto:active { background: var(--destaque-fraco); }
button.tirar-foto {
  border: none; background: none; padding: 4px 0;
  color: var(--erro); font-size: 13px; font-family: inherit;
  width: auto; min-height: 32px; border-radius: 0; cursor: pointer;
}

/* --- A situação da assinatura --- */
.situacao-da-assinatura {
  border-radius: 0; padding: 16px; margin-bottom: 14px;
  border: 1px solid var(--borda); background: var(--papel);
  border-left-width: 4px;
}
.situacao-da-assinatura strong { display: block; font-size: 20px; }
.situacao-da-assinatura span { font-size: 13.5px; color: var(--tinta-fraca); }
.situacao-da-assinatura.ativo    { border-left-color: #2f6b3d; }
.situacao-da-assinatura.ativo strong { color: #2f6b3d; }
.situacao-da-assinatura.acabando { border-left-color: #b8860b; background: #fdf9f1; }
.situacao-da-assinatura.acabando strong { color: #8a6d3b; }
.situacao-da-assinatura.vencido  { border-left-color: var(--erro); }
.situacao-da-assinatura.vencido strong { color: var(--erro); }
/* Quando o sistema não sabe a validade, ele não finge que sabe. */
.situacao-da-assinatura.nao-sei { border-left-color: var(--tinta-fraca); }


/* --- Buscar na agenda --- */
/* A lupa fica no cabeçalho, onde qualquer calendário põe: é o primeiro
   lugar onde o polegar procura. Um pouco menor que as setas, porque
   navegar entre semanas é mais frequente que buscar. */
.cabecalho-agenda .seta.lupa {
  width: 38px; height: 38px; flex: 0 0 38px;
  color: var(--tinta-fraca);
}
.cabecalho-agenda .seta.lupa:active { color: var(--destaque); }
.cabecalho-agenda .mes-atual {
  flex: 1; text-align: center; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.achado-na-agenda {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--papel); border: 1px solid var(--borda);
  border-left: 4px solid var(--destaque);
  border-radius: 0; padding: 11px 8px 11px 11px; margin-bottom: 7px;
  text-decoration: none; color: var(--tinta);
}
.achado-na-agenda.confirmado { border-left-color: #2f6b3d; }
.achado-na-agenda.feito,
.achado-na-agenda.desmarcado { border-left-color: #c3b8b2; opacity: .75; }
.achado-na-agenda.desmarcado .nome { text-decoration: line-through; }
.achado-na-agenda:active { background: var(--fundo); }
.quando-do-achado {
  display: flex; flex-direction: column; align-items: flex-end;
  min-width: 62px; flex: 0 0 62px;
}
.quando-do-achado strong { font-size: 13.5px; }
.quando-do-achado span { font-size: 12px; color: var(--tinta-fraca); }

/* A data do resultado numa linha só: "sáb, 12/09" quebrado em três
   linhas transforma a lista num acordeão ilegível. */
.quando-do-achado { min-width: 78px; flex-basis: 78px; }
.quando-do-achado strong { white-space: nowrap; font-size: 13px; }


/* --- Avisar a cliente --- */
/* Verde do WhatsApp, discreto: é atalho frequente, não a ação principal
   do cartão. A ação principal continua sendo o que ela faz com o
   horário. */
.avisar-agora { margin-top: 8px; }
button[type="submit"].botao-avisar {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; min-height: 38px; padding: 8px 13px;
  border: 1px solid #cfe6d5; border-radius: 0;
  background: #eef7f0; color: #1f6b3a;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
button[type="submit"].botao-avisar:active { background: #dcefe2; }
.selo.avisada { background: #eef7f0; color: #1f6b3a; margin-left: 4px; }


/* Os dois botões do cartão: avisar e confirmar. Lado a lado porque são
   as duas pontas da mesma conversa — ela pede, a cliente responde, ela
   marca. Quebram para a linha de baixo quando não couberem. */
.botoes-do-horario {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.botoes-do-horario form { margin: 0; }
button[type="submit"].botao-confirmou {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; min-height: 38px; padding: 8px 13px;
  border: 1px solid var(--borda); border-radius: 0;
  background: var(--fundo); color: var(--tinta);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
button[type="submit"].botao-confirmou:active {
  background: #e6f0e8; border-color: #2f6b3d; color: #2f6b3d;
}
button[type="submit"].botao-confirmou svg { color: #2f6b3d; }


/* A faixa dos botões ocupa a largura inteira do cartão, embaixo de tudo.
   Dentro da coluna do meio ela tinha 186px num celular — não cabiam dois
   botões, e "Confirmou" caía para a linha de baixo sozinho. */
.horario-agenda { flex-wrap: wrap; }
.botoes-do-horario {
  flex: 0 0 100%; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--borda);
}
.botoes-do-horario form { flex: 1; }
button[type="submit"].botao-avisar,
button[type="submit"].botao-confirmou {
  width: 100%; justify-content: center; padding: 8px 6px; font-size: 12.5px;
}

/* O botão flutuante cobria o último cartão do dia. */
.agenda .rolagem-da-tela { padding-bottom: 78px; }

/* O par de botões também no bloco de horários da tela Hoje. */
.bloco .horario .botoes-do-horario {
  display: flex; gap: 6px; margin-top: 10px; padding-top: 0; border-top: none;
}
.bloco .horario .botoes-do-horario form { flex: 1; margin: 0; }
/* Na tela Hoje o cartão é mais estreito (tem a coluna da hora), e
   "Lembrar que é hoje" quebrava em duas linhas dentro do botão. Aqui
   eles empilham em vez de espremer: mesmo rótulo em todo lugar, porque
   dois nomes para a mesma ação é como se aprende errado. */
.bloco .horario .botoes-do-horario { flex-wrap: wrap; }
.bloco .horario .botoes-do-horario form { flex: 1 1 148px; }


/* ---------------------------------------------------------------------
   CONFIRMADO PRECISA GRITAR (7/9/2026)

   O selo de "confirmado" tinha o mesmo peso visual de "a confirmar":
   dois comprimidos pálidos, um cinza e um verde clarinho, no mesmo
   tamanho de letra. Descendo o dedo pela agenda ela não via a
   diferença — e essa é a diferença que importa, porque é ela que diz
   quais horários estão de pé e quais ainda podem virar bolo.

   Agora só o confirmado é forte: verde cheio, letra branca, sinal de
   certo. Os outros selos continuam quietos de propósito — se todos
   gritarem, nenhum grita.
   --------------------------------------------------------------------- */

.selo.confirmado,
.horario .confirmado:not(.avisada) {
  background: #2f6b3d;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(47, 107, 61, 0.35);
}

/* O sinal vem pelo estilo, não pelo HTML: assim vale nos três lugares
   onde o selo aparece (agenda, tela Hoje e resultado da busca) sem
   ninguém precisar lembrar de escrever de novo. */
.selo.confirmado::before,
.horario .confirmado:not(.avisada)::before {
  content: '\2713';
  margin-right: 5px;
  font-weight: 700;
}

/* "Avisada" continua clarinha. São duas coisas diferentes sobre a mesma
   cliente, e só uma delas é a que ela procura ao bater o olho. */
.horario .confirmado.avisada {
  background: #eef7f0;
  color: #1f6b3a;
}

/* O cartão inteiro também muda, não só o selo. Cor de fundo é o que se
   enxerga de longe; o comprimido, de perto. */
.horario-agenda.confirmado,
.achado-na-agenda.confirmado {
  background: #f4faf6;
  border-color: #cfe6d5;
  border-left-width: 5px;
  border-left-color: #2f6b3d;
}


/* =====================================================================
   A CAMADA BELLAMI (7/9/2026)

   Fica no fim de propósito: tudo que vem antes continua funcionando, e
   esta camada por cima é que dá a cara. Se um dia a identidade mudar,
   mexe-se aqui e não em mil lugares.

   As quatro regras que fazem o visual:
     1. Título em Jost, caixa alta, bem espaçado.
     2. Botão é retângulo preto de letra branca — sem canto redondo.
     3. Fio de 1px separa; sombra quase não existe.
     4. Cor só onde ela significa alguma coisa (confirmado, erro, ouro).
   ===================================================================== */

/* --- 1. Os títulos --------------------------------------------------- */

h1, h2, h3,
.cabecalho .titulo strong,
.cabecalho-agenda .mes-atual,
.titulo-do-dia h2,
.titulo-de-categoria,
.rotulo-da-barra {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cartao h1 {
  color: var(--tinta);
  font-size: 22px;
  letter-spacing: 0.14em;
  font-weight: 400;
}
/* O fio dourado embaixo do título de entrada: é o único lugar em que o
   ouro aparece sozinho, e por isso ele significa alguma coisa. */
.cartao h1::after {
  content: '';
  display: block;
  width: 34px; height: 2px;
  margin: 12px 0 0;
  background: var(--ouro);
}

.bloco h2 { letter-spacing: 0.12em; font-weight: 500; color: var(--tinta); }
.titulo-do-dia h2 { font-size: 15px; letter-spacing: 0.09em; }
.cabecalho-agenda .mes-atual { font-size: 15px; letter-spacing: 0.09em; }
.cabecalho .titulo strong { font-size: 15px; letter-spacing: 0.12em; }
.folha h3 { font-family: var(--fonte-titulo); letter-spacing: 0.08em; }

/* --- 2. Os botões ---------------------------------------------------- */

button[type="submit"],
.botao-hoje,
.acao-de-conversa,
.botao-flutuante {
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 500;
}
button[type="submit"] { font-size: 14px; padding: 16px 14px; }
.botao-hoje { font-size: 12px; }
.botao-flutuante { font-size: 13px; }

/* O botão de contorno: branco com fio preto. É o segundo em importância,
   e na Bellami ele aparece sempre embaixo do preto. */
.sair,
button[type="submit"].excluir,
button[type="submit"].botao-confirmou {
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 500;
}
button[type="submit"].botao-confirmou {
  border-color: var(--tinta);
  background: var(--papel);
  color: var(--tinta);
}
button[type="submit"].botao-confirmou:active {
  background: var(--tinta); color: #fff; border-color: var(--tinta);
}

/* O botão do WhatsApp é a ação principal do cartão: preto cheio. O de
   marcar é o segundo: branco com fio preto. Verde de WhatsApp não existe
   nessa paleta, e o ícone já diz para onde vai. */
button[type="submit"].botao-avisar {
  font-family: var(--fonte-titulo);
  text-transform: uppercase; letter-spacing: 0.11em; font-weight: 500;
  background: var(--tinta); color: #fff; border-color: var(--tinta);
}
button[type="submit"].botao-avisar:active { background: #333; }
button[type="submit"].botao-confirmou svg { color: currentColor; }

/* --- 3. Os fios e os selos ------------------------------------------ */

/* Selo virou etiqueta: retângulo, letra miúda em caixa alta. */
.selo, .horario .confirmado, .hoje-marca, .estimado {
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* Confirmado continua sendo o único que grita — agora em preto cheio,
   que na Bellami é a cor mais forte que existe. Verde ali destoava. */
.selo.confirmado,
.horario .confirmado:not(.avisada) {
  background: var(--tinta);
  color: #fff;
  box-shadow: none;
  border-radius: 0;
  padding: 4px 10px;
  font-size: 11px;
}
.horario-agenda.confirmado,
.achado-na-agenda.confirmado {
  background: var(--papel);
  border-color: var(--borda);
  border-left-color: var(--tinta);
  border-left-width: 5px;
}
.horario .confirmado.avisada { background: var(--areia); color: #5b4a30; }
.selo.avisada { background: var(--areia); color: #5b4a30; }

/* --- 4. Faixa quente e campos --------------------------------------- */

.bloco.atencao { background: var(--areia); border-color: #ddd2c0; }
/* O bloco do dinheiro é a faixa preta de números da Bellami: fundo
   preto, número branco enorme. É o único bloco escuro da tela, e por
   isso é o primeiro que ela vê. */
.bloco.dinheiro { background: var(--tinta); border-color: var(--tinta); }
.numero-grande strong, .numero-pequeno strong {
  font-family: var(--fonte-titulo); font-weight: 400; letter-spacing: 0.02em;
}
.numero-grande span, .numero-pequeno span {
  font-family: var(--fonte-titulo); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 10.5px; opacity: 0.7;
}

input, textarea, select { border-color: #d6d2cd; background: var(--papel); }
input:focus, textarea:focus { outline: 2px solid var(--tinta); outline-offset: 0; }

/* Link na Bellami é preto sublinhado — não uma cor diferente. */
.rodape-cartao a, .bloco h2.com-porta a { text-decoration: underline; }

/* Caixa alta espaçada é larga: "PEDIR CONFIRMAÇÃO" partia em duas linhas
   quando os dois botões dividem a largura do cartão. Aqui a letra encolhe
   e o espaçamento afrouxa — o rótulo continua o mesmo em todo lugar. */
.botoes-do-horario button[type="submit"] {
  font-size: 11px; letter-spacing: 0.05em; line-height: 1.25; padding: 10px 6px;
}

/* Em Dinheiro o mesmo cabeçalho mostra um período inteiro ("7 de setembro
   a 13 de setembro"), que em caixa alta espaçada não cabe e vira "...".
   Aqui a letra encolhe em vez de sumir. */
.dinheiro .cabecalho-agenda .mes-atual,
.cabecalho-agenda .mes-atual { font-size: 13px; letter-spacing: 0.05em; }

/* =====================================================================
   DINHEIRO EM DUAS COLUNAS (7/9/2026)

   A tela era uma lista só, em ordem de data, misturando o que entra e o
   que sai. Ficava difícil de ler: a pergunta que ela faz de verdade —
   quanto me devem, quanto eu devo — não tinha onde ser respondida de um
   olhar. Ideia do Ero: partir a tela no meio.

   Esquerda: entrou e entra. Direita: saiu e sai. Um fio no meio.
   ===================================================================== */

.duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 6px;
}
.coluna-do-dinheiro { min-width: 0; padding: 0 9px 0 0; }
.coluna-do-dinheiro.sai { padding: 0 0 0 9px; border-left: 1px solid var(--borda); }

.cabeca-da-coluna {
  padding-bottom: 8px;
  margin-bottom: 9px;
  border-bottom: 2px solid var(--tinta);
}
.cabeca-da-coluna span {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--tinta-fraca);
}
.cabeca-da-coluna strong {
  display: block; margin-top: 2px;
  font-family: var(--fonte-titulo); font-weight: 400;
  font-size: 19px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.coluna-do-dinheiro.entra .cabeca-da-coluna strong { color: #2f6b3d; }
.coluna-do-dinheiro.sai   .cabeca-da-coluna strong { color: var(--erro); }
/* Nos horizontes longos o total já está lá em cima, na faixa de números.
   Repetir aqui seria dizer o mesmo número duas vezes na mesma tela. */
.duas-colunas.sem-total .cabeca-da-coluna strong { display: none; }

/* Coluna vazia DIZ que está vazia. Metade em branco parece tela quebrada. */
.coluna-vazia {
  margin: 0; font-size: 13px; color: var(--tinta-fraca); line-height: 1.4;
}

/* O cartão em pé: com meia tela não cabem nome, valor e "⋯" lado a lado. */
.coluna-do-dinheiro .movimento {
  display: block;
  padding: 9px 8px 7px 9px;
  margin-bottom: 7px;
}
.coluna-do-dinheiro .movimento .nome { font-size: 14.5px; line-height: 1.25; }
.coluna-do-dinheiro .movimento .detalhe { font-size: 12px; }
.dia-do-movimento {
  font-family: var(--fonte-titulo);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tinta-fraca); margin-bottom: 3px;
}
/* Conta vencida mostra a data em vermelho: é o dado que dói. */
.movimento.vencida .dia-do-movimento { color: var(--erro); }
.pe-do-movimento {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px; margin-top: 5px;
}
.pe-do-movimento .valor { font-size: 15px; padding-top: 0; }
.coluna-do-dinheiro .abrir-acoes-dinheiro {
  width: 30px; height: 30px; flex: 0 0 30px; font-size: 19px;
}
.coluna-do-dinheiro .marca-prevista { font-size: 9.5px; padding: 1px 4px; }

/* A faixa de cima do curto prazo virou uma linha só: a sobra. Os totais
   de entra e de sai foram para o alto das colunas que os somam. */
.numeros-do-dinheiro.so-sobra div { border-right: none; padding: 11px 6px; }
.numeros-do-dinheiro.so-sobra strong { font-size: 21px; font-family: var(--fonte-titulo); font-weight: 400; }

/* =====================================================================
   O MÊS NO BRUTO (7/9/2026)

   Um número grande e uma lista. Nada estimado, então nada de parêntese
   nem de ressalva de precisão — só a de escopo, no rodapé.
   ===================================================================== */

.bruto-do-mes {
  background: var(--tinta); color: #fff;
  padding: 22px 16px 20px; margin-bottom: 10px;
}
.bruto-do-mes span {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em;
  opacity: 0.7;
}
.bruto-do-mes strong {
  display: block; margin: 5px 0 6px;
  font-family: var(--fonte-titulo); font-weight: 400;
  font-size: 34px; letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
}
.bruto-do-mes em { font-style: normal; font-size: 12.5px; opacity: 0.72; }

/* O que falta receber leva para a tela que sabe QUEM está devendo. */
.falta-receber {
  display: block; text-decoration: none; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--borda);
  border-left: 4px solid var(--erro);
  padding: 12px 14px; margin-bottom: 10px;
}
.falta-receber span {
  font-family: var(--fonte-titulo);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--tinta-fraca);
}
.falta-receber strong {
  display: block; margin-top: 2px;
  font-family: var(--fonte-titulo); font-weight: 400; font-size: 21px;
  color: var(--erro); font-variant-numeric: tabular-nums;
}
.falta-receber em { font-style: normal; font-size: 12.5px; color: var(--tinta-fraca); }

/* A barra fica ATRÁS do texto, encostada no chão da linha: mostra a
   proporção sem roubar largura de quem tem nome comprido. */
.linha-do-servico {
  position: relative;
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0 12px; border-bottom: 1px solid var(--borda);
}
/* A última linha perde a borda, mas NÃO o espaço: sem ele a barrinha
   encosta no texto e parece um sublinhado. */
.linha-do-servico:last-child { border-bottom: none; }
.linha-do-servico .quem { flex: 1; min-width: 0; }
.linha-do-servico .nome { font-size: 15px; font-weight: 600; }
.linha-do-servico .detalhe { font-size: 12px; color: var(--tinta-fraca); }
.linha-do-servico .valor {
  font-size: 15px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.linha-do-servico i {
  position: absolute; left: 0; bottom: 5px; height: 3px;
  background: var(--tinta); display: block;
}

/* =====================================================================
   O CHAT NO MEIO DO TOPO (7/9/2026)

   O assessor é o coração do produto. Desde que a barra de baixo saiu,
   ele estava a dois toques de qualquer tela — abrir o perfil e escolher.
   Agora está a um, no meio do topo, no mesmo lugar em toda tela.

   Centralizado de verdade (posição absoluta), não "no meio do que
   sobrou": o ponto fixo só funciona se o dedo achar sempre no mesmo
   lugar, e o que sobra muda de tela para tela.
   ===================================================================== */

.cabecalho { position: relative; }

.chat-no-topo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--tinta);
  background: var(--tinta); color: #fff;
  text-decoration: none;
  font-family: var(--fonte-titulo);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em;
  white-space: nowrap;
}
.chat-no-topo:active { background: #333; }

/* O título encolhe para não esbarrar no Chat. Ele diz só a seção
   ("Agenda", "Dinheiro"), então cabe de sobra. */
.cabecalho .titulo { max-width: 32%; }
.cabecalho .titulo span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Telas muito estreitas: o botão aperta, mas a palavra fica. Só o balão
   não diz para onde leva. */
@media (max-width: 340px) {
  .chat-no-topo { padding: 8px 9px; letter-spacing: 0.08em; }
  .cabecalho .titulo { max-width: 26%; }
}

/* =====================================================================
   "JÁ ENTROU" NA TELA DE DINHEIRO (7/9/2026)

   O Ero fez um penteado de R$ 500, recebeu na hora, abriu a tela chamada
   Dinheiro e não viu o dinheiro. A tela estava certa — ela é sobre o que
   ainda FALTA entrar e sair —, mas esconder calado faz parecer defeito.

   Agora a faixa de cima diz as duas coisas: o que ainda vai mexer no
   caixa, e o que já entrou. A segunda é um link para O mês, que é a tela
   que sabe detalhar.
   ===================================================================== */





/* =====================================================================
   OS TRÊS FATOS E AS DUAS PARTES (7/9/2026)

   A faixa de cima diz três coisas que NÃO se somam: quanto já entrou,
   quanto já saiu, e quanto ainda vai mexer. As duas primeiras são
   extrato; a terceira é promessa. O fio mais grosso antes da terceira
   marca essa diferença.

   Embaixo, cada coluna repete a mesma separação item por item — porque
   total no alto não responde "de quem veio" nem "para onde foi".
   ===================================================================== */

.numeros-do-dinheiro.tres-fatos div { padding: 11px 4px; }
.numeros-do-dinheiro.tres-fatos strong { font-size: 15px; }
.numeros-do-dinheiro.tres-fatos span { font-size: 9.5px; letter-spacing: .07em; }
.numeros-do-dinheiro.tres-fatos .pendente { border-left: 2px solid var(--tinta); }
.numeros-do-dinheiro.tres-fatos .pendente strong { color: var(--tinta-fraca); }

.parte-da-coluna + .parte-da-coluna { margin-top: 14px; }
.titulo-da-parte {
  font-family: var(--fonte-titulo);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--tinta-fraca);
  padding-bottom: 5px; margin-bottom: 7px;
  border-bottom: 1px solid var(--borda);
}
/* Movimento que já aconteceu não tem mais nada a decidir: fica mais
   quieto que o que ainda está em aberto. */
.parte-da-coluna.feito .movimento {
  background: transparent; border-color: transparent;
  border-left-color: var(--borda);
  padding-left: 8px;
}
.parte-da-coluna.feito .movimento .valor { font-weight: 500; }

/* =====================================================================
   AS FOTOS DO ATENDIMENTO (7/9/2026)

   Antes e depois, até três de cada, na linha do atendimento dentro da
   ficha da cliente. Quadradas e pequenas: aqui elas servem para ela
   RECONHECER o atendimento, não para admirar. Tocar abre em tamanho
   real.
   ===================================================================== */

.tira-de-fotos {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px; flex-wrap: wrap;
}
/* O rótulo ocupa a linha inteira, em cima. Ao lado das fotos ele comia
   44px e a terceira foto caía para a linha de baixo. */
.tira-de-fotos .lado {
  font-family: var(--fonte-titulo);
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--tinta-fraca);
  flex: 0 0 100%; margin-bottom: 1px;
}
.uma-foto { position: relative; line-height: 0; }
.uma-foto img {
  width: 52px; height: 52px; object-fit: cover;
  border: 1px solid var(--borda); display: block;
}
/* O × fica por cima do canto, pequeno e com fundo preto: some na foto
   clara e aparece na escura, e nos dois casos não some de vez. */
button[type="submit"].tirar-uma-foto {
  position: absolute; top: -1px; right: -1px;
  width: 18px; height: 18px; padding: 0;
  border: none; background: var(--tinta); color: #fff;
  font-size: 13px; line-height: 18px; cursor: pointer;
}
.uma-foto form { margin: 0; }

.por-uma-foto { margin: 0; }
.mais-uma-foto {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0;
  border: 1px dashed #c9c4bd; color: var(--tinta-fraca);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.mais-uma-foto:active { background: var(--destaque-fraco); }
.por-uma-foto noscript button[type="submit"] {
  margin-top: 4px; font-size: 11px; padding: 4px 8px;
}