/* =========================================================================
   Space VIV — a cara do Space REF+ (a VIV é uma empresa da REF)

   O tema escuro do Portal REF+ (vidro, o amarelo da marca, Syne nos títulos e Urbanist no
   texto), com o nome Space VIV e a logo da adidas. No Kanban, as cores das etapas e das
   etiquetas do Notion (o quadro "Gestão de Tarefas VIV"), na versão escura. Sem
   bibliotecas: as fontes vêm da pasta static/fontes.

   Partes:
     1. fontes, cores e medidas        7. Kanban (Gestão de Tarefas e Orçamentos)
     2. base                           8. o JOB aberto
     3. topo e menus                   9. solicitações do cliente
     4. botões, links e campos        10. entrada (login e primeiro acesso)
     5. etiquetas, status e avisos    11. cadastros (clientes, listas, usuários, equipe)
     6. páginas, cartões e tabelas    12. celular e tablet
   ========================================================================= */

/* --------------------------------------------------------------- 1. fontes */
/* Syne: títulos e destaques · Urbanist: textos e interface (OFL). */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("../fontes/syne-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("../fontes/syne-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fontes/urbanist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fontes/urbanist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* o amarelo REF+ (destaque) e a paleta do Guide 2026 */
  --destaque: #ffff00;
  --destaque-rgb: 255, 255, 0;
  --fonte: "Urbanist", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fonte-titulo: "Syne", "Urbanist", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fonte-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  --fundo: #1c1c1c;
  --fundo-elevado: #262625;
  --fundo-menu: rgba(38, 38, 37, 0.97);
  --vidro: rgba(249, 248, 246, 0.06);
  --vidro-2: rgba(249, 248, 246, 0.09);
  --vidro-forte: rgba(249, 248, 246, 0.12);
  --linha: rgba(249, 248, 246, 0.13);
  --linha-2: rgba(249, 248, 246, 0.22);
  --linha-forte: rgba(249, 248, 246, 0.55);
  --texto: #f9f8f6;
  --texto-2: #c3c2bf;
  --texto-3: #9a9995;
  --texto-4: #6f6e6b;
  --texto-inverso: #1c1c1c;
  --anel-foco: 0 0 0 4px rgba(var(--destaque-rgb), 0.16);

  /* recados */
  --erro: #ff5c6c;
  --erro-fundo: rgba(255, 92, 108, 0.1);
  --erro-borda: rgba(255, 92, 108, 0.5);
  --sucesso: #2bd98c;
  --sucesso-fundo: rgba(43, 217, 140, 0.1);
  --alerta: #ffb547;
  --alerta-fundo: rgba(255, 181, 71, 0.1);
  --info: #6fb3ff;
  --info-fundo: rgba(111, 179, 255, 0.1);

  /* as cores do Notion (escuro): etiqueta, texto, a bolinha do status e o tom da coluna */
  --n-padrao-tag: rgba(249, 248, 246, 0.1);
  --n-padrao-texto: #e3e2e0;

  --n-cinza-tag: #454545;
  --n-cinza-texto: #ecebe9;
  --n-cinza-ponto: #9b9b9b;
  --n-cinza-fundo: rgba(155, 155, 155, 0.08);

  --n-marrom-tag: #5c3b23;
  --n-marrom-texto: #f3e3d9;
  --n-marrom-ponto: #ba856f;
  --n-marrom-fundo: rgba(186, 133, 111, 0.1);

  --n-laranja-tag: #854c1d;
  --n-laranja-texto: #fde7d3;
  --n-laranja-ponto: #e08c47;
  --n-laranja-fundo: rgba(224, 140, 71, 0.1);

  --n-amarelo-tag: #89632a;
  --n-amarelo-texto: #fdf0d2;
  --n-amarelo-ponto: #dcab52;
  --n-amarelo-fundo: rgba(220, 171, 82, 0.1);

  --n-verde-tag: #2b593f;
  --n-verde-texto: #dcf3e4;
  --n-verde-ponto: #52b07a;
  --n-verde-fundo: rgba(82, 176, 122, 0.1);

  --n-azul-tag: #28456c;
  --n-azul-texto: #dbe9fb;
  --n-azul-ponto: #5e9be6;
  --n-azul-fundo: rgba(94, 155, 230, 0.1);

  --n-roxo-tag: #492f64;
  --n-roxo-texto: #eee0fb;
  --n-roxo-ponto: #a77fe0;
  --n-roxo-fundo: rgba(167, 127, 224, 0.1);

  --n-rosa-tag: #69314c;
  --n-rosa-texto: #fbdcea;
  --n-rosa-ponto: #e06aa3;
  --n-rosa-fundo: rgba(224, 106, 163, 0.1);

  --n-vermelho-tag: #6e3630;
  --n-vermelho-texto: #fde0dc;
  --n-vermelho-ponto: #ef6a60;
  --n-vermelho-fundo: rgba(239, 106, 96, 0.1);

  /* as situações do orçamento no gráfico e nos quadros (verde = aprovado, âmbar = esperando o
     cliente, cinza = em elaboração, vermelho = declinado; validadas para o fundo escuro) */
  --serie-aprovados: #0ca30c;
  --serie-aprovacao: #fab219;
  --serie-elaboracao: #898781;
  --serie-declinados: #d03b3b;

  /* cantos e medidas (os do Portal REF+) */
  --raio-cartao: 24px;
  --raio-bloco: 18px;
  --raio-campo: 16px;
  --raio-pilula: 999px;
  --lateral: 48px;
  --alto-topo: 88px; /* o topo do Space REF+ (sem barra, rola com a página) */
  --alto-faixa: 0px;
  --sombra-elevada: 0 24px 60px -8px rgba(0, 0, 0, 0.6);
  --sombra-cartao: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 18px -6px rgba(0, 0, 0, 0.55);

  /* desenhos pequenos (seta das listas e visto da caixa) */
  --svg-abrir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --svg-visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='m1 5 3.5 3.5L11 1.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  --seta-campo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23c3c2bf' stroke-width='1.6'/%3E%3C/svg%3E");
}

body.com-faixa-demo {
  --alto-faixa: 30px;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
  scrollbar-color: rgba(249, 248, 246, 0.28) var(--fundo);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  /* o brilho de fundo do Portal REF+ (bem de leve) */
  background:
    radial-gradient(circle at 82% 8%, rgba(129, 128, 125, 0.16) 0, transparent 38%),
    radial-gradient(circle at 6% 104%, rgba(var(--destaque-rgb), 0.05) 0, transparent 34%),
    var(--fundo);
  background-attachment: fixed;
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

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

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

p {
  margin: 0 0 12px;
}

h1,
h2,
h3 {
  margin: 0;
}

code {
  padding: 0.05em 0.4em;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--vidro);
  font-family: var(--fonte-mono);
  font-size: 0.92em;
}

::selection {
  background: var(--destaque);
  color: var(--texto-inverso);
}

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

select option {
  background: var(--fundo-elevado);
  color: var(--texto);
}

.icone {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pular-para-conteudo {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--raio-pilula);
  background: var(--destaque);
  color: var(--texto-inverso);
  font-weight: 700;
  text-decoration: none;
}

.pular-para-conteudo:focus {
  top: 12px;
}

.faixa-demo {
  position: relative;
  z-index: 30;
  padding: 6px 12px;
  background: linear-gradient(90deg, var(--destaque), #fbfbc4);
  color: var(--texto-inverso);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 18px;
  text-align: center;
}

/* --------------------------------------------------------- 3. topo e menus */
/* O fundo do Space REF+: o "+" pontilhado bem apagado, à direita (atrás de tudo) */
.fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.fundo-mais {
  position: absolute;
  top: 50%;
  right: calc(-6vh - 40px);
  width: min(118vh, 96vw);
  aspect-ratio: 1;
  transform: translateY(-44%);
  background: url("../img/fundo-mais.svg") center / contain no-repeat;
  opacity: 0.05;
}

/* Na entrada fica como era (sem o "+" pontilhado), como no Space REF+ */
.pagina-entrada .fundo {
  display: none;
}

/* O topo igual ao do Space REF+ (1.10.0): sem barra, solto sobre o fundo e rolando com a
   página; abas grandes com o ponto amarelo embaixo da atual; ícones soltos à direita, o avatar
   com o ponto verde e o relógio no canto. */
.topo {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--alto-topo);
  padding: 14px var(--lateral) 0;
}

.topo-marca {
  display: flex;
  align-items: center;
  flex: none;
  color: var(--texto);
  text-decoration: none;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.marca-logo {
  width: auto;
  height: 34px;
}

.marca-nome {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.marca-nome b {
  font-weight: 800;
  color: var(--destaque);
}

.abas {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 28px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.aba {
  position: relative;
  padding: 6px 2px;
  color: var(--texto-2);
  font-family: var(--fonte-titulo);
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.aba:hover {
  color: var(--texto);
}

.aba.ativa {
  color: var(--texto);
  font-weight: 600;
}

/* Aba atual: um círculo amarelo embaixo (como no Space REF+) */
.aba.ativa::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--destaque);
  transform: translateX(-50%);
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

/* os ícones do topo ficam soltos (sem o círculo de vidro); o vidro aparece no passar */
.topo .botao-icone {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto);
}

.topo .botao-icone:hover,
.topo .menu[open] > .botao-icone,
.topo .botao-icone.ativo {
  background: var(--vidro-forte);
}

.topo .botao-icone .icone {
  width: 23px;
  height: 23px;
}

/* notebook pequeno e tablet: o topo aperta (e o relógio sai antes de faltar espaço) */
@media (max-width: 1180px) {
  .topo {
    gap: 26px;
  }

  .abas {
    gap: 20px;
  }

  .aba {
    font-size: 18px;
  }

  .topo-acoes {
    gap: 6px;
  }
}

@media (max-width: 940px) {
  .relogio {
    display: none;
  }
}

/* o relógio do canto (Syne, como no Space REF+) */
.relogio {
  min-width: 3.4em;
  margin-left: 10px;
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* a busca do topo */
.menu-busca-painel {
  width: min(420px, calc(100vw - 32px));
  padding: 12px;
}

.busca-topo {
  display: flex;
  gap: 8px;
  align-items: center;
}

.busca-topo .campo-entrada {
  flex: 1;
  min-width: 0;
}

.busca-topo .campo-entrada .icone {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--texto-3);
}

.busca-topo input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

/* menus (details.menu) */
.menu {
  position: relative;
}

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

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

.menu-painel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  min-width: 250px;
  max-width: min(380px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-bloco);
  background: var(--fundo-menu);
  box-shadow: var(--sombra-elevada);
  color: var(--texto);
  font-weight: 500;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  animation: surgir 0.14s ease-out;
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.menu-direita > .menu-painel {
  right: 0;
  left: auto;
}

.menu-painel > p {
  margin: 0;
  padding: 10px 12px;
  color: var(--texto-2);
  font-size: 14px;
}

.menu-titulo {
  margin: 8px 12px 4px;
  color: var(--texto-3);
  font-family: var(--fonte-titulo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--texto);
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-item:hover,
.menu-item:focus-visible {
  background: var(--vidro-forte);
  outline: none;
}

.menu-item .icone {
  width: 18px;
  height: 18px;
  color: var(--texto-2);
}

.menu-painel form {
  margin: 0;
}

.menu-perfil {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--linha);
}

.menu-perfil strong {
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 600;
}

.menu-perfil small {
  color: var(--texto-3);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.menu-perfil-papel {
  align-self: flex-start;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: var(--raio-pilula);
  background: rgba(var(--destaque-rgb), 0.14);
  color: var(--destaque);
  font-size: 12px;
  font-weight: 700;
}

.menu-vazio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 12px;
  color: var(--texto-3);
  font-size: 14px;
}

.menu-vazio .icone {
  width: 16px;
  height: 16px;
}

.avatar-conta {
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: 6px;
  background: var(--destaque);
  color: var(--texto-inverso);
  font-family: var(--fonte-titulo);
  font-size: 14px;
  font-weight: 700;
}

summary.avatar-conta {
  display: grid;
}

/* o ponto verde do avatar (online), como no Space REF+ */
.avatar-ponto {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--fundo);
  border-radius: 50%;
  background: var(--sucesso);
}

.menu-usuario[open] > .avatar-conta,
.avatar-conta:hover {
  box-shadow: 0 0 0 4px rgba(var(--destaque-rgb), 0.22);
}

/* o sino dos avisos */
.menu-sino > summary {
  position: relative;
}

.sino-contador {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--fundo);
  border-radius: 10px;
  background: var(--destaque);
  color: var(--texto-inverso);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.sino-novo > summary .icone {
  animation: balancar 0.7s ease-in-out 2;
  transform-origin: 50% 10%;
}

@keyframes balancar {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(14deg);
  }
  75% {
    transform: rotate(-14deg);
  }
}

.menu-notificacoes {
  width: min(410px, calc(100vw - 24px));
  max-width: none;
  padding: 0;
  overflow: hidden;
}

.sino-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--linha);
}

.sino-cabeca .menu-titulo {
  margin: 0;
}

.sino-cabeca form {
  margin: 0;
}

.sino-ler-todos {
  font-size: 13px;
}

.sino-lista {
  max-height: min(430px, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sino-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(249, 248, 246, 0.06);
  color: var(--texto);
  text-decoration: none;
}

.sino-item:hover {
  background: var(--vidro-2);
}

.sino-item.nao-lido {
  background: rgba(var(--destaque-rgb), 0.05);
}

.sino-item.nao-lido:hover {
  background: rgba(var(--destaque-rgb), 0.09);
}

.sino-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.sino-tipo,
.sino-simbolo {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fundo-elevado);
  color: var(--texto);
}

.sino-tipo {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 19px;
  height: 19px;
  border: 2px solid var(--fundo-elevado);
  background: #3a3a38;
}

.sino-tipo .icone {
  width: 10px;
  height: 10px;
}

.sino-simbolo {
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--linha);
}

.sino-simbolo .icone {
  width: 16px;
  height: 16px;
}

.sino-tipo-mencao {
  background: #7b4fb8;
}

.sino-tipo-cliente_abriu {
  background: #2f6fbf;
}

.sino-tipo-prazo_hoje {
  background: #b57a12;
}

.sino-tipo-atrasada {
  background: #c9374a;
}

.sino-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
}

.sino-frase {
  color: var(--texto-2);
}

.sino-titulo {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sino-trecho {
  display: -webkit-box;
  overflow: hidden;
  color: var(--texto-2);
  font-size: 13px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sino-quando {
  color: var(--texto-3);
  font-size: 12px;
}

.sino-ponto {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--destaque);
}

.sino-ver-todos {
  justify-content: center;
  border-top: 1px solid var(--linha);
  border-radius: 0;
  font-weight: 600;
}

.sino-carregando .icone {
  animation: girar 1s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------- 4. botões, links e campos */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  margin: 0;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  background: var(--vidro-forte);
  color: var(--texto);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
}

.botao .icone {
  width: 18px;
  height: 18px;
}

.botao:hover {
  transform: translateY(-1px);
}

.botao:active {
  transform: translateY(0);
}

.botao-primario {
  background: var(--destaque);
  color: var(--texto-inverso);
}

.botao-primario:hover {
  box-shadow: 0 0 0 4px rgba(var(--destaque-rgb), 0.18), 0 10px 26px -10px rgba(var(--destaque-rgb), 0.55);
}

.botao-vidro {
  border-color: var(--linha);
  background: var(--vidro-forte);
  color: var(--texto);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.botao-vidro:hover {
  background: rgba(249, 248, 246, 0.18);
}

.botao-perigo {
  border-color: var(--erro-borda);
  background: var(--erro-fundo);
  color: var(--erro);
}

.botao-perigo:hover {
  background: rgba(255, 92, 108, 0.18);
}

.botao-perigo-vazado {
  border-color: var(--erro-borda);
  background: transparent;
  color: var(--erro);
}

.botao-perigo-vazado:hover {
  background: var(--erro-fundo);
}

.botao-p {
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
}

.botao-p .icone {
  width: 16px;
  height: 16px;
}

.botao-g {
  height: 54px;
  font-size: 17px;
}

.botao-bloco {
  display: flex;
  width: 100%;
}

.botao:disabled,
.botao[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.botao[data-confirmando="1"] {
  border-color: var(--erro-borda);
  background: var(--erro);
  color: var(--texto-inverso);
}

.botao-icone {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.botao-icone:hover {
  background: var(--vidro-forte);
}

.botao-icone .icone {
  width: 18px;
  height: 18px;
}

.botao-icone-perigo:hover {
  background: var(--erro-fundo);
  color: var(--erro);
}

.botao-icone-perigo[data-confirmando="1"] {
  background: var(--erro);
  color: var(--texto-inverso);
}

.botao-icone-trancado {
  color: var(--texto-4);
  cursor: help;
}

.botao-icone-trancado:hover {
  background: transparent;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--destaque);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link .icone {
  width: 15px;
  height: 15px;
}

.link-pequeno {
  align-self: flex-start;
  font-size: 13px;
}

.link-quebra {
  display: inline;
  overflow-wrap: anywhere;
  font-weight: 500;
}

.link-quebra .icone {
  display: inline-block;
  margin-right: 5px;
  vertical-align: -2px;
}

/* O botão de voltar (1.11.0): uma pílula de vidro no alto da tela, com a seta */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 18px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  background: var(--vidro);
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.voltar:hover,
.voltar:focus-visible {
  border-color: var(--linha-2);
  background: var(--vidro-forte);
  color: var(--texto);
}

.voltar .icone {
  width: 16px;
  height: 16px;
  transition: transform 0.15s;
}

/* na trilha (tarefa e orçamento) o botão divide a linha com o caminho */
.trilha .voltar {
  margin: 0 6px 0 0;
  font-size: 13px;
}

.trilha .voltar:hover {
  text-decoration: none;
}

.voltar:hover .icone {
  transform: translateX(-3px);
}

/* campos */
.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.campo-rotulo {
  padding: 0;
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 600;
}

.campo-rotulo small {
  color: var(--texto-3);
  font-size: 13px;
  font-weight: 500;
}

.campo-entrada {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-campo);
  background: rgba(249, 248, 246, 0.07);
  color: var(--texto);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.campo-entrada:hover {
  border-color: var(--linha-2);
}

.campo-entrada:focus-within {
  border-color: rgba(249, 248, 246, 0.6);
  background: rgba(249, 248, 246, 0.1);
  box-shadow: var(--anel-foco);
}

.campo-entrada > .icone {
  width: 18px;
  height: 18px;
  color: var(--texto-3);
}

.campo-entrada input,
.campo-entrada select,
.campo-entrada textarea {
  flex: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
}

.campo-entrada input::placeholder,
.campo-entrada textarea::placeholder,
.filtro input::placeholder {
  color: var(--texto-4);
  opacity: 1;
}

.campo-entrada input[type="date"] {
  color-scheme: dark;
}

.campo-entrada select,
.filtro select,
select.seletor {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 24px;
  background-image: var(--seta-campo);
  background-position: right 2px center;
  background-repeat: no-repeat;
  background-size: 11px 8px;
  cursor: pointer;
}

.campo-entrada select:disabled,
.campo-entrada input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.campo-entrada:has(:disabled) {
  background: rgba(249, 248, 246, 0.03);
}

.campo-area {
  align-items: stretch;
  padding: 0;
}

.campo-area textarea {
  min-height: 104px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.campo-compacto {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
}

.campo-compacto input,
.campo-compacto select {
  padding: 8px 0;
  font-size: 15px;
}

.campo-area.campo-compacto {
  padding: 0;
}

.campo-area.campo-compacto textarea {
  min-height: 40px;
  padding: 9px 12px;
  font-size: 15px;
  field-sizing: content;
  max-height: 22lh;
}

.campo-entrada-p {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
}

.campo-entrada-p input,
.campo-entrada-p select {
  padding: 9px 0;
  font-size: 15px;
}

.campo-entrada-p > .icone {
  width: 16px;
  height: 16px;
}

.campo-botao {
  display: inline-grid;
  place-items: center;
  margin-right: -8px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--texto-3);
}

.campo-botao:hover {
  color: var(--texto);
}

.campo-ajuda {
  color: var(--texto-3);
  font-size: 13px;
  line-height: 1.45;
}

.campo-erro {
  color: var(--erro);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.campo:has(> .campo-erro) .campo-entrada,
.prop:has(.campo-erro) .campo-entrada {
  border-color: var(--erro-borda);
}

.campo-largo {
  grid-column: 1 / -1;
}

.campo-curto {
  max-width: 340px;
}

.grade-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}

.grade-campos-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* caixa de marcar (amarela quando marcada) */
.caixa-selecao {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}

.caixa-selecao > input {
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
}

.caixa {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--linha-forte);
  border-radius: 6px;
  background: transparent;
  transition: background-color 0.15s, border-color 0.15s;
}

.caixa-selecao > input:checked + .caixa {
  border-color: var(--destaque);
  background: var(--destaque);
}

.caixa-selecao > input:checked + .caixa::after {
  content: "";
  width: 12px;
  height: 10px;
  background: var(--texto-inverso);
  -webkit-mask: var(--svg-visto) center / contain no-repeat;
  mask: var(--svg-visto) center / contain no-repeat;
}

.caixa-selecao > input:focus-visible + .caixa {
  outline: 3px solid var(--destaque);
  outline-offset: 3px;
}

.caixa-selecao > input:disabled + .caixa {
  opacity: 0.4;
}

.caixa-selecao:has(> input:disabled) {
  cursor: not-allowed;
}

.caixa-selecao > span:last-child b {
  display: block;
  font-weight: 700;
}

.caixa-selecao > span:last-child small {
  display: block;
  margin-top: 2px;
  color: var(--texto-3);
  font-size: 13.5px;
}

.caixa-destaque {
  display: flex;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-campo);
  background: var(--vidro);
  transition: border-color 0.15s, background-color 0.15s;
}

.caixa-destaque > input {
  top: 15px;
  left: 16px;
}

.caixa-destaque:hover {
  border-color: var(--linha-2);
}

.caixa-destaque:has(> input:checked) {
  border-color: rgba(var(--destaque-rgb), 0.5);
  background: rgba(var(--destaque-rgb), 0.05);
}

/* escolhas em pílula: etiquetas, status, cores e pessoas */
.opcoes-pilula {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.opcao-pilula {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  cursor: pointer;
}

.opcao-pilula > input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.opcao-pilula > input + * {
  opacity: 0.45;
  transition: opacity 0.12s, box-shadow 0.12s;
}

.opcao-pilula:hover > input + * {
  opacity: 0.85;
}

.opcao-pilula > input:checked + * {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--destaque);
}

.opcao-pilula > input:focus-visible + * {
  outline: 3px solid var(--destaque);
  outline-offset: 3px;
}

.opcao-pilula > input:disabled + * {
  cursor: not-allowed;
}

/* pessoa (Atendimento e Produtor): vidro; escolhida, amarela */
.opcao-pilula > input + .pilula-pessoa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 3px 12px 3px 4px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  background: var(--vidro);
  font-size: 14px;
  font-weight: 600;
  opacity: 1;
}

.opcao-pilula:hover > input + .pilula-pessoa {
  border-color: var(--linha-forte);
  opacity: 1;
}

.opcao-pilula > input:checked + .pilula-pessoa {
  border-color: var(--destaque);
  background: rgba(var(--destaque-rgb), 0.14);
  color: var(--destaque);
  box-shadow: none;
}

/* ------------------------------------------- 5. etiquetas, status e avisos */
/* Cada componente de cor lê as variáveis --c-*: a classe da cor só troca as variáveis. */
.etiqueta,
.status,
.coluna,
.avatar,
.cartao-job-prio {
  --c-fundo: var(--n-cinza-fundo);
  --c-tag: var(--n-cinza-tag);
  --c-texto: var(--n-cinza-texto);
  --c-ponto: var(--n-cinza-ponto);
}

.etiqueta-padrao,
.coluna-padrao {
  --c-fundo: var(--vidro);
  --c-tag: var(--n-padrao-tag);
  --c-texto: var(--n-padrao-texto);
  --c-ponto: var(--n-cinza-ponto);
}

.etiqueta-cinza,
.status-cinza,
.coluna-cinza,
.avatar-cinza,
.prio-cinza {
  --c-fundo: var(--n-cinza-fundo);
  --c-tag: var(--n-cinza-tag);
  --c-texto: var(--n-cinza-texto);
  --c-ponto: var(--n-cinza-ponto);
}

.etiqueta-marrom,
.status-marrom,
.coluna-marrom,
.avatar-marrom,
.prio-marrom {
  --c-fundo: var(--n-marrom-fundo);
  --c-tag: var(--n-marrom-tag);
  --c-texto: var(--n-marrom-texto);
  --c-ponto: var(--n-marrom-ponto);
}

.etiqueta-laranja,
.status-laranja,
.coluna-laranja,
.avatar-laranja,
.prio-laranja {
  --c-fundo: var(--n-laranja-fundo);
  --c-tag: var(--n-laranja-tag);
  --c-texto: var(--n-laranja-texto);
  --c-ponto: var(--n-laranja-ponto);
}

.etiqueta-amarelo,
.status-amarelo,
.coluna-amarelo,
.avatar-amarelo,
.prio-amarelo {
  --c-fundo: var(--n-amarelo-fundo);
  --c-tag: var(--n-amarelo-tag);
  --c-texto: var(--n-amarelo-texto);
  --c-ponto: var(--n-amarelo-ponto);
}

.etiqueta-verde,
.status-verde,
.coluna-verde,
.avatar-verde,
.prio-verde {
  --c-fundo: var(--n-verde-fundo);
  --c-tag: var(--n-verde-tag);
  --c-texto: var(--n-verde-texto);
  --c-ponto: var(--n-verde-ponto);
}

.etiqueta-azul,
.status-azul,
.coluna-azul,
.avatar-azul,
.prio-azul {
  --c-fundo: var(--n-azul-fundo);
  --c-tag: var(--n-azul-tag);
  --c-texto: var(--n-azul-texto);
  --c-ponto: var(--n-azul-ponto);
}

.etiqueta-roxo,
.status-roxo,
.coluna-roxo,
.avatar-roxo,
.prio-roxo {
  --c-fundo: var(--n-roxo-fundo);
  --c-tag: var(--n-roxo-tag);
  --c-texto: var(--n-roxo-texto);
  --c-ponto: var(--n-roxo-ponto);
}

.etiqueta-rosa,
.status-rosa,
.coluna-rosa,
.avatar-rosa,
.prio-rosa {
  --c-fundo: var(--n-rosa-fundo);
  --c-tag: var(--n-rosa-tag);
  --c-texto: var(--n-rosa-texto);
  --c-ponto: var(--n-rosa-ponto);
}

.etiqueta-vermelho,
.status-vermelho,
.coluna-vermelho,
.avatar-vermelho,
.prio-vermelho {
  --c-fundo: var(--n-vermelho-fundo);
  --c-tag: var(--n-vermelho-tag);
  --c-texto: var(--n-vermelho-texto);
  --c-ponto: var(--n-vermelho-ponto);
}

/* Etiqueta (as do Notion: cantinho levemente arredondado). */
.etiqueta {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 0 7px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--c-tag);
  color: var(--c-texto);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etiqueta-vazia {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--linha-2);
  color: var(--texto-3);
}

/* Status (pílula com a bolinha, como o Status do Notion). */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 22px;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  background: var(--c-tag);
  color: var(--c-texto);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.status-ponto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-ponto);
}

/* Avatar (iniciais). */
.avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-tag);
  color: var(--c-texto);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}

.pessoa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  font-size: 13.5px;
}

.pessoa-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chips (situação, perfil, cargo). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: var(--raio-pilula);
}

.chip .icone {
  width: 13px;
  height: 13px;
}

.chip-neutro {
  background: var(--vidro-forte);
  color: var(--texto-2);
}

.chip-sucesso {
  background: var(--n-verde-tag);
  color: var(--n-verde-texto);
}

.chip-alerta {
  background: var(--n-amarelo-tag);
  color: var(--n-amarelo-texto);
}

.chip-erro {
  background: var(--n-vermelho-tag);
  color: var(--n-vermelho-texto);
}

.chip-agendada {
  background: var(--n-azul-tag);
  color: var(--n-azul-texto);
}

.chip-vidro,
.chip-perfil,
.chip-cargo {
  border-color: var(--linha-2);
  background: var(--vidro);
  color: var(--texto);
}

.chip-perfil-admin,
.chip-cargo-socio {
  border-color: var(--linha-forte);
  background: var(--destaque);
  color: var(--texto-inverso);
}

.chip-perfil-operador,
.chip-cargo-diretor {
  border-color: var(--linha-forte);
}

.chip-perfil-cliente {
  border-color: var(--n-azul-ponto);
  color: var(--n-azul-texto);
}

/* Avisos (barra colorida na esquerda). */
.aviso {
  --a-barra: var(--info);
  --a-fundo: var(--info-fundo);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-left: 4px solid var(--a-barra);
  background: var(--a-fundo);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.45;
  border-radius: 14px;
}

.aviso > .icone {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--a-barra);
}

.aviso > span {
  min-width: 0;
}

.aviso-sucesso {
  --a-barra: var(--sucesso);
  --a-fundo: var(--sucesso-fundo);
}

.aviso-erro {
  --a-barra: var(--erro);
  --a-fundo: var(--erro-fundo);
}

.aviso-alerta {
  --a-barra: var(--alerta);
  --a-fundo: var(--alerta-fundo);
}

.aviso-info {
  --a-barra: var(--info);
  --a-fundo: var(--info-fundo);
}

.aviso .botao {
  margin-top: 10px;
}

.entrada-primeiro > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Recado que aparece embaixo e some (copiado, salvo, erro de conexão). */
.avisos-flutuantes {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(460px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.aviso-flutuante {
  margin: 0;
  background: var(--destaque);
  color: var(--texto-inverso);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  animation: subir 0.22s ease-out;
}

.aviso-flutuante > .icone {
  color: var(--texto-inverso);
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ------------------------------------------ 6. páginas, cartões e tabelas */
.pagina {
  width: 100%;
  margin: 0 auto;
  padding: 32px var(--lateral) 72px;
}

.pagina-larga {
  max-width: none;
}

.pagina-cadastro {
  max-width: calc(1160px + 2 * var(--lateral));
}

.pagina-media {
  max-width: calc(900px + 2 * var(--lateral));
}

.pagina-estreita {
  max-width: calc(580px + 2 * var(--lateral));
}

.pagina-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 28px;
}

.pagina-topo-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.sobretitulo {
  margin: 0 0 8px;
  color: var(--texto-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
}

.pagina-titulo {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 900;
  letter-spacing: -0.005em;
  line-height: 1;
  overflow-wrap: anywhere;
  font-family: var(--fonte-titulo);
}

.pagina-subtitulo {
  max-width: 76ch;
  margin: 12px 0 0;
  color: var(--texto-2);
  font-size: 15px;
  line-height: 1.5;
}

.secao-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  font-family: var(--fonte-titulo);
}

.secao-titulo .icone {
  width: 18px;
  height: 18px;
}

.secao-titulo small {
  color: var(--texto-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.secao-nota {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--texto-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.secao-nota > .icone {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.texto-apoio {
  margin: 0;
  color: var(--texto-3);
  font-size: 13.5px;
  line-height: 1.5;
}

.texto-apoio .icone {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
}

.texto-suave {
  color: var(--texto-3);
}

.texto-meta {
  color: var(--texto-2);
  font-family: var(--fonte-mono);
  font-size: 13px;
}

.texto-longo {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cartao {
  min-width: 0;
  margin: 0 0 22px;
  padding: 26px;
  border: 1px solid var(--linha);
  background: var(--vidro);
  border-radius: var(--raio-cartao);
}

.formulario-cartao {
  padding: 34px;
}

.formulario-cartao > .pagina-titulo {
  margin-bottom: 4px;
}

.formulario-cartao > .pagina-subtitulo {
  margin-bottom: 26px;
}

.formulario-cartao > .pagina-titulo + .aviso,
.formulario-cartao > .pagina-titulo + .campo,
.formulario-cartao > .pagina-titulo + .grade-campos,
.formulario-cartao > .pagina-titulo + .excluir-alvo {
  margin-top: 24px;
}

.secao-formulario {
  padding: 26px;
}

.secao {
  padding: 26px;
}

.secao-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.secao-cabecalho .secao-titulo {
  margin: 0;
}

.cartao-perigo {
  border-top: 4px solid var(--erro);
}

.formulario-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 18px;
  margin-top: 26px;
}

.formulario-acoes-separadas {
  justify-content: space-between;
}

.formulario-acoes-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.linha-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.form-em-linha {
  display: inline-flex;
  margin: 0;
}

.lista-simples {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-simples li {
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
}

.lista-simples li:last-child {
  border-bottom: 0;
}

.lista-detalhes {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 18px;
  margin: 16px 0;
  font-size: 13.5px;
}

.lista-detalhes dt {
  color: var(--texto-3);
  font-weight: 600;
}

.lista-detalhes dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.bloco-dobravel > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

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

.bloco-dobravel > summary::after,
.job-solicitacao > summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 8px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: var(--svg-abrir) center / contain no-repeat;
  mask: var(--svg-abrir) center / contain no-repeat;
  transition: transform 0.15s;
}

.bloco-dobravel[open] > summary::after,
.job-solicitacao[open] > summary::after {
  transform: rotate(180deg);
}

.bloco-dobravel[open] > summary {
  margin-bottom: 8px;
}

.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 60px 24px;
  border: 1px dashed var(--linha-2);
  background: var(--vidro);
  text-align: center;
  border-radius: var(--raio-cartao);
}

.vazio-icone {
  width: 42px;
  height: 42px;
}

.vazio h1,
.vazio h2 {
  margin: 8px 0 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  font-family: var(--fonte-titulo);
}

.vazio p {
  max-width: 50ch;
  margin: 0;
  color: var(--texto-2);
}

.vazio > .botao {
  margin-top: 14px;
}

.vazio-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  margin-top: 14px;
}

.vazio-compacto {
  padding: 38px 20px;
}

.vazio-busca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 20px;
  color: var(--texto-3);
}

/* tabelas (no celular viram cartões, com o rótulo de cada coluna) */
.tabela-rolagem {
  overflow-x: auto;
  padding: 0;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabela th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--linha);
  background: var(--vidro);
  color: var(--texto);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: var(--fonte-titulo);
}

.tabela td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}

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

.tabela tbody tr:hover td {
  background: var(--vidro-2);
}

.tabela code {
  padding: 3px 7px;
  background: var(--vidro-forte);
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
}

.linha-inativa td {
  color: var(--texto-3);
}

.linha-inativa td .etiqueta,
.linha-inativa td .avatar {
  opacity: 0.6;
}

.acao-coluna {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.tabela .pessoa {
  gap: 12px;
  color: inherit;
  font-size: 14px;
  text-decoration: none;
}

.tabela .pessoa .avatar,
.entrega .avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.tabela .pessoa strong {
  display: block;
  font-weight: 700;
}

.tabela .pessoa small {
  display: block;
  color: var(--texto-3);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

a.pessoa:hover strong {
  text-decoration: underline;
}

.link-linha {
  text-decoration: none;
}

/* erro e excluir */
.erro {
  padding-top: 72px;
  text-align: center;
}

.erro-codigo {
  margin: 0 0 8px;
  font-size: clamp(96px, 16vw, 160px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.85;
  font-family: var(--fonte-titulo);
}

.erro-mensagem {
  margin: 16px auto 0;
  max-width: 50ch;
  color: var(--texto-2);
}

.erro .formulario-acoes {
  justify-content: center;
}

.excluir-alvo {
  margin: 20px 0 10px;
  font-size: 18px;
  font-family: var(--fonte-titulo);
}

.chips-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.sair-alternativo {
  margin-top: 18px;
  text-align: center;
}

/* avisos (página) */
.avisos-topo {
  align-items: flex-start;
}

.avisos-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.avisos-lista,
.avisos-email {
  padding: 22px;
}

.sino-lista-pagina {
  max-height: none;
  border: 1px solid var(--linha);
  border-radius: var(--raio-bloco);
}

.sino-lista-pagina .sino-item:last-child {
  border-bottom: 0;
}

.sino-lista-pagina .menu-vazio {
  padding: 20px 16px;
}

.avisos-anteriores {
  margin-top: 28px;
}

.avisos-email-formulario {
  margin: 14px 0 0;
}

.avisos-email-formulario .formulario-acoes {
  justify-content: flex-start;
  margin-top: 14px;
}

.avisos-problema {
  margin-top: 16px;
}/* ------------------------------- 7. Kanban (Gestão de Tarefas e Orçamentos) */
.cabecalho-quadro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 22px;
}

.cabecalho-quadro-titulo {
  min-width: 0;
}

.cabecalho-quadro-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding-right: 5px;
}

.filtro-servicos {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.pilula {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid var(--linha-2);
  background: var(--vidro);
  color: var(--texto);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.12s, background-color 0.12s;
  border-radius: var(--raio-pilula);
}

.pilula:hover {
  border-color: var(--linha-forte);
}

.pilula.ativa {
  border-color: var(--linha-forte);
  background: var(--destaque);
  color: var(--texto-inverso);
}

.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}

.filtro {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--linha-2);
  background: var(--vidro);
  font-size: 13.5px;
  transition: border-color 0.12s, box-shadow 0.12s;
  border-radius: var(--raio-pilula);
}

.filtro:hover {
  border-color: var(--linha-forte);
}

.filtro:focus-within {
  border-color: var(--linha-forte);
  box-shadow: var(--anel-foco);
}

.filtro > .icone {
  width: 16px;
  height: 16px;
  color: var(--texto-3);
}

.filtro select,
.filtro input {
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background-color: transparent;
}

.filtro select {
  max-width: 210px;
  padding-right: 22px;
}

.filtro-busca {
  flex: 1 1 230px;
  max-width: 360px;
}

.filtro-busca input {
  flex: 1;
}

html.tarefas-js .botao-filtrar {
  display: none;
}

.link-limpar {
  font-size: 13px;
}

.segmentado {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-pilula);
}

.segmento {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  color: var(--texto);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--raio-pilula);
}

.segmento + .segmento {
  border-left: 1px solid var(--linha-2);
}

.segmento .icone {
  width: 15px;
  height: 15px;
}

.segmento:hover {
  background: var(--vidro-forte);
}

.segmento.ativo {
  background: var(--destaque);
  color: var(--texto-inverso);
}

/* o quadro: as colunas lado a lado, rolando de lado (e o cabeçalho da coluna fica no alto).
   Em grade: todas as colunas vão até o fim da coluna mais comprida (o fundo acompanha todos
   os cartões ao rolar), e nunca ficam mais curtas que o quadro. */
.quadro {
  display: grid;
  grid-auto-columns: 286px;
  grid-auto-flow: column;
  grid-auto-rows: minmax(max-content, auto);
  align-items: stretch;
  gap: 10px;
  margin: 0 calc(-1 * var(--lateral));
  padding: 0 var(--lateral) 18px;
  overflow: auto;
  scrollbar-color: rgba(249, 248, 246, 0.28) transparent;
  scrollbar-width: thin;
}

.coluna {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 220px;
  background: var(--c-fundo);
  transition: box-shadow 0.12s;
  border-radius: var(--raio-bloco);
}

.quadro-servicos {
  grid-auto-columns: 300px;
}

.coluna-topo {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 8px 8px 10px;
  background: var(--c-fundo);
}

.coluna-titulo {
  display: flex;
  min-width: 0;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: var(--fonte-titulo);
}

.coluna-titulo .status,
.coluna-titulo .etiqueta {
  font-weight: 600;
}

.coluna-contador {
  color: var(--texto-3);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.coluna-nova {
  width: 28px;
  height: 28px;
  margin-left: auto;
  color: var(--texto-3);
}

.coluna-nova:hover {
  background: var(--vidro-forte);
  color: var(--texto);
}

.coluna-nova .icone {
  width: 16px;
  height: 16px;
}

/* flex-basis auto: a altura dos cartões entra na altura da coluna (a grade usa para esticar) */
.coluna-cartoes {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 8px;
  padding: 2px 8px 12px;
}

.coluna-vazia {
  margin: 0;
  padding: 10px 4px;
  color: var(--texto-3);
  font-size: 13px;
}

.coluna-mais {
  margin: 4px 0 0;
  padding: 0 4px;
  color: var(--texto-3);
  font-size: 12px;
  line-height: 1.4;
}

.coluna.alvo {
  box-shadow: inset 0 0 0 2px var(--destaque);
}

/* o cartão do JOB */
.cartao-job {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 12px 9px;
  background: var(--vidro);
  box-shadow: var(--sombra-cartao);
  font-size: 13px;
  transition: box-shadow 0.12s, opacity 0.12s, transform 0.12s;
  border-radius: 14px;
}

.cartao-job:hover {
  box-shadow: 0 0 0 1px var(--linha-forte), 0 10px 26px -10px rgba(0, 0, 0, 0.7);
}

.cartao-job[draggable="true"] {
  cursor: grab;
}

.cartao-job.arrastando {
  opacity: 0.35;
}

.cartao-job.salvando {
  cursor: progress;
  opacity: 0.6;
}

.cartao-job.movido {
  animation: chegar 0.5s ease-out;
}

@keyframes chegar {
  from {
    box-shadow: 0 0 0 2px var(--destaque);
  }
}

.cartao-job.atrasada {
  box-shadow: inset 3px 0 0 var(--erro), var(--sombra-cartao);
}

.cartao-job.atrasada:hover {
  box-shadow: inset 3px 0 0 var(--erro), 0 0 0 1px var(--linha-forte), 0 10px 26px -10px rgba(0, 0, 0, 0.7);
}

.cartao-job-link {
  color: var(--texto);
  text-decoration: none;
}

.cartao-job-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cartao-job-link:focus-visible {
  outline: none;
}

.cartao-job-link:focus-visible::after {
  outline: 3px solid var(--destaque);
  outline-offset: 2px;
}

.cartao-job-titulo {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  font-family: var(--fonte-titulo);
}

.cartao-job-linha,
.cartao-job-pessoas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  margin: 0;
}

.cartao-job-pessoas {
  gap: 4px 10px;
}

.cartao-job-pessoas .pessoa {
  font-size: 12.5px;
}

.cartao-job-servicos .etiqueta {
  font-size: 11.5px;
}

.cartao-job-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--texto-2);
  font-size: 12.5px;
}

.cartao-job-data .icone {
  width: 14px;
  height: 14px;
  color: var(--texto-3);
}

.cartao-job-data b {
  margin-left: 2px;
  color: var(--erro);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
}

.atrasada .cartao-job-data {
  color: var(--erro);
}

.cartao-job-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 1px;
  color: var(--texto-3);
  font-size: 11.5px;
}

.cartao-job-id {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.cartao-job-icones {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.cartao-job-icones > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.cartao-job-icones .icone {
  width: 13px;
  height: 13px;
}

.cartao-job-prio {
  padding: 1px 6px 1px 4px;
  border-radius: 3px;
  background: var(--c-tag);
  color: var(--c-texto);
  font-weight: 600;
}

.cartao-job-prio .icone {
  width: 11px;
  height: 11px;
}

/* --------------------------------------------------------- 8. o JOB aberto */
.pagina-job-conteudo {
  max-width: calc(1320px + 2 * var(--lateral));
  padding-bottom: 0;
}

/* O orçamento da tarefa ocupa a largura toda, como a tela de Orçamentos (1.16.0: pedido dela,
   "preencha as laterais"): o conteúdo vai de uma ponta à outra, alinhado com o topo. */
.pagina-job-conteudo.pagina-larga {
  max-width: none;
}

.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  color: var(--texto-3);
  font-size: 12px;
  font-weight: 700;
}

.trilha a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--texto);
  text-decoration: none;
}

.trilha a:hover {
  text-decoration: underline;
}

.trilha .icone {
  width: 15px;
  height: 15px;
}

.job-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 40px;
}

.job-grade-nova {
  grid-template-columns: minmax(0, 940px);
}

.job-formulario {
  min-width: 0;
  margin: 0;
}

.job-cabeca {
  margin-bottom: 14px;
}

.job-ids {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.job-ids .sobretitulo {
  margin: 0;
}

.job-id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--vidro-forte);
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--raio-pilula);
}

.job-id .icone {
  width: 12px;
  height: 12px;
}

.job-titulo {
  display: block;
}

.job-titulo textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 2px 0 8px;
  overflow: hidden;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
  resize: none;
  field-sizing: content;
  transition: border-color 0.12s;
  font-family: var(--fonte-titulo);
}

.job-titulo textarea:hover {
  border-bottom-color: var(--linha);
}

.job-titulo textarea:focus {
  border-bottom-color: var(--destaque);
}

.job-titulo textarea::placeholder {
  color: var(--texto-4);
}

/* as propriedades (rótulo à esquerda, valor à direita, como no Notion) */
.propriedades {
  --rotulo-prop: 214px;
  margin: 0;
}

.prop {
  display: flow-root;
  min-width: 0;
  margin: 0;
  padding: 2px 0;
  border: 0;
}

.prop-rotulo {
  float: left;
  display: flex;
  align-items: center;
  gap: 9px;
  width: var(--rotulo-prop);
  min-height: 38px;
  margin: 0;
  padding: 0 10px 0 0;
  color: var(--texto-3);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.prop-rotulo .icone {
  width: 16px;
  height: 16px;
}

.prop-valor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 38px;
  margin: 0 0 0 var(--rotulo-prop);
  font-size: 14px;
}

.prop-valor > .campo-entrada,
.prop-valor > .opcoes-pilula,
.prop-valor > .envio-arquivos,
.prop-valor > .lista-arquivos,
.prop-valor > .lista-links,
.prop-valor > .datas-job {
  align-self: stretch;
}

.prop-valor > span:not(.campo-entrada):not(.texto-apoio),
.prop-meta .prop-valor > span {
  padding: 0 10px;
}

.prop-valor > .opcoes-pilula {
  padding: 6px 0;
}

.prop-valor .campo-ajuda {
  padding: 0 10px;
}

.prop-valor > .campo-erro {
  padding: 0 10px;
}

/* No JOB os campos parecem texto (como no Notion) e viram campo ao passar o mouse. */
.propriedades .campo-entrada {
  min-height: 38px;
  border-color: transparent;
  background: transparent;
}

.propriedades .campo-entrada:hover {
  border-color: transparent;
  background: var(--vidro);
}

.propriedades .campo-entrada:focus-within {
  border-color: var(--linha-forte);
  background: var(--vidro);
  box-shadow: none;
}

.prop:has(.campo-erro) .campo-entrada {
  border-color: var(--erro);
}

.prop-meta .prop-valor {
  color: var(--texto-2);
}

.campo-link a.botao-icone {
  width: 30px;
  height: 30px;
  margin-right: -6px;
}

.datas-job {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.datas-job .campo-entrada {
  flex: 0 1 190px;
}

.datas-seta {
  color: var(--texto-3);
}

/* arquivos */
.lista-arquivos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.arquivo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--linha);
  background: var(--vidro);
  border-radius: 14px;
}

.arquivo:hover {
  border-color: var(--linha-2);
}

.arquivo-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--vidro-forte);
  border-radius: 10px;
}

.arquivo-icone .icone {
  width: 17px;
  height: 17px;
}

.arquivo-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.arquivo-nome {
  overflow: hidden;
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arquivo-nome:hover {
  text-decoration: underline;
}

.arquivo-texto small {
  overflow: hidden;
  color: var(--texto-3);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arquivo-acoes {
  display: flex;
  flex: none;
  gap: 2px;
}

/* escolher arquivo: o campo cobre o bloco todo (dá para soltar o arquivo em cima) */
.envio-arquivos {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  cursor: pointer;
}

.envio-arquivos > input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.envio-arquivos:hover .botao {
  background: var(--vidro-forte);
}

.envio-arquivos:focus-within .botao {
  outline: 3px solid var(--destaque);
  outline-offset: 2px;
}

.envio-arquivos .texto-apoio {
  min-width: 0;
  overflow-wrap: anywhere;
}

.envio-arquivos .texto-apoio.campo-erro {
  color: var(--erro);
}

.envio-arquivos.solto-em-cima .botao,
.envio-arquivos-grande.solto-em-cima {
  border-color: var(--linha-forte);
  background: var(--vidro-forte);
}

.envio-arquivos-grande {
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  padding: 26px 20px;
  border: 2px dashed var(--linha-2);
  background: var(--vidro);
  text-align: center;
  transition: border-color 0.12s, background-color 0.12s;
  border-radius: var(--raio-bloco);
}

.envio-arquivos-grande:hover {
  border-color: var(--linha-forte);
}

.lista-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0 10px;
  list-style: none;
  font-size: 13.5px;
}

/* a parte da solicitação do cliente e a descrição */
.job-solicitacao {
  margin-top: 22px;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  border-radius: 0;
}

.job-solicitacao > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 15px 0;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

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

.job-solicitacao > summary .icone {
  width: 17px;
  height: 17px;
}

.job-solicitacao > summary small {
  color: var(--texto-3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.job-solicitacao[open] {
  padding-bottom: 12px;
}

.job-solicitacao .caixa-selecao {
  padding: 6px 10px;
}

.job-descricao {
  margin-top: 28px;
}

.job-descricao .secao-titulo {
  margin-bottom: 12px;
}

.job-descricao textarea {
  min-height: 170px;
}

.job-descricao .campo-ajuda {
  display: block;
  margin-top: 8px;
}

/* a barra de salvar fica presa embaixo da tela */
.barra-salvar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 30px 0 0;
  padding: 14px 0 18px;
  border-top: 1px solid var(--linha);
  background: rgba(28, 28, 28, 0.94);
  border-radius: var(--raio-bloco) var(--raio-bloco) 0 0;
}

.barra-salvar > .botao-vidro {
  margin-left: auto;
}

.barra-salvar > .botao-primario {
  margin-right: 5px;
}

.barra-salvar-aviso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--alerta);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
}

.barra-salvar-aviso .icone {
  width: 15px;
  height: 15px;
}

.barra-salvar.alterado {
  border-top-color: var(--alerta);
}

/* comentários (só a equipe vê) */
.job-lateral {
  position: sticky;
  top: 20px;
  align-self: start;
  min-width: 0;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.painel {
  padding: 20px;
  border: 1px solid var(--linha);
  background: var(--vidro);
  border-radius: var(--raio-cartao);
}

.painel-comentarios {
  margin-bottom: 24px;
}

.comentarios {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.comentario {
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}

.comentario:first-child {
  padding-top: 0;
}

.comentario-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.comentario-topo .avatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.comentario-topo strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comentario-topo time {
  flex: none;
  color: var(--texto-3);
  font-size: 12px;
}

.comentario-excluir {
  width: 28px;
  height: 28px;
  margin-left: auto;
}

.comentario-excluir .icone {
  width: 15px;
  height: 15px;
}

.comentario-texto {
  margin: 6px 0 0 34px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mencao {
  padding: 0 3px;
  background: var(--n-azul-tag);
  color: var(--n-azul-texto);
  font-weight: 600;
}

.formulario-comentario {
  margin: 0;
}

.formulario-comentario textarea {
  min-height: 84px;
  font-size: 14px;
}

.formulario-comentario-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

/* a lista do @ (o tarefas.js cria) */
.lista-mencoes {
  position: absolute;
  z-index: 300;
  margin: 0;
  padding: 4px 0;
  border: 1px solid var(--linha-2);
  background: var(--vidro);
  box-shadow: var(--sombra-menu);
  list-style: none;
  border-radius: 14px;
}

.lista-mencoes-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 10px;
}

.lista-mencoes-item.ativa,
.lista-mencoes-item:hover {
  background: var(--vidro-forte);
}

.lista-mencoes-item .avatar {
  width: 24px;
  height: 24px;
  font-size: 9.5px;
}

/* ---------------------------------------------- 9. solicitações do cliente */
.solicitacao {
  padding: 34px;
}

.solicitacao-titulo {
  margin: 4px 0 22px;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-transform: none;
  font-family: var(--fonte-titulo);
}

.etapas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  color: var(--texto-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
}

.etapa {
  display: inline-flex;
  align-items: center;
}

.etapa + .etapa::before {
  content: "";
  width: 14px;
  height: 1px;
  margin: 0 8px;
  background: var(--linha-2);
}

.etapa-atual .status {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.propriedades-leitura {
  margin: 0 0 8px;
  padding: 10px 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.propriedades-leitura .prop-valor {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 12px;
  padding: 0;
}

.propriedades-leitura .prop-valor > span {
  padding: 0;
}

.solicitacao-detalhes,
.solicitacao-arquivos {
  margin-top: 28px;
}

.solicitacao-arquivos .lista-arquivos {
  margin-bottom: 14px;
}

.formulario-envio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0;
}

.formulario-envio .envio-arquivos {
  flex: 1 1 320px;
}

.formulario-solicitacao .grade-campos {
  margin-top: 4px;
}/* ------------------------------------- 10. entrada (login e primeiro acesso) */
.pagina-entrada {
  background: var(--fundo);
}

.entrada {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.com-faixa-demo .entrada {
  min-height: calc(100dvh - var(--alto-faixa));
}

/* A marca: o brilho amarelo do Portal REF+ atrás do "VIV". */
.entrada-marca {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 72px);
  overflow: hidden;
  border-right: 1px solid var(--linha);
  background:
    radial-gradient(circle at 18% 78%, rgba(var(--destaque-rgb), 0.13) 0, transparent 42%),
    radial-gradient(circle at 92% 6%, rgba(129, 128, 125, 0.22) 0, transparent 40%),
    #161616;
}

.entrada-marca > * {
  position: relative;
}

.entrada-logo {
  width: clamp(92px, 9vw, 128px);
  height: auto;
}

.entrada-titulo {
  margin-top: auto;
}

.entrada-sobre {
  margin: 0 0 4px 4px;
  color: var(--texto-2);
  font-family: var(--fonte-titulo);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}

.entrada-nome {
  margin: 0;
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: clamp(120px, 16vw, 250px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.86;
}

.entrada-frase {
  max-width: 26ch;
  margin: 0;
  color: var(--texto-2);
  font-family: var(--fonte-titulo);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.entrada-rodape {
  margin: 0;
  color: var(--texto-3);
  font-size: 13px;
}

.entrada-formulario {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 48px 28px;
}

.formulario-entrada {
  width: 100%;
  max-width: 420px;
  margin: 0;
}

.formulario-entrada .sobretitulo {
  margin-bottom: 10px;
}

.entrada-h1 {
  margin: 0 0 8px;
  font-family: var(--fonte-titulo);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.entrada-texto {
  margin: 0 0 26px;
  color: var(--texto-2);
}

.entrada-opcoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 28px;
}

.entrada-esqueci > summary {
  font-size: 14px;
}

.entrada-esqueci .menu-painel {
  width: 300px;
}

/* ------------------- 11. cadastros (clientes, listas, usuários e equipe) */
/* listas dos campos */
.cartoes-listas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.cartao-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.cartao-lista:hover {
  border-color: var(--linha-forte);
  box-shadow: 0 0 0 4px rgba(var(--destaque-rgb), 0.12);
}

.cartao-lista-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cartao-lista-topo strong {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.03em;
  font-family: var(--fonte-titulo);
}

.cartao-lista > small {
  color: var(--texto-3);
  font-size: 13px;
  line-height: 1.45;
}

.cartao-lista-exemplo {
  color: var(--texto-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.cartao-lista .link {
  margin-top: auto;
}

.lista-opcoes {
  margin: 22px 0 12px;
  padding: 0;
  border-top: 1px solid var(--linha);
  list-style: none;
}

.opcao-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
}

.opcao-linha .campo-entrada {
  flex: 1 1 240px;
}

.opcao-ordem {
  display: inline-flex;
  gap: 2px;
}

.opcao-ordem .botao-icone {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.opcao-ordem .botao-icone .icone {
  width: 16px;
  height: 16px;
}

.opcao-ordem .botao-icone:disabled {
  opacity: 0.3;
  cursor: default;
}

.opcao-uso {
  min-width: 64px;
  font-size: 12.5px;
  text-align: right;
}

.opcao-erro {
  flex-basis: 100%;
}

.opcao-linha.linha-inativa .campo-entrada input {
  color: var(--texto-3);
}

.opcao-linha.movida {
  animation: piscar 0.6s ease-out;
}

@keyframes piscar {
  from {
    background: var(--vidro-forte);
  }
}

/* usuários e acessos */
.resumo-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.resumo-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 124px;
  padding: 12px 16px;
  border: 1px solid var(--linha-2);
  background: var(--vidro);
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.12s;
  border-radius: var(--raio-campo);
}

.resumo-item b {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  font-family: var(--fonte-titulo);
}

.resumo-item span {
  color: var(--texto-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
}

.resumo-item:hover {
  border-color: var(--linha-forte);
}

.resumo-item.ativo {
  border-color: var(--linha-forte);
  background: var(--destaque);
  color: var(--texto-inverso);
}

.resumo-item.ativo span {
  color: rgba(28, 28, 28, 0.7);
}

.barra-busca {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.barra-busca .busca {
  flex: 1 1 260px;
  min-height: 46px;
}

.busca input {
  padding: 10px 0;
}

select.seletor {
  min-height: 46px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 0;
  background-color: var(--texto-inverso);
  background-position: right 12px center;
}

.cadeia-perfis {
  margin-top: 8px;
}

.cadeia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.cadeia-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-campo);
}

.cadeia-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--destaque);
  color: var(--texto-inverso);
  border-radius: 10px;
}

.cadeia-icone .icone {
  width: 17px;
  height: 17px;
}

.cadeia-item strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-family: var(--fonte-titulo);
}

.cadeia-item small {
  display: block;
  margin-top: 2px;
  color: var(--texto-3);
  font-size: 12.5px;
  line-height: 1.45;
}

.formulario-usuario {
  margin: 0;
}

.opcoes-tipo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.opcao-tipo {
  position: relative;
  display: flex;
  cursor: pointer;
}

.opcao-tipo > input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.opcao-tipo > span {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--linha-2);
  background: var(--vidro);
  transition: border-color 0.12s, box-shadow 0.12s;
  border-radius: var(--raio-bloco);
}

.opcao-tipo:hover > span {
  border-color: var(--linha-forte);
}

.opcao-tipo > input:checked + span {
  border-color: var(--linha-forte);
  box-shadow: 0 0 0 1px var(--destaque), 0 0 0 5px rgba(var(--destaque-rgb), 0.12);
}

.opcao-tipo > input:focus-visible + span {
  outline: 3px solid var(--destaque);
  outline-offset: 3px;
}

.opcao-tipo > input:disabled + span {
  cursor: not-allowed;
  opacity: 0.45;
}

.opcao-papel-icone {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  background: var(--vidro-forte);
  font-style: normal;
  border-radius: 10px;
}

.opcao-tipo > input:checked + span .opcao-papel-icone {
  background: var(--destaque);
  color: var(--texto-inverso);
}

.opcao-tipo b {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-family: var(--fonte-titulo);
}

.opcao-tipo small {
  color: var(--texto-3);
  font-size: 12.5px;
  line-height: 1.45;
}

.grade-permissoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.grupo-permissoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grupo-permissoes-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
}

.grupo-permissoes-titulo .icone {
  width: 16px;
  height: 16px;
}

.permissao.sem-base {
  opacity: 0.5;
}

.selo-excecao {
  margin-left: 8px;
  padding: 1px 6px;
  background: var(--n-amarelo-tag);
  color: var(--n-amarelo-texto);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
  font-family: var(--fonte-titulo);
  border-radius: var(--raio-pilula);
}

.usuario-lugar-equipe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.usuario-lugar-equipe .icone {
  width: 16px;
  height: 16px;
  color: var(--texto-3);
}

/* senha temporária */
.entregas {
  display: grid;
  gap: 16px;
}

.entrega {
  margin: 0;
}

.entrega-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.entrega-nome {
  flex: 1;
  min-width: 0;
}

.entrega-nome strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--fonte-titulo);
}

.entrega-nome small {
  display: block;
  color: var(--texto-3);
}

.entrega-dados {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}

.entrega-dados div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.entrega-dados dt {
  color: var(--texto-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
}

.entrega-dados dd {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.entrega-dados code {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  background: var(--vidro-forte);
  font-size: 13.5px;
  overflow-wrap: anywhere;
  border-radius: 10px;
}

.entrega-dados .senha-temporaria {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* equipe: o organograma */
.pagina-equipe-conteudo {
  max-width: calc(1200px + 2 * var(--lateral));
}

.equipe-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin: 0 0 20px;
}

.equipe-busca {
  flex: 1 1 280px;
  max-width: 420px;
  min-height: 46px;
}

.equipe-busca input {
  flex: 1;
  min-width: 0;
}

.equipe-contagem {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  color: var(--texto-3);
  font-size: 13.5px;
}

.equipe-contagem b {
  color: var(--texto);
  font-weight: 800;
}

.equipe-areas {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.equipe-bloco {
  margin: 0 0 18px;
  padding: 20px 20px 10px;
}

.equipe-areas .equipe-bloco {
  margin-bottom: 0;
}

.equipe-bloco-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 6px;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--linha);
}

.equipe-bloco-topo h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-family: var(--fonte-titulo);
}

.equipe-bloco-topo h2 small {
  color: var(--texto-3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.equipe-bloco-topo > small {
  color: var(--texto-3);
  font-size: 13px;
}

.equipe-bloco-mais,
.equipe-bloco-acao {
  align-self: center;
  margin-left: auto;
}

.equipe-bloco-socios .equipe-bloco-topo {
  border-bottom-color: rgba(var(--destaque-rgb), 0.45);
}

.equipe-arvore,
.equipe-ramo {
  margin: 0;
  padding: 0;
  list-style: none;
}

.equipe-ramo {
  position: relative;
  margin-left: 19px;
  padding-left: 16px;
  border-left: 1px solid var(--linha-2);
}

.equipe-ramo > .equipe-no > .equipe-pessoa::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -16px;
  width: 12px;
  border-top: 1px solid var(--linha-2);
}

.equipe-pessoa {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 6px;
  border-radius: 14px;
}

.equipe-pessoa:hover {
  background: var(--vidro);
}

.equipe-pessoa-fora {
  display: none;
}

.equipe-voce {
  background: var(--vidro-forte);
}

.avatar-mini {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vidro-forte);
  color: var(--texto);
  font-size: 13px;
  font-weight: 800;
}

.equipe-avatar-socio {
  background: var(--destaque);
  color: var(--texto-inverso);
}

.equipe-avatar-diretor {
  box-shadow: inset 0 0 0 2px var(--destaque);
}

.equipe-avatar-gerente {
  box-shadow: inset 0 0 0 1px var(--linha-forte);
}

.equipe-pessoa-nome {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  min-width: 0;
}

.equipe-pessoa-nome strong {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.equipe-pessoa-nome small {
  color: var(--texto-3);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.equipe-funcao {
  color: var(--texto-2);
  font-size: 13.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.equipe-voce-selo {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  background: var(--destaque);
  color: var(--texto-inverso);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
  font-family: var(--fonte-titulo);
  border-radius: var(--raio-pilula);
}

.equipe-pessoa-chips {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.equipe-chefe {
  color: var(--texto-3);
  font-size: 13px;
}

.equipe-pessoa-acoes {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 136px;
}

.equipe-form-senha {
  margin: 0;
}

.equipe-trava {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 200px;
  color: var(--texto-3);
  font-size: 12.5px;
  line-height: 1.25;
  cursor: help;
}

.equipe-trava .icone {
  width: 15px;
  height: 15px;
}

.equipe-vazio {
  margin: 12px 4px;
  color: var(--texto-3);
}

.equipe-regras {
  margin-top: 8px;
}

.equipe-regras-lista {
  margin: 10px 0 4px;
  padding-left: 20px;
  color: var(--texto-2);
  line-height: 1.65;
}

.equipe-regras-lista .icone {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
}

.equipe-lugar-topo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.equipe-lugar-topo .avatar-mini {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

/* organizar: uma linha por pessoa */
.tabela-equipe {
  min-width: 900px;
}

.tabela-equipe td {
  vertical-align: top;
}

.tabela-equipe .pessoa {
  gap: 10px;
}

.tabela-equipe .pessoa strong {
  display: block;
}

.tabela-equipe .pessoa small {
  display: block;
  color: var(--texto-3);
  font-size: 12.5px;
}

.tabela-equipe select {
  width: 100%;
}

.tabela-equipe .linha-com-erro td {
  background: var(--erro-fundo);
}

.tabela-equipe .linha-com-aviso td {
  background: var(--alerta-fundo);
}

.equipe-sem-chefe {
  display: block;
  margin-top: 6px;
  color: var(--alerta);
  font-size: 12.5px;
  line-height: 1.35;
}

.tabela-equipe td small.campo-erro {
  display: block;
  margin-top: 6px;
}

.equipe-linha-travada {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--texto-3);
  font-size: 12.5px;
}

.equipe-linha-travada .icone {
  width: 14px;
  height: 14px;
}

/* departamentos */
.equipe-areas-lista {
  margin-bottom: 20px;
  padding: 6px 20px;
}

.equipe-areas-lista ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.equipe-area-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}

.equipe-area-linha:last-child {
  border-bottom: 0;
}

.equipe-area-linha form {
  margin: 0;
}

.equipe-area-escondida .equipe-area-renomear {
  opacity: 0.6;
}

.equipe-area-renomear {
  display: flex;
  flex: 1 1 300px;
  align-items: center;
  gap: 8px;
}

.equipe-area-renomear .campo-entrada {
  flex: 1;
}

.equipe-area-info {
  min-width: 86px;
  color: var(--texto-3);
  font-size: 13.5px;
}

.equipe-area-nova-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.equipe-area-nova-linha .campo-entrada {
  flex: 1 1 260px;
}

/* cargos */
.equipe-cargos-texto textarea {
  min-height: 420px;
  font-size: 14.5px;
  line-height: 1.6;
}

.equipe-cargos-fora {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.equipe-cargos-uso {
  margin: 0;
  padding: 0;
  columns: 2 240px;
  column-gap: 28px;
  font-size: 14px;
  list-style: none;
}

.equipe-cargos-uso li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--linha);
  break-inside: avoid;
}

.equipe-cargos-uso b {
  color: var(--texto-3);
  font-weight: 700;
}

/* ------------------------------------------- ajustes do tema Space REF+ */
/* Títulos em Syne (como no Portal REF+). */
.pagina-titulo {
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.secao-titulo {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.secao-titulo small {
  font-family: var(--fonte);
}

.vazio h1,
.vazio h2,
.equipe-bloco-topo h2,
.cartao-lista-topo strong,
.solicitacao-titulo {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.erro-codigo {
  font-weight: 800;
  color: var(--destaque);
}

.sobretitulo {
  font-size: 11px;
  letter-spacing: 0.06em;
}

.tabela th {
  color: var(--texto-3);
  letter-spacing: 0.06em;
}

/* cartões de vidro */
.cartao,
.painel {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}

/* recado flutuante: escuro, com a barra da cor do recado */
.aviso-flutuante {
  border: 1px solid var(--linha);
  border-left: 4px solid var(--a-barra);
  background: var(--fundo-elevado);
  color: var(--texto);
}

.aviso-flutuante > .icone {
  color: var(--a-barra);
}

/* Kanban: o cabeçalho da coluna fica opaco (o tom da coluna sobre o fundo) */
.coluna-topo {
  border-radius: var(--raio-bloco) var(--raio-bloco) 0 0;
  background: linear-gradient(var(--c-fundo), var(--c-fundo)), var(--fundo);
}

.coluna {
  border: 1px solid rgba(249, 248, 246, 0.05);
}

.cartao-job {
  border: 1px solid var(--linha);
  background: var(--fundo-elevado);
}

.cartao-job:hover {
  border-color: var(--linha-forte);
}

.cartao-job-link:focus-visible::after {
  border-radius: 14px;
  outline: 3px solid var(--destaque);
}

.job-titulo textarea {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lista-mencoes {
  background: var(--fundo-elevado);
}

.job-id {
  border: 1px solid var(--linha);
}

.trilha {
  font-size: 13px;
}

.trilha a:hover {
  color: var(--destaque);
  text-decoration: none;
}

.barra-salvar {
  padding-right: 6px;
  padding-left: 6px;
}

.filtro,
.pilula,
.segmentado {
  border-color: var(--linha);
}

.pilula.ativa,
.segmento.ativo {
  font-weight: 700;
}

.segmentado {
  overflow: hidden;
  background: var(--vidro);
}

.segmento + .segmento {
  border-left-color: var(--linha);
}

.opcao-pilula > input:checked + .etiqueta,
.opcao-pilula > input:checked + .status {
  box-shadow: 0 0 0 2px var(--destaque);
}

.avatar-mini {
  font-family: var(--fonte-titulo);
}

.equipe-ramo,
.equipe-ramo > .equipe-no > .equipe-pessoa::before {
  border-color: var(--linha-2);
}

.cartao-lista:hover {
  border-color: rgba(var(--destaque-rgb), 0.55);
}

.envio-arquivos-grande:hover,
.envio-arquivos-grande.solto-em-cima {
  border-color: rgba(var(--destaque-rgb), 0.6);
}


/* avatares que o .avatar genérico (22 px) não pode encolher */
.avatar.avatar-conta {
  width: 44px;
  height: 44px;
  background: var(--destaque);
  color: var(--texto-inverso);
  font-size: 14px;
}

.avatar.sino-avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

/* o nome do JOB no cartão em Urbanist (a Syne é larga para a coluna) */
.cartao-job-titulo {
  font-family: var(--fonte);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}


/* ------------------------------------------------- a logo da VIV Experience */
.marca-divisor {
  width: 1px;
  height: 30px;
  background: var(--linha-2);
}

.marca-nome {
  color: var(--texto-2);
  font-size: 19px;
  font-weight: 500;
}

.marca-viv {
  width: auto;
  height: 46px;
}

.entrada-nome {
  font-size: 0 !important;
  line-height: 0 !important;
}

.entrada-viv {
  display: block;
  width: clamp(260px, 30vw, 460px);
  height: auto;
}

/* --------------------------------------------------------------- orçamentos */
.num {
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  white-space: nowrap;
}

.valor-negativo,
.valor-negativo b {
  color: var(--erro) !important;
}

.resumo-orcamentos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.resumo-orc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-bloco);
  background: var(--vidro);
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.resumo-orc:hover {
  border-color: var(--linha-forte);
}

.resumo-orc.ativo {
  border-color: rgba(var(--destaque-rgb), 0.6);
  background: rgba(var(--destaque-rgb), 0.07);
}

.resumo-orc-rotulo {
  color: var(--texto-2);
  font-family: var(--fonte-titulo);
  font-size: 13px;
  font-weight: 600;
}

.resumo-orc-valor {
  white-space: nowrap;
  font-family: var(--fonte-titulo);
  font-size: clamp(17px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.resumo-orc small {
  color: var(--texto-3);
  font-size: 12.5px;
}

.tabela-orc-lista td small.texto-suave {
  margin-left: 4px;
  font-size: 12px;
}

.tabela tfoot th {
  background: transparent;
}

.tabela tfoot th,
.tabela tfoot td {
  padding: 14px 16px;
  border-top: 1px solid var(--linha-2);
  font-weight: 700;
  text-align: left;
}

.orc-job {
  display: flex;
  flex-direction: column;
  color: var(--texto);
  text-decoration: none;
}

.orc-job strong {
  font-weight: 700;
}

.orc-job:hover strong {
  color: var(--destaque);
}

.orc-job small {
  color: var(--texto-3);
  font-size: 12.5px;
}

.coluna-fatia {
  width: 180px;
  white-space: nowrap;
}

.coluna-fatia small {
  margin-left: 8px;
  color: var(--texto-3);
  font-size: 12px;
}

.fatia {
  display: inline-block;
  width: 110px;
  height: 8px;
  overflow: hidden;
  border-radius: var(--raio-pilula);
  background: var(--vidro-forte);
  vertical-align: middle;
}

.fatia i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--destaque);
}

/* o orçamento de um JOB */
.orc-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 20px;
}

.orc-cabeca-texto {
  min-width: 0;
}

.orc-titulo {
  margin-top: 4px;
}

.orc-totais {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.orc-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-bloco);
  background: var(--vidro);
}

.orc-total small {
  flex-basis: 100%;
  color: var(--texto-2);
  font-family: var(--fonte-titulo);
  font-size: 13px;
  font-weight: 600;
}

.orc-total b {
  font-family: var(--fonte-titulo);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.orc-total span {
  color: var(--texto-2);
  font-weight: 700;
}

.orc-total-venda b {
  color: var(--destaque);
}

.orc-cartao {
  margin-bottom: 12px;
}

.tabela-orcamento {
  min-width: 920px;
}

.tabela-orcamento th,
.tabela-orcamento td {
  padding: 6px 8px;
}

.tabela-orcamento thead th {
  padding-top: 12px;
  padding-bottom: 12px;
}

.tabela-orcamento .campo-entrada-p {
  min-height: 38px;
  padding: 0 10px;
}

.tabela-orcamento .campo-entrada-p input,
.tabela-orcamento .campo-entrada-p select {
  padding: 8px 0;
  font-size: 14.5px;
}

.tabela-orcamento td.num .campo-entrada input {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* A categoria (1.15.1): a coluna fica do tamanho do nome mais comprido das linhas (até 24em;
   mais que isso quebra a linha), e o nome aparece inteiro, como está escrito na lista. O
   texto fica embaixo e o select, por cima e invisível, abre a lista; o orcamento.js troca o
   texto quando a escolha muda. */
.tabela-orcamento .orc-celula-categoria {
  width: 1%;
}

.campo-escolha-texto {
  flex: 1 1 auto;
  width: max-content;
  min-width: 0;
  max-width: 24em;
  padding: 8px 24px 8px 0;
  background: var(--seta-campo) right 2px center / 11px 8px no-repeat;
  font-size: 14.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.campo-escolha select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.tabela-orcamento td:nth-child(3) {
  width: 84px;
}

.tabela-orcamento td:nth-child(4),
.tabela-orcamento td:nth-child(5) {
  width: 132px;
}

.tabela-orcamento .orc-calc {
  color: var(--texto-2);
  font-size: 14px;
}

.tabela-orcamento tbody tr:hover td {
  background: transparent;
}

/* O título de cada categoria, como está escrito na lista (1.15.1: sem as maiúsculas do
   cabeçalho da tabela; no celular quebra a linha em vez de passar da caixa). */
.orc-grupo th {
  padding: 16px 10px 6px !important;
  border-bottom: 0;
  color: var(--destaque);
  font-family: var(--fonte-titulo);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
}

.orc-grupo-novas th {
  color: var(--texto-3);
}

.orc-linha td {
  border-bottom: 1px solid rgba(249, 248, 246, 0.05);
}

.orc-linha.removida td {
  opacity: 0.35;
}

.orc-linha.removida .orc-remover {
  opacity: 1;
  background: var(--erro);
  color: var(--texto-inverso);
}

.orc-linha .campo-erro {
  display: block;
  margin-top: 4px;
}

.orc-remover {
  position: relative;
  cursor: pointer;
}

.orc-remover input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.orc-remover:focus-within {
  outline: 3px solid var(--destaque);
  outline-offset: 2px;
}

.orc-acoes-linhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 8px;
}

.orc-resumo {
  margin-top: 28px;
  padding: 22px;
}

.orc-resumo .texto-apoio {
  margin-top: 12px;
}

/* o quadrinho do orçamento na tela do JOB */
.resumo-orcamento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  align-self: stretch;
  padding: 10px 14px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--vidro);
  color: var(--texto);
  text-decoration: none;
}

.resumo-orcamento:hover {
  border-color: rgba(var(--destaque-rgb), 0.55);
}

.resumo-orcamento > span {
  display: flex;
  flex-direction: column;
}

.resumo-orcamento small {
  color: var(--texto-3);
  font-size: 12px;
}

.resumo-orcamento b {
  font-variant-numeric: tabular-nums;
}

.resumo-orcamento .resumo-orcamento-link {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--destaque);
  font-size: 13px;
  font-weight: 600;
}

/* Kanban: a venda do orçamento no cartão (por extenso) e a soma de cada coluna */
.cartao-job-valor {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--texto-2);
  font-size: 12.5px;
}

.cartao-job-valor .icone {
  width: 14px;
  height: 14px;
  color: var(--texto-3);
}

.cartao-job-valor b {
  color: var(--texto);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* o cabeçalho da coluna: a linha do título (etapa, contador e +) e, embaixo, a soma */
.coluna-topo {
  flex-direction: column;
  flex-shrink: 0;
  align-items: stretch;
  gap: 2px;
}

.coluna-topo-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
}

.coluna-valor {
  margin: 0;
  padding-left: 2px;
  color: var(--texto-3);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.coluna-valor b {
  margin-left: 3px;
  color: var(--texto);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.coluna-valor.zero b {
  color: var(--texto-3);
  font-weight: 600;
}

.coluna-valor.mudou b {
  animation: valor-mudou 0.9s ease-out;
}

@keyframes valor-mudou {
  from {
    color: var(--destaque);
  }
}

/* Orçamentos: os valores de exemplo (os botões só aparecem para o administrador) */
.orc-exemplos-chamada > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.orc-exemplos-chamada p {
  margin: 0;
  color: var(--texto-2);
}

.orc-exemplos-chamada form {
  margin: 0;
}

.orc-exemplos-chamada .botao {
  margin-top: 4px;
}

.orc-exemplos-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 700;
}

.orc-exemplos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px dashed var(--linha-2);
  border-radius: 14px;
  color: var(--texto-3);
  font-size: 13px;
}

.orc-exemplos-texto {
  display: flex;
  flex: 1 1 320px;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  line-height: 1.45;
}

.orc-exemplos-texto .icone {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.orc-exemplos-texto b {
  color: var(--texto-2);
}

.orc-exemplos-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.orc-exemplos-acoes form {
  margin: 0;
}

.orc-exemplos-apagar > summary {
  list-style: none;
  cursor: pointer;
}

.orc-exemplos-apagar > summary::-webkit-details-marker {
  display: none;
}

.orc-exemplos-confirmar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 340px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--erro-borda);
  border-radius: 12px;
  background: var(--erro-fundo);
  color: var(--texto);
}

.orc-exemplos-confirmar p {
  margin: 0;
}

/* o Kanban: só o quadro encolhe (filtros e títulos ficam inteiros) */
.pagina-quadro .pagina-larga > :not(.quadro) {
  flex-shrink: 0;
}


/* ------------------------------------------- o gráfico "Orçado por mês" */
.serie-aprovados {
  --cor-serie: var(--serie-aprovados);
}

.serie-aprovacao {
  --cor-serie: var(--serie-aprovacao);
}

.serie-elaboracao {
  --cor-serie: var(--serie-elaboracao);
}

.serie-declinados {
  --cor-serie: var(--serie-declinados);
}

.grafico-chave {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--cor-serie);
}

.resumo-orc-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.grafico-orc {
  --alto-grafico: 220px;
  --faixa-meses: 36px;
  margin: 0 0 30px;
  padding: 22px 22px 18px;
}

.grafico-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 28px;
  margin-bottom: 14px;
}

.grafico-cabeca .secao-titulo {
  margin-bottom: 4px;
}

.grafico-cabeca .texto-apoio {
  max-width: 62ch;
}

.grafico-taxa {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  text-align: right;
}

.grafico-taxa small {
  color: var(--texto-2);
  font-family: var(--fonte-titulo);
  font-size: 13px;
  font-weight: 600;
}

.grafico-taxa b {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.grafico-taxa span {
  color: var(--texto-3);
  font-size: 12px;
}

.grafico-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 18px;
  padding: 0;
  color: var(--texto-2);
  font-size: 13.5px;
  list-style: none;
}

.grafico-legenda li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.grafico-legenda .icone {
  width: 14px;
  height: 14px;
  color: var(--texto-3);
}

.grafico {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
}

.grafico-eixo {
  position: relative;
  min-width: 64px;
  height: var(--alto-grafico);
  color: var(--texto-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.grafico-eixo span {
  position: absolute;
  right: 0;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(50%);
}

.grafico-area {
  position: relative;
  min-width: 0;
}

.grafico-grade {
  position: absolute;
  inset: 0 0 auto;
  height: var(--alto-grafico);
  pointer-events: none;
}

.grafico-grade i {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(249, 248, 246, 0.07);
}

.grafico-grade i:first-child {
  background: rgba(249, 248, 246, 0.24);
}

.grafico-colunas {
  position: relative;
  display: flex;
  height: calc(var(--alto-grafico) + var(--faixa-meses));
  margin: 0;
  padding: 0;
  list-style: none;
}

.grafico-mes {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  border-radius: 10px;
  outline: none;
  cursor: default;
}

.grafico-barra {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: var(--alto-grafico);
}

.grafico-pilha {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  width: min(24px, 58%);
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  transition: filter 0.15s;
}

.grafico-seg {
  display: block;
  flex-basis: 0;
  min-height: 2px;
  background: var(--cor-serie);
}

.grafico-rotulo {
  position: absolute;
  left: 50%;
  color: var(--texto);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -6px);
}

.grafico-mes-rotulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--faixa-meses);
  padding-top: 8px;
  color: var(--texto-3);
  font-size: 12px;
  line-height: 1.15;
}

.grafico-mes-rotulo small {
  color: var(--texto-4);
  font-size: 10.5px;
}

.grafico-mes:hover,
.grafico-mes.ativo {
  background: rgba(249, 248, 246, 0.04);
}

.grafico-mes:hover .grafico-pilha,
.grafico-mes.ativo .grafico-pilha {
  filter: brightness(1.2);
}

.grafico-mes.ativo .grafico-mes-rotulo {
  color: var(--texto);
}

.grafico-mes:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: -2px;
}

.grafico-dica {
  position: absolute;
  top: 0;
  z-index: 5;
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--fundo-menu);
  box-shadow: var(--sombra-elevada);
  font-size: 13px;
  pointer-events: none;
}

.grafico-dica p {
  margin: 0;
}

.grafico-dica-mes {
  color: var(--texto-3);
  font-size: 12px;
}

.grafico-dica-mes::first-letter {
  text-transform: uppercase;
}

.grafico-dica-total {
  margin-bottom: 6px !important;
  color: var(--texto-3);
}

.grafico-dica-total b {
  color: var(--texto);
  font-size: 16px;
  font-weight: 800;
}

.grafico-dica-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px !important;
  color: var(--texto-2);
}

.grafico-dica-linha b {
  min-width: 96px;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.grafico-dica-linha.zero {
  opacity: 0.5;
}

.grafico-dica-chave {
  flex: none;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: var(--cor-serie);
}

.grafico-vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 34px 16px;
  border: 1px dashed var(--linha-2);
  border-radius: var(--raio-bloco);
  color: var(--texto-3);
  text-align: center;
}

.grafico-tabela {
  margin-top: 12px;
}

.grafico-tabela > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--texto-2);
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

.grafico-tabela > summary:hover {
  color: var(--texto);
}

.grafico-tabela > summary .icone {
  width: 15px;
  height: 15px;
}

.grafico-tabela[open] > summary {
  margin-bottom: 10px;
}

.orc-lista-cabeca {
  margin-top: 4px;
}

.orc-lista-cabeca .segmentado {
  margin-left: auto;
}

/* ---------------------------------------------------- 12. celular e tablet */
/* Tela grande: o Kanban ocupa a altura da janela e as colunas rolam dentro dele. */
@media (min-width: 761px) {
  .pagina-quadro .pagina-larga {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--alto-topo) - var(--alto-faixa));
    height: calc(100dvh - var(--alto-topo) - var(--alto-faixa));
    min-height: 560px;
    padding-bottom: 0;
  }

  .pagina-quadro .quadro {
    flex: 1 1 auto;
    min-height: 300px;
  }

  .pagina-quadro .vazio {
    margin-bottom: 32px;
  }
}

@media (max-width: 1180px) {
  .job-grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .job-lateral {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .avisos-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  :root {
    --lateral: 22px;
  }

  .grade-campos-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topo {
    gap: 18px;
  }

  .marca-nome {
    display: none;
  }

  .entrada {
    grid-template-columns: minmax(0, 1fr);
  }

  .entrada-marca {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 22px;
    padding: 28px 22px 26px;
    border-right: 0;
    border-bottom: 1px solid var(--linha);
  }

  .entrada-logo {
    width: 72px;
  }

  .entrada-titulo {
    margin: 0;
  }

  .entrada-sobre {
    font-size: 14px;
  }

  .entrada-nome {
    font-size: 96px;
  }

  .entrada-frase {
    flex-basis: 100%;
    font-size: 16px;
  }

  .entrada-rodape {
    display: none;
  }

  .entrada-formulario {
    align-items: flex-start;
    padding: 32px 22px 48px;
  }
}

@media (max-width: 760px) {
  :root {
    --lateral: 16px;
    --alto-topo: 56px;
  }

  body {
    font-size: 15px;
  }

  /* o topo ganha uma segunda linha para as abas */
  .topo {
    flex-wrap: wrap;
    gap: 0 6px;
    height: auto;
    min-height: var(--alto-topo);
    padding: 8px var(--lateral) 4px;
  }

  .topo-marca {
    height: var(--alto-topo);
  }

  .marca-logo {
    height: 32px;
  }

  .marca-nome {
    display: inline;
    padding-left: 12px;
    font-size: 12px;
  }

  .abas {
    order: 3;
    flex-basis: 100%;
    gap: 20px;
    height: 46px;
  }

  .aba {
    font-size: 17px;
  }

  .topo .botao-icone {
    width: 40px;
    height: 40px;
  }

  .topo .botao-icone .icone {
    width: 21px;
    height: 21px;
  }

  .topo-acoes {
    gap: 2px;
  }

  .relogio {
    display: none;
  }

  .avatar-conta {
    width: 40px;
    height: 40px;
  }

  .pagina {
    padding-top: 22px;
    padding-bottom: 56px;
  }

  .pagina-topo {
    margin-bottom: 22px;
  }

  .pagina-titulo {
    font-size: 30px;
  font-family: var(--fonte-titulo);
}

  .cartao,
  .secao-formulario,
  .secao,
  .avisos-lista,
  .avisos-email {
    padding: 18px;
  }

  .formulario-cartao,
  .solicitacao {
    padding: 22px 18px;
  }

  .grade-campos,
  .grade-campos-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .formulario-acoes {
    justify-content: stretch;
  }

  .formulario-acoes > .botao,
  .formulario-acoes > form,
  .formulario-acoes-grupo,
  .formulario-acoes-grupo > .botao {
    flex: 1 1 auto;
  }

  .formulario-acoes > form > .botao {
    width: 100%;
  }

  /* Kanban no celular: uma coluna por vez, deslizando de lado */
  .cabecalho-quadro-acoes {
    width: 100%;
  }

  .cabecalho-quadro-acoes .botao {
    flex: 1;
  }

  .quadro {
    grid-auto-columns: min(86vw, 330px);
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--lateral);
  }

  .coluna {
    scroll-snap-align: start;
    border-radius: var(--raio-bloco);
  }

  .filtro {
    flex: 1 1 calc(50% - 4px);
  border-radius: var(--raio-pilula);
}

  .filtro select {
    flex: 1;
    max-width: none;
  }

  .filtro-busca {
    flex-basis: 100%;
    max-width: none;
  }

  .segmentado {
    width: 100%;
    margin-left: 0;
  border-radius: var(--raio-pilula);
}

  .segmento {
    flex: 1;
    justify-content: center;
  border-radius: var(--raio-pilula);
}

  /* o JOB: o rótulo vai em cima do valor */
  .propriedades {
    --rotulo-prop: 0px;
  }

  .prop {
    padding: 4px 0 8px;
  }

  .prop-rotulo {
    float: none;
    width: auto;
    min-height: 0;
    padding: 6px 0 4px;
    font-size: 12.5px;
    font-weight: 600;
  }

  .prop-valor {
    min-height: 0;
  }

  .propriedades .campo-entrada {
    border-color: var(--linha-2);
  }

  .barra-salvar {
    gap: 8px;
    margin-right: calc(-1 * var(--lateral));
    margin-left: calc(-1 * var(--lateral));
    padding: 10px var(--lateral) calc(10px + env(safe-area-inset-bottom));
  border-radius: var(--raio-bloco) var(--raio-bloco) 0 0;
}

  .barra-salvar > .botao-primario {
    flex: 1 1 auto;
  }

  /* no celular a trilha já volta ao quadro: a barra fica só com Excluir e Salvar */
  .barra-salvar > .botao-vidro {
    display: none;
  }

  .barra-salvar-aviso {
    flex-basis: 100%;
    order: -1;
  font-family: var(--fonte-titulo);
}

  .entrega-dados div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  /* tabelas viram cartões */
  .tabela-rolagem {
    overflow: visible;
  }

  .tabela,
  .tabela tbody,
  .tabela tr,
  .tabela td {
    display: block;
    width: 100%;
  }

  .tabela-equipe {
    min-width: 0;
  }

  .tabela thead {
    display: none;
  }

  .tabela tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--linha);
  }

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

  .tabela td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 6px 16px;
    border: 0;
    text-align: right;
  }

  .tabela td[data-rotulo]::before {
    content: attr(data-rotulo);
    color: var(--texto-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
  font-family: var(--fonte-titulo);
}

  .tabela td[data-rotulo="Pessoa"],
  .tabela td[data-rotulo="Cliente"] {
    text-align: left;
  }

  .tabela td[data-rotulo="Pessoa"]::before,
  .tabela td[data-rotulo="Cliente"]::before {
    display: none;
  }

  .tabela .acao-coluna {
    position: absolute;
    top: 8px;
    right: 8px;
    width: auto;
    padding: 0;
  }

  .tabela tr {
    position: relative;
  }

  .tabela tbody tr:hover td {
    background: transparent;
  }

  .tabela-equipe td {
    display: block;
    text-align: left;
  }

  .tabela-equipe td[data-rotulo]::before {
    display: block;
    margin-bottom: 4px;
  }

  .tabela-equipe td[data-rotulo="Pessoa"]::before {
    display: none;
  }

  .equipe-bloco {
    padding: 14px 12px 6px;
  }

  .equipe-pessoa {
    flex-wrap: wrap;
    row-gap: 6px;
  border-radius: 14px;
}

  .equipe-pessoa-nome {
    flex: 1 1 calc(100% - 52px);
  }

  .equipe-pessoa-chips {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding-left: 52px;
  }

  .equipe-pessoa-acoes {
    min-width: 0;
    margin-left: auto;
  }

  .equipe-ramo {
    margin-left: 10px;
    padding-left: 10px;
  }

  .equipe-ramo > .equipe-no > .equipe-pessoa::before {
    top: 28px;
    left: -10px;
    width: 8px;
  }

  .entrada-nome {
    font-size: 78px;
  }

  .entrada-h1 {
    font-size: 34px;
  }

  .resumo-item {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  border-radius: var(--raio-campo);
}
}

@media (max-width: 960px) {
  .marca-divisor {
    display: none;
  }

  .resumo-orcamentos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entrada-viv {
    width: 190px;
  }
}

@media (max-width: 760px) {
  .marca-viv {
    height: 36px;
  }

  .grafico-orc {
    --alto-grafico: 180px;
    padding: 18px 14px 14px;
  }

  .grafico-taxa {
    align-items: flex-start;
    text-align: left;
  }

  .grafico-eixo {
    min-width: 50px;
    font-size: 10.5px;
  }

  .grafico-mes-rotulo,
  .grafico-rotulo {
    font-size: 10.5px;
  }

  .grafico-dica {
    min-width: 190px;
  }

  .marca-nome {
    display: none !important;
  }

  .orc-totais {
    grid-template-columns: minmax(0, 1fr);
  }

  .resumo-orc {
    padding: 14px;
  }

  .resumo-orc-valor {
    font-size: 17px;
  }

  .tabela-orcamento {
    min-width: 0;
  }

  .tabela-orcamento td {
    display: grid !important;
    grid-template-columns: 110px minmax(0, 1fr);
    text-align: left !important;
  }

  /* 1.15.1: as larguras das colunas do computador não valem aqui (a Qtd e a Venda unit.
     ficavam espremidas, sem mostrar o número) */
  .tabela-orcamento td:nth-child(n) {
    width: auto;
  }

  .tabela-orcamento td.acao-coluna {
    display: block !important;
  }

  /* a categoria e a descrição com o rótulo em cima: o campo usa a largura toda e o nome da
     categoria quebra a linha se precisar; a lixeira fica na altura do rótulo */
  .tabela-orcamento .orc-celula-categoria,
  .tabela-orcamento .orc-celula-descricao {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .tabela-orcamento .orc-celula-categoria::before {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-right: 48px;
  }

  .tabela-orcamento .campo-escolha-texto {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }

  .orc-grupo th {
    display: block;
  }

  .coluna-fatia {
    width: auto;
  }
}

@media (max-width: 400px) {
  .marca-nome {
    display: none;
  }

  .filtro {
    flex-basis: 100%;
  border-radius: var(--raio-pilula);
}
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ---------------------------------------------------------------------------
   Lojas da tarefa: a rede (Centauro ou DTC) e as lojas dela (parciais/_lojas.html)
   --------------------------------------------------------------------------- */
.lojas-escolha {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.lojas-lista {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--vidro);
}

.lojas-lista[hidden] {
  display: none;
}

/* "Ver como o cliente vê" (1.15.0, como no Space REF+): o selo e o botão de sair no topo. */
.chip-previa {
  flex: none;
  min-height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.chip-previa .icone {
  width: 16px;
  height: 16px;
}

.botao-sair-previa {
  flex: none;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .topo .chip-previa {
    display: none;
  }
}

@media (max-width: 940px) {
  .botao-sair-previa span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* As duas redes juntas (1.15.0): cada lista mostra de qual rede é. */
.lojas-lista-titulo {
  margin: 0;
}

.lojas-redes-ajuda {
  align-self: center;
  font-size: 12.5px;
}

.lojas-escolhidas-lista + .lojas-escolhidas-rede {
  margin-top: 6px;
}

.lojas-ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.lojas-busca {
  flex: 1 1 240px;
  min-height: 42px;
}

.lojas-busca > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--texto-3);
}

.lojas-busca > input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.lojas-contador {
  color: var(--texto-3);
  font-size: 13px;
}

.lojas-contador > b {
  color: var(--texto);
}

.lojas-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lojas-atalhos > .botao {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
}

.lojas-itens,
.lojas-escolhidas-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 10px;
  max-height: 300px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}

.lojas-itens > li[hidden] {
  display: none;
}

.lojas-itens label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: start;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.lojas-itens label:hover {
  background: var(--vidro-2);
}

.lojas-itens input {
  grid-row: span 2;
  margin: 3px 0 0;
  accent-color: var(--destaque, #e3001b);
}

.lojas-itens input:checked ~ .loja-nome {
  color: var(--texto);
  font-weight: 600;
}

.loja-nome {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--texto-2);
  font-size: 13.5px;
  line-height: 1.3;
}

.loja-detalhe {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--texto-4);
  font-size: 11.5px;
  line-height: 1.3;
}

.lojas-escolhidas {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.lojas-escolhidas-rede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.lojas-escolhidas-lista {
  max-height: 220px;
}

.lojas-escolhidas-lista > li {
  display: grid;
  padding: 4px 0;
}

.cartao-job-lojas > b {
  font-weight: 500;
}

@media (max-width: 640px) {
  .lojas-itens,
  .lojas-escolhidas-lista {
    grid-template-columns: 1fr;
  }
}

fieldset.campo-lojas {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

fieldset.campo-lojas > legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  margin-bottom: 8px;
  padding: 0;
}

.solicitacao-etapa {
  margin: 4px 0 18px;
}

/* A solicitação do cliente no Briefing, ainda sem prazo (1.9.0; era a Em espera da 1.7.0) */
.cartao-job-data.cartao-job-pedido {
  flex-wrap: nowrap;
  align-items: flex-start;
  color: #d9c9ff;
}

.cartao-job-data.cartao-job-pedido .icone {
  flex: none;
  margin-top: 2px;
  color: #b9a2ff;
}

.cartao-job-data.cartao-job-pedido span {
  flex: 1;
  min-width: 0;
}

.etapa-briefing-nota {
  display: block;
  margin-top: 6px;
}

/* As telas do cliente (1.8.0): as etapas já feitas e a prévia da equipe */
.etapa-feita {
  color: var(--texto-2);
}

.etapa-feita .icone {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  color: var(--sucesso);
}

.aviso-previa {
  margin-bottom: 18px;
}

.aviso-previa .link {
  margin-left: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.job-previa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}

.job-previa .icone {
  width: 15px;
  height: 15px;
}

.lista-previa {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* O Checklist da tarefa (1.9.0, como no Notion da VIV) */
.job-checklist {
  display: grid;
  gap: 10px;
  margin: 26px 0 8px;
  padding: 18px 20px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--vidro);
}

.job-checklist-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.job-checklist-topo .secao-titulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.job-checklist-topo .secao-titulo .icone {
  width: 18px;
  height: 18px;
  color: var(--sucesso);
}

.job-checklist-progresso {
  color: var(--texto-3);
  font-size: 13px;
  white-space: nowrap;
}

.checklist {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist-linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 36px;
  padding: 2px 6px;
  border-radius: 8px;
}

.checklist-linha:hover,
.checklist-linha:focus-within {
  background: var(--vidro-2);
}

.checklist-titulo {
  margin-top: 10px;
}

.checklist-titulo:first-child {
  margin-top: 0;
}

.checklist-caixa {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 8px 0 0;
  accent-color: var(--destaque);
  cursor: pointer;
}

.checklist-texto {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 6px 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  resize: none;
  field-sizing: content;
}

.checklist-titulo .checklist-texto {
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 700;
}

.checklist-caixa:checked + .checklist-texto {
  color: var(--texto-3);
  text-decoration: line-through;
}

.checklist-tirar {
  flex: none;
  margin-top: 2px;
  opacity: 0;
}

.checklist-linha:hover .checklist-tirar,
.checklist-linha:focus-within .checklist-tirar {
  opacity: 1;
}

@media (hover: none) {
  .checklist-tirar {
    opacity: 1;
  }
}

.checklist-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cartao-job-checklist.completo {
  color: var(--sucesso);
}

/* ------------------------------------------------- 1.16.0: revisão do celular */
@media (max-width: 760px) {
  /* No iPhone, tocar num campo com letra menor que 16 px dá zoom na tela: no celular os
     campos ficam com 16 px (o título grande da tarefa não entra aqui). */
  .campo-entrada input,
  .campo-entrada select,
  .campo-entrada textarea,
  .filtro input,
  .filtro select,
  .barra-busca select,
  .checklist-linha textarea {
    font-size: 16px !important;
  }

  .tabela-orcamento .campo-escolha-texto {
    font-size: 16px;
  }

  /* Tabela que vira cartão: o botão de abrir fica no canto, e o texto da primeira célula não
     passa por baixo dele (no orçamento da tarefa a lixeira fica na altura do rótulo). */
  .tabela:not(.tabela-orcamento) tbody tr:has(> td.acao-coluna) > td:first-child {
    padding-right: 56px;
  }

  /* O total (tfoot) fecha o cartão: o título e, embaixo, cada número ao lado do seu rótulo,
     como as linhas de cima (antes ficava numa coluna estreita, sem rótulo). */
  .tabela tfoot,
  .tabela tfoot tr {
    display: block;
    width: 100%;
  }

  .tabela tfoot tr {
    padding: 8px 0 6px;
    border-top: 1px solid var(--linha-2);
  }

  .tabela tfoot th,
  .tabela tfoot td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    width: 100%;
    padding: 6px 16px;
    border: 0;
    white-space: normal;
    text-align: right;
  }

  .tabela tfoot th {
    justify-content: flex-start;
    text-align: left;
  }

  .tabela tfoot td:empty {
    display: none !important;
  }

  /* Orçamentos › Por tarefa: o título e o código abrem o cartão, sem rótulo, e o cliente vem
     logo embaixo (como Pessoa e Cliente nas outras listas). */
  .tabela-orc-lista td[data-rotulo="Tarefa"] {
    padding-bottom: 2px;
    text-align: left;
  }

  .tabela-orc-lista td[data-rotulo="Tarefa"]::before {
    display: none;
  }

  .tabela-orc-lista td[data-rotulo="Cliente"] {
    padding-top: 2px;
  }

  /* a parte da venda: a barra e a porcentagem juntas, à direita */
  .tabela td.coluna-fatia {
    flex-wrap: nowrap;
  }

  .tabela td.coluna-fatia .fatia {
    margin-left: auto;
  }

  /* Listas dos campos: o nome da opção na largura toda; as setas, o Ativa e o uso embaixo */
  .opcao-linha .campo-entrada {
    flex-basis: 100%;
    order: -1;
  }
}