/* ══════════════════════════════════════════════════════════════════
   PILOTO VISUAL — "Zonas por Cor" · SÓ A AGENDA
   Branch: visual/agenda-zonas-piloto · aprovado por André como PILOTO
   (não é contrato ainda; não subir sem "Pode subir" — COM-014).

   Regras respeitadas:
   • Nenhuma cor hexadecimal aqui — tudo via tokens do plataforma.css.
     A "zona" da Agenda usa o token azul --info / --info-suave / --info-borda.
   • Não altera a geometria dos balões (.appt) nem o SLOT_H (COM-009).
   • Escopo travado nas classes exclusivas da Agenda (.cal-*, .col-head,
     .day-col) — nenhuma outra tela é afetada.
   • Reverter = apagar este arquivo + remover o <link> no index.html.
   ══════════════════════════════════════════════════════════════════ */

/* Contagens do topo (#chips) e "painel · espelho" (#atualizado) saem: o resumo do dia
   agora vive na faixa fina lateral da agenda, então essas bolinhas ficaram redundantes (André 15/07). */
#chips, #atualizado { display: none; }

/* Degradê verde também no TOPO (André 15/07): o cabeçalho deixa de ser branco
   e acompanha a zona da agenda — do mais claro (topo) ao mais fechado (linha da data). */
header { background: linear-gradient(180deg, #f5faf8 0%, #eef7f2 100%); }
.acoes-bar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 9px; padding: 10px 16px; background: #ebf5f0; border-bottom: 1px solid var(--borda); }

/* Menu "Mais ▾" das abas (André 15/07) */
.abas-mais { position: relative; flex: none; }
.aba-mais { font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--card); padding: 7px 13px; border-radius: 8px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.aba-mais:hover { background: var(--bg); }
.abas-mais.aberto .aba-mais { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }
.abas-mais-menu { display: none; }
.abas-mais.aberto .abas-mais-menu { display: flex; flex-direction: column; gap: 2px; position: absolute; top: calc(100% + 5px); left: 0; z-index: 70; background: var(--card); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 10px 28px rgba(20,30,50,.16); padding: 5px; min-width: 168px; }
.abas-mais-menu .aba { border: none !important; background: transparent; text-align: left; padding: 8px 12px; border-radius: 7px; width: 100%; font-weight: 500; color: var(--ink); }
.abas-mais-menu .aba:hover { background: var(--acento-suave); }
.abas-mais-menu .aba.on { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
/* Mobile: sem dropdown — as abas extras aparecem no menu-sanduíche junto das outras. */
@media (max-width: 899px) {
  .abas-mais, .abas-mais-menu { display: contents; }
  .aba-mais { display: none; }
}
/* Sem os botões, o cabeçalho tem só abas + usuário: no desktop mantém tudo numa linha (usuário à direita). */
/* Sem os botões no cabeçalho (foram pra .acoes-bar), o header tem só marca + abas + usuário.
   No desktop, mantém tudo numa linha só, com o usuário à direita (header é display:flex). */
@media (min-width: 900px) {
  header { flex-wrap: nowrap; }
  #usuarioChip { margin-left: auto; white-space: nowrap; }
  /* No desktop os botões voltaram pra coluna esquerda da Agenda (André 15/07): esconde a barra centralizada.
     No mobile ela continua visível (lá não tem coluna esquerda). */
  .acoes-bar { display: none; }
}

/* Contagem do dia na linha da data (esquerda) — André 15/07 */
.dia-resumo { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-right: 6px; }
.dia-resumo:empty { display: none; }
.dia-resumo .dr-tot { font-size: 17px; font-weight: 800; color: var(--acento); line-height: 1; }
.dia-resumo .dr-totl { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .3px; margin: 0 4px 0 -3px; }
.dia-resumo .dr-i { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.dia-resumo .dr-i i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dia-resumo .dr-i b { color: var(--ink); }
.subhead { background: #e7f3ee; }
.prof-tabs { background: #e3f0ea; }

/* Zona azul suave por trás da grade → os blocos brancos "descolam" */
.cal-wrap { background: linear-gradient(180deg,#eef7f3 0%,#e3f0ea 55%,#dcebe4 100%); }
.cal-head { background: #eef7f3; border-bottom: none; }
.cal-body { background: var(--superficie); }

/* Cada coluna de profissional vira um "bloco" com topo azul + sombra */
.col-head {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-bottom: none;
  border-top: 3px solid #0d9488;
  border-radius: var(--raio) var(--raio) 0 0;
  box-shadow: var(--sombra);
  margin: 7px 3px 0;
}
/* header vazio da coluna do relógio (1ª célula) fica sem moldura */
.col-head:first-child {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
}

/* respiro visual dos balões (mesma densidade/altura, só sombra suave) */
.appt { box-shadow: var(--sombra); }

/* painel lateral do dia entra na mesma zona, mantendo os cartões brancos */
.ficha-panel { background: #e9f2ee; }

/* ── Faixa fina vertical do resumo do dia (modo Dia) — substitui a coluna esquerda (André 15/07) ── */
.dia-layout { gap: 10px; }
.day-strip {
  width: 44px; flex: none; align-self: center;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: var(--sombra); padding: 10px 3px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.day-strip .ds-tot { font-size: 18px; font-weight: 800; color: var(--acento); line-height: 1; }
.day-strip .ds-totl { font-size: 8px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .3px; margin-top: -2px; }
.day-strip .ds-hr { width: 66%; height: 1px; background: var(--borda); }
.day-strip .ds-item { display: flex; flex-direction: column; align-items: center; }
.day-strip .ds-n { font-size: 14px; font-weight: 800; line-height: 1.1; }
.day-strip .ds-l { font-size: 7px; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0; }