:root {
  --brand-navy: #16283F;
  --brand-navy-2: #1F3A57;
  --brand-navy-3: #274866;
  --brand-gold: #B98C46;
  --brand-gold-light: #D8C39A;
  --brand-cream: #F7F3EC;
  /* Altura real do menu superior (navbar-expand-lg, uma linha) — usada pra
     encaixar a barra da agenda e o cabeçalho de salas/profissionais logo
     abaixo dele quando ficam fixos na rolagem. */
  --navbar-h: 62px;
}

body {
  background: #f4f3ef;
  color: #23272b;
}

/* ---------- Navbar ---------- */
.navbar.bg-dark {
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-navy-3)) !important;
  border-bottom: 2px solid var(--brand-gold);
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--brand-gold-light) !important;
}
.navbar-brand img {
  height: 34px;
  width: auto;
}
.navbar .nav-link {
  color: rgba(247, 243, 236, 0.85) !important;
}
.navbar .nav-link:hover {
  color: var(--brand-gold-light) !important;
}
.navbar .navbar-text {
  color: var(--brand-gold-light) !important;
}
.navbar .btn-outline-light {
  border-color: var(--brand-gold-light);
  color: var(--brand-gold-light);
}
.navbar .btn-outline-light:hover {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-navy);
}
.dropdown-menu {
  border: 1px solid var(--brand-gold-light);
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-navy-3);
  border-color: var(--brand-navy-3);
}
.btn-gold, .btn-warning {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #fff;
}
.btn-gold:hover, .btn-warning:hover {
  background: #a4783a;
  border-color: #a4783a;
  color: #fff;
}
a {
  color: var(--brand-navy-3);
}
a:hover {
  color: var(--brand-gold);
}

/* ---------- Cards ---------- */
.card {
  border: none;
  box-shadow: 0 1px 3px rgba(22, 40, 63, .10);
}
.card-header {
  background: var(--brand-cream);
  border-bottom: 1px solid var(--brand-gold-light);
  font-weight: 600;
  color: var(--brand-navy);
}
.stat-card {
  border-radius: .75rem;
  border-left: 4px solid var(--brand-gold);
}
.stat-card .stat-value {
  color: var(--brand-navy);
  font-weight: 700;
}

/* ---------- Dashboard: títulos de seção e barras de meta ---------- */
.section-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: .6rem;
}
.meter-label {
  font-weight: 600;
  color: var(--brand-navy);
}
.meter-value {
  font-weight: 700;
  color: var(--brand-navy);
}
.meter-track {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: #ece5d8;
  overflow: hidden;
}
.meter-track-sm {
  height: 8px;
  border-radius: 4px;
  margin-top: .15rem;
}
.meter-fill {
  height: 100%;
  border-radius: 7px;
  background: var(--brand-gold);
  min-width: 2px;
}
.meter-fill-ok {
  background: #2E7D4F;
}

.slot-btn {
  min-width: 84px;
}
.slot-btn.btn-outline-primary {
  color: var(--brand-navy-3);
  border-color: var(--brand-navy-3);
}
.slot-btn.btn-outline-primary:hover,
.slot-btn.btn-primary {
  background: var(--brand-navy-3);
  border-color: var(--brand-navy-3);
}

/* ---------- Public booking page ---------- */
.public-wizard {
  max-width: 640px;
  margin: 0 auto;
}
.public-header {
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-3));
  color: var(--brand-cream);
  border-radius: .75rem;
  padding: 2rem 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.public-header img {
  height: 72px;
  margin-bottom: .75rem;
}
.public-header p {
  color: var(--brand-gold-light);
  margin: 0;
}
.service-pick, .professional-pick {
  border: 1px solid #e3ddd0;
  border-radius: .6rem;
  transition: all .15s ease-in-out;
}
.service-pick:hover, .professional-pick:hover {
  border-color: var(--brand-gold);
  box-shadow: 0 2px 8px rgba(185, 140, 70, .18);
}

/* ---------- Login ---------- */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-3));
}
.login-card {
  max-width: 400px;
  width: 100%;
  border-radius: 1rem;
  padding: 2.25rem 2rem;
  background: #fff;
}
.login-card img {
  height: 80px;
  display: block;
  margin: 0 auto 1rem;
}

/* ---------- Agenda ---------- */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 3px;
}
.status-chip {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.session-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transition: transform .1s ease-in-out;
}
.session-dot:hover {
  transform: scale(1.1);
  color: #fff;
}
.session-dot-pending {
  background: #fff !important;
  color: #8a8f98;
  border: 2px dashed #c7c0af;
  box-shadow: none;
}
.session-dot-pending:hover {
  color: var(--brand-gold);
  border-color: var(--brand-gold);
}

.agenda-toolbar {
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-navy-3));
  border-radius: .6rem;
  padding: .6rem .9rem;
  color: #fff;
  /* Tudo (data, dia/semana, salas, alternador, profissional e legenda) tem
     que ficar sempre numa linha só, não importa a largura da tela ou o
     conteúdo (nome do dia, quantidade de salas, etc.). Em vez de deixar
     quebrar pra uma segunda linha, a barra rola na horizontal quando não
     couber tudo. */
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  /* Fica fixa logo abaixo do menu superior ao rolar a página, do mesmo
     jeito que o cabeçalho de salas/profissionais da grade (mais abaixo)
     fica fixo ao rolar dentro da agenda. */
  position: sticky;
  top: var(--navbar-h);
  z-index: 3;
}
.agenda-toolbar > * {
  flex-shrink: 0;
}
.agenda-toolbar .btn-outline-light {
  border-color: rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .9);
}
.agenda-toolbar .btn-outline-light:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.agenda-toolbar .form-select-sm {
  max-width: 190px;
}
/* Largura fixa pro botão do dia — sem isso, nomes de dia mais compridos
   ("Segunda-feira") deixam a barra mais larga que em dias mais curtos
   ("Sábado"), e dependendo da largura da tela isso é o suficiente pra
   barra quebrar linha num dia e não no outro. Fixando a largura, a barra
   fica sempre do mesmo jeito não importa o dia. O valor é o necessário
   pro nome de dia mais comprido ("Segunda-feira - 21/09/2026", ~215px)
   mais uma folga pequena — não deixamos mais espaço que isso pra sobrar
   mais largura pra barra caber numa linha só sem precisar rolar.  */
#dayPickerBtn {
  min-width: 222px;
  text-align: left;
}
.agenda-toolbar .dropdown-menu {
  color: #23272b;
}
.agenda-legend {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.agenda-legend span {
  white-space: nowrap;
}
.bg-gold {
  background: var(--brand-gold-light) !important;
}
.pill-toggle .btn {
  border-radius: 1.2rem;
}

.agenda-grid-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  border: 1px solid #e3ddd0;
  border-radius: .5rem;
  background: #fff;
}
/* Grade principal da agenda (não a do painel ao lado, que já tem sua
   própria regra abaixo): tem altura limitada à tela e rolagem vertical
   própria, em vez de esticar a página do tamanho do dia inteiro (13h). Com
   isso, o cabeçalho das salas/profissionais (.agenda-col-header, com
   position:sticky mais abaixo) fica fixo no topo dessa grade conforme
   rola, do mesmo jeito que a barra de cima (.agenda-toolbar) fica fixa
   abaixo do menu. */
.agenda-grid-wrap:not(.agenda-grid-wrap-panel) {
  max-height: calc(100vh - var(--navbar-h) - 138px);
  min-height: 320px;
  overflow-y: auto;
}
/* Variante usada no painel de agenda ao lado (novo agendamento, reagendar,
   bloqueio): tem altura limitada e rolagem própria, pra não esticar a
   página inteira do tamanho da grade de 13h. */
.agenda-grid-wrap-panel {
  max-height: 75vh;
  overflow-y: auto;
}
.agenda-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid #2F6FED;
  z-index: 6;
  pointer-events: none;
  display: none;
}
.agenda-now-line::before {
  content: '';
  position: absolute;
  left: 1px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2F6FED;
}
.agenda-col-highlight .agenda-col-header {
  background: var(--brand-gold-light);
  color: var(--brand-navy);
}
.agenda-col-highlight {
  border-left: 2px solid var(--brand-gold);
  border-right: 2px solid var(--brand-gold);
}
.time-rail {
  position: relative;
  width: 54px;
  flex: 0 0 54px;
  border-right: 1px solid #e3ddd0;
  background: var(--brand-cream);
}
.time-rail .rail-spacer {
  /* Sem borda aqui — senão sobra uma linha solta bem em cima do primeiro
     horário, no cantinho da grade. */
  /* Acompanha o cabeçalho de salas/profissionais (.agenda-col-header, logo
     ao lado) ficando fixo no topo ao rolar a agenda — senão, esse
     cantinho de cima à esquerda fica "vazio" (mostrando um horário do
     meio do dia) enquanto o cabeçalho das colunas já está fixo. */
  position: sticky;
  top: 0;
  /* Tem que ficar ACIMA de tudo que rola por baixo (agendamentos, bloqueios
     etc. — ver z-index deles mais abaixo), senão um agendamento no topo da
     coluna passa por cima do cabeçalho fixo ao rolar a grade em vez de
     ficar escondido atrás dele. */
  z-index: 7;
  background: var(--brand-cream);
}
.time-label {
  position: absolute;
  left: 0;
  right: 6px;
  text-align: right;
  font-size: .68rem;
  color: #8a8f98;
  transform: translateY(-50%);
}
.agenda-columns {
  display: flex;
}
.agenda-col {
  /* Largura maior que o padrão anterior (200px) — com 200px o nome do
     cliente e o serviço cortavam com "..." no meio da palavra em
     agendamentos comuns, dificultando ver do que se trata sem clicar. */
  flex: 0 0 230px;
  width: 230px;
  border-right: 1px solid #eee;
}
.agenda-col-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  font-weight: 600;
  font-size: .8rem;
  color: var(--brand-navy);
  background: var(--brand-cream);
  border-bottom: 1px solid #e3ddd0;
  position: sticky;
  top: 0;
  /* Mesmo motivo do .time-rail .rail-spacer logo acima: tem que ficar
     ACIMA dos agendamentos/bloqueios que rolam por baixo, senão um
     agendamento no topo da coluna passa por cima do cabeçalho da
     sala/profissional em vez de ficar escondido atrás dele ao rolar. */
  z-index: 7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 .3rem;
}
.agenda-col-header a {
  color: var(--brand-gold);
}
.agenda-col-body {
  position: relative;
}
.agenda-slot-link {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  text-decoration: none;
  z-index: 1;
}
.agenda-list-toggle {
  background: var(--brand-cream);
  border: 1px solid #e3ddd0;
  border-radius: .5rem;
  color: var(--brand-navy);
  font-weight: 600;
}
.agenda-list-toggle:hover {
  background: #efe7d8;
}
.agenda-list-toggle .bi-chevron-down {
  transition: transform .15s ease-in-out;
}
.agenda-list-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}
.agenda-slot-link:hover {
  background: rgba(185, 140, 70, .12);
  cursor: pointer;
}
.agenda-block-abs {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 2;
  border-radius: .4rem;
  padding: .2rem .4rem;
  overflow: hidden;
  text-decoration: none;
  color: #23272b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: box-shadow .15s ease-in-out, z-index 0s;
}
.agenda-block-abs:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
  z-index: 5;
  color: #23272b;
}
.agenda-block-icons i {
  font-size: .78rem;
}
.agenda-blocked-abs {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  background: #d8d4cb;
  pointer-events: none;
}
.agenda-scheduleblock-abs {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 3;
  border-radius: .4rem;
  padding: .2rem .4rem;
  overflow: hidden;
  background: #3A3A3A;
  color: #fff;
  font-size: .74rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.agenda-scheduleblock-abs .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  transform: scale(.65);
}
/* ---------- Agenda em lista (celular) ---------- */
.agenda-mobile-card {
  display: block;
  background: #fff;
  border: 1px solid #e3ddd0;
  border-left: 4px solid var(--brand-gold);
  border-radius: .6rem;
  padding: .7rem .85rem;
  margin-bottom: .6rem;
  color: #23272b;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.agenda-mobile-card:hover,
.agenda-mobile-card:active,
.agenda-mobile-card:focus {
  background: var(--brand-cream);
  color: #23272b;  /* o cartão inteiro é clicável: o texto não vira cor de link */
}

/* Telas pequenas: menos aperto nas tabelas e cartões */
@media (max-width: 575.98px) {
  .card-body {
    padding: .85rem;
  }
  .table > :not(caption) > * > * {
    padding: .5rem .4rem;
  }
  .stat-card .stat-value {
    font-size: 1.1rem !important;   /* valores em R$ cabem numa linha só */
    line-height: 1.25;
  }
  .stat-card .text-muted.small {
    font-size: .74rem;
  }
  h4 {
    font-size: 1.15rem;
  }
  .btn {
    min-height: 38px;
  }
}

.alert-pill {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  padding: .25rem .5rem;
  border-radius: .3rem;
  margin-bottom: .3rem;
  border-left: 3px solid transparent;
}
.alert-pill-warn {
  background: #fbf1de;
  color: #8a5a1d;
  border-left-color: #D8A93B;
}
.alert-pill-ok {
  background: #e6f6ea;
  color: #23723b;
  border-left-color: #3FAE5A;
}
.alert-pill-danger {
  background: #fbe9ea;
  color: #96322f;
  border-left-color: #B94A48;
}
.alert-pill-birthday {
  background: #fdf3da;
  color: #8a5a1d;
  border-left-color: #D8A93B;
}

/* ---------- Agenda: visão semanal ---------- */
.week-board {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
}
.week-col {
  background: #fff;
  border: 1px solid #e3ddd0;
  border-radius: .6rem;
  flex: 1 0 160px;
  min-width: 160px;
  max-width: 220px;
}
.week-col-today {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 1px var(--brand-gold);
}
.week-col-header {
  background: var(--brand-cream);
  border-bottom: 1px solid #e3ddd0;
  border-radius: .6rem .6rem 0 0;
  padding: .5rem .6rem;
  text-align: center;
  text-transform: capitalize;
}
.week-col-body {
  padding: .5rem;
  min-height: 200px;
}
.week-chip {
  display: block;
  border-radius: .35rem;
  padding: .3rem .45rem;
  margin-bottom: .4rem;
}

/* ---------- Kanban de leads (CRM) ---------- */
.kanban-board {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}
.kanban-col {
  background: #f7f3ec;
  border-radius: .6rem;
  min-width: 240px;
  flex: 1 0 240px;
  padding: .6rem;
}
.kanban-col-header {
  font-weight: 600;
  margin-bottom: .5rem;
  display: flex;
  justify-content: space-between;
}
.kanban-card {
  background: #fff;
  border-radius: .5rem;
  padding: .5rem .6rem;
  margin-bottom: .5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  font-size: .875rem;
}
.bg-lead-origin {
  background: var(--brand-navy-3);
  font-weight: 500;
}
.bg-lead-campaign {
  background: var(--brand-gold);
  font-weight: 500;
}

/* ---------- Ficha do cliente (CRM 360) ---------- */
.crm-metric {
  border-radius: .6rem;
  background: #f7f3ec;
  padding: .75rem 1rem;
}
.crm-metric .value { font-size: 1.35rem; font-weight: 700; }
.churn-badge-baixo { background: #3FAE5A; }
.churn-badge-medio { background: #D8A93B; }
.churn-badge-alto { background: #B94A48; }

/* ---------- Boas-vindas no login ---------- */
.welcome-banner {
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-navy-3));
  color: var(--brand-cream);
  border: 1px solid var(--brand-gold);
  font-weight: 500;
}
.welcome-banner .bi-stars {
  color: var(--brand-gold-light);
}
.welcome-banner .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---------- Aniversariantes ---------- */
.birthday-banner {
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-light));
  color: var(--brand-navy);
  border: 1px solid var(--brand-gold);
  font-weight: 500;
}
.birthday-banner a {
  color: var(--brand-navy);
  text-decoration: underline;
}

/* ---------- Evolução ---------- */
.evo-photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: .5rem;
}