/* ============================================================
   Painel Administrativo -- Lumi | Dra. Aline Bentivegna
   Segue a identidade visual da landing page: dourado + grafite,
   Playfair Display para títulos/marca e Raleway para o corpo.
   ============================================================ */

:root {
  --cor-fundo: #F8F6F2;
  --cor-fundo-alt: #efe9e1;
  --cor-cartao: #ffffff;
  --cor-borda: #e6ded2;
  --cor-borda-forte: #d9c9b6;

  --cor-texto: #333333;
  --cor-texto-suave: #666666;
  --cor-texto-fraco: #948a7d;

  --cor-marca: #B89A68;
  --cor-marca-escura: #96794f;
  --cor-marca-clara: #f1e9db;

  --cor-secundaria: #1F1F1F;
  --cor-sidebar: #33302B;
  --cor-destaque: #D4B483;

  --cor-sucesso: #3f8f52;
  --cor-sucesso-fundo: #e8f4ea;
  --cor-alerta: #c98a2c;
  --cor-alerta-fundo: #fbf1de;
  --cor-urgente: #c04a3f;
  --cor-urgente-fundo: #fbeae7;
  --cor-info: #4a7ba6;
  --cor-info-fundo: #e9f1f7;

  --fonte-titulo: 'Playfair Display', serif;
  --fonte-corpo: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --raio: 4px;
  --raio-pequeno: 3px;
  --raio-grande: 14px;
  --sombra: 0 1px 2px rgba(31, 31, 31, 0.04), 0 4px 16px rgba(31, 31, 31, 0.05);
  --sombra-hover: 0 2px 6px rgba(31, 31, 31, 0.07), 0 8px 24px rgba(31, 31, 31, 0.09);
  --transicao: all 0.2s ease;

  font-family: var(--fonte-corpo);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 17.5px;
  line-height: 1.55;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  letter-spacing: 0.3px;
}

a {
  color: var(--cor-marca);
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ============================================================
   Tela de login
   ============================================================ */

.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 38%, #1a1a1a 0%, #000000 70%);
  padding: 24px;
}

.cartao-login {
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.cartao-login__marca-img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.cartao-login h1 {
  font-size: 1.3rem;
  margin-bottom: 4px;
  color: #fff;
}

.texto-suave {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  margin: 0 0 32px;
}

.form-login {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.form-login label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
}

.form-login input {
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  font-size: 15px;
  font-family: var(--fonte-corpo);
  background: transparent;
  color: #fff;
}

.form-login input:focus {
  outline: none;
  border-bottom-color: var(--cor-marca);
  box-shadow: 0 1px 0 0 var(--cor-marca);
}

.form-login button {
  margin-top: 22px;
  padding: 13px 14px;
  border: 1px solid var(--cor-marca);
  border-radius: var(--raio-pequeno);
  background: var(--cor-marca);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.form-login button:hover {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
}

.texto-erro {
  color: #e5867a;
  font-size: 13px;
  margin: 4px 0 0;
}

/* ============================================================
   Layout do painel
   ============================================================ */

html, body {
  height: 100%;
}

.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.barra-lateral {
  width: 300px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  background: var(--cor-sidebar);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 3vh, 30px) 20px;
}

.barra-lateral__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  padding: 4px 8px clamp(6px, 2.5vh, 22px);
  margin-bottom: clamp(4px, 2vh, 16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.marca-lumi-img {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
}

.barra-lateral__marca small {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 8px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: clamp(5px, 1.8vh, 13px) 13px;
  border-radius: var(--raio-pequeno);
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
}

.nav__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.nav__item.ativo {
  background: rgba(184, 154, 104, 0.16);
  color: var(--cor-destaque);
}

.nav__badge {
  margin-left: auto;
  background: var(--cor-urgente);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

.nav__badge:empty,
.nav__badge[data-zero="true"] {
  display: none;
}

.status-bot {
  flex-shrink: 0;
  margin-top: clamp(3px, 1.5vh, 12px);
  padding: clamp(5px, 1.8vh, 14px) 14px clamp(4px, 1.5vh, 12px);
  border: 1px solid rgba(212, 180, 131, 0.3);
  border-radius: var(--raio-pequeno);
  background: rgba(212, 180, 131, 0.1);
}

.status-bot__linha {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
}

.status-bot__ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-texto-fraco);
  flex-shrink: 0;
}

.status-bot__ponto.ativo {
  background: var(--cor-sucesso);
}

.status-bot__ponto.pausado {
  background: var(--cor-urgente);
}

.status-bot .texto-fraco {
  margin: 4px 0 8px;
  line-height: 1.5;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}

.status-bot .botao {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
}

.banner-pausado {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--cor-urgente-fundo);
  color: var(--cor-urgente);
  border: 1px solid rgba(192, 74, 63, 0.3);
  border-radius: var(--raio);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 24px;
}

/* O atributo "hidden" tem a mesma especificidade que a classe acima -- sem
   esta regra, o "display: flex" vence por vir depois no CSS e o banner
   fica sempre visível mesmo com hidden setado via JS. */
.banner-pausado[hidden] {
  display: none;
}

.banner-pausado strong {
  font-weight: 700;
}

.banner-pausado .botao {
  margin-left: auto;
}

.botao-sair {
  flex-shrink: 0;
  margin-top: clamp(4px, 1.8vh, 16px);
  padding: clamp(5px, 1.5vh, 12px) 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--raio-pequeno);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.botao-sair:hover {
  background: var(--cor-marca);
  border-color: var(--cor-marca);
  color: #fff;
}

.conteudo {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 36px 44px;
  max-width: 1180px;
}

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

.cabecalho-secao h2 {
  font-size: 1.95rem;
  color: var(--cor-secundaria);
}

.cabecalho-secao p {
  margin: 4px 0 0;
  color: var(--cor-texto-suave);
  font-size: 14.5px;
}

.secao {
  display: none;
}

.secao.ativa {
  display: block;
}

/* Pacientes: a lista ocupa toda a altura disponível do .conteudo, com
   a paginação fixada embaixo em vez de deixar espaço vazio na tela. */
#secao-pacientes.ativa {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Agenda: mesmo padrão -- título/botões/alternador de visualização ficam
   fixos, só a grade (Dia/Semana/Mês) rola por dentro, com o cabeçalho de
   dias grudado no topo dela (position:sticky em .agenda-grade__cabecalho-*
   já definido mais abaixo). Modo Lista não usa isto -- a tabela continua
   rolando junto com a página, como sempre foi. */
#secao-agenda.ativa {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#secao-pacientes .painel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#conteudoPacientes {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tabela-scroll {
  flex: 1;
  overflow-y: auto;
}

/* Rola só horizontalmente se as colunas não couberem (telas menores) --
   sem isso o "painel" (overflow:hidden) simplesmente cortava a última
   coluna (o botão Reativar) em vez de deixar acessível. */
.tabela-scroll-x {
  overflow-x: auto;
}

/* table-layout:auto (padrão) deixa a tabela crescer pro tamanho "natural"
   do conteúdo, ignorando max-width em th/td -- por isso o botão Reativar
   ficava cortado mesmo com colunas de texto encolhidas. Com "fixed" +
   colgroup (definido no JS), as larguras são respeitadas de verdade e o
   texto quebra em vez de empurrar a tabela pra fora do painel.
   min-width evita que isso vire um problema NOVO em telas estreitas
   (celular): sem ele, as % do colgroup encolhiam pra poucos pixels cada
   e cada palavra quebrava letra por letra. Com min-width, a tabela mantém
   colunas legíveis e quem rola é o wrapper (.tabela-scroll-x), não o texto. */
.tabela--oportunidades {
  table-layout: fixed;
  min-width: 720px;
}

.tabela--oportunidades td,
.tabela--oportunidades th {
  overflow-wrap: break-word;
}

.botao-ver {
  cursor: pointer;
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cor-texto-suave);
  background: var(--cor-fundo-alt);
}

/* Modal genérico pra conteúdo que não cabe numa célula de tabela estreita
   (ex: mensagem do paciente na Oportunidades) -- ocupa um espaço confortável
   no centro da tela em vez de espremer num balãozinho de 280px. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-caixa {
  background: var(--cor-fundo);
  border-radius: var(--raio-grande, 14px);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
  width: 100%;
  max-width: 480px;
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cor-borda);
}

.modal-cabecalho h3 {
  margin: 0;
  font-size: 15px;
}

.modal-fechar {
  cursor: pointer;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  color: var(--cor-texto-suave);
  border-radius: var(--raio-pequeno);
}

.modal-fechar:hover {
  background: var(--cor-fundo-alt);
}

.modal-corpo {
  padding: 20px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Modal de consulta é campos de formulário, não prosa -- não precisa do
   mesmo respiro do modal de mensagem (que é texto corrido do paciente). */
#modalConsulta .modal-corpo {
  padding: 16px 20px;
  white-space: normal;
}

/* ============================================================
   Componentes
   ============================================================ */

.seletor-janela {
  display: flex;
  gap: 4px;
  background: var(--cor-fundo-alt);
  padding: 4px;
  border-radius: var(--raio-pequeno);
}

.seletor-janela button {
  border: none;
  background: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cor-texto-suave);
}

.seletor-janela button.ativo {
  background: var(--cor-cartao);
  color: var(--cor-marca-escura);
  box-shadow: var(--sombra);
}

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

/* ============================================================
   Agenda -- grade visual (Dia/Semana/Mês), complementa a .tabela
   (modo Lista) que já existe. Ver plano "Agenda em grade visual".
   ============================================================ */

.agenda-barra-visualizacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.agenda-nav-dia {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Mesma pegadinha do form-nova-pendencia/banner-pausado: [hidden] tem a
   mesma especificidade que ".seletor-janela"/".agenda-nav-dia" (que usam
   display:flex), e a classe vence por vir depois -- sem isto os controles
   de Semana/Dia continuam visíveis mesmo com o atributo hidden setado. */
#seletorSemanaAgenda[hidden],
.agenda-nav-dia[hidden] {
  display: none;
}

.agenda-nav-dia__rotulo {
  font-weight: 600;
  font-size: 14.5px;
  min-width: 170px;
  text-align: center;
}

.agenda-grade-painel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#agendaGrade {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.agenda-grade {
  display: grid;
  grid-template-columns: 56px repeat(var(--agenda-colunas, 7), minmax(120px, 1fr));
  min-width: fit-content;
}

.agenda-grade__cabecalho-vazio,
.agenda-grade__cabecalho-dia {
  position: sticky;
  top: 0;
  background: var(--cor-cartao);
  border-bottom: 1px solid var(--cor-borda);
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
  z-index: 2;
}

.agenda-grade__cabecalho-dia--hoje {
  color: var(--cor-marca-escura);
}

.agenda-grade__eixo {
  position: relative;
  border-right: 1px solid var(--cor-borda);
}

.agenda-grade__hora {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: 11.5px;
  color: var(--cor-texto-fraco);
  font-variant-numeric: tabular-nums;
}

.agenda-coluna-dia {
  position: relative;
  border-right: 1px solid var(--cor-borda);
  background-image: repeating-linear-gradient(to bottom, var(--cor-borda) 0, var(--cor-borda) 1px, transparent 1px, transparent 60px);
  cursor: pointer;
}

.agenda-coluna-dia--hoje {
  background-color: var(--cor-marca-clara);
}

.agenda-coluna-dia--bloqueada {
  background-image: repeating-linear-gradient(45deg, var(--cor-fundo-alt), var(--cor-fundo-alt) 8px, var(--cor-borda) 8px, var(--cor-borda) 16px);
  cursor: default;
}

.agenda-coluna-dia__bloqueio-rotulo {
  position: sticky;
  top: 4px;
  margin: 4px;
  padding: 4px 8px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-urgente-fundo);
  color: var(--cor-urgente);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Feriado nacional -- informativo, não restritivo (a Dra. Aline às vezes
   atende mesmo assim, então o dia continua clicável normalmente, sem a
   hachura de "bloqueado"). Tom âmbar/alerta, não vermelho/urgente. */
.agenda-coluna-dia__feriado-rotulo {
  position: sticky;
  top: 4px;
  margin: 4px;
  padding: 4px 8px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-alerta-fundo);
  color: var(--cor-alerta);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.agenda-evento {
  position: absolute;
  overflow: hidden;
  padding: 3px 6px;
  border-radius: var(--raio-pequeno);
  border-left: 4px solid var(--cor-marca);
  box-shadow: var(--sombra);
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  transition: var(--transicao);
}

.agenda-evento:hover {
  box-shadow: var(--sombra-hover);
  z-index: 3;
}

.agenda-evento__hora {
  display: block;
  font-weight: 600;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

.agenda-evento__paciente {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cor-texto);
}

.agenda-evento__ponto-rotulo {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: middle;
}

.agenda-evento--passada {
  opacity: 0.6;
}

/* Cor do container pelo STATUS da consulta (Agendada/Confirmada/Em
   atendimento/Falta/Cancelada) -- sem isto o fundo ficava muito parecido
   com o fundo da própria coluna, difícil de perceber de relance. Mesmas
   cores semânticas que .selo-sucesso/-urgente/-alerta/-info já usam em
   outras partes do painel, reaproveitadas aqui tanto na grade (.agenda-
   evento) quanto no Mês (.agenda-mes__evento). */
.agenda-status-agendada {
  background: color-mix(in srgb, var(--cor-info) 40%, white);
  border-left-color: var(--cor-info);
}

.agenda-status-confirmada {
  background: color-mix(in srgb, var(--cor-sucesso) 38%, white);
  border-left-color: var(--cor-sucesso);
}

.agenda-status-em-atendimento {
  background: color-mix(in srgb, var(--cor-marca) 42%, white);
  border-left-color: var(--cor-marca-escura);
}

.agenda-status-falta {
  background: color-mix(in srgb, var(--cor-urgente) 40%, white);
  border-left-color: var(--cor-urgente);
}

.agenda-status-cancelada {
  background: var(--cor-fundo-alt);
  border-left-color: var(--cor-texto-fraco);
  color: var(--cor-texto-fraco);
  opacity: 0.75;
  text-decoration: line-through;
}

/* Grade Mês -- 7 colunas fixas, "faux borders" via gap+fundo. */
.agenda-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--cor-borda);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  min-width: 700px;
}

.agenda-mes__dia {
  background: var(--cor-cartao);
  min-height: 108px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.agenda-mes__dia--hoje {
  background: var(--cor-marca-clara);
}

.agenda-mes__dia--bloqueada {
  background-image: repeating-linear-gradient(45deg, var(--cor-fundo-alt), var(--cor-fundo-alt) 8px, var(--cor-borda) 8px, var(--cor-borda) 16px);
  cursor: default;
}

.agenda-mes__dia__numero {
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  align-self: flex-start;
  padding: 2px 6px;
  border-radius: var(--raio-pequeno);
  transition: var(--transicao);
}

.agenda-mes__dia__numero:hover {
  background: var(--cor-fundo-alt);
}

.agenda-mes__dia__eventos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

/* Cor vem das classes .agenda-status-* (aplicadas junto no HTML) -- fica
   depois delas no arquivo de propósito, senão a especificidade empatada
   faria o background daqui vencer o do status (mesma pegadinha do
   [hidden] documentada mais acima). */
.agenda-mes__evento {
  font-size: 11.5px;
  padding: 2px 5px;
  border-left: 3px solid var(--cor-marca);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}

.agenda-mes__mais {
  font-size: 11px;
  color: var(--cor-texto-fraco);
  cursor: pointer;
}

/* Mesmo selo informativo de feriado da grade Dia/Semana, versão Mês. */
.agenda-mes__feriado {
  padding: 2px 6px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-alerta-fundo);
  color: var(--cor-alerta);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cartao-stat {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 20px 22px;
  box-shadow: var(--sombra);
}

.cartao-stat__rotulo {
  font-size: 13.5px;
  color: var(--cor-texto-suave);
  font-weight: 500;
  margin-bottom: 7px;
}

.cartao-stat__valor {
  font-family: var(--fonte-titulo);
  font-size: 32px;
  font-weight: 600;
  color: var(--cor-secundaria);
  line-height: 1;
}

.cartao-stat__valor.destaque-urgente {
  color: var(--cor-urgente);
}

.cartao-stat__valor.destaque-alerta {
  color: var(--cor-alerta);
}

.cartao-stat--clicavel {
  cursor: pointer;
}

.cartao-stat--clicavel:hover {
  border-color: var(--cor-marca);
  box-shadow: var(--sombra-hover);
  transform: translateY(-2px);
}

.cartao-stat--ativo {
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 2px rgba(184, 154, 104, 0.25), var(--sombra-hover);
}

/* ------------------------------------------------------------
   Drill-down dos cards (Visão Geral)
   ------------------------------------------------------------ */

.detalhe-card {
  margin-top: 16px;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.detalhe-card__cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detalhe-card__cabecalho span {
  flex: 1;
}

.detalhe-card__fechar {
  border: none;
  background: none;
  font-size: 15px;
  color: var(--cor-texto-suave);
  line-height: 1;
  padding: 4px;
}

.detalhe-card__fechar:hover {
  color: var(--cor-urgente);
}

.detalhe-card__rodape {
  padding: 14px 22px;
  border-top: 1px solid var(--cor-borda);
  text-align: right;
}

.tabela-scroll--detalhe {
  /* sem max-height/overflow proprio -- a tabela cresce com o conteudo e
     quem rola é a página inteira, não uma caixa dentro da caixa. */
}

.linha-clicavel {
  cursor: pointer;
}

.linha-clicavel:hover td {
  background: var(--cor-marca-clara);
}

.bolha-mensagem {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
}

.bolha-mensagem--paciente {
  align-self: flex-start;
  background: var(--cor-fundo-alt);
  color: var(--cor-texto);
  border-bottom-left-radius: 4px;
}

.bolha-mensagem--lumi {
  align-self: flex-end;
  background: var(--cor-marca);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bolha-mensagem__hora {
  font-size: 11px;
  opacity: 0.65;
  margin-top: 4px;
  text-align: right;
}

.bolha-mensagem--tool {
  align-self: center;
  max-width: 85%;
  background: transparent;
  border: 1px dashed var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: 12px;
  padding: 6px 12px;
}

.bolha-mensagem--tool .bolha-mensagem__hora {
  text-align: center;
}

/* Mensagem enviada pela equipe (via Mensagens ou pelo WhatsApp direto) --
   visualmente distinta da bolha da própria Lumi (--lumi), mesmo lado
   (direita) mas cor diferente, pra secretária diferenciar de relance quem
   respondeu o quê. */
.bolha-mensagem--equipe {
  align-self: flex-end;
  background: var(--cor-secundaria);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bolha-mensagem--enviando {
  opacity: 0.6;
}

.bolha-mensagem--erro {
  background: var(--cor-urgente-fundo);
  color: var(--cor-urgente);
  opacity: 1;
}

/* ============================================================
   Mensagens (chat direto com o paciente)
   ============================================================ */

.mensagens-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  height: calc(100vh - 220px);
  min-height: 420px;
}

.lista-conversas {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.lista-conversas__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--cor-borda);
  background: none;
  padding: 12px 16px;
  cursor: pointer;
  font-family: inherit;
}

.lista-conversas__item:hover {
  background: var(--cor-fundo-alt);
}

.lista-conversas__item--ativo {
  background: var(--cor-marca-clara);
}

.lista-conversas__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.lista-conversas__nome {
  font-weight: 500;
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lista-conversas__previa {
  font-size: 13px;
  color: var(--cor-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lista-conversas__previa--aguardando {
  color: var(--cor-texto);
  font-weight: 500;
}

.lista-conversas__hora {
  font-size: 11px;
  color: var(--cor-texto-fraco);
  margin-top: 2px;
}

.thread-mensagens {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.thread-mensagens__vazio {
  margin: auto;
  color: var(--cor-texto-fraco);
  font-size: 15px;
}

.thread-mensagens__cabecalho {
  padding: 14px 20px;
  border-bottom: 1px solid var(--cor-borda);
  font-weight: 600;
}

.thread-mensagens__corpo {
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.composer-mensagem {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--cor-borda);
}

.composer-mensagem textarea {
  flex: 1;
  resize: none;
  padding: 10px 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  font-family: inherit;
  font-size: 14.5px;
}

.composer-mensagem textarea:focus {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px rgba(138, 90, 52, 0.15);
}

.composer-mensagem button {
  align-self: flex-end;
}

@media (max-width: 860px) {
  .mensagens-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 220px 1fr;
    height: auto;
  }
}

.painel {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.painel__cabecalho {
  padding: 18px 22px;
  border-bottom: 1px solid var(--cor-borda);
  font-size: 15px;
  font-weight: 600;
}

/* Sem altura fixa por linha no tbody: o navegador distribui a sobra da
   altura do <table> (100% do container) igualmente entre as linhas de
   dados, fazendo cada paciente "esticar" pra preencher o espaço
   disponível em vez de deixar vazio embaixo da última linha. O thead
   recebe altura fixa pra não entrar nessa distribuição e crescer junto. */
.tabela {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.tabela thead tr {
  height: 46px;
}

.tabela th {
  text-align: left;
  padding: 11px 22px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto-fraco);
  border-bottom: 1px solid var(--cor-borda);
  white-space: nowrap;
}

/* Cabeçalho da tabela de pacientes na mesma cor da barra lateral. */
#secao-pacientes .tabela th {
  background: var(--cor-sidebar);
  color: rgba(255, 255, 255, 0.7);
  border-bottom-color: var(--cor-sidebar);
}

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

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

.tabela tr:hover td {
  background: var(--cor-fundo-alt);
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.selo-urgente {
  background: var(--cor-urgente-fundo);
  color: var(--cor-urgente);
}

.selo-alerta {
  background: var(--cor-alerta-fundo);
  color: var(--cor-alerta);
}

.selo-sucesso {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
}

.selo-info {
  background: var(--cor-info-fundo);
  color: var(--cor-info);
}

.selo-neutro {
  background: var(--cor-fundo-alt);
  color: var(--cor-texto-suave);
}

.atendimento-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.switch-atendimento {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.switch-atendimento input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-atendimento__slider {
  position: absolute;
  inset: 0;
  background: var(--cor-urgente);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.switch-atendimento__slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.switch-atendimento input:checked + .switch-atendimento__slider {
  background: var(--cor-sucesso);
}

.switch-atendimento input:checked + .switch-atendimento__slider::before {
  transform: translateX(16px);
}

.switch-atendimento input:disabled + .switch-atendimento__slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.botao {
  padding: 9px 18px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cor-borda-forte);
  background: var(--cor-cartao);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cor-texto);
  transition: var(--transicao, all 0.2s ease);
}

.botao:hover {
  background: var(--cor-fundo-alt);
}

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

.botao-primario:hover {
  background: var(--cor-secundaria);
  border-color: var(--cor-secundaria);
}

.botao:disabled {
  opacity: 0.55;
  cursor: default;
}

.campo-busca {
  padding: 10px 16px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: 15px;
  width: 300px;
  background: var(--cor-cartao);
}

.campo-busca:focus {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px rgba(138, 90, 52, 0.15);
}

.form-nova-pendencia {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
  margin-bottom: 16px;
}

/* Mesma pegadinha do banner-pausado: [hidden] tem a mesma especificidade
   que a classe acima, e "display: flex" vence por vir depois -- sem isto
   o formulário aparece aberto mesmo com o atributo hidden setado. */
.form-nova-pendencia[hidden] {
  display: none;
}

.form-nova-pendencia input,
.form-nova-pendencia textarea,
.form-nova-pendencia select {
  padding: 10px 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: 15px;
  font-family: inherit;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  resize: vertical;
}

.form-nova-pendencia input:focus,
.form-nova-pendencia textarea:focus,
.form-nova-pendencia select:focus {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px rgba(138, 90, 52, 0.15);
}

.form-nova-pendencia__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Cabeçalho de seção com mais de um botão (Agenda: Atualizar + Nova
   consulta) -- as outras seções só tinham 1 botão e não precisavam disto. */
.cabecalho-secao__acoes {
  display: flex;
  gap: 10px;
}

/* Info da consulta (paciente/horário/rótulo) no topo do modal -- 3 <p>
   soltos herdavam a margem padrão do navegador (~1em cada), o que sozinho
   já empurrava bastante altura. Enxuga pra caber sem rolagem na maioria
   dos casos. */
#modalConsultaInfo p {
  margin: 0 0 4px;
}

#modalConsultaInfo p:last-child {
  margin-bottom: 0;
}

/* Bloco de ação dentro do modal de consulta (status / remarcar) -- mesmo
   visual de campo do form-nova-pendencia, mas fora dele (o modal não é um
   <form> só, são duas ações independentes). Espaçamento mais enxuto que o
   form-nova-pendencia de propósito: aqui são 3 blocos empilhados na mesma
   tela, lá é só 1. */
.modal-consulta__bloco {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--cor-borda);
}

.modal-consulta__bloco:first-of-type {
  padding-top: 0;
  margin-top: 12px;
  border-top: none;
}

.modal-consulta__bloco label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.modal-consulta__bloco input,
.modal-consulta__bloco textarea,
.modal-consulta__bloco select {
  padding: 7px 12px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: 14px;
  font-family: inherit;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  resize: vertical;
}

.modal-consulta__bloco input:focus,
.modal-consulta__bloco textarea:focus,
.modal-consulta__bloco select:focus {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px rgba(138, 90, 52, 0.15);
}

.modal-consulta__bloco textarea {
  min-height: 40px;
}

/* Data/hora/duração do Remarcar lado a lado -- eram 3 campos empilhados
   sozinhos, maior contribuinte pra altura do modal. */
.modal-consulta__linha {
  display: flex;
  gap: 8px;
}

.modal-consulta__linha input {
  flex: 1;
  min-width: 0;
}

.modal-consulta__bloco .botao {
  align-self: flex-start;
  padding: 7px 14px;
}

/* Tela de Configurações (horários de atendimento) -- mesmo visual de campo
   do form-nova-pendencia, mas com <label> por linha (7 dias da semana, sem
   contexto suficiente num placeholder sozinho pra saber qual dia é qual). */
.form-configuracao-horarios {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}

.form-configuracao-horarios__dia,
.form-configuracao-horarios__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-configuracao-horarios label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.form-configuracao-horarios__nota-dia {
  font-weight: 400;
  color: var(--cor-texto-suave);
}

.form-configuracao-horarios input {
  padding: 10px 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: 15px;
  font-family: inherit;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.form-configuracao-horarios input:focus {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px rgba(138, 90, 52, 0.15);
}

.form-configuracao-horarios__ajuda {
  font-size: 13px;
  color: var(--cor-texto-suave);
  margin: 0;
}

.form-configuracao-horarios__aviso {
  font-size: 13px;
  color: var(--cor-texto-suave);
  background: var(--cor-fundo-suave, rgba(184, 154, 104, 0.12));
  border-radius: var(--raio-pequeno);
  padding: 10px 14px;
  margin: 0;
}

.form-configuracao-horarios__feedback {
  font-size: 14px;
  min-height: 20px;
}

.form-configuracao-horarios__feedback--sucesso {
  color: var(--cor-sucesso);
}

.form-configuracao-horarios__feedback--erro {
  color: #e5867a;
}

.form-configuracao-horarios__acoes {
  display: flex;
  justify-content: flex-end;
}

.painel-licoes-aprendidas {
  margin-top: 24px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cartao-licao {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cartao-licao__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cartao-licao__paciente {
  font-weight: 600;
}

.cartao-licao__resumo {
  margin: 0;
  line-height: 1.5;
}

.cartao-licao__trecho {
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.cartao-licao__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cartao-licao__comentario {
  flex: 1 1 220px;
  padding: 8px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  font: inherit;
  background: var(--cor-cartao);
  color: inherit;
}

/* Linha cancelada na Agenda -- continua visível (a visão precisa mostrar
   tudo), só marcada visualmente pra não confundir com uma consulta ativa. */
.linha-cancelada td {
  opacity: 0.55;
  text-decoration: line-through;
}

/* Consulta cujo horário já passou (não cancelada -- só histórico) --
   mesma opacidade da cancelada, sem risco no texto. */
.linha-passada td {
  opacity: 0.55;
}

/* Bolinha colorida do rótulo nativo do Simples Dental (ex: "INVISALIGN"),
   cor vem dinâmica do próprio Simples Dental via style inline no JS. */
.ponto-rotulo {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

#conteudoAgenda .tabela tbody tr {
  cursor: pointer;
}

.filtros-oportunidades {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filtros-oportunidades .campo-busca {
  width: 280px;
}

.filtros-oportunidades select {
  padding: 10px 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: 14px;
  background: var(--cor-cartao);
  color: var(--cor-texto);
}

.filtros-oportunidades select:focus {
  outline: none;
  border-color: var(--cor-marca);
}

/* ============================================================
   Analytics
   ============================================================ */

.bloco-analytics {
  margin-top: 28px;
}

.bloco-analytics__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.bloco-analytics__cabecalho h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--cor-secundaria);
}

.bloco-analytics__cabecalho p {
  margin: 2px 0 0;
  color: var(--cor-texto-suave);
  font-size: 13.5px;
}

.painel__cabecalho--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.painel__cabecalho--flex select {
  padding: 8px 12px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: 14px;
  font-weight: 400;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.painel__cabecalho--flex select:focus {
  outline: none;
  border-color: var(--cor-marca);
}

.nota-cabecalho {
  font-size: 12px;
  font-weight: 400;
  color: var(--cor-texto-suave);
  margin-top: 2px;
}

.grafico-container {
  padding: 20px;
  height: 320px;
  position: relative;
}

/* Nuvem "caseira" em CSS -- tamanho da palavra proporcional à frequência
   (calculado no JS, aplicado via style inline por palavra), sem precisar de
   lib de layout de word cloud (a maioria empacota palavras de um jeito
   difícil de portar sem canvas próprio). Ordem embaralhada no JS pra não
   parecer uma lista ranqueada. */
.nuvem-palavras {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 18px;
  padding: 28px 24px;
  line-height: 1.15;
}

.nuvem-palavras__item {
  font-weight: 600;
  white-space: nowrap;
}

.nuvem-palavras__item:nth-child(3n) {
  color: var(--cor-marca-escura);
}

.nuvem-palavras__item:nth-child(3n + 1) {
  color: var(--cor-secundaria);
}

.nuvem-palavras__item:nth-child(3n + 2) {
  color: var(--cor-marca);
}

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--cor-borda);
}

.paginacao__resumo {
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  padding: 14px 20px;
}

.paginacao .paginacao__resumo {
  padding: 0;
}

.paginacao__botoes {
  display: flex;
  gap: 8px;
}

.estado-vazio {
  padding: 48px 20px;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: 15px;
}

.estado-vazio__emoji {
  font-size: 30px;
  margin-bottom: 8px;
  display: block;
}

.carregando {
  padding: 40px 20px;
  text-align: center;
  color: var(--cor-texto-fraco);
  font-size: 14px;
}

.texto-fraco {
  color: var(--cor-texto-fraco);
  font-size: 13.5px;
}

.nome-paciente {
  font-weight: 600;
}

.nome-paciente--apelido {
  font-style: italic;
  color: var(--cor-texto-suave);
}

.nome-paciente + .texto-fraco {
  margin-top: 1px;
}

/* Barra lateral mobile: desktop mostra a marca + nav sempre visíveis;
   mobile esconde tudo isso atrás de um menu hambúrguer, deixando só uma
   faixa fina no topo com o botão e a logo -- antes ficava um cabeçalho
   feio com todos os itens de nav espremidos numa fileira rolável. */
.barra-lateral__topo-mobile {
  display: none;
}

.botao-menu {
  border: none;
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
}

.marca-lumi-img--mobile {
  height: 34px;
  width: auto;
  max-width: none;
}

@media (max-width: 860px) {
  .app {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  .barra-lateral {
    width: 100%;
    height: auto;
    overflow: visible;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 16px;
  }
  .barra-lateral__topo-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .barra-lateral__marca {
    display: none;
  }
  .nav,
  .status-bot,
  .botao-sair {
    display: none;
  }
  .barra-lateral.menu-aberto .nav {
    display: flex;
  }
  .barra-lateral.menu-aberto .status-bot,
  .barra-lateral.menu-aberto .botao-sair {
    display: block;
  }
  .nav {
    flex-direction: column;
    margin-top: 10px;
  }
  .botao-sair {
    margin-top: 10px;
  }
  .conteudo {
    height: auto;
    overflow: visible;
    padding: 20px;
  }
  .campo-busca {
    width: 100%;
  }

  /* Visão Geral: 10 cartões empilhados em 1 coluna forçavam rolagem enorme
     no celular. 2 colunas + cartões mais compactos cabem ~5 linhas em vez
     de 10, sem perder nenhuma informação. */
  .cabecalho-secao {
    margin-bottom: 16px;
  }

  .cabecalho-secao h2 {
    font-size: 1.5rem;
  }

  .seletor-janela {
    width: 100%;
    overflow-x: auto;
  }

  .grade-cartoes {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
  }

  .agenda-grade {
    grid-template-columns: 44px repeat(var(--agenda-colunas, 7), minmax(96px, 1fr));
  }

  .agenda-mes {
    min-width: 560px;
  }

  .agenda-mes__dia {
    min-height: 84px;
  }

  .cartao-stat {
    padding: 14px 14px;
  }

  .cartao-stat__rotulo {
    font-size: 12px;
    margin-bottom: 4px;
  }

  .cartao-stat__valor {
    font-size: 23px;
  }

  .grafico-container {
    height: 240px;
    padding: 14px;
  }

  .bloco-analytics__cabecalho h3 {
    font-size: 1.05rem;
  }

  .nuvem-palavras {
    padding: 18px 16px;
  }
}