/* =====================================================================
   Agenda — grade por profissional, drag & drop, mobile-first
   ===================================================================== */

.ag {
  --ppm: 1.5;            /* pixels por minuto */
  --gutter: 56px;        /* coluna das horas */
  --col-min: 168px;
  display: flex; flex-direction: column; height: 100%;
}
/*
 * Achado real (migração v76): `.ag{height:100%}` nunca tinha nada pra
 * ser 100% DE — `.shell` usa `min-height:100vh` (cresce com o conteúdo,
 * de propósito, é o que faz o resto do painel rolar normal) e nada
 * entre ele e `.ag` tem altura própria. Resultado: `.ag__scroll` (o
 * único que devia rolar) ficava alto o bastante pra nunca precisar de
 * scroll interno, e a rolagem real acontecia no `body` — cabeçalho,
 * filtros e sidebar subiam junto com a grade.
 *
 * Mesma técnica do HTML de referência (`body:has(#page-agenda.active
 * #agenda-calendar.active)`), adaptada ao DOM de verdade: `.ag` só
 * existe quando a rota /agenda (Calendário) está montada, então
 * `:has(.ag)` isola exatamente essa tela, sem tocar Agendamentos/
 * Bloqueios/Lista de espera (rotas irmãs, cada uma seu próprio
 * arquivo, sem `.ag`) nem em nenhuma outra página do sistema.
 */
body:has(#outlet .ag) { height: 100dvh; overflow: hidden; }
body:has(#outlet .ag) .shell { height: 100dvh; overflow: hidden; }
body:has(#outlet .ag) .main { min-height: 0; overflow: hidden; }
/*
 * `#outlet` é `display:block` (serve toda página, não só a Agenda) —
 * `.view` (o filho direto, já tem `flex:1 1 auto` em app.css) nunca
 * herdava altura real de um pai não-flex, então `.ag{height:100%}`
 * resolvia contra um ancestral "auto" e virava "auto" também: cada
 * elemento crescia pro tamanho do PRÓPRIO conteúdo, não sobrava altura
 * nenhuma pra `.ag__scroll` realmente precisar de scroll interno.
 * Só quando a Agenda está montada, `#outlet` também vira flex column
 * (min-height:0 de novo, mesmo motivo do `.ag__scroll` abaixo) — passa
 * a existir uma cadeia de altura de verdade do body até a grade.
 */
body:has(#outlet .ag) #outlet {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
body:has(#outlet .ag) #outlet > .view { min-height: 0; overflow: hidden; }

/*
 * ORDEM DEFINITIVA V76: barra única `.ag-toolbar` (flex-wrap, um só
 * nível), porte e cores exatos da referência (agenda-calendar). Os
 * filtros de profissional/serviço/situação são os dropdowns REAIS da
 * V76 (professionalFilter()/agendaDropdown(), ui.js) — não select
 * nativo restilizado; ver bindAgendaDropdown()/placePopover() na V76.
 */
.ag__bar {
  padding: 14px 16px; background: var(--surface);
  border-bottom: 1px solid var(--border); position: sticky; top: var(--topbar-h); z-index: 30;
}
.ag-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ag-control {
  height: 40px; min-width: 0; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: inherit;
}
.ag-control:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ag-control .arrow { margin-left: auto; color: var(--text-3); }

/* Dropdown de serviço/situação (V76: ".ag-dropdown-popover"/".ag-dropdown-
   option", bindAgendaDropdown()) — valores literais extraídos da referência. */
.ag-dropdown-popover {
  position: fixed; z-index: 230; display: none; min-width: 210px; max-height: 280px; overflow: auto;
  padding: 6px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  background: var(--surface-2); box-shadow: var(--sh-3);
}
.ag-dropdown-popover.open { display: block; }
.ag-dropdown-option {
  width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-2); text-align: left;
  font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.ag-dropdown-option:hover, .ag-dropdown-option.active { background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--icon-accent); }
.ag-nav-date { padding: 0 6px 0 2px; gap: 2px; }
.ag-nav-date button {
  width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-3); display: grid; place-items: center; cursor: pointer;
}
.ag-nav-date button:hover { background: var(--surface-3); color: var(--text); }
.ag-nav-date .ag-nav-label {
  min-width: 132px; text-align: center; font-size: 12px; font-weight: 700;
  text-transform: capitalize; padding: 0 4px;
}
.ag-search { min-width: 220px; }
.ag-search svg { width: 15px; height: 15px; color: var(--text-3); flex: 0 0 auto; }
.ag-search input {
  width: 100%; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; min-width: 0;
}
.ag-search input::placeholder { color: var(--text-3); }
.ag-view-switch {
  margin-left: auto; display: flex; padding: 3px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--border);
}
.ag-view-switch button {
  height: 32px; padding: 0 13px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-3); font-size: 11px; font-weight: 800; cursor: pointer;
}
.ag-view-switch button.is-active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.agenda-actions-inline { display: flex; gap: 8px; }
.ag-btn {
  min-height: 40px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.ag-btn:hover { border-color: color-mix(in srgb, var(--brand) 34%, var(--border-strong)); }
.ag-btn.primary { background: var(--brand-action); border-color: var(--brand-action); color: var(--brand-fg); }
.ag-btn.primary:hover { filter: brightness(1.04); }
.ag-btn svg { width: 15px; height: 15px; }

/*
 * min-height:0 desfaz o mínimo padrão de item flex ("auto", que nunca
 * encolhe abaixo da altura do próprio conteúdo) — sem isto, mesmo com o
 * body/outlet travados acima, `.ag__scroll` insistia em crescer pro
 * tamanho do dia inteiro (~1580px) em vez de ocupar só o espaço que
 * sobra depois do cabeçalho/filtros, e a rolagem interna real (a grade
 * INTEIRA visível de uma vez, sem precisar rolar) nunca chegava a ativar.
 */
.ag { min-height: 0; }
.ag__scroll { overflow: auto; flex: 1 1 auto; min-height: 0; position: relative; background: var(--bg); }

.ag-calendar-head {
  display: grid; position: sticky; top: 0; z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.ag-calendar-head-cell {
  padding: 9px 10px; border-left: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.ag-calendar-head-cell:first-child { border-left: 0; }
.ag-calendar-head-name { font-size: 13.5px; font-weight: 650; line-height: 1.2; }
.ag-calendar-head-sub { font-size: 11px; color: var(--text-3); }
.ag-calendar-head-spacer { border-left: 0; }

.ag-schedule { display: grid; position: relative; }

/*
 * Cartão da grade (decisão aprovada, migração v76): `.ag-calendar-head` +
 * `.ag-schedule` embrulhados num card com borda/cantos arredondados —
 * valores extraídos ao vivo da referência (`.ag-calendar`). Uma coluna
 * só (profissional específico filtrado) usa a MESMA estrutura real
 * (`.ag-timeline`/`.ag-event`), só com o modificador `--solo` restilizando
 * pra bater com a linha do tempo única da v76 (gutter de horas mais
 * largo, sem nome de profissional repetido no cabeçalho). Mais de um
 * profissional mantém as colunas lado a lado — função real sem
 * equivalente na v76, decisão registrada — com a mesma casca de card.
 */
.ag-calendar {
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
  border-radius: 14px; background: var(--surface-2);
  display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; margin: 0 16px 16px;
  /*
   * O CALENDÁRIO é o único container de scroll (x e y juntos) — não
   * `.ag-schedule` sozinho. `.ag-calendar-head` (nomes dos profissionais) é irmão
   * de `.ag-schedule`, não filho: se só a grade rolasse na horizontal, o
   * cabeçalho ficaria parado enquanto as colunas passam por baixo dele,
   * desalinhando nome×coluna a cada profissional a mais que a largura
   * da tela não comporta (o caso comum no celular, onde 2 profissionais
   * já pedem rolagem lateral). Com o pai rolando os dois, `.ag-calendar-head`
   * some junto na horizontal e fica `sticky` só no eixo vertical.
   */
  overflow: auto;
}
.ag-calendar .ag-calendar-head { position: sticky; top: 0; z-index: 20; background: var(--surface-3); border-bottom: 1px solid var(--border-subtle); }
.ag-calendar .ag-schedule { flex: 1 1 auto; min-height: 0; }
.ag-calendar--solo .ag-calendar-head-cell:not(.ag-calendar-head-spacer) { padding: 9px 14px; }
.ag-calendar--solo .ag-calendar-head-spacer,
.ag-calendar--solo .ag-times { background: var(--surface-2); }

.ag-times { position: relative; border-right: 1px solid var(--border); background: var(--surface); }
.ag-time {
  position: absolute; left: 0; right: 0; text-align: right; padding-right: 7px;
  font-size: 11px; color: var(--text-3); transform: translateY(-6px); font-variant-numeric: tabular-nums;
}
/* marca intermediária (passo configurado, não hora cheia): mesmo peso
   relativo que .ag__line--half tem contra .ag__line na coluna ao lado */
.ag-time--half { font-size: 9.5px; opacity: .6; }

.ag-timeline { position: relative; border-left: 1px solid var(--border); min-width: 0; }
.ag-timeline:first-child { border-left: 0; }
.ag__line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); pointer-events: none; }
.ag__line--half { border-top-style: dotted; opacity: .55; }
/*
 * Fase 3.3 — 3 estados de "sem agendamento" que precisavam parar de se
 * confundir (achado na auditoria: intervalo e bloqueio real usavam a
 * MESMA classe .ag-block-off, com o mesmo peso visual de um bloqueio de
 * férias). A regra: quanto menos "ação administrativa" o estado
 * representa, mais discreto ele fica — e nenhum dos três usa só cor pra
 * se diferenciar (padrão de fundo + borda + ícone/rótulo, nessa ordem).
 *
 * fora da jornada  → mais discreta ainda: nem entra no jogo visual.
 * intervalo (rotina, não clicável) → mesma linguagem de "fechado", com
 *   rótulo pra dizer o motivo — mas sem contorno, pra não parecer algo
 *   que aconteceu (uma ação), só o ritmo normal do expediente.
 * bloqueio real (folga/férias/feriado/etc., clicável) → o único dos três
 *   com contorno + ícone + faixa lateral: é uma exceção que alguém
 *   registrou, arrume o mesmo peso visual de "isso é diferente" que um
 *   agendamento tem, sem ser confundido com um.
 */
/* .ag-blocked é a classe literal da V76 (renderiza "Fora do expediente"/
   "Intervalo" com a MESMA classe, sem modificador — só o texto muda). */
.ag-blocked {
  position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--surface) 0 6px, var(--bg) 6px 12px);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  color: var(--text-3); font-size: 10.5px; font-weight: 600;
  padding: 5px 8px; display: flex; align-items: flex-start;
}
.ag-block-real {
  position: absolute; left: 2px; right: 2px; z-index: 1; background: var(--amber-bg);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-left: 3px solid var(--amber); border-radius: 7px;
  font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--amber) 75%, var(--text));
  padding: 3px 6px 3px 5px; overflow: hidden; cursor: pointer;
  display: flex; align-items: flex-start; gap: 4px;
}
.ag-block-real svg { width: 11px; height: 11px; flex: 0 0 auto; margin-top: 1px; opacity: .85; }
.ag-block-real .truncate { min-width: 0; }

/* intervalo pós-serviço: ocupado, mas não é atendimento */
.ag__buffer {
  position: absolute; left: 3px; right: 3px; z-index: 3; pointer-events: none;
  border-radius: 0 0 7px 7px; opacity: .55;
  background: repeating-linear-gradient(45deg,
    transparent, transparent 4px, var(--border-strong) 4px, var(--border-strong) 8px);
}

.ag__now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--red); z-index: 6; pointer-events: none; }
.ag__now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--red); }

/*
 * Migração v76: cartão com fundo em gradiente na cor do status (não só
 * uma faixa lateral de 3px) — mesmo tratamento exato de `.ag-event` na
 * referência, extraído ao vivo (border 1px 42%, gradiente 18%→7%,
 * radius 10px, sombra 0 8px 22px). As cores por status vivem só no
 * bloco único logo abaixo (era espalhado em 3 lugares diferentes do
 * arquivo — consolidado numa passada só, decisão desta migração).
 */
.ag-event {
  position: absolute; left: 3px; right: 3px; z-index: 5;
  border-radius: 10px; padding: 5px 7px; overflow: hidden; cursor: grab;
  border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--border-strong));
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 18%, var(--surface)), color-mix(in srgb, var(--brand) 7%, var(--surface)));
  box-shadow: 0 8px 22px rgba(23, 19, 15, .16);
  font-size: 12px; line-height: 1.28; user-select: none; touch-action: none;
  transition: box-shadow .12s, transform .12s;
}
.ag-event:hover { box-shadow: var(--sh-2); z-index: 7; }
/* pointer-events:none deixa elementFromPoint enxergar a coluna EMBAIXO do bloco;
   a captura de ponteiro (setPointerCapture) continua entregando os eventos aqui. */
.ag-event.is-dragging {
  opacity: .92; box-shadow: var(--sh-3); transform: scale(1.02);
  cursor: grabbing; z-index: 30; pointer-events: none;
}
.ag-event.is-ghost { opacity: .35; }
.ag-event-time { font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
.ag-event-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-event-svc { color: var(--text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-event--sm { padding: 2px 6px; }
.ag-event--sm .ag-event-svc { display: none; }
/* blocos muito curtos (10–15min) viram uma linha só, sem estourar a altura */
.ag-event--xs { padding: 1px 6px; display: flex; align-items: center; gap: 6px; }
.ag-event--xs .ag-event-svc { display: none; }
.ag-event--xs .ag-event-time { flex: 0 0 auto; }
.ag-event--xs .ag-event-name { font-size: 11px; }

.ag__slot-hint {
  position: absolute; left: 3px; right: 3px; border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1.5px dashed var(--brand); z-index: 4; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: var(--brand);
}

/* -------------------------------------------------------------- SEMANA */
.ag__week { padding: 14px 16px; }
.ag__week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ag__week-day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.ag__week-head { padding: 7px 9px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ag__week-head.is-today { background: var(--brand-action); color: var(--brand-fg); }
.ag__week-items { padding: 6px; display: flex; flex-direction: column; gap: 5px; min-height: 90px; max-height: 420px; overflow-y: auto; }
.ag__chip {
  border-radius: 7px; padding: 5px 7px; font-size: 11.5px; line-height: 1.3;
  background: var(--surface-2); border-left: 3px solid var(--brand); cursor: pointer;
}
.ag__chip:hover { background: var(--surface-3); }

/* ---------------------------------------------------------------- MÊS */
.ag__month { padding: 14px 16px; }
.ag__month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ag__month-cell {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  min-height: 92px; padding: 7px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.ag__month-cell:hover { border-color: var(--brand); }
.ag__month-cell.is-out { opacity: .4; }
.ag__month-cell.is-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ag__month-num { font-size: 12.5px; font-weight: 700; }
.ag__month-stat { font-size: 11px; color: var(--text-2); }
.ag__month-bar { height: 4px; border-radius: 99px; background: var(--brand); opacity: .8; }

/* Coluna de 105px no motor mobile compacto (V76/Clientes) é mais estreita
   que o rótulo completo de data precisa — mesma troca por um rótulo curto
   já usada no periodPicker() de Clientes/Dashboard, aqui para o botão
   central de .ag-nav-date. */
@media (max-width: 780px) {
  .ak-mobile-compact > .ak-mob-date.ag-nav-date { padding: 0 2px; gap: 0; }
  .ak-mobile-compact > .ak-mob-date.ag-nav-date button:not(.ag-nav-label) { width: 20px; }
  .ak-mobile-compact > .ak-mob-date.ag-nav-date .ag-nav-label { min-width: 0; font-size: 0; padding: 0 2px; }
  .ak-mobile-compact > .ak-mob-date.ag-nav-date .ag-nav-label::after { content: attr(data-mobile-label); font-size: 11px; }
}

/* ------------------------------------------------------------- MOBILE */
@media (max-width: 900px) {
  .ag { --col-min: 132px; --gutter: 44px; }
  .ag__bar { top: var(--topbar-h); padding: 10px 12px; }
  .ag__date { min-width: 0; font-size: 14px; flex: 1 1 100%; order: -1; }
  .ag__week-grid { grid-template-columns: 1fr; }
  .ag__month-cell { min-height: 62px; padding: 5px; }
  .ag__scroll { padding-bottom: calc(var(--bottomnav-h) + 12px); }
}

/* ------------------------------------------------- MODAL DE AGENDAMENTO */
.appt-form__services { display: grid; gap: 7px; max-height: 240px; overflow-y: auto; }
.appt-svc {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer;
}
.appt-svc.is-on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.appt-svc__meta { margin-left: auto; text-align: right; font-size: 12px; }

.client-search { position: relative; }
.client-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); box-shadow: var(--sh-2); max-height: 260px; overflow-y: auto;
}
.client-results div { padding: 9px 12px; cursor: pointer; font-size: 14px; }
.client-results div:hover { background: var(--surface-3); }

.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 7px; }

/* ---------------------------------------------------------------------
   Lista de espera na agenda
   ---------------------------------------------------------------------
   Marca discreta: uma etiqueta fina na borda do buraco livre, sem tapar
   a grade nem competir com os atendimentos. A agenda serve para ver o
   dia; a fila é um aviso, não o assunto principal.
   ------------------------------------------------------------------ */
.ag__wait {
  position: absolute; left: 2px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px; cursor: pointer;
  font-size: 10px; font-weight: 700; line-height: 16px; white-space: nowrap;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  opacity: .82; transition: opacity .12s ease;
}
.ag__wait::before { content: '⏳'; font-size: 9px; }
.ag__wait:hover { opacity: 1; }

/* ================================================= FASE 1C — agenda == */
.ag__unidade {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  background: var(--surface-3); padding: 5px 10px; border-radius: var(--r-full);
}
.ag__unidade svg { width: 13px; height: 13px; }

.ag__filtros { display: flex; gap: 7px; flex-wrap: wrap; flex: 1 1 100%; }
.ag__filtros .select, .ag__filtros .input { max-width: 190px; }

.ag__aviso {
  flex: 1 1 100%; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2); line-height: 1.45;
  background: var(--blue-bg); padding: 8px 11px; border-radius: var(--r-sm);
}
.ag__aviso svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--blue); }

/* ------------------------------------------------------ hoje / avisos */
.ag__hoje { display: flex; gap: 7px; flex-wrap: wrap; padding: 10px 16px 0; }
.ag__hoje-item {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: var(--r-full); padding: 4px 11px; font-size: 12px; cursor: pointer;
}
.ag__hoje-item b { color: var(--text); font-size: 13px; }
.ag__hoje-item:hover { border-color: var(--border-strong); }
.ag__hoje-item.is-alerta { background: var(--amber-bg); border-color: transparent; }
.ag__hoje-item.is-alerta b { color: var(--amber); }

.ag__afetados {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 16px 0; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--amber-bg); font-size: 12.5px; cursor: pointer;
}
.ag__afetados svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--amber); }

/* Redesign Fase 2, item 6 — mesma régua visual de .ag__hoje/.ag__afetados
   (a grade continua embaixo, clicável pra criar; isto só ocupa o lugar
   onde a tira de resumo do dia ficaria). */
.ag__vazio {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px 0;
}
.ag__afetados__link { margin-left: auto; font-weight: 700; text-decoration: underline; }
.ag__notificar {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  padding: 11px 13px; border-radius: var(--r); background: var(--surface-3);
  font-size: 12.5px; line-height: 1.5; color: var(--text-2);
}
.ag__notificar svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--text-3); }

/* -------------------------------------------------- abertura especial */
.ag-block-extra {
  position: absolute; left: 2px; right: 2px; border-radius: 5px;
  border: 1px dashed var(--green); background: var(--green-bg);
  color: var(--green); font-size: 10.5px; font-weight: 600;
  padding: 3px 6px; overflow: hidden; z-index: 1;
}
/* ------------------------------------------------------------ detalhe */
.ag__det { border-top: 1px solid var(--border); padding-top: 10px; }
.ag__det-linha { display: flex; align-items: center; gap: 10px; padding: 4px 0; }

.ag__hist-lista { list-style: none; margin: 6px 0 0; padding: 0; }
.ag__hist-lista li {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 5px 0 5px 12px; border-left: 2px solid var(--border); font-size: 12.5px;
}
.ag__hist-quando { color: var(--text-3); font-size: 11.5px; flex: 0 0 auto; }
.ag__hist-txt { flex: 1 1 auto; min-width: 0; }

/* -------------------------------------------------- horários livres -- */
.ag__slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ag__slot {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--r-sm); padding: 6px 11px; font-size: 12.5px;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.ag__slot:hover { border-color: var(--border-strong); }
.ag__slot.is-on { background: var(--brand-action); color: var(--brand-fg); border-color: transparent; }
.ag__slots-vazio { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-3); }
.ag__slots-vazio svg { width: 15px; height: 15px; }
.ag__livres { margin-bottom: 14px; }
.ag__livres-alerta {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
  padding: 8px 11px; border-radius: var(--r-sm); background: var(--amber-bg);
  font-size: 12.5px; line-height: 1.4;
}
.ag__livres-alerta svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--amber); }

@media (max-width: 640px) {
  .ag__filtros .select, .ag__filtros .input { max-width: none; flex: 1 1 47%; }
  .ag__hoje, .ag__vazio, .ag__afetados { padding-left: 12px; padding-right: 12px; }
  .ag__afetados { margin-left: 12px; margin-right: 12px; }
}

/* =====================================================================
   AGENDA — o status precisa se ver antes de se ler
   ---------------------------------------------------------------------
   O bloco de atendimento tinha `border-left: 3px solid var(--brand)`
   fixo. Só três dos sete estados mudavam alguma coisa: cancelado e falta
   ficavam apagados, finalizado ganhava fundo verde.

   Ou seja, quatro estados diferentes — agendado, confirmado, cliente
   chegou e em atendimento — eram DESENHADOS IGUAIS. Num dia cheio, saber
   quem já chegou é a informação mais consultada da tela, e ela só existia
   abrindo a ficha.

   Agora cada estado tem cor própria na faixa lateral, e os dois que pedem
   ação imediata (chegou, em atendimento) ganham fundo tênue. As cores são
   as mesmas de APPT_STATUS, mas desde a V81 elas não têm mais hex próprio
   aqui: cada estado aponta para o token semântico do design system
   (--blue/--violet/--amber/--orange/--green/--red), que já nasce medido
   contra --surface nos dois temas.

   Só CSS: a marcação já trazia `st-agendado`, `st-arrived` e companhia.
   Nenhum JavaScript novo, nenhum nó a mais nos 16+ blocos do dia.
   ===================================================================== */
:root {
  /* Semântica preservada: azul=agendado (informação), roxo=confirmado,
     âmbar=chegou (alerta), laranja=em atendimento, verde=finalizado
     (sucesso), vermelho=cancelado (erro). Nenhum vira dourado — estado
     não é identidade de marca. "Não compareceu" é o mesmo vermelho
     puxado para o neutro: mais apagado que um cancelamento. */
  --st-scheduled: var(--blue);
  --st-confirmed: var(--violet);
  --st-arrived: var(--amber);
  --st-in_service: var(--orange);
  --st-finished: var(--green);
  --st-cancelled: var(--red);
  --st-no_show: color-mix(in srgb, var(--red) 62%, var(--text-3));
}
[data-theme='dark'] {
  /*
   * Migração v76: os 5 tons vinham da legenda de referência
   * (#agenda-calendar .ag-legend), com cancelled/no_show sem equivalente
   * lá. Na V81 o par claro/escuro dessas cores passou a viver nos tokens
   * de estado do design system, que já sobem de luminosidade no escuro —
   * por isso o bloco repete as MESMAS referências do :root em vez de um
   * segundo jogo de hex. Mantido explícito para que fique óbvio que a
   * diferença entre os temas é responsabilidade do token, não daqui.
   */
  --st-scheduled: var(--blue);
  --st-confirmed: var(--violet);
  --st-arrived: var(--amber);
  --st-in_service: var(--orange);
  --st-finished: var(--green);
  --st-cancelled: var(--red);
  --st-no_show: color-mix(in srgb, var(--red) 62%, var(--text-3));
}

/*
 * Consolidado numa passada só (migração v76) — antes eram 3 blocos
 * separados (borda-esquerda / fundo tênue de 2 estados / finalizado à
 * parte) de rodadas de auditoria diferentes. Agora cada status usa o
 * MESMO tratamento pleno (borda + gradiente de fundo na própria cor),
 * igual ao `.ag-event` da referência — nenhum estado fica "sem cor" e
 * nenhum recebe tratamento especial que os outros não têm.
 */
.ag-event.st-scheduled {
  border-color: color-mix(in srgb, var(--st-scheduled) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--st-scheduled) 20%, var(--surface)), color-mix(in srgb, var(--st-scheduled) 7%, var(--surface)));
}
.ag-event.st-confirmed {
  border-color: color-mix(in srgb, var(--st-confirmed) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--st-confirmed) 20%, var(--surface)), color-mix(in srgb, var(--st-confirmed) 7%, var(--surface)));
}
.ag-event.st-arrived {
  border-color: color-mix(in srgb, var(--st-arrived) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--st-arrived) 20%, var(--surface)), color-mix(in srgb, var(--st-arrived) 7%, var(--surface)));
}
.ag-event.st-in_service {
  border-color: color-mix(in srgb, var(--st-in_service) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--st-in_service) 20%, var(--surface)), color-mix(in srgb, var(--st-in_service) 7%, var(--surface)));
}
.ag-event.st-finished {
  border-color: color-mix(in srgb, var(--st-finished) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--st-finished) 20%, var(--surface)), color-mix(in srgb, var(--st-finished) 7%, var(--surface)));
}
.ag-event.st-cancelled, .ag-event.st-no_show {
  border-color: color-mix(in srgb, var(--st-cancelled) 35%, var(--border-strong));
}

/*
 * Hierarquia dentro do bloco.
 *
 * A posição vertical JÁ diz a hora — é o eixo da grade. Então quem
 * precisa de peso é o nome do cliente, que era o segundo item e vinha
 * com a mesma discrição do serviço. A hora continua ali, menor, porque
 * em bloco de 15 minutos ela some do eixo.
 */
.ag-event-name { font-size: 12.5px; font-weight: 680; letter-spacing: -.01em; }
.ag-event-time { color: var(--text-2); font-weight: 650; }
.ag-event-svc { font-size: 11px; }

/*
 * Em atendimento pulsa devagar — é o único bloco da tela que muda
 * sozinho, e quem olha de longe precisa distinguir "está acontecendo
 * agora" de "vai acontecer". Duas cores alternando em quatro segundos:
 * é animação de opacidade numa borda, das mais baratas que existem, e
 * sai inteira sob prefers-reduced-motion.
 */
@keyframes ag-agora {
  50% { border-color: color-mix(in srgb, var(--st-in_service) 80%, transparent); }
}
.ag-event.st-in_service { animation: ag-agora 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ag-event.st-in_service { animation: none; }
}

/* O bloco cancelado fica apagado E riscado — cor sozinha não basta. */
.ag-event.st-cancelled, .ag-event.st-no_show { opacity: .5; }
.ag-event.st-cancelled .ag-event-name { text-decoration: line-through; }

/*
 * Redesign Fase 2, item 4 — destaque do PRÓXIMO atendimento do dia (só
 * hoje, só um). Nunca troca a cor de status (isso continua dizendo
 * "agendado/confirmado"): soma um anel discreto na cor da marca, sem
 * aumentar o bloco nem disputar com a borda de status já existente.
 */
.ag-event--proximo {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, transparent);
}
.ag__proximo-tag {
  color: var(--brand); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: .02em;
}
/* Bloco curto demais pra caber "Próximo" do lado da hora sem espremer. */
.ag-event--xs .ag__proximo-tag { display: none; }

/* --------------------------------------------------- LEGENDA DE STATUS */
/*
 * Cor sem legenda é adivinhação na primeira semana. A faixa vai no
 * cabeçalho, discreta, e some no celular — onde a agenda já é uma coluna
 * só e o toque abre a ficha com o status escrito.
 */
.ag-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; overflow-x: auto;
  min-height: 34px; padding-bottom: 9px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 10px; color: var(--text-3);
}
.ag-legend span { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.ag-legend i {
  width: 8px; height: 8px; border-radius: 3px; display: inline-block; flex: 0 0 8px;
}
/*
 * Achado real (revisão v76): a legenda era escondida inteira <=900px.
 * A especificação aprovada lista "Indicadores de status" explicitamente
 * entre o que TEM que continuar fixo/visível no mobile da Agenda — não
 * dá pra esconder. `overflow-x:auto` acima deixa ela rolar na horizontal
 * SÓ ela (nunca a página) quando as 5 etiquetas não cabem na largura.
 */

/* O chip da visão de mês usa a mesma paleta de status da visão de dia:
   a cor tinha que dizer a mesma coisa nas três visões, e vinha inline. */
.ag__chip.st-scheduled  { border-left-color: var(--st-scheduled); }
.ag__chip.st-confirmed  { border-left-color: var(--st-confirmed); }
.ag__chip.st-arrived    { border-left-color: var(--st-arrived); }
.ag__chip.st-in_service { border-left-color: var(--st-in_service); }
.ag__chip.st-finished   { border-left-color: var(--st-finished); }
.ag__chip.st-cancelled  { border-left-color: var(--st-cancelled); opacity: .55; }
.ag__chip.st-no_show    { border-left-color: var(--st-no_show); opacity: .55; }