@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

@font-face {
  font-family: 'Ethos Nova';
  src: url('assets/Fonts/ethos-nova/EthosNova-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ethos Nova';
  src: url('assets/Fonts/ethos-nova/EthosNova-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ethos Nova';
  src: url('assets/Fonts/ethos-nova/EthosNova-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ethos Nova';
  src: url('assets/Fonts/ethos-nova/EthosNova-Heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Boston Angel';
  src: url('assets/Fonts/boston-angel/Boston%20Angel%20Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Boston Angel';
  src: url('assets/Fonts/boston-angel/Boston%20Angel%20Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Boston Angel';
  src: url('assets/Fonts/boston-angel/Boston%20Angel%20Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cor-terracota: #DC8462;
  --cor-terracota-claro: #E4A572;
  --cor-terracota-texto-barra: #AF4D27;
  --cor-areia: #F0D0A7;
  --cor-oliva: #A29F76;
  --cor-texto: #3A342B;
  --cor-fundo: #FBF6EE;
  --cor-erro: #C0392B;
  --cor-ok: #4a9d5f;      /* validação: conferido / concluído */
  --cor-alerta: #d68910;  /* validação: atraso / atenção */
  --borda-fina: rgba(58, 52, 43, 0.08);
  --fonte-titulo: 'Ethos Nova', 'Nunito', sans-serif;
  --fonte-corpo: 'Nunito', sans-serif;
  /* Só para a palavra "Ops" — nunca recriar "Madrecita" como texto nesta fonte */
  --fonte-ops: 'Boston Angel', 'Ethos Nova', 'Nunito', serif;

  /* Escala fechada — Etapa 1 da auditoria de UI/UX (31/08/2026) */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 20px;
  --espaco-6: 24px;
  --espaco-7: 32px;
  --espaco-8: 48px;
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.35rem;
  --texto-2xl: 1.75rem;
  --texto-3xl: 2rem;
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 20px;
  --raio-pill: 999px;
  --sombra-leve: 0 1px 8px rgba(58, 52, 43, 0.05);
  --sombra-card: 0 2px 16px rgba(58, 52, 43, 0.07);
  --sombra-elevada: 0 8px 28px rgba(58, 52, 43, 0.12);
  --duracao-rapida: 0.12s;
  --duracao-media: 0.2s;
  --toque-min: 44px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

input, textarea, select, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tela {
  width: 100%;
  max-width: 720px;
  padding: var(--espaco-7) var(--espaco-6);
  container-type: inline-size;
  container-name: tela;
}

/* !important: .tela-login { display:flex } vinha depois e mantinha o login vis?vel.
   pointer-events/visibility: refor?o p/ mobile n?o capturar toque em tela "escondida". */
.oculta {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.cabecalho {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
}

.cabecalho h1, .cabecalho h2 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: 0;
  font-size: 2rem;
  margin: 0 0 8px;
  color: var(--cor-terracota);
}

.logo-madrecita {
  display: block;
  width: min(280px, 72%);
  height: auto;
  margin: 0 auto;
  /* Sem sombra, brilho, contorno ou distor??o ? regra 7.4/7.6 do manual */
}

/* Margem de seguran?a ? altura do "M" da marca (~18% da largura do wordmark) */
.logo-madrecita--seguro {
  --margem-m: clamp(28px, 12%, 48px);
  margin-top: var(--margem-m);
  margin-bottom: var(--margem-m);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.tagline-marca {
  font-family: var(--fonte-corpo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-terracota);
  opacity: 0.9;
  margin: 0 0 12px;
  text-align: center;
}

.cabecalho-painel .tagline-marca {
  text-align: left;
  font-size: 0.65rem;
  margin: 0 0 8px;
}

/* "Ops" ao lado da logo ? texto puro, sem chip/fundo */
.cabecalho-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  flex-wrap: nowrap;
}

.cabecalho-marca .logo-madrecita {
  width: min(240px, 58%);
  margin: 0;
  flex-shrink: 1;
}

.marca-ops-texto {
  font-family: var(--fonte-ops);
  font-weight: 700;
  /* Equil?brio visual com a altura da logo Madrecita */
  font-size: clamp(2.85rem, 10.5vw, 4rem);
  letter-spacing: 0;
  color: var(--cor-oliva);
  line-height: 0.88;
  margin: 0 0 0 0.05em;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
}

.marca-ops,
.cabecalho h1.marca-ops,
.cabecalho .marca-ops {
  font-family: var(--fonte-ops);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: 0;
  color: var(--cor-oliva);
  margin: 0 0 10px;
  opacity: 1;
}

.cabecalho-painel .cabecalho-marca {
  justify-content: flex-start;
  width: 100%;
}

.cabecalho-painel .cabecalho-marca .logo-madrecita {
  width: min(190px, 50%);
}

.cabecalho-painel .marca-ops-texto {
  font-size: clamp(2.5rem, 8.5vw, 3.6rem);
  font-weight: 700;
  align-self: center;
}

.cabecalho-painel .bloco-marca-painel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 4px;
  padding-right: clamp(28px, 10%, 40px);
}

/* ??? Login totem: cabe?alho areia + corpo oliva com s?mbolos ??? */
body:has(#tela-selecao:not(.oculta)) {
  background: var(--cor-oliva);
  align-items: stretch;
  justify-content: flex-start;
}

.tela-login {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cor-oliva);
}

.login-cabecalho {
  background: var(--cor-areia);
  text-align: center;
  padding: 8px 28px 18px;
  flex-shrink: 0;
}

.login-cabecalho .cabecalho-marca {
  --margem-m: clamp(28px, 10%, 44px);
  margin-top: var(--margem-m);
  margin-bottom: 12px;
}

.slot-card-higiene {
  display: block;
  margin: 0 0 20px;
}

.slot-card-higiene .card-madrecita.card-modulo {
  width: 100%;
  text-align: left;
}

/* Slogan dentro do cabe?alho creme ? it?lico terracota + cora??es da marca */
.slogan-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  margin: 0;
  padding: 0 16px;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(1.15rem, 3.8vw, 1.45rem);
  font-style: italic;
  color: var(--cor-terracota);
  line-height: 1.2;
}

.slogan-texto {
  font-style: italic;
}

.slogan-coracao {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  background-color: var(--cor-terracota-claro);
  -webkit-mask: url('assets/simbolos/simbolo-coracao.png') center / contain no-repeat;
  mask: url('assets/simbolos/simbolo-coracao.png') center / contain no-repeat;
}

.login-corpo {
  position: relative;
  flex: 1;
  background: var(--cor-oliva);
  padding: 18px 24px 40px;
  overflow: hidden;
}

.login-fundo-simbolos,
.login-fundo-simbolos * {
  position: absolute;
  pointer-events: none !important;
  touch-action: none;
}

.login-fundo-simbolos {
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.login-fundo-simbolos img {
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: auto;
  opacity: 0.18;
  transform: rotate(var(--r));
  user-select: none;
  -webkit-user-callout: none;
}

.login-corpo-conteudo {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.instrucao-login {
  font-family: var(--fonte-corpo);
  font-size: clamp(1.55rem, 5.2vw, 1.95rem);
  font-weight: 700;
  text-align: center;
  color: var(--cor-areia);
  opacity: 0.95;
  margin: 10px 0 30px;
}

.tela-login .grade-nomes .carregando {
  color: var(--cor-areia);
  opacity: 0.7;
}

.tela-login .botao-colaborador {
  background: var(--cor-fundo);
  border-color: transparent;
}

.cabecalho p {
  font-size: 1.1rem;
  color: var(--cor-texto);
  opacity: 0.75;
  margin: 0;
}

.botao-voltar {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border: none;
  background: var(--cor-areia);
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 2;
  flex-shrink: 0;
}

/*
  Com seta: grid (seta | t?tulo [| espelho]).
  min-width:0 no t?tulo evita overflow do texto centralizado
  invadir a coluna do bot?o em viewport estreito.
*/
.cabecalho:has(.botao-voltar) {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  column-gap: 12px;
  align-items: start;
  text-align: center;
}

.cabecalho:has(.botao-voltar) .botao-voltar {
  position: static;
  grid-column: 1;
  grid-row: 1;
}

.cabecalho:has(.botao-voltar) > :not(.botao-voltar) {
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

@media (max-width: 400px) {
  /* No mobile: seta + t?tulo ? esquerda (sem espelho) ? gap real e leg?vel */
  .cabecalho:has(.botao-voltar) {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 20px;
    text-align: left;
  }

  .cabecalho:has(.botao-voltar) .botao-voltar {
    width: 44px;
    height: 44px;
  }

  .cabecalho:has(.botao-voltar) h1,
  .cabecalho:has(.botao-voltar) h2,
  .cabecalho:has(.botao-voltar) p {
    text-align: left;
  }

  .cabecalho:has(.botao-voltar) h1,
  .cabecalho:has(.botao-voltar) h2 {
    font-size: 1.35rem;
    line-height: 1.25;
  }
}

.grade-nomes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.botao-colaborador {
  background: white;
  border: 1px solid var(--borda-fina);
  border-radius: 20px;
  box-shadow: var(--sombra-card);
  padding: 24px 12px;
  font-family: var(--fonte-corpo);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cor-texto);
  cursor: pointer;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.1s, border-color 0.1s;
}

.botao-colaborador:active {
  transform: scale(0.96);
  border-color: var(--cor-terracota);
}

.carregando {
  text-align: center;
  grid-column: 1 / -1;
  opacity: 0.6;
}

.pontos-pin {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 32px 0;
}

.ponto {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--cor-oliva);
  background: transparent;
  transition: background 0.15s;
}

.ponto.preenchido {
  background: var(--cor-terracota);
  border-color: var(--cor-terracota);
}

.mensagem-erro {
  text-align: center;
  color: var(--cor-erro);
  font-weight: 700;
  margin-bottom: 16px;
  min-height: 24px;
}

.teclado-numerico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  touch-action: manipulation;
  position: relative;
  z-index: 2;
}

.tecla {
  position: relative;
  aspect-ratio: 1;
  min-width: 56px;
  min-height: 56px;
  width: 100%;
  /* Sem border-radius no bot?o: WebKit/Android costumam limitar o toque ao c?rculo.
     O c?rculo fica s? no visual (::before); a hit-area ? o quadrado inteiro da grade. */
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cor-texto);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(162, 159, 118, 0.25);
  z-index: 1;
}

.tecla:not(.tecla-vazia)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: -1;
  pointer-events: none;
}

.tecla:not(.tecla-vazia):active::before {
  background: var(--cor-areia);
}

.tecla-vazia {
  box-shadow: none;
  background: transparent;
  cursor: default;
  pointer-events: none;
}

.tecla-apagar {
  font-size: 1.3rem;
  color: var(--cor-erro);
}

#tela-sucesso {
  display: flex;
  align-items: center;
  justify-content: center;
}

.conteudo-sucesso {
  text-align: center;
}

.icone-sucesso {
  width: 80px;
  height: 80px;
  background: var(--cor-terracota);
  color: white;
  border-radius: 50%;
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.botao-secundario {
  margin-top: 0;
  padding: 10px 16px;
  border: 1.5px solid var(--cor-oliva);
  border-radius: var(--raio-sm);
  background: #fff;
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  letter-spacing: 0.01em;
}

.conteudo-sucesso .botao-secundario {
  margin-top: var(--espaco-6);
}

.cabecalho-painel {
  display: block;
  text-align: left;
}

.cabecalho-painel h2 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0;
  color: var(--cor-texto);
}

.cabecalho-painel p {
  margin: 4px 0 0;
  opacity: 0.7;
  font-size: 0.95rem;
}

.botao-sair {
  border: none;
  background: var(--cor-areia);
  color: var(--cor-texto);
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.bloco-checkbox-posto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borda-fina);
}

.badge-responsavel-posto {
  display: inline-block;
  margin-left: 28px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cor-oliva);
}

.grade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--espaco-4);
  margin-top: var(--espaco-6);
  align-items: start;
}

.card-madrecita {
  background: white;
  border-radius: var(--raio-xl);
  border: 1px solid var(--borda-fina);
  box-shadow: var(--sombra-card);
  padding: var(--espaco-5);
}

.card-madrecita.card-madrecita--largo {
  width: 100%;
  max-width: 460px;
  padding: var(--espaco-7) var(--espaco-6);
  margin-bottom: var(--espaco-4);
}

.card-madrecita.card-madrecita--filho {
  border-radius: var(--raio-lg);
  background: #FAF6EF;
  box-shadow: none;
  border: 1px solid var(--borda-fina);
  padding: var(--espaco-3) var(--espaco-4);
  min-height: auto;
}

.card-madrecita.card-madrecita--lista {
  border-radius: var(--raio-lg);
  padding: var(--espaco-3) var(--espaco-3);
  margin-bottom: var(--espaco-2);
  box-shadow: var(--sombra-leve);
}

.card-modulo {
  /* Herda o visual Madrecita; mantém comportamento de botão do painel */
  background: white;
  border: 1px solid var(--borda-fina);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-card);
  padding: var(--espaco-5);
  text-align: left;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  position: relative;
  min-height: 100px;
}

.card-modulo:active {
  transform: scale(0.97);
}

.card-modulo.desabilitado {
  cursor: default;
  opacity: 0.6;
}

.card-modulo h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cor-terracota);
}

.card-modulo p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.acoes-tarefas-topo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.acoes-tarefas-topo .botao-primario,
.acoes-tarefas-topo .botao-secundario {
  margin: 0;
  width: 100%;
}

.grade-hub-higiene {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}

.selo-em-breve {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--cor-oliva);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
}

/* --- P?gina p?blica NPS (avaliar.html) --- */

body.pagina-avaliar {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 14px 60px;
  background: #FAF6EF;
  user-select: text;
}

body.pagina-avaliar * {
  user-select: text;
}

.cabecalho-boas-vindas {
  text-align: center;
  padding-top: 8px;
}

.cabecalho-boas-vindas img {
  max-width: 260px;
  width: 75%;
  height: auto;
  margin-bottom: 20px;
}

.cabecalho-boas-vindas h1 {
  color: var(--cor-terracota);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.cabecalho-boas-vindas p {
  color: var(--cor-texto);
  opacity: 0.7;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
}

.pagina-avaliar label {
  display: block;
  font-weight: 700;
  margin-bottom: 12px;
  margin-top: 26px;
  color: var(--cor-texto);
  font-size: 0.95rem;
}

.pagina-avaliar label:first-of-type {
  margin-top: 0;
}

.grade-nps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.botao-nps {
  padding: 12px 0;
  border-radius: 12px;
  border: 1px solid var(--borda-fina);
  background: #FAF6EF;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  color: var(--cor-texto);
  transition: all 0.15s;
  font-family: var(--fonte-corpo);
}

.botao-nps.selecionado {
  background: var(--cor-terracota);
  color: white;
  border-color: var(--cor-terracota);
  box-shadow: 0 2px 8px rgba(220, 132, 98, 0.35);
}

.legenda-nps {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  opacity: 0.55;
  margin-top: 8px;
}

.pagina-avaliar textarea {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--borda-fina);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  min-height: 84px;
  background: #FAF6EF;
  color: var(--cor-texto);
}

.pagina-avaliar textarea:focus,
.botao-nps:focus {
  outline: 2px solid var(--cor-terracota-claro);
  outline-offset: 1px;
}

.grade-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.botao-opcao {
  padding: 10px 18px;
  border-radius: 24px;
  border: 1px solid var(--borda-fina);
  background: #FAF6EF;
  font-weight: 600;
  cursor: pointer;
  color: var(--cor-texto);
  font-size: 0.88rem;
  transition: all 0.15s;
  font-family: var(--fonte-corpo);
}

.botao-opcao.selecionado {
  background: var(--cor-oliva);
  color: white;
  border-color: var(--cor-oliva);
  box-shadow: 0 2px 8px rgba(162, 159, 118, 0.35);
}

.pagina-avaliar .botao-primario {
  width: 100%;
  margin-top: 30px;
  box-shadow: 0 3px 14px rgba(220, 132, 98, 0.3);
}

.pagina-avaliar .botao-primario:disabled {
  opacity: 0.4;
  box-shadow: none;
}

.privacidade {
  font-size: 0.72rem;
  opacity: 0.55;
  text-align: center;
  margin-top: 18px;
  line-height: 1.4;
}

#tela-obrigado {
  display: none;
  text-align: center;
}

#tela-obrigado h2 {
  color: var(--cor-terracota);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

#tela-obrigado p {
  line-height: 1.5;
  opacity: 0.8;
  font-size: 0.95rem;
}

.botao-google {
  display: inline-block;
  margin-top: 22px;
  padding: 15px 30px;
  border-radius: 14px;
  background: #4285F4;
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 3px 14px rgba(66, 133, 244, 0.3);
}

.icone-sucesso {
  width: 56px;
  height: 56px;
  background: var(--cor-terracota);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin: 0 auto 14px;
}

@media (max-width: 380px) {
  .card-madrecita.card-madrecita--largo {
    padding: 24px 18px;
  }
  .grade-nps {
    gap: 6px;
  }
  .botao-nps {
    padding: 10px 0;
    font-size: 0.9rem;
  }
  .cabecalho-boas-vindas h1 {
    font-size: 1.2rem;
  }
  .botao-opcao {
    padding: 9px 14px;
    font-size: 0.85rem;
  }
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  max-width: 400px;
  margin: 0 auto;
}

.formulario label {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  font-weight: 700;
  font-size: var(--texto-sm);
}

.formulario input, .formulario select, .formulario textarea {
  padding: var(--espaco-3);
  border-radius: var(--raio-md);
  border: 2px solid var(--cor-areia);
  font-size: var(--texto-md);
  font-family: var(--fonte-corpo);
  min-height: var(--toque-min);
}

.formulario textarea {
  min-height: 80px;
  resize: vertical;
}

.formulario .botao-primario,
.formulario .botao-secundario {
  width: 100%;
}

.botao-primario {
  padding: 10px 16px;
  border-radius: var(--raio-sm);
  border: none;
  background: var(--cor-terracota);
  color: white;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: var(--texto-sm);
  cursor: pointer;
  min-height: 40px;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/*
  Feedback de toque (pressed) — mesmo idioma visual de
  .card-modulo:active / .botao-colaborador:active (scale).
  Teclado PIN (.tecla) mantém o próprio ::before (areia).
*/
button:not(:disabled):not(.tecla):not(.tecla-vazia),
.item-tarefa-dashboard {
  transition: transform 0.1s ease;
}

button:not(:disabled):not(.tecla):not(.tecla-vazia):active,
.item-tarefa-dashboard:active {
  transform: scale(0.97);
}

.mensagens-comite {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px 4px;
  margin-bottom: 12px;
}

.bolha {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.bolha-usuario {
  align-self: flex-end;
  background: var(--cor-terracota);
  color: white;
  border-bottom-right-radius: 4px;
}

.bolha-ia {
  align-self: flex-start;
  background: white;
  border: 2px solid var(--cor-areia);
  border-bottom-left-radius: 4px;
}

.bolha-carregando {
  align-self: flex-start;
  background: white;
  border: 2px solid var(--cor-areia);
  color: var(--cor-texto);
  opacity: 0.6;
  font-style: italic;
}

.input-comite {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  position: sticky;
  bottom: 0;
  background: var(--cor-fundo);
  padding-top: 8px;
}

.input-comite textarea {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid var(--cor-areia);
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  resize: none;
}

.resumo-comite {
  background: white;
  border: 3px solid var(--cor-terracota);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

#painel-editar-usuario {
  scroll-margin-top: 80px;
}

.resumo-comite h3 {
  margin: 0 0 12px;
  color: var(--cor-terracota);
}

.resumo-comite dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0 0 16px;
  font-size: 0.9rem;
}

.resumo-comite dt {
  font-weight: 700;
  opacity: 0.7;
}

.resumo-comite dd {
  margin: 0;
}

.resumo-botoes {
  display: flex;
  gap: 10px;
}

.resumo-botoes button {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

.botao-confirmar-tarefa {
  background: var(--cor-terracota);
  color: white;
}

.botao-continuar-conversa {
  background: var(--cor-areia);
  color: var(--cor-texto);
}

.lista-usuarios {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.item-usuario {
  background: white;
  border: 2px solid var(--cor-areia);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.item-usuario p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

.item-posto {
  background: white;
  border: 2px solid var(--cor-areia);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.item-posto input, .item-posto select {
  padding: 8px;
  border-radius: 8px;
  border: 2px solid var(--cor-areia);
  font-family: var(--fonte-corpo);
}

.botao-microfone {
  border: 1.5px solid var(--cor-oliva);
  background: #fff;
  color: var(--cor-texto);
  width: 40px;
  height: 40px;
  border-radius: var(--raio-sm);
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.botao-microfone svg,
.icone-botao {
  width: 18px;
  height: 18px;
  display: block;
}

.btn-obturador-camera {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 16px auto 8px;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #f4f4f4;
  box-shadow: 0 0 0 3px #1a1a1a, 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.btn-obturador-camera-anel {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1a1a1a;
  pointer-events: none;
}
.btn-obturador-camera:active .btn-obturador-camera-anel {
  background: #e8e8e8;
}

.botao-microfone.gravando {
  background: var(--cor-erro);
  border-color: var(--cor-erro);
  color: #fff;
  animation: pulsar 1s infinite;
}

@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.item-feriado, .item-turno {
  background: white;
  border: 2px solid var(--cor-areia);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.item-feriado.inativo {
  opacity: 0.5;
}

.selo-abrangencia {
  font-size: 0.75rem;
  background: var(--cor-oliva);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
}

.item-tarefa-dashboard {
  background: white;
  border: 1px solid var(--borda-fina);
  border-left: 5px solid var(--cor-areia);
  border-radius: 14px;
  box-shadow: 0 1px 8px rgba(58, 52, 43, 0.05);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
}

.item-tarefa-dashboard.status-pendente { border-left-color: var(--cor-oliva); }
.item-tarefa-dashboard.status-concluida { border-left-color: var(--cor-ok); opacity: 0.7; }
.item-tarefa-dashboard.status-nao_conforme { border-left-color: var(--cor-erro); background: #fdf0ee; }
.item-tarefa-dashboard.status-atrasada { border-left-color: var(--cor-alerta); }

.item-tarefa-dashboard h4 { margin: 0 0 4px; font-size: 1rem; }
.item-tarefa-dashboard p { margin: 0; font-size: 0.85rem; opacity: 0.7; }

.selo-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 4px;
  background: var(--cor-areia);
}

.item-manutencao-tarefa {
  background: white;
  border: 2px solid var(--cor-areia);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.item-manutencao-tarefa .gt-item-info {
  flex: 1 1 auto;
  min-width: 0;
}

.item-manutencao-tarefa .gt-item-info strong {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.item-manutencao-tarefa p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.item-manutencao-tarefa .botoes-item {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.item-manutencao-tarefa .botoes-item .botao-secundario {
  margin-top: 0;
  padding: 8px 12px;
  font-size: 0.85rem;
  min-width: 0;
}

@media (max-width: 640px) {
  .item-manutencao-tarefa {
    flex-direction: column;
    align-items: stretch;
  }

  .item-manutencao-tarefa .botoes-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    justify-content: stretch;
  }

  .item-manutencao-tarefa .botoes-item .botao-secundario {
    width: 100%;
  }
}

.item-manutencao-tarefa.inativa {
  opacity: 0.65;
}

.gt-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.gt-toolbar-botoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.gt-toolbar-botoes .botao-primario,
.gt-toolbar-botoes .botao-secundario {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin-top: 0;
  padding: 12px 16px;
  text-align: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.2;
}

.gt-grupo-posto-cabecalho {
  margin: 14px 0 6px;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cor-texto);
  background: rgba(175, 77, 39, 0.1);
  border-left: 3px solid #AF4D27;
  border-radius: 0 8px 8px 0;
}

.gt-grupo-posto-cabecalho:first-child {
  margin-top: 0;
}

.gt-check {
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
}

.gt-check input {
  width: auto;
  padding: 0;
}

.gt-selo {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
  background: var(--cor-areia);
}

.gt-selo.inativa {
  background: #e8d0c8;
}

.item-historico {
  border-bottom: 1px solid var(--cor-areia);
  padding: 10px 0;
  font-size: 0.85rem;
}

.item-historico strong { color: var(--cor-terracota); }

.botao-reabrir {
  background: var(--cor-erro);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
}

.item-relatorio {
  background: white;
  border-left: 5px solid var(--cor-areia);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.item-relatorio.status-concluida { border-left-color: var(--cor-ok); }
.item-relatorio.status-nao_conforme { border-left-color: var(--cor-erro); }
.item-relatorio.status-pendente { border-left-color: var(--cor-oliva); }
.item-relatorio.status-atrasada { border-left-color: var(--cor-alerta); }

.item-relatorio h4 { margin: 0 0 4px; }
.item-relatorio p { margin: 2px 0; font-size: 0.85rem; opacity: 0.75; }

.item-afastamento {
  background: white;
  border-left: 5px solid var(--cor-oliva);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.item-afastamento p { margin: 4px 0 0; font-size: 0.85rem; opacity: 0.75; }

.botao-cancelar-afastamento {
  background: var(--cor-erro);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-top: 8px;
}

/* Barra superior logada: sticky no fluxo (n?o fixed flutuante) */
body:has(#barra-topo-usuario:not(.oculta)) {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

body:has(#barra-topo-usuario:not(.oculta)) .tela:not(.oculta) {
  align-self: center;
  width: 100%;
}

#barra-topo-usuario.barra-topo-usuario,
.barra-topo-usuario {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  /* Fundo alinhado ? p?gina; areia s? na linha de separa??o */
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-areia);
  box-shadow: none;
}

#badge-usuario-logado,
.barra-topo-nome {
  position: static;
  background: transparent;
  color: var(--cor-terracota-texto-barra);
  padding: 0;
  border-radius: 0;
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 1;
  min-width: 0;
  min-height: 44px;
  max-width: none;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.sino-wrap {
  position: static;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-sino {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 50%;
  /* Mesmo idioma visual do .botao-voltar */
  background: var(--cor-areia);
  color: var(--cor-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
}

.btn-sino:active {
  opacity: 0.85;
}

.btn-push-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--cor-areia);
  color: var(--cor-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.55;
}

.btn-push-toggle:active {
  opacity: 0.85;
}

.btn-push-toggle[aria-pressed="true"] {
  background: var(--cor-terracota, #c96f4a);
  color: #fff;
  opacity: 1;
}

.sino-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cor-terracota);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--cor-fundo);
}

.botao-sair-barra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  /* Herda .botao-sair (areia + texto); s? ajusta padding do toque */
  padding: 8px 14px;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
}

.botao-sair-barra svg {
  flex-shrink: 0;
}

/* Dropdown ancora na barra full-width (sticky = containing block) */
.sino-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  left: auto;
  width: min(320px, calc(100% - 24px));
  max-height: min(60vh, 60dvh);
  overflow-y: auto;
  background: white;
  border: 1px solid var(--cor-areia);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(58, 52, 43, 0.18);
  padding: 8px;
  box-sizing: border-box;
}

.sino-dropdown h4 {
  margin: 8px 6px 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-oliva);
}

.sino-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  border-radius: 8px;
  padding: 10px;
  margin: 4px 0;
  cursor: pointer;
  font-size: 0.85rem;
}

.sino-item:active {
  background: var(--cor-areia);
}

.sino-item strong {
  display: block;
  margin-bottom: 2px;
}

.sino-item span {
  opacity: 0.7;
  font-size: 0.78rem;
}

.sino-vazio {
  padding: 16px 10px;
  text-align: center;
  opacity: 0.7;
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  #barra-topo-usuario.barra-topo-usuario,
  .barra-topo-usuario {
    column-gap: 8px;
    padding: 8px 10px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-left: calc(10px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
  }

  #badge-usuario-logado,
  .barra-topo-nome {
    font-size: 0.82rem;
    padding: 0;
  }

  .botao-sair-barra {
    padding: 8px 10px;
    font-size: 0.85rem;
  }

  /* Mobile: quase largura total da barra/p?gina */
  .sino-dropdown {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    max-height: min(60dvh, 60svh);
  }
}

.item-apontamento {
  background: white;
  border-left: 5px solid var(--cor-oliva);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.item-apontamento.negativo { border-left-color: var(--cor-erro); }
.item-apontamento.positivo { border-left-color: #4a9d5f; }
.item-apontamento p { margin: 4px 0 0; font-size: 0.85rem; opacity: 0.75; }
.apontamento-resumo-estrelas {
  color: #D4A017;
  letter-spacing: 0.04em;
}

.botao-elevar-ocorrencia {
  background: var(--cor-areia);
  color: var(--cor-texto);
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-top: 8px;
  font-weight: 700;
}

.item-alerta-comportamental {
  background: white;
  border-left: 5px solid var(--cor-oliva);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.item-alerta-comportamental.negativo { border-left-color: var(--cor-erro); }
.item-alerta-comportamental p { margin: 4px 0 0; font-size: 0.85rem; opacity: 0.75; }

/* --- Quadro de limpeza --- */

.item-inspecao-limpeza,
.item-demanda-limpeza,
.item-historico-inspecao,
.item-contestacao-gestor {
  background: white;
  border: 1px solid var(--borda-fina);
  border-radius: 14px;
  box-shadow: 0 1px 8px rgba(58, 52, 43, 0.05);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.item-inspecao-limpeza.avaliado {
  border-color: var(--cor-oliva);
  box-shadow: var(--sombra-card);
}

.badge-periodica {
  display: inline-block;
  background: var(--cor-areia);
  color: var(--cor-texto);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 6px;
}

/* Rascunho Compras ? classes m?nimas (visual definitivo depois) */
.compras-subtitulo {
  opacity: 0.7;
  font-size: 0.85rem;
  margin: 0;
}

.compras-nav-abas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.compras-aba.ativa {
  border-color: var(--cor-terracota);
  font-weight: 700;
}

.compras-label {
  display: block;
  margin: 12px 0 8px;
}

.compras-texto-suave {
  opacity: 0.75;
  font-size: 0.9rem;
}

.compras-detalhe-titulo {
  margin: 12px 0 4px;
}

.compras-detalhe-meta {
  margin: 0 0 12px;
}

.compras-obs-levantamento {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 4px solid var(--cor-oliva, #6b7c3a);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0 8px 8px 0;
}

.compras-obs-levantamento strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.compras-obs-levantamento p {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.95rem;
  line-height: 1.4;
}

.compras-form-item {
  margin-bottom: 16px;
}

.compras-form-add-pedido {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.compras-add-titulo {
  margin: 0 0 8px;
  font-weight: 800;
}
.compras-add-msg {
  text-align: left;
  font-weight: 700;
  font-size: var(--texto-sm);
  margin: 0 0 8px;
  min-height: 0;
}
.compras-add-msg:not(.mensagem-erro):not(.oculta) {
  color: var(--cor-ok);
}
.compras-add-busca-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  font-weight: 700;
  font-size: var(--texto-sm);
  margin: 8px 0;
}
.compras-form-add-pedido .compras-add-busca,
.compras-form-add-pedido .compras-add-novo-nome,
.compras-form-add-pedido .compras-add-novo-un,
.compras-form-add-pedido .compras-add-qtd {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--toque-min);
  font-size: 16px;
  font-family: var(--fonte-corpo);
  padding: 10px 12px;
  border: 2px solid var(--cor-areia);
  border-radius: var(--raio-md);
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.compras-add-sugestoes {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 6px 0 10px;
}
.compras-add-resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda-fina);
}
.compras-add-res-nome {
  flex: 1 1 140px;
  font-weight: 800;
}
.compras-add-res-un {
  font-size: var(--texto-sm);
  opacity: 0.7;
}
.compras-add-res-qtd {
  width: 76px;
  min-height: var(--toque-min);
  box-sizing: border-box;
  font-size: 16px;
  padding: 8px;
  border: 2px solid var(--cor-areia);
  border-radius: var(--raio-sm);
}
.compras-add-res-incluir {
  min-height: var(--toque-min);
  padding: 8px 14px;
}
.compras-form-add-pedido .compras-add-toggle-novo,
.compras-form-add-pedido .compras-add-enviar {
  width: 100%;
  margin-top: 8px;
}

.compras-check-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.compras-check-status {
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}
.compras-check-pendente { background: #eee8df; color: #5c5346; }
.compras-check-no_carrinho { background: #e4f0d8; color: #2f5d28; }
.compras-check-nao_encontrado { background: #f5ead0; color: #6b4e16; }
.compras-check-comprado { background: #d8e8c8; color: #1f4a1c; }

/* Tela de mercado — lista dinâmica por categoria */
.compras-mercado-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  list-style: none;
  margin: 8px 0 4px;
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cor-fundo);
  font-size: var(--texto-xs);
  color: var(--cor-texto);
}
.compras-mercado-legenda li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.compras-mercado-legenda-icone {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.compras-mercado-legenda-icone .compras-mercado-carrinho-svg {
  width: 18px;
  height: 18px;
}
.compras-mercado-legenda-faixa {
  width: 16px;
  height: 12px;
  border-radius: 3px;
  border: 2px solid currentColor;
  display: inline-block;
}
.compras-mercado-legenda-faixa-andamento { color: var(--cor-alerta); }
.compras-mercado-legenda-faixa-ok { color: var(--cor-ok); }

.compras-mercado-progresso {
  margin: 0 0 12px;
  font-size: var(--texto-sm);
  color: var(--cor-texto);
  opacity: 0.8;
}

.compras-mercado-bloco {
  background: #fff;
  border: 5px solid var(--cor-alerta);
  border-radius: var(--raio-md);
  padding: 8px 10px 4px;
  margin-bottom: 12px;
}
.compras-mercado-bloco.incompleta {
  border-color: var(--cor-alerta);
}
.compras-mercado-bloco.completa {
  border-color: var(--cor-ok);
}
.compras-mercado-cat {
  margin: 0 0 6px;
  font-size: var(--texto-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.compras-mercado-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--toque-min);
  padding: 8px 4px;
  border-bottom: 1px solid var(--borda-fina);
}
.compras-mercado-linha:last-child { border-bottom: 0; }
.compras-mercado-linha-fixa { opacity: 0.7; }
.compras-mercado-linha-no_carrinho,
.compras-mercado-linha-nao_encontrado,
.compras-mercado-linha-comprado {
  opacity: 0.92;
}
.compras-mercado-nome {
  flex: 1;
  font-size: var(--texto-md);
  font-weight: 600;
}
.compras-mercado-qtd {
  font-size: var(--texto-sm);
  opacity: 0.75;
  white-space: nowrap;
}
.compras-mercado-carrinho {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.compras-mercado-carrinho-svg {
  width: 26px;
  height: 26px;
}
.compras-mercado-carrinho-pendente { color: #9a9084; }
.compras-mercado-carrinho-no_carrinho { color: var(--cor-ok); }
.compras-mercado-carrinho-nao_encontrado { color: var(--cor-erro); }
.compras-mercado-carrinho-comprado { color: var(--cor-ok); }

.compras-mercado-switch {
  display: flex;
  flex-shrink: 0;
  border: 1.5px solid rgba(58, 52, 43, 0.18);
  border-radius: var(--raio-pill);
  overflow: hidden;
  background: #f7f3ec;
}
.compras-mercado-polo {
  width: 52px;
  height: 42px;
  border: 0;
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.compras-mercado-polo .compras-mercado-carrinho-svg {
  width: 22px;
  height: 22px;
}
.compras-mercado-polo.esquerdo { color: var(--cor-erro); opacity: 0.35; }
.compras-mercado-polo.direito { color: var(--cor-ok); opacity: 0.35; }
.compras-mercado-switch-nao_encontrado .compras-mercado-polo.esquerdo {
  opacity: 1;
  background: #fdecea;
}
.compras-mercado-switch-no_carrinho .compras-mercado-polo.direito {
  opacity: 1;
  background: #e4f0d8;
}
.compras-mercado-add {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--borda-fina);
}

.compras-mercado-rodape {
  position: sticky;
  bottom: 0;
  padding: 12px 0 8px;
  background: var(--cor-fundo);
}
.compras-mercado-rodape .botao-primario {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .compras-mercado-linha { transition: none; }
}

.compras-card-lista {
  display: block;
  width: 100%;
  text-align: left;
  margin: 8px 0;
}

.compras-badge-auto {
  margin-left: 6px;
  vertical-align: middle;
}

.compras-badge-origem {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 4px;
  vertical-align: middle;
}

.compras-badge-avulsa {
  background: #e8f0e6;
  color: #2f5d28;
}

.compras-badge-levantamento {
  background: #f3ebe3;
  color: #6b4a2e;
}

.compras-form-avulsa {
  margin: 12px 0 20px;
}

.compras-card-avulsa {
  margin: 8px 0;
}

.compras-subtitulo-secao {
  margin: 16px 0 8px;
  font-size: 1rem;
}

.compras-grupo-fornecedor {
  margin: 8px 0 16px;
}

.compras-grupo-fornecedor > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.compras-grupo-fornecedor > summary::-webkit-details-marker {
  display: none;
}

.compras-grupo-fornecedor > summary h4 {
  margin: 0;
}

.compras-grupo-fornecedor > summary::after {
  content: "▾";
  font-size: 1.1rem;
  color: var(--cor-oliva);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.compras-grupo-fornecedor[open] > summary::after {
  transform: rotate(180deg);
}

.compras-itens-pedido-detalhes {
  margin-top: 8px;
}

.compras-itens-pedido-detalhes > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.compras-itens-pedido-detalhes > summary::-webkit-details-marker {
  display: none;
}

.compras-itens-pedido-detalhes > summary::after {
  content: "▾";
  color: var(--cor-oliva);
  transition: transform 0.15s ease;
}

.compras-itens-pedido-detalhes[open] > summary::after {
  transform: rotate(180deg);
}

.compras-faixa-pendentes {
  padding: 10px 14px;
  margin-bottom: 12px;
  border-left: 4px solid var(--cor-terracota);
  background: rgba(175, 77, 39, 0.08);
}

.compras-grupo-topo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.compras-grupo-rodape {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.compras-grupo-rodape select {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--toque-min);
  font-size: 16px;
  padding: 8px 10px;
  border: 2px solid var(--cor-areia);
  border-radius: var(--raio-md);
  font-family: var(--fonte-corpo);
}

.compras-item-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  min-height: var(--toque-min);
  cursor: pointer;
}

/* Checkbox circular estilo Gmail/WhatsApp — círculo que vira "✓" ao marcar,
   em vez do antigo quadrado verde com miolo branco. Mesma regra vale pro
   checkbox "Selecionar todos" (.compras-check-grupo-todos), pra não ficar
   com dois estilos de checkbox diferentes na mesma tela. */
.compras-check-item,
.compras-check-grupo-todos {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 2px solid var(--cor-areia);
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
  background: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.compras-check-item::before,
.compras-check-grupo-todos::before {
  content: "";
  width: 12px;
  height: 7px;
  margin-top: -2px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.12s ease;
}

.compras-check-item:checked,
.compras-check-grupo-todos:checked {
  border-color: var(--cor-ok);
  background: var(--cor-ok);
}

.compras-check-item:checked::before,
.compras-check-grupo-todos:checked::before {
  transform: rotate(-45deg) scale(1);
}

.compras-check-item:active,
.compras-check-grupo-todos:active {
  transform: scale(0.92);
}

.compras-check-todos {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 400;
}

/* Destaque de seleção estilo Gmail: fundo azul translúcido na linha inteira
   quando o item está marcado — hoje (antes) não havia feedback nenhum além
   do próprio checkbox. Azul deliberadamente fora da paleta terracota/oliva
   do resto do app, pra reaproveitar a convenção já conhecida do Gmail/WhatsApp. */
.compras-item-linha-selecionada {
  background: rgba(47, 111, 237, 0.08);
  border-radius: var(--raio-md);
  transition: background-color 0.15s ease;
}

.compras-resumo-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.compras-resumo-pdf {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.compras-modal-recebimento {
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
}

/* Conciliação de recebimento — várias fotos (páginas) por documento (24/09/2026) */
.compras-conc-dica {
  background: var(--cor-fundo, #fbf6ee);
  border-left: 4px solid var(--cor-terracota, #dc8462);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  line-height: 1.35;
  margin: 8px 0;
}
.compras-conc-fotografando {
  font-weight: 700;
  margin: 8px 0 6px;
}
/* O "Refazer" do bloco de câmera compartilhado não faz sentido aqui: cada
   foto vira uma página da lista (removível pelo ✕ da miniatura). */
.compras-host-camera-documento #btn-refazer-foto {
  display: none !important;
}
.compras-conc-paginas {
  margin: 10px 0;
}
.compras-conc-paginas-titulo {
  font-weight: 700;
  margin: 0 0 6px;
}
.compras-conc-paginas-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.compras-conc-pagina {
  position: relative;
  margin: 0;
  text-align: center;
}
.compras-conc-pagina img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--cor-areia, #e8dcc8);
  display: block;
}
.compras-conc-pagina figcaption {
  font-size: 0.8rem;
  margin-top: 2px;
}
.compras-conc-pagina-remover {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  line-height: 28px;
  padding: 0;
  cursor: pointer;
}
#compras-btn-proxima-pagina {
  width: 100%;
  margin: 6px 0 10px;
}

/* Cartaz do pedido em várias imagens — fallback sem compartilhamento de arquivos (24/09/2026) */
.compras-cartaz-paginas {
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
}
.compras-cartaz-paginas-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compras-cartaz-pagina {
  margin: 0;
}
.compras-cartaz-pagina img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: block;
}
.compras-cartaz-pagina figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-weight: 700;
}

.compras-modal-nao-resolvidos {
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
}

.compras-nr-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.compras-nr-item label {
  display: block;
  margin-top: 6px;
}

.compras-nr-grupo {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7f3ee;
}

.compras-nr-grupo h4 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.compras-toggle-modo {
  display: flex;
  margin-top: 8px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.compras-toggle-modo button {
  flex: 1;
  border: 0;
  padding: 8px 10px;
  font-weight: 700;
  background: #eeeae4;
  color: #5c5346;
}

.compras-toggle-entrega.ativo {
  background: #2f7d32;
  color: #fff;
}

.compras-toggle-retirada.ativo {
  background: #2a6f97;
  color: #fff;
}

.compras-badge-modo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.compras-badge-entrega {
  background: #2f7d32;
  color: #fff;
}

.compras-badge-retirada {
  background: #2a6f97;
  color: #fff;
}

.compras-badge-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.compras-badge-status-aberto {
  background: var(--cor-alerta);
  color: #fff;
}

.compras-badge-status-andamento {
  background: #2a6f97;
  color: #fff;
}

.compras-badge-status-ok {
  background: var(--cor-ok);
  color: #fff;
}

.compras-badge-status-divergencia {
  background: var(--cor-erro);
  color: #fff;
}

.compras-badge-status-cancelado {
  background: #9a9084;
  color: #fff;
}

.compras-linha-divergencia {
  border-left: 4px solid var(--cor-erro);
}

.compras-btn-perigo {
  border-color: var(--cor-erro);
  color: var(--cor-erro);
}

.compras-btn-cancelar-pedido {
  display: block;
  margin-top: 12px;
}

.compras-linha-pedido {
  width: 100%;
  text-align: left;
}

.compras-modal-pedido {
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
}

.compras-tabela-conc {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 12px 0;
}

.compras-tabela-conc th,
.compras-tabela-conc td {
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 6px 8px;
  vertical-align: top;
}

.compras-tabela-conc input[type="number"] {
  width: 4.5rem;
  min-height: 36px;
}

.compras-item-linha {
  margin: 8px 0;
  padding-top: 4px;
  cursor: pointer;
}

.compras-definir-fornecedor {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  align-items: center;
}

.compras-btn-gerar {
  margin-top: 12px;
  width: 100%;
}

.compras-acoes-status {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.compras-sugestao-ing {
  display: block;
  width: 100%;
  margin: 4px 0;
  text-align: left;
}

.compras-resumo-pedidos {
  margin-bottom: 16px;
}

.compras-resumo-pedido {
  margin: 8px 0;
}

.compras-resumo-itens {
  margin-top: 6px;
  font-size: 0.9rem;
}

.compras-aviso {
  font-size: 0.9rem;
  color: var(--cor-terracota-texto-barra, #AF4D27);
  margin: 4px 0 8px;
}

.compras-card-validacao {
  margin: 8px 0;
}

.alias-cand-card {
  margin: 12px 0;
  text-align: left;
}
.alias-cand-cabecalho {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.alias-cand-lado-a-lado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 640px) {
  .alias-cand-lado-a-lado {
    grid-template-columns: 1fr;
  }
}
.alias-cand-rotulo {
  margin: 0 0 4px;
  font-size: 0.8rem;
  opacity: 0.85;
}
.alias-cand-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.alias-cand-canon {
  margin: 8px 0 12px;
}

.compras-btn-avulsa {
  margin-top: 20px;
  width: 100%;
  opacity: 0.85;
}

.compras-painel-secao {
  margin: 16px 0;
}

.compras-painel-secao h4 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.compras-painel-item {
  margin: 8px 0;
  padding: 10px;
  border-left: 4px solid transparent;
}

.compras-painel-item.urgente {
  border-left-color: #AF4D27;
  background: rgba(175, 77, 39, 0.08);
}

.compras-painel-item.em-dia {
  border-left-color: #4a7c59;
  background: rgba(74, 124, 89, 0.08);
}

.compras-painel-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

.compras-painel-acoes input {
  width: 100px;
  max-width: 40%;
}

.compras-link-wa {
  display: inline-block;
  margin-top: 8px;
}

.compras-tipo-solicitacao {
  margin: 8px 0 12px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.03);
}

.compras-tipo-solicitacao label {
  display: block;
  margin: 4px 0;
}

.grade-notas-inspecao {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.botao-nota-inspecao {
  border: 2px solid var(--cor-areia);
  background: #FAF6EF;
  border-radius: 12px;
  padding: 12px 6px;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--cor-texto);
  cursor: pointer;
}

.botao-nota-inspecao.selecionado {
  background: var(--cor-oliva);
  border-color: var(--cor-oliva);
  color: white;
}

.botao-nota-inspecao.nota-pode-melhorar.selecionado {
  background: var(--cor-terracota);
  border-color: var(--cor-terracota);
}

.painel-pode-melhorar {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--cor-areia);
}

.painel-pode-melhorar textarea {
  width: 100%;
  min-height: 72px;
  border: 2px solid var(--cor-areia);
  border-radius: 12px;
  padding: 12px;
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  background: #FAF6EF;
  margin-bottom: 10px;
}

.camera-inline .camera-video-box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  margin-bottom: 10px;
}

.camera-inline video {
  width: 100%;
  display: block;
}

.foto-preview-inline {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 10px;
}

.rodape-inspecao {
  position: sticky;
  bottom: 0;
  padding: 16px 0 8px;
  background: linear-gradient(to top, var(--cor-fundo) 70%, transparent);
}

.item-demanda-limpeza .status-demanda {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--cor-oliva);
  font-weight: 700;
}

.comparativo-evidencias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.comparativo-evidencias img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--cor-areia);
  min-height: 80px;
  object-fit: cover;
  background: #FAF6EF;
}

.comparativo-evidencias p {
  font-size: 0.75rem;
  opacity: 0.7;
  margin: 0 0 4px;
}

.grade-decisao-contestacao {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.meta-item-limpeza {
  margin: 4px 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

.meta-item-limpeza.meta-secundaria {
  margin-top: 2px;
  font-size: 0.8rem;
}

.botao-espaco-topo,
.card-espaco-topo {
  margin-top: 10px;
}

.cabecalho-item-inspecao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.botao-criterio-ajuda {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--cor-oliva);
  background: var(--cor-areia);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
}

.modal-criterio {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-criterio.oculta {
  display: none;
}

.modal-criterio-fundo {
  position: absolute;
  inset: 0;
  background: rgba(58, 52, 43, 0.45);
}

.modal-criterio-caixa {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--cor-fundo);
  border: 2px solid var(--cor-areia);
  border-radius: 16px;
  padding: 20px;
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
}

.modal-criterio-caixa h3 {
  margin: 0 0 12px;
  color: var(--cor-terracota);
  font-family: var(--fonte-titulo);
}

.modal-criterio-caixa p {
  margin: 0 0 16px;
  line-height: 1.45;
  font-size: 0.95rem;
}

.postos-gestao-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.btn-excluir-posto {
  color: var(--cor-terracota-texto-barra, #AF4D27) !important;
  border-color: rgba(175, 77, 39, 0.35) !important;
}

.modal-posto-deps-caixa {
  max-width: 480px;
  max-height: min(80vh, 640px);
  overflow-y: auto;
}

.modal-posto-deps-caixa .posto-dep-bloco {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cor-areia, #e8dcc8);
}

.modal-posto-deps-caixa .posto-dep-bloco:last-of-type {
  border-bottom: none;
}

.modal-posto-deps-caixa .posto-dep-bloco p {
  margin: 4px 0 0;
}

.modal-posto-deps-caixa .posto-dep-onde {
  font-size: 0.85rem;
  opacity: 0.85;
}

.secao-higiene-limpeza,
.secao-posto-tarefas {
  margin-top: 16px;
  margin-bottom: 8px;
}

.secao-higiene-limpeza {
  /* O card raiz j? traz padding/sombra; a se??o s? posiciona */
  margin-top: 8px;
}

.titulo-secao-painel {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cor-terracota);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borda-fina);
}

.grade-higiene {
  display: grid;
  gap: 10px;
}

.instrucoes-tarefa-card,
.regras-ouro {
  margin: 8px 0;
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.9;
}

.lista-checklist-limpeza {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.linha-checklist-limpeza {
  display: grid;
  grid-template-columns: 1fr 88px 44px;
  gap: 8px;
  align-items: end;
  background: white;
  border: 2px solid var(--cor-areia);
  border-radius: 14px;
  padding: 12px;
}

.linha-checklist-limpeza.tipo-distribuicao {
  grid-template-columns: 1fr 1fr 72px 44px;
}

.linha-checklist-limpeza label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cor-texto);
}

.linha-checklist-limpeza input,
.linha-checklist-limpeza select {
  border: 2px solid var(--cor-areia);
  border-radius: 10px;
  padding: 10px;
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  background: #FAF6EF;
  color: var(--cor-texto);
}

#btn-adicionar-linha-checklist {
  margin-bottom: 12px;
}

#btn-enviar-checklist-limpeza {
  margin-top: 8px;
}

/* Atribui??o de ingredientes ? accordion por categoria */
.ing-attr-categoria {
  margin-bottom: 10px;
  border: 1px solid var(--cor-areia, #e8dcc8);
  border-radius: 12px;
  overflow: visible;
  background: #fff;
}

.ing-attr-categoria-cab {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  text-align: left;
  padding: 12px 14px;
  border: none;
  background: #FAF6EF;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
}

.ing-attr-categoria-cab strong {
  flex: 1 1 auto;
  font-size: 0.95rem;
}

.ing-attr-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--cor-oliva);
}

.ing-attr-seta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.ing-attr-categoria-cab[aria-expanded="true"] .ing-attr-seta svg {
  transform: rotate(90deg);
}

.ing-attr-categoria-corpo {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ing-attr-linha {
  padding: 10px 12px;
  margin: 0;
  /* Sobrescreve a borda uniforme de .card-madrecita (mesmo padr?o do meu-painel). */
  border-left: 4px solid transparent;
  overflow: visible;
}
.ing-attr-linha:focus-within {
  position: relative;
  z-index: 8;
}

.ing-attr-linha.ing-attr-status-pendente {
  border-left-color: #AF4D27;
  background: rgba(175, 77, 39, 0.06);
}

.ing-attr-linha.ing-attr-status-parcial {
  border-left-color: #2f6fed;
  background: rgba(47, 111, 237, 0.06);
}

.ing-attr-linha.ing-attr-status-completo {
  border-left-color: #4a7c59;
  background: rgba(74, 124, 89, 0.08);
}

.ing-attr-linha.ing-attr-flash-salvo {
  animation: ing-attr-flash-salvo 0.9s ease;
}

@keyframes ing-attr-flash-salvo {
  0% { box-shadow: inset 0 0 0 2px rgba(74, 124, 89, 0.85); }
  100% { box-shadow: inset 0 0 0 0 rgba(74, 124, 89, 0); }
}

.ing-attr-linha-topo {
  margin-bottom: 8px;
}

.ing-attr-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

.ing-attr-linha-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: flex-end;
  /* Evita corte horizontal do Fornecedor / ? Salvar em ~1366px. */
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.ing-attr-linha-controles label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  flex: 1 1 150px;
  min-width: min(150px, 100%);
  max-width: 100%;
  box-sizing: border-box;
}

.ing-attr-linha-controles label.ing-attr-dias {
  flex: 0 1 100px;
  min-width: 88px;
}

.ing-attr-linha-controles label.ing-attr-period-label {
  flex: 1 1 auto;
  min-width: 120px;
}

/* Periodicidade + toggles de dias na mesma coluna compacta. */
.ing-attr-period-com-dias {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 220px;
  min-width: min(180px, 100%);
  max-width: 260px;
  box-sizing: border-box;
}

.ing-attr-linha-controles select,
.ing-attr-linha-controles input[type="number"],
.ing-attr-linha-controles input[type="text"],
.ing-attr-linha-controles input[type="search"],
.ing-attr-linha-controles .autocomplete-wrap input {
  border: 2px solid var(--cor-areia, #e8dcc8);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
  background: #FAF6EF;
  color: var(--cor-texto);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.ing-attr-linha-controles .autocomplete-wrap {
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* Interruptor deslizante reutilizável. */
.switch-madrecita-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 210px;
  min-width: 0;
}

.switch-madrecita {
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid var(--cor-areia, #e8dcc8);
  background: #EFE7D9;
  padding: 0;
  position: relative;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.switch-madrecita.ligado {
  background: #6B7C3A;
  border-color: #6B7C3A;
}

.switch-madrecita-bolinha {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}

.switch-madrecita.ligado .switch-madrecita-bolinha {
  transform: translateX(22px);
}

.switch-madrecita-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 0.8rem;
}

.switch-madrecita-texto .compras-texto-suave {
  font-size: 0.72rem;
}

/* Gestão de subcategorias do levantamento. */
.subcat-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.subcat-linha strong {
  flex: 1 1 200px;
}

.ing-attr-linha-controles [data-salvar] {
  margin-top: 4px;
  flex: 0 0 auto;
  align-self: flex-end;
  white-space: nowrap;
}

.ing-attr-dias-semana {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

.ing-attr-dias-semana-toggles {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: visible;
}

.gt-ing-campos .ing-attr-dias-semana,
.gt-ing-linha .ing-attr-dias-semana {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.gt-ing-linha .ing-attr-dias-semana-toggles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.gt-ing-campos .ing-attr-dia-toggle,
.gt-ing-linha .ing-attr-dia-toggle {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 40px;
  min-height: 40px;
  flex: none;
  font-size: 0.8rem;
  padding: 0;
  box-sizing: border-box;
}

.ing-attr-dia-toggle {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--cor-areia, #e8dcc8);
  border-radius: 8px;
  background: #FAF6EF;
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.ing-attr-dia-toggle:hover {
  border-color: var(--cor-terracota-claro, #E4A572);
}

.ing-attr-dia-toggle.ativo {
  background: var(--cor-terracota, #DC8462);
  border-color: var(--cor-terracota-texto-barra, #AF4D27);
  color: #fff;
}

.ing-attr-dias-hint {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  min-width: 14px;
  min-height: 14px;
}

.ing-attr-dias-sugestao,
.ing-attr-dias-alerta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  opacity: 0.75;
}

.ing-attr-dias-sugestao {
  background: rgba(47, 111, 237, 0.12);
  color: #2f6fed;
}

.ing-attr-dias-alerta {
  background: rgba(175, 77, 39, 0.14);
  color: #AF4D27;
}

/* Levantamento de compra — execução na agenda */
.levantamento-secao-titulo {
  margin: 12px 0 8px;
  font-size: 1rem;
  color: var(--cor-texto);
}

/* Achado 22/09/2026: categoria virou botão recolhível (era só um rótulo) —
   cor de fundo/borda muda com o status (vazio/parcial/completo) pra dar
   pra ver de relance o que falta, numa lista de 100+ itens. */
.levantamento-categoria-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 16px 0 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-texto, #1a1a1a);
  background: rgba(175, 77, 39, 0.16);
  border: none;
  border-left: 4px solid #AF4D27;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.levantamento-categoria-cabecalho.status-parcial {
  background: rgba(214, 137, 16, 0.18);
  border-left-color: var(--cor-alerta);
}

.levantamento-categoria-cabecalho.status-completo {
  background: rgba(74, 157, 95, 0.18);
  border-left-color: var(--cor-ok);
}

.levantamento-categoria-seta {
  display: inline-block;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.levantamento-categoria-cabecalho.aberta .levantamento-categoria-seta {
  transform: rotate(90deg);
}

.levantamento-categoria-nome {
  flex: 1 1 auto;
}

.levantamento-categoria-contagem {
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  opacity: 0.85;
}

.levantamento-resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(175, 77, 39, 0.1);
  border: 1px solid rgba(175, 77, 39, 0.25);
  font-size: 0.95rem;
}

.levantamento-resumo-omitidos,
.levantamento-omitidos-nota {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

.levantamento-omitidos-nota {
  margin: 12px 0 0;
}

.levantamento-secao-em-dia {
  opacity: 0.85;
  margin-top: 20px;
}

/* Levantamento: form mais largo para caber Contagem | Sugestão lado a lado
   sem estourar (o .formulario global fica em max-width: 400px). */
#form-executar-levantamento.formulario {
  max-width: 640px;
}

/* Achado 24/09/2026: campo de observação livre opcional, presente em
   qualquer execução de tarefa (foto/dado/passos) — mesmo estilo visual do
   campo de observação já usado no levantamento de compras (.levantamento-observacao),
   mas como classe própria porque é um conceito diferente (alerta o gestor
   quando preenchido, em vez de ir pro comprador). */
.observacao-livre,
.levantamento-observacao {
  display: block;
  margin: 16px 0 12px;
  font-size: 0.95rem;
}

.observacao-livre textarea,
.levantamento-observacao textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 72px;
  padding: 10px 12px;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.35;
  resize: vertical;
  box-sizing: border-box;
}

.levantamento-item {
  margin: 8px 0;
  padding: 12px 14px;
  border-left: 4px solid transparent;
}

/* Contém overflow horizontal neste card (não no .card-madrecita global —
   overflow:hidden em todos os cards cortaria sombra/dropdowns). */
.levantamento-item.card-madrecita {
  overflow-x: hidden;
}

.levantamento-campos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}

@media (min-width: 640px) {
  .levantamento-campos {
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    align-items: start;
  }
}

.levantamento-item.levantamento-precisa {
  border-left-color: #AF4D27;
  background: rgba(175, 77, 39, 0.06);
}

.levantamento-item.levantamento-em-dia {
  border-left-color: #4a7c59;
  background: rgba(74, 124, 89, 0.06);
  opacity: 0.92;
}

.levantamento-hint-periodicidade {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #6b5a4a;
  font-weight: 400;
}

.levantamento-item-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-bottom: 8px;
}

.levantamento-status-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
}

.levantamento-status-badge.badge-precisa {
  background: #e6a817;
  color: #3d2e00;
}

.levantamento-status-badge.badge-em-dia {
  background: #2f5e3d;
  color: #fff;
}

.tarefa-passos {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tarefa-passo-linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid rgba(175, 77, 39, 0.45);
  background: rgba(175, 77, 39, 0.06);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}

.tarefa-passo-linha.concluido {
  border-color: rgba(74, 124, 89, 0.55);
  background: rgba(74, 124, 89, 0.1);
}

.tarefa-passo-check {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  border: 2px solid #AF4D27;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  line-height: 1;
  margin-top: 2px;
}

.tarefa-passo-linha.concluido .tarefa-passo-check {
  border-color: #4a7c59;
  background: #4a7c59;
  color: #fff;
}

.tarefa-passo-texto {
  flex: 1;
  font-size: 0.95rem;
}

/* Passos com resposta (097): número, texto curto, Sim/Não. O enunciado não
   é botão — responder é o que marca o passo como feito. */
.tarefa-passo-item-resposta {
  border-radius: 10px;
}
.tarefa-passo-linha.com-resposta {
  cursor: default;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.tarefa-passo-resposta {
  padding: 10px 12px 12px;
  border: 2px solid rgba(175, 77, 39, 0.45);
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #fff;
}
.tarefa-passo-linha.concluido + .tarefa-passo-resposta {
  border-color: rgba(74, 124, 89, 0.55);
}
.tarefa-passo-resposta-label {
  display: block;
  font-size: var(--texto-xs);
  font-weight: 700;
  margin-bottom: 6px;
  opacity: 0.75;
}
.tarefa-passo-numero-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tarefa-passo-input-numero {
  width: 9em;
  min-height: 48px;
  font-size: 1.25rem; /* >=16px: sem zoom automático no Safari/iOS */
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--cor-oliva);
  box-sizing: border-box;
}
.tarefa-passo-unidade {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cor-terracota-texto-barra);
}
.tarefa-passo-input-texto {
  width: 100%;
  min-height: 64px;
  font-size: 16px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--cor-oliva);
  box-sizing: border-box;
  font-family: var(--fonte-corpo);
  resize: vertical;
}
.tarefa-passo-resposta-erro {
  margin: 6px 0 0;
  font-size: var(--texto-xs);
  color: var(--cor-erro);
}
.tarefa-passo-sim-nao {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tarefa-passo-sim-nao button {
  min-height: 56px;
  border-radius: 10px;
  border: 2px solid var(--cor-oliva);
  background: #fff;
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tarefa-passo-sim-nao .tarefa-passo-btn-sim.ativo {
  background: #4a7c59;
  border-color: #4a7c59;
  color: #fff;
}
.tarefa-passo-sim-nao .tarefa-passo-btn-nao.ativo {
  background: var(--cor-erro);
  border-color: var(--cor-erro);
  color: #fff;
}
.tarefa-passo-selo-nao {
  display: block;
  margin-top: 4px;
  font-size: var(--texto-xs);
  font-weight: 700;
  color: var(--cor-erro);
}

.apontamento-estrelas {
  margin: 8px 0 14px;
}

.apontamento-estrelas-botoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.apontamento-estrela-btn {
  min-width: 2.6rem;
  min-height: 2.6rem;
  border: none;
  background: transparent;
  color: #cfc6b8;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.apontamento-estrela-btn.ativa {
  color: #D4A017;
  background: transparent;
  border: none;
}

.apontamento-estrelas-legenda {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: #666;
}

.ajuda-botao-desabilitado {
  margin: 10px 0 6px;
  font-size: 0.85rem;
  color: #666;
}

.ajuda-botao-desabilitado.oculta {
  display: none;
}

.apontamento-progresso {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 1rem;
}

.apontamento-faltam {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: #666;
}

.apontamento-faltam .falta {
  color: #AF4D27;
  font-weight: 600;
}

.apontamento-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.nc-thread-mensagens {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
  max-height: 45vh;
  overflow-y: auto;
}

.nc-thread-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  background: #F1E6DC;
}

.nc-thread-msg.nc-thread-msg-gestor {
  align-self: flex-end;
  background: #DC8462;
  color: #fff;
}

.nc-thread-msg-meta {
  display: block;
  font-size: 0.78em;
  opacity: 0.75;
  margin-bottom: 2px;
}

.nc-thread-msg-texto {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Interruptor liga/desliga de "marcar como feito" — achado 22/09/2026
   (usuário, após dois formatos que não funcionaram no teste real): nem
   toque simples (fácil demais de acionar sem querer) nem "deslizar até o
   fim" (rebuscado demais pro que é só um auxílio diário do próprio
   colaborador — quem avalia de verdade é a inspeção separada). Pequeno,
   compacto, livremente reversível. */
.interruptor-conclusao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
}

.interruptor-conclusao input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.interruptor-conclusao-trilho {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #D8CFC3;
  transition: background 0.15s ease;
}

.interruptor-conclusao-trilho::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.interruptor-conclusao input:checked + .interruptor-conclusao-trilho {
  background: var(--cor-terracota);
}

.interruptor-conclusao input:checked + .interruptor-conclusao-trilho::before {
  transform: translateX(20px);
}

.interruptor-conclusao input:disabled + .interruptor-conclusao-trilho {
  opacity: 0.6;
}

.interruptor-conclusao input:focus-visible + .interruptor-conclusao-trilho {
  outline: 2px solid var(--cor-terracota);
  outline-offset: 2px;
}

.interruptor-conclusao-texto {
  font-weight: 600;
  font-size: var(--texto-sm);
  color: var(--cor-texto);
}

.apontamento-acoes-interruptor {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.item-apontamento.nada_a_observar {
  border-left: 4px solid #888;
}

.levantamento-qtd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  min-width: 0;
}

.levantamento-qtd-rotulo {
  color: var(--cor-texto, #1a1a1a);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72rem;
}

.levantamento-sugestao-hint {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666;
}

.levantamento-contador {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  box-sizing: border-box;
}
.levantamento-contador .levantamento-unidade-select {
  flex: 0 0 auto;
  margin: 0;
}

.levantamento-contador-btn {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  background: #ffffff;
  color: #1a1a1a;
  font-family: var(--fonte-corpo);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.levantamento-contador-btn:active {
  background: #1a1a1a;
  color: #ffffff;
}

.levantamento-contador-valor {
  flex: 1 1 auto;
  min-width: 0;
  width: 0; /* força o flex a repartir o espaço restante, sem mínimo intrínseco do input */
  min-height: 44px;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  padding: 8px 10px;
  font-family: var(--fonte-corpo);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: #111111;
  background: #ffffff;
  -moz-appearance: textfield;
  box-sizing: border-box;
}

/* Achado 14-15/09/2026: destaque visual de campo obrigatório vazio ao
   tentar concluir o levantamento — antes só existia a mensagem de texto,
   pouco visível quando faltam vários itens. */
.levantamento-contador-valor.levantamento-campo-invalido {
  border-color: var(--cor-erro);
  background: #fdf0ee;
}

.levantamento-contador-valor::-webkit-outer-spin-button,
.levantamento-contador-valor::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.levantamento-contador-valor::placeholder {
  color: #888888;
  font-weight: 600;
}

/* Evita pull-to-refresh acidental durante o preenchimento do levantamento */
body.tela-levantamento-ativa {
  overscroll-behavior-y: none;
}

#tela-executar-tarefa.sem-pull-refresh {
  overscroll-behavior-y: contain;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

#status-rascunho-levantamento {
  margin: 0 0 10px;
  font-size: 0.85rem;
}

.levantamento-bloco {
  margin: 8px 0;
  padding: 10px 12px;
}

.levantamento-bloco label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}

/* Painel de Tarefas (KPIs + postos expansíveis) */
.painel-dia-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 8px;
}
.painel-dia-kpi {
  padding: 12px 14px;
  border-left: 4px solid var(--cor-oliva);
  background: rgba(0, 0, 0, 0.03);
}
.painel-dia-kpi.kpi-ok { border-left-color: #3f6212; }
.painel-dia-kpi.kpi-atencao { border-left-color: #b45309; }
.painel-dia-kpi.kpi-alerta { border-left-color: #9a3412; }
.painel-dia-kpi-valor {
  display: block;
  font-family: 'Boston Angel', Georgia, serif;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--cor-terracota);
}
.painel-dia-kpi-valor small {
  font-size: 0.95rem;
  opacity: 0.7;
  margin-left: 2px;
}
.painel-dia-kpi-rotulo {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  opacity: 0.8;
}
/* Painel de Tarefas unificado (24/09/2026): KPI é botão — tocar filtra a lista abaixo. */
.painel-dia-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  flex-wrap: wrap;
}
.painel-dia-topo p { margin: 0; flex: 1 1 200px; }
.painel-dia-atualizar { flex: 0 0 auto; }
button.painel-dia-kpi {
  font: inherit;
  color: inherit;
  text-align: left;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  min-height: 72px;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
button.painel-dia-kpi:hover { background: rgba(0, 0, 0, 0.06); }
button.painel-dia-kpi:focus-visible { outline: 2px solid var(--cor-terracota); outline-offset: 2px; }
button.painel-dia-kpi.ativo {
  background: #fff;
  border-top-color: var(--cor-terracota);
  border-right-color: var(--cor-terracota);
  border-bottom-color: var(--cor-terracota);
  box-shadow: 0 1px 4px rgba(58, 52, 43, 0.15);
}
@media (min-width: 720px) {
  .painel-dia-kpis { grid-template-columns: repeat(5, 1fr); }
}
.painel-dia-filtro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  flex-wrap: wrap;
  margin: 4px 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff4ec;
  border: 1px solid var(--cor-terracota-claro);
  font-size: var(--texto-sm);
}
.painel-dia-filtro .botao-secundario { margin: 0; padding: 6px 12px; min-height: 36px; }
.painel-dia-resumo-posto { margin: -4px 0 8px; font-size: var(--texto-xs); }
.painel-dia-btn-lev { margin: 4px 0 8px; }
.item-tarefa-dashboard.status-sem-agenda { border-left-color: #9ca3af; opacity: 0.8; }
.painel-sup-posto-cab {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  border-left: 4px solid var(--cor-oliva);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.painel-sup-posto-titulo {
  font-weight: 700;
}
.painel-sup-posto-seta {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.75rem;
  opacity: 0.7;
}
.painel-sup-posto-corpo {
  padding: 8px 0 4px 8px;
}
.painel-sup-lev-detalhe {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.03);
}

/* Lista de navegação (CONFIGURADOR / hubs) — não usa cards grandes */
.lista-nav-config {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}
.lista-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 12px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.lista-nav-item:active {
  background: rgba(0, 0, 0, 0.04);
}
.lista-nav-item-texto {
  flex: 1;
  min-width: 0;
}
.lista-nav-item-texto h3 {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: 700;
}
.lista-nav-item-texto p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.75;
}
.lista-nav-seta {
  opacity: 0.45;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Seletor de unidade levantamento */
.levantamento-unidade-select {
  min-width: 4.2rem;
  width: auto;
  max-width: 5rem;
  min-height: 44px;
  padding: 4px 22px 4px 8px;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  background: #ffffff;
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  touch-action: manipulation;
  appearance: auto;
  -webkit-appearance: menulist;
}
.compras-unidades-info {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 2px;
}

/* Painel supervisao de tarefas (diagnostico admin) */
.painel-sup-posto {
  margin-bottom: 12px;
}
.painel-sup-tarefa {
  border-left: 4px solid var(--cor-oliva);
  background: rgba(0,0,0,0.03);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.painel-sup-tarefa.status-pendente { border-left-color: var(--cor-oliva); }
.painel-sup-tarefa.status-atrasada { border-left-color: var(--cor-alerta); }
.painel-sup-tarefa.status-concluida { border-left-color: var(--cor-ok); }
.painel-sup-tarefa.status-reaberta { border-left-color: var(--cor-terracota); }
.painel-sup-tarefa.status-sem-agenda-hoje { border-left-color: #9ca3af; }
.painel-sup-tarefa-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.painel-sup-badge {
  font-size: 0.75rem;
  text-transform: lowercase;
  white-space: nowrap;
  opacity: 0.85;
}
.painel-sup-lev {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.9rem;
}
.painel-sup-lev-urgente { color: #9a3412; }
.painel-sup-lev-ok { color: #3f6212; }

/* Agenda periodo (colaborador) */
.agenda-periodo-dia {
  margin-bottom: 24px;
}
.agenda-periodo-hoje {
  outline: 2px solid var(--cor-terracota, #AF4D27);
  outline-offset: 4px;
  padding: 8px;
}
.agenda-periodo-fechado {
  opacity: 0.72;
}
.agenda-periodo-tarefa {
  border-left: 4px solid var(--cor-oliva);
  background: rgba(0,0,0,0.03);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.agenda-periodo-tarefa.clicavel {
  cursor: pointer;
}
.agenda-periodo-tarefa.clicavel:active {
  transform: scale(0.99);
}
.agenda-periodo-itens {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.9rem;
}
.agenda-periodo-itens em {
  opacity: 0.75;
  font-size: 0.85em;
}

/* Modal tipo de solicita??o / confirma??o pedido */
.compras-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.compras-modal-caixa {
  background: #fff;
  border-radius: 12px;
  padding: 20px 18px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}
.compras-modal-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.compras-wa-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.autocomplete-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.formulario .autocomplete-wrap input[type="search"],
.ing-attr-linha-controles .autocomplete-wrap input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--cor-areia, #e8dcc8);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
  background: #FAF6EF;
  color: var(--cor-texto);
}
.formulario .autocomplete-wrap input[type="search"] {
  padding: 14px;
  font-size: 1rem;
}
.autocomplete-lista {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 240px;
  overflow-y: auto;
  background: #FAF6EF;
  border: 2px solid var(--cor-areia, #e8dcc8);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.autocomplete-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid rgba(232, 220, 200, 0.8);
  background: transparent;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
  color: var(--cor-texto);
}
.autocomplete-item:last-child {
  border-bottom: 0;
}
.autocomplete-item:hover,
.autocomplete-item:focus {
  background: rgba(107, 124, 58, 0.12);
}
.autocomplete-vazio {
  margin: 0;
  padding: 10px 12px;
  color: #666;
  font-size: 0.9rem;
}

.compras-filtro-nota {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(74, 124, 89, 0.1);
  font-size: 0.85rem;
  color: #3d5a45;
}

.compras-aviso-filtro {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f4e6c8;
  border: 1px solid #c4a35a;
  font-size: 0.9rem;
  color: #5a3d12;
}

.compras-aviso-filtro-limpar {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #8b4513;
  text-decoration: underline;
  cursor: pointer;
}
.compras-item-linha {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 8px 14px;
  margin: 0 -8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.compras-item-linha.arrastando-ponteiro {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transform: scale(1.02);
  opacity: 0.95;
  background: #fff;
  border-radius: 10px;
}
.compras-item-placeholder {
  margin: 8px 0;
  border: 2px dashed rgba(175, 77, 39, 0.45);
  border-radius: 10px;
  background: rgba(175, 77, 39, 0.06);
  box-sizing: border-box;
}
.handle-arraste {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(175, 77, 39, 0.4);
  border-radius: 10px;
  background: rgba(175, 77, 39, 0.12);
  cursor: grab;
  color: #3a342b;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.handle-arraste:active {
  cursor: grabbing;
  background: rgba(175, 77, 39, 0.22);
}
.handle-arraste svg {
  display: block;
  pointer-events: none;
}
.gt-ing-linha-topo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.gt-ing-linha-topo .gt-ing-nome {
  flex: 1;
  min-width: 0;
}
.gt-ing-grupo-itens .item-placeholder-arraste,
.compras-item-placeholder,
.item-placeholder-arraste {
  margin: 8px 0;
  border: 2px dashed rgba(175, 77, 39, 0.45);
  border-radius: 10px;
  background: rgba(175, 77, 39, 0.06);
  box-sizing: border-box;
}
.gt-ing-linha.arrastando-ponteiro {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transform: scale(1.02);
  background: #fff;
}
.compras-item-corpo {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.compras-item-cab {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.compras-chip {
  font-size: 0.8rem;
  color: #666;
}
.compras-rotulo {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
  margin-bottom: 2px;
}
/* Hierarquia clara: Produto (item-cab) → Contagem (secundário, discreto) →
   Solicitado (destaque, com a roleta +/- e o Salvar) — antes os dois últimos
   dividiam um grid de 2 colunas que embaralhava a ordem visual no celular. */
.compras-item-contagem {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: #666;
}
.compras-item-contagem .compras-rotulo {
  display: inline;
  margin-right: 4px;
}
.compras-item-solicitado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.compras-roleta-qtd {
  max-width: 168px;
}
.compras-roleta-qtd .levantamento-contador-btn {
  flex-basis: 36px;
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  height: 36px;
  font-size: 1.1rem;
  border-radius: 8px;
}
.compras-roleta-qtd .levantamento-contador-valor {
  min-height: 36px;
  font-size: 1.1rem;
  border-width: 2px;
  border-radius: 8px;
  padding: 4px 6px;
}
/* Salvar: verde por padrão; vira vermelho assim que o valor solicitado é
   alterado (sinaliza "precisa salvar"); volta pro verde depois de salvo —
   antes clicar em Salvar não dava nenhum retorno visual, parecia travado. */
.compras-btn-salvar-sug {
  min-height: var(--toque-min);
  padding: 8px 16px;
  border: none;
  border-radius: var(--raio-md);
  background: var(--cor-ok);
  color: #fff;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.compras-btn-salvar-sug:disabled {
  opacity: 0.7;
  cursor: default;
}
.compras-btn-salvar-sug-suja {
  background: var(--cor-erro);
}
.compras-auditoria {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: #8a3b1a;
}

.levantamento-hint-urgencia:empty {
  display: none;
}

.secao-demandas-levantamento {
  margin-top: 20px;
}

.item-demanda-levantamento {
  margin-bottom: 10px;
}

.demanda-preview-itens {
  margin: 8px 0 4px;
  padding-left: 18px;
  font-size: var(--texto-sm);
}
.demanda-preview-itens li { margin: 2px 0; }
.demanda-preview-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.compras-tabela-conc tr.conc-extra td {
  background: #fff3cd;
}

.secao-gt-ingredientes {
  margin: 16px 0;
}

.secao-gt-ingredientes h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.gt-ing-cabecalho {
  display: none;
}

.gt-ing-linha {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
  padding: 8px 10px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.gt-ing-nome {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.gt-ing-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.secao-gt-ingredientes .gt-ing-campos select,
.secao-gt-ingredientes .gt-ing-campos .autocomplete-wrap,
.secao-gt-ingredientes .gt-ing-campos .autocomplete-wrap input {
  flex: 1 1 108px;
  min-width: 0;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.85rem;
  padding: 6px 8px;
  margin: 0;
}

.gt-ing-campos .autocomplete-wrap {
  padding: 0;
}

.gt-ing-linha.ing-attr-flash-salvo {
  animation: ing-attr-flash-salvo 0.9s ease;
}

.gt-ing-salvar {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  padding: 4px 10px;
  border: none;
  border-radius: 8px;
  background: var(--cor-terracota, #AF4D27);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

@media (min-width: 560px) {
  /* O formulário desta tela tem max-width: 400px — uma grade de 5 colunas
     estoura o card. Empilha os campos e deixa os dias em 2 linhas de 3. */
  .gt-ing-cabecalho {
    display: none;
  }

  .gt-ing-linha .ing-attr-dias-semana {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .gt-ing-linha .ing-attr-dias-semana-toggles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }

  .gt-ing-linha .ing-attr-dia-toggle {
    height: 40px;
    min-height: 40px;
  }
}

.linha-item-avulso-info {
  flex: 1 1 160px;
  min-width: 0;
}
.linha-item-avulso-info strong {
  display: block;
}
.btn-enviar-item-avulso {
  width: 100%;
}

.secao-levantamento-avulso {
  margin: 16px 0 8px;
}

.lista-levantamento-avulso {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.lista-levantamento-avulso li {
  margin-bottom: 6px;
}

.painel-levantamento-avulso {
  margin-top: 10px;
}

.check-ops {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: var(--texto-sm);
}

.check-ops input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.check-ops-caixa {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--cor-oliva);
  border-radius: 6px;
  background: #fff;
  position: relative;
}

.check-ops input:focus-visible + .check-ops-caixa {
  outline: 3px solid var(--cor-terracota);
  outline-offset: 2px;
}

.check-ops input:checked + .check-ops-caixa {
  background: var(--cor-terracota);
  border-color: var(--cor-terracota);
}

.check-ops input:checked + .check-ops-caixa::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ing-attr-legenda {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--borda-fina);
  border-radius: var(--raio-sm);
  font-size: var(--texto-xs);
}

.ing-attr-legenda-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.35;
}

.ing-attr-legenda-item::before {
  content: '';
  width: 4px;
  height: 1.1em;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ing-attr-legenda-pendente::before { background: #AF4D27; }
.ing-attr-legenda-parcial::before { background: #2f6fed; }
.ing-attr-legenda-completo::before { background: #4a7c59; }

.ing-attr-falta {
  margin: 4px 0 0;
  font-size: var(--texto-xs);
  font-weight: 600;
  opacity: 0.8;
}

.selo-ops {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--raio-pill);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--cor-areia);
  color: var(--cor-texto);
}

.selo-ops--aviso {
  background: rgba(175, 77, 39, 0.15);
  color: var(--cor-terracota-texto-barra);
}

.ing-attr-banner {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--cor-oliva);
  border-radius: var(--raio-sm);
  background: #fff;
}

.ing-attr-banner h3 {
  margin: 0 0 8px;
  font-size: var(--texto-md);
}

.ing-attr-banner-postos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0;
}

.ing-attr-banner-posto strong {
  display: block;
  margin-bottom: 4px;
}

.ing-attr-banner-itens {
  margin: 0 0 8px;
  padding-left: 1.1em;
  font-size: var(--texto-sm);
}

.ing-attr-banner-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ing-attr-banner--compacto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ing-attr-period-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ing-attr-period-chip {
  border: 1.5px solid var(--cor-areia);
  background: #fff;
  color: var(--cor-texto);
  border-radius: var(--raio-pill);
  padding: 6px 12px;
  min-height: 32px;
  font-family: var(--fonte-corpo);
  font-size: var(--texto-xs);
  font-weight: 600;
  cursor: pointer;
}

.ing-attr-period-chip.ativo {
  background: var(--cor-terracota);
  border-color: var(--cor-terracota);
  color: #fff;
}

/* ============================================================
   Camada de primitivas, layout, TV, PWA-adjacent e acessibilidade
   Auditoria UI/UX — etapas 2 a 6 (31/08/2026)
   ============================================================ */

.botao,
.botao--primario,
.botao--secundario,
.botao--ghost,
.botao--perigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: var(--toque-min);
  padding: 10px 16px;
  border: none;
  border-radius: var(--raio-sm);
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: var(--texto-sm);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.botao--primario {
  background: var(--cor-terracota);
  color: #fff;
}

.botao--secundario {
  background: #fff;
  color: var(--cor-texto);
  border: 1.5px solid var(--cor-oliva);
}

.botao--ghost {
  background: var(--cor-areia);
  color: var(--cor-texto);
}

.botao--perigo {
  background: var(--cor-erro);
  color: #fff;
}

.botao--pequeno {
  min-height: 36px;
  padding: var(--espaco-2) var(--espaco-3);
  font-size: var(--texto-sm);
}

.botao:disabled,
.botao-primario:disabled,
.botao-secundario:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Achado 22/09/2026 (usuário, UX): os botões de rotina ("Pedir item
   avulso", "Registrar não conformidade", "Minhas não conformidades")
   precisam de um sinal visual claro de qual está aberto no momento, pra
   não parecer que clicou na rotina errada. */
.botao-rotina-ativa {
  background: var(--cor-terracota);
  color: #fff;
  border-color: var(--cor-terracota);
}

/* Host onde o bloco de câmera compartilhado (#bloco-camera-compartilhada) é
   movido quando um fluxo fora do módulo de Tarefas precisa de uma foto —
   regra 22/09/2026 (usuário): evidência é sempre foto tirada na hora, nunca
   "escolher arquivo". Vazio, não ocupa espaço; com o bloco dentro, ganha
   respiro. */
.host-camera-evidencia:empty {
  margin: 0;
}
.host-camera-evidencia:not(:empty) {
  margin: 10px 0;
  max-width: 360px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  font-weight: 700;
  font-size: var(--texto-sm);
}

.campo input,
.campo select,
.campo textarea {
  padding: var(--espaco-3);
  border-radius: var(--raio-md);
  border: 2px solid var(--cor-areia);
  font-size: var(--texto-md);
  font-family: var(--fonte-corpo);
  min-height: var(--toque-min);
  background: #fff;
  color: var(--cor-texto);
}

.tabela-ops,
.compras-tabela-conc {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
  margin: var(--espaco-3) 0;
  background: #fff;
  border-radius: var(--raio-md);
  overflow: hidden;
}

.tabela-ops th,
.tabela-ops td,
.compras-tabela-conc th,
.compras-tabela-conc td {
  border: 1px solid var(--borda-fina);
  padding: var(--espaco-2) var(--espaco-3);
  vertical-align: top;
  text-align: left;
}

.tabela-ops th,
.compras-tabela-conc th {
  background: var(--cor-areia);
  font-weight: 700;
  font-size: var(--texto-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tabela-ops tbody tr:nth-child(even),
.compras-tabela-conc tbody tr:nth-child(even) {
  background: rgba(251, 246, 238, 0.7);
}

/* Conciliação de recebimento (mockup validado em 12/09/2026): mantém a
   tabela (em vez de cards) — cabe mais itens legíveis de uma vez — mas com
   quebra de texto no nome, cor por status e detalhe/alias/foto recolhidos
   numa segunda linha por item, em vez de colunas sempre visíveis. */
.conc-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave, #8b8272);
  margin-bottom: 8px;
}
.conc-legenda-item { display: inline-flex; align-items: center; gap: 5px; }
.conc-ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.conc-ponto-ok { background: var(--cor-ok); }
.conc-ponto-falta { background: var(--cor-alerta); }
.conc-ponto-sobra { background: var(--cor-erro); }

.conc-tabela-wrap { overflow-x: auto; border-radius: var(--raio-md); }
.conc-tabela-v2 { margin: 0; min-width: 0; table-layout: fixed; width: 100%; }
.conc-tabela-v2 .conc-th-num { text-align: center; }
.conc-tabela-v2 th, .conc-tabela-v2 td { padding: 8px 6px; }
.conc-tabela-v2 thead th {
  white-space: normal; font-size: 0.62rem; letter-spacing: 0.01em; line-height: 1.2;
  border-right: 1px solid rgba(58, 52, 43, 0.18);
}
.conc-tabela-v2 thead th:last-child { border-right: none; }
.conc-tabela-v2 tbody tr.conc-linha { border-left: 4px solid transparent; }
.conc-tabela-v2 tbody tr.conc-st-ok { border-left-color: var(--cor-ok); }
.conc-tabela-v2 tbody tr.conc-st-falta { border-left-color: var(--cor-alerta); }
.conc-tabela-v2 tbody tr.conc-st-sobra { border-left-color: var(--cor-erro); }

.conc-col-produto { width: 34%; white-space: normal; word-break: break-word; }
.conc-col-produto .conc-nome { display: block; font-weight: 600; font-size: var(--texto-sm); }
.conc-col-produto .conc-via { display: block; color: var(--cor-texto-suave, #8b8272); font-size: 0.68rem; margin-top: 2px; }

.conc-qtd-pedida { color: var(--cor-texto-suave, #8b8272); width: 15%; }
.conc-tabela-v2 th.conc-th-num, .conc-tabela-v2 td.conc-th-num { width: 15%; }
.conc-tabela-v2 input.conc-qtd { width: 100%; max-width: 3.4rem; min-height: 34px; text-align: center; padding: 2px; }
.conc-tabela-v2 th:last-child, .conc-tabela-v2 td.conc-col-acoes { width: 15%; }
.conc-col-acoes { text-align: right; white-space: nowrap; }
.conc-btn-detalhe {
  border: 1px solid var(--borda-fina); background: #fff; color: var(--cor-texto-suave, #8b8272);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 0.75rem;
}
.conc-btn-detalhe[aria-expanded="true"] { background: var(--cor-areia); color: var(--cor-texto); }

.conc-pill {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: var(--texto-xs); font-weight: 700; white-space: nowrap;
}
.conc-pill-ok { background: rgba(74, 157, 95, 0.15); color: var(--cor-ok); }
.conc-pill-falta { background: rgba(214, 137, 16, 0.15); color: var(--cor-alerta); }
.conc-pill-sobra { background: rgba(192, 57, 43, 0.15); color: var(--cor-erro); }

.conc-tabela-v2 tr.conc-detalhe td { padding: 0; }
.conc-tabela-v2 tr.conc-detalhe[hidden] { display: none; }
.conc-detalhe-caixa {
  background: var(--cor-areia); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px;
}
.conc-campo-preco { display: flex; align-items: center; gap: 8px; font-size: var(--texto-sm); }
.conc-campo-preco input { width: 90px; padding: 5px 7px; border-radius: 6px; border: 1px solid var(--borda-fina); }

.conc-alerta-alias {
  border: 1px solid var(--cor-erro); border-radius: 9px; padding: 10px 12px; background: #fff;
  display: flex; flex-direction: column; gap: 8px;
}
.conc-alerta-alias strong { color: var(--cor-erro); font-size: var(--texto-sm); }
.conc-alerta-alias p { margin: 0; font-size: var(--texto-xs); color: var(--cor-texto-suave, #8b8272); line-height: 1.45; }
.conc-alerta-escolha { display: flex; gap: 8px; flex-wrap: wrap; }
.conc-chip-escolha {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--borda-fina); background: #fff; font-size: var(--texto-xs); cursor: pointer;
}
.conc-chip-escolha.conc-chip-marcado { border-color: var(--cor-terracota); background: var(--cor-terracota-claro); }

.conc-btn-foto {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px; border: 1px dashed var(--cor-texto-suave, #8b8272);
  background: transparent; color: var(--cor-texto-suave, #8b8272); font-size: var(--texto-xs); cursor: pointer;
}
.conc-btn-foto:hover { border-color: var(--cor-terracota); color: var(--cor-terracota); }

/* --- Responsividade real (Etapa 3) --- */

@container tela (min-width: 560px) {
  .grade-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grade-hub-higiene {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container tela (min-width: 900px) {
  .grade-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  body:not(:has(#tela-selecao:not(.oculta))):not(.modo-tv) {
    align-items: flex-start;
    justify-content: center;
  }

  .tela:not(.tela-login):not(#tela-pin):not(#tela-trocar-pin) {
    max-width: 1080px;
    padding: var(--espaco-7) var(--espaco-8);
  }
}

@media (min-width: 1280px) {
  .tela:not(.tela-login):not(#tela-pin):not(#tela-trocar-pin) {
    max-width: 1280px;
  }
}

@media (min-width: 1600px) {
  .tela:not(.tela-login):not(#tela-pin):not(#tela-trocar-pin) {
    max-width: 1440px;
  }

  .grade-cards {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* --- Modo TV (Etapa 4) — fundo oliva, texto areia, sem chrome de interação --- */

.tela-tv {
  display: none;
}

body.modo-tv {
  background: var(--cor-oliva);
  color: var(--cor-areia);
  align-items: stretch;
  justify-content: stretch;
  min-height: 100dvh;
  overflow: hidden;
}

body.modo-tv #barra-topo-usuario,
body.modo-tv .botao-sair,
body.modo-tv .botao-voltar,
body.modo-tv .btn-sino {
  display: none !important;
}

body.modo-tv .tela-tv {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(24px, 4vw, 64px);
  background: var(--cor-oliva);
  color: var(--cor-areia);
}

body.modo-tv .tv-marca {
  font-family: var(--fonte-ops);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  margin: 0;
  line-height: 0.9;
  color: var(--cor-areia);
}

body.modo-tv .tv-slides {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
}

body.modo-tv .tv-slide {
  display: none;
  text-align: center;
  max-width: 56rem;
}

body.modo-tv .tv-slide.ativo {
  display: block;
  animation: tv-entrar var(--duracao-media) ease;
}

body.modo-tv .tv-slide h1 {
  font-family: var(--fonte-ops);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  margin: var(--espaco-4) 0 var(--espaco-6);
  color: var(--cor-areia);
}

body.modo-tv .tv-slide p {
  font-family: var(--fonte-corpo);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  line-height: 1.45;
  margin: 0;
}

body.modo-tv .tv-aviso {
  opacity: 0.92;
}

body.modo-tv .tv-rodape {
  font-size: clamp(0.9rem, 1.6vw, 1.2rem);
  opacity: 0.75;
  text-align: center;
  margin: 0;
}

@keyframes tv-entrar {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* --- Acessibilidade e feedback (Etapa 6) --- */

:focus {
  outline: none;
}

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

.esqueleto-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  grid-column: 1 / -1;
}

.esqueleto-linha,
.esqueleto-card {
  border-radius: var(--raio-lg);
  background: linear-gradient(
    90deg,
    rgba(58, 52, 43, 0.06) 25%,
    rgba(58, 52, 43, 0.12) 37%,
    rgba(58, 52, 43, 0.06) 63%
  );
  background-size: 400% 100%;
  animation: esqueleto 1.35s ease infinite;
}

.esqueleto-linha {
  height: 56px;
}

.esqueleto-card {
  min-height: 96px;
  border-radius: var(--raio-xl);
}

.grade-nomes .esqueleto-card {
  min-height: 96px;
}

@keyframes esqueleto {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.regiao-toast {
  position: fixed;
  bottom: calc(var(--espaco-4) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  width: min(420px, calc(100% - 24px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: var(--cor-texto);
  color: var(--cor-fundo);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-elevada);
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: var(--texto-sm);
  animation: toast-entrar var(--duracao-media) ease;
}

.toast--erro {
  background: var(--cor-erro);
  color: #fff;
}

.toast--sucesso {
  background: var(--cor-oliva);
  color: #fff;
}

.toast-sair {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--duracao-rapida) ease, transform var(--duracao-rapida) ease;
}

@keyframes toast-entrar {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@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;
  }
}

.campo-busca-label {
  display: block;
  width: 100%;
  margin: 12px 0 8px;
  font-weight: 700;
  font-size: var(--texto-sm);
}

.campo-busca,
input.campo-busca,
select.campo-busca,
textarea.campo-busca {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--toque-min);
  padding: 12px 14px;
  font-size: var(--texto-md);
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  background: #fff;
  border: 2px solid var(--cor-areia);
  border-radius: var(--raio-md);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.card-badge-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15em;
  height: 1.15em;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cor-terracota);
  color: #fff;
  font-size: 0.62em;
  font-weight: 800;
  vertical-align: super;
  line-height: 1;
  position: relative;
  top: -0.4em;
}

.card-badge-numero.oculta {
  display: none !important;
}

.apontamento-acoes-coluna {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.apontamento-acoes-coluna .botao-secundario.ativa {
  background: var(--cor-oliva);
  color: #fff;
  border-color: var(--cor-oliva);
}

.compras-bloco-avulso {
  margin: 12px 0;
  border: 2px solid var(--cor-terracota);
}

.compras-avulso-linha {
  margin: 6px 0 0;
  font-size: 0.95rem;
}

.compras-chip-avulso {
  background: var(--cor-terracota);
  color: #fff;
}

.compras-tipo-botoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.compras-tipo-opt.ativa,
.compras-modo-opt.ativa {
  background: var(--cor-oliva);
  color: #fff;
  border-color: var(--cor-oliva);
}

.compras-lista-fornecedores {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
  max-height: 220px;
  overflow-y: auto;
}

.compras-forn-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--borda-fina);
  border-radius: var(--raio-sm);
  font-weight: 600;
}

.compras-resumo-pdf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Aprovação de divergência do comprador (13/09/2026) */
#compras-aprovacao-divergencia-bloco {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.compras-aprovacao-linha {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compras-aprovacao-linha:last-child { border-bottom: none; }
.compras-aprovacao-linha-cabecalho {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.compras-aprovacao-escolha {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--texto-sm, 0.9rem);
}
.compras-aprovacao-foto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px dashed var(--cor-erro);
  border-radius: 8px;
  background: rgba(192, 57, 43, 0.06);
  font-size: var(--texto-xs, 0.78rem);
}

/* --- Passos com evidência por foto (migração 096, 23/09/2026) --- */

/* Editor de passos em Gerenciar Tarefas */
.secao-gt-passos {
  margin: 16px 0;
}
.secao-gt-passos h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.secao-gt-passos > .compras-texto-suave {
  margin: 0 0 8px;
}
.gt-passo-linha,
.gt-passo-rascunho {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-2);
  padding: 10px 12px;
  box-sizing: border-box;
}
.gt-passo-linha.arrastando-ponteiro {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  background: #fff3cd;
}
.gt-passo-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
}
.gt-passo-numero {
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  margin-top: 8px;
  border-radius: var(--raio-pill);
  background: var(--cor-areia);
  color: var(--cor-texto);
  font-weight: 800;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.formulario textarea.gt-passo-texto,
.gt-passo-texto {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  font-size: 0.92rem;
  line-height: 1.35;
  resize: vertical;
}
.gt-segmentado {
  display: inline-flex;
  align-self: flex-start;
  border: 1.5px solid var(--cor-oliva);
  border-radius: var(--raio-sm);
  overflow: hidden;
}
.gt-segmentado button {
  margin: 0;
  padding: 8px 14px;
  min-height: 40px;
  border: none;
  background: #fff;
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  font-weight: 600;
  cursor: pointer;
}
.gt-segmentado button + button {
  border-left: 1.5px solid var(--cor-oliva);
}
.gt-segmentado button.ativo {
  background: var(--cor-terracota);
  color: #fff;
}
/* Seletor de tipo de resposta do passo (5 tipos, 097) — substituiu o
   segmentado de 2 opções, que não cabe 5 opções num celular. */
.gt-passo-tipo-label,
.gt-passo-unidade-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--texto-sm);
  font-weight: 700;
  margin: 0;
}
.formulario select.gt-passo-tipo,
.gt-passo-tipo {
  min-height: 44px;
  font-size: 16px; /* >=16px evita zoom automático do Safari/iOS ao focar */
  font-family: var(--fonte-corpo);
  max-width: 320px;
}
.formulario input.gt-passo-unidade,
.gt-passo-unidade {
  min-height: 40px;
  max-width: 160px;
  font-size: 16px;
}
.gt-passo-tipo-ajuda {
  margin: -4px 0 0;
  font-size: var(--texto-xs);
}
.gt-passo-linha.gt-passo-local {
  border-left: 3px dashed var(--cor-terracota-claro);
}
.gt-passos-ajuda-novo {
  padding: 8px 10px;
  border-radius: var(--raio-sm);
  background: #fff4ec;
  border: 1px solid var(--cor-terracota-claro);
}
.gt-passo-nota-padrao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  padding: 8px 10px;
  border-radius: var(--raio-sm);
  background: rgba(214, 137, 16, 0.1);
  border: 1px dashed rgba(214, 137, 16, 0.55);
  font-size: 0.85rem;
}
.gt-passo-nota-padrao.definido {
  background: rgba(74, 157, 95, 0.1);
  border-color: rgba(74, 157, 95, 0.5);
}
.gt-passo-nota-padrao span {
  flex: 1 1 180px;
}
.gt-passo-nota-padrao .botao-secundario {
  min-height: 36px;
  padding: 6px 12px;
}
.gt-passo-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
}
.gt-passo-link {
  margin: 0;
  padding: 6px 0;
  border: none;
  background: none;
  color: var(--cor-terracota-texto-barra);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
}
.gt-passo-link.gt-passo-excluir {
  margin-left: auto;
  color: var(--cor-erro);
}
.gt-passo-thumb {
  margin: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-fina);
  background: var(--cor-fundo);
  overflow: hidden;
  cursor: pointer;
}
.gt-passo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gt-passo-ref-rotulo {
  font-size: 0.85rem;
}

/* Tela "Eleger padrão" */
.padrao-passo-texto {
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.35;
}
.padrao-passo-subtitulo {
  margin: 20px 0 8px;
  font-size: 0.95rem;
}
.padrao-passo-vazio {
  padding: 10px 12px;
  border-radius: var(--raio-sm);
  background: rgba(214, 137, 16, 0.1);
  border: 1px dashed rgba(214, 137, 16, 0.55);
  font-size: 0.9rem;
}
.padrao-passo-vigente-card {
  display: flex;
  gap: var(--espaco-3);
  align-items: center;
  padding: 10px;
  border-radius: var(--raio-md);
  border: 2px solid var(--cor-ok);
  background: rgba(74, 157, 95, 0.08);
}
.padrao-passo-vigente-card .padrao-passo-foto {
  width: 110px;
  flex: 0 0 110px;
}
.padrao-passo-vigente-card p {
  margin: 4px 0 0;
}
.padrao-passo-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--espaco-3);
}
.padrao-passo-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: var(--raio-md);
  border: 1px solid var(--borda-fina);
  background: #fff;
  box-shadow: var(--sombra-card);
}
.padrao-passo-card.vigente {
  border: 2px solid var(--cor-ok);
}
.padrao-passo-foto {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--raio-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cor-areia);
  cursor: zoom-in;
  width: 100%;
}
.padrao-passo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.padrao-passo-meta {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.3;
}
.padrao-passo-card .botao-secundario {
  min-height: 36px;
  padding: 6px 8px;
  font-size: 0.8rem;
}
.padrao-passo-selo {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--raio-pill);
  background: var(--cor-ok);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}
.padrao-passo-historico {
  margin-top: 20px;
}
.padrao-passo-historico summary {
  cursor: pointer;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Galeria de fotos da tela de detalhe de execução (23/09/2026, continuação
   3) — grade responsiva reaproveitando o mesmo padrão de
   `repeat(auto-fill, minmax(...))` de `.padrao-passo-grade` acima. Só a
   tela de DETALHE mostra várias fotos; a listagem rápida do sino continua
   com 1 foto só (evidencia_url), sem mudança. */
.galeria-fotos-execucao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--espaco-3);
  margin-top: var(--espaco-2);
}
.foto-execucao-item {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--borda-fina);
  border-radius: var(--raio-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cor-areia);
  cursor: zoom-in;
  width: 100%;
}
.foto-execucao-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.foto-execucao-badge {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  padding: 2px 6px;
  border-radius: var(--raio-pill);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: rgba(58, 52, 43, 0.55);
}
.foto-execucao-badge.status-conforme { background: var(--cor-ok); }
.foto-execucao-badge.status-nao_conforme { background: var(--cor-erro); }
.foto-execucao-badge.status-incerto { background: var(--cor-alerta); }
/* Só aparece quando o número de fotos passa de umas 3 linhas de grade numa
   tela estreita (limiar de bom senso, 23/09/2026: mais de 9 fotos). Com
   poucas fotos (caso real de hoje, 5), fica oculta e a grade inteira
   aparece sem paginação. */
.galeria-fotos-paginacao {
  display: flex;
  justify-content: center;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}
.galeria-fotos-paginacao button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--borda-fina);
  cursor: pointer;
}
.galeria-fotos-paginacao button.ativo {
  background: var(--cor-terracota);
}
.modal-padrao-opcoes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-3);
}
.modal-padrao-opcoes .botao-secundario {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
}
.modal-padrao-opcoes .botao-secundario span {
  font-weight: 400;
  font-size: 0.82rem;
}
.modal-padrao-opcoes .modal-padrao-descartar {
  border-color: rgba(192, 57, 43, 0.45);
  color: var(--cor-erro);
}
.modal-imagem-caixa {
  max-width: 560px;
}
.modal-imagem-caixa img {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
  margin-bottom: var(--espaco-3);
  border-radius: var(--raio-sm);
  background: #000;
}

/* Execução: passo com foto própria */
.tarefa-passo-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tarefa-passo-selo-foto {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cor-terracota-texto-barra);
}
.tarefa-passo-linha.concluido .tarefa-passo-selo-foto {
  color: #4a7c59;
}
.tarefa-passo-miniatura {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}
.tarefa-passo-ver-exemplo {
  align-self: flex-end;
  margin: 0;
  padding: 2px 4px;
  border: none;
  background: none;
  color: var(--cor-oliva);
  font-family: var(--fonte-corpo);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.tarefa-passo-camera {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding: 8px;
  border-radius: 10px;
  border: 2px solid rgba(175, 77, 39, 0.45);
  background: #fff;
}
.tarefa-passo-camera p {
  margin: 0;
}

/* Passos sugeridos pelo Comitê de IA (097) — mesmo editor de Gerenciar Tarefas. */
.secao-comite-passos {
  margin: 0 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--borda-fina);
}
.secao-comite-passos h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.secao-comite-passos .gt-passo-texto {
  font-size: 16px;
  padding: 8px;
  border-radius: 8px;
  border: 1.5px solid var(--cor-areia);
  font-family: var(--fonte-corpo);
}