@import url("fontes.ee4e718b1021.css");

/* ===========================================================================
 * FixObra — sistema de design
 *
 * Portado do protótipo de interface (fixobra-app, Lovable/Tailwind 4) para CSS
 * escrito à mão. Não há Node nem bun neste ambiente, então compilar Tailwind
 * não é opção; os tokens e a aparência foram transcritos.
 *
 * Cores oficiais do manual da marca:
 *   Azul-marinho #102D42 · Laranja #F15A24 · Cinza #647482 · Fundo #F3F6F8
 * Montserrat nos títulos, Inter na interface.
 *
 * Os nomes de classe são os que as 56 telas já usam. A aparência mudou; o
 * marcador, não. Foi assim para trocar a identidade sem reescrever template.
 * =========================================================================== */

:root {
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  /* Altura única de todo controle que a pessoa clica ou preenche: botão,
     campo, select, chip de filtro e item de paginação. Existia como número
     solto em cada bloco, e tinha virado três valores diferentes (2.375rem no
     botão e no campo, 2.25rem no chip e na paginação) — o bastante para a
     linha ficar desalinhada quando dois deles aparecem lado a lado.
     `.acao-icone` fica de fora: são 2rem por decisão firmada (§9), é ícone
     dentro de célula de tabela e nunca divide linha com botão. */
  --altura-controle: 2.375rem;

  --navy: oklch(0.285 0.05 240);
  --navy-foreground: oklch(1 0 0);
  --brand: oklch(0.665 0.2 38);
  --brand-soft: oklch(0.95 0.035 45);
  --background: oklch(0.97 0.005 240);
  --foreground: oklch(0.285 0.05 240);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.285 0.05 240);
  --primary: oklch(0.665 0.2 38);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.285 0.05 240);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.95 0.007 240);
  --muted-foreground: oklch(0.54 0.03 245);
  --accent: oklch(0.94 0.012 240);
  --accent-foreground: oklch(0.285 0.05 240);
  --destructive: oklch(0.58 0.21 27);
  --destructive-foreground: oklch(1 0 0);
  --danger-soft: oklch(0.95 0.03 25);
  --success: oklch(0.56 0.14 150);
  --success-soft: oklch(0.95 0.045 150);
  --warning: oklch(0.68 0.15 70);
  --warning-soft: oklch(0.96 0.05 85);
  --info: oklch(0.56 0.16 255);
  --info-soft: oklch(0.95 0.03 255);
  --border: oklch(0.91 0.01 240);
  --input: oklch(0.89 0.012 240);
  --ring: oklch(0.665 0.2 38);

  --sidebar: oklch(0.285 0.05 240);
  --sidebar-foreground: oklch(0.86 0.02 240);
  --sidebar-primary: oklch(0.665 0.2 38);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.34 0.05 240);
  --sidebar-accent-foreground: oklch(1 0 0);
  --sidebar-border: oklch(0.36 0.04 240);

  --shadow-card: 0 1px 2px rgb(16 45 66 / 0.04), 0 4px 16px -8px rgb(16 45 66 / 0.08);
  --shadow-float: 0 12px 32px -12px rgb(16 45 66 / 0.25);

  --fonte-interface: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-titulo: "Montserrat", "Inter", system-ui, Arial, sans-serif;

  --sidebar-largura: 16rem;
  --topbar-altura: 3.5rem;
}

/* Navegador sem oklch (anterior a 2023) recebe os hexadecimais do manual. */
@supports not (color: oklch(0.5 0.1 240)) {
  :root {
    --navy: #102d42;
    --brand: #f15a24;
    --brand-soft: #fdeee7;
    --background: #f3f6f8;
    --foreground: #102d42;
    --card: #ffffff;
    --card-foreground: #102d42;
    --primary: #f15a24;
    --secondary: #102d42;
    --muted: #eef1f4;
    --muted-foreground: #647482;
    --accent: #e9edf1;
    --accent-foreground: #102d42;
    --destructive: #d93025;
    --danger-soft: #fdeceb;
    --success: #1b8a5a;
    --success-soft: #e7f6ee;
    --warning: #c9820a;
    --warning-soft: #fdf3e0;
    --info: #2a6ff0;
    --info-soft: #eaf1fe;
    --border: #dde3e8;
    --input: #d6dde4;
    --ring: #f15a24;
    --sidebar: #102d42;
    --sidebar-foreground: #c8d3dc;
    --sidebar-primary: #f15a24;
    --sidebar-accent: #1d4157;
    --sidebar-border: #27506a;
  }
}

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--fonte-interface);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  letter-spacing: -0.015em;
  margin: 0;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img,
svg {
  max-width: 100%;
}

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

/* ---------------------------------------------------------------------------
 * Casca da aplicação: barra lateral marinho + topo claro + aba inferior
 * ------------------------------------------------------------------------- */
.app {
  min-height: 100dvh;
}

.sidebar {
  position: fixed;
  inset-block: 0;
  left: 0;
  z-index: 30;
  display: none;
  width: var(--sidebar-largura);
  flex-direction: column;
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  overflow-y: auto;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  height: 4rem;
  padding-inline: 1.5rem;
  flex-shrink: 0;
}

.sidebar__brand img {
  height: 1.75rem;
  width: auto;
}

.sidebar__area {
  padding: 1rem 1.5rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--sidebar-foreground) 55%, transparent);
}

.sidebar__nav {
  flex: 1;
  padding-inline: 0.75rem;
  padding-bottom: 1rem;
}

.sidebar__grupo {
  margin-bottom: 0.75rem;
}

.sidebar__modulo {
  display: block;
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--sidebar-foreground) 50%, transparent);
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sidebar-foreground);
  transition: background-color 0.15s, color 0.15s;
}

.sidebar__item:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  text-decoration: none;
}

.sidebar__item.is-ativo {
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
}

.sidebar__vazio {
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--sidebar-foreground) 70%, transparent);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--topbar-altura);
  padding-inline: 1rem;
  /* fundo sólido, sem `backdrop-filter`: o filtro faz a topbar virar o
     bloco de contenção de todo `position: fixed` dentro dela, e o fundo e o
     painel do menu de perfil ficavam presos à altura da topbar */
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.topbar__mobile-brand {
  display: flex;
  align-items: center;
}

.topbar__mobile-brand img {
  height: 1.75rem;
  width: auto;
}

.topbar__titulo {
  font-family: var(--fonte-titulo);
  font-size: 0.9375rem;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .topbar__mobile-brand {
    display: none;
  }
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
}

.topbar__nome {
  display: none;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
  text-align: right;
}

.topbar__empresa {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted-foreground);
}

@media (min-width: 640px) {
  .topbar__nome {
    display: block;
  }
}

.topbar__link,
.topbar__logout {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.topbar__logout {
  color: var(--destructive);
}

.app__main {
  padding: 1.25rem 1rem 6rem;
}

.conteudo {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .sidebar {
    display: flex;
  }
  /* o deslocamento vai no corpo, não na topbar e no main separadamente:
     a topbar é filha do corpo e somaria duas vezes */
  .app__corpo {
    margin-left: var(--sidebar-largura);
  }
  .topbar {
    height: 4rem;
    padding-inline: 1.5rem;
  }
  .app__main {
    padding: 2rem 1.5rem 3rem;
  }
}

/* ---------------------------------------------------------------------------
 * Cabeçalho de página
 * ------------------------------------------------------------------------- */
.pagina__cab {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.pagina__titulo {
  font-size: 1.5rem;
  font-weight: 800;
}

.pagina__sub {
  margin: 0.25rem 0 1.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  max-width: 68ch;
}

.pagina__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Selos do cabeçalho: situação e avanço lado a lado, sem empilhar no celular. */
.pagina__cab__selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* -------------------------------------------------------------------------
 * Página pública de conteúdo (acompanhamento da obra pelo inquilino)
 *
 * Não reusa `.auth`, que é cartão estreito para formulário. Aqui é página de
 * leitura, com o mesmo container largo das telas internas, mas sem menu.
 * ------------------------------------------------------------------------- */
.publico {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 3rem;
  background: var(--background);
  min-height: 100dvh;
}

.publico__marca {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.publico__logo {
  font-family: var(--font-titulo, inherit);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--brand, var(--foreground));
}

.publico__assinatura {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

@media (min-width: 640px) {
  .pagina__cab {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .pagina__titulo {
    font-size: 1.875rem;
  }
}

/* ---------------------------------------------------------------------------
 * Painéis e cartões
 * ------------------------------------------------------------------------- */
.bloco {
  /* `.bloco` é quase sempre um <fieldset>, cujo `min-width` padrão é
     `min-content`: sem zerar, a tabela ou a lista de dados dentro dele
     esticava a página inteira (655px num celular de 320px). */
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}

.bloco__titulo {
  display: block;
  padding: 0;
  margin-bottom: 0.875rem;
  font-family: var(--fonte-titulo);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
}

.bloco__titulo--solto {
  margin-top: 1.5rem;
}

.bloco--interno {
  box-shadow: none;
  background: var(--muted);
}

.cards {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-bottom: 1.5rem;
}

.card {
  display: block;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s;
}

.card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  text-decoration: none;
}

.card__modulo {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
}

.card__modulo .icone {
  width: 1rem;
  height: 1rem;
  color: var(--primary);
}

.card__nome {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--foreground);
}

.painel__info {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

@media (min-width: 640px) {
  .bloco {
    padding: 1.25rem;
  }
}

/* ---------------------------------------------------------------------------
 * Botões
 * ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--altura-controle);
  padding-inline: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--fonte-interface);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, background-color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.btn:hover {
  filter: brightness(0.97);
  text-decoration: none;
}

.btn--primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-card);
}

.btn--escuro {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--foreground);
}

.btn--ghost:hover {
  background: var(--accent);
  filter: none;
}

.btn--ghost.btn--escuro {
  background: transparent;
  border-color: var(--border);
  color: var(--foreground);
}

.btn[disabled],
.btn.is-inerte {
  opacity: 0.5;
  pointer-events: none;
}

.link-acao,
.link-perigo {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.link-acao {
  color: var(--primary);
}

.link-perigo {
  color: var(--destructive);
}

.link-acao:hover,
.link-perigo:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Formulários
 * ------------------------------------------------------------------------- */
.form {
  display: block;
}

.form--larga {
  max-width: 48rem;
}

.form--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

.form__field {
  display: block;
  margin-bottom: 1rem;
}

.form__label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}

.form__inline {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
}

.form__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  font-size: 0.875rem;
  cursor: pointer;
}

.form__check:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--altura-controle);
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
}

textarea {
  min-height: 4.5rem;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--muted-foreground) 75%, transparent);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
}

input[type="checkbox"],
input[type="radio"] {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  accent-color: var(--primary);
}

input[type="file"] {
  font-size: 0.875rem;
}

.form__dica {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.form__erro {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--destructive);
}

.form__leitura {
  margin: 0;
  padding: 0.4375rem 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.form__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.form__acoes form {
  display: inline;
}

.campo-senha {
  position: relative;
}

.campo-senha input {
  padding-right: 4.5rem;
}

.campo-senha__toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--muted-foreground);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.busca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.busca input,
.busca select {
  width: auto;
  min-width: 11rem;
  flex: 1 1 11rem;
  max-width: 22rem;
}

.grid2,
.grid3 {
  display: grid;
  gap: 0.875rem;
}

@media (min-width: 640px) {
  .grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * Tabelas
 * ------------------------------------------------------------------------- */
.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  font-size: 0.875rem;
}

.tabela thead th {
  padding: 0.75rem 1rem;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.tabela tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela tbody tr:hover {
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}

.tabela code {
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  background: var(--muted);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.8125rem;
}

.tabela__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}

.tabela__acoes form {
  display: inline;
}

.tabela__vazio {
  padding: 2.5rem 1rem !important;
  text-align: center;
  color: var(--muted-foreground);
}

.tabela__total {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.tabela__ordem {
  color: var(--muted-foreground);
}

.tabela__somente {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* Em telas estreitas a tabela pode rolar na horizontal, mas as células
   quebram linha primeiro.

   `white-space: nowrap` na tabela inteira saiu daqui. Aplicado assim, impedia
   qualquer célula de quebrar, e nome de empresa, identificação de imóvel e
   título de demanda inflavam a largura sem teto — a tabela de oito colunas de
   `pr_servicos` passava de 900px num aparelho de 390px, e "Ações", a coluna
   que importa, era a última. Agora o texto quebra e a rolagem fica como rede
   de segurança, não como caminho normal de leitura.

   O ponto de quebra passou de 700px para 640px, o mesmo do resto do arquivo.
   Na faixa entre os dois a tabela estava em modo celular enquanto grades,
   chips e nome do usuário já estavam em modo desktop. */
@media (max-width: 639.98px) {
  .tabela {
    display: block;
    overflow-x: auto;
  }

  /* o cabeçalho acompanha: `nowrap` nele sozinho já bastava para esticar a
     tabela, porque é ele que define a largura mínima de cada coluna */
  .tabela thead th {
    white-space: normal;
  }

  /* `display: block` no <table> desfaz o recorte do canto arredondado, então
     a borda vem do contorno em vez do `overflow: hidden` */
  .tabela {
    border-radius: var(--radius-md);
  }
}

/* ---------------------------------------------------------------------------
 * Etiquetas de situação (o "Pill" do protótipo)
 * ------------------------------------------------------------------------- */
.situacao,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.situacao::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: currentColor;
}

.situacao--ok {
  background: var(--success-soft);
  color: var(--success);
}

.situacao--inativo {
  background: var(--danger-soft);
  color: var(--destructive);
}

.situacao--pendente {
  background: var(--warning-soft);
  color: var(--warning);
}

.tag {
  background: var(--brand-soft);
  color: var(--primary);
}

/* ---------------------------------------------------------------------------
 * Avisos
 * ------------------------------------------------------------------------- */
.alert {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  background: var(--card);
  font-size: 0.875rem;
}

.alert--erro {
  border-left-color: var(--destructive);
  background: var(--danger-soft);
  color: color-mix(in srgb, var(--destructive) 85%, black);
}

.alert--ok {
  border-left-color: var(--success);
  background: var(--success-soft);
  color: color-mix(in srgb, var(--success) 85%, black);
}

.alert--info {
  border-left-color: var(--info);
  background: var(--info-soft);
  color: color-mix(in srgb, var(--info) 85%, black);
}

/* ---------------------------------------------------------------------------
 * Pares rótulo/valor
 * ------------------------------------------------------------------------- */
.dados {
  display: grid;
  gap: 0.875rem 1.5rem;
  margin: 0;
  grid-template-columns: 1fr;
}

.dados dt {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.dados dd {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .dados {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * Linha do tempo
 * ------------------------------------------------------------------------- */
.linha-tempo {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.25rem;
  border-left: 1px solid var(--border);
  list-style: none;
}

.linha-tempo__item {
  position: relative;
  margin-bottom: 1rem;
}

.linha-tempo__item::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: -1.6rem;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: var(--primary);
}

.linha-tempo__data {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.linha-tempo__texto {
  display: block;
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
 * Documentos e galeria
 * ------------------------------------------------------------------------- */
.grupo-docs {
  margin-bottom: 1.5rem;
}

.grupo-docs__titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--fonte-titulo);
  font-size: 0.9375rem;
  font-weight: 700;
}

.galeria {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.galeria__item {
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.galeria__item img {
  display: block;
  width: 100%;
  height: 8rem;
  object-fit: cover;
}

.galeria__item figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
}

.galeria__titulo {
  font-size: 0.8125rem;
  font-weight: 600;
}

.identidade {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.identidade__img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-xl);
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--card);
}

/* ---------------------------------------------------------------------------
 * Paginação
 * ------------------------------------------------------------------------- */
.paginacao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.paginacao__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--altura-controle);
  padding-inline: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}

.paginacao__item:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}

.paginacao__posicao {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* ---------------------------------------------------------------------------
 * Responsável (ficha da empresa)
 * ------------------------------------------------------------------------- */
.responsavel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--muted);
}

.responsavel__dados {
  min-width: 0;
}

.responsavel__nome {
  font-weight: 600;
}

.responsavel__contato,
.responsavel__email,
.responsavel__acesso {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.responsavel__acao {
  margin-left: auto;
}

/* ---------------------------------------------------------------------------
 * Telas de autenticação (login, convite, senha)
 * ------------------------------------------------------------------------- */
.auth {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 1fr;
}

.auth__brand {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 3rem;
  background: var(--navy);
  color: var(--navy-foreground);
}

.auth__logo img,
.auth__logo svg {
  height: 2.25rem;
  width: auto;
}

.auth__tagline {
  font-family: var(--fonte-titulo);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  max-width: 24ch;
}

.auth__texto {
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--navy-foreground) 78%, transparent);
  max-width: 44ch;
}

.auth__painel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
}

.auth__card {
  width: 100%;
  max-width: 25rem;
  margin-inline: auto;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-float);
}

.auth__simbolo img {
  height: 2.5rem;
  width: auto;
}

.auth__titulo {
  margin: 0.875rem 0 1.25rem;
  font-size: 1.5rem;
  font-weight: 800;
}

.btn--bloco {
  width: 100%;
}

@media (min-width: 900px) {
  .auth__simbolo {
    display: none;
  }
}

.auth__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
}

.auth__footer {
  padding: 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

@media (min-width: 900px) {
  .auth {
    grid-template-columns: 1fr 1fr;
  }
  .auth__brand {
    display: flex;
  }
}

/* ---------------------------------------------------------------------------
 * Aba inferior (celular) — a casca do protótipo para o prestador
 * ------------------------------------------------------------------------- */
.abas {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  /* `1fr` sozinho equivale a `minmax(auto, 1fr)`, e o piso `auto` impede a
     coluna de encolher abaixo do próprio conteúdo: com cinco colunas, ícone de
     3rem e rótulo de até 12 caracteres, a barra passava de 350px e estourava
     em aparelho de 360px. `minmax(0, 1fr)` deixa a coluna encolher. */
  grid-auto-columns: minmax(0, 1fr);
  /* sólido: com 96% de opacidade o desfoque não aparecia, e o
     `backdrop-filter` pintava a aba por cima do fundo do menu de perfil */
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: max(env(safe-area-inset-bottom), 0.25rem);
}

.abas__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-align: center;
  /* par necessário para a coluna de `minmax(0, 1fr)` poder encolher: sem
     `min-width: 0` o item de grade volta a impor a largura do conteúdo, e o
     rótulo longo some com reticência em vez de estourar a barra */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abas__item:hover {
  text-decoration: none;
}

.abas__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 1.75rem;
  border-radius: 999px;
}

.abas__item.is-ativo {
  color: var(--primary);
}

.abas__item.is-ativo .abas__icone {
  background: var(--brand-soft);
}

.abas__icone svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 1024px) {
  .abas {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Ícones em linha (subconjunto do Lucide, usado no menu e nas abas)
 * ------------------------------------------------------------------------- */
.icone {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ---------------------------------------------------------------------------
 * Mensagens do Django
 * ------------------------------------------------------------------------- */
.mensagens {
  margin-bottom: 1.25rem;
}

/* ===========================================================================
 * Componentes do protótipo adotados tela por tela
 * =========================================================================== */

/* --- Trilha de navegação (breadcrumbs) --------------------------------- */
.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.trilha a {
  color: var(--muted-foreground);
}

.trilha a:hover {
  color: var(--foreground);
}

.trilha__atual {
  color: var(--foreground);
}

.trilha svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* --- Cartões de indicador --------------------------------------------- */
.indicadores {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-bottom: 1.5rem;
}

.indicador {
  display: block;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s;
}

a.indicador:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  text-decoration: none;
}

.indicador__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.indicador__valor {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--foreground);
}

.indicador__icone svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted-foreground);
}

.indicador__rotulo {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.indicador--brand .indicador__valor {
  color: var(--primary);
}

.indicador--alerta .indicador__valor {
  color: var(--warning);
}

.indicador--perigo .indicador__valor {
  color: var(--destructive);
}

.indicador--ok .indicador__valor {
  color: var(--success);
}

/* --- Estado vazio ------------------------------------------------------ */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-2xl);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  text-align: center;
}

.vazio__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--primary);
}

.vazio__icone svg {
  width: 1.25rem;
  height: 1.25rem;
}

.vazio__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

.vazio__texto {
  margin: 0.25rem 0 0;
  max-width: 44ch;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.vazio__acao {
  margin-top: 1rem;
}

/* --- Chips de filtro ---------------------------------------------------
   Embrulham em qualquer largura.

   Antes rolavam na horizontal no celular, com `scrollbar-width: none` e o
   marcador do WebKit escondido — ou seja, sem barra de rolagem e sem nenhuma
   dica de que havia mais botões. Quem não arrastava não descobria: era o
   "botão de filtro sumindo". Com sete opções no filtro de orçamentos, são
   duas linhas no celular, que ocupam menos atenção que um filtro invisível.
   ---------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.chips__item {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: var(--altura-controle);
  padding-inline: 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  /* o rótulo não quebra em duas linhas: "Não selecionado" cabe numa só, e
     quebrar esticaria aquele chip além da altura dos vizinhos */
  white-space: nowrap;
}

.chips__item:hover {
  color: var(--foreground);
  text-decoration: none;
}

.chips__item.is-ativo {
  border-color: var(--secondary);
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.chips__conta {
  font-size: 0.75rem;
  opacity: 0.7;
}



/* --- Etapas do serviço (stepper) --------------------------------------- */
.etapas {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.etapas::-webkit-scrollbar {
  display: none;
}

.etapas__item {
  display: flex;
  flex: 1 1 0;
  min-width: 4.5rem;
  flex-direction: column;
  align-items: center;
}

.etapas__linha {
  display: flex;
  width: 100%;
  align-items: center;
}

.etapas__traco {
  flex: 1;
  height: 2px;
  background: var(--border);
}

.etapas__traco--vazio {
  opacity: 0;
}

.etapas__traco--feito {
  background: var(--primary);
}

.etapas__marca {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 700;
}

.etapas__item.is-feito .etapas__marca {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.etapas__item.is-atual .etapas__marca {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.etapas__rotulo {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-align: center;
  color: var(--muted-foreground);
}

.etapas__item.is-atual .etapas__rotulo {
  color: var(--primary);
}

.etapas--cancelado .etapas__marca {
  border-color: var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  box-shadow: none;
}

.etapas--cancelado .etapas__traco {
  background: var(--border);
}

@media (min-width: 640px) {
  .etapas__rotulo {
    font-size: 0.75rem;
  }
}

/* --- Cabeçalho de painel com ação ------------------------------------- */
.bloco__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: -1rem -1rem 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.bloco__cab .bloco__titulo {
  margin: 0;
}

@media (min-width: 640px) {
  .bloco__cab {
    margin: -1.25rem -1.25rem 1.25rem;
    padding: 0.875rem 1.25rem;
  }
}

/* --- Inicial em círculo ----------------------------------------------- */
.avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 700;
}

.avatar--escuro {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.avatar--grande {
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
}

/* --- Identidade no cabeçalho: avatar ao lado do título ----------------- */
.pagina__id {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-width: 0;
}

.pagina__id .pagina__sub {
  margin-bottom: 0;
}

/* --- Seção de formulário: rótulo à esquerda, campos à direita ---------- */
.secao {
  display: grid;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border: 0;
  border-bottom: 1px solid var(--border);
}

.secao:last-of-type {
  padding-bottom: 0;
  margin-bottom: 1rem;
  border-bottom: 0;
}

.secao__titulo {
  padding: 0;
  font-family: var(--fonte-titulo);
  font-size: 0.875rem;
  font-weight: 700;
}

.secao__texto {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.secao__campos {
  display: grid;
  gap: 0.875rem;
}

.secao__campos .form__field {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .secao {
    grid-template-columns: 12.5rem 1fr;
    gap: 2rem;
  }
  .secao__campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .secao__campos--cheio {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Ações em ícone (§9 das decisões: a opção é ícone, não texto)
   Usado por templates/web/_acao.html e _acao_botao.html.

   O alvo de clique tem 2rem (32px) mesmo que o ícone desenhe 1rem: alvo menor
   que isso é difícil de acertar no toque e reprova o accessibility-checklist
   do projeto. O foco tem anel visível porque a cor sozinha não serve a quem
   navega por teclado.
   --------------------------------------------------------------------------- */
/* A regra antiga punha `display:flex` no <td>. Isso tira a célula do layout de
   tabela: o navegador a envolve numa célula anônima, a caixa flex passa a ter
   altura só do conteúdo e encosta no topo — então o `vertical-align: middle`
   da linha deixa de valer e os ícones ficam desalinhados do texto. Voltando a
   `table-cell`, o alinhamento vertical da linha volta a funcionar. */
.tabela tbody td.tabela__acoes {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  text-align: left;
}

/* espaço entre as ações, que o `gap` do flex antes fornecia */
.tabela tbody td.tabela__acoes > * + *,
.tabela tbody td.tabela__acoes > form + form,
.tabela tbody td.tabela__acoes > form + a,
.tabela tbody td.tabela__acoes > a + form {
  margin-left: 0.125rem;
}

.acao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.acao-icone .icone {
  width: 1.125rem;
  height: 1.125rem;
}

.acao-icone:hover,
.acao-icone:focus-visible {
  background-color: var(--accent);
  color: var(--navy);
}

.acao-icone:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   Exclusão definitiva de anexo (SPEC 008 fase 2). O <summary> é a própria
   ação de ícone, então herda `.acao-icone`; o que precisa sair é o triângulo
   do marcador, que apareceria colado ao ícone. `list-style` resolve na maioria
   dos navegadores e o pseudo-elemento do WebKit cobre Safari e iOS.
   --------------------------------------------------------------------------- */
.excluir-def {
  display: inline-block;
  vertical-align: middle;
}

.excluir-def > summary {
  list-style: none;
}

.excluir-def > summary::-webkit-details-marker {
  display: none;
}

.excluir-def__painel {
  display: grid;
  gap: 0.5rem;
  max-width: 20rem;
  margin-top: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--destructive);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  text-align: left;
  white-space: normal;
}

.excluir-def__aviso {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--foreground);
}

.btn--perigo {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: var(--destructive);
}

.acao-icone--perigo:hover,
.acao-icone--perigo:focus-visible {
  background-color: var(--danger-soft);
  color: var(--destructive);
}

/* o <form> de cada ação POST não deve quebrar a linha da coluna */
.tabela__acoes form {
  display: inline;
}

/* ---------------------------------------------------------------------------
   Ação de WhatsApp. Verde da marca (#25D366), para ser reconhecida de relance.

   O ícone vem do Simple Icons (CC0), que desenha com preenchimento, ao
   contrário dos Lucide do resto do sprite, que são traçados. Daí o `fill` e o
   `stroke:none` — sem isso o símbolo sai invisível, porque a regra geral de
   `.icone` zera o fill e pinta só o contorno.
   --------------------------------------------------------------------------- */
.acao-icone--whats {
  color: #25d366;
}

.acao-icone--whats:hover,
.acao-icone--whats:focus-visible {
  background-color: #e7f9ef;
  color: #128c7e; /* verde escuro do WhatsApp, para o hover ter contraste */
}

.icone--preenchido {
  fill: currentColor;
  stroke: none;
}


/* ---------------------------------------------------------------------------
 * Avatar
 *
 * Círculo com a inicial. Usado no gatilho do menu da conta, na identidade
 * dentro dele e no cartão da gaveta. Um componente só, porque os três mostram
 * a mesma coisa em tamanhos diferentes.
 * ------------------------------------------------------------------------- */
.avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

.avatar--g {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------------
 * Menu da conta (canto superior direito)
 *
 * Hierarquia copiada do cartão de perfil do SalesTrack: rótulo pequeno, nome
 * em destaque, identidade com avatar, e "Sair" separado por uma linha. A
 * primeira versão era uma lista de links sem avatar e sem hierarquia.
 *
 * `<details>` nativo, como na exclusão de anexo: o triângulo do marcador sai
 * com `list-style` e com o pseudo-elemento do WebKit, que cobre Safari e iOS.
 * ------------------------------------------------------------------------- */
.perfil {
  position: relative;
}

.perfil > summary {
  list-style: none;
  cursor: pointer;
}

.perfil > summary::-webkit-details-marker {
  display: none;
}

.perfil > summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Fundo do menu aberto. É um pseudo-elemento do próprio <summary>: tocar
   nele é tocar no gatilho, e o <details> fecha sozinho, sem JavaScript.
   Transparente no desktop (só serve para fechar ao clicar fora) e
   escurecido no celular, onde o menu vira um painel. */
.perfil[open] > summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 39;
  cursor: default;
}

.perfil__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 40;
  width: 18rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-float);
}

.perfil__identidade {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.625rem 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
}

/* `min-width: 0` nos dois níveis: sem isso a reticência não acontece, porque
   o item flex volta a impor a largura do conteúdo */
.perfil__textos {
  display: grid;
  gap: 0.0625rem;
  min-width: 0;
}

.perfil__nome,
.perfil__email,
.perfil__empresa {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perfil__nome {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
}

.perfil__email {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.perfil__empresa {
  justify-self: start;
  max-width: 100%;
  margin-top: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
}

.perfil__itens {
  display: grid;
  gap: 0.125rem;
  padding-block: 0.375rem;
}

.perfil__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.perfil__item .icone {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--muted-foreground);
}

.perfil__item:hover,
.perfil__item:focus-visible {
  background: var(--accent);
  text-decoration: none;
}

.perfil__sair {
  margin: 0;
  padding-top: 0.375rem;
  border-top: 1px solid var(--border);
}

.perfil__item--perigo,
.perfil__item--perigo .icone {
  color: var(--destructive);
}

.perfil__item--perigo:hover,
.perfil__item--perigo:focus-visible {
  background: var(--danger-soft);
}

/* Celular: painel na largura da tela, logo abaixo da topbar, com o fundo
   escurecido. O dropdown de 17rem pendurado no avatar ficava pequeno,
   sobre o conteúdo e sem dizer como fechar. */
@media (max-width: 639.98px) {
  .perfil[open] > summary::before {
    background: rgb(16 45 66 / 0.4);
  }

  .perfil__menu {
    position: fixed;
    top: calc(var(--topbar-altura) + env(safe-area-inset-top) + 0.5rem);
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
 * Gaveta de navegação (o "Mais" da aba inferior)
 *
 * Estrutura interna seguindo a gaveta do SalesTrack: topo com a marca e o
 * fechar, navegação ocupando o meio com rolagem própria, e cartão de conta no
 * pé. A primeira versão tinha só o menu solto, sem o cartão e sem recuo.
 *
 * Continua sendo `<dialog>`, e aqui divirjo da referência de propósito: ele
 * entrega Esc, fundo clicável e foco preso dentro da gaveta sem código. O
 * SalesTrack reimplementa Esc e o fundo à mão, e ainda assim o foco pode
 * escapar para o conteúdo atrás. O desenho é o mesmo; o mecanismo é melhor.
 * ------------------------------------------------------------------------- */
.gaveta {
  /* o <dialog> ocupa a tela toda e é transparente; quem desenha é o painel.
     `margin: 0` desfaz a centralização padrão e os `max-*` desfazem o limite
     de `calc(100% - 6px - 2em)` que o elemento traz. */
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.gaveta::backdrop {
  background: rgb(16 45 66 / 0.5);
}

.gaveta__painel {
  display: flex;
  flex-direction: column;
  width: min(18rem, 85vw);
  height: 100%;
  padding: 1.25rem 1rem;
  background: var(--sidebar);
  color: var(--sidebar-foreground);
}

.gaveta__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.gaveta__fechar {
  display: inline-grid;
  place-items: center;
  padding: 0.375rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sidebar-foreground);
  cursor: pointer;
}

.gaveta__fechar .icone {
  width: 1.25rem;
  height: 1.25rem;
}

/* `flex: 1` com `min-height: 0` é o par que faz a navegação rolar e o cartão
   de conta ficar colado no pé: sem o `min-height`, o item flex não encolhe e a
   rolagem vai para o painel inteiro, levando o cartão para fora da tela. */
.gaveta__nav {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gaveta__conta {
  flex: 0 0 auto;
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--sidebar-foreground) 10%, transparent);
}

.gaveta__rotulo {
  display: block;
  overflow: hidden;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--sidebar-foreground) 70%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gaveta__empresa,
.gaveta__nome {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gaveta__usuario {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  margin-top: 0.6rem;
  color: inherit;
}

.gaveta__usuario:hover {
  text-decoration: none;
}

.gaveta__textos {
  min-width: 0;
}

.gaveta__sair {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--sidebar-foreground) 80%, transparent);
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.gaveta__sair:hover {
  color: var(--brand);
}

.gaveta__sair .icone {
  width: 0.875rem;
  height: 0.875rem;
}

.gaveta[open] .gaveta__painel {
  animation: gaveta-entra 0.18s ease-out;
}

@keyframes gaveta-entra {
  from {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gaveta[open] .gaveta__painel {
    animation: none;
  }
}

/* A gaveta é navegação de celular: no desktop a lateral fixa reaparece e o
   botão que a abre desaparece com a aba inferior. */
@media (min-width: 1024px) {
  .gaveta,
  .gaveta::backdrop {
    display: none;
  }
}


/* ---------------------------------------------------------------------------
 * Marcas removíveis (município atendido, e o que mais vier)
 *
 * Cada item é um `<form>` de POST com um "×". Não é caixa de seleção: marcar e
 * depois salvar exigia reenviar a lista inteira, e uma falha no meio apagava o
 * que não foi reenviado.
 * ------------------------------------------------------------------------- */
.marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: var(--altura-controle);
  padding-inline: 0.5rem 0.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.875rem;
}

.marca__texto {
  white-space: nowrap;
}

.marca__x {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}

.marca__x:hover,
.marca__x:focus-visible {
  background: var(--danger-soft);
  color: var(--destructive);
}

.marca__x .icone {
  width: 0.875rem;
  height: 0.875rem;
}

/* o <form> de cada marca não deve virar bloco e quebrar a linha */
.marca form {
  display: inline-flex;
  margin: 0;
}

/* Rótulo visível apenas para leitor de tela: o campo tem placeholder e
   contexto na tela, mas precisa de nome acessível. */
.form__oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__label--espaco {
  margin-top: 1.25rem;
}


/* --- Gatilho do menu da conta ----------------------------------------- */
/* Retângulo arredondado, e não pílula: com avatar, nome e empresa o gatilho
   é largo, e o `999px` (mais o `50%` do <summary>) o desenhava como uma
   elipse, com o anel de foco laranja contornando-a depois de cada clique. */
.perfil__gatilho {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 15rem;
  padding: 0.25rem;
  border-radius: var(--radius-lg);
  transition: background-color 0.15s;
}

.perfil__gatilho:hover,
.perfil[open] > .perfil__gatilho {
  background: var(--accent);
}

/* aberto, o fundo já diz onde se está; o anel fica para o teclado com o
   menu fechado */
.perfil[open] > .perfil__gatilho:focus-visible {
  outline: none;
}

@media (min-width: 640px) {
  .perfil__gatilho {
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  }
}

/* nome e empresa só aparecem quando há largura: no celular a topbar divide
   espaço com o título da página */
.perfil__gatilho-textos,
.perfil__seta {
  display: none;
}

.perfil__gatilho-nome,
.perfil__gatilho-empresa {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perfil__gatilho-nome {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--foreground);
}

.perfil__gatilho-empresa {
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--muted-foreground);
}

/* a seta vira "para baixo" girando o chevron do sprite, que só tem a versão
   para a direita — manter um segundo ícone só por 90 graus não se paga */
.perfil__seta {
  display: none;
  color: var(--muted-foreground);
  transform: rotate(90deg);
  transition: transform 0.15s;
}

.perfil__seta .icone {
  width: 1rem;
  height: 1rem;
}

.perfil[open] .perfil__seta {
  transform: rotate(-90deg);
}

@media (min-width: 640px) {
  .perfil__gatilho-textos {
    display: grid;
    min-width: 0;
  }

  .perfil__seta {
    display: inline-flex;
  }
}

/* ===========================================================================
 * Reestruturação responsiva
 *
 * Regras transversais da auditoria de responsividade. Ficam juntas, no fim,
 * porque corrigem componentes de várias seções acima e precisam vencer a
 * cascata sem `!important`.
 * =========================================================================== */

/* Texto sem espaço (e-mail, código, URL) quebra em vez de alargar a página. */
body {
  overflow-wrap: break-word;
}

/* Título do bloco dentro do card, e não desenhado sobre a borda.
   O <legend> de um <fieldset> fica, por padrão, "pendurado" na linha da
   borda; flutuá-lo o devolve ao fluxo como um bloco comum. */
fieldset.bloco > legend {
  float: left;
  width: 100%;
}

fieldset.bloco > legend + * {
  clear: both;
}

/* Botão solto no cabeçalho ("Voltar") não ocupa a largura toda no celular. */
.pagina__cab > .btn {
  align-self: flex-start;
}

/* Hierarquia de ações: a destrutiva se distingue da neutra sem gritar. */
.btn--ghost.btn--perigo {
  background: transparent;
  border-color: color-mix(in srgb, var(--destructive) 40%, var(--border));
  color: var(--destructive);
}

.btn--ghost.btn--perigo:hover {
  background: var(--danger-soft);
}

/* --- Pares rótulo/valor --------------------------------------------------
   Antes, no desktop, `auto-fit` de 13rem tratava <dt> e <dd> como colunas
   iguais: o rótulo ganhava a mesma largura do valor. Agora são pares
   rótulo|valor, um por linha no tablet e dois por linha no desktop. */
.dados dd {
  min-width: 0;
}

/* algumas telas agrupam cada par num <div>; o par continua na grade */
.dados > div {
  display: contents;
}

@media (min-width: 640px) {
  .dados {
    grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
    gap: 0.625rem 1.25rem;
    align-items: baseline;
  }
  .dados dd {
    margin: 0;
  }
}

@media (min-width: 1100px) {
  .dados {
    grid-template-columns:
      minmax(7rem, max-content) minmax(0, 1fr)
      minmax(7rem, max-content) minmax(0, 1fr);
  }
}

/* --- Tabelas -------------------------------------------------------------
   `navegacao.js` envolve cada `.tabela` em `.tabela-rolagem` e marca as
   células com o rótulo da coluna (`data-label`). Com isso:

   - abaixo de 768px cada linha vira um cartão, com rótulo e valor;
   - de 768px para cima a tabela se mantém e, se não couber, rola dentro do
     próprio contêiner, sem empurrar a página.

   Sem JavaScript vale o comportamento anterior (rolagem horizontal). */
.tabela-rolagem {
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-2xl);
}

.tabela-rolagem > .tabela {
  margin: 0;
}

@media (min-width: 768px) and (max-width: 1279.98px) {
  .tabela thead th,
  .tabela tbody td {
    padding-inline: 0.75rem;
  }
}

@media (max-width: 767.98px) {
  .tabela.is-cartoes {
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .tabela.is-cartoes thead {
    display: none;
  }

  .tabela.is-cartoes tbody {
    display: grid;
    gap: 0.75rem;
  }

  .tabela.is-cartoes tbody tr {
    display: grid;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
  }

  .tabela.is-cartoes tbody tr:hover {
    background: var(--card);
  }

  /* Rótulo numa coluna à esquerda, posicionado, e o conteúdo da célula em
     fluxo normal à direita. Com grade, cada nó da célula (texto, selo, link)
     virava um item e quebrava para baixo do rótulo. */
  .tabela.is-cartoes tbody td,
  .tabela.is-cartoes tbody td.tabela__acoes {
    position: relative;
    display: block;
    min-height: 1.25rem;
    padding: 0 0 0 36%;
    border: 0;
    white-space: normal;
  }

  .tabela.is-cartoes tbody td::before {
    content: attr(data-label);
    position: absolute;
    top: 0.0625rem;
    left: 0;
    width: calc(36% - 0.75rem);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--muted-foreground);
  }

  /* a primeira coluna é o nome do registro: vira o título do cartão */
  .tabela.is-cartoes tbody td:first-child {
    padding-left: 0;
    font-weight: 600;
    font-size: 0.9375rem;
  }

  .tabela.is-cartoes tbody td:first-child::before,
  .tabela.is-cartoes tbody td[data-label=""]::before {
    content: none;
  }

  .tabela.is-cartoes tbody td[data-label=""] {
    padding-left: 0;
  }

  .tabela.is-cartoes tbody tr.is-clicavel {
    cursor: pointer;
  }

  .tabela.is-cartoes tbody tr.is-clicavel:active {
    border-color: var(--primary);
  }

  /* célula vazia não ocupa linha no cartão */
  .tabela.is-cartoes tbody td:empty {
    display: none;
  }

  /* ações no rodapé do cartão, à direita e com alvo de toque */
  .tabela.is-cartoes tbody td.tabela__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding: 0.375rem 0 0;
    border-top: 1px solid var(--border);
  }

  .tabela.is-cartoes tbody td.tabela__acoes::before {
    content: none;
  }

  .tabela.is-cartoes tbody td.tabela__acoes > * + * {
    margin-left: 0;
  }

  .tabela.is-cartoes tbody td.tabela__vazio {
    display: block;
    border: 1px dashed var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
  }

  .tabela.is-cartoes tbody td.tabela__vazio::before {
    content: none;
  }

  .tabela-rolagem:has(> .tabela.is-cartoes) {
    overflow: visible;
  }
}

/* --- Aba inferior ------------------------------------------------------- */
.abas__item {
  min-height: 3.25rem;
  justify-content: center;
}

.abas__rotulo {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O conteúdo não fica escondido atrás da aba fixa, nem do recorte do iPhone. */
@media (max-width: 1023.98px) {
  .app__main {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }

  .topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar-altura) + env(safe-area-inset-top));
  }
}

/* --- Etapas --------------------------------------------------------------
   Seis etapas com rótulo não cabem em 320–479px. Ali só a etapa atual mostra
   o nome; as demais mantêm o número, e o rótulo segue para leitor de tela. */
@media (max-width: 479.98px) {
  .etapas__item {
    min-width: 0;
  }

  .etapas__item:not(.is-atual) .etapas__rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .etapas__item.is-atual .etapas__rotulo {
    white-space: nowrap;
  }
}

/* --- Toque ---------------------------------------------------------------
   Em tela de toque, alvo mínimo de 44px, e campo com 16px de fonte: abaixo
   disso o iOS dá zoom ao focar e a tela "pula" com o teclado aberto. */
@media (pointer: coarse), (max-width: 767.98px) {
  .btn,
  .paginacao__item {
    min-height: 2.75rem;
  }

  .acao-icone {
    width: 2.75rem;
    height: 2.75rem;
  }

  .chips__item {
    min-height: 2.5rem;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    min-height: 2.75rem;
    font-size: 1rem;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
  }

  .form__check {
    min-height: 2.75rem;
  }

  .trilha a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
  }
}

/* Ações do formulário no celular estreito: a principal ocupa a linha. */
@media (max-width: 479.98px) {
  .form__acoes > .btn--primary {
    flex: 1 1 100%;
  }
}

/* --- Seletor de arquivos/fotos ------------------------------------------
   O botão nativo "Escolher arquivos" é minúsculo. Aqui ele vira um alvo de
   toque, e `navegacao.js` acrescenta a prévia das fotos escolhidas. */
input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 1px dashed var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
}

input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 0.875rem;
  min-height: 2.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.previa-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.previa-fotos:empty {
  display: none;
}

.previa-fotos img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* --- Confirmação ---------------------------------------------------------
   Substitui o `confirm()` do navegador nos formulários com `data-confirmar`.
   É um <dialog>: Esc, foco preso e fundo vêm do navegador. No celular abre
   como folha inferior, ao alcance do polegar. */
.confirmacao {
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-float);
}

.confirmacao::backdrop {
  background: rgb(16 45 66 / 0.45);
}

.confirmacao__titulo {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
}

.confirmacao__texto {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.confirmacao__acoes {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

@media (max-width: 479.98px) {
  .confirmacao {
    margin: auto auto 0;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }

  .confirmacao__acoes > .btn {
    flex: 1 1 100%;
  }
}

/* --- Bloco recolhível ----------------------------------------------------
   Passo que se faz uma vez (ex.: enviar a entrega) fica fechado até ser
   pedido, para não competir com a ação do dia a dia na mesma tela. */
.recolhivel > .recolhivel__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  margin: 0;
  cursor: pointer;
  list-style: none;
}

.recolhivel > .recolhivel__titulo::-webkit-details-marker {
  display: none;
}

.recolhivel > .recolhivel__titulo::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.recolhivel[open] > .recolhivel__titulo {
  margin-bottom: 0.875rem;
}

.recolhivel[open] > .recolhivel__titulo::after {
  transform: rotate(-135deg);
}

/* Ação principal de domínio dentro de uma lista ("Orçar"): botão com texto. */
.acao-texto {
  height: 2.25rem;
  padding-inline: 0.875rem;
}

.acao-texto .icone {
  width: 1rem;
  height: 1rem;
}

/* Barra de etapas solta do conteúdo vizinho. */
.etapas {
  margin-block: 1rem;
}

@media (max-width: 639.98px) {
  /* rótulo colado ao valor, e o espaço maior entre pares */
  .dados {
    gap: 0;
  }
  .dados dd {
    margin-bottom: 0.75rem;
  }

  /* a ação que avança vem primeiro, ao alcance do polegar */
  .form__acoes > .btn--primary,
  .form__acoes > form:has(> .btn--primary) {
    order: -1;
  }
}

/* Com o menu de perfil aberto a topbar sobe acima da aba inferior, para o
   fundo escurecido cobrir a tela inteira. */
.topbar:has(.perfil[open]) {
  z-index: 50;
}