/* Cliup: agenda, visão Mês no jeito do app do Clinicorp (Dr., 26/10): calendário com a marca dos dias que têm agenda e a
 * lista "Horários da semana". Dr., 27/10: "crie essa opção para poder ver a agenda também pelo computador"; a grade antiga
 * do mês "fica confusa" e saiu. No celular o calendário fica em cima e a lista embaixo; no computador, lado a lado. */

.ag-cel-mes { background: #fff; border-bottom: 1px solid var(--linha); }
.ag-cel-cab { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #EEF0F3; }
.ag-cel-cab span { text-align: center; font-size: 13px; color: var(--tinta-2); padding: 5px 0; border-left: 1px solid #fff; }
.ag-cel-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-cel-dia { position: relative; height: 58px; border: 0; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  background: #fff; padding: 4px 4px 0; text-align: left; cursor: pointer; font: inherit; color: var(--tinta); min-width: 0; }
.ag-cel-dia:nth-child(7n) { border-right: 0; }
.ag-cel-dia .n { font-size: 15px; line-height: 18px; }
.ag-cel-dia.fora { background: #F1F2F4; color: var(--cinza); }
.ag-cel-dia.hoje .n { color: var(--azul); font-weight: 700; }
.ag-cel-dia.sel { background: var(--navy); color: #fff; }
.ag-cel-dia.sel .n { color: #fff; font-weight: 700; }
/* a marca do dia (no Clinicorp é uma pílula vazia; aqui leva o número de horários) */
.ag-cel-marca { position: absolute; right: 5px; bottom: 5px; min-width: 30px; height: 20px; padding: 0 7px; border-radius: 10px;
  background: var(--azul-suave); color: var(--azul-esc); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.ag-cel-dia.sel .ag-cel-marca { background: #fff; color: var(--navy); }

.ag-cel-horarios { padding: 0 10px 10px; }
.ag-cel-hcab { margin: 0 -10px 10px; padding: 8px 14px; background: var(--navy); color: #fff; font-weight: 700; font-size: 15px; }
.ag-cel-hcab small { font-weight: 400; opacity: .85; margin-left: 6px; font-size: 13px; }
.ag-cel-it { display: flex; align-items: stretch; width: 100%; margin: 0 0 8px; padding: 0; border: 1px solid var(--linha-2);
  border-radius: 8px; background: #fff; overflow: hidden; text-align: left; font: inherit; color: var(--tinta); cursor: pointer; }
.ag-cel-it .hora { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--azul-claro); color: var(--navy); border-left: 5px solid var(--c, var(--azul)); }
.ag-cel-it .hora b { font-size: 17px; }
.ag-cel-it .hora small { font-size: 12px; opacity: .8; }
.ag-cel-it .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; }
.ag-cel-it .nome { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.ag-cel-it .nome .ag-st { flex: none; }
.ag-cel-it .l { font-size: 12.5px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-cel-it .l.prof { color: var(--tinta); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.ag-cel-it > svg.ic { flex: none; align-self: center; margin-right: 8px; width: 18px; height: 18px; color: var(--cinza); }
.ag-cel-it.comp .hora { background: #EEF0F3; color: var(--tinta-2); border-left-color: var(--cinza); }
.ag-cel-it.desm { opacity: .55; }
.ag-cel-it.desm .nome { text-decoration: line-through; }
.ag-cel-vazio { padding: 18px 6px; color: var(--tinta-2); text-align: center; }
/* a semana, dia por dia */
.ag-cel-diacab { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; padding: 0 2px; font-size: 14px; color: var(--tinta); }
.ag-cel-diacab .espaco { flex: 1; }
.ag-cel-diacab.sel b { color: var(--azul); }
.ag-cel-diacab .icone-btn { width: 32px; height: 32px; color: var(--azul); }
.ag-cel-livre { padding: 8px 12px; margin-bottom: 4px; border: 1px dashed var(--linha-2); border-radius: 8px; color: var(--cinza); font-size: 13px; background: #fff; }
/* horário de outro doutor na mesma unidade: aparece mais claro */
.ag-cel-it.outro { background: #F6F7F9; border-style: dashed; }
.ag-cel-it.outro .hora { background: #E9ECF1; color: var(--tinta-2); }
.ag-cel-it.outro .nome { color: var(--tinta-2); font-weight: 400; }

/* lista do mês: dia livre numa linha só, mais apagada */
.ag-cel-horarios.do-mes .ag-cel-diacab { margin: 6px 0 4px; padding: 6px 2px 0; border-top: 1px solid var(--linha); }
.ag-cel-horarios.do-mes .ag-cel-hcab + .ag-cel-diacab { border-top: 0; padding-top: 0; }
.ag-cel-horarios.do-mes .ag-cel-diacab.livre { color: var(--tinta-2); }
.ag-cel-horarios.do-mes .ag-cel-diacab.livre b { font-weight: 500; }
.ag-cel-horarios.do-mes .ag-cel-diacab.livre .mudo { font-size: 12.5px; color: var(--cinza); }
.ag-cel-horarios.do-mes .ag-cel-diacab.sel { background: var(--azul-claro); border-radius: 6px; padding: 6px 6px; }

@media (max-width: 760px) {
  /* Dr., 27/10: "no celular tem que mostrar o dia no calendário". O calendário fica parado em cima, com o dia marcado,
   * e só a lista rola embaixo dele (antes a tela rolava inteira e o calendário sumia ao tocar num dia). */
  .ag-v-mes .ag-corpo { display: flex; flex-direction: column; overflow: hidden; background: var(--fundo); }
  .ag-cel-profs { flex: none; background: #fff; gap: 5px; padding: 6px 8px; }
  .ag-cel-profs button { padding: 6px 10px; }
  .ag-cel-mes { flex: none; }
  .ag-cel-dia { height: 46px; }
  .ag-cel-marca { right: 3px; bottom: 3px; min-width: 24px; height: 18px; line-height: 18px; padding: 0 5px; font-size: 11.5px; }
  .ag-cel-horarios { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 90px; }
  .ag-cel-hcab { position: sticky; top: 0; z-index: 2; }
  /* o "+" fica flutuando no canto de baixo, como no app do Clinicorp */
  .ag-tela .ag-redondo { position: fixed; right: 16px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 40;
    width: 56px; height: 56px; box-shadow: 0 6px 16px rgba(15, 45, 82, .3); }
  .ag-tela .ag-redondo svg.ic { width: 26px; height: 26px; }
}

/* no computador: o calendário à esquerda e os horários do mês à direita, cada um com a sua rolagem */
@media (min-width: 761px) {
  .ag-v-mes .ag-corpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, 1fr); grid-template-rows: auto minmax(0, 1fr);
    gap: 12px 16px; overflow: hidden; padding: 12px 16px; background: var(--fundo); }
  .ag-v-mes .ag-cel-profs { grid-column: 1 / -1; }
  .ag-v-mes .ag-corpo:not(:has(.ag-cel-profs)) { grid-template-rows: minmax(0, 1fr); }
  /* o calendário ocupa a altura toda da tela: as semanas dividem o espaço */
  .ag-cel-mes { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
  .ag-cel-grade { flex: 1; min-height: 0; grid-auto-rows: minmax(64px, 1fr); }
  .ag-cel-dia { height: auto; padding: 7px 8px 0; transition: background .12s; }
  .ag-cel-dia:hover:not(.sel) { background: var(--azul-claro); }
  .ag-cel-dia.fora:hover { background: #E9EBEE; }
  .ag-cel-dia .n { font-size: 16px; }
  .ag-cel-marca { right: 8px; bottom: 8px; height: 22px; line-height: 22px; font-size: 12.5px; }
  .ag-cel-horarios { overflow-y: auto; min-height: 0; border: 1px solid var(--linha); border-radius: 10px; background: #fff; padding: 0 12px 12px; }
  .ag-cel-hcab { position: sticky; top: 0; z-index: 2; margin: 0 -12px 8px; padding: 10px 14px; }
  .ag-cel-it:hover { border-color: var(--azul); }
}
/* 07/11 (Dr., no iPhone: "não entendi essa bagunça aqui embaixo do horário do dia"): a escala do sábado sai do meio dos
   botões e vira uma linha simples embaixo da data */
.ag-cel-diacab { flex-wrap: wrap; }
.ag-cel-escala { order: 10; flex-basis: 100%; margin: 2px 0 0; padding: 0; background: none; border-radius: 0; color: var(--tinta-2); font-weight: 400; font-size: 13px; }
.ag-cel-escala b { color: var(--tinta); font-weight: 600; margin-left: 3px; }
/* 07/11 (Dr., no iPhone: "tem dois botões de mais e um deles atrapalha o visual"): na visão Mês do celular fica só o "+" da
   linha do dia; o redondo flutuante cobria o "Abrir este dia" e os horários */
@media (max-width: 760px) { .ag-tela.ag-v-mes .ag-redondo { display: none; } }