/* ════════════════════════════════════════════════════════
   Agenda que também é diário (Agendamentos, desde 23/09/2026).

   Barra lateral à esquerda, como no Google Agenda: Criar, mês
   em miniatura e as agendas, cada uma com a sua cor e uma
   caixa para ligar ou desligar. Toda classe nasce com o
   prefixo `agenda-`.

   Cor por categoria em `--agenda-cor`. Todas passam de 4,5:1
   com letra `--branco` em cima, porque o compromisso marcado
   sai preenchido. O que já aconteceu (diário) sai numa lavagem
   clara da mesma cor, com letra `--mogno`: a semana mostra o
   que vem e o que foi sem precisar ler. Nada de `opacity` em
   texto.
   ════════════════════════════════════════════════════════ */

.agenda-cat-consulta       { --agenda-cor: #3e5f80; }
.agenda-cat-retorno        { --agenda-cor: #8c5a3c; }
.agenda-cat-cirurgia       { --agenda-cor: #7d2a35; }
.agenda-cat-pos_operatorio { --agenda-cor: #7a5212; }
.agenda-cat-exame          { --agenda-cor: #4d6b5c; }
.agenda-cat-outro          { --agenda-cor: #625850; }
.agenda-cat-atendimento    { --agenda-cor: #2f5e42; }
.agenda-cat-orcamento      { --agenda-cor: #6a4a7a; }
.agenda-cat-ciclo          { --agenda-cor: #7a4a30; }
.agenda-cat-prontuario     { --agenda-cor: #4a2e1a; }
.agenda-cat-whatsapp       { --agenda-cor: #2f6b5e; }

/* Compromisso marcado: preenchido na cor. */
.cal-item.agenda-cat,
.cal-item-chip.agenda-cat {
  background: var(--agenda-cor);
  color: var(--branco);
}
.cal-item.agenda-cat:hover,
.cal-item-chip.agenda-cat:hover {
  background: color-mix(in srgb, var(--agenda-cor) 82%, #000);
  color: var(--branco);
}

/* Registro do diário: lavagem clara da mesma cor, letra escura. */
.cal-item.agenda-cat.agenda-registro,
.cal-item-chip.agenda-cat.agenda-registro {
  background: color-mix(in srgb, var(--agenda-cor) 14%, var(--branco));
  color: var(--mogno);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--agenda-cor) 45%, var(--branco));
}
.cal-item.agenda-cat.agenda-registro:hover,
.cal-item-chip.agenda-cat.agenda-registro:hover {
  background: color-mix(in srgb, var(--agenda-cor) 26%, var(--branco));
  color: var(--mogno);
}

/* Clicar num horário vazio cria: o cursor diz isso. */
.agenda-layout .cal-coluna-dia { cursor: copy; }
.agenda-layout .cal-coluna-dia .cal-item { cursor: pointer; }

/* ── Casca: lateral + calendário ── */

.agenda-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: 1.25rem;
}
.agenda-layout .cal-area { min-width: 0; }

.agenda-lateral {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: .2rem .2rem 1rem;
}

.agenda-criar { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; }

.agenda-mini {
  padding: .6rem;
  border-radius: var(--raio);
  background: var(--bg-section);
  border: 1px solid var(--border);
}

.agenda-grupo {
  margin: .3rem 0 0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.agenda-categorias { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.agenda-categoria {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  min-height: 34px;
  padding: .2rem .4rem;
  border-radius: var(--raio-sm);
  font-size: .86rem;
  color: var(--text-primary);
  cursor: pointer;
}
.agenda-categoria:hover { background: var(--bg-alt); }
.agenda-categoria input { width: 16px; height: 16px; margin: 0; accent-color: var(--terracota); }
.agenda-categoria-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-categoria-conta { font-size: .76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.agenda-amostra {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--agenda-cor);
  vertical-align: -1px;
}

/* ── O evento aberto ── */

.agenda-dados { display: grid; gap: .7rem; margin: 0 0 1.2rem; }
.agenda-dados div { display: grid; gap: .15rem; }
.agenda-dados dt {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.agenda-dados dd { margin: 0; font-size: .92rem; color: var(--text-primary); white-space: pre-wrap; }

.agenda-listas { display: flex; flex-direction: column; gap: .9rem; }
/* Na tela larga a lista está sempre à mostra; o botão só existe no celular. */
.agenda-alternar { display: none; }
.agenda-alternar-conta {
  display: inline-grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  margin-left: .35rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--terracota);
  color: var(--branco);
  font-size: .72rem;
  letter-spacing: 0;
}

/* Vistas e o acessório de quem chama, lado a lado na barra do calendário. */
.cal-topo-fim { display: flex; align-items: center; gap: .5rem; flex: none; }

/* Abaixo de 1000px, como o Google Agenda no celular. Duas linhas de controle
   e o calendário: a navegação com o título, e as vistas com "Agendas". Criar
   vira o botão redondo flutuante no canto; a lista de agendas sobe de baixo,
   por cima de tudo. A primeira versão tinha quatro linhas antes da primeira
   hora do dia, e Rafael a recusou: "muito mal aproveitado". */
@media (max-width: 1000px) {
  .retornos-area .secao-controles { padding-bottom: .4rem; }
  .retornos-area .secao-controles .cabecalho {
    flex-wrap: nowrap;
    align-items: center;
    gap: .75rem;
    padding-bottom: .6rem;
    margin-bottom: .6rem;
  }
  .retornos-area .secao-controles .cabecalho h2 { font-size: 1.6rem; }
  .retornos-area .cal-area { gap: .5rem; }
  .retornos-area .cal-resumo { display: none; }
  .retornos-area .cal-topo { gap: .5rem; }
  .retornos-area .cal-nav { flex: 1 1 100%; }
  .retornos-area .cal-titulo { flex: 1; min-width: 0; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .retornos-area .cal-topo-fim { flex: 1 1 100%; justify-content: space-between; }

  .agenda-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .agenda-lateral { overflow: visible; padding: 0; gap: 0; }
  .agenda-alternar { display: inline-flex; align-items: center; min-height: 36px; }

  .agenda-criar {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 18px;
    box-shadow: 0 8px 24px var(--sombra);
  }
  .agenda-criar svg { width: 22px; height: 22px; }
  .agenda-criar-rotulo {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* Formulário aberto ocupa a tela: o botão flutuante não pode cobrir o Salvar. */
  .area-mestre.com-acao .agenda-criar { display: none; }

  .agenda-listas {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    max-height: min(75svh, 36rem);
    overflow-y: auto;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    background: var(--bg-section);
    box-shadow: 0 -12px 32px var(--sombra);
  }
  .agenda-lateral-aberta .agenda-listas { display: flex; }
  .agenda-mini { border: none; padding: 0; }
  .agenda-categoria { min-height: 44px; }
}