/* Painel do Felipe Garre — tatuagem em realismo preto e cinza.
 *
 * A sala escura do estúdio: a tattoo fica sob a única luz, e o painel é a
 * bancada ao lado dela. O plano inteiro está em docs/plano-visual.md, e o
 * testes/estilo.test.js barra o que o Lucas já reprovou (cor fora da paleta,
 * caixa alta forçada, gradiente de enfeite, sombra cinza de cartão).
 *
 * Ordem do arquivo: fontes, tokens, base, telas, e só no fim os @media.
 * Regra solta depois de um @media sobrescreve o celular. */

/* ── fontes, servidas daqui (sem Google na tela) ─────────────────────── */
@font-face {
  font-family: Archivo;
  font-weight: 400;
  font-display: swap;
  src: url('/publico/fontes/archivo-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: Archivo;
  font-weight: 500;
  font-display: swap;
  src: url('/publico/fontes/archivo-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: Archivo;
  font-weight: 600;
  font-display: swap;
  src: url('/publico/fontes/archivo-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo Black';
  font-weight: 400;
  font-display: swap;
  src: url('/publico/fontes/archivo-black-latin-400-normal.woff2') format('woff2');
}

/* ── tokens (os mesmos do site dele) ─────────────────────────────────── */
:root {
  --breu: #0a0908;
  --carvao: #15120f;
  --fumaca: #251f1a;
  --osso: #f5f0ea;
  --cinza: #a89c91;
  --ferrugem: #9c3620;

  --fio: rgba(245, 240, 234, 0.1);
  --fio-forte: rgba(245, 240, 234, 0.2);

  /* Três tamanhos que ninguém confunde, mais o miúdo. */
  --display: clamp(3rem, 8vw, 6.5rem);
  --titulo: 1.6rem;
  --texto: 1rem;
  --miudo: 0.8125rem;

  --respiro: clamp(1.5rem, 5vw, 4.5rem);
  --lateral: 16.5rem;
  --pesado: 'Archivo Black', Archivo, system-ui, sans-serif;
}

/* ── base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  /* A única luz: fraca, do alto à esquerda. */
  background:
    radial-gradient(ellipse 80% 70% at 0% 0%, rgba(245, 240, 234, 0.055), transparent 70%) fixed,
    var(--breu);
  color: var(--osso);
  font-family: Archivo, system-ui, sans-serif;
  font-size: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

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

.display {
  font-family: var(--pesado);
  font-size: var(--display);
  line-height: 0.86;
  letter-spacing: -0.035em;
}
.titulo { font-size: var(--titulo); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.miudo { font-size: var(--miudo); color: var(--cinza); }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: 2px;
  background: var(--ferrugem);
  color: var(--osso);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { filter: brightness(1.14); }

.aviso {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--ferrugem);
  background: var(--fumaca);
}

/* ── entrar: a foto domina, o nome cruza a costura ───────────────────── */
.entrar {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(26rem, 1fr);
  min-height: 100svh;
}

.entrar-foto {
  position: relative;
  overflow: hidden;
  background: var(--breu);
}
.entrar-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  animation: revelar 1.8s cubic-bezier(0.2, 0.7, 0.1, 1) both;
}
/* A foto se dissolve no carvão pelo lado oposto à luz: sombra interna, sem gradiente. */
.entrar-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset -16rem 0 10rem -6rem var(--carvao),
    inset 0 -6rem 6rem -4rem var(--breu);
  pointer-events: none;
}
.entrar-foto figcaption {
  position: absolute;
  z-index: 1;
  left: var(--respiro);
  bottom: 1.75rem;
}
.entrar-foto figcaption {
  font-size: var(--miudo);
  color: var(--osso);
  text-shadow: 0 0 0.3rem var(--breu), 0 0 1rem var(--breu);
}

.entrar-painel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--respiro);
  background: var(--carvao);
}

.entrar-nome {
  font-family: var(--pesado);
  font-weight: 400;
  font-size: var(--display);
  line-height: 0.86;
  letter-spacing: -0.04em;
  /* O nome entra na foto: é o objeto da tela, não um título de formulário. */
  margin-left: -2.1em;
  text-shadow: 0 0.04em 0.6em rgba(10, 9, 8, 0.9);
}
.entrar-nome span {
  display: block;
  animation: subir 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) 0.55s both;
}
.entrar-nome span + span { animation-delay: 0.7s; }

.entrar-linha {
  max-width: 24rem;
  margin: 1.75rem 0 3rem;
  color: var(--cinza);
}

.form-entrar {
  display: grid;
  gap: 0.4rem;
  max-width: 24rem;
}
.form-entrar label {
  margin-top: 1rem;
  font-size: var(--miudo);
  font-weight: 500;
  color: var(--cinza);
}
.form-entrar label:first-child { margin-top: 0; }
.form-entrar input {
  width: 100%;
  min-height: 3.1rem;
  padding: 0 1rem;
  border: 1px solid var(--fio-forte);
  border-radius: 2px;
  background: var(--breu);
}
.form-entrar input:focus { outline: none; border-color: var(--osso); }
.form-entrar .botao { width: 100%; margin-top: 2rem; }
.entrar-painel .aviso { max-width: 24rem; margin-bottom: 1.5rem; }

/* ── casca logada: lateral no desktop ────────────────────────────────── */
.logado {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  /* A coluna da lateral pintada até o pé da página, mesmo quando ela rola. */
  box-shadow: inset var(--lateral) 0 0 var(--carvao), inset calc(var(--lateral) + 1px) 0 0 var(--fio);
}

.pular {
  position: absolute;
  left: -999px;
  z-index: 50;
  padding: 0.75rem 1rem;
  background: var(--osso);
  color: var(--breu);
}
.pular:focus { left: 1rem; top: 1rem; }

.topo { display: none; }
.botao-menu { display: none; }

.marca {
  font-family: var(--pesado);
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}

.lateral {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  height: 100svh;
  overflow-y: auto;
  padding: 2.25rem 1.25rem 1.5rem;
  background: var(--carvao);
  border-right: 1px solid var(--fio);
}
.lateral > .marca { padding: 0 0.75rem; }

.grupo-nome {
  padding: 0 0.75rem 0.5rem;
  font-size: var(--miudo);
  color: var(--cinza);
}
.grupo ul { margin: 0; padding: 0; list-style: none; }
.grupo a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-left: 2px solid transparent;
  color: var(--cinza);
  font-weight: 500;
  text-decoration: none;
}
.grupo a:hover { color: var(--osso); }
.grupo a[aria-current='page'] {
  border-left-color: var(--ferrugem);
  background: var(--fumaca);
  color: var(--osso);
}

.lateral-pe {
  display: grid;
  gap: 1rem;
  margin-top: auto;
  padding: 1.25rem 0.75rem 0;
  border-top: 1px solid var(--fio);
}
.estado-ia { font-size: var(--miudo); color: var(--cinza); line-height: 1.45; }
.botao-sair {
  min-height: 2.75rem;
  width: 100%;
  border: 1px solid var(--fio-forte);
  border-radius: 2px;
  background: transparent;
  color: var(--cinza);
  cursor: pointer;
}
.botao-sair:hover { color: var(--osso); border-color: var(--cinza); }

.veu {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(10, 9, 8, 0.72);
}

.conteudo {
  min-width: 0;
  padding: var(--respiro);
}
.conteudo:focus { outline: none; }

/* ── início: a porta do estúdio. A foto sangra pelo topo e pela direita,
   e a próxima sessão atravessa a costura em Archivo Black. As fotos têm
   640px de altura: a coluna da foto para no tamanho que o arquivo aguenta
   sem borrar, e o texto invade a foto em vez de a foto esticar. ───────── */
.in-abre {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
  min-height: min(84svh, 50rem);
  margin: calc(-1 * var(--respiro)) calc(-1 * var(--respiro)) 0 0;
}
.in-foto {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  overflow: hidden;
}
.in-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  animation: revelar 1.8s cubic-bezier(0.2, 0.7, 0.1, 1) both;
}
/* A foto some no breu pela costura (lado da luz) e pelo pé: sombra interna, sem gradiente. */
.in-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 14rem 0 9rem -5rem var(--breu),
    inset 0 -14rem 9rem -6rem var(--breu);
  pointer-events: none;
}
.in-estudio {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding-top: var(--respiro);
  color: var(--cinza);
  font-weight: 500;
}
.in-sessao {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 1;
  padding: 0 var(--respiro) 3.25rem 0;
}
.in-chamada { margin-bottom: 1.1rem; font-size: 1.05rem; font-weight: 500; }
.in-hora {
  font-size: clamp(3.5rem, 7.4vw, 8rem);
  text-shadow: 0 0.04em 0.5em rgba(10, 9, 8, 0.85);
  animation: subir 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) 0.5s both;
}
.in-quem {
  max-width: 40rem;
  margin-top: 1.75rem;
  font-size: 1.3rem;
  line-height: 1.4;
  text-shadow: 0 0 0.6rem var(--breu);
}
.in-quem strong { font-weight: 600; }
.in-meta { max-width: 44rem; margin-top: 0.4rem; color: var(--cinza); text-shadow: 0 0 0.6rem var(--breu); }
.in-ver {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 1rem;
  font-weight: 500;
  text-underline-offset: 0.25em;
}
.in-ver:hover { text-decoration-thickness: 2px; }

/* O bento: cada bloco do tamanho da sua importância, cada um numa camada. */
.in-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.75rem;
  max-width: 72rem;
  margin-top: clamp(4rem, 8vw, 6.5rem);
}
.in-bloco {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid transparent;
  border-radius: 3px;
  text-decoration: none;
}
.in-bloco:hover { border-color: var(--cinza); }
.in-esperando {
  grid-row: span 2;
  background: var(--carvao);
  border-color: var(--fio);
}
/* Com alguém esperando, o fio de ferrugem: o mesmo sinal da conversa que espera. */
.in-esperando:not(.in-vazio) { border-left: 3px solid var(--ferrugem); }
.in-fichas { background: var(--fumaca); }
.in-confirmar { border-color: var(--fio-forte); }
.in-numero {
  font-family: var(--pesado);
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.in-esperando .in-numero { font-size: clamp(7rem, 13vw, 12rem); }
.in-fichas .in-numero { font-size: clamp(3.5rem, 5.5vw, 5.25rem); }
.in-confirmar .in-numero { font-size: clamp(2.75rem, 3.6vw, 3.25rem); }
.in-vazio .in-numero { color: var(--cinza); }
.in-rotulo { margin-top: 0.9rem; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.in-esperando .in-rotulo { font-size: var(--titulo); }
.in-apoio {
  display: -webkit-box;
  margin-top: 0.6rem;
  overflow: hidden;
  color: var(--cinza);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.in-nomes { margin: auto 0 0; padding: 2rem 0 0; list-style: none; }
.in-nomes li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--fio);
}
.in-nome { font-weight: 500; }
.in-tempo { color: var(--cinza); font-variant-numeric: tabular-nums; white-space: nowrap; }
.in-ia { max-width: 72rem; margin-top: 2rem; font-size: var(--miudo); color: var(--cinza); }

/* ── pós-tattoo: o caderno do Felipe ao lado do celular da cliente ───── */
.pos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
  gap: var(--respiro);
  align-items: start;
}
.pos-principal { min-width: 0; max-width: 50rem; }
.pos-aviso {
  max-width: 42rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--ferrugem);
  background: var(--fumaca);
  font-size: 1.05rem;
}
.pos-vazio { max-width: 40rem; margin-top: 2.5rem; color: var(--cinza); }
.pos-lista { margin: 3rem 0 0; padding: 0; list-style: none; }
.pos-item {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.75rem 0 1.25rem;
  border-top: 1px solid var(--fio);
}
.pos-num {
  font-family: var(--pesado);
  font-size: 3rem;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--cinza);
}
.pos-titulo { font-size: var(--titulo); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.pos-texto { max-width: 60ch; margin-top: 0.5rem; }
.pos-desativada :is(.pos-num, .pos-titulo, .pos-texto) { color: var(--cinza); opacity: 0.6; }
.pos-aviso-item { margin-top: 0.6rem; font-size: var(--miudo); font-weight: 600; color: var(--cinza); }
.pos-acoes { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 0.5rem; }
.pos-acoes form { margin: 0; }
.pos-editar[open] { flex-basis: 100%; }
:is(.pos-editar, .pf-editar) summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--cinza);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
:is(.pos-editar, .pf-editar) summary::-webkit-details-marker { display: none; }
:is(.pos-editar, .pf-editar) summary:hover { color: var(--osso); }
.pos-form { display: grid; gap: 1rem; max-width: 40rem; margin-top: 0.75rem; }
.pos-form .botao, .pos-form .botao-claro { justify-self: start; }
.pos-campo { display: grid; gap: 0.4rem; }
.pos-campo label, .pos-teste label, .pf-form label, .aj-rotulo {
  font-size: var(--miudo);
  font-weight: 500;
  color: var(--cinza);
}
:is(.pos-campo, .pos-teste-linha, .pf-form, .aj-form) :is(input, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 3.1rem;
  padding: 0 0.9rem;
  border: 1px solid var(--fio-forte);
  border-radius: 2px;
  background: var(--breu);
}
.pos-campo textarea { padding: 0.8rem 0.9rem; line-height: 1.5; resize: vertical; }
:is(.pos-campo, .pos-teste-linha, .pf-form, .aj-form) :is(input, textarea):focus { outline: none; border-color: var(--osso); }
.pos-nova {
  max-width: 44rem;
  margin-top: 3.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--fio);
  border-radius: 3px;
  background: var(--carvao);
}
.pos-nova .aviso { margin-top: 1rem; }

/* A prévia fica parada enquanto a lista rola: é o celular da cliente. */
.pos-previa { position: sticky; top: var(--respiro); display: grid; gap: 1.25rem; }
.pos-teste { display: grid; gap: 0.4rem; }
.pos-teste-linha { display: flex; gap: 0.5rem; }
.pos-celular {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1rem 1.25rem;
  border: 1px solid var(--fio-forte);
  border-radius: 1.75rem;
  background: var(--carvao);
}
.pos-pergunta {
  align-self: flex-end;
  max-width: 85%;
  padding: 0.6rem 0.85rem;
  border-radius: 1rem 1rem 0.25rem 1rem;
  background: var(--fumaca);
}
.pos-balao {
  align-self: flex-start;
  max-width: 94%;
  padding: 0.8rem 0.95rem;
  border-radius: 1rem 1rem 1rem 0.25rem;
  background: var(--osso);
  color: var(--breu);
  font-size: 0.95rem;
  line-height: 1.5;
}
.pos-balao p + p { margin-top: 0.6rem; }
.pos-legenda { padding: 0 0.25rem; font-size: var(--miudo); color: var(--cinza); }

/* ── portfólio: a parede de fotos, sem moldura, tamanhos desiguais ──── */
.pf-cabeca { display: grid; gap: 1rem; max-width: 48rem; margin-bottom: 2.5rem; }
.pf-apoio { color: var(--cinza); }
.pf-mosaico {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(4.5rem, 6.8vw, 6.5rem);
  grid-auto-flow: dense;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-foto {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  background: var(--breu);
}
.pf-destaque { grid-column: span 4; grid-row: span 6; }
.pf-quadra { grid-column: span 2; grid-row: span 3; }
.pf-larga { grid-column: span 3; grid-row: span 4; }
.pf-alta { grid-column: span 2; grid-row: span 4; }
.pf-foto figure { position: relative; min-height: 0; overflow: hidden; }
.pf-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.pf-foto figure::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -5rem 3.5rem -2.5rem var(--breu);
  pointer-events: none;
}
.pf-foto figcaption {
  position: absolute;
  z-index: 1;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.7rem;
  font-size: var(--miudo);
  line-height: 1.35;
  text-shadow: 0 0 0.4rem var(--breu);
}
.pf-destaque figcaption { font-size: var(--texto); left: 1.5rem; bottom: 1.25rem; }
.pf-selo {
  position: absolute;
  z-index: 1;
  top: 1.25rem;
  left: 1.5rem;
  font-family: var(--pesado);
  font-size: clamp(1.6rem, 2.6vw, 2.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-shadow: 0 0.04em 0.5em rgba(10, 9, 8, 0.9);
}
.pf-acoes { display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding: 0 0.9rem; }
.pf-acoes form { margin: 0; }
.pf-editar summary { font-size: var(--miudo); }
.pf-acoes .botao-texto { font-size: var(--miudo); }
/* A edição abre por cima da foto, para o mosaico não perder o ritmo. */
.pf-editar[open] .pf-form {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--carvao);
  border-top: 1px solid var(--fio-forte);
}
.pf-form .aviso { margin: 0; }
.pf-form .botao-claro { justify-self: start; min-height: 2.75rem; }

/* ── ajustes: o quadro de chaves do estúdio, em bento ───────────────── */
.aj-cabeca { margin-bottom: 2rem; color: var(--cinza); font-weight: 500; }
.aj-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 72rem;
}
.aj-bloco {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--fio);
  border-radius: 3px;
  text-decoration: none;
}
.aj-robo {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: flex-end;
  gap: 1.5rem;
  min-height: 27rem;
  background: var(--carvao);
}
.aj-robo form { margin: 0; }
.aj-desligado { border-left: 3px solid var(--ferrugem); }
.aj-robo-estado { font-size: clamp(3.25rem, 7vw, 7rem); max-width: 7ch; }
.aj-robo .aj-texto { max-width: 38rem; font-size: 1.1rem; color: var(--osso); }
.aj-ia { background: var(--fumaca); border-color: transparent; }
.aj-nome { border-color: var(--fio-forte); }
.aj-faixas { grid-column: span 2; }
.aj-faixas:hover { border-color: var(--cinza); }
.aj-titulo { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.aj-valor {
  margin-top: 1rem;
  font-family: var(--pesado);
  font-size: var(--titulo);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.aj-texto { max-width: 46ch; margin-top: 0.75rem; color: var(--cinza); }
.aj-ir { margin-top: auto; padding-top: 1.5rem; font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; }
.aj-texto code {
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  background: var(--breu);
  color: var(--osso);
  font-size: 0.9em;
  white-space: nowrap;
}
.aj-form { display: grid; gap: 0.6rem; margin-top: 1rem; }
.aj-form .botao-linha { justify-self: start; }
.aj-nome .aviso { margin-top: 1rem; }

/* ── tabela genérica (vira cartão no celular) ───────────────────────── */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  padding: 0 1rem 0.75rem;
  border-bottom: 1px solid var(--fio-forte);
  font-size: var(--miudo);
  font-weight: 500;
  color: var(--cinza);
  text-align: left;
}
.tabela td {
  padding: 1rem;
  border-bottom: 1px solid var(--fio);
  vertical-align: top;
}
.tabela tbody tr:hover { background: var(--carvao); }
.vazio { color: var(--cinza); }
.junto { white-space: nowrap; }


/* ── conversas: o número da fila domina, o resto é lista calma ─────── */
.leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.titulo-tela {
  font-size: var(--titulo);
  font-weight: 500;
  color: var(--cinza);
  letter-spacing: -0.01em;
}

.fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 2.5rem 0 4rem;
  border-bottom: 1px solid var(--fio);
}
/* O número da fila, em tamanho de cartaz: é o que ele vê primeiro. */
.fila-numero {
  grid-row: 1 / span 6;
  align-self: start;
  font-family: var(--pesado);
  font-size: clamp(9rem, 22vw, 19rem);
  line-height: 0.74;
  letter-spacing: -0.06em;
  margin-left: -0.04em;
}
.fila-texto { max-width: 36rem; padding-bottom: 0.3rem; }
.fila-frase { font-size: var(--titulo); color: var(--cinza); line-height: 1.2; }
.fila-quem {
  margin-top: 0.4rem;
  font-size: var(--titulo);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.fila-quem strong { font-weight: 600; }
.fila-tempo { font-family: var(--pesado); letter-spacing: -0.02em; white-space: nowrap; }
.fila-citacao {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 60ch;
  margin: 1.5rem 0 2rem;
  padding-left: 1rem;
  border-left: 1px solid var(--fio-forte);
  color: var(--cinza);
}
.fila-depois { margin-top: 1.5rem; font-size: var(--miudo); color: var(--cinza); }
.fila-depois a { color: var(--osso); }
.fila-vazia .fila-numero { color: var(--fumaca); }
.fila-vazia .fila-frase { color: var(--osso); }
.fila-vazia .fila-depois { font-size: var(--texto); margin-top: 0.5rem; }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  margin: 3.5rem 0 0.5rem;
}
.filtros a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  border-bottom: 2px solid transparent;
  color: var(--cinza);
  font-weight: 500;
  text-decoration: none;
}
.filtros a:hover { color: var(--osso); }
.filtros a[aria-current] { color: var(--osso); border-bottom-color: var(--osso); }
.filtro-n { font-size: var(--miudo); color: var(--cinza); font-variant-numeric: tabular-nums; }

.lista-conversas { margin: 0; padding: 0; list-style: none; }
.lista-conversas > .vazio { padding: 2rem 0; }
.linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.5rem 5.5rem;
  grid-template-areas: 'nome estado tempo' 'trecho estado tempo';
  column-gap: 2rem;
  row-gap: 0.2rem;
  padding: 1.5rem 0.75rem;
  margin: 0 -0.75rem;
  border-bottom: 1px solid var(--fio);
  text-decoration: none;
}
.linha:hover { background: var(--carvao); }
.linha-nome { grid-area: nome; font-size: 1.15rem; font-weight: 600; }
.linha-trecho {
  grid-area: trecho;
  overflow: hidden;
  color: var(--cinza);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linha-estado { grid-area: estado; align-self: center; font-size: var(--miudo); color: var(--cinza); }
.linha-esperando .linha-estado { color: var(--osso); font-weight: 600; }
.linha-encerrada .linha-nome { color: var(--cinza); font-weight: 500; }
.linha-tempo {
  grid-area: tempo;
  align-self: center;
  color: var(--cinza);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── uma conversa: o fio na luz, a ficha na bancada de carvão ────────── */
.bancada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
  column-gap: var(--respiro);
  min-height: 100svh;
  /* A ficha sangra até o topo, o pé e a borda direita. */
  margin: calc(-1 * var(--respiro)) calc(-1 * var(--respiro)) calc(-1 * var(--respiro)) 0;
}
.bancada-fio { min-width: 0; max-width: 46rem; padding: var(--respiro) 0; }

.voltar {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--cinza);
  font-size: var(--miudo);
  text-decoration: none;
}
.voltar:hover { color: var(--osso); }
.nome-cliente {
  margin: 1.25rem 0 1rem;
  font-family: var(--pesado);
  font-weight: 400;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.situacao { font-size: 1.15rem; color: var(--cinza); }
.situacao-espera { color: var(--osso); }
.bancada-fio > .miudo { margin-top: 0.25rem; font-variant-numeric: tabular-nums; }

.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 3.5rem; }
.acoes form { margin: 0; }
.botao-linha {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--fio-forte);
  border-radius: 2px;
  background: transparent;
  color: var(--osso);
  font-weight: 500;
  cursor: pointer;
}
.botao-linha:hover { border-color: var(--osso); }
.botao-claro {
  min-height: 3rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: 2px;
  background: var(--osso);
  color: var(--breu);
  font-weight: 600;
  cursor: pointer;
}
.botao-claro:hover { background: var(--cinza); }
.bancada-fio .aviso { margin: 0 0 2rem; }

.fio {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}
.msg { max-width: min(34rem, 86%); }
.msg-cliente { align-self: flex-start; }
.msg-robo, .msg-felipe { align-self: flex-end; }
.msg-robo .msg-quem, .msg-felipe .msg-quem { text-align: right; }
.msg-quem { margin-bottom: 0.4rem; font-size: var(--miudo); color: var(--cinza); }
.msg-quem strong { color: var(--osso); font-weight: 600; margin-right: 0.35rem; }
.msg-texto, .msg-anexo {
  padding: 0.85rem 1.1rem;
  border-radius: 2px;
  white-space: pre-line;
}
.msg-cliente .msg-texto, .msg-cliente .msg-anexo { background: var(--fumaca); }
.msg-robo .msg-texto, .msg-robo .msg-anexo { border: 1px solid var(--fio); color: var(--cinza); }
.msg-felipe .msg-texto, .msg-felipe .msg-anexo { background: var(--carvao); border: 1px solid var(--fio-forte); }
.msg-texto + .msg-anexo { margin-top: 0.35rem; }
/* A ferrugem aqui só marca quem está esperando resposta. */
.msg-espera .msg-texto, .msg-espera .msg-anexo { border-left: 3px solid var(--ferrugem); }
.msg-aviso { margin-top: 0.45rem; font-size: var(--miudo); font-weight: 500; }

.compor {
  display: grid;
  gap: 0.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--fio);
}
.compor label, .simular-escolha label { font-size: var(--miudo); font-weight: 500; color: var(--cinza); }
.compor textarea, .simular-escolha select {
  width: 100%;
  border: 1px solid var(--fio-forte);
  border-radius: 2px;
  background: var(--carvao);
}
.compor textarea { min-height: 6rem; padding: 0.85rem 1rem; resize: vertical; line-height: 1.5; }
.compor textarea:focus, .simular-escolha select:focus { outline: none; border-color: var(--osso); }
.compor-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }

.ficha {
  background: var(--carvao);
  border-left: 1px solid var(--fio);
}
/* A coluna vai até o pé; o conteúdo dela fica parado enquanto o fio rola. */
.ficha-dentro {
  position: sticky;
  top: 0;
  max-height: 100svh;
  overflow-y: auto;
  padding: calc(var(--respiro) + 2.75rem) clamp(1.5rem, 3vw, 2.75rem) var(--respiro);
}
.ficha-titulo { font-family: var(--pesado); font-weight: 400; font-size: var(--titulo); letter-spacing: -0.02em; line-height: 1; }
.ficha-situacao { margin: 0.6rem 0 2rem; color: var(--cinza); }
.ficha-passos { margin: 0; padding: 0; list-style: none; }
.ficha-passo {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--fio);
}
.ficha-num { font-family: var(--pesado); color: var(--cinza); line-height: 1.6; }
.ficha-feito .ficha-num, .ficha-agora .ficha-num { color: var(--osso); }
.ficha-agora { border-top-color: var(--osso); }
.ficha-nome { font-size: var(--miudo); font-weight: 500; color: var(--cinza); margin-bottom: 0.2rem; }
.ficha-marca { margin-left: 0.5rem; color: var(--osso); }
.ficha-falta { color: var(--cinza); opacity: 0.6; }
.ficha-cm {
  display: block;
  font-family: var(--pesado);
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.035em;
}
.ficha-obs { display: block; margin-top: 0.3rem; font-size: var(--miudo); color: var(--cinza); }
.ficha-refs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.ficha-fim { display: grid; gap: 1rem; margin: 0.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--fio); }
.ficha-fim dt { font-size: var(--miudo); color: var(--cinza); }
.ficha-fim dd { margin: 0; font-weight: 600; }
.ficha-nota { margin-top: 2rem; font-size: var(--miudo); color: var(--cinza); }
.ficha .vazio { margin-top: 1rem; }

.simular-quem { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; margin: 2rem 0 3.5rem; }
.simular-quem form { margin: 0; }
.simular-escolha { display: grid; gap: 0.45rem; }
.linha-campo { display: flex; gap: 0.5rem; }
.simular-escolha select { min-height: 2.75rem; padding: 0 0.75rem; min-width: 0; max-width: 17rem; }
.tela-simular .nome-cliente { font-size: clamp(2.5rem, 5vw, 4rem); }

/* ── orçamentos: o tamanho ancora a linha, a ideia fala grande ─────── */
.orc-grupo { margin-top: 4.5rem; }
.titulo-tela + .orc-grupo { margin-top: 2.5rem; }
.orc-grupo-nome {
  margin-bottom: 1.25rem;
  font-size: var(--titulo);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.orc-grupo-n { margin-left: 0.35rem; color: var(--cinza); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Larguras fixas: os quatro grupos são tabelas separadas e as colunas precisam bater. */
.tabela-orc { table-layout: fixed; }
.tabela-orc td { padding: 1.6rem 1rem; vertical-align: baseline; }
.tabela-orc th.col-cm { width: 10rem; }
.tabela-orc th.col-local { width: 26%; }
.tabela-orc th.col-curta { width: 7rem; }
.tabela-orc th.col-tempo { width: 8.5rem; }
.tabela-orc td.col-cm {
  font-family: var(--pesado);
  font-size: 2.75rem;
  line-height: 0.9;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.tabela-orc .col-curta, .tabela-orc .col-tempo { white-space: nowrap; }
.tabela-orc td.col-tempo { color: var(--cinza); font-variant-numeric: tabular-nums; }
.orc-link {
  display: block;
  max-width: 34ch;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.orc-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.orc-cliente { display: block; margin-top: 0.4rem; font-size: var(--miudo); color: var(--cinza); }

/* Depois de quem espera, tudo desce um degrau: menor e em cinza. */
.orc-grupo:not(.orc-grupo-aguardando_felipe) td { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.orc-grupo:not(.orc-grupo-aguardando_felipe) td.col-cm { font-size: 1.6rem; color: var(--cinza); }
.orc-grupo:not(.orc-grupo-aguardando_felipe) .orc-link { font-size: 1.1rem; }
.orc-grupo-recusado .orc-link { color: var(--cinza); }

/* ── a ficha: a referência abre a tela, a ideia cruza a costura ─────── */
.orc-abre {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: min(76svh, 46rem);
  margin: calc(-1 * var(--respiro)) calc(-1 * var(--respiro)) 0;
}
.orc-foto { position: absolute; inset: 0; overflow: hidden; }
.orc-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
/* A foto some no breu pelo pé e pelo lado da luz: sombra interna, sem gradiente. */
.orc-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 -20rem 12rem -6rem var(--breu),
    inset 22rem 0 14rem -8rem var(--breu);
  pointer-events: none;
}
.orc-titulo {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  padding: 0 var(--respiro);
  margin-bottom: -1.25rem;
}
.orc-titulo .voltar { color: var(--osso); text-shadow: 0 0 0.3rem var(--breu), 0 0 0.8rem var(--breu), 0 0 1.6rem var(--breu); }
.orc-dica { margin-left: 0.4rem; font-weight: 400; opacity: 0.75; }
.orc-ideia {
  margin-top: 0.5rem;
  max-width: 15ch;
  font-family: var(--pesado);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.6vw, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-shadow: 0 0.04em 0.6em rgba(10, 9, 8, 0.9);
}
.orc-quem { margin-top: 1.25rem; font-size: 1.15rem; text-shadow: 0 0 0.6rem var(--breu); }
.orc-sem-foto { height: auto; margin: 0; }
.orc-sem-foto .orc-titulo { padding: 0; margin: 0; }
.orc-sem-foto .orc-ideia { font-size: clamp(3rem, 7vw, 6.5rem); max-width: 14ch; }

.orc-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin: 3.25rem 0 0;
  padding: 0;
  list-style: none;
}
.orc-refs img { height: 7rem; width: auto; object-fit: cover; }
.orc-ref-link { color: var(--cinza); font-size: var(--miudo); }
.orc-ref-link:hover { color: var(--osso); }

.orc-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem);
  gap: var(--respiro);
  align-items: start;
  margin-top: 4rem;
}
.orc-fatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 2.5rem;
  margin: 0;
  max-width: 44rem;
}
.orc-fato-cm { grid-column: 1 / -1; }
.orc-fato dt { margin-bottom: 0.3rem; font-size: var(--miudo); color: var(--cinza); }
.orc-fato dd { margin: 0; font-size: 1.15rem; line-height: 1.4; }
.orc-cm {
  display: block;
  font-family: var(--pesado);
  font-size: clamp(4.5rem, 9vw, 8rem);
  line-height: 0.82;
  letter-spacing: -0.055em;
}

.orc-resposta {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--carvao);
  border-top: 1px solid var(--fio-forte);
}
.orc-nota { margin: 0.6rem 0 1.75rem; font-size: var(--miudo); color: var(--cinza); }
.orc-resposta .aviso { margin-bottom: 1.5rem; }
.orc-form, .faixa-form { display: grid; gap: 0.45rem; }
.orc-form > label, .faixa-campo label, .orc-status legend {
  font-size: var(--miudo);
  font-weight: 500;
  color: var(--cinza);
}
.orc-form > label:not(:first-of-type) { margin-top: 1rem; }
.orc-form input:not([type]), .orc-form select, .orc-form textarea,
.faixa-form input:not([type]), .faixa-form select {
  width: 100%;
  min-width: 0;
  min-height: 3.1rem;
  padding: 0 0.9rem;
  border: 1px solid var(--fio-forte);
  border-radius: 2px;
  background: var(--breu);
}
.orc-form textarea { padding: 0.8rem 0.9rem; line-height: 1.5; resize: vertical; }
.orc-form :is(input, select, textarea):focus, .faixa-form :is(input, select):focus { outline: none; border-color: var(--osso); }
.orc-valor { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.5rem; }
/* O valor final é o número da tela: vai em Archivo Black, do tamanho de título. */
.orc-valor input {
  min-height: 3.75rem;
  font-family: var(--pesado);
  font-size: var(--titulo);
  letter-spacing: -0.02em;
}
.orc-status { margin: 1.25rem 0 0; padding: 0; border: 0; }
.orc-status legend { padding: 0; margin-bottom: 0.4rem; }
.orc-opcao {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.9rem;
  border-top: 1px solid var(--fio);
  cursor: pointer;
}
.orc-opcao input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--osso); }
.orc-opcao .miudo { margin-left: auto; }
.orc-form .botao { width: 100%; margin-top: 1.5rem; }
.orc-agendar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
  text-decoration: none;
}

/* ── faixas de preço: o que o robô diz, em tamanho de cartaz ────────── */
.faixas-intro { max-width: 44rem; margin-bottom: 4rem; font-size: 1.15rem; color: var(--cinza); }
.faixas-grupo + .faixas-grupo { margin-top: 4.5rem; }
.faixas { margin: 0; padding: 0; list-style: none; }
.faixa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid var(--fio);
}
.faixa-valor {
  font-family: var(--pesado);
  font-size: clamp(2.25rem, 4.6vw, 3.9rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.faixa-cm { grid-column: 1; margin-top: 0.75rem; font-size: 1.1rem; }
.faixa-desc { display: block; font-size: var(--miudo); color: var(--cinza); }
.faixa-desligada .faixa-valor, .faixa-desligada .faixa-cm { color: var(--cinza); opacity: 0.55; }
.faixa-editar { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.faixa-editar[open] { grid-column: 1 / -1; grid-row: auto; margin-top: 1.5rem; }
.faixa-editar summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--fio-forte);
  border-radius: 2px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.faixa-editar summary::-webkit-details-marker { display: none; }
.faixa-editar summary:hover { border-color: var(--osso); }
.faixa-editar .aviso { margin-top: 1.25rem; }
.faixa-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  max-width: 40rem;
  margin-top: 1.5rem;
}
.faixa-campo { display: grid; gap: 0.4rem; }
.faixa-campo-largo, .faixa-ativa { grid-column: 1 / -1; }
.faixa-ativa { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; }
.faixa-ativa input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--osso); }
.faixa-pe { margin-top: 1.25rem; }
.faixa-remover { margin-top: 0.75rem; }
.faixa-remover .botao-linha { color: var(--cinza); }
.faixa-nova {
  margin: 5rem calc(-1 * var(--respiro)) calc(-1 * var(--respiro));
  padding: var(--respiro);
  background: var(--carvao);
  border-top: 1px solid var(--fio);
}
.faixa-nova .aviso { margin-top: 1.25rem; max-width: 40rem; }

/* ── agenda: o que falta confirmar abre, a semana é uma parede de horas ── */
.ag-pendentes {
  margin: 2.5rem calc(-1 * var(--respiro)) 0;
  padding: 2.5rem var(--respiro) 2.75rem;
  background: var(--carvao);
  border-top: 1px solid var(--fio-forte);
}
.ag-pend-titulo { font-size: var(--titulo); font-weight: 600; letter-spacing: -0.01em; }
.ag-pend-n { margin-left: 0.35rem; color: var(--cinza); font-weight: 400; font-variant-numeric: tabular-nums; }
.ag-pendentes > .vazio { margin-top: 1rem; }
.ag-pend-lista { margin: 1.75rem 0 0; padding: 0; list-style: none; }
.ag-pend {
  display: grid;
  grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.5rem 2.5rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--fio);
}
.ag-pend-quando {
  font-family: var(--pesado);
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.ag-pend-nome { font-size: 1.15rem; font-weight: 600; text-decoration: none; }
.ag-pend-nome:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.ag-pend-meta { margin-top: 0.25rem; color: var(--cinza); }
.ag-pend-acao { margin: 0; }
/* Sinal não pago é o único alerta da agenda: o fio de ferrugem, como no aviso. */
.ag-alerta {
  display: inline-block;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--ferrugem);
  font-size: var(--miudo);
  font-weight: 600;
  color: var(--osso);
}

.ag-semanas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 0.75rem;
  margin: 4.5rem 0 2.25rem;
}
.ag-semana-titulo {
  order: -1;
  flex: 1 1 auto;
  font-family: var(--pesado);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.ag-ir {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid var(--fio-forte);
  border-radius: 2px;
  font-weight: 500;
  text-decoration: none;
}
.ag-ir:hover { border-color: var(--osso); }

/* Sete colunas sobre um eixo de 7h a 23h: a linha 1 é o nome do dia, cada
   linha seguinte é meia hora. A sessão ocupa tantas linhas quanto dura. */
.semana {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding-left: 3.25rem;
}
.ag-eixo {
  position: absolute;
  top: 4.5rem;
  left: 0;
  right: 0;
  display: grid;
  grid-template-rows: repeat(16, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.ag-eixo li {
  padding-top: 0.2rem;
  border-top: 1px solid var(--fio);
  font-size: var(--miudo);
  color: var(--cinza);
  font-variant-numeric: tabular-nums;
}
.ag-dia {
  display: grid;
  grid-template-rows: 4.5rem repeat(32, 1.5rem);
  min-width: 0;
  padding: 0 0.25rem;
  border-left: 1px solid var(--fio);
}
.ag-dia-nome {
  grid-row: 1;
  align-self: end;
  padding: 0 0.35rem 0.8rem;
  font-size: var(--texto);
  font-weight: 500;
  color: var(--cinza);
}
.ag-dia-num { font-family: var(--pesado); font-weight: 400; font-size: 1.6rem; letter-spacing: -0.03em; }
.ag-hoje .ag-dia-nome { color: var(--osso); box-shadow: inset 0 -2px 0 var(--osso); }
.ag-livre { display: none; }
.ag-sessao {
  position: relative;
  z-index: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  margin: 2px 0;
  padding: 0.5rem 0.6rem;
  overflow: hidden;
  border-radius: 2px;
  font-size: var(--miudo);
  line-height: 1.3;
  text-decoration: none;
}
.ag-sessao > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-sessao > .ag-onde { white-space: normal; }
.ag-sessao .ag-alerta { margin-top: 0.3rem; flex: none; }
.ag-confirmada { background: var(--fumaca); box-shadow: inset 3px 0 0 var(--osso); }
.ag-pendente { background: var(--breu); border: 1px dashed var(--cinza); }
.ag-realizada { background: var(--carvao); color: var(--cinza); }
.ag-sessao:hover { outline: 1px solid var(--osso); }
.ag-hora { font-family: var(--pesado); font-size: 1.35rem; line-height: 1.05; letter-spacing: -0.03em; }
.ag-quem { font-size: 0.9rem; font-weight: 600; }
.ag-ate, .ag-num, .ag-onde, .ag-estado { color: var(--cinza); }
.ag-estado { display: none; }
.ag-legenda { margin-top: 1.5rem; }

.ag-l2 { grid-row-start: 2; }
.ag-l3 { grid-row-start: 3; }
.ag-l4 { grid-row-start: 4; }
.ag-l5 { grid-row-start: 5; }
.ag-l6 { grid-row-start: 6; }
.ag-l7 { grid-row-start: 7; }
.ag-l8 { grid-row-start: 8; }
.ag-l9 { grid-row-start: 9; }
.ag-l10 { grid-row-start: 10; }
.ag-l11 { grid-row-start: 11; }
.ag-l12 { grid-row-start: 12; }
.ag-l13 { grid-row-start: 13; }
.ag-l14 { grid-row-start: 14; }
.ag-l15 { grid-row-start: 15; }
.ag-l16 { grid-row-start: 16; }
.ag-l17 { grid-row-start: 17; }
.ag-l18 { grid-row-start: 18; }
.ag-l19 { grid-row-start: 19; }
.ag-l20 { grid-row-start: 20; }
.ag-l21 { grid-row-start: 21; }
.ag-l22 { grid-row-start: 22; }
.ag-l23 { grid-row-start: 23; }
.ag-l24 { grid-row-start: 24; }
.ag-l25 { grid-row-start: 25; }
.ag-l26 { grid-row-start: 26; }
.ag-l27 { grid-row-start: 27; }
.ag-l28 { grid-row-start: 28; }
.ag-l29 { grid-row-start: 29; }
.ag-l30 { grid-row-start: 30; }
.ag-l31 { grid-row-start: 31; }
.ag-l32 { grid-row-start: 32; }
.ag-l33 { grid-row-start: 33; }
.ag-s1 { grid-row-end: span 1; flex-grow: 1; }
.ag-s2 { grid-row-end: span 2; flex-grow: 2; }
.ag-s3 { grid-row-end: span 3; flex-grow: 3; }
.ag-s4 { grid-row-end: span 4; flex-grow: 4; }
.ag-s5 { grid-row-end: span 5; flex-grow: 5; }
.ag-s6 { grid-row-end: span 6; flex-grow: 6; }
.ag-s7 { grid-row-end: span 7; flex-grow: 7; }
.ag-s8 { grid-row-end: span 8; flex-grow: 8; }
.ag-s9 { grid-row-end: span 9; flex-grow: 9; }
.ag-s10 { grid-row-end: span 10; flex-grow: 10; }
.ag-s11 { grid-row-end: span 11; flex-grow: 11; }
.ag-s12 { grid-row-end: span 12; flex-grow: 12; }
.ag-s13 { grid-row-end: span 13; flex-grow: 13; }
.ag-s14 { grid-row-end: span 14; flex-grow: 14; }
.ag-s15 { grid-row-end: span 15; flex-grow: 15; }
.ag-s16 { grid-row-end: span 16; flex-grow: 16; }
.ag-s17 { grid-row-end: span 17; flex-grow: 17; }
.ag-s18 { grid-row-end: span 18; flex-grow: 18; }
.ag-s19 { grid-row-end: span 19; flex-grow: 19; }
.ag-s20 { grid-row-end: span 20; flex-grow: 20; }
.ag-s21 { grid-row-end: span 21; flex-grow: 21; }
.ag-s22 { grid-row-end: span 22; flex-grow: 22; }
.ag-s23 { grid-row-end: span 23; flex-grow: 23; }
.ag-s24 { grid-row-end: span 24; flex-grow: 24; }
.ag-s25 { grid-row-end: span 25; flex-grow: 25; }
.ag-s26 { grid-row-end: span 26; flex-grow: 26; }
.ag-s27 { grid-row-end: span 27; flex-grow: 27; }
.ag-s28 { grid-row-end: span 28; flex-grow: 28; }
.ag-s29 { grid-row-end: span 29; flex-grow: 29; }
.ag-s30 { grid-row-end: span 30; flex-grow: 30; }
.ag-s31 { grid-row-end: span 31; flex-grow: 31; }
.ag-s32 { grid-row-end: span 32; flex-grow: 32; }

/* ── sessões de um orçamento: a tattoo inteira numa barra ───────────── */
.ss-ideia {
  max-width: 20ch;
  margin-top: 1.25rem;
  font-family: var(--pesado);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.75rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.ss-quem { max-width: 44rem; margin-top: 1.1rem; font-size: 1.15rem; color: var(--cinza); }
.ss-barra { display: flex; gap: 3px; min-height: 8rem; margin: 3.5rem 0 0; padding: 0; list-style: none; }
.ss-trecho {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 0;
  min-width: 0;
  padding: 0.9rem 1rem;
}
.ss-trecho-n { font-family: var(--pesado); font-size: 3.5rem; line-height: 0.8; letter-spacing: -0.05em; }
.ss-trecho-txt { overflow: hidden; font-size: var(--miudo); color: var(--cinza); text-overflow: ellipsis; white-space: nowrap; }
.ss-t-confirmada { background: var(--fumaca); box-shadow: inset 0 3px 0 var(--osso); }
.ss-t-realizada { background: var(--carvao); }
.ss-t-realizada .ss-trecho-n { color: var(--cinza); }
.ss-t-pendente { border: 1px dashed var(--cinza); }
.ss-t-sem-data { border: 1px dashed var(--fio-forte); color: var(--cinza); }

.ss-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
  gap: var(--respiro);
  align-items: start;
  margin-top: 4rem;
}
.ss-lista > .vazio { margin-top: 1rem; max-width: 30rem; }
.ss-sessoes { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.ss-sessao {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--fio);
}
.ss-num { font-family: var(--pesado); font-size: 4.25rem; line-height: 0.8; letter-spacing: -0.05em; }
.ss-realizada .ss-num, .ss-cancelada .ss-num { color: var(--cinza); }
.ss-cancelada { opacity: 0.55; }
.ss-rotulo { font-size: var(--miudo); color: var(--cinza); }
.ss-quando { margin-top: 0.2rem; font-size: var(--titulo); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.ss-meta { margin-top: 0.3rem; color: var(--cinza); }
.ss-estado { margin-top: 0.5rem; font-size: var(--miudo); font-weight: 600; }
.ss-acoes { align-items: center; gap: 0.5rem 1.25rem; margin: 1.25rem 0 0; }
.botao-texto {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cinza);
  font-weight: 500;
  cursor: pointer;
}
.botao-texto:hover { color: var(--osso); text-decoration: underline; text-underline-offset: 0.2em; }
.ss-remarcar[open] { flex-basis: 100%; }

.ss-bancada {
  display: grid;
  gap: 0;
  background: var(--carvao);
  border-top: 1px solid var(--fio-forte);
}
.ss-agendar, .sinal { padding: clamp(1.5rem, 3vw, 2.5rem); }
.ss-bancada .sinal, .orc-bancada .sinal { border-top: 1px solid var(--fio); }
.orc-bancada .sinal { background: var(--carvao); }
.ss-total { display: grid; gap: 0.45rem; margin: 1.25rem 0 1.75rem; }
.ss-agendar .aviso { margin-bottom: 1.5rem; }
.ss-form, .sinal-form, .ss-remarcar-form { display: grid; gap: 0.45rem; }
.ss-lugar { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1rem; }
.ss-campo { display: grid; gap: 0.4rem; min-width: 0; }
.ss-total label, .ss-campo label, .sinal-form > label, .ss-remarcar-form > label {
  font-size: var(--miudo);
  font-weight: 500;
  color: var(--cinza);
}
.sinal-form > label:not(:first-of-type), .ss-remarcar-form > label:not(:first-of-type) { margin-top: 0.75rem; }
.ss-total select, .ss-campo :is(input, select), .sinal-form :is(input:not([type]), input[type='date'], select),
.ss-remarcar-form :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 3.1rem;
  padding: 0 0.9rem;
  border: 1px solid var(--fio-forte);
  border-radius: 2px;
  background: var(--breu);
}
.ss-total select { width: 6rem; }
.ss-bancada :is(input, select):focus, .sinal :is(input, select):focus, .ss-remarcar-form :is(input, select):focus { outline: none; border-color: var(--osso); }
.ss-linha { min-width: 0; margin: 1.25rem 0 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--fio); }
.ss-linha legend { padding: 0; font-weight: 600; }
.ss-linha-campos { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 0.75rem; margin-top: 0.75rem; }
.ss-form .orc-nota { margin: 1.25rem 0 0; }
.ss-form .botao, .sinal-form .botao-linha, .ss-remarcar-form .botao-linha { width: 100%; margin-top: 1.25rem; }

.sinais { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.sinal-item { padding: 1.25rem 0; border-top: 1px solid var(--fio); }
.sinal-valor { font-family: var(--pesado); font-size: 2.25rem; line-height: 1; letter-spacing: -0.04em; }
.sinal-estado { margin-top: 0.4rem; }
.sinal-item:not(.sinal-pago) .sinal-estado { padding-left: 0.6rem; border-left: 3px solid var(--ferrugem); font-weight: 600; }
.sinal-pago .sinal-estado { color: var(--cinza); }
.sinal .vazio { margin-top: 1rem; }
.sinal-novo { margin-top: 1.5rem; }
.sinal-pagar { margin-top: 1rem; }
.ss-remarcar summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--cinza);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.ss-remarcar summary:hover, .ss-remarcar[open] summary { color: var(--osso); }
.ss-remarcar summary::-webkit-details-marker { display: none; }
.ss-remarcar-form { max-width: 26rem; }
:is(.sinal-novo, .sinal-pagar) summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--fio-forte);
  border-radius: 2px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
:is(.sinal-novo, .sinal-pagar) summary::-webkit-details-marker { display: none; }
:is(.sinal-novo, .sinal-pagar) summary:hover { border-color: var(--osso); }
:is(.sinal-novo, .sinal-pagar, .ss-remarcar)[open] summary { margin-bottom: 1rem; }
.sinal-ja { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; margin-top: 0.75rem; }
.sinal-ja input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--osso); }

@keyframes revelar {
  from { opacity: 0; transform: scale(1.08); filter: brightness(0.25); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(0.3em); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); }
}

/* ════════════════════════ daqui para baixo, só @media ═══════════════ */

/* Até 900px: a lateral vira gaveta do ☰. */
@media (max-width: 900px) {
  .logado { display: block; }

  .topo {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 3.75rem;
    padding: 0 1rem 0 0.5rem;
    background: rgba(10, 9, 8, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fio);
  }
  .topo .marca { font-size: 1.15rem; }

  .botao-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    cursor: pointer;
  }

  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(19rem, 84vw);
    height: 100%;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.1, 1), visibility 0s linear 0.28s;
  }
  .gaveta-aberta .lateral {
    transform: none;
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.1, 1);
  }
  .gaveta-aberta { overflow: hidden; }

  .topo-ia {
    margin: 0 0 0 auto;
    font-size: var(--miudo);
    color: var(--cinza);
    white-space: nowrap;
  }

  .logado { box-shadow: none; }
  .bancada { display: block; min-height: 0; margin: 0 calc(-1 * var(--respiro)) calc(-1 * var(--respiro)) 0; }
  .bancada-fio { padding: 0 var(--respiro) 0 0; }
  .ficha {
    margin: 3rem 0 0 calc(-1 * var(--respiro));
    border-left: 0;
    border-top: 1px solid var(--fio);
  }
  .ficha-dentro { position: static; max-height: none; padding: 2.5rem var(--respiro) 3rem; }

  .orc-abre { height: 60svh; }
  .orc-corpo { grid-template-columns: minmax(0, 1fr); gap: 3rem; margin-top: 3rem; }
  .orc-bancada { margin: 0 calc(-1 * var(--respiro)) calc(-1 * var(--respiro)); }
  .orc-resposta, .orc-bancada .sinal { padding: 2.5rem var(--respiro); }

  .ag-pend { grid-template-columns: minmax(0, 1fr) auto; }
  .ag-pend-quando { grid-column: 1 / -1; }
  .ss-corpo { grid-template-columns: minmax(0, 1fr); gap: 3rem; margin-top: 3rem; }
  .ss-bancada { margin: 0 calc(-1 * var(--respiro)) calc(-1 * var(--respiro)); }
  .ss-agendar, .ss-bancada .sinal { padding: 2.5rem var(--respiro); }
  .in-abre {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    margin: calc(-1 * var(--respiro)) calc(-1 * var(--respiro)) 0;
  }
  .in-foto { grid-column: 1; height: 70svh; }
  .in-foto::after { box-shadow: inset 0 -18rem 10rem -6rem var(--breu); }
  .in-estudio {
    position: absolute;
    z-index: 1;
    top: 1.25rem;
    left: var(--respiro);
    padding: 0;
    color: var(--osso);
    text-shadow: 0 0 0.5rem var(--breu);
  }
  .in-sessao { grid-column: 1; grid-row: 2; margin-top: -15rem; padding: 0 var(--respiro) 0.5rem; }
  .in-hora { font-size: clamp(3rem, 14vw, 4.75rem); }
  .in-quem { margin-top: 1.25rem; font-size: 1.15rem; }
  .in-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 3rem; }
  .in-esperando { grid-column: 1 / -1; grid-row: auto; }
  .in-esperando .in-numero { font-size: 7rem; }
  .in-fichas, .in-confirmar { min-height: 11rem; }
  .in-fichas .in-numero, .in-confirmar .in-numero { font-size: 3.25rem; }
  .in-rotulo { font-size: 1rem; }
  .in-apoio { -webkit-line-clamp: 3; font-size: var(--miudo); }

  .pos { grid-template-columns: minmax(0, 1fr); }
  .pos-previa { position: static; }
  .pos-item { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; }
  .pos-num { font-size: 2.25rem; }

  .pf-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 5.5rem; }
  .pf-destaque { grid-column: 1 / -1; grid-row: span 5; }
  .pf-quadra, .pf-alta { grid-column: span 1; grid-row: span 4; }
  .pf-acoes { gap: 0 0.9rem; padding: 0 0.5rem; }
  .pf-foto figcaption { left: 0.6rem; right: 0.6rem; }
  .pf-longo { display: none; }
  .pf-larga, .pf-alta:last-child:nth-child(even) { grid-column: 1 / -1; grid-row: span 3; }

  .aj-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .aj-robo { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .aj-ia, .aj-nome { grid-column: 1 / -1; }
  .aj-faixas { grid-column: span 1; }
  .aj-bloco:is(.aj-senha, .aj-faixas) { padding: 1.25rem; }
}

/* Até 760px: a entrada empilha; a foto em cima, o nome sobe por cima dela. */
@media (max-width: 760px) {
  .entrar { grid-template-columns: minmax(0, 1fr); }
  .entrar-foto { height: 50svh; }
  .entrar-foto::after { box-shadow: inset 0 -12rem 8rem -5rem var(--carvao); }
  .entrar-foto figcaption { display: none; }
  .entrar-painel {
    justify-content: flex-start;
    padding: 0 1.25rem 2.5rem;
  }
  .form-entrar label { margin-top: 0.75rem; }
  .form-entrar .botao { margin-top: 1.5rem; }
  .entrar-nome {
    margin: -0.95em 0 0;
    font-size: clamp(3.4rem, 17vw, 5rem);
  }
  .entrar-linha { margin: 1rem 0 1.5rem; }
}

/* Até 640px: tabela vira cartão, rótulo à esquerda e valor à direita. */
@media (max-width: 640px) {
  .tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tabela, .tabela tbody, .tabela tr { display: block; }
  .tabela tr {
    margin-bottom: 0.75rem;
    padding: 0.25rem 1rem;
    background: var(--carvao);
    border-left: 2px solid var(--fumaca);
  }
  .tabela td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    text-align: right;
  }
  .tabela tr td:last-child { border-bottom: 0; }
  .tabela td::before {
    content: attr(data-label);
    flex: none;
    max-width: 45%;
    color: var(--cinza);
    font-size: var(--miudo);
    text-align: left;
  }

  .fila {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1.5rem 0 2.5rem;
  }
  .fila-texto { display: contents; }
  .fila-numero { grid-row: 1; align-self: end; font-size: 8.5rem; }
  .fila-frase { grid-row: 1; grid-column: 2; align-self: end; padding-bottom: 0.2rem; font-size: 1.15rem; }
  .fila-quem, .fila-citacao, .fila .botao, .fila-depois { grid-column: 1 / -1; }
  .fila-quem { margin-top: 1.75rem; }
  .fila-citacao { margin: 1rem 0 1.5rem; }
  .fila .botao { width: 100%; }
  .filtros { gap: 0 1.25rem; margin-top: 2.5rem; }

  .linha {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'nome tempo' 'trecho trecho' 'estado estado';
    column-gap: 1rem;
    padding: 1.25rem 0.75rem;
  }
  .linha-estado { margin-top: 0.3rem; }
  .linha-tempo { align-self: baseline; font-size: var(--miudo); }

  .msg { max-width: 90%; }
  .acoes { margin: 1.5rem 0 2.5rem; }
  .acoes form { flex: 1 1 auto; }
  .acoes .botao-linha { width: 100%; }
  .compor-pe .botao, .compor-pe .botao-claro { width: 100%; }
  .simular-quem { display: grid; margin: 1.5rem 0 2.5rem; }
  .botao-nova { width: 100%; }
  .simular-escolha select { flex: 1; max-width: none; }

  .orc-grupo { margin-top: 3rem; }
  .orc-grupo-nome { font-size: 1.3rem; }
  .tabela-orc td, .orc-grupo:not(.orc-grupo-aguardando_felipe) td { padding: 0.75rem 0; }
  .tabela-orc td.col-ideia { display: block; text-align: left; }
  .tabela-orc td.col-ideia::before { display: block; max-width: none; margin-bottom: 0.3rem; }
  .tabela-orc td.col-cm { align-items: baseline; font-size: 2.25rem; }
  .tabela-orc td.col-cm::before { font-family: Archivo, system-ui, sans-serif; letter-spacing: normal; line-height: 1.6; }
  .orc-link { font-size: 1.25rem; }

  .orc-abre { height: 56svh; }
  .orc-titulo { margin-bottom: -0.75rem; }
  .orc-ideia { font-size: clamp(2.3rem, 11vw, 3.25rem); }
  .orc-foto::after { box-shadow: inset 0 -14rem 9rem -5rem var(--breu); }
  .orc-refs { margin-top: 2.5rem; }
  .orc-refs img { height: 5.5rem; }
  .orc-fatos { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .orc-cm { font-size: 5rem; }

  .faixas-intro { margin-bottom: 2.5rem; font-size: 1.05rem; }
  .faixa-valor { font-size: 2rem; }
  .faixa { grid-template-columns: minmax(0, 1fr); padding: 1.75rem 0; }
  .faixa-editar, .faixa-editar[open] { grid-column: 1; grid-row: auto; margin-top: 1.25rem; }
  .faixa-editar summary, .faixa-campos .botao-claro, .faixa-remover .botao-linha, .faixa-pe .botao { width: 100%; justify-content: center; }
  .faixa-campos { grid-template-columns: minmax(0, 1fr); }
  .faixa-nova { margin-top: 3.5rem; padding: 2.5rem var(--respiro); }

  .ag-pendentes { margin-top: 1.5rem; padding: 2rem var(--respiro) 2.25rem; }
  .ag-pend { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; padding: 1.4rem 0; }
  .ag-pend-quando { font-size: 1.9rem; }
  .ag-pend-acao { margin-top: 0.75rem; }
  .ag-pend-acao .botao-claro { width: 100%; }
  .ag-semanas { margin: 3rem 0 1rem; }
  .ag-semana-titulo { flex-basis: 100%; font-size: 2.1rem; }
  .ag-ir { flex: 1 1 0; justify-content: center; }

  /* Um dia embaixo do outro; a sessão mostra tudo, sem depender da altura. */
  .semana { display: block; padding-left: 0; }
  .ag-eixo { display: none; }
  .ag-dia { display: block; padding: 1.25rem 0; border-left: 0; border-top: 1px solid var(--fio); }
  .ag-dia-nome { display: flex; align-items: baseline; gap: 0.5rem; padding: 0 0 0.75rem; }
  .ag-hoje .ag-dia-nome { box-shadow: none; }
  .ag-hoje { border-top: 2px solid var(--osso); }
  .ag-vazio { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; }
  .ag-vazio .ag-dia-nome { padding: 0; }
  .ag-vazio .ag-dia-num { font-size: 1.15rem; }
  .ag-livre { display: block; font-size: var(--miudo); color: var(--cinza); }
  .ag-sessao {
    display: grid;
    /* Largo o bastante para "12h35" inteiro, sem reticências. */
    grid-template-columns: 6.5rem minmax(0, 1fr);
    column-gap: 0.85rem;
    row-gap: 0.15rem;
    margin: 0.5rem 0 0;
    padding: 1rem;
    font-size: var(--texto);
    line-height: 1.35;
  }
  .ag-sessao > span { grid-column: 2; white-space: normal; }
  .ag-sessao > .ag-hora { grid-column: 1; grid-row: 1 / span 6; overflow: visible; font-size: 1.7rem; white-space: nowrap; }
  .ag-quem { order: -1; font-size: 1.1rem; }
  .ag-estado { display: block; font-size: var(--miudo); }
  .ag-sessao .ag-alerta { justify-self: start; }

  .ss-ideia { font-size: clamp(2.2rem, 10vw, 3rem); }
  .ss-barra { min-height: 6rem; margin-top: 2.5rem; }
  .ss-trecho { padding: 0.7rem 0.6rem; }
  .ss-trecho-n { font-size: 2.5rem; }
  .ss-sessao { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
  .ss-num { font-size: 3rem; }
  .ss-lugar { grid-template-columns: minmax(0, 1fr); }
  .ss-acoes { gap: 0.25rem 1.25rem; margin: 1rem 0 0; }
  .ss-trecho-txt { white-space: normal; line-height: 1.3; }
  .ss-acoes form, .ss-remarcar { flex: 0 0 auto; }
  .ss-acoes .botao-linha { width: auto; }
  .ss-remarcar[open] { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .entrar-foto img, .entrar-nome span, .in-foto img, .in-hora { animation: none; }
  .lateral, .gaveta-aberta .lateral { transition: none; }
}