/* =========================================================================
   Consultório – folha de estilo única, compartilhada por todas as telas
   ========================================================================= */

/* Fontes guardadas no próprio projeto (funcionam sem internet) */
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2"); }

:root {
  --mare: #133a3f;          /* barra lateral */
  --mare-2: #1b4b51;
  --tinta: #1b2a2d;         /* texto principal */
  --suave: #5b6d70;         /* texto secundário */
  --fraco: #8a9a9c;
  --fundo: #f2f5f4;
  --papel: #ffffff;
  --linha: #dbe3e1;
  --linha-forte: #c5d1ce;
  --teal: #1d6a65;          /* ação principal */
  --teal-escuro: #15524e;
  --teal-claro: #e2efec;
  --verde: #2b7a55;  --verde-bg: #e3f1e9;
  --ambar: #9a6210;  --ambar-bg: #fbefd9;
  --vermelho: #ab3a35; --vermelho-bg: #f8e4e2;
  --lilas: #574f92;  --lilas-bg: #ebe9f6;
  --cinza-bg: #edf0ef;

  --fonte-titulo: "Newsreader", Georgia, "Times New Roman", serif;
  --fonte: "Figtree", "Segoe UI", system-ui, sans-serif;

  --raio: 12px;
  --raio-p: 7px;
  --sombra: 0 1px 2px rgba(19, 58, 63, .06), 0 2px 8px rgba(19, 58, 63, .04);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
  font-variant-numeric: tabular-nums;
}
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 500; line-height: 1.2; margin: 0; letter-spacing: -.005em; }
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; font-family: var(--fonte); font-weight: 600; }
p { margin: 0 0 .6em; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* ---------- Estrutura -------------------------------------------------- */
.app { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; }
.lateral {
  background: var(--mare);
  color: #d6e4e2;
  padding: 22px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.marca { padding: 0 10px 22px; border-bottom: 1px solid rgba(255,255,255,.09); margin-bottom: 14px; }
.marca__nome { font-family: var(--fonte-titulo); font-size: 22px; color: #fff; line-height: 1.15; }
.marca__sub { font-size: 13px; color: #9fbcb9; margin-top: 2px; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav__grupo { font-size: 12px; color: #86a7a3; padding: 16px 10px 5px; }
.nav a {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  color: #d6e4e2; padding: 8px 10px; border-radius: 8px; font-size: 14.5px;
}
.nav a:hover { background: var(--mare-2); text-decoration: none; color: #fff; }
.nav a.ativo { background: #fff; color: var(--mare); font-weight: 600; }
.nav a.ativo .ic { color: var(--teal); }
.nav .contador {
  margin-left: auto; background: #f0b84d; color: #3d2a05; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 0 7px; line-height: 19px;
}
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lateral__rodape { margin-top: auto; padding: 16px 10px 0; font-size: 13px; color: #86a7a3; }
.lateral__rodape button { background: none; border: 0; color: #d6e4e2; padding: 0; font: inherit; cursor: pointer; }
.lateral__rodape button:hover { text-decoration: underline; }

.conteudo { padding: 28px 36px 60px; max-width: 1240px; width: 100%; }
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.topo__titulo p { color: var(--suave); margin: 4px 0 0; }
.topo__acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.voltar { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--suave); margin-bottom: 8px; }

.barra-movel { display: none; }

/* ---------- Botões ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14.5px; font-weight: 600;
  padding: 8px 15px; border-radius: var(--raio-p);
  border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta);
  cursor: pointer; white-space: nowrap; line-height: 1.35;
}
.btn:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }
.btn--principal { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--principal:hover { background: var(--teal-escuro); border-color: var(--teal-escuro); color: #fff; }
.btn--whats { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.btn--whats:hover { background: #18703d; color: #fff; border-color: #18703d; }
.btn--perigo { color: var(--vermelho); }
.btn--perigo:hover { border-color: var(--vermelho); color: var(--vermelho); }
.btn--p { padding: 4px 10px; font-size: 13.5px; }
.btn--fantasma { border-color: transparent; background: transparent; }
.btn--fantasma:hover { background: var(--teal-claro); border-color: transparent; }
.btn .ic { width: 16px; height: 16px; }
form.inline { display: inline; }

/* ---------- Cartões e seções ------------------------------------------ */
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.cartao__cab h2 { font-size: 19px; }
.cartao__cab a { font-size: 14px; }
.cartao__corpo { padding: 14px 20px 18px; }
.cartao + .cartao { margin-top: 18px; }
.grade-2 > .cartao, .grade-2-iguais > .cartao { margin-top: 0; }
.secao-titulo { display: flex; justify-content: space-between; align-items: baseline; margin: 30px 0 12px; }
.vazio { color: var(--suave); padding: 18px 0 6px; }
.vazio strong { color: var(--tinta); display: block; font-weight: 600; margin-bottom: 2px; }

.grade-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grade-2-iguais { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* ---------- Faixa de números do painel -------------------------------- */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 22px; }
.numeros > div { padding: 14px 20px; border-left: 1px solid var(--linha); }
.numeros > div:first-child { border-left: 0; }
.numeros dt { font-size: 13.5px; color: var(--suave); }
.numeros dd { margin: 2px 0 0; font-size: 22px; font-weight: 600; }
.numeros dd small { font-size: 13px; font-weight: 400; color: var(--suave); }

/* ---------- Hoje: linha do tempo -------------------------------------- */
.dia-titulo { font-family: var(--fonte-titulo); font-size: 34px; line-height: 1.1; }
.dia-titulo span { display: block; font-family: var(--fonte); font-size: 15px; color: var(--suave); margin-top: 6px; }
.linha-tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linha-tempo::before { content: ""; position: absolute; left: 63px; top: 8px; bottom: 8px; width: 2px; background: var(--linha); }
.linha-tempo li { display: grid; grid-template-columns: 52px 24px 1fr; gap: 0; align-items: start; padding: 10px 0; }
.lt-hora { font-weight: 600; font-size: 15px; padding-top: 1px; }
.lt-hora small { display: block; font-weight: 400; color: var(--fraco); font-size: 12.5px; }
.lt-marco { width: 12px; height: 12px; border-radius: 50%; background: var(--papel); border: 2px solid var(--teal); margin: 5px 0 0 6px; position: relative; z-index: 1; }
.lt-item--realizado .lt-marco { background: var(--teal); }
.lt-item--falta .lt-marco, .lt-item--falta_justificada .lt-marco { border-color: var(--vermelho); background: var(--vermelho); }
.lt-item--agora .lt-marco { box-shadow: 0 0 0 4px var(--teal-claro); }
.lt-corpo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-left: 4px; }
.lt-nome { font-weight: 600; font-size: 16px; }
.lt-meta { color: var(--suave); font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.lt-acoes { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }

/* ---------- Progresso do pacote (pontinhos) --------------------------- */
.progresso { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; vertical-align: middle; }
.ponto { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--linha-forte); background: transparent; }
.ponto--usada { background: var(--teal); border-color: var(--teal); }
.ponto--agendada { border-color: var(--teal); background: var(--teal-claro); }
.progresso--grande { gap: 7px; }
.progresso--grande .ponto { width: 18px; height: 18px; border-width: 2px; }
.legenda-pontos { display: flex; gap: 16px; font-size: 13px; color: var(--suave); flex-wrap: wrap; }
.legenda-pontos span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Etiquetas de situação ------------------------------------- */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 1px 9px; border-radius: 999px; background: var(--cinza-bg); color: var(--suave); white-space: nowrap; line-height: 20px; }
.tag--ok, .tag--pago, .tag--realizado, .tag--paga { background: var(--verde-bg); color: var(--verde); }
.tag--atencao, .tag--parcial, .tag--pendente, .tag--vence_logo, .tag--agendado { background: var(--ambar-bg); color: var(--ambar); }
.tag--agendado { background: var(--cinza-bg); color: var(--suave); }
.tag--alerta, .tag--atrasado, .tag--falta { background: var(--vermelho-bg); color: var(--vermelho); }
.tag--confirmado { background: var(--lilas-bg); color: var(--lilas); }
.tag--falta_justificada, .tag--desmarcado { background: var(--cinza-bg); color: var(--suave); }
.tag--online { background: var(--teal-claro); color: var(--teal); }

/* ---------- Lista de pendências --------------------------------------- */
.pendencias { list-style: none; margin: 0; padding: 0; }
.pendencias > li { padding: 12px 0; border-top: 1px solid var(--linha); }
.pendencias > li:first-child { border-top: 0; }
.pend-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pend-cab h3 { font-size: 15px; }
.pend-cab .qtd { font-size: 13px; color: var(--suave); }
.pend-lista { list-style: none; margin: 6px 0 0; padding: 0; }
.pend-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: 14.5px; }
.pend-lista li .dir { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 13.5px; }
.marcador { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; flex: none; }
.marcador--alerta { background: var(--vermelho); }
.marcador--atencao { background: #d99a2b; }
.marcador--info { background: var(--lilas); }
.marcador--ok { background: var(--verde); }
.tudo-certo { display: flex; gap: 12px; align-items: center; color: var(--verde); padding: 8px 0; }

/* ---------- Tabelas --------------------------------------------------- */
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabela th { text-align: left; font-weight: 600; font-size: 13px; color: var(--suave); padding: 10px 12px; border-bottom: 1px solid var(--linha-forte); white-space: nowrap; }
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: #f8fbfa; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela tfoot td { font-weight: 700; border-top: 1px solid var(--linha-forte); border-bottom: 0; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela .fraco { color: var(--suave); font-size: 13.5px; }
.pessoa { display: flex; align-items: center; gap: 11px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--teal-claro); color: var(--teal-escuro); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.avatar--g { width: 58px; height: 58px; font-size: 20px; }
.pessoa__nome { font-weight: 600; }
.pessoa__sub { font-size: 13px; color: var(--suave); }

/* ---------- Filtros e navegação de período ---------------------------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtros input[type=search] { min-width: 260px; }
.segmentos { display: inline-flex; background: var(--cinza-bg); border-radius: 9px; padding: 3px; gap: 2px; }
.segmentos a { padding: 5px 13px; border-radius: 7px; color: var(--suave); font-size: 14px; font-weight: 500; }
.segmentos a:hover { color: var(--tinta); text-decoration: none; }
.segmentos a.ativo { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }
.periodo { display: inline-flex; align-items: center; gap: 6px; }
.periodo strong { font-family: var(--fonte-titulo); font-weight: 500; font-size: 21px; min-width: 250px; text-align: center; }
.periodo .btn { padding: 6px 9px; }

/* ---------- Formulários ----------------------------------------------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-size: 14px; font-weight: 600; }
.campo .ajuda { font-size: 13px; color: var(--suave); }
.campo .erro { font-size: 13px; color: var(--vermelho); }
.campo--check { flex-direction: row; align-items: center; gap: 9px; padding-top: 24px; }
.campo--check label { font-weight: 500; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=time], input[type=search], input[type=password], select, textarea {
  font: inherit; font-size: 15px; color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  background: #fff; padding: 8px 11px; width: 100%; min-height: 39px;
}
textarea { resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-claro); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--teal); margin: 0; }
.erros-gerais { background: var(--vermelho-bg); color: var(--vermelho); border-radius: var(--raio-p); padding: 10px 14px; margin-bottom: 16px; font-size: 14.5px; }
.form-rodape { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linha); }
.form-rodape .esq { margin-right: auto; }
.form-estreito { max-width: 760px; }
.texto-contrato { font-family: var(--fonte-titulo) !important; font-size: 16px !important; line-height: 1.6 !important; }

.contatos-tabela td { padding: 6px 6px; border: 0; }
.contatos-tabela th { padding: 4px 6px; border: 0; }
.contatos-tabela input[type=text], .contatos-tabela select { min-height: 36px; padding: 6px 9px; }

/* ---------- Mensagens ------------------------------------------------- */
.mensagens { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.mensagens li { padding: 10px 14px; border-radius: var(--raio-p); background: var(--verde-bg); color: #1f5a3f; font-size: 14.5px; border-left: 3px solid var(--verde); }
.mensagens li.warning { background: var(--ambar-bg); color: #6d4609; border-color: #d99a2b; }
.mensagens li.error { background: var(--vermelho-bg); color: #7f2a26; border-color: var(--vermelho); }
.mensagens li.info { background: var(--lilas-bg); color: #3f3973; border-color: var(--lilas); }

/* ---------- Paciente: cabeçalho e abas -------------------------------- */
.ficha { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ficha__dados { display: flex; gap: 22px; flex-wrap: wrap; color: var(--suave); font-size: 14px; margin-top: 6px; }
.ficha__dados b { color: var(--tinta); font-weight: 600; }
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha-forte); margin: 22px 0 20px; overflow-x: auto; }
.abas a { padding: 9px 14px; color: var(--suave); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas a:hover { color: var(--tinta); text-decoration: none; }
.abas a.ativo { color: var(--tinta); border-color: var(--teal); font-weight: 600; }
.abas .n { font-size: 12px; color: var(--fraco); margin-left: 4px; }

.pacote-destaque { display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: center; }
.pacote-destaque .grande { font-size: 30px; font-family: var(--fonte-titulo); line-height: 1; }
.pacote-destaque .grande small { font-family: var(--fonte); font-size: 14px; color: var(--suave); }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14.5px; }
.dl dt { color: var(--suave); }
.dl dd { margin: 0; }

.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--raio-p); background: var(--ambar-bg); color: #6d4609; font-size: 14.5px; margin-bottom: 16px; }
.aviso--info { background: var(--teal-claro); color: var(--teal-escuro); }
.aviso--alerta { background: var(--vermelho-bg); color: #7f2a26; }
.aviso .btn { margin-left: auto; }

/* ---------- Agenda: semana -------------------------------------------- */
.agenda-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.semana { display: grid; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.semana__cab { display: contents; }
.semana__cab > div { padding: 10px 8px; border-bottom: 1px solid var(--linha); border-left: 1px solid var(--linha); text-align: center; background: #fbfcfc; }
.semana__cab > div:first-child { border-left: 0; }
.semana__cab .dsem { font-size: 13px; color: var(--suave); }
.semana__cab .dnum { font-family: var(--fonte-titulo); font-size: 22px; line-height: 1.1; }
.semana__cab a { color: inherit; }
.semana__cab .hoje .dnum { color: #fff; background: var(--teal); border-radius: 50%; width: 34px; height: 34px; display: inline-grid; place-items: center; }
.semana__horas, .semana__col { position: relative; }
.semana__horas { border-right: 0; }
.semana__horas span { position: absolute; right: 8px; font-size: 12px; color: var(--fraco); transform: translateY(-50%); }
.semana__col { border-left: 1px solid var(--linha); background-image: linear-gradient(to bottom, var(--linha) 1px, transparent 1px); background-size: 100% var(--h-hora); }
.faixa-livre { position: absolute; left: 0; right: 0; background: rgba(29, 106, 101, .06); }
.faixa-bloq { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(-45deg, #f3eeee, #f3eeee 6px, #ebe3e2 6px, #ebe3e2 12px); }
.col-bloqueada { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, #f6f3f3, #f6f3f3 8px, #eee7e6 8px, #eee7e6 16px); display: flex; align-items: flex-start; justify-content: center; padding-top: 16px; font-size: 13px; color: var(--suave); text-align: center; }
.bloco {
  position: absolute; left: 4px; right: 4px; border-radius: 7px; padding: 4px 7px;
  background: var(--teal); color: #fff; font-size: 12.5px; line-height: 1.3; overflow: hidden;
  border-left: 3px solid var(--teal-escuro); display: block;
}
.bloco:hover { text-decoration: none; filter: brightness(1.07); }
.bloco b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloco--confirmado { background: var(--lilas); border-color: #3e3770; }
.bloco--realizado { background: #d3e7e3; color: var(--teal-escuro); border-color: var(--teal); }
.bloco--falta, .bloco--falta_justificada { background: var(--vermelho-bg); color: var(--vermelho); border-color: var(--vermelho); }
.bloco--agendado { background: var(--teal); }
.legenda-agenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--suave); margin-top: 12px; }
.legenda-agenda span { display: inline-flex; gap: 6px; align-items: center; }
.legenda-agenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- Agenda: dia ---------------------------------------------- */
.dia-lista { list-style: none; margin: 0; padding: 0; }
.dia-lista li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linha); }
.dia-lista li:first-child { border-top: 0; }
.dia-lista .h { font-weight: 600; }
.dia-lista .h small { color: var(--fraco); font-weight: 400; }
.slot-livre { display: flex; justify-content: space-between; align-items: center; border: 1px dashed var(--linha-forte); border-radius: 9px; padding: 8px 12px; color: var(--suave); font-size: 14px; }
.slot-sessao { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #f6faf9; border: 1px solid var(--linha); border-left: 3px solid var(--teal); border-radius: 9px; padding: 9px 12px; }
.slot-sessao--confirmado { border-left-color: var(--lilas); }
.slot-sessao--realizado { border-left-color: var(--verde); background: #f4f9f6; }
.slot-sessao--falta, .slot-sessao--falta_justificada { border-left-color: var(--vermelho); background: #fdf6f5; }
.slot-sessao--desmarcado { border-left-color: var(--fraco); opacity: .7; }

/* ---------- Agenda: mês ---------------------------------------------- */
.mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.mes__sem { padding: 8px; font-size: 13px; color: var(--suave); text-align: center; border-bottom: 1px solid var(--linha); background: #fbfcfc; }
.mes__dia { min-height: 112px; padding: 6px 7px; border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.mes__dia:nth-child(7n+1) { border-left: 0; }
.mes__dia--fora { background: #f8faf9; color: var(--fraco); }
.mes__dia--bloq { background: repeating-linear-gradient(-45deg, #fbf9f9, #fbf9f9 8px, #f3eded 8px, #f3eded 16px); }
.mes__num { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.mes__num a { color: inherit; }
.mes__dia--hoje .mes__num a { background: var(--teal); color: #fff; border-radius: 999px; padding: 0 7px; }
.mes__ev { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta); padding: 1px 5px; border-radius: 4px; background: var(--teal-claro); }
.mes__ev:hover { text-decoration: none; background: #d0e6e2; }
.mes__ev--confirmado { background: var(--lilas-bg); }
.mes__ev--falta, .mes__ev--falta_justificada { background: var(--vermelho-bg); }
.mes__ev--realizado { background: #edf3f2; color: var(--suave); }
.mes__mais { color: var(--suave); }
.mes__motivo { color: var(--suave); font-size: 12px; }

/* ---------- Disponibilidade ------------------------------------------ */
.semana-disp { list-style: none; margin: 0; padding: 0; }
.semana-disp li { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linha); align-items: center; }
.semana-disp li:first-child { border-top: 0; }
.faixas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.faixa { display: inline-flex; align-items: center; gap: 4px; background: var(--teal-claro); color: var(--teal-escuro); border-radius: 999px; padding: 2px 4px 2px 12px; font-size: 14px; font-weight: 600; }
.faixa--off { background: var(--cinza-bg); color: var(--fraco); }
.faixa button { border: 0; background: transparent; color: inherit; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; font-size: 15px; line-height: 1; }
.faixa button:hover { background: rgba(0,0,0,.08); }

/* ---------- Relatório ------------------------------------------------- */
.barras { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; align-items: end; height: 190px; padding-top: 10px; }
.barras__mes { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 6px; }
.barras__par { display: flex; gap: 3px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.barras__b { width: 42%; max-width: 18px; border-radius: 4px 4px 0 0; background: var(--teal); min-height: 2px; }
.barras__b--desp { background: #d7a24a; }
.barras__rot { font-size: 12px; color: var(--suave); }
.barras__mes--atual .barras__rot { color: var(--tinta); font-weight: 700; }
.medidor { height: 8px; background: var(--cinza-bg); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.medidor span { display: block; height: 100%; background: var(--teal); border-radius: 999px; }

/* ---------- Contrato (visualização e impressão) ----------------------- */
.folha { background: #fff; max-width: 780px; margin: 0 auto; padding: 56px 64px; border: 1px solid var(--linha); box-shadow: var(--sombra); font-family: var(--fonte-titulo); font-size: 16.5px; line-height: 1.7; white-space: pre-wrap; }
.marcadores { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13.5px; }
.marcadores code { background: var(--teal-claro); color: var(--teal-escuro); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; cursor: pointer; border: 0; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------- Login ----------------------------------------------------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login__arte { background: var(--mare); color: #d6e4e2; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login__arte h1 { color: #fff; font-size: 44px; max-width: 12ch; }
.login__arte p { max-width: 36ch; color: #a9c4c1; font-size: 16px; }
.login__ondas { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; opacity: .5; }
.login__form { display: grid; place-items: center; padding: 32px; }
.login__form form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Utilidades ------------------------------------------------ */
.suave { color: var(--suave); }
.peq { font-size: 13.5px; }
.forte { font-weight: 600; }
.dir { text-align: right; }
.mt { margin-top: 18px; }
.sem-margem { margin: 0; }
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.valor-alerta { color: var(--vermelho); font-weight: 600; }
.valor-ok { color: var(--verde); font-weight: 600; }

/* ---------- Telas pequenas ------------------------------------------- */
@media (max-width: 1080px) {
  .grade-2, .grade-2-iguais { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .numeros > div:nth-child(3) { border-left: 0; }
  .numeros > div:nth-child(n+3) { border-top: 1px solid var(--linha); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
  body.menu-aberto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(10, 30, 32, .4); }
  .barra-movel { display: flex; align-items: center; justify-content: space-between; background: var(--mare); color: #fff; padding: 10px 16px; position: sticky; top: 0; z-index: 30; }
  .barra-movel button { background: none; border: 0; color: #fff; padding: 6px; cursor: pointer; }
  .barra-movel .marca__nome { font-size: 19px; }
  .conteudo { padding: 20px 16px 48px; }
  h1 { font-size: 26px; }
  .form { grid-template-columns: 1fr; }
  .campo--check { padding-top: 0; }
  .login { grid-template-columns: 1fr; }
  .login__arte { padding: 32px 24px; min-height: 220px; }
  .login__arte h1 { font-size: 32px; }
  .mes__dia { min-height: 70px; }
  .mes__ev { display: none; }
  .mes__dia .contagem-movel { display: block; }
  .dia-lista li { grid-template-columns: 70px 1fr; }
  .folha { padding: 28px 22px; }
  .semana-disp li { grid-template-columns: 1fr; }
}
.contagem-movel { display: none; font-size: 12px; color: var(--teal); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media print {
  .lateral, .barra-movel, .topo, .nao-imprimir, .mensagens { display: none !important; }
  .app { display: block; }
  .conteudo { padding: 0; max-width: none; }
  body { background: #fff; }
  .folha { border: 0; box-shadow: none; padding: 0; max-width: none; }
}

/* Ajustes da lista de pendências em telas estreitas */
.pend-lista li { flex-wrap: wrap; }
.pend-lista li .dir { white-space: nowrap; margin-left: auto; }
.pend-lista .progresso { flex-wrap: nowrap; }

/* ---------- Situação de pagamento da sessão --------------------------- */
.tag--pg-pago { background: var(--verde-bg); color: var(--verde); }
.tag--pg-pendente { background: var(--ambar-bg); color: var(--ambar); }
.tag--pg-isento { background: var(--cinza-bg); color: var(--suave); }

.selo-pg {
  position: absolute; top: 4px; right: 5px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1;
}
.selo-pg--pago { background: #fff; color: var(--verde); }
.selo-pg--pendente { background: #f0b84d; color: #3d2a05; }
.selo-pg--legenda { position: static; width: 15px; height: 15px; font-size: 10px; border: 1px solid var(--linha-forte); }
.bloco b { padding-right: 18px; }

.bolinha-pg { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.bolinha-pg--pago { background: var(--verde); }
.bolinha-pg--pendente { background: #d99a2b; }

.pagamento-sessao { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; border-left: 3px solid var(--linha-forte); }
.pagamento-sessao h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pagamento-sessao--pago { border-left-color: var(--verde); }
.pagamento-sessao--pendente { border-left-color: #d99a2b; }

/* ---------- Envio do contrato por e-mail ------------------------------ */
.envio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.envio__form .form { grid-template-columns: 1fr; }
.envio__previa { position: sticky; top: 20px; overflow: hidden; }
.envio__previa iframe { display: block; width: 100%; height: 76vh; border: 0; border-top: 1px solid var(--linha); margin-top: 12px; background: #e9eceb; }
.anexo { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; padding: 10px 14px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: #fafcfb; }
.anexo .ic { width: 26px; height: 26px; color: var(--vermelho); }
@media (max-width: 1080px) { .envio { grid-template-columns: 1fr; } .envio__previa { position: static; } }
.envio > .cartao { margin-top: 0; }

/* ---------- Horários: edição e faixa da agenda ------------------------ */
.faixa a { color: inherit; }
.faixa a:hover { text-decoration: underline; }
.faixa .faixa__editar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.faixa .faixa__editar:hover { background: rgba(0,0,0,.08); text-decoration: none; }
.faixa .faixa__editar .ic { width: 13px; height: 13px; }
.exibicao { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.exibicao__campos { display: flex; gap: 12px; align-items: flex-end; }
.exibicao__campos .campo { width: 140px; }
.aviso-whats .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* Dia da semana sem horário de atendimento: fechado na agenda, mas aceita sessões */
.semana__col--fechado { background-color: #f6f7f7; }
.col-fechada { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--fraco); pointer-events: none; }

/* Próximas sessões do pacote no agendamento */
.proximas { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: #fafcfb; }
.proximas__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.proximas__tabela { margin-top: 10px; }
.proximas__tabela td { padding: 6px 8px; }
.proximas__tabela input[type=date], .proximas__tabela input[type=time] { min-height: 36px; padding: 5px 9px; max-width: 190px; }

/* ---------- Usuários: áreas de acesso --------------------------------- */
.areas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.areas li { border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 10px 12px; }
.areas label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.areas input { margin-top: 3px; }
@media (max-width: 860px) { .areas { grid-template-columns: 1fr; } }

/* Nada da coluna do dia passa por cima do cabeçalho */
.semana__col { overflow: hidden; }
.faixa-bloq span { display: block; text-align: center; padding-top: 12px; font-size: 13px; color: var(--suave); }

/* Verificação de CPF/CNPJ */
.aviso-doc { font-size: 13px; min-height: 0; }
.aviso-doc:empty { display: none; }
.aviso-doc--ok { color: var(--verde); }
.aviso-doc--ok::before { content: "✓ "; }
.aviso-doc--erro { color: var(--vermelho); }
input.campo-invalido { border-color: var(--vermelho); box-shadow: 0 0 0 3px var(--vermelho-bg); }

/* ---------- Topo do menu: foto, nome e CRP ---------------------------- */
.perfil { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 8px 20px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.09); }
.perfil:hover { text-decoration: none; }
.perfil__foto { width: 112px; height: 112px; border-radius: 50%; display: block; object-fit: cover;
  border: 3px solid var(--mare); box-shadow: 0 0 0 3px #5fae9d; margin: 6px 0 14px; background: #b9d8cf; }
.perfil__nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 27px; line-height: 1.1; color: #fff; letter-spacing: -.01em; }
.perfil__nome--longo { font-size: 22px; }
.perfil__sub { margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7cc8b6; }
/* Configurações: prévia do topo do menu */
.identificacao { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.identificacao__previa { width: 240px; flex: none; background: var(--mare); border-radius: var(--raio); padding: 22px 14px 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
.identificacao__previa .perfil__foto { margin-top: 0; }
.campo--check { flex-wrap: wrap; }
.campo--check .ajuda, .campo--check .erro { flex-basis: 100%; padding-left: 27px; }

/* ---------- Contas a pagar: linha do mês editável --------------------- */
.contas-mes td { vertical-align: top; }
.contas-mes input[type=date], .contas-mes input[type=number], .contas-mes select { min-height: 36px; padding: 5px 9px; font-size: 14.5px; }
.contas-mes input[type=date] { width: 140px; }
.contas-mes .valor-mes { width: 120px; text-align: right; font-weight: 600; }
.contas-mes .valor-mes.alterado { border-color: #d99a2b; box-shadow: 0 0 0 3px var(--ambar-bg); }
.contas-mes select { width: auto; min-width: 110px; }
.contas-mes td:first-child { min-width: 140px; }
.contas-mes .acoes form { flex-direction: column; align-items: stretch; gap: 6px; }
.contas-mes .acoes .btn { justify-content: center; }
.contas-mes__paga td { background: #fafcfb; }

/* ---------- Alerta de contas vencidas --------------------------------- */
.faixa-alerta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -28px -36px 22px; padding: 10px 36px;
  background: var(--vermelho); color: #fff; font-size: 14.5px; font-weight: 500; }
.faixa-alerta .ic { width: 18px; height: 18px; flex: none; }
.faixa-alerta a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.faixa-alerta form { margin-left: auto; }
.faixa-alerta button { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.5); color: #fff; font: inherit; font-size: 13.5px;
  font-weight: 600; padding: 4px 12px; border-radius: 6px; cursor: pointer; }
.faixa-alerta button:hover { background: rgba(255,255,255,.28); }
.aviso-flutuante { position: fixed; right: 24px; bottom: 24px; z-index: 50; width: min(360px, calc(100vw - 32px));
  background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--vermelho); border-radius: var(--raio);
  box-shadow: 0 10px 30px rgba(19, 58, 63, .18); padding: 16px 18px; animation: aviso-entra .25s ease-out; }
.aviso-flutuante b { color: var(--vermelho); font-size: 15.5px; }
.aviso-flutuante p { margin: 4px 0 12px; color: var(--suave); font-size: 14.5px; }
@keyframes aviso-entra { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aviso-flutuante { animation: none; } }
@media (max-width: 860px) { .faixa-alerta { margin: -20px -16px 18px; padding: 10px 16px; } }
@media print { .faixa-alerta, .aviso-flutuante { display: none !important; } }