/* =========================================================
   SISTEMA DE IDENTIFICAÇÃO DE MATERIAIS
   Identidade visual: preto, branco e cinza. O preto é a cor da
   marca (cabeçalho, botões, item ativo). Sóbrio e neutro.
   ========================================================= */

:root {
  --preto: #141414;            /* tinta e cor da marca */
  --cinza-escuro: #454549;
  --cinza-medio: #7a7a82;
  --cinza-claro: #dcdcdf;
  --cinza-fundo: #f2f2f4;
  --branco: #ffffff;

  --marsala: #141414;          /* botões, item ativo, CTAs = preto */
  --marsala-escuro: #000000;   /* pressionado */
  --grafite: #141414;          /* barras estruturais: cabeçalho, faixas */
  --acento: #454549;           /* links de edição — cinza escuro */

  --status-ok: #2f7d4f;
  --status-ok-bg: #eaf5ee;
  --status-proximo: #6e4a5c;   /* atenção — ameixa (vinho acinzentado) */
  --status-proximo-bg: #ece2e7;
  --status-vencido: #b3261e;
  --status-vencido-bg: #fbeaea;

  --raio: 12px;
  --sombra: 0 4px 18px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  background: var(--cinza-fundo);
  color: var(--preto);
  -webkit-font-smoothing: antialiased;
  /* Rede de segurança pra celular: uma palavra longa (ou um título sem
     espaço pra quebrar) nunca deve vazar pra cima do elemento vizinho —
     quebra a palavra em vez de estourar a caixa. Herdado por padrão. */
  overflow-wrap: break-word;
}

/* ---------- Cabeçalho ---------- */

.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--grafite);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}

.cabecalho__logo-empresa img,
.cabecalho__logo-empresa svg {
  display: block;
  height: 28px;
  width: auto;
}

.cabecalho__logo-empresa span {
  color: var(--branco);
}

.cabecalho__titulo {
  text-align: center;
  line-height: 1.2;
  flex: 1;
}

.stocki-linha {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--branco);
}

.stocki-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  text-align: left;
}

.stocki-icone {
  height: 40px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

#marca-stocki {
  font-family: "Poppins", -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.stocki-linha2 {
  display: block;
}

.stocki-i {
  font-family: "Poppins", -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Layout geral ---------- */

.conteudo {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

/* ---------- Card do produto ---------- */

@keyframes entrada-suave {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-produto {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  animation: entrada-suave 0.35s ease-out;
}

.card-produto__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--cinza-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cinza-medio);
  font-size: 13px;
  overflow: hidden;
}

.card-produto__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-produto__corpo {
  padding: 20px;
}

.card-produto__codigo {
  font-size: 13px;
  color: var(--cinza-medio);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.card-produto__nome {
  font-size: 22px;
  font-weight: 700;
  margin: 2px 0 2px;
  letter-spacing: 0.01em;
}

.card-produto__especificacao {
  font-size: 14px;
  color: var(--cinza-escuro);
  margin-bottom: 18px;
}

/* ---------- Grade de informações ---------- */

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
  padding-top: 16px;
  border-top: 1px solid var(--cinza-claro);
}

.info-grid__item--full {
  grid-column: 1 / -1;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cinza-medio);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.icone-label {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}

.info-valor {
  font-size: 15px;
  font-weight: 600;
  color: var(--preto);
}

.info-valor--carregando {
  color: var(--cinza-medio);
  font-weight: 400;
  font-style: italic;
}

/* ---------- Indicador de validade ---------- */

.badge-validade {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.badge-validade svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.badge-validade--ok {
  color: var(--status-ok);
  background: var(--status-ok-bg);
}

.badge-validade--proximo {
  color: var(--status-proximo);
  background: var(--status-proximo-bg);
}

.badge-validade--vencido {
  color: var(--status-vencido);
  background: var(--status-vencido-bg);
}

/* ---------- Botão FDS ---------- */

.btn-fds {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 13px 16px;
  text-align: center;
  background: var(--marsala);
  color: var(--branco);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}

.btn-fds:hover,
.btn-fds:active {
  opacity: 0.8;
}

/* ---------- Estados: carregando / erro ---------- */

.estado-mensagem {
  text-align: center;
  padding: 60px 20px;
  color: var(--cinza-escuro);
}

.estado-mensagem h2 {
  font-size: 17px;
  margin-bottom: 6px;
  color: var(--preto);
}

.estado-mensagem p {
  font-size: 14px;
  color: var(--cinza-medio);
  margin: 0;
}

.oculto {
  display: none !important;
}

/* ---------- Rodapé ---------- */

.rodape {
  text-align: center;
  font-size: 11px;
  color: var(--cinza-medio);
  padding: 20px 16px 32px;
}

/* ---------- Página inicial (index) ---------- */

.pagina-inicial {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 16px;
}

.pagina-inicial h1 {
  font-size: 18px;
}

.busca-produto {
  display: flex;
  gap: 8px;
  margin: 16px 0 24px;
}

.busca-produto input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--cinza-claro);
  border-radius: 4px;
  font-size: 15px;
}

.busca-produto button {
  padding: 12px 18px;
  border: none;
  border-radius: 4px;
  background: var(--marsala);
  color: var(--branco);
  font-weight: 700;
  font-size: 14px;
}

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

.lista-produtos li {
  border-bottom: 1px solid var(--cinza-claro);
}

.lista-produtos a {
  display: block;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--preto);
}

.lista-produtos .codigo {
  font-size: 12px;
  color: var(--cinza-medio);
  font-weight: 600;
}

.lista-produtos .nome {
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Formulário de movimentação (produto.html) ---------- */

.movimentacao {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--cinza-claro);
}

.movimentacao__gatilho {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--branco);
  border: 1.5px solid var(--preto);
  color: var(--preto);
  font-weight: 700;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}

.movimentacao__form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.campo label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--cinza-escuro);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.campo select,
.campo input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--cinza-claro);
  border-radius: 4px;
  font-size: 15px;
  background: var(--branco);
  color: var(--preto);
}

.campo input[readonly] {
  background: var(--cinza-fundo);
  color: var(--cinza-escuro);
}

/* Olhinho de "ver senha" injetado dentro de cada campo de senha */
.senha-wrap {
  position: relative;
}

.senha-wrap input {
  padding-right: 42px;
}

.olho-senha {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--cinza-medio);
}

.olho-senha:hover {
  color: var(--cinza-escuro);
}

.olho-senha svg {
  width: 18px;
  height: 18px;
}

.tipo-toggle {
  display: flex;
  gap: 8px;
}

.tipo-toggle button {
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--cinza-claro);
  background: var(--branco);
  color: var(--cinza-escuro);
  border-radius: 4px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.tipo-toggle button.ativo[data-tipo="entrada"] {
  border-color: var(--status-ok);
  background: var(--status-ok-bg);
  color: var(--status-ok);
}

.tipo-toggle button.ativo[data-tipo="baixa"] {
  border-color: var(--status-vencido);
  background: var(--status-vencido-bg);
  color: var(--status-vencido);
}

.btn-confirmar {
  padding: 12px;
  border: none;
  border-radius: 4px;
  background: var(--marsala);
  color: var(--branco);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-confirmar:hover {
  opacity: 0.85;
}

.btn-cancelar {
  padding: 10px;
  border: none;
  background: none;
  color: var(--cinza-medio);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

@keyframes destaque-mensagem {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.mensagem-feedback {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 4px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: destaque-mensagem 0.2s ease-out;
}

.mensagem-feedback svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.mensagem-feedback--erro {
  background: var(--status-vencido-bg);
  color: var(--status-vencido);
}

.mensagem-feedback--sucesso {
  background: var(--status-ok-bg);
  color: var(--status-ok);
}

/* ---------- Caixa de papelão enchendo (carregamento do login) ---------- */

.overlay-carregando {
  position: fixed;
  inset: 0;
  background: var(--grafite);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 999;
}

.caixa-loading {
  width: 84px;
  height: 84px;
}

.caixa-loading__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 2s cubic-bezier(0.65, 0, 0.35, 1);
}

.caixa-loading.cheia .caixa-loading__logo {
  clip-path: inset(0% 0 0 0);
}

.caixa-loading__texto {
  color: var(--cinza-claro);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* ---------- Telas de login / setup (admin) ---------- */

.tela-auth {
  max-width: 380px;
  margin: 60px auto;
  padding: 28px 22px;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.tela-auth h1 {
  font-size: 18px;
  margin-top: 0;
}

.tela-auth p.subtitulo {
  font-size: 13px;
  color: var(--cinza-medio);
  margin-top: -6px;
  margin-bottom: 20px;
}

.tela-auth form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tela-auth button[type="submit"] {
  padding: 12px;
  border: none;
  border-radius: 4px;
  background: var(--marsala);
  color: var(--branco);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-top: 4px;
}

@keyframes pulso-verde {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.stocki-rodape {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--cinza-claro);
  text-align: center;
}

.stocki-slogan {
  font-size: 13px;
  font-style: italic;
  color: var(--cinza-escuro);
  margin: 0 0 6px;
}

.stocki-institucional {
  font-size: 11px;
  color: var(--cinza-medio);
  margin: 0 0 12px;
}

.stocki-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--cinza-medio);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.stocki-status-bolinha {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-ok);
  display: inline-block;
  animation: pulso-verde 2s ease-in-out infinite;
}

.stocki-selo {
  background: var(--cinza-fundo);
  color: var(--cinza-escuro);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stocki-link-termos {
  font-size: 11px;
  color: var(--cinza-medio);
  text-decoration: underline;
}

/* ---------- Painel administrativo ---------- */

.admin-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--grafite);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-cabecalho__sair {
  background: none;
  border: none;
  color: var(--cinza-claro);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

#painel-nome-empresa {
  color: var(--branco);
}

.admin-layout {
  display: flex;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
}

.admin-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 122px;
  padding: 16px 8px;
  gap: 4px;
  position: sticky;
  top: 0;
}

.admin-sidebar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--cinza-medio);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-sidebar button span {
  min-width: 0;
  width: 100%;
  word-break: break-word;
}

.admin-sidebar button svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.admin-sidebar button:hover {
  background: var(--cinza-fundo);
  color: var(--preto);
}

.admin-sidebar button.ativa {
  background: var(--marsala);
  color: var(--branco);
}

.admin-conteudo {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 20px 16px 60px;
}

.admin-abas {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--cinza-claro);
  flex-wrap: wrap;
}

.admin-abas button {
  padding: 8px 14px;
  border: none;
  border-radius: 4px 4px 0 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--cinza-medio);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.icone-seta {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

button[data-sub-aba="entrada"] .icone-seta {
  color: var(--status-ok);
}

button[data-sub-aba="saida"] .icone-seta {
  color: var(--status-vencido);
}

.admin-abas button:hover {
  background: var(--cinza-fundo);
  color: var(--preto);
}

.admin-abas button.ativa {
  color: var(--branco);
  background: var(--marsala);
}

.admin-abas button.ativa:hover {
  background: var(--marsala-escuro);
  color: var(--branco);
}

.admin-secao {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px;
  margin-bottom: 18px;
}

/* Mesmo visual do .admin-secao, mas independente do sistema de troca de
   abas — usado pro bloco de cadastro de insumo, que abre/fecha por conta
   própria (botão "+ Novo Insumo"), sem ser controlado pelo clique nas
   abas da barra lateral. */
.bloco-flutuante {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px;
  margin-bottom: 18px;
}

.admin-secao h2 {
  font-size: 15px;
  margin-top: 0;
}

/* Texto explicativo padrão logo abaixo de um título (seção ou janela).
   Antes cada um tinha o seu estilo inline; agora é sempre este. */
.secao-descricao {
  margin: 6px 0 16px;
  color: var(--cinza-medio);
  font-size: 13px;
  line-height: 1.5;
  max-width: 640px;
}

.secao-descricao:empty {
  display: none;
}

.admin-form-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  align-items: flex-end;
}

.admin-form-inline .campo {
  flex: 1;
  min-width: 150px;
  margin-bottom: 0;
}

.admin-form-inline > button {
  height: fit-content;
}

.admin-form-inline input,
.admin-form-inline select {
  padding: 9px 10px;
  border: 1px solid var(--cinza-claro);
  border-radius: 4px;
  font-size: 14px;
  flex: 1;
  min-width: 110px;
}

.admin-form-inline button {
  padding: 9px 16px;
  border: none;
  border-radius: 4px;
  background: var(--marsala);
  color: var(--branco);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.admin-form-inline button:hover {
  opacity: 0.85;
}

#btn-limpar-produto {
  background: var(--branco);
  color: var(--cinza-escuro);
  border: 1.5px solid var(--cinza-claro);
  margin-left: 8px;
}

.admin-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.admin-tabela th:nth-child(1),
.admin-tabela td:nth-child(1) {
  width: 100px;
}

.admin-tabela th:nth-child(2),
.admin-tabela td:nth-child(2) {
  width: 70px;
}

.admin-tabela th:nth-child(3),
.admin-tabela td:nth-child(3) {
  width: auto;
}

.admin-tabela th:nth-child(4),
.admin-tabela td:nth-child(4) {
  width: 90px;
}

.admin-tabela th:nth-child(5),
.admin-tabela td:nth-child(5) {
  width: 150px;
}

.admin-tabela th:nth-child(6),
.admin-tabela td:nth-child(6) {
  width: 110px;
}

/* A tabela de Equipamentos Locados tem colunas totalmente diferentes da
   de Insumos — cancela as larguras fixas por posição acima, que foram
   pensadas só pra tabela de Insumos, e deixa cada coluna se ajustar ao
   próprio conteúdo. */
#tabela-locacoes-impressao {
  table-layout: auto;
}

#tabela-locacoes-impressao th,
#tabela-locacoes-impressao td {
  width: auto !important;
  white-space: nowrap;
  padding: 8px 10px;
}

/* Mesma correção pra tabela de comparação entre unidades (super admin,
   painel de Relatórios) — colunas diferentes da tabela de Insumos. */
#tabela-comparacao-unidades {
  table-layout: auto;
}

#tabela-comparacao-unidades th,
#tabela-comparacao-unidades td {
  width: auto !important;
  white-space: nowrap;
  padding: 8px 10px;
}

/* Mesma correção pra tabela de Abastecimento — colunas diferentes da
   tabela de Insumos. */
#tabela-abastecimentos {
  table-layout: auto;
}

#tabela-abastecimentos th,
#tabela-abastecimentos td {
  width: auto !important;
  white-space: nowrap;
  padding: 8px 10px;
}

.admin-tabela th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--cinza-medio);
  padding: 8px;
  background: var(--cinza-fundo);
  border-bottom: 1px solid var(--cinza-claro);
}

.admin-tabela td {
  padding: 8px;
  border-bottom: 1px solid var(--cinza-claro);
  overflow: hidden;
}

.admin-tabela tbody tr {
  transition: background 0.1s ease;
}

.admin-tabela tbody tr:hover {
  background: var(--cinza-fundo);
}

.link-remover,
.link-editar {
  display: inline-block;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  color: var(--branco);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.link-remover {
  background: var(--marsala);
}

.link-editar {
  background: var(--cinza-medio);
}

.link-remover:hover,
.link-editar:hover {
  opacity: 0.85;
}

.link-remover + .link-remover,
.link-editar + .link-editar,
.link-remover + .link-editar,
.link-editar + .link-remover {
  margin-left: 6px;
}

/* Botões de ação padronizados (área de Unidades: linhas de usuário e
   de integrante). Estilo "outline" moderno, todos do mesmo tamanho. */
.acoes-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.btn-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  min-height: 30px;
  border: 1px solid var(--cinza-claro);
  border-radius: 6px;
  background: var(--branco);
  color: var(--cinza-escuro);
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-acao:hover {
  background: var(--cinza-fundo);
  border-color: var(--cinza-medio);
}

.btn-acao:disabled,
.btn-acao.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-acao--perigo {
  color: var(--status-vencido);
  border-color: #e3b6b2;
}

.btn-acao--perigo:hover {
  background: var(--status-vencido-bg);
  border-color: var(--status-vencido);
}

.btn-acao svg {
  width: 14px;
  height: 14px;
}

/* "Alterar foto" é um <label> envolvendo um input file — precisa parecer
   idêntico aos <button> ao lado. */
label.btn-acao {
  position: relative;
}

label.btn-acao input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Visual antigo (link de texto sublinhado, sem fundo) — mantido só pra
   Consulta de Estoque e Equipamentos Locados, que voltaram pra essa
   aparência. As demais telas (Unidades) continuam com os botões. */
.link-texto-remover,
.link-texto-editar {
  cursor: pointer;
  text-decoration: underline;
  font-size: 12px;
  background: none;
  border: none;
  padding: 0;
  font-weight: 400;
}

.link-texto-remover {
  color: var(--status-vencido);
}

.link-texto-editar {
  color: var(--acento);
  font-weight: 600;
}

.admin-tabela .link-produto {
  color: var(--preto);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
}

.nome-insumo-resize {
  display: inline-block;
  max-width: 100%;
  overflow: auto;
  resize: horizontal;
  white-space: nowrap;
  min-width: 60px;
  vertical-align: bottom;
}

.qr-link {
  font-size: 11px;
  color: var(--cinza-medio);
  word-break: break-all;
}

.obra-card {
  border: 1px solid var(--cinza-claro);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 12px;
}

.obra-card h3 {
  font-size: 14px;
  margin: 0 0 8px;
}

.obra-card table {
  width: 100%;
  font-size: 13px;
  margin-bottom: 10px;
}

.obra-card table td {
  padding: 4px 0;
  border-bottom: 1px solid var(--cinza-fundo);
}

/* ---------- Padronização: caixa alta em todo o cadastro e exibição ---------- */

#form-produto input[type="text"],
.card-produto__nome,
.card-produto__especificacao,
.info-valor,
#lista-produtos-agrupada h3 {
  text-transform: uppercase;
}

#lista-produtos-agrupada h3 {
  background: var(--grafite);
  color: var(--branco);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 22px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#lista-produtos-agrupada h3 svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

#lista-produtos-agrupada h3:first-child {
  margin-top: 0;
}

/* ---------- Responsividade: tablet / desktop ---------- */

@media (min-width: 600px) {
  .conteudo,
  .pagina-inicial {
    max-width: 560px;
    padding-top: 32px;
  }

  .card-produto__foto {
    aspect-ratio: 16 / 9;
  }

  .stocki-icone {
    height: 48px;
  }

  #marca-stocki {
    font-size: 24px;
  }

  .stocki-i {
    font-size: 17px;
  }
}

@media (min-width: 900px) {
  .conteudo,
  .pagina-inicial {
    max-width: 640px;
  }
}

@media (min-width: 1100px) {
  .conteudo,
  .pagina-inicial {
    max-width: 900px;
  }

  .admin-layout {
    max-width: 1100px;
  }
}

/* ---------- Janela de ajuste de foto (cortar/enquadrar) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 998;
  padding: 16px;
}

.modal-cortar-conteudo {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 20px;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--sombra);
}

/* Janela de cadastro/edição de insumo — mesmo padrão da de corte de
   foto, só que mais larga (o formulário tem bem mais campos). */
.modal-cadastro-conteudo {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 24px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--sombra);
}

/* Botão "✕ Fechar" das janelas flutuantes — o JS move ele pro fim do
   conteúdo e adiciona esta classe, pra ele ficar no rodapé, alinhado à
   direita (em vez do canto superior). Vale desktop e celular. */
.btn-fechar-modal-rodape {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-top: 18px;
}

.modal-cortar-conteudo h3 {
  margin: 0 0 2px;
  font-size: 16px;
}

.cortar-area {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--grafite);
  cursor: grab;
  touch-action: none;
  margin: 14px 0;
  user-select: none;
}

/* Modo quadrado — usado pra foto de perfil (obra/usuário), estilo rede
   social, em vez do 4:3 padrão das fotos de insumo/equipamento. Fica
   quadrada durante o ajuste (mais fácil de posicionar); o arredondado
   pra parecer avatar é aplicado só na hora de exibir a foto pronta. */
.cortar-area.cortar-area--quadrado {
  aspect-ratio: 1 / 1;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

.cortar-area:active {
  cursor: grabbing;
}

.cortar-area img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  max-width: none;
}

.cortar-controles {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.cortar-controles label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cinza-escuro);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cortar-controles input[type="range"] {
  flex: 1;
}

.cortar-botoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cortar-botoes button {
  padding: 9px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

#btn-cortar-cancelar {
  background: none;
  border: 1.5px solid var(--cinza-claro);
  color: var(--cinza-escuro);
}

#btn-cortar-confirmar {
  border: none;
}

/* Regra reforçada (com !important) pra garantir a largura de Código e
   Insumo mesmo em caso de cache antigo do navegador aplicando estilos
   desatualizados por cima. */
#campo-codigo {
  flex: 0 0 100px !important;
  min-width: 100px !important;
}

#campo-codigo input {
  min-width: 0 !important;
}

#campo-insumo {
  flex: 1 !important;
  min-width: 220px !important;
}

/* ---------- Painel resumo de estoque (dashboard) ---------- */

.resumo-estoque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

.resumo-estoque.resumo-3colunas {
  grid-template-columns: repeat(3, 1fr);
}

.resumo-card {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.resumo-card__texto {
  min-width: 0;
}

.resumo-card__rotulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cinza-medio);
  margin: 0 0 6px;
  overflow-wrap: break-word;
}

.resumo-card__numero {
  font-size: 30px;
  font-weight: 800;
  color: var(--preto);
  line-height: 1;
  overflow-wrap: break-word;
}

.resumo-card .resumo-card__rotulo {
  color: var(--cinza-medio);
}

.resumo-card__icone {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resumo-card__icone svg {
  width: 18px;
  height: 18px;
}

.resumo-card__icone--total {
  background: #eef0f4;
  color: var(--cinza-escuro);
}

.resumo-card__icone--ok {
  background: var(--status-ok-bg);
  color: var(--status-ok);
}

.resumo-card__icone--baixo {
  background: #fdf0dd;
  color: #c98a1f;
}

.resumo-card__icone--zerado {
  background: var(--status-vencido-bg);
  color: var(--status-vencido);
}

.resumo-grupo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.resumo-grupo-quadrado {
  background: var(--cinza-fundo);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 110px;
  flex-shrink: 0;
}

.resumo-grupo-quadrado__icone {
  width: 30px;
  height: 30px;
  color: var(--cinza-escuro);
}

.resumo-grupo-quadrado__nome {
  color: var(--cinza-escuro);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.resumo-grupo-quadrado__valor {
  font-weight: 800;
  color: var(--preto);
  font-size: 14px;
}

html,
body {
  overflow-x: hidden;
}

/* Essa regra tinha virado um "não faz nada" — repetia a mesma grade de
   2 colunas que já era o padrão, então nunca colapsava de verdade no
   celular. Agora empilha em 1 coluna só, o padrão mais seguro pra
   título comprido não esbarrar em nada do lado.
   Ponto de quebra em 600px (não 480px): um celular real reporta uma
   largura de tela variável dependendo do tamanho de fonte/densidade
   escolhido nas configurações do aparelho — no teste da Ingrid os
   cards de 2 colunas continuavam lado a lado numa largura maior que
   480px. 600px cobre qualquer celular em pé com folga. */
@media (max-width: 600px) {
  .resumo-estoque {
    grid-template-columns: 1fr;
  }
}

/* 3 colunas (Equipamentos; indicadores de auditoria) precisam de mais
   espaço por card do que um celular tem — a regra de 3 colunas (mais
   específica que ".resumo-estoque" sozinha) ganhava até de telas
   estreitas, deixando cada cartão espremido a ~1/3 da largura da tela
   com o título colado no ícone. Empilha em 1 coluna antes de chegar
   nesse ponto (mesmo ponto de quebra da grade de 2 colunas, acima). */
@media (max-width: 600px) {
  .resumo-estoque.resumo-3colunas {
    grid-template-columns: 1fr;
  }
}

/* ---------- Responsividade: painel administrativo no celular ---------- */
/* O painel (admin.html) foi construído pensando em tela de computador.
   Essas regras entram só em telas estreitas, sem afetar o layout de
   computador em nada. */
@media (max-width: 768px) {
  .admin-layout {
    flex-direction: column;
  }

  /* Barra lateral vira uma faixa horizontal, com rolagem lateral, em
     vez de uma coluna fixa ocupando um terço da tela */
  .admin-sidebar {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    gap: 2px;
    position: static;
  }

  .admin-sidebar button {
    flex-shrink: 0;
    min-width: 64px;
    font-size: 10px;
  }

  .admin-sidebar button span {
    white-space: nowrap;
  }

  .admin-conteudo {
    width: 100%;
    padding: 12px;
  }

  .modal-cadastro-conteudo {
    padding: 16px;
    max-height: 94vh;
  }

  .modal-overlay {
    padding: 8px;
  }

  /* Tabelas continuam com rolagem lateral própria (já embrulhadas em
     divs com overflow-x:auto) — aqui só reduz a fonte, pra caber mais
     coluna visível antes de precisar rolar */
  .admin-tabela {
    font-size: 12px;
  }

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

  /* As larguras fixas por posição (nth-child, lá em cima) foram pensadas
     pra tabela de Insumos, numa tela de computador. No celular a soma
     delas passa da largura da tela, e "table-layout:fixed" força uma
     coluna a espremer até sobrar quase nada — o cabeçalho (ex.
     "Insumo", "Unidade") quebra letra por letra e cai visualmente em
     cima da coluna vizinha. "auto" deixa cada coluna respeitar o
     próprio conteúdo — a tabela fica mais larga que a tela e passa a
     rolar de lado (o wrapper com overflow-x:auto já existe), em vez de
     espremer até ilegível. */
  .admin-tabela {
    table-layout: auto;
  }

  .admin-tabela th {
    white-space: nowrap;
  }

  /* No celular o cabeçalho fica enxuto, estilo Instagram: uma linha só,
     com a logo à esquerda e a foto (ou inicial) do usuário à direita.
     Some: a linha "Unidade: ...", o nome do usuário escrito e a
     setinha ao lado do avatar. O nome da empresa em texto só some
     quando existe logo (a logo já é a marca) — sem logo, o nome fica. */
  .admin-cabecalho {
    padding: 10px 14px;
  }

  #painel-logo-empresa:not(.oculto) ~ div #painel-nome-empresa {
    display: none;
  }

  #painel-obra-nome,
  #usuario-logado-nome,
  #btn-menu-usuario-logado > span:last-child {
    display: none;
  }
}

/* ---------- Impressão do relatório de equipamentos locados ---------- */

@media print {
  body * {
    visibility: hidden;
  }

  #tabela-locacoes-impressao,
  #tabela-locacoes-impressao * {
    visibility: visible;
  }

  #tabela-locacoes-impressao {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  #tabela-locacoes-impressao button {
    display: none;
  }
}

.btn-foto-opcao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1.5px solid var(--cinza-claro);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--cinza-escuro);
  cursor: pointer;
  background: var(--branco);
  transition: background 0.15s ease;
}

.btn-foto-opcao svg {
  display: block;
  flex-shrink: 0;
}

.btn-foto-opcao:hover {
  background: var(--cinza-fundo);
}

/* ---------- Faixa flutuante de alertas — removida (ver Quadro de Aviso) ---------- */

.avatar-circular {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.icone-categoria-pequeno {
  width: 16px;
  height: 16px;
  display: inline-flex;
  flex-shrink: 0;
}

.icone-categoria-pequeno svg {
  width: 100%;
  height: 100%;
}

/* Quadro de aviso: cada linha entra suavemente (uma de cada vez), e a
   bolinha vermelha (crítico) pulsa devagar pra chamar atenção — sem
   ser um letreiro correndo, só uma pista visual de que é urgente. */
@keyframes aviso-entrada {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.aviso-linha {
  opacity: 0;
  animation: aviso-entrada 0.35s ease forwards;
  padding: 10px 0;
  border-bottom: 1px solid var(--cinza-fundo);
}

.aviso-linha:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@keyframes aviso-pulso {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(196, 60, 60, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(196, 60, 60, 0);
  }
}

.aviso-ponto-critico {
  animation: aviso-pulso 1.8s ease-in-out infinite;
}

/* Quadro Crítico: carrossel horizontal, 10 itens por página, fonte
   compacta pra não estourar a altura do cartão. */
.critico-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--cinza-medio);
}
.critico-ctrl button {
  background: none;
  border: 1px solid var(--cinza-claro);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  color: var(--cinza-escuro);
}
.critico-ctrl button:hover {
  border-color: var(--cinza-medio);
}
.critico-ctrl label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.critico-ctrl input {
  width: auto;
}
#critico-viewport {
  overflow: hidden;
}
#critico-trilho {
  display: flex;
  transition: transform 0.35s ease;
}
.critico-pagina {
  flex: 0 0 100%;
  min-width: 0;
  min-height: 160px;
}
.critico-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cinza-fundo);
}
.critico-linha:last-child {
  border-bottom: none;
}

/* Botão "Baixar" com menu (PDF / Excel) — usado nos relatórios. */
.dropdown-baixar {
  position: relative;
  display: inline-block;
}
.menu-baixar {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  background: var(--branco);
  border: 1px solid var(--cinza-claro);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 170px;
  padding: 4px;
}
.menu-baixar button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cinza-escuro);
  cursor: pointer;
  border-radius: 4px;
}
.menu-baixar button:hover {
  background: var(--cinza-fundo);
  color: var(--preto);
}
.menu-baixar button[hidden] {
  display: none;
}
/* Dentro de janela flutuante com rolagem, o menu abre para cima. */
.menu-baixar--cima {
  top: auto;
  bottom: calc(100% + 4px);
}

/* Mesmo cabeçalho preto por categoria usado na Consulta de Estoque,
   reutilizável em qualquer lista agrupada por categoria (ex: janelas
   do Dashboard). */
.categoria-cabecalho-preto {
  text-transform: uppercase;
  background: var(--grafite);
  color: var(--branco);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 22px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.categoria-cabecalho-preto:first-child {
  margin-top: 0;
}

.categoria-cabecalho-preto svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Tabela de "Insumos cadastrados por categoria" (janela do Dashboard) —
   colunas diferentes da tabela de Insumos: cancela as larguras fixas
   por posição, dando bem mais espaço pro nome do insumo e deixando o
   estoque atual numa coluna estreita no final. */
.tabela-catalogo-modal {
  table-layout: auto;
}

.tabela-catalogo-modal th,
.tabela-catalogo-modal td {
  width: auto !important;
}

.tabela-catalogo-modal th:nth-child(1),
.tabela-catalogo-modal td:nth-child(1) {
  width: 70px !important;
}

.tabela-catalogo-modal th:nth-child(2),
.tabela-catalogo-modal td:nth-child(2) {
  width: auto !important;
  white-space: normal;
}

.tabela-catalogo-modal th:nth-child(3),
.tabela-catalogo-modal td:nth-child(3) {
  width: 110px !important;
  white-space: nowrap;
  text-align: right;
}

/* Tabela de itens da janela "Cadastrar Entrada" (multi-insumo por NF) */
.tabela-itens-entrada {
  table-layout: auto;
}

.tabela-itens-entrada th,
.tabela-itens-entrada td {
  width: auto !important;
  padding: 6px 8px;
}

.tabela-itens-entrada input {
  padding: 7px 8px;
  font-size: 13px;
  min-width: 0;
}

.tabela-itens-entrada td:nth-child(1) input {
  width: 65px;
}

.tabela-itens-entrada td:nth-child(3) {
  font-size: 11px;
  white-space: nowrap;
}

.tabela-itens-entrada td:nth-child(4) input {
  width: 55px;
}

.tabela-itens-entrada td:nth-child(5) input {
  width: 80px;
}

.tabela-itens-entrada td:nth-child(6) input {
  width: 70px;
}

.tabela-itens-entrada td:nth-child(7) input,
.tabela-itens-entrada td:nth-child(8) input {
  width: 125px;
}

.tabela-itens-entrada td:nth-child(9) input {
  width: 80px;
}

.tabela-itens-entrada td:nth-child(10) {
  white-space: nowrap;
}

/* Tabela de itens da janela "Cadastrar Saída" (multi-insumo por saída) */
.tabela-itens-saida {
  table-layout: auto;
}

.tabela-itens-saida th,
.tabela-itens-saida td {
  width: auto !important;
  padding: 6px 8px;
}

.tabela-itens-saida input,
.tabela-itens-saida select {
  padding: 7px 8px;
  font-size: 13px;
  min-width: 0;
}

.tabela-itens-saida td:nth-child(1) input {
  width: 65px;
}

.tabela-itens-saida td:nth-child(2),
.tabela-itens-saida td:nth-child(3) {
  font-size: 11px;
  white-space: nowrap;
}

.tabela-itens-saida td:nth-child(4) input {
  width: 55px;
}

.tabela-itens-saida td:nth-child(5) input {
  width: 80px;
}

.tabela-itens-saida td:nth-child(6) select {
  width: 100%;
  min-width: 140px;
}

.tabela-itens-saida td:nth-child(7) {
  white-space: nowrap;
}

/* Abas com permissão "visualizar" (não "editar"): esconde os gatilhos
   de criar/editar/remover, deixando só a leitura dos dados. */
.aba-somente-leitura .link-editar,
.aba-somente-leitura .link-remover,
.aba-somente-leitura .btn-acao,
.aba-somente-leitura .link-texto-editar,
.aba-somente-leitura .link-texto-remover,
.aba-somente-leitura .btn-nova-requisicao,
.aba-somente-leitura #btn-abrir-cadastro-entrada,
.aba-somente-leitura #btn-abrir-cadastro-saida,
.aba-somente-leitura #btn-novo-insumo,
.aba-somente-leitura #btn-novo-equipamento,
.aba-somente-leitura #btn-novo-abastecimento,
.aba-somente-leitura [data-aprovar-requisicao],
.aba-somente-leitura [data-recusar-requisicao] {
  display: none !important;
}

/* Balão de suporte flutuante — abre o WhatsApp */
#balao-suporte {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1200;
}

#btn-abrir-balao-suporte {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  background: var(--branco);
  transition: transform 0.15s ease;
}

#btn-abrir-balao-suporte:hover {
  transform: scale(1.06);
}

#btn-abrir-balao-suporte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#balao-suporte-popup {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 280px;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
  padding: 16px;
}

#btn-fechar-balao-suporte {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--cinza-medio);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}

.balao-suporte-popup__cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-right: 20px;
}

.balao-suporte-popup__cabecalho img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.balao-suporte-popup__cabecalho strong {
  display: block;
  font-size: 14px;
  color: var(--preto);
}

.balao-suporte-popup__cabecalho span {
  display: block;
  font-size: 11.5px;
  color: var(--cinza-medio);
}

#balao-suporte-popup p {
  font-size: 13px;
  color: var(--cinza-escuro);
  margin: 0 0 14px;
  line-height: 1.4;
}

.balao-suporte-popup__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #25d366;
  color: var(--branco);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  padding: 10px;
  border-radius: 6px;
}

.balao-suporte-popup__opcoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.balao-suporte-popup__opcoes a {
  display: block;
  background: var(--cinza-fundo);
  color: var(--preto);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.12s ease;
}

.balao-suporte-popup__opcoes a:hover {
  background: #e5e5e8;
}

@media (max-width: 480px) {
  #balao-suporte {
    bottom: 12px;
    right: 12px;
  }

  #balao-suporte-popup {
    width: calc(100vw - 48px);
    right: -6px;
  }
}