/* =========================
   THEME & TOKENS
========================= */
:root {
  --bg:#0b1020;
  --card:#121a34;
  --text:#e9ecf1;
  --muted:#9fb0d0;
  --accent:#6aa6ff;

  /* tokens usados ao longo do layout */
  --text-2: #e9ecf1;           /* antes referenciado como var(--text-2) */
  --border:#1d2747;            /* usado em várias bordas */
  --u-aqua:#21c7d9;            /* cor lateral p/ Agendado */
  --u-earth:#c08a2d;           /* cor lateral p/ Não compareceu */
  --topbar-h: 44px;            /* altura do cabeçalho */
}

/* =========================
   BASE
========================= */
* { box-sizing: border-box; font-family: system-ui, Segoe UI, Roboto, Arial; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); overflow: auto; }

/* Na página de Agenda removemos a rolagem global — cada coluna gerencia sua rolagem */
body.agenda { overflow: hidden; }

/* Links */
a { color: var(--accent); text-decoration: none; }

/* Tipografia e containers */
h1, h2, h3 { margin: 0 0 8px; }
.container { width: min(96vw, 1280px); margin: 24px auto; padding: 0 16px; }

/* Cartão */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/* Grids utilitários */
.grid { display: grid; gap: 16px; align-items: start; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 640px){ .grid-2 { grid-template-columns: 1fr; } }

/* Form */
label { display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
input, select, textarea {
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid #28345c; background:#0e1530; color:var(--text);
}
button {
  padding:10px 14px; border-radius:10px; border:1px solid #2d5fff;
  background:#143975; color:white; cursor:pointer;
}
button.secondary { background:transparent; border-color:#3a4b80; color:var(--muted); }

/* Listas */
.list { border-top:1px solid var(--border); margin-top:12px; overflow:visible; }
.item {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:12px 10px; border-bottom:1px solid var(--border);
}
.item.clickable { cursor: pointer; }
.item.clickable:hover { background: rgba(255,255,255,.03); }
.list .item > div:first-child { flex: 1 1 auto; min-width: 0; }
.list .item > div:last-child  { flex: 0 0 auto; }
.list .item b, .list .item small { word-break: break-word; }
small { color: var(--muted); }

/* Badges / Status */
.badge { background:#0b2b6b; color:#a6c5ff; padding:4px 8px; border-radius:999px; font-size:12px; }
.badge.st-agendado  { background:#0b2b6b; color:#a6c5ff; }
.badge.st-atendido  { background:#124d2a; color:#b9f6ce; }
.badge.st-nshow     { background:#6b3e0b; color:#ffd9a6; }
.badge.st-cancelado { background:#5c1a1a; color:#ffb3b3; }

/* Cartões de agendamento com destaque lateral por status */
.list.appts .item{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
  background: rgba(255,255,255,.02);
}
.list.appts .item:hover{ background: rgba(255,255,255,.04); }
.list.appts .item b{ font-size: 16px; }
.list.appts .item small{ color: var(--text-2); }
.list.appts .item:has(.badge.st-agendado)  { border-left: 4px solid var(--u-aqua); }
.list.appts .item:has(.badge.st-atendido)  { border-left: 4px solid #2aa37b; }
.list.appts .item:has(.badge.st-nshow)     { border-left: 4px solid var(--u-earth); }
.list.appts .item:has(.badge.st-cancelado) { border-left: 4px solid #b04b4b; }
@media (max-width: 768px) {
  .list .item { flex-direction: column; }
  .list .item > div:last-child { align-self: flex-end; }
}

/* =========================
   TOPBAR
========================= */
.topbar {
  display:flex; align-items:center; gap:12px;
  justify-content:space-between;
  padding: 8px 16px;           /* topo mais “fininho” */
  border-bottom:1px solid var(--border);
  background: var(--card);
  position: sticky; top: 0; z-index: 50;
}
.brand { font-weight: 700; letter-spacing:.3px; color:#cfe0ff; display:flex; align-items:center; gap:8px; }
.brand img.logo{ width: 300px; }      /* logo menor */
.menu { display:flex; gap: 12px; }
/*.menu a{
  padding:6px 10px; border-radius:10px; border:1px solid transparent;
  color: var(--text); opacity:.9; font-size:14px;
}
/*.menu a:hover { border-color:#2d5fff; opacity:1; }
.menu a.active { background:#0b2b6b; color:#a6c5ff; border-color:#2d5fff; }*/
.topbar .user-slot { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* Subnav (usado em formulários) */
.subnav { display:flex; gap:8px; margin:12px 0 0; }
.subnav a { padding:8px 12px; border-radius:10px; border:1px solid #2d3a66; color:var(--text); opacity:.9; }
.subnav a.active { background:#0b2b6b; color:#a6c5ff; border-color:#2d5fff; }
.subnav a:hover { opacity:1; }

/* =========================
   DIALOG / MODAL
========================= */
dialog {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 16px;
  padding: 0;
  inset: 0; margin: auto;
  width: min(96vw, 1000px);
  max-height: 92vh;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
.dialog-card {
  background: transparent; border: none; box-shadow: none;
  padding: 16px; max-height: calc(92vh - 16px); overflow: auto;
}

/* =========================
   PRINT
========================= */
@media print {
  .topbar, .subnav, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .print-card { background: #fff; color:#000; border: none; box-shadow: none; padding: 0; }
  a { color: #000; text-decoration: none; }
}

/* =========================
   FORM COMPACT HELPERS
========================= */
.form-compact label{ font-size:12px; color: var(--text-2); margin-bottom:6px; }
.form-compact input, .form-compact select, .form-compact textarea{
  padding:8px 10px; font-size:14px; border-radius:10px;
}
/* input + botão na mesma linha (responsivo) */
.field-inline{
  display:grid; grid-template-columns: minmax(0,1fr) auto; gap:8px; align-items:end;
}
@media (max-width: 600px){
  .field-inline{ grid-template-columns: 1fr; }
  .field-inline button{ justify-self: end; }
}
/* 2 colunas equilibradas (quebra p/ 1 no mobile) */
.row-2-balanced{ display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 900px){ .row-2-balanced{ grid-template-columns: repeat(2, minmax(280px,1fr)); } }
/* Data & Hora juntos; Duração e Modo em linhas separadas (se preferir, use row-4-tight) */
.row-2-tight{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px){ .row-2-tight{ grid-template-columns: 1fr; } }
/* 4 colunas compactas (desktop) */
.row-4-tight{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(140px, 1fr)); }
@media (min-width: 900px){ .row-4-tight{ grid-template-columns: repeat(4, minmax(140px, 1fr)); } }
.actions-right{ display:flex; justify-content:flex-end; gap:8px; }

/* =========================
   AGENDA – SPLIT LAYOUT
========================= */
/* Wrapper de página (apenas na agenda) */
.main-split{
  height: calc(100vh - var(--topbar-h));
  width: min(96vw, 1280px);
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 0.8fr 1.7fr;    /* Agenda mais larga */
  gap: 20px;
  overflow: hidden;
}
@media (max-width: 1080px){
  body.agenda { overflow: auto; }        /* mobile: volta rolagem da página */
  .main-split{ height:auto; grid-template-columns: 1fr; }
}

/* Colunas */
.left-pane{
  /* sem rolagem “forçada”: se o conteúdo crescer muito, aparece barra, mas evitamos cortes */
  min-height: 0; overflow: auto;
}
.right-pane{ display: flex; flex-direction: column; overflow: hidden; }

/* Agenda: cabeçalho fixo + lista rolável */
.agenda-card{ display:flex; flex-direction:column; }
.agenda-body{ display:flex; flex-direction:column; height:100%; overflow:hidden; min-height:0; }
.agenda-sticky{
  position: sticky; top: 0; z-index: 2;
  background: var(--card);
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 12px rgba(0,0,0,.16);
}
.agenda-sticky h2{ margin:0 0 8px; }

/* Filtros: De • Até • Buscar • Botão na mesma linha */
.agenda-filters{
  display:grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap:12px; align-items:end;
}
@media (max-width: 900px){
  .agenda-filters{ grid-template-columns: 1fr; }
}

/* Onde a rolagem acontece (única) */
.agenda-list{ flex:1; overflow:auto; padding-top: 6px; scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable) { .agenda-list { padding-right: 8px; } }
/* === Somente a AGENDA com rolagem visível === */
body.agenda { overflow: hidden; }            /* página da Agenda sem scroll global */
.main-split { overflow: hidden; }            /* contêiner geral sem rolamento */
.left-pane { overflow: hidden; }             /* NADA de scroll na coluna esquerda */
.left-pane .form-scroll { overflow: visible; }

/* Agenda (direita): apenas a LISTA rola */
.right-pane { overflow: hidden; }
.agenda-body { overflow: hidden; height: 100%; }
.agenda-list {
  overflow-y: auto !important;               /* barra única aqui */
  scrollbar-gutter: stable both-edges;       /* reserva espaço p/ barra */
}
@supports not (scrollbar-gutter: stable) {
  .agenda-list { padding-right: 8px; }
}

/* Se o "Novo paciente" ficar muito alto, rola só o conteúdo dele */
.left-pane details[open] > div {
  max-height: calc(100vh - var(--topbar-h) - 260px);
  overflow: auto;
}


/* Só a Agenda rola */
body.agenda { overflow: hidden; }
.main-split{ height: calc(100vh - var(--topbar-h)); overflow: hidden; }

/* liberar encolhimento dos filhos flex */
.right-pane,
.agenda-card,
.agenda-body,
.agenda-list { min-height: 0; }

.right-pane   { display:flex; flex-direction:column; overflow:hidden; }
.agenda-card  { display:flex; flex-direction:column; overflow:hidden; }
.agenda-body  { display:flex; flex-direction:column; height:100%; overflow:hidden; }

/* barra ÚNICA aqui */
.agenda-list{
  flex: 1 1 auto;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}

/* coluna esquerda sem scroll externo */
.left-pane{ overflow:hidden; }
.left-pane .form-scroll{ overflow:visible; }

/* se “Novo paciente” ficar muito alto, rola só ele */
.left-pane details[open] > div{
  max-height: calc(100vh - var(--topbar-h) - 260px);
  overflow:auto;
}

/* páginas em split (lista rola; página não) */
body.agenda,
body.catalog { overflow: hidden; }
.badge.st-remarcado { background:#0b476b; color:#a6e8ff; }


/* ===== Usuários: formulário sem cortes ===== */
body.users .main-split{
  grid-template-columns: 0.9fr 1.3fr; /* form à esquerda + lista à direita */
}

.users-form .row-2{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(260px, 1fr)); /* 2 colunas confortáveis */
}
@media (max-width: 1200px){
  .users-form .row-2{ grid-template-columns: 1fr; } /* quebra p/ 1 coluna se apertar */
}

/* 3 campos na mesma linha (se você usar em algum ponto) */
.users-form .row-3{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}
@media (max-width: 1200px){ .users-form .row-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .users-form .row-3{ grid-template-columns: 1fr; } }

/* campo que deve ocupar a linha inteira */
.users-form .wide{ grid-column: 1 / -1; }

/* garante que nada fica escondido no card da esquerda */
.left-pane{ overflow: visible; }

/* filtros da lista (direita) se ajustam em uma linha e quebram no mobile */
.users-filters{
  display: grid;
  grid-template-columns: 1fr 180px auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 900px){
  .users-filters{ grid-template-columns: 1fr; }
}


/* barra fixa dentro do card de recebíveis */
.recebiveis-sticky{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--card);
  padding: 10px 0 12px;
  border-bottom: 1px solid #1d2747;
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
}

/* grid dos cartões de totais */
.totais-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 680px){
  .totais-grid{ grid-template-columns: 1fr; }
}

.total-card{
  background: rgba(255,255,255,.03);
  border: 1px solid #1d2747;
  border-radius: 12px;
  padding: 12px;
}

.total-label{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.total-value{
  font-size: 20px;
  font-weight: 700;
}

#btnFilter{
  width: 80px;
}

#q{
  width: 300px;
}
#p_q{width: 300px;}

/* ===== Recebíveis: filtros compactos em uma linha ===== */
.agenda-sticky .agenda-filters{
  display:grid;
  grid-template-columns: 140px 140px 1fr 170px auto; /* De | Até | Buscar | Status | Botão */
  gap: 10px;
  align-items: end;
}
.agenda-sticky .agenda-filters input[type="date"],
.agenda-sticky .agenda-filters input[type="text"],
.agenda-sticky .agenda-filters select{
  min-width: 0;  /* deixa encolher sem estourar */
}
.agenda-sticky .agenda-filters #btnFilter{
  white-space: nowrap;
}

/* Responsivo: quebra de forma elegante */
@media (max-width: 900px){
  .agenda-sticky .agenda-filters{
    grid-template-columns: 1fr 1fr;
  }
  .agenda-sticky .agenda-filters > *:nth-child(3){ grid-column: span 2; } /* Buscar */
  .agenda-sticky .agenda-filters > *:nth-child(5){ grid-column: span 2; } /* Botão */
}

/* ===== Totais: cards com destaque ===== */
.totals-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0;
}
.total-card{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border, #1d2747);
  background: rgba(255,255,255,.02);
}
.total-card small{ color: var(--muted); display:block; margin-bottom: 6px; }
.total-card .value{ font-weight: 700; font-size: 18px; }

/* Borda azul (padrão agenda) p/ "Em aberto" */
.total-card--aberto{ border-left: 4px solid #0b2b6b; }

/* Destaque VERDE (igual status recebido) para "Total recebido" */
.total-card--recebido{
  border-left: 4px solid #2aa37b;             /* verde */
  background: rgba(18,77,42,.23);              /* leve fundo */
  box-shadow: inset 0 0 0 1px rgba(42,163,123,.14);
}
.total-card--recebido .value{
  color: #b9f6ce;                               /* mesmo tom da badge recebida */
}


.agenda-filter{
  display:grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap:12px; align-items:end; 
}

/* ===== Contas a pagar / Fornecedores: mesmo grid da Agenda,
   mas com a coluna ESQUERDA mais estreita ===== */
.main-split.pay{
  grid-template-columns: 0.42fr 1.58fr;  /* antes estava largo demais à esquerda */
  gap: 16px;
  overflow: hidden;
}
@media (min-width: 1440px){
  .main-split.pay{ grid-template-columns: 0.38fr 1.62fr; }
}
@media (max-width: 1080px){
  .main-split.pay{ grid-template-columns: 1fr; } /* empilha no mobile */
}

/* Garante que a direita pode encolher e não “corte” conteúdo */
.pay .right-pane,
.pay .agenda-card,
.pay .agenda-body,
.pay .agenda-list { min-width: 0; }

/* A coluna da ESQUERDA não passa do razoável */
.pay .left-pane{ min-width: 320px; max-width: 460px; overflow:auto; }

/* Itens da lista nunca extrapolam a largura */
.pay .list.appts .item{ max-width: 100%; }

/* Linha de edição (valor/forma/botões) mais compacta e sem quebra ruim */
.pay .list.appts .item .grid{
  grid-template-columns: 120px 220px !important;  /* Valor | Forma */
  gap: 10px;
}
.pay .list.appts .item .grid input[type="number"]{ width: 120px; }
.pay .list.appts .item .grid select{ width: 220px; }

/* Botões ao lado (na mesma linha) e sem estourar */
.pay .list.appts .item .actions-right{
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;             /* se apertar, quebra com elegância */
}
.pay .list.appts .item .actions-right button{ white-space: nowrap; }
/* ===== Novo a pagar (coluna esquerda) ===== */

/* Data menor; Valor ocupa o restante */
.pay .left-pane .row-venc-valor{
  display: grid;
  grid-template-columns: 140px 1fr;   /* data mais estreita */
  gap: 12px;
  align-items: end;
}
.pay .left-pane .row-venc-valor input[type="date"]{ min-width: 0; }

/* Recorrente + Quantidade em linha (elegante) */
.pay .left-pane .row-recorrencia{
  display: grid;
  grid-template-columns: auto 1fr;    /* checkbox + quantidade */
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.pay .left-pane .chk-inline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Se o espaço apertar, empilha os pares de campos */
@media (max-width: 1280px){
  .pay .left-pane .row-venc-valor{ grid-template-columns: 1fr; }
  .pay .left-pane .row-recorrencia{ grid-template-columns: 1fr; }
}

/* (opcional) dá um tiquinho mais de folga para a lista à direita em telas médias */
@media (max-width: 1360px){
  .main-split.pay{ grid-template-columns: 0.44fr 1.56fr; }
}
:root{
  /* ajuste aqui se quiser ainda mais largo (ex.: 1560px ou 1680px) */
  --page-max: 1800px;
}

/* containers principais mais largos */
.container{ width:min(var(--page-max), 98vw); }
.main-split{ width:min(var(--page-max), 98vw); }

/* se quiser a coluna da direita ainda mais dominante nas telas grandes */
@media (min-width: 1200px){
  .main-split{ grid-template-columns: .8fr 2fr; } /* esq menor | dir maior */
}
.hidden { display: none; }

/* ===== Agenda: Lista por hora ===== */
.hour-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hour-slot{
  display: grid;
  grid-template-columns: 80px 1fr;   /* coluna da hora + coluna dos cards */
  align-items: start;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

.hour-label{
  color: var(--muted);
  font-weight: 600;
  padding-top: 4px;
}

.hour-items .item{
  margin-bottom: 8px;               /* espaço entre agendamentos da mesma hora */
}

/* ===== Agenda: header fixo ===== */
.agenda-card .agenda-sticky{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card-bg, #0f172a); /* mantém o fundo ao rolar */
  padding-bottom: 8px;
}

/* ===== Lista por hora: grid compacto para vários cards por linha ===== */
.hour-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hour-slot{
  display: grid;
  grid-template-columns: 72px 1fr;     /* coluna da hora + coluna dos cards */
  align-items: start;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

.hour-label{
  color: var(--muted);
  font-weight: 600;
  padding-top: 6px;
}

/* vários cards na mesma linha (ajuste o minmax para ampliar/reduzir) */
.hour-items{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
  gap: 10px;
}

/* cartão mais compacto */
.hour-items .item{
  padding: 10px 12px;
  border-radius: 12px;
}

.hour-items .item b{
  font-size: .98rem;
  line-height: 1.2;
}

.hour-items .item small{
  color: var(--muted);
}


/* Cabeçalho da agenda: filtros e modos na mesma linha */
.agenda-filters{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;          /* quebra elegante se faltar espaço */
}

/* empurra os botões de modo para a direita em telas largas */
.agenda-filters .spacer{
  flex: 1 1 auto;
}

/* inputs e botão de filtro com altura consistente */
.agenda-filters input[type="date"],
.agenda-filters input[type="text"],
.agenda-filters button{
  height: 36px;
}

/* rótulo “Modo:” */
.agenda-filters .mode-label{
  font-size: 0.9rem;
  opacity: 0.85;
  margin-right: 2px;
  white-space: nowrap;
}

/* grupo dos botões de modo */
.agenda-filters .mode-group{
  display: flex;
  gap: 8px;
}

/* responsivo: em telas menores, empilha tudo e remove o espaçador */
@media (max-width: 768px){
  .agenda-filters{
    flex-direction: column;
    align-items: stretch;
  }
  .agenda-filters .spacer{ display: none; }
  .agenda-filters .mode-group{
    justify-content: center;
  }
}


.badge.st-confirmado {
  background: rgba(25, 135, 84, 0.15);  /* verdinho suave */
  color: #198754;
  border: 1px solid rgba(25, 135, 84, 0.5);
  font-weight: 600;
}

.list.appts .item:has(.badge.st-confirmado) {
  border-left: 4px solid #198754; /* mesmo tom de verde da badge */
}

/* Quando o formulário da esquerda estiver oculto */
.main-split.no-form{
  grid-template-columns: 1fr;        /* Agenda ocupa a largura toda */
}

.main-split.no-form .left-pane{
  display: none;                     /* esconde “Nova consulta” */
}

/* Dias clicáveis na visão mês */
#agendaMonth .calendar-day {
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}







/* Se quiser manter os dias de outro mês mais apagadinho */
#agendaMonth .calendar-day.calendar-day--other-month {
  opacity: 0.5;
}

#agendaMonth .calendar-day.calendar-day--other-month:hover {
  opacity: 0.85;
}
/* Bloqueios: borda esquerda vermelha */
.block-card{
  border-left: 4px solid #dc3545 !important;
}


/* BLOQUEIO: manter fundo (cor do profissional), mas ter só 1 faixa (vermelha) */
.appt-card.block-card{
  border-left: 4px solid #dc3545 !important;
  box-shadow: none !important;          /* remove faixa por box-shadow (se existir) */
  background-image: none !important;    /* remove faixa por gradient (se existir) */
}

/* remove faixa por pseudo-elemento (muito comum no CSS do card) */
.appt-card.block-card::before,
.appt-card.block-card::after{
  content: none !important;
  display: none !important;
}



/* Botão Bloquear horário (com cadeado) */
#btnOpenBlock.btn-lock{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  height: 36px;          /* mantém alinhado com os outros */
  padding: 0 12px;

  border: 1px solid rgba(220, 53, 69, .65);
  background: rgba(220, 53, 69, .12);
  color: #ffb3b3;
}

#btnOpenBlock.btn-lock:hover{
  border-color: rgba(220, 53, 69, .95);
  background: rgba(220, 53, 69, .20);
  color: #ffe1e1;
}

#btnOpenBlock.btn-lock:active{
  transform: translateY(1px);
}

#btnOpenBlock.btn-lock .btn-ico{
  font-size: 14px;
  line-height: 1;
}


/* ===== Botões outline coloridos (hover preenche) ===== */
:root{
  --btn-radius: 12px;
  --btn-pad-y: 10px;
  --btn-pad-x: 14px;
}

/* base */
.btn{
  appearance:none;
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  border: 2px solid var(--btn-color, #2d5fff);
  color: var(--btn-color, #2d5fff);
  background: transparent;

  transition:
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .06s ease,
    filter .15s ease;
}

.btn:hover{
  background: var(--btn-color, #2d5fff);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  filter: saturate(1.05);
}

.btn:active{
  transform: translateY(1px);
}

.btn:focus{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--btn-color, #2d5fff) 25%, transparent);
}

.btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* tamanhos */
.btn--sm{ padding: 8px 12px; border-radius: 10px; font-size: 13px; }
.btn--lg{ padding: 12px 16px; border-radius: 14px; font-size: 15px; }

/* cores (defina a cor via variável) */
.btn--blue   { --btn-color:#2563eb; } /* buscar */
.btn--green  { --btn-color:#16a34a; } /* salvar */
.btn--orange { --btn-color:#f59e0b; } /* anexos */
.btn--red    { --btn-color:#ef4444; } /* fechar / excluir */

/* agrupador (alinha e dá espaçamento) */
.btn-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

/* badge opcional (ex: anexos 3) */
.btn-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* deixa o badge “neutro” quando não estiver hover (outline) */
.btn .btn-badge{
  background: color-mix(in srgb, var(--btn-color) 18%, transparent);
  color: color-mix(in srgb, var(--btn-color) 90%, black);
}
.btn:hover .btn-badge{
  background: rgba(255,255,255,.25);
  color:#fff;
}

/* ===== Cards de pacientes mais compactos (2 linhas) ===== */
.patient-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 14px;  /* mais compacto que o atual */
}

.patient-info{
  min-width: 0;
  flex: 1 1 auto;
}

.patient-top{
  display:flex;
  align-items:baseline;
  gap: 10px;
  min-width: 0;
}

.patient-name{
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.patient-cpf{
  opacity:.8;
  font-size: 12px;
  white-space: nowrap;
}

.patient-meta{
  margin-top: 4px;
  font-size: 12px;
  opacity:.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botões do card alinhados e “compactos” */
.patient-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex: 0 0 auto;
}

html:not(.auth-ready) .menu,
html:not(.auth-ready) .user-slot {
  visibility: hidden;
}

.agenda-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

#btnToggleForm{
  white-space:nowrap;
}

.main-split.no-form{
  grid-template-columns:1fr !important;
}

.main-split.no-form .left-pane{
  display:none !important;
}

@media (max-width: 768px){
  body.agenda{
    overflow:auto !important;
  }

  .main-split{
    width:100vw !important;
    height:auto !important;
    padding:8px !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .topbar{
    grid-template-columns:1fr !important;
  }

  .brand img.logo{
    width:180px !important;
    max-width:70vw;
  }

  .menu{
    overflow-x:auto;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    padding-bottom:4px;
  }

  .menu a{
    white-space:nowrap;
    font-size:13px;
  }

  .left-pane{
    display:block;
  }

  .main-split.mobile-form-hidden .left-pane{
    display:none !important;
  }

  .agenda-card{
    min-height:calc(100vh - 120px);
  }

  .agenda-sticky{
    padding:10px 8px;
  }

  .agenda-title-row{
    align-items:flex-start;
  }

  .agenda-filters{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  #q,
  #btnFilter{
    width:100% !important;
  }

  .mode-group{
    display:grid !important;
    grid-template-columns:1fr;
    gap:8px;
  }

  .mode-group button,
  #btnOpenBlock{
    width:100%;
  }

  .hour-slot{
    grid-template-columns:52px 1fr !important;
  }

  .hour-label{
    font-size:12px;
  }

  #agendaHourList .hour-main{
    flex-wrap:wrap !important;
    white-space:normal !important;
  }

  #agendaHourList .hour-patient,
  #agendaHourList .hour-reason{
    white-space:normal !important;
  }

  .calendar-weekdays,
  .calendar-month-grid,
  .calendar-week-grid{
    min-width:720px;
  }

  .agenda-month,
  .agenda-week{
    overflow-x:auto;
  }

  dialog{
    width:96vw !important;
  }
}


.mobile-menu-btn{
  display:none;
}

.agenda-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.agenda-mobile-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

@media (max-width: 768px){

  body.agenda{
    overflow:auto !important;
  }

  .topbar{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:8px;
    padding:8px 12px !important;
  }

  .brand img.logo{
    width:160px !important;
    height:auto !important;
    max-width:65vw;
  }

  .mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:38px;
    padding:0;
    font-size:24px;
    border-radius:10px;
  }

  .topbar .menu{
    display:none !important;
    grid-column:1 / -1;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px 0 0;
    border-top:1px solid var(--border);
  }

  .topbar .menu.menu-open{
    display:flex !important;
  }

  .topbar .menu a{
    display:block;
    padding:12px;
    border-radius:10px;
    background:rgba(255,255,255,.03);
    white-space:nowrap;
  }

  .topbar .user-slot{
    grid-column:1 / -1;
    justify-self:start;
    width:100%;
    display:flex;
    justify-content:space-between;
  }

  .main-split{
    width:100vw !important;
    height:auto !important;
    padding:8px !important;
    display:block !important;
  }

  .left-pane{
    display:none !important;
  }

  .main-split:not(.mobile-form-hidden) .left-pane{
    display:block !important;
    margin-bottom:8px;
  }

  .agenda-card{
    min-height:calc(100vh - 92px);
    padding:10px !important;
  }

  .agenda-sticky{
    padding:8px 0 10px !important;
  }

  .agenda-title-row{
    margin-bottom:8px;
  }

  .agenda-title-row h2{
    font-size:18px;
  }

  .agenda-mobile-actions button{
    height:34px;
    padding:0 10px;
    font-size:13px;
  }

  .agenda-filters{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--border);
  }

  .agenda-filters.mobile-collapsed{
    display:none !important;
  }

  .agenda-filters input,
  .agenda-filters button{
    width:100% !important;
  }

  #from,
  #to{
    display:none;
  }

      
  .mode-group{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr);
    gap:6px;
  }

  .mode-group button{
    width:100%;
    padding:8px 6px;
    font-size:12px;
  }

  .agenda-list,
  .agenda-month,
  .agenda-week{
    max-height:none !important;
  }

  .calendar-month-header{
    margin-top:8px;
  }

  .calendar-month-title{
    font-size:16px;
  }

  .calendar-weekdays,
  .calendar-month-grid,
  .calendar-week-grid{
    min-width:720px;
  }

  .agenda-month,
  .agenda-week{
    overflow-x:auto;
    padding-bottom:12px;
  }

  .hour-slot{
    grid-template-columns:48px 1fr !important;
  }

  .hour-label{
    font-size:12px;
  }

  #agendaHourList .hour-main{
    flex-wrap:wrap !important;
    white-space:normal !important;
  }

  #agendaHourList .hour-pro,
  #agendaHourList .hour-mode{
    display:none !important;
  }

  dialog{
    width:96vw !important;
  }
}

@media (max-width:768px){

  .topbar{
    display:grid !important;
    grid-template-columns: 1fr auto auto !important;
    align-items:center;
    gap:8px;
  }

  .brand{
    min-width:0;
  }

  .brand img.logo{
    width:150px !important;
    max-width:55vw;
    height:auto;
  }

  .user-slot{
    grid-column:auto !important;
    justify-self:end !important;
    width:auto !important;
    display:flex !important;
    align-items:center;
    margin:0 !important;
  }

  .user-slot button,
  .user-slot a{
    height:38px;
    padding:0 12px;
    white-space:nowrap;
  }

  .mobile-menu-btn{
    width:38px;
    height:38px;
    margin:0;
    padding:0;
    font-size:22px;
  }

  .topbar .menu{
    grid-column:1 / -1;
  }
}

@media (max-width: 768px){

  .agenda-filters{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .mobile-filter-actions{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
  }

  #btnFilter,
  #btnOpenBlock{
    width:100% !important;
    height:36px;
    padding:0 8px;
    font-size:13px;
  }

  #btnOpenBlock{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
  }
}

@media (max-width:768px){

  .calendar-day{
    min-width:0;
    overflow:hidden;
  }

  .calendar-day__events{
    min-width:0;
    overflow:hidden;
  }

  .calendar-event{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    justify-content:flex-start;
  }

  .calendar-event__time,
  .calendar-event__title,
  .calendar-event .badge{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .calendar-event__time{
    flex:0 0 auto;
    max-width:38px;
  }

  .calendar-event__title{
    flex:1 1 auto;
  }

  .calendar-event .badge{
    flex:0 1 auto;
    max-width:74px;
    padding:2px 6px;
    font-size:10px;
  }

  .agenda-month .calendar-event,
  .agenda-week .calendar-event{
    border-radius:8px;
    padding:3px 5px;
    gap:3px;
    font-size:10px;
  }
}

@media (max-width:768px){

  #agendaHourList .hour-items .item{
    min-height:44px !important;
    padding:7px 10px !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
  }

  #agendaHourList .hour-main{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    gap:4px !important;
  }

  #agendaHourList .hour-time{
    font-size:13px !important;
    min-width:auto !important;
  }

  #agendaHourList .hour-patient,
  #agendaHourList .hour-reason{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #agendaHourList .hour-status{
    margin-left:auto !important;
    flex:0 0 auto !important;
  }

  #agendaHourList .hour-status .badge{
    font-size:10px !important;
    padding:2px 6px !important;
    white-space:nowrap !important;
  }

  #agendaHourList .hour-card{
    border-radius:10px !important;
  }
}

.totais-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin:12px 0 8px;
}

@media (max-width: 900px){
  .totais-grid{
    grid-template-columns:1fr;
  }
}