/* ── Renata Marques PMU | Academy — direção "Editorial Rosé" ────────────
   Escolhida pela cliente em 11/07. Creme + rosé/terracota, display serif
   Fraunces com itálico, pílulas arredondadas, barra de ciclo tom de pele. */

:root {
  --creme: #FBF6F0;
  --areia: #F3EAE1;
  --tinta: #2A2220;
  --rose: #C25E52;
  --rose-fundo: #F6E3DD;
  --rose-escuro: #9E4437;
  --pele: #E9C8B8;
  --ok: #5E7D62;
  --ok-fundo: #E4EBE1;
  --ambar: #8A6A1F;
  --ambar-fundo: #F3E5C8;
  --fio: #E7DCD2;
  --cinza: #95857B;
  --branco: #FFFFFF;
  --sombra: 0 2px 6px rgba(42, 34, 32, .05), 0 10px 30px rgba(42, 34, 32, .05);
  --f-display: "Fraunces", serif;
  --f-corpo: "Instrument Sans", sans-serif;
  --f-mono: "Spline Sans Mono", monospace;
  --atraso: #9E4437;
  --papel: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-corpo);
  background:
    radial-gradient(1200px 600px at 80% -10%, #FFF6EE 0%, transparent 60%),
    linear-gradient(160deg, #F1E6DB 0%, #EFE4D8 100%);
  background-attachment: fixed;
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}
body:has(> .app-shell) { padding: 34px 24px 46px; }

/* moldura: o "card grande" que envolve o app inteiro */
.moldura {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--creme);
  border: 1px solid var(--fio);
  border-radius: 22px;
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* ── Marca ── */
.marca {
  font-family: var(--f-display);
  font-weight: 540;
  font-size: 17px;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marca b { font-weight: 540; }
.marca-sub {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 340;
  font-size: .92em;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--rose);
  margin-left: 8px;
}

/* ── Topo: só aparece no mobile (no desktop a marca vive no rail lateral) ── */
.topo {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--fio);
  background: linear-gradient(180deg, #FFFFFF, #FDF9F4);
}

/* ── Rail lateral: só ícones, expande no hover mostrando os nomes ── */
.app-shell { display: flex; align-items: stretch; max-width: 1248px; margin: 0 auto; }
.app-shell > .moldura {
  max-width: none; margin: 0; flex: 1 1 auto; min-width: 0;
  border-radius: 0 22px 22px 0; border-left: 0;
}
/* Rail com a MESMA altura da moldura (topo e pé alinhados — parece um card só) */
.rail {
  flex: 0 0 68px; min-width: 0; display: flex; z-index: 20;
  transition: flex-basis .24s cubic-bezier(.4, 0, .2, 1);
}
.rail:hover, .rail:focus-within { flex-basis: 236px; }  /* abre empurrando o conteúdo */
.rail-inner {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFFFFF, #FDF9F4);
  border: 1px solid var(--fio); border-right: 0; border-radius: 22px 0 0 22px;
}
.rail-marca {
  display: flex; align-items: center; gap: 13px; height: 74px; padding: 0 21px;
  flex: 0 0 auto; border-bottom: 1px solid var(--fio); text-decoration: none; color: inherit;
}
.rail-selo {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
  background: var(--rose); color: var(--creme); display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 540; font-size: 12px; letter-spacing: .5px;
}
.rail-nome {
  font-family: var(--f-display); font-weight: 540; font-size: 15px; letter-spacing: .11em;
  text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .18s;
}
.rail-nome b { font-weight: 540; }
.rail-nome em {
  display: block; font-style: italic; font-weight: 340; text-transform: none;
  letter-spacing: .02em; font-size: .78em; color: var(--rose); margin-top: 2px;
}
.rail:hover .rail-nome, .rail:focus-within .rail-nome { opacity: 1; }
.rail-nav { display: flex; flex-direction: column; padding: 12px 0; gap: 2px; flex: 0 0 auto; }
.rail-nav::-webkit-scrollbar { width: 0; }
.rail-item {
  display: flex; align-items: center; gap: 15px; height: 44px; padding: 0 22px;
  color: var(--cinza); position: relative; white-space: nowrap; text-decoration: none;
  transition: background .13s, color .13s;
}
.rail-item i { font-size: 21px; width: 22px; flex: 0 0 auto; text-align: center; }
.rail-txt {
  font-size: 14.5px; font-weight: 500; opacity: 0; transform: translateX(-4px);
  transition: opacity .18s, transform .18s;
}
.rail:hover .rail-txt, .rail:focus-within .rail-txt { opacity: 1; transform: none; }
.rail-item:hover { background: var(--areia); color: var(--tinta); }
.rail-item.ativo { color: var(--rose-escuro); }
.rail-item.ativo::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--rose);
}
.rail-item.ativo:hover { background: var(--rose-fundo); }
.rail-grupo {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cinza); padding: 14px 22px 6px; white-space: nowrap; opacity: .7; transition: opacity .18s;
}
.rail:not(:hover):not(:focus-within) .rail-grupo {
  font-size: 0; padding: 0; height: 0; opacity: 1;
  border-top: 1px solid var(--fio); margin: 8px 16px;
}
.rail-rodape { flex: 0 0 auto; border-top: 1px solid var(--fio); padding: 8px 0; }
.rail-rodape .rail-item.sair:hover { background: var(--rose-fundo); color: var(--rose-escuro); }
.topo .marca { text-decoration: none; }
.menu { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.menu a {
  padding: 8px 15px;
  border-radius: 100px;
  text-decoration: none;
  color: var(--cinza);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.menu a:hover { color: var(--tinta); background: var(--areia); }
.menu a.ativo { background: var(--tinta); color: var(--creme); }
.menu a.sair { color: var(--cinza); font-size: 13px; }
.menu a i { font-size: 15px; vertical-align: -2px; }

.conteudo { width: 100%; padding: 28px 26px 60px; flex: 1; }

/* ── Cabeçalho de página ── */
.pagina-cab { margin-bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Ações do cabeçalho (imprimir, exportar) — ficam à direita do título */
.cab-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.olho {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rose);
  display: block;
  margin-bottom: 8px;
}
h1.titulo {
  font-family: var(--f-display);
  font-weight: 340;
  font-size: clamp(30px, 4.6vw, 44px);
  letter-spacing: -.015em;
  line-height: 1.04;
}
h1.titulo em { font-style: italic; font-weight: 540; color: var(--rose); }

/* ── Botões ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--creme);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-radius: 100px;
  transition: transform .12s, opacity .12s;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn.fantasma { background: transparent; color: var(--tinta); }
.btn.fantasma:hover { background: var(--areia); opacity: 1; }
.btn.mini { padding: 6px 13px; font-size: 12.5px; }
.btn.zap { border-color: #3F9463; background: #3F9463; color: #fff; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ── Livro (listas) ── */
.livro { background: transparent; }
.livro-linha {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 8px;
  border-bottom: 1px solid var(--fio);
  text-decoration: none;
}
.livro-linha:hover { background: linear-gradient(90deg, var(--rose-fundo), transparent 70%); }
.livro-vazio { padding: 46px 20px; text-align: center; color: var(--cinza); border-bottom: 1px solid var(--fio); }
.livro-vazio i { font-size: 30px; display: block; margin-bottom: 8px; color: var(--pele); }

/* ── Tabelas ── */
.tabela-envelope { overflow-x: auto; background: var(--branco); border: 1px solid var(--fio); border-radius: 18px; box-shadow: var(--sombra); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cinza);
  font-weight: 500;
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--fio);
  white-space: nowrap;
}
.tabela td { padding: 13px 18px; border-bottom: 1px solid var(--fio); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tr:hover td { background: var(--creme); }

/* ── Dados ── */
.mono { font-family: var(--f-mono); font-size: .93em; }
.dias-grande {
  font-family: var(--f-display);
  font-weight: 340;
  font-size: 46px;
  letter-spacing: -.02em;
  line-height: .9;
  min-width: 96px;
  text-align: right;
}
.dias-grande small {
  display: block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--cinza);
  margin-top: 7px;
}
.dias-grande.atraso { color: var(--rose-escuro); }
.dias-grande.ok { color: var(--ok); }

/* barra de ciclo (última vinda → prazo) */
.barra { height: 5px; border-radius: 100px; background: var(--areia); margin-top: 10px; max-width: 340px; overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--pele), var(--rose)); }
.barra.ok i { background: linear-gradient(90deg, #CFE0D2, var(--ok)); }

/* anel de ocupação (calendário de agenda) */
.aro {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: conic-gradient(var(--rose) calc(var(--pct, 0) * 1%), var(--fio) 0);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.aro::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--branco); }
.aro .num { position: relative; z-index: 1; font-family: var(--f-display); font-weight: 540; color: var(--rose-escuro); }

/* grade do calendário de ocupação (Visão Contador) */
.ocupacao-envelope { overflow-x: auto; }
.ocupacao-semana-cab, .ocupacao-semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(42px, 1fr));
  gap: 8px 4px;
  margin-bottom: 12px;
}
.ocupacao-dia { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ocupacao-dia-num { font-family: var(--f-mono); font-size: 11px; color: var(--cinza); }
.ocupacao-dia-num.hoje { color: var(--rose-escuro); font-weight: 600; }
.aro.mini { width: 40px; height: 40px; }
.aro.mini .num { font-size: 13px; }

/* linha de configuração do expediente (dia + horários + fechado) */
.campo-expediente { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--fio); }
.campo-expediente:last-of-type { border-bottom: none; }
.campo-expediente .dia-nome { min-width: 84px; font-weight: 600; }
.campo-expediente .horarios { display: flex; align-items: center; gap: 8px; }
.campo-expediente .horarios input[type=time] {
  padding: 8px 10px; border: 1px solid var(--fio); border-radius: 10px;
  background: var(--creme); font-family: var(--f-corpo); max-width: 110px;
}
.campo-expediente .ate { color: var(--cinza); font-size: 13px; }
.campo-expediente .toggle { margin-left: auto; }

/* alterna tabela (desktop) ↔ cartões (mobile) pra listas com muitas colunas */
.somente-mobile { display: none; }

/* ── Chips ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--areia);
  color: var(--cinza);
  white-space: nowrap;
}
.chip.ok { color: var(--ok); background: var(--ok-fundo); }
.chip.atraso { color: var(--rose-escuro); background: var(--rose-fundo); }
.chip.espera { color: var(--ambar); background: var(--ambar-fundo); }
.chip .ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Formulários ── */
.form-cartao { background: var(--branco); border: 1px solid var(--fio); border-radius: 18px; box-shadow: var(--sombra); padding: 28px; max-width: 760px; }
.form-cartao.largo { max-width: 1020px; }

/* Cartão da ficha: informações à esquerda + coluna de ações/números à direita */
.ficha-cartao { background: var(--branco); border: 1px solid var(--fio); border-radius: 16px; box-shadow: var(--sombra); display: flex; overflow: hidden; margin-bottom: 24px; }
.ficha-cartao .principal { flex: 1; min-width: 0; padding: 24px; }
.ficha-cartao .lado { flex: 0 0 218px; border-left: 1px solid var(--fio); background: linear-gradient(180deg, #FFFDFA, #FBF6F0); padding: 22px 18px; display: flex; flex-direction: column; gap: 9px; }
.ficha-cartao .lado .btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 7px; }
.ficha-cartao .lado .stats { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--fio); display: flex; flex-direction: column; gap: 12px; }
.ficha-cartao .lado .rot { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); }
.ficha-cartao .lado .num { font-family: var(--f-display); font-size: 21px; margin-top: 2px; }
.ficha-cartao .lado .num.ok { color: var(--ok); }
@media (max-width: 700px) {
  .ficha-cartao { flex-direction: column; }
  .ficha-cartao .lado { flex: none; border-left: 0; border-top: 1px solid var(--fio); }
}

/* Grupo segmentado de desfecho (linha "Próximo" da ficha) */
.seg { display: inline-flex; align-items: stretch; border: 1px solid var(--fio); border-radius: 100px; overflow: hidden; background: var(--branco); }
.seg form { display: contents; }
.seg .btn { background: var(--branco); color: var(--tinta); border: 0; border-right: 1px solid var(--fio); border-radius: 0; }
.seg .btn:hover { background: var(--areia); }
.seg > :last-child .btn, .seg > .btn:last-child { border-right: 0; }
.seg .btn.destaque { background: var(--tinta); color: var(--creme); }
.seg .btn.destaque:hover { background: #3d332f; }
.seg .btn.perigo { background: var(--rose-fundo); color: var(--rose-escuro); }
.seg .btn.perigo:hover { background: #EFD2CA; }
.seg-rotulo { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }
.btn.perigo { background: var(--rose-fundo); color: var(--rose-escuro); border-color: transparent; }
.btn.perigo:hover { background: #EFD2CA; }

/* Cartão de agendamento na ficha (linha "Próximo") */
.prox-cartao { background: var(--branco); border: 1px solid var(--fio); border-radius: 14px; box-shadow: var(--sombra); padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }

/* Grade rotulada de informações (cabeçalho da ficha da paciente) */
.info-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 26px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--fio); }
.info-grade .rot { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); }
.info-grade .val { font-size: 14.5px; margin-top: 3px; }
.info-grade .val.mono { font-size: 13.5px; }
.info-grade .toda { grid-column: 1 / -1; }
.badge-suave { font-family: var(--f-mono); font-size: 10px; background: var(--ok-fundo); color: var(--ok); padding: 2px 8px; border-radius: 100px; letter-spacing: .04em; white-space: nowrap; }
.campo.c2 { grid-column: span 2; }
@media (max-width: 560px) { .campo.c2 { grid-column: auto; } }
.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo.linha-toda { grid-column: 1 / -1; }
.campo label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cinza);
}
.campo input, .campo select, .campo textarea {
  font-family: var(--f-corpo);
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid var(--fio);
  border-radius: 12px;
  background: var(--creme);
  color: var(--tinta);
  width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--rose); outline: none; background: var(--branco); }
.campo textarea { min-height: 84px; resize: vertical; }
.dica { font-family: var(--f-mono); font-size: 10px; letter-spacing: .03em; color: var(--cinza); opacity: .85; margin-top: 1px; }

/* ── Mapa facial (marcar regiões do procedimento) ── */
.face-mapa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; }
.face-mapa svg { width: 216px; max-width: 100%; height: auto; flex: none; }
/* versão interativa: chips à ESQUERDA, rosto GRANDE à direita */
.face-mapa:not(.mini) svg { width: 340px; order: 2; }
.face-mapa:not(.mini) .face-opcoes { order: 1; flex: 1 1 300px; justify-content: flex-start; max-width: none; align-content: flex-start; }
.face-mapa:not(.mini) .dica { order: 3; }
.face-mapa .contorno { fill: none; stroke: var(--tinta); stroke-width: 1.6; opacity: .8; }
.face-mapa .tracos { fill: none; stroke: var(--cinza); stroke-width: 1.2; opacity: .55; }
.face-mapa .base { pointer-events: none; }
.face-mapa .rg { fill: transparent; stroke: transparent; cursor: pointer; transition: fill .12s; }
.face-mapa .rg:hover { fill: rgba(194, 94, 82, .16); }
.face-mapa .rg.sel { fill: rgba(194, 94, 82, .42); stroke: var(--rose-escuro); stroke-width: 1.2; }
.face-mapa.somente-leitura .rg { cursor: default; pointer-events: none; }
.face-mapa.mini { gap: 0; }
.face-mapa.mini svg { width: 86px; }
.face-mapa .dica { flex-basis: 100%; text-align: center; }
.face-opcoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 360px; }
.fchip { font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; background: var(--rose-fundo); color: var(--rose-escuro); }
.fchip-t { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; background: var(--branco); color: var(--cinza); border: 1px solid var(--fio); cursor: pointer; transition: all .12s; }
.fchip-t:hover { border-color: var(--pele); color: var(--rose-escuro); }
.fchip-t.sel { background: var(--rose-fundo); color: var(--rose-escuro); border-color: var(--rose-escuro); font-weight: 600; }
.sinal-caixa { margin-top: 18px; padding: 16px; border: 1px dashed var(--fio); border-radius: 14px; background: var(--creme); }
.sinal-cab { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); margin-bottom: 12px; }
.mini-stat { display: flex; flex-direction: column; gap: 2px; padding: 9px 16px; border: 1px solid var(--fio); border-radius: 14px; background: var(--branco); min-width: 118px; }
.mini-stat .rot { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }
.mini-stat strong { font-size: 18px; font-family: var(--f-display); }
.dlg { margin: auto; border: 1px solid var(--fio); border-radius: 18px; padding: 26px; max-width: 520px; width: 92vw; background: var(--branco); color: var(--tinta); box-shadow: var(--sombra); }
.dlg::backdrop { background: rgba(42, 34, 32, .38); }

/* ── Home / Painel (widgets) ── */
.home-cab { margin-bottom: 22px; }
.home-ola { font-family: var(--f-display); font-weight: 400; font-size: 30px; letter-spacing: -.01em; }
.home-ola em { font-style: italic; color: var(--rose-escuro); }
.home-sub { color: var(--cinza); font-size: 14px; margin-top: 3px; }
.home-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-w { background: var(--branco); border: 1px solid var(--fio); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.home-w:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.home-big { grid-column: span 2; }
.home-med { grid-column: span 2; }
.home-sm { grid-column: span 1; }
.home-w-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.home-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--rose-fundo); color: var(--rose-escuro); display: grid; place-items: center; font-size: 18px; flex: none; }
.home-w-cab h3 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); font-weight: 500; }
.home-num { font-family: var(--f-display); font-size: 38px; line-height: 1; letter-spacing: -.02em; }
.home-num small { font-size: 14px; color: var(--cinza); font-family: var(--f-corpo); margin-left: 8px; letter-spacing: 0; }
.home-num-2 { font-family: var(--f-display); font-size: 20px; color: var(--rose-escuro); }
.home-legenda { font-size: 12px; color: var(--cinza); margin-top: 3px; }
.home-fin { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.home-lista { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.home-lr { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.home-lr .dias { font-family: var(--f-display); font-size: 16px; color: var(--rose-escuro); width: 30px; text-align: right; flex: none; }
.home-lr .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-lr .barra { height: 5px; border-radius: 5px; background: linear-gradient(90deg, var(--pele), var(--rose)); flex: none; }
.home-tl { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.home-ev { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.home-ev .hora { font-family: var(--f-mono); font-size: 12px; color: var(--rose-escuro); width: 42px; flex: none; }
.home-ev .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); flex: none; }
.home-ev .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-spark { margin-top: 14px; color: var(--rose); display: block; }
.home-bars { display: flex; gap: 6px; align-items: flex-end; height: 54px; }
.home-bars .home-bar { width: 15px; border-radius: 4px; background: var(--pele); }
.home-bars .home-bar.cheio { background: var(--rose); }
.home-bars .home-bar.off { background: var(--areia); }
.home-bars .home-bar.hoje { outline: 2px solid var(--rose-escuro); outline-offset: 1px; }
.home-dias-rot { display: flex; gap: 6px; margin-top: 6px; }
.home-dias-rot span { width: 15px; text-align: center; font-family: var(--f-mono); font-size: 10px; color: var(--cinza); }
.home-mini { align-self: start; }
.home-mini .home-num { font-size: 30px; }
/* linha número + chip (chip encostado à direita, alinhado pela base) */
.home-valor { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.home-valor .home-chip { margin-top: 0; align-self: baseline; }
.home-chip { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; align-self: flex-start; margin-top: auto; }
.home-chip.alerta { background: var(--rose-fundo); color: var(--rose-escuro); }
.home-chip.ok { background: var(--ok-fundo); color: var(--ok); }
.home-chip.neutra { background: var(--areia); color: var(--cinza); }
.home-vazio-w { margin-top: 12px; font-size: 13.5px; color: var(--cinza); }
.home-atalhos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.home-qa { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none; padding: 10px 16px; border-radius: 100px; border: 1px solid var(--tinta); background: var(--tinta); color: var(--creme); transition: opacity .12s, transform .12s; }
.home-qa:hover { opacity: .9; transform: translateY(-1px); }
.home-qa.g { background: var(--branco); color: var(--tinta); border-color: var(--fio); }
.home-qa i { font-size: 16px; }
.home-tag { margin-left: auto; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; background: var(--rose-fundo); color: var(--rose-escuro); text-decoration: none; }
.home-tag.ok { background: var(--ok-fundo); color: var(--ok); }
.home-ico.b { background: var(--ambar-fundo); color: var(--ambar); }
.home-ico.g { background: var(--ok-fundo); color: var(--ok); }
.home-pess { display: flex; align-items: center; gap: 11px; margin-top: 11px; }
.home-av { width: 34px; height: 34px; border-radius: 50%; background: var(--rose-fundo); color: var(--rose-escuro); display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; font-size: 14px; flex: none; }
.home-pess .nome { flex: 1; font-size: 14px; text-decoration: none; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-pess .nome small { display: block; color: var(--cinza); font-size: 12px; }
.home-mini-btn { font-size: 12px; font-weight: 600; text-decoration: none; padding: 6px 12px; border-radius: 100px; background: #3F9463; color: #fff; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; }
.home-mini-btn i { font-size: 14px; }
.home-mini-btn.o { background: transparent; color: var(--rose-escuro); border: 1px solid var(--pele); }
.home-inad { display: flex; align-items: center; gap: 10px; margin-top: 11px; font-size: 13.5px; }
.home-inad .badge { font-family: var(--f-mono); font-size: 11px; color: var(--rose-escuro); background: var(--rose-fundo); border-radius: 100px; padding: 3px 9px; white-space: nowrap; flex: none; }
.home-inad .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: inherit; }
.home-inad .valor { font-family: var(--f-mono); font-weight: 600; flex: none; }
.home-post { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.home-rev { border: 1px solid var(--fio); border-radius: 13px; padding: 11px 13px; background: var(--creme); }
.home-rev .st { color: var(--ambar); font-size: 13px; letter-spacing: 2px; }
.home-rev p { font-size: 13.5px; margin: 5px 0 6px; font-style: italic; }
.home-rev .a { font-size: 12px; color: var(--cinza); }
.home-mini-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 820px) { .home-bento { grid-template-columns: repeat(2, 1fr); } .home-big, .home-med { grid-column: span 2; } .home-mini-row { grid-template-columns: repeat(2, 1fr); } }
.form-acoes { display: flex; gap: 10px; margin-top: 22px; align-items: center; }
.erro-form { color: var(--rose-escuro); font-size: 14px; margin-bottom: 14px; }

/* ── Toggle sim/não ── */
.toggle-linha { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--fio); }
.toggle-linha:last-child { border-bottom: none; }
.toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; }
.toggle .trilho { width: 42px; height: 24px; background: var(--pele); border-radius: 100px; position: relative; transition: background .15s; flex: 0 0 auto; }
.toggle .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--branco); border-radius: 50%; transition: left .15s; box-shadow: 0 1px 3px rgba(42,34,32,.2); }
.toggle input:checked + .trilho { background: var(--rose); }
.toggle input:checked + .trilho::after { left: 21px; }
.toggle input:focus-visible + .trilho { outline: 2px solid var(--rose); outline-offset: 2px; }
.toggle .valor { font-family: var(--f-mono); font-size: 12px; min-width: 28px; color: var(--cinza); }

/* ── Filtros ── */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.filtros input[type=search], .filtros select {
  font-family: var(--f-corpo);
  font-size: 14px;
  padding: 9px 16px;
  border: 1px solid var(--fio);
  border-radius: 100px;
  background: var(--branco);
}
.filtros input[type=search], .filtros select, .filtros .btn { height: 42px; }
.filtros input[type=search] { min-width: 230px; }

/* ── Abas ── */
.abas { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; }
.abas a {
  padding: 8px 16px;
  border-radius: 100px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--cinza);
  background: var(--areia);
}
.abas a.ativa { color: var(--creme); background: var(--tinta); font-weight: 600; }
.abas a:hover:not(.ativa) { color: var(--tinta); }

/* ── Pílulas de resumo ── */
.resumo-grade { display: flex; gap: 14px; margin-bottom: 30px; flex-wrap: wrap; }
.resumo-cartao {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: var(--areia);
  border-radius: 100px;
  padding: 14px 26px;
  border: none;
}
.resumo-cartao .rotulo { font-size: 13px; color: var(--cinza); order: 2; }
.resumo-cartao .numero { font-family: var(--f-display); font-weight: 540; font-size: 32px; line-height: 1; order: 1; overflow-wrap: anywhere; min-width: 0; }
.resumo-cartao .numero.atraso { color: var(--rose-escuro); }
.resumo-cartao .numero:is(.atraso) ~ .rotulo { color: var(--rose-escuro); }
.resumo-cartao:has(.numero.atraso) { background: var(--rose-fundo); }
.resumo-cartao:has(.numero.ok) { background: var(--ok-fundo); }
.resumo-cartao .numero.ok { color: var(--ok); }

/* ── Login ── */
.login-palco {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(560px 420px at 8% -6%, var(--rose-fundo) 0%, transparent 60%),
    radial-gradient(620px 480px at 100% 110%, #EFE0D2 0%, transparent 62%),
    var(--creme);
}
.login-cartao { width: 100%; max-width: 400px; background: var(--branco); border: 1px solid var(--fio); border-radius: 22px; box-shadow: var(--sombra); padding: 46px 40px 40px; text-align: center; }
.login-cartao .marca { font-size: 19px; }
.login-cartao form { margin-top: 34px; text-align: left; display: flex; flex-direction: column; gap: 16px; }

/* ── Página pública ── */
.publico-palco {
  min-height: 100vh;
  padding: 30px 16px 60px;
  background:
    radial-gradient(520px 380px at 10% -4%, var(--rose-fundo) 0%, transparent 60%),
    radial-gradient(560px 440px at 96% 108%, #EFE0D2 0%, transparent 60%),
    var(--creme);
}
.publico-cartao { max-width: 580px; margin: 0 auto; background: var(--branco); border: 1px solid var(--fio); border-radius: 22px; box-shadow: var(--sombra); padding: 36px 30px; }
.publico-cartao .marca { font-size: 15px; text-align: center; display: block; margin-bottom: 4px; }
.secao-rotulo {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 340;
  font-size: 19px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
  border-bottom: 1px solid var(--fio);
  padding-bottom: 8px;
  margin: 28px 0 6px;
}
.secao-rotulo span { color: var(--rose); }

/* ── Estrelas ── */
.estrelas { display: flex; gap: 8px; justify-content: center; }
.estrelas button { font-size: 36px; line-height: 1; background: none; border: none; cursor: pointer; color: var(--pele); padding: 2px; transition: transform .1s; }
.estrelas button:hover { transform: scale(1.15); }
.estrelas button.acesa { color: var(--rose); }

/* ── Timeline ── */
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--pele); }
.evento { position: relative; padding: 0 0 22px; }
.evento::before { content: ""; position: absolute; left: -23px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--rose); border: 2px solid var(--creme); box-shadow: 0 0 0 1px var(--pele); }
.evento .quando { font-family: var(--f-mono); font-size: 12px; color: var(--cinza); }
.evento .cartao { background: var(--branco); border: 1px solid var(--fio); border-radius: 16px; padding: 15px 18px; margin-top: 6px; box-shadow: var(--sombra); }

/* ── Agenda ── */
.agenda-grade-envelope { overflow-x: auto; background: var(--branco); border: 1px solid var(--fio); border-radius: 18px; box-shadow: var(--sombra); }
.agenda-grade { display: grid; min-width: 640px; }
.agenda-hora { font-family: var(--f-mono); font-size: 11px; color: var(--cinza); padding: 4px 8px; text-align: right; border-top: 1px solid var(--fio); }
.agenda-celula { border-top: 1px solid var(--fio); border-left: 1px solid var(--fio); position: relative; min-height: 34px; }
.agenda-col-cab {
  padding: 12px 10px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-left: 1px solid var(--fio);
  position: sticky; top: 0; background: var(--branco); z-index: 3;
}
.agenda-evento {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  text-decoration: none;
  color: var(--tinta);
  border-left: 3px solid rgba(0,0,0,.22);
  z-index: 2;
}
.agenda-evento .ev-nome { font-weight: 600; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.agenda-evento .ev-info { font-size: 11px; opacity: .8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; }
.agenda-evento.cancelado { opacity: .45; text-decoration: line-through; }
.agenda-bloqueio {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(-45deg, var(--areia), var(--areia) 6px, var(--branco) 6px, var(--branco) 12px);
  color: var(--cinza);
  font-family: var(--f-mono); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}

/* Sala compartilhada em uso por outra profissional: cobre os slots (bloqueia o
   clique de agendar) sem parecer um atendimento da coluna */
.agenda-sala-ocupada {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(-45deg, rgba(138, 133, 128, .14), rgba(138, 133, 128, .14) 6px, transparent 6px, transparent 12px);
  color: var(--cinza);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  overflow: hidden; cursor: not-allowed;
  z-index: 1;
}

.agenda-col-cab .sala-chip {
  margin-left: 8px; padding: 1px 9px;
  border: 1px solid var(--fio); border-radius: 99px;
  background: var(--papel);
  font-size: 9.5px; letter-spacing: .1em; color: var(--cinza);
}

/* ── Flash ── */
.flash { padding: 13px 20px; border-radius: 14px; background: var(--ok-fundo); color: var(--ok); margin-bottom: 20px; font-size: 14px; font-weight: 500; }
.flash.erro { background: var(--rose-fundo); color: var(--rose-escuro); }

/* ── Nav mobile inferior ── */
.nav-mobile { display: none; }

@media (max-width: 940px) {
  body:has(> .app-shell) { padding: 10px 8px 96px; }
  .app-shell { display: block; max-width: none; }
  .rail { display: none; }
  .app-shell > .moldura {
    border-radius: 16px; border-left: 1px solid var(--fio);
    min-height: calc(100vh - 116px);
  }
  .topo { display: flex; padding: 12px 16px; }
  .menu { display: none; }
  .conteudo { padding: 26px 16px 40px; }
  .nav-mobile {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(251, 246, 240, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--fio);
    z-index: 50;
    justify-content: space-around;
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
  }
  .nav-mobile a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: var(--cinza);
    font-size: 10px; padding: 4px 8px; letter-spacing: .04em;
  }
  .nav-mobile a i { font-size: 21px; }
  .nav-mobile a.ativo { color: var(--rose-escuro); font-weight: 600; }
  .dias-grande { font-size: 34px; min-width: 70px; }
  .livro-linha { flex-wrap: wrap; gap: 12px 16px; padding: 15px 4px; }
  .resumo-cartao { padding: 11px 20px; }
  .resumo-cartao .numero { font-size: 26px; }
  .aro.mini { width: 32px; height: 32px; }
  .aro.mini .num { font-size: 11px; }
  .ocupacao-semana-cab, .ocupacao-semana { grid-template-columns: repeat(7, minmax(32px, 1fr)); gap: 6px 2px; }
  .ocupacao-dia-num { font-size: 10px; }
  .campo-expediente { flex-direction: column; align-items: flex-start; gap: 10px; }
  .campo-expediente .horarios { width: 100%; justify-content: space-between; }
  .campo-expediente .toggle { margin-left: 0; align-self: flex-end; }
  .somente-mobile { display: block; }
  .somente-desktop { display: none; }
}

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

/* ── Tooltip: [data-tip] mostra o rótulo no hover/foco (botões só de ícone) ── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(3px);
  background: var(--tinta); color: var(--creme);
  font: 500 12px/1 var(--f-corpo); letter-spacing: .01em;
  padding: 7px 10px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s;
  z-index: 80;
}
[data-tip]::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(3px);
  border: 5px solid transparent; border-top-color: var(--tinta); border-bottom: none;
  opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s;
  z-index: 80;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after,
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Papéis de acesso (Equipe & acesso): lista de permissões por área ── */
.perm-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.perm-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; cursor: pointer; padding: 4px 2px;
}
.perm-item input { margin-top: 2px; accent-color: var(--rose); }
.perm-item small { display: block; color: var(--cinza); font-size: 11.5px; }
.perm-item.tudo { grid-column: 1 / -1; color: var(--cinza); font-size: 12.5px; cursor: default; }
@media (max-width: 700px) { .perm-lista { grid-template-columns: 1fr; } }

/* variante para botões encostados na borda direita: o balão alinha à direita
   do botão em vez de centralizar (senão estoura a tela e corta o texto) */
[data-tip].tip-fim::after { left: auto; right: 0; transform: translateY(3px); }
[data-tip].tip-fim:hover::after, [data-tip].tip-fim:focus-visible::after {
  transform: translateY(0);
}

/* dentro de um .campo (forms), o item de permissão/realizadora volta a ser
   texto normal — sem o uppercase mono dos rótulos de campo */
.campo label.perm-item {
  font-family: var(--f-corpo); font-size: 13px; letter-spacing: 0;
  text-transform: none; color: var(--tinta);
}
/* o checkbox do perm-item não é um campo de texto: anula padding/borda que
   .campo input aplica e devolve o tamanho natural */
.campo label.perm-item input {
  width: 15px; height: 15px; padding: 0; border: none; background: none;
  flex: none; margin-top: 2px;
}

/* ── Procedimentos: abas por profissional ── */
.abas-prof { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.aba-prof {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 100px; border: 1px solid var(--fio);
  background: var(--branco); color: var(--tinta);
  font-size: 13px; font-weight: 500; text-decoration: none;
  transition: border-color .12s, background .12s;
}
.aba-prof:hover { border-color: var(--rose); }
.aba-prof.ativa { background: var(--tinta); border-color: var(--tinta); color: var(--creme); }
.aba-prof .cor { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.aba-prof .qtd { font-family: var(--f-mono); font-size: 11px; color: var(--cinza); }
.aba-prof.ativa .qtd { color: var(--creme); opacity: .75; }

/* ── Comanda de serviços do agendamento: mesmos campos do resto do projeto ── */
.item-linha select.item-tipo, .item-linha input.item-valor {
  font-family: var(--f-corpo);
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid var(--fio);
  border-radius: 12px;
  background: var(--creme);
  color: var(--tinta);
}
.item-linha select.item-tipo:focus, .item-linha input.item-valor:focus {
  border-color: var(--rose); outline: none; background: var(--branco);
}
.item-linha input.item-valor { width: 150px !important; }

/* linha de tabela clicável (ex.: pacientes → ficha) */
.tabela tr[data-href] { cursor: pointer; }
.tabela tr[data-href]:hover td { background: var(--creme); }

/* rodapé das abas de Equipe & acesso: texto à esq., botão de criar à dir. */
.rodape-aba { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; }
.rodape-aba p { margin: 0; font-size: 12.5px; color: var(--cinza); max-width: 70ch; }
.tabela-envelope { overflow-x: auto; }

/* ── Voltar: link discreto acima do título de cada página ── */
.voltar-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cinza);
  background: none; border: none; cursor: pointer; padding: 0;
  margin: 0 0 10px;
}
.voltar-link:hover { color: var(--rose); }
.voltar-link i { font-size: 14px; }

/* ── Crédito do desenvolvedor: barra inferior no estilo do rail ── */
.credito-dev {
  margin: 0; text-align: center;
  background: linear-gradient(180deg, #FFFFFF, #FDF9F4);
  border-top: 1px solid var(--fio);
  padding: 13px 20px;
  font-size: 12.5px; color: var(--cinza);
}
.credito-dev strong { color: var(--tinta); }
.credito-dev a { color: var(--cinza); text-decoration: none; }
.credito-dev a:hover { color: var(--rose); }
.credito-dev i { font-size: 14px; vertical-align: -2px; }
/* na moldura, o main deve crescer pra barra ficar no pé do card */
.app-shell > .moldura { display: flex; flex-direction: column; }
.app-shell > .moldura > .conteudo { flex: 1 1 auto; }
/* no login o crédito continua solto (card flutuante) */
.login-palco ~ .credito-dev, footer.credito-dev[style*="fixed"] {
  background: none; border-top: 0;
}

/* olhinho de mostrar/ocultar senha */
.olho-senha {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--cinza);
  padding: 6px; font-size: 17px; line-height: 1;
}
.olho-senha:hover { color: var(--rose); }

/* ── Paginação ─────────────────────────────────────────────────────────
   Listas longas (retornos chega a ~1.800 pacientes). Sem régua de números:
   com 120 páginas ela é ilegível, e "página 47" não diz nada a quem está
   ligando para pacientes em ordem de atraso. O que orienta é a POSIÇÃO na
   fila — por isso o destaque é o intervalo sobre o total. */
.paginacao {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--fio);
}
.paginacao .faixa {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cinza);
}
.paginacao .faixa b { color: var(--tinta); font-weight: 500; }
.paginacao .controles { display: flex; align-items: center; gap: 10px; }
.paginacao .onde {
  font-family: var(--f-mono); font-size: 12px; color: var(--cinza);
  min-width: 74px; text-align: center; white-space: nowrap;
}
.paginacao .onde b { color: var(--rose); font-weight: 500; }
/* Ponta da lista: o botão fica visível mas inerte — sumir move o outro de lugar */
.paginacao .btn[aria-disabled="true"] {
  opacity: .34; pointer-events: none;
}
.paginacao .btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
@media (max-width: 560px) {
  .paginacao { justify-content: center; }
  .paginacao .faixa { width: 100%; text-align: center; }
}

/* ── Protocolo: série FINITA de sessões (ex.: bioestimulador, 3x) ──────
   A trilha é o elemento principal: numerar aqui não é enfeite, a ordem É
   a informação ("ela está na 2 de 3"). Nós preenchidos = já aconteceu;
   contorno = tem horário marcado; tracejado = ainda é previsão. */
.protoc { background: var(--branco); border: 1px solid var(--fio); border-radius: 16px; box-shadow: var(--sombra); padding: 20px 22px; margin-bottom: 16px; }
.protoc.encerrado { background: linear-gradient(180deg, #FFFDFA, var(--creme)); }
.protoc-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.protoc-nome { font-family: var(--f-display); font-size: 18px; }
.protoc-cab .de { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); margin-left: auto; }

.protoc-trilha { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 4px 0 2px; }
.protoc-etapa { display: flex; align-items: flex-start; flex: 1; min-width: 0; }
.protoc-etapa:last-child { flex: 0 0 auto; }
.protoc-no { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; width: 72px; }
.protoc-bola {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--fio); background: var(--branco); color: var(--cinza);
}
.protoc-no.feita .protoc-bola { background: var(--rose); border-color: var(--rose); color: var(--branco); }
.protoc-no.agendada .protoc-bola { border-color: var(--rose); border-width: 2px; color: var(--rose-escuro); background: var(--rose-fundo); }
/* tracejado = ainda não é real, é previsão — mesma verdade que o financeiro conta */
.protoc-no.prevista .protoc-bola { border-style: dashed; border-color: var(--pele); }
.protoc-no.cancelada .protoc-bola { color: var(--fio); border-style: dashed; }
.protoc-no.cancelada .protoc-quando { text-decoration: line-through; }
.protoc-quando { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--cinza); text-align: center; line-height: 1.35; }
.protoc-no.vencida .protoc-quando { color: var(--atraso); font-weight: 600; }
.protoc-liga { flex: 1; min-width: 18px; height: 1.5px; background: var(--fio); margin-top: 17px; position: relative; }
.protoc-liga.andou { background: var(--rose); }
.protoc-liga .interv { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--branco); padding: 0 6px; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--cinza); white-space: nowrap; }

/* Os três números que nunca se misturam: entrou / deve / pode entrar */
.protoc-din { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fio); }
.protoc-val { display: flex; flex-direction: column; gap: 2px; padding: 8px 15px; border: 1px solid var(--fio); border-radius: 14px; min-width: 116px; }
.protoc-val .rot { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }
.protoc-val strong { font-family: var(--f-display); font-size: 17px; }
.protoc-val.pago { background: var(--ok-fundo); border-color: transparent; }
.protoc-val.pago strong { color: var(--ok); }
.protoc-val.deve { background: var(--rose-fundo); border-color: transparent; }
.protoc-val.deve strong { color: var(--rose-escuro); }
/* previsto: borda tracejada porque esse dinheiro pode nunca existir */
.protoc-val.previsto { border-style: dashed; border-color: var(--pele); background: transparent; }
.protoc-val.previsto strong { color: var(--cinza); }
.protoc-nota { font-size: 12px; color: var(--cinza); margin-top: 10px; line-height: 1.5; }

/* Fila de sessões a marcar (entra na tela de Retornos) */
.protoc-fila-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.protoc-selo { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-escuro); background: var(--rose-fundo); padding: 3px 9px; border-radius: 100px; white-space: nowrap; }

@media (max-width: 620px) {
  .protoc-trilha { padding-bottom: 8px; }
  .protoc-no { width: 60px; }
  .protoc-val { flex: 1; min-width: 96px; }
}
@media (prefers-reduced-motion: no-preference) {
  .protoc-no.agendada .protoc-bola { animation: protoc-pulso 2.4s ease-in-out infinite; }
}
@keyframes protoc-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 94, 82, .28); }
  50% { box-shadow: 0 0 0 5px rgba(194, 94, 82, 0); }
}