/* =====================================================================
   Sistema de design do painel — linguagem iFood
   Cartao branco, canto arredondado, respiro generoso, acento vermelho.

   Estrategia: sobrescrever os TOKENS do Bootstrap 5.3 em vez de trocar
   as classes das views. Assim toda tela sobe de nivel junto, sem
   reescrever HTML testado (btn-dark vira o vermelho da marca, etc).
   ===================================================================== */

:root {
  /* ---- marca ---- */
  --marca:        #EA1D2C;
  /* Azul do atizap — do fornecedor, NAO da barbearia. Fica separado do
     `--marca` de proposito: o vermelho e do estabelecimento e nao pode
     ser confundido com a assinatura de quem fez o sistema. */
  --marca-atizap: #4C63F5;
  --marca-escuro: #C3111E;
  --marca-suave:  #FDECEE;

  /* ---- superficie ---- */
  --fundo:        #F7F7F7;
  --superficie:   #FFFFFF;
  --linha:        #EDEDED;

  /* ---- texto ---- */
  --tinta:        #1A1A1A;
  --tinta-media:  #717171;
  --tinta-fraca:  #A5A5A5;

  /* ---- status (tons suaves, nao saturados) ---- */
  --ok:      #1F9D55;  --ok-bg:      #E8F6EE;
  --atencao: #B26B00;  --atencao-bg: #FDF3E2;
  --perigo:  #D32F2F;  --perigo-bg:  #FDECEC;
  --info:    #1565C0;  --info-bg:    #E8F1FB;
  --neutro:  #5F6368;  --neutro-bg:  #F0F0F0;

  /* ---- versoes para TEXTO sobre o fundo suave correspondente ----
     Nao sao um capricho: as cores acima foram escolhidas para BORDA e
     icone, onde contraste baixo nao atrapalha. Usadas em texto pequeno
     sobre o proprio fundo claro, reprovam no WCAG AA (4.5:1) — o verde
     de "concluido" dava 3.13, ou seja, ilegivel para muita gente e
     cansativo para todo mundo.

     Estes valores foram CALCULADOS ate cruzar 4.5, nao escolhidos a
     olho. Quem trocar um deles precisa refazer a conta. */
  --atencao-txt: #A06000;   /* 4.58 sobre --atencao-bg */
  --marca-txt:   #D71A28;   /* 4.53 sobre --marca-suave */
  --info-txt:    #1565C0;   /* 5.04 sobre --info-bg — ja passava */
  --ok-txt:      #187D43;   /* 4.65 sobre --ok-bg */
  --perigo-txt:  #CE2E2E;   /* 4.53 sobre --perigo-bg */

  --raio:      14px;
  --raio-p:    10px;
  --sombra:    0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --sombra-f:  0 2px 6px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.10);

  /* ---- tokens do Bootstrap ---- */
  --bs-primary: var(--marca);
  --bs-primary-rgb: 234, 29, 44;
  --bs-body-bg: var(--fundo);
  --bs-body-color: var(--tinta);
  --bs-border-color: var(--linha);
  --bs-border-radius: var(--raio-p);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--raio);
  --bs-link-color: var(--marca);
  --bs-link-hover-color: var(--marca-escuro);
  --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                        "Helvetica Neue", Arial, sans-serif;
}

body {
  background: var(--fundo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.011em;
}

/* Espaco para a barra inferior do celular */
@media (max-width: 991.98px) {
  body { padding-bottom: 76px; }
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.02em; }

/* =====================================================================
   Barra superior
   ===================================================================== */
.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 1030;
}
.topo .marca {
  font-weight: 800; font-size: 1.05rem; color: var(--tinta);
  text-decoration: none; letter-spacing: -.03em;
}
.topo .marca i { color: var(--marca); }

.usuario-chip {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .35rem .3rem .75rem; border-radius: 999px;
  background: var(--fundo);
}
.usuario-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--marca); color: #fff;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
}

/* Navegacao horizontal (desktop) */
.nav-topo { display: flex; gap: .25rem; }
.nav-topo a {
  padding: .45rem .85rem; border-radius: 999px;
  color: var(--tinta-media); text-decoration: none;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-topo a:hover { background: var(--fundo); color: var(--tinta); }
.nav-topo a.ativo { background: var(--marca-suave); color: var(--marca); }

/* Barra inferior (celular) */
.nav-inferior {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  display: flex; padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
}
.nav-inferior a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .4rem .2rem; text-decoration: none;
  color: var(--tinta-fraca); font-size: .68rem; font-weight: 600;
}
.nav-inferior a i { font-size: 1.25rem; }
.nav-inferior a.ativo { color: var(--marca); }

/* =====================================================================
   Cartoes
   ===================================================================== */
.card {
  background: var(--superficie);
  border: none; border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.card-header {
  background: transparent; border-bottom: 1px solid var(--linha);
  padding: .95rem 1.15rem; font-weight: 700; font-size: .9rem;
}
.card-body { padding: 1.15rem; }
.card-footer { background: transparent; border-top: 1px solid var(--linha); padding: .8rem 1.15rem; }

/* Cartao de numero (dashboard) */
.metrica { padding: 1.15rem; }
.metrica .rotulo {
  font-size: .78rem; font-weight: 600; color: var(--tinta-media);
  text-transform: none; margin-bottom: .35rem;
}
.metrica .valor { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.metrica .apoio { font-size: .78rem; color: var(--tinta-fraca); margin-top: .2rem; }
.metrica.destaque { background: var(--marca); color: #fff; }
.metrica.destaque .rotulo,
.metrica.destaque .apoio { color: rgba(255,255,255,.82); }

/* =====================================================================
   Botoes
   ===================================================================== */
.btn {
  border-radius: var(--raio-p); font-weight: 600;
  padding: .55rem 1.1rem; border-width: 1.5px;
  transition: transform .06s, filter .15s, background .15s;
}
.btn:active { transform: scale(.985); }
.btn-sm { padding: .35rem .75rem; font-size: .84rem; border-radius: 8px; }
.btn-lg { padding: .8rem 1.4rem; font-size: 1rem; }

/* btn-dark e o mais usado nas views -> vira o botao da marca */
.btn-dark, .btn-primary {
  background: var(--marca); border-color: var(--marca); color: #fff;
}
.btn-dark:hover, .btn-primary:hover,
.btn-dark:focus, .btn-primary:focus {
  background: var(--marca-escuro); border-color: var(--marca-escuro); color: #fff;
}
.btn-outline-dark {
  color: var(--tinta); border-color: var(--linha); background: var(--superficie);
}
.btn-outline-dark:hover { background: var(--fundo); color: var(--tinta); border-color: #DCDCDC; }
.btn-outline-secondary {
  color: var(--tinta-media); border-color: var(--linha); background: var(--superficie);
}
.btn-outline-secondary:hover { background: var(--fundo); color: var(--tinta); border-color: #DCDCDC; }
.btn-success { background: var(--ok); border-color: var(--ok); }
.btn-success:hover { background: #178043; border-color: #178043; }
.btn-outline-danger { color: var(--perigo); border-color: #F3C9C9; }
.btn-outline-danger:hover { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.btn-outline-success { color: var(--ok); border-color: #BFE3CE; }
.btn-outline-success:hover { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-link { color: var(--marca); text-decoration: none; font-weight: 600; }

/* =====================================================================
   Pills de status
   ===================================================================== */
.badge {
  font-weight: 600; font-size: .72rem; letter-spacing: 0;
  padding: .35em .7em; border-radius: 999px;
}
.text-bg-success   { background: var(--ok-bg)      !important; color: var(--ok)      !important; }
.text-bg-warning   { background: var(--atencao-bg) !important; color: var(--atencao) !important; }
.text-bg-danger    { background: var(--perigo-bg)  !important; color: var(--perigo)  !important; }
.text-bg-info      { background: var(--info-bg)    !important; color: var(--info)    !important; }
.text-bg-primary   { background: var(--marca-suave)!important; color: var(--marca)   !important; }
.text-bg-secondary { background: var(--neutro-bg)  !important; color: var(--neutro)  !important; }
.text-bg-light     { background: var(--fundo)      !important; color: var(--tinta-media) !important; }
.text-bg-dark      { background: var(--tinta)      !important; color: #fff !important; }
.badge.border { border: none !important; }

/* =====================================================================
   Tabelas — mais respiro, sem grade pesada
   ===================================================================== */
.table { --bs-table-bg: transparent; margin: 0; }
.table > :not(caption) > * > * { padding: .85rem 1.15rem; border-bottom-color: var(--linha); }
.table thead th {
  font-size: .74rem; font-weight: 700; color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: .04em;
  background: transparent !important; border-bottom: 1px solid var(--linha);
}
.table-light, .table-light > * { background: transparent !important; }
.table-hover > tbody > tr:hover > * { background: var(--fundo); }
.table > tbody > tr:last-child > * { border-bottom: none; }
.table-sm > :not(caption) > * > * { padding: .7rem 1rem; }

/* =====================================================================
   Formularios
   ===================================================================== */
.form-label { font-weight: 600; font-size: .82rem; color: var(--tinta); margin-bottom: .35rem; }
.form-control, .form-select {
  border-radius: var(--raio-p); border-color: var(--linha);
  padding: .6rem .85rem; font-size: .95rem; background-color: var(--superficie);
}
.form-control:focus, .form-select:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(234,29,44,.12);
}
.form-control-sm, .form-select-sm { padding: .42rem .7rem; font-size: .88rem; border-radius: 8px; }
.form-text { color: var(--tinta-fraca); font-size: .78rem; }
.form-check-input:checked { background-color: var(--marca); border-color: var(--marca); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(234,29,44,.12); border-color: var(--marca); }

/* =====================================================================
   Diversos
   ===================================================================== */
.alert { border: none; border-radius: var(--raio); padding: .9rem 1.1rem; font-size: .9rem; }
.alert-warning { background: var(--atencao-bg); color: var(--atencao); }
.alert-danger  { background: var(--perigo-bg);  color: var(--perigo); }
.alert-info    { background: var(--info-bg);    color: var(--info); }
.alert-secondary { background: var(--neutro-bg); color: var(--neutro); }

.progress { background: var(--fundo); border-radius: 999px; }
.progress-bar { background: var(--marca); border-radius: 999px; }
.progress-bar.bg-dark { background: var(--marca) !important; }

.nav-pills .nav-link {
  color: var(--tinta-media); font-weight: 600; font-size: .88rem;
  border-radius: 999px; padding: .45rem .95rem;
}
.nav-pills .nav-link.active { background: var(--marca-suave); color: var(--marca); }

.dropdown-menu {
  border: none; border-radius: var(--raio); box-shadow: var(--sombra-f); padding: .4rem;
}
.dropdown-item { border-radius: 8px; padding: .55rem .8rem; font-weight: 500; }
.dropdown-item:active { background: var(--marca); }

.list-group-item { border-color: var(--linha); padding: .85rem 1.15rem; }

.modal-content { border: none; border-radius: var(--raio); box-shadow: var(--sombra-f); }
.modal-header { border-bottom: 1px solid var(--linha); padding: 1rem 1.15rem; }
.modal-body { padding: 1.15rem; }

.text-muted { color: var(--tinta-media) !important; }
.shadow-sm { box-shadow: var(--sombra) !important; }

/* Cabecalho de pagina */
.pagina-titulo { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }

/* Estado vazio */
.vazio { text-align: center; padding: 3rem 1rem; color: var(--tinta-fraca); }
.vazio i { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: .75rem; }

/* =====================================================================
   Agenda — cartoes do dia
   ===================================================================== */
.agenda-col { min-width: 200px; }
.agenda-cabeca {
  height: 52px; display: flex; align-items: center; justify-content: center;
  gap: .45rem; font-weight: 700; font-size: .88rem;
  border-bottom: 1px solid var(--linha);
  /* Faixa suave para a coluna de cada profissional se destacar do
     fundo — com quatro colunas lado a lado, tudo branco vira uma
     planilha. */
  background: linear-gradient(180deg, var(--fundo) 0%, var(--superficie) 100%);
}
.agenda-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--marca-suave); color: var(--marca);
  display: grid; place-items: center; font-size: .7rem; font-weight: 700;
}
.agenda-hora {
  font-size: .72rem; color: var(--tinta-fraca); font-weight: 600;
}
.agenda-linha { border-top: 1px solid #F4F4F4; }

.slot {
  border-radius: var(--raio-p);
  padding: .5rem .65rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--neutro);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  overflow: hidden; cursor: pointer;
  transition: box-shadow .15s, transform .06s;
}
.slot:hover { box-shadow: var(--sombra-f); }
.slot:active { transform: scale(.99); }
.slot .slot-hora { font-size: .72rem; font-weight: 700; color: var(--tinta-media); }
.slot .slot-nome { font-size: .84rem; font-weight: 700; line-height: 1.2; }
.slot .slot-servico { font-size: .74rem; color: var(--tinta-media); }

/* ---------------------------------------------------------------------
   COR DE FUNDO POR STATUS, nao so a listra da esquerda.
 
   A agenda era branca com 3px de cor na borda. Funcionava — a informacao
   estava la — mas exigia procurar. Numa tela que o balcao olha de
   relance, entre um cliente e outro, "estar la" nao basta: tem que
   saltar.
 
   Os tons ja existiam no topo deste arquivo (`--ok-bg`, `--atencao-bg`
   e companhia) e nao eram usados aqui. Sao dessaturados de proposito —
   o suficiente para ler o estado de longe, fraco o bastante para o nome
   do cliente continuar sendo o que mais aparece no cartao.
 
   A COR CONTINUA SENDO INFORMACAO, nao decoracao. Por isso ela nasce do
   status e nao da marca do estabelecimento: se um dia a cor do painel
   for personalizavel, ESTAS ficam de fora, senao um vermelho de marca
   passa a competir com o vermelho de falta e a tela mente.
   ------------------------------------------------------------------ */
.slot { border-left-width: 4px; }

.slot.st-pendente {
  border-left-color: var(--atencao);
  background: var(--atencao-bg);
}
.slot.st-confirmado {
  border-left-color: var(--marca);
  background: var(--marca-suave);
}
.slot.st-em_atendimento {
  border-left-color: var(--info);
  background: var(--info-bg);
  /* Quem esta na cadeira AGORA merece destaque a mais: e o unico
     estado sobre o qual alguem pode agir neste segundo. */
  box-shadow: 0 0 0 2px var(--info-bg), 0 2px 8px rgba(21,101,192,.18);
}
.slot.st-concluido {
  border-left-color: var(--ok);
  background: var(--ok-bg);
}
.slot.st-cancelado {
  border-left-color: var(--neutro);
  background: var(--neutro-bg);
  opacity: .55;
}
.slot.st-falta {
  border-left-color: var(--perigo);
  background: var(--perigo-bg);
}

/* O horario acompanha o status: e a primeira coisa que o olho procura
   no cartao, e em cinza ele se perdia no fundo colorido. */
.slot.st-pendente       .slot-hora { color: var(--atencao-txt); }
.slot.st-confirmado     .slot-hora { color: var(--marca-txt); }
.slot.st-em_atendimento .slot-hora { color: var(--info-txt); }
.slot.st-concluido      .slot-hora { color: var(--ok-txt); }
.slot.st-falta          .slot-hora { color: var(--perigo-txt); }

/* Legenda */
.legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--tinta-media); }
.legenda span.ponto { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: .35rem; }

/* ------------------------------------------------------------------
   Previa do agendamento (hover na agenda)

   `position:absolute` no BODY, nao dentro da coluna: o card da agenda
   tem overflow para rolar horizontalmente, e qualquer coisa desenhada
   la dentro seria cortada na borda da coluna — justamente onde a
   previa precisa aparecer.

   `pointer-events:none` para a previa nunca roubar o mouse do slot e
   provocar piscada (mouseleave -> mouseenter em loop).
------------------------------------------------------------------ */
.ag-pop {
  position: absolute;
  z-index: 1080;
  width: 15rem;
  padding: .7rem .8rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-f);
  pointer-events: none;
  font-size: .82rem;
  line-height: 1.35;
}
.ag-pop[hidden] { display: none; }

.ag-pop-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.ag-pop-hora { font-weight: 700; font-size: .9rem; }
.ag-pop-nome { font-weight: 600; font-size: .95rem; margin-bottom: .15rem; }
.ag-pop-linha { color: var(--tinta); }
.ag-pop-meta { color: var(--tinta-media); font-size: .78rem; margin-top: .2rem; }
.ag-pop-obs {
  margin-top: .45rem;
  padding: .35rem .5rem;
  background: var(--fundo);
  border-radius: .4rem;
  font-size: .78rem;
  color: var(--tinta-media);
}
.ag-pop-dica {
  margin-top: .5rem;
  padding-top: .45rem;
  border-top: 1px solid var(--linha);
  color: var(--tinta-media);
  font-size: .72rem;
}

/* O cartao do agendamento e clicavel para todo mundo agora. */
.slot { cursor: pointer; }

/* Coluna de profissional inativo que ainda tem horario marcado no dia.
   Fica visivel (o cliente vai aparecer!), mas sem competir com quem
   esta trabalhando. */
.agenda-cabeca.prof-inativo { opacity: .72; }

/* ------------------------------------------------------------------
   Atalho de um toque no cartao da agenda.

   Fica na FRENTE do nome porque e a acao repetida a cada cliente; o
   painel completo continua a um clique no resto do cartao.

   Duas coisas que a primeira versao errou:

   1. O CARTAO PODE TER 37px. Ancorar o botao no topo o fazia ocupar
      quase toda a altura. Centralizado na vertical funciona em cartao
      curto (corte de 30min) e em cartao longo (coloracao de 2h).

   2. O TEXTO PASSAVA POR BAIXO DELE. `position:absolute` nao reserva
      espaco: "Chrystian Duarte" caberia, "Maria Aparecida de Souza"
      corria para debaixo do botao. O espaco e reservado no conteudo,
      nao no cartao, para o fundo colorido do status seguir inteiro.
------------------------------------------------------------------ */
.slot { position: relative; }

.slot-atalho {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  margin: 0;
  z-index: 2;
  line-height: 0;
}
.slot-atalho button {
  width: 1.4rem; height: 1.4rem;
  padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta-media);
  font-size: .72rem;
  cursor: pointer;
  opacity: .5;
  transition: opacity .12s, color .12s, border-color .12s;
}
.slot:hover .slot-atalho button { opacity: 1; }
.slot-atalho button:hover { color: var(--ok); border-color: var(--ok); opacity: 1; }

/* Reserva a faixa do botao. So nos cartoes que TEM atalho — sem isto,
   cartao concluido/cancelado perderia largura de texto sem motivo. */
.slot:has(.slot-atalho) .slot-nome,
.slot:has(.slot-atalho) .slot-servico,
.slot:has(.slot-atalho) .slot-hora { padding-right: 1.7rem; }

/* No toque nao existe hover: o atalho fica sempre visivel. */
@media (hover: none) {
  .slot-atalho button { opacity: .9; }
}

/* Aviso de "a agenda mudou".
   Canto inferior, fora do caminho: quem esta atendendo nao pode ter um
   balao aparecendo por cima do que esta lendo. */
.ag-novidade {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 1085;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .85rem;
  background: var(--tinta);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--sombra-f);
  font-size: .84rem;
}
.ag-novidade[hidden] { display: none; }
.ag-novidade button {
  border: 0;
  background: #fff;
  color: var(--tinta);
  border-radius: 999px;
  padding: .12rem .6rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.ag-novidade button:hover { background: var(--marca); color: #fff; }

/* Na barra inferior do celular o aviso subiria por cima do menu. */
@media (max-width: 991.98px) {
  .ag-novidade { bottom: 4.5rem; }
}

/* ------------------------------------------------------------------
   Assinatura do fornecedor.

   De fora a fora, mas de baixo contraste: e a ferramenta de trabalho
   do dono, aberta dez vezes por dia. Marca de fornecedor competindo
   com a agenda vira ruido — e ruido acaba ignorado.

   `margin-top:auto` com o body em flex column prende o rodape no fim
   da pagina mesmo quando o conteudo e curto (tela de caixa fechado,
   agenda vazia), sem precisar de `position:fixed` roubando espaco.
------------------------------------------------------------------ */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

.marca-rodape {
  flex-shrink: 0;
  border-top: 1px solid var(--linha);
  background: var(--superficie);
  padding: .85rem 1rem;
}
.marca-rodape-conteudo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--tinta-fraca);
}
.marca-rodape-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--marca-atizap);
  opacity: .85;
  transition: opacity .15s;
}
.marca-rodape-logo:hover { opacity: 1; }
.marca-rodape-logo strong {
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: .92rem;
}
.marca-rodape-logo img { display: block; }
.marca-rodape-sep { opacity: .5; }

/* A barra de navegacao do celular e fixa no rodape e cobriria isto. */
@media (max-width: 991.98px) {
  .marca-rodape { padding-bottom: 4.75rem; }
}

/* ---------------------------------------------------------------------
   Aviso permanente de WhatsApp desligado.

   Faixa fina e clicavel inteira, em toda tela do painel. Nao tem botao
   de fechar: nao e notificacao, e ESTADO — some quando for resolvido e
   nao antes. Fechavel, seria fechado no primeiro dia e o sistema
   voltaria a ficar mudo em silencio.

   Ambar, nao vermelho: o painel continua funcionando e a agenda tambem.
   Vermelho aqui competiria com erro de verdade e, aparecendo em todas
   as telas, ensinaria a ignorar a cor.
   ------------------------------------------------------------------ */
.aviso-wpp {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  background: #fff3cd;
  border-bottom: 1px solid #ffe69c;
  color: #664d03;
  font-size: .85rem;
  text-decoration: none;
}
.aviso-wpp:hover { background: #ffecb5; color: #664d03; }
.aviso-wpp > .bi { font-size: 1rem; flex: 0 0 auto; }
.aviso-wpp-texto { flex: 1 1 auto; }
.aviso-wpp-acao {
  flex: 0 0 auto;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  /* No celular a linha inteira nao cabe. O "Ligar agora" sai: a faixa
     ja e clicavel por completo, entao nada se perde — so o texto que
     dizia o obvio. */
  .aviso-wpp-acao { display: none; }
  .aviso-wpp { font-size: .8rem; padding: .5rem .75rem; }
}