/* Cliup: estilos do módulo agenda. Copiado do Clinicorp (visto em 26/10): coluna de filtros à esquerda, barra de cima,
   grade de horários, blocos com barra do "Agendado por" (dado equipamentoId) e da sala, modal Nova Consulta | Compromisso | Evento.
   Só o laranja deles vira o azul do Cliup. Todas as classes começam com ag-. */

/* ---------- Tela ---------- */
.ag-tela{position:relative;display:flex;height:calc(100vh - 56px);background:#fff;overflow:hidden}
.ag-princ{flex:1;min-width:0;display:flex;flex-direction:column}
.ag-corpo{flex:1;overflow:auto;position:relative;background:#fff}

/* ---------- Coluna esquerda ---------- */
.ag-lado{width:200px;flex:none;border-right:1px solid var(--linha);overflow-y:auto;padding:6px 0 60px;font-size:13px;background:#fff}
.ag-clinica{padding:4px 10px;font-size:14px;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-mini{padding:2px 6px 0}
.ag-mini-cab{display:flex;align-items:center;justify-content:space-between}
.ag-mini-cab .icone-btn{width:24px;height:24px;color:var(--tinta)}
.ag-mini-mes{font-size:18px;font-weight:300;letter-spacing:.2em;color:var(--tinta-2);text-align:center;line-height:1.05}
.ag-mini-mes small{display:block;font-size:9.5px;letter-spacing:.05em;color:var(--tinta-2)}
.ag-mini-grade{display:grid;grid-template-columns:repeat(7,1fr);row-gap:1px;margin-top:4px;text-align:center}
.ag-mini-grade .ds{font-size:9.5px;color:var(--tinta-2);padding:2px 0}
.ag-mini-grade button{border:0;background:none;cursor:pointer;font-size:10.5px;height:22px;width:22px;margin:0 auto;border-radius:50%;color:var(--tinta);padding:0;display:flex;align-items:center;justify-content:center}
.ag-mini-grade button:hover{background:var(--azul-suave)}
.ag-mini-grade button.fora{color:#B4BAC3}
.ag-mini-grade button.na-semana{background:var(--azul-suave-2)}
.ag-mini-grade button.sel{background:var(--azul-suave);color:var(--azul);font-weight:700}
.ag-mini-grade button.hoje{background:var(--azul);color:#fff;font-weight:700}
.ag-atualizado{text-align:right;font-size:10px;font-style:italic;color:var(--cinza);padding:2px 8px 6px}

.ag-caixa{margin:4px 4px 8px;border-radius:4px}
.ag-caixa.destaque{background:#E9EBEF}
.ag-caixa-cab{display:flex;align-items:center;gap:4px;padding:4px 2px 4px 6px}
.ag-caixa-cab b{font-size:14px;font-weight:600;color:var(--tinta-2)}
.ag-todos{border:0;background:none;color:var(--azul);font-size:12px;cursor:pointer;padding:0 2px}
.ag-todos:hover{text-decoration:underline}
.ag-caixa-cab .icone-btn{margin-left:auto;width:22px;height:22px}
.ag-caixa-cab .icone-btn svg.ic{width:15px;height:15px}
.ag-caixa-itens{padding:0 4px 6px}
.ag-caixa-itens>p{margin:2px 4px;font-size:13px}
.ag-filtro{position:relative;display:flex;align-items:center;gap:6px;padding:1.5px 2px;cursor:pointer;white-space:nowrap;line-height:1.3}
.ag-filtro input{position:absolute;opacity:0;width:0;height:0}
.ag-filtro .q{width:13px;height:13px;flex:none;border:1px solid #C3C9D2;background:#fff;border-radius:1px}
.ag-filtro input:checked+.q{background:var(--c);border-color:var(--c)}
.ag-filtro input:focus-visible+.q{outline:2px solid var(--azul);outline-offset:1px}
.ag-filtro .t{overflow:hidden;text-overflow:ellipsis}
.ag-filtro:hover .t{color:var(--azul)}
.ag-espera-it{display:block;width:100%;text-align:left;border:0;background:#fff;border-left:3px solid var(--amarelo);padding:4px 6px;margin:0 0 3px;cursor:pointer;font-size:12px;border-radius:2px;color:var(--tinta)}
.ag-espera-it small{display:block;color:var(--cinza);font-size:10.5px}
.ag-espera-it:hover{background:var(--amarelo-suave)}
.ag-caixa.espera{background:#FFF9E6}

/* ---------- Barra de cima ---------- */
.ag-barra{display:flex;align-items:center;gap:4px;padding:6px 10px;min-height:46px;border-bottom:1px solid var(--linha);flex-wrap:wrap;background:#fff}
.ag-barra .icone-btn{color:#5F6368}
.ag-redondo{width:28px;height:28px;border-radius:50%;border:0;background:#5F6368;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-right:6px}
.ag-redondo:hover{background:var(--azul)}
.ag-redondo svg.ic{width:18px;height:18px;stroke-width:2.6}
.ag-alarme{border:0;background:none;color:#5F6368;cursor:pointer;display:inline-flex;padding:3px;border-radius:50%}
.ag-alarme svg.ic{width:24px;height:24px}
.ag-alarme:hover{color:var(--azul)}
.ag-hoje{border:0;background:none;cursor:pointer;font-size:14px;padding:6px 10px;border-radius:6px;color:var(--tinta-2)}
.ag-hoje:hover{background:#F1F3F6}
.ag-titulo{font-size:18px;font-weight:700;margin:0 10px 0 6px;white-space:nowrap;color:var(--tinta)}
.ag-visoes{display:flex;align-items:center;gap:2px;color:var(--tinta)}
.ag-visoes button{border:0;background:none;cursor:pointer;font-size:14px;padding:4px 3px;color:var(--tinta-2)}
.ag-visoes button:hover{color:var(--azul)}
.ag-visoes button.ativo{font-weight:700;font-size:16px;color:var(--tinta)}
.ag-btn-lado{display:none;align-items:center;gap:6px;border:1px solid var(--linha-2);background:#fff;border-radius:999px;padding:5px 12px;font-size:13.5px;cursor:pointer;color:var(--tinta)}
.ag-btn-lado svg.ic{width:16px;height:16px}
.ag-lado-fundo{display:none}
.ag-quebra{display:none}
.ag-tela .ct{display:none}

/* Seletor de profissional (celular, visão Dia: um profissional por vez) */
.ag-profsel{display:flex;gap:6px;overflow-x:auto;padding:6px 10px;border-bottom:1px solid var(--linha);background:#fff;scrollbar-width:none;flex:none}
.ag-profsel::-webkit-scrollbar{display:none}
.ag-profsel button{display:inline-flex;align-items:center;gap:6px;flex:none;border:1px solid var(--linha-2);background:#fff;border-radius:999px;padding:6px 12px;font-size:13.5px;cursor:pointer;color:var(--tinta);white-space:nowrap}
.ag-profsel button.ativo{border-color:var(--azul);background:var(--azul-suave);color:var(--azul);font-weight:600}

/* ---------- Grade (semana e dia) ---------- */
.ag-grade{--hcol:46px;position:relative;min-width:calc(var(--hcol) + var(--cols) * 118px)}
.ag-cab,.ag-linha-dia,.ag-corpo-grade{display:grid;grid-template-columns:var(--hcol) repeat(var(--cols),minmax(0,1fr))}
.ag-cab{position:sticky;top:0;z-index:6;background:#F5F6F8;border-bottom:1px solid #DADDE2}
.ag-canto{position:sticky;left:0;z-index:2;background:#F5F6F8;border-right:1px solid #DADDE2}
.ag-cab-col{padding:3px 6px;text-align:center;font-size:14px;color:var(--tinta-2);border-left:1px solid #DADDE2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ag-cab-col:hover{color:var(--azul)}
.ag-modo-dia .ag-cab-col{cursor:default}
.ag-modo-dia .ag-cab-col:hover{color:var(--tinta-2)}
.ag-cab-col.hoje,.ag-cab-col.hoje:hover{background:var(--azul);color:#fff;font-weight:500}
.ag-linha-dia{border-bottom:1px solid #DADDE2}
.ag-linha-dia .ag-canto{font-size:10px;color:var(--cinza);display:flex;align-items:center;justify-content:center;background:#fff;text-align:center;line-height:1.1}
.ag-dia-cel{border-left:1px solid #E1E4E8;padding:2px 3px;min-height:22px;min-width:0}
.ag-di{background:var(--azul);color:#fff;font-weight:700;font-size:11px;border-radius:2px;padding:2px 6px;margin-bottom:2px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-di.ag-desm{opacity:.55;text-decoration:line-through}
.ag-horas{position:sticky;left:0;z-index:4;background:#fff;border-right:1px solid #DADDE2}
.ag-hora{display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--tinta-2);border-bottom:1px solid #E6E8EC;box-sizing:border-box}
.ag-col{position:relative;border-left:1px solid #E1E4E8;cursor:pointer;min-width:0}
.ag-col:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(to bottom,transparent calc(var(--alt) - 1px),#E6E8EC calc(var(--alt) - 1px));background-size:100% var(--alt)}
.ag-somente-ver .ag-col{cursor:default}
.ag-trab{position:absolute;left:0;right:0;z-index:0}
.ag-hover{position:absolute;left:1px;right:1px;z-index:1;background:var(--azul-suave-2);border:1px dashed var(--azul-claro);color:var(--azul);font-size:11px;line-height:1.2;padding:2px 6px;pointer-events:none;box-sizing:border-box;overflow:hidden}

/* ---------- Bloco do agendamento ---------- */
.ag-bloco{position:absolute;z-index:2;box-sizing:border-box;overflow:hidden;cursor:pointer;border-radius:2px;border-left:5px solid transparent;border-right:5px solid transparent;padding:2px 5px 1px 6px;font-size:10.5px;line-height:13px;box-shadow:0 0 0 1px rgba(255,255,255,.85)}
.ag-bloco:hover{z-index:3;box-shadow:0 2px 8px rgba(15,45,82,.28)}
.ag-bloco b{display:block;font-size:11px;line-height:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-bloco .l{display:flex;align-items:center;gap:4px;white-space:nowrap;min-width:0}
.ag-bloco .l span{overflow:hidden;text-overflow:ellipsis}
.ag-bloco .l svg.ic{width:11px;height:11px;stroke-width:2;flex:none}
.ag-st{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;background:#9AA3AE;box-shadow:0 0 0 1.5px #fff;flex:none;vertical-align:0}
.ag-st.confirmado{background:var(--verde)}
.ag-st.faltou{background:var(--vermelho)}
.ag-st.espera{background:var(--amarelo)}
.ag-bloco.ag-comp{background-color:var(--azul);color:#fff;border-width:0;padding:3px 7px}
.ag-bloco.ag-desm{opacity:.55;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px)}
.ag-bloco.ag-desm b{text-decoration:line-through}

/* ---------- Mês ---------- */
.ag-mes{display:flex;flex-direction:column;height:100%;min-height:560px;min-width:640px}
.ag-mes-cab{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:#F5F6F8;border-bottom:1px solid #DADDE2;position:sticky;top:0;z-index:2}
.ag-mes-cab div{text-align:center;font-size:12.5px;padding:3px 0;border-left:1px solid #DADDE2}
.ag-mes-grade{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,minmax(84px,1fr))}
.ag-mes-cel{position:relative;border-left:1px solid #DADDE2;border-bottom:1px solid #DADDE2;cursor:pointer;padding:21px 3px 3px;min-width:0}
.ag-mes-cel:hover{background:var(--azul-suave-2)}
.ag-mes-cel.fora{background:#EFF0F2}
.ag-mes-cel.sel,.ag-mes-cel.sel:hover{background:var(--azul-claro)}
.ag-mes-cel .n{position:absolute;top:2px;left:4px;font-size:12px;color:var(--tinta);line-height:18px;min-width:18px;text-align:center}
.ag-mes-cel.hoje .n{background:var(--azul);color:#fff;border-radius:50%;font-weight:700}
.ag-mes-area{position:relative;height:100%}
.ag-mes-barra{position:absolute;min-height:3px;border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.ag-mes-barra.desm{opacity:.4}

/* ---------- Painel da engrenagem ---------- */
.ag-painel{position:absolute;top:0;right:0;bottom:0;width:250px;background:#fff;z-index:30;box-shadow:-6px 0 18px rgba(15,45,82,.16);padding:8px 14px}
.ag-painel>.icone-btn{margin-bottom:8px}
.ag-p-it{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px}
.ag-p-it .t{flex:1}
.ag-info{display:inline-flex;color:var(--cinza);cursor:help}
.ag-info svg.ic{width:15px;height:15px}

/* ---------- Modal Nova Consulta | Compromisso | Evento ---------- */
.ag-m-tit{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-weight:400}
.ag-m-tit .atual{font-size:18px;font-weight:500;color:var(--titulo)}
.ag-m-tit a{font-size:13px;color:var(--tinta);cursor:pointer;font-weight:500}
.ag-m-tit a:hover{color:var(--azul);text-decoration:none}
.ag-m-tit .sep{color:var(--tinta);font-size:15px}
.ag-form{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.ag-f-linha{display:flex;align-items:flex-end;gap:10px}
.ag-f-ic{width:22px;flex:none;color:var(--tinta-2);display:flex;justify-content:center;padding-bottom:7px}
.ag-f-ic svg.ic{width:17px;height:17px}
.ag-campo{flex:1}
.ag-campo>label{font-weight:500;color:var(--tinta-2)}
.ag-f-checks{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;padding-left:4px}
.ag-f-checks .check{font-size:13px}
.ag-f-checks .ag-info{margin-right:18px}
.ag-f-multi{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--tinta-2);background:var(--azul-suave-2);border-radius:6px;padding:4px 8px}
.ag-f-multi input{width:58px;border:1px solid var(--linha-2);border-radius:4px;padding:2px 6px;background:#fff}
.ag-fs{border:1px solid var(--linha-2);border-radius:4px;padding:6px 16px 16px;margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.ag-fs legend{font-size:12px;color:var(--tinta-2);padding:0 6px;font-weight:500}
.ag-procs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;border-bottom:1px solid var(--linha-2);min-height:32px;padding:3px 0}
.ag-procs:focus-within{border-bottom:2px solid var(--azul)}
.ag-chips{display:contents}
.campo .ag-procs input{border:0;flex:1;min-width:170px;padding:4px 2px;min-height:24px}
.campo .ag-procs input:focus{border:0}
.ag-chip{display:inline-flex;align-items:center;gap:2px;background:var(--azul-suave);color:#174a8b;border-radius:999px;padding:2px 4px 2px 10px;font-size:12px;max-width:100%}
.ag-chip button{border:0;background:none;cursor:pointer;color:inherit;display:inline-flex;padding:1px;border-radius:50%}
.ag-chip button:hover{background:rgba(29,111,209,.15)}
.ag-chip svg.ic{width:13px;height:13px}
.ag-dur{display:flex;align-items:center;gap:6px}
.campo .ag-dur input{width:76px}
.ag-dur span{font-size:12.5px;color:var(--tinta-2)}
.ag-dur small{color:var(--cinza);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-selcor-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;border:0;border-bottom:1px solid var(--linha-2);background:transparent;padding:6px 2px;cursor:pointer;text-align:left;color:var(--tinta)}
.ag-selcor-btn .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-selcor-btn:focus{outline:0;border-bottom:2px solid var(--azul)}
.campo.erro .ag-selcor-btn,.campo.erro .ag-procs{border-bottom-color:var(--vermelho)}
.ag-sq{display:inline-block;width:12px;height:12px;border-radius:2px;flex:none;vertical-align:-1px;margin-right:2px}
.ag-lista{position:fixed;z-index:20;background:#fff;border-radius:8px;box-shadow:var(--sombra-modal);padding:4px;overflow:auto;max-height:280px}
.ag-lista button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:7px 9px;border-radius:6px;cursor:pointer;text-align:left;font-size:13px;color:var(--tinta)}
.ag-lista button .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-lista button small{color:var(--cinza);font-size:11.5px;white-space:nowrap}
.ag-lista button:hover,.ag-lista button.ativo{background:var(--azul-suave-2)}
.ag-lista .ag-novo{color:var(--azul);font-weight:600;border-top:1px solid var(--linha);border-radius:0 0 6px 6px}
.ag-lista-vazia{padding:8px 10px;color:var(--cinza);font-size:12.5px}
.ag-alvo{padding-bottom:8px;flex:none}
.ag-di-chk{padding-bottom:8px;flex:none}
.ag-horario{display:flex;align-items:center;gap:8px}
.campo .ag-horario input{flex:1;min-width:0}
.ag-horario span{color:var(--tinta-2);font-size:12.5px}
.ag-regua-tit{font-size:12.5px;color:var(--tinta-2);font-weight:500;margin-bottom:-8px}
.ag-regua{display:grid;grid-template-columns:repeat(17,minmax(0,1fr));border:1px solid var(--linha);border-radius:2px;background:#FAFBFC}
.ag-regua button{height:30px;border:0;border-right:1px dashed #E1E4E8;border-bottom:1px solid var(--linha);background:transparent;font-size:9.5px;color:var(--tinta-2);padding:2px 3px;cursor:pointer;display:flex;align-items:flex-start;justify-content:flex-start}
.ag-regua button:hover{background:var(--azul-suave)}
.ag-regua button.oc{background:#F5A9A9;color:#7a2020}
.ag-regua button.sel{background:var(--azul);color:#fff}
.ag-regua button.oc.sel{background:repeating-linear-gradient(135deg,var(--azul) 0 6px,#E57373 6px 12px);color:#fff}
.ag-regua.desligada{opacity:.5}
.ag-regua button:disabled{cursor:not-allowed}
.ag-avisos{display:flex;flex-direction:column;gap:8px}
.ag-avisos:empty{display:none}

/* ---------- Cartão do agendamento ---------- */
.ag-cartao{display:flex;flex-direction:column;gap:12px}
.ag-c-topo{display:flex;gap:12px;align-items:center}
.ag-c-av{width:46px;height:46px;border-radius:50%;background:#EEF0F3;color:var(--tinta-2);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.ag-c-av.comp{background:var(--azul);color:#fff}
.ag-c-q{min-width:0}
.ag-c-nome{font-size:16px;font-weight:700;color:var(--azul)}
span.ag-c-nome{color:var(--titulo)}
.ag-c-cont{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--tinta-2);margin-top:2px}
.ag-c-cont span{display:inline-flex;align-items:center;gap:4px}
.ag-c-cont svg.ic{width:14px;height:14px}
.ag-c-linhas{border-top:1px solid var(--linha)}
.ag-c-l{display:grid;grid-template-columns:20px 130px 1fr;gap:8px;align-items:start;padding:8px 0;border-bottom:1px solid var(--linha);font-size:13px}
.ag-c-l>svg.ic{width:16px;height:16px;color:var(--tinta-2);margin-top:1px}
.ag-c-l .r{color:var(--tinta-2)}
.ag-c-l .v{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0;word-break:break-word}
.ag-c-l ul{margin:0;padding-left:16px}
.ag-c-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ag-c-status .r{font-weight:600;font-size:13px}
.ag-st-btns{display:flex;gap:6px;flex-wrap:wrap}
.ag-st-btn{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 12px;border-radius:6px;border:1px solid var(--linha-2);background:#fff;cursor:pointer;font-weight:500;font-size:13px;color:var(--tinta)}
.ag-st-btn:hover{border-color:var(--azul)}
.ag-st-btn.ativo.confirmado{background:var(--verde-suave);border-color:var(--verde);color:var(--verde-2)}
.ag-st-btn.ativo.faltou{background:var(--vermelho-suave);border-color:var(--vermelho);color:var(--vermelho)}
.ag-st-btn.ativo.espera{background:var(--amarelo-suave);border-color:var(--amarelo);color:#8a6400}
.ag-c-rod{font-size:11.5px;color:var(--cinza);line-height:1.5}
.btn.ag-btn-desm{color:var(--vermelho);margin-right:auto}
.modal .m-cab h2 .chip{vertical-align:2px;margin-left:6px}

/* altura certa no celular (barra do navegador e área do relógio do iPhone) */
@supports(height:100dvh){.ag-tela{height:calc(100dvh - 56px - env(safe-area-inset-top,0px))}}

/* ---------- Celular (até 760px, o mesmo corte do cliup.css) ---------- */
@media(max-width:760px){
  /* coluna esquerda vira gaveta, aberta pelo botão Filtros */
  .ag-btn-lado{display:inline-flex}
  .ag-lado{position:absolute;top:0;left:0;bottom:0;z-index:40;width:270px;max-width:86vw;transform:translateX(-102%);transition:transform .2s;box-shadow:var(--sombra-modal);font-size:14px}
  .ag-tela.lado-aberto .ag-lado{transform:none}
  .ag-tela.lado-aberto .ag-lado-fundo{display:block;position:absolute;inset:0;z-index:39;background:rgba(15,45,82,.3)}
  .ag-mini-grade button{width:32px;height:32px;font-size:13px}
  .ag-mini-grade .ds{font-size:11px}
  .ag-filtro{padding:5px 2px;gap:10px}
  .ag-filtro .q{width:18px;height:18px}
  .ag-caixa-cab .icone-btn{width:32px;height:32px}
  .ag-todos{font-size:13px;padding:4px}
  .ag-espera-it{font-size:14px;padding:8px}

  /* barra em duas linhas: data, ‹ › e Hoje em cima; Filtros, Mês | Semana | Dia e o botão de nova consulta embaixo */
  .ag-barra{padding:6px 8px;gap:4px 6px}
  .ag-titulo{order:1;flex:1;min-width:0;font-size:15px;margin:0 2px;overflow:hidden;text-overflow:ellipsis}
  .ag-ant{order:2}
  .ag-prox{order:3}
  .ag-hoje{order:4;border:1px solid var(--linha-2);padding:5px 10px}
  .ag-quebra{display:block;order:5;flex-basis:100%;height:0}
  .ag-btn-lado{order:6}
  .ag-visoes{order:7}
  .ag-barra .espaco{order:8}
  .ag-alarme{order:9}
  .ag-engr{order:4}  /* 03/11: na linha de cima, ao lado do Hoje; embaixo ela caía sozinha numa terceira linha em 375 px */
  .ag-redondo{order:11;width:38px;height:38px;margin-right:0;background:var(--azul)}
  .ag-redondo svg.ic{width:22px;height:22px}
  .ag-visoes button{font-size:14px;padding:6px 5px}
  .ag-visoes button.ativo{font-size:15px}
  .ag-so-largo{display:none!important}
  .ag-tela .lg{display:none}
  .ag-tela .ct{display:inline}

  /* grade e blocos com letra legível */
  .ag-grade{--hcol:44px;min-width:calc(var(--hcol) + var(--cols) * 104px)}
  .ag-modo-dia{min-width:0}
  .ag-hora{font-size:12px}
  .ag-cab-col{font-size:13px;padding:5px 6px}
  .ag-bloco{font-size:12px;line-height:15px;padding:2px 6px 2px 7px}
  .ag-bloco b{font-size:13px;line-height:18px}
  .ag-bloco .l svg.ic{width:13px;height:13px}
  .ag-st{width:9px;height:9px}
  .ag-di{font-size:12.5px;padding:4px 8px}
  .ag-hover{display:none}
  .ag-corpo:after{content:"";display:block;height:46px}
  .ag-mes{min-width:0;min-height:480px}
  .ag-mes-grade{grid-template-rows:repeat(6,minmax(66px,1fr))}
  .ag-mes-cab div{font-size:12px}
  .ag-mes-cel{padding:22px 2px 2px}
  .ag-painel{width:100%;max-width:300px}
  .ag-p-it{font-size:15px;padding:12px 0}

  /* modal: tela cheia (cliup.css) e campos um embaixo do outro */
  .ag-f-linha{flex-direction:column;align-items:stretch;gap:12px}
  .ag-f-linha .ag-campo{flex:none!important;width:100%}
  .ag-f-ic{display:none}
  .ag-alvo,.ag-di-chk{padding-bottom:0}
  .ag-modal .campo input,.ag-modal .campo select,.ag-modal .ag-selcor-btn{font-size:16px;min-height:40px}
  .ag-modal .check{font-size:15px}
  .ag-f-checks{gap:10px 8px}
  .ag-f-multi{width:100%;flex-wrap:wrap;font-size:14px}
  .ag-fs{padding:6px 10px 12px}
  .campo .ag-procs input{min-width:0;width:100%;font-size:16px}
  .ag-chip{font-size:13px;padding:4px 6px 4px 12px}
  .ag-dur small{white-space:normal}
  .ag-regua{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ag-regua button{height:38px;font-size:11px}
  .ag-lista button{padding:11px 10px;font-size:15px}
  .ag-m-tit{gap:6px}
  .ag-m-tit .atual{font-size:17px}
  .ag-m-tit a{font-size:14px;padding:4px 0}
  .ag-c-l{grid-template-columns:20px 1fr;gap:2px 8px}
  .ag-c-l .v{grid-column:2}
  .ag-c-l .r{font-size:12px}
  .ag-st-btns{width:100%}
  .ag-st-btn{flex:1;justify-content:center;height:42px;padding:0 6px}
}

/* ---------- Impressão: só a grade ---------- */
@media print{
  body:has(.ag-tela) .topo,body:has(.ag-tela) .faixa-proto,body:has(.ag-tela) .toasts{display:none!important}
  .ag-tela{height:auto;overflow:visible;display:block}
  .ag-lado,.ag-painel,.ag-lado-fundo,.ag-barra button,.ag-visoes,.ag-hover{display:none!important}
  .ag-corpo{overflow:visible}
  .ag-cab,.ag-horas,.ag-canto{position:static}
  .ag-tela *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* seleção de vários horários arrastando (Dr., 26/10): o quadro mostra o horário, quantos horários e quantas horas */
.ag-sel{position:absolute;left:1px;right:1px;z-index:3;background:rgba(29,111,209,.16);border:2px solid var(--azul);border-radius:4px;
  color:var(--navy);padding:3px 6px;font-size:12.5px;line-height:1.3;pointer-events:none;display:flex;flex-direction:column;overflow:hidden}
.ag-sel b{font-weight:700}.ag-sel span{font-size:12px}
.ag-tela .ag-col{user-select:none;-webkit-user-select:none}

/* status como lista de escolher (Dr., 26/10): a cor da caixa segue o status; cinza = sem status */
.ag-st-sel-c{position:relative;display:inline-flex;align-items:center}
.ag-st-sel-c .ag-st{position:absolute;left:10px;pointer-events:none}
.ag-st-sel{appearance:none;-webkit-appearance:none;border:1px solid var(--linha-2);border-radius:18px;padding:7px 34px 7px 26px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;
  background:#F1F2F4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;color:#555;min-width:170px}
.ag-st-sel.confirmado{background-color:#E6F4EA;border-color:#9FD4AD;color:#1E6B34}
.ag-st-sel.faltou{background-color:#FDECEC;border-color:#F2A7A7;color:#A12626}
.ag-st-sel.espera{background-color:#FFF6DB;border-color:#F0D58A;color:#7A5B00}
.ag-st-sel:focus{outline:2px solid var(--azul-suave);border-color:var(--azul)}

/* confirmações do paciente e atraso (Dr., 26/10) */
.ag-c-extra{display:grid;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linha)}
.ag-c-x{display:grid;grid-template-columns:170px 1fr;gap:10px;align-items:start}
.ag-c-x .r{color:var(--tinta-2);font-size:13px;padding-top:3px}
.ag-c-x .v{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.ag-c-x .v > div{flex-basis:100%}
.ag-x-sub{font-size:12.5px;line-height:1.45}
.ag-conf-pts{display:inline-flex;gap:4px}
.ag-conf-pts i{width:22px;height:22px;border-radius:50%;border:2px solid var(--linha-2);display:inline-flex;align-items:center;justify-content:center;color:transparent}
.ag-conf-pts i.ok{background:var(--verde);border-color:var(--verde);color:#fff}
.ag-conf-pts svg.ic{width:13px;height:13px}
.ag-atr-opc{display:flex;flex-wrap:wrap;gap:8px}
.ag-mk{display:inline-flex;align-items:center;gap:2px;margin-left:5px;padding:0 5px;border-radius:8px;font-size:10.5px;font-weight:700;line-height:15px;vertical-align:1px;background:rgba(255,255,255,.75);color:#1E6B34}
.ag-mk svg.ic{width:10px;height:10px}
.ag-mk.conf.ok2{background:#1E6B34;color:#fff}
.ag-mk.atraso{background:#FFF0C2;color:#7A5B00}
@media(max-width:760px){.ag-c-x{grid-template-columns:1fr;gap:4px}}
/* alerta de retorno (o sino da barra) */
.ag-alarme{position:relative}
.ag-alarme-n{position:absolute;top:-2px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#D64545;color:#fff;font-size:11px;line-height:17px;font-weight:500;text-align:center}
.rt-abas{display:flex;flex-wrap:wrap;margin-bottom:12px}
.rt-lista{display:grid}
.rt-it{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--linha)}.rt-it:first-child{border-top:0}
.rt-data{display:flex;flex-direction:column;gap:3px;align-items:flex-start}.rt-acoes{display:flex;gap:6px}
@media(max-width:600px){.rt-it{grid-template-columns:minmax(0,1fr) auto}.rt-data{grid-column:1/-1;flex-direction:row;align-items:center}}

/* quantos de cada item no período da tela (Dr., 27/10: "contagem manual dos tipos de agendamento") */
.ag-filtro .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ag-filtro-n { margin-left: auto; padding-left: 6px; font-size: 12px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.ag-filtro-n.zero { color: var(--cinza); font-weight: 400; }

/* "Espaço reservado": atendimento de outra clínica no Cliup numa unidade desta (o doutor aluga o espaço) */
.ag-bloco.ag-comp.ag-reserva { background: repeating-linear-gradient(135deg, #EEF0F4 0 6px, #F8F9FB 6px 12px); color: var(--tinta-2); border: 1px dashed #B9C0CB; border-left: 5px solid var(--c); cursor: pointer; }
.ag-bloco.ag-comp.ag-reserva b { color: var(--tinta); }
.ag-cel-it.comp.reserva { background: repeating-linear-gradient(135deg, #F1F3F6 0 6px, #FAFBFC 6px 12px); border-style: dashed; }
.ag-cel-it.comp.reserva .hora { background: #E9ECF1; color: var(--tinta-2); border-left-color: var(--c); }
.ag-cel-it.comp.reserva .l { display: flex; align-items: center; gap: 5px; }

/* Feriados e bloqueios (27/10): a área fechada fica cinza listrada, com o motivo */
.ag-bloq-faixa { position: absolute; left: 0; right: 0; z-index: 1; background: repeating-linear-gradient(135deg, rgba(120,130,145,.13) 0 8px, rgba(120,130,145,.05) 8px 16px); border-top: 1px dashed #B9C0CB; border-bottom: 1px dashed #B9C0CB; cursor: not-allowed; overflow: hidden; }
.ag-bloq-faixa span { position: sticky; top: 0; display: inline-block; margin: 4px 6px; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.85); color: var(--tinta-2); font-size: 12px; font-weight: 600; }
.ag-bloco.ag-comp.ag-bloq { background: repeating-linear-gradient(135deg, #EEF0F4 0 6px, #F8F9FB 6px 12px); color: var(--tinta-2); border: 1px dashed #B9C0CB; }
.ag-bloco.ag-comp.ag-bloq b { color: var(--tinta); }
.ag-di.ag-di-bloq { background: #E9ECF1; color: var(--tinta-2); border: 1px dashed #B9C0CB; }
.ag-cel-it.comp.bloq { background: repeating-linear-gradient(135deg, #F1F3F6 0 6px, #FAFBFC 6px 12px); border-style: dashed; }
.ag-cel-it.comp.bloq .hora { background: #E9ECF1; color: var(--tinta-2); border-left-color: #9AA3AE; }
.ag-cel-dia.feriado:not(.sel) { background: repeating-linear-gradient(135deg, #F1F3F6 0 6px, #FAFBFC 6px 12px); }
.ag-cel-fer { position: absolute; left: 4px; bottom: 4px; font-size: 10.5px; font-weight: 600; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .02em; }
.ag-cel-dia.sel .ag-cel-fer { color: #fff; }
/* ficha de saúde pendente (27/10) */
.ag-mk.ficha{background:#FDE8E8;color:#9B1C1C}
.ag-c-ficha .chip{white-space:normal;text-align:left}
.ag-bloco .l.ag-l-ficha{color:#9B1C1C;font-weight:700}

/* cobrança da reserva pelo link (02/11, js/cobranca.js) */
.ag-mk.pago{background:#1E6B34;color:#fff}
.ag-mk.aguarda{background:#FFF0C2;color:#7A5B00}
.ag-mk.menor{background:#6B21A8;color:#fff}
/* 03/11: consulta online com o link do Meet (js/meet.js) */
.ag-mk.online{background:#E8EEF7;color:#153a5c}
.ag-mk.online .ic,.ag-mk.online svg{width:12px;height:12px}
.ag-meet{display:flex;gap:10px;align-items:flex-start;margin:10px 0 4px;padding:10px 12px;border-radius:10px;background:#EEF3FA;border:1px solid #D5E1F0}
.ag-meet>svg{flex:none;width:20px;height:20px;color:#153a5c;margin-top:1px}
.ag-meet b{display:block;font-size:13px;color:#153a5c;margin-bottom:6px}
.ag-meet-v{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.ag-meet-v>div{flex-basis:100%;font-size:12px;word-break:break-all}
/* 03/11 (Dr.): "uma sombra aqui do lado, essa sombra é do quê?": era o painel de filtros escondido; a sombra só com ele aberto.
   "A agenda pode ter uma margenzinha nas laterais para não ficar tão encostada na beira" */
@media(max-width:760px){
  .ag-lado{box-shadow:none}
  .ag-tela.lado-aberto .ag-lado{box-shadow:var(--sombra-modal)}
}
@media(max-width:760px){
  .ag-cel-mes{margin:4px 10px 0;border:1px solid var(--linha);border-radius:12px;overflow:hidden;background:#fff}
  .ag-cel-horarios{margin:10px 10px 0;border-radius:12px;overflow:hidden}
  .ag-cel-profs{padding-left:10px;padding-right:10px}
}
/* 03/11: mensagem da consulta online (js/meet.js) */
.mt-msg{margin-bottom:10px;flex-wrap:wrap}
.mt-texto{width:100%;font:inherit;font-size:14px;line-height:1.45;border:1px solid var(--linha);border-radius:10px;padding:10px 12px;background:#F8FAFC;resize:vertical}
/* 03/11: câmera grande à direita da consulta online, na lista do dia */
.ag-cel-online{flex:none;align-self:center;width:40px;height:40px;border-radius:99px;background:#E8EEF7;color:#153a5c;display:flex;align-items:center;justify-content:center;margin-left:4px}
.ag-cel-online svg{width:22px;height:22px}
/* 03/11 (Dr.: "não precisa estar escrito feriado, ou deve estar num lugar onde não interfere o número... um pouquinho menor,
   um pouquinho mais claro"): rótulo pequeno e claro embaixo, longe do número; no dia que também tem agendamentos, fica só o
   listrado (o nome do feriado continua no toque longo do mouse e na lista do dia) */
.ag-cel-fer{left:5px;bottom:3px;font-size:8.5px;font-weight:600;color:#A3ADBA;letter-spacing:.05em}
.ag-cel-dia:has(.ag-cel-marca) .ag-cel-fer{display:none}
/* 03/11: dia fechado com cor própria (feriado, bloqueio da clínica, dia sem expediente): "só de olhar a cor, ela já sabe" */
.ag-cel-dia.fechado:not(.sel){background:#E4E9F0}
.ag-cel-dia.fechado:not(.sel) .n{color:#7C8899}
.ag-cel-dia.feriado.fechado:not(.sel){background:repeating-linear-gradient(135deg,#E4E9F0 0 6px,#EDF1F5 6px 12px)}
/* o "Feriado" menor e mais embaixo, longe do número */
.ag-cel-fer{bottom:1px;font-size:7.5px;letter-spacing:.06em}
.ag-cel-fechado{display:flex;align-items:center;gap:8px;margin:6px 0 4px;padding:8px 10px;border-radius:10px;background:#E4E9F0;color:#334155;font-size:13px}
.ag-cel-fechado svg{width:16px;height:16px;flex:none;color:#64748B}
.ag-cel-fechado span{flex:1}
.ag-cel-fechado.aberto{background:none;padding:2px 0}
.ag-cel-fechado .btn.link{flex:none}
/* 03/11: botão de atualizar a agenda */
.ag-atualizar svg{transition:transform .6s}
.ag-atualizar.girando svg{transform:rotate(360deg)}
@media(max-width:760px){ .ag-atualizar{order:8;margin-left:auto} .ag-alarme{margin-left:0} }
.ag-cel-fechado.horario{background:#EEF4FB;color:#1E3A5F}
.ag-cel-fbts{display:flex;gap:2px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.ab-nota{font-size:12.5px;margin:6px 0 0}
/* 03/11: horários do dia mexido, montados de 2h30 em 2h30, e cada um livre ou ocupado */
.ab-faixas{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 6px}
.ab-faixas span{background:#EEF4FB;color:#1E3A5F;border-radius:99px;padding:3px 10px;font-size:12.5px}
.ag-slots{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ag-slot{background:#fff;border:1px solid #CFE0F3;color:#1E3A5F;border-radius:99px;padding:2px 9px;font-size:12px}
.ag-slot.oc{background:#1E3A5F;border-color:#1E3A5F;color:#fff}
/* 03/11: computador. A faixa do dia escolhido em cima da grade (Dia e Semana) e as colunas dos dias fechados com cor */
.ag-faixa-dia{display:flex;align-items:center;gap:10px;padding:6px 12px;border-bottom:1px solid var(--linha);background:#fff}
.ag-faixa-dia:empty{display:none}
.ag-faixa-data{font-size:13px;font-weight:600;color:var(--tinta-2);white-space:nowrap}
.ag-faixa-dia .ag-cel-fechado{flex:1;margin:0}
.ag-col.fechado{background:repeating-linear-gradient(135deg,#E9EDF2 0 8px,#F1F4F7 8px 16px)}
.ag-cab-col.fechado{background:#E4E9F0;color:#64748B}
.ag-cab-col small{display:block;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#94A3B8}
/* 03/11: colunas que se puxam (como no Excel); dois cliques voltam ao normal */
.ag-cab,.ag-linha-dia,.ag-corpo-grade{grid-template-columns:var(--tpl,var(--hcol) repeat(var(--cols),minmax(0,1fr)))}
.ag-cab-col{position:relative}
.ag-redim{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:3;touch-action:none}
.ag-redim:hover,.ag-redim:active{background:linear-gradient(90deg,transparent 3px,#7AA7DD 3px,#7AA7DD 6px,transparent 6px)}
/* o atualizar de baixo é só do celular (no computador já há o de cima) */
@media(min-width:761px){ .ag-atualizar{display:none} }
/* 03/11 (Dr.: "queria agendar o horário das 23 horas, ele está tão lá embaixo que eu não consigo clicar... ficar um espaçozinho
   em branco para conseguir rolar a página até o final"): folga no fim da grade, acima da faixa de baixo */
.ag-grade{margin-bottom:110px}

/* arraste fora da jornada (03/11): a seleção fica vermelha para quem não pode liberar */
.ag-sel em{display:block;font-style:normal;font-size:11px;font-weight:600;line-height:1.25;margin-top:2px}
.ag-sel.fora{background:rgba(220,38,38,.12);border-color:#dc2626;color:#991b1b}

/* Agendado por em grupos (03/11) */
.ag-grupo{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 2px 2px;font:600 11px/1.2 inherit;letter-spacing:.06em;text-transform:uppercase;color:#7A8594;cursor:pointer}
.ag-grupo:first-child{padding-top:2px}
.ag-grupo:hover{color:var(--azul)}

/* quadro de pintar os horários do dia (03/11) */
.ab-acoes{display:flex;gap:8px;margin:8px 0}
.ab-quadro{max-height:340px;overflow-y:auto;border:1px solid #E1E4E8;border-radius:8px;user-select:none;-webkit-user-select:none;cursor:pointer}
.ab-l{display:flex;align-items:stretch;height:22px;border-top:1px dashed #EEF0F3}
.ab-l.hora{border-top:1px solid #E1E4E8}
.ab-l:first-child{border-top:0}
.ab-h{width:52px;flex:none;font-size:11px;color:#7A8594;padding:3px 8px 0;text-align:right}
.ab-c{flex:1;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 8px;font-size:12px;font-weight:600;color:#fff}
.ab-l:hover .ab-c{background:#EEF4FC}
.ab-l.on .ab-c{background:var(--azul)}
.ab-l.on:hover .ab-c{background:#1559AD}
.ab-l.ini .ab-c{border-top-left-radius:6px;border-top-right-radius:6px}
.ab-l.pv .ab-c{background:#A9C8F0}
.ab-c i{font-style:normal;font-weight:500;font-size:11px;background:rgba(0,0,0,.18);border-radius:4px;padding:0 5px}
.ab-l:not(.on) .ab-c i{background:#FFF4D6;color:#8A5A00}
.ab-l.on.ini{border-top:2px solid #fff}

/* horários do dia na faixa (03/11): livre clica e marca; passou fica apagado */
.ag-slots-dr{font-size:12px;font-weight:600;color:#1E3A5F;margin-right:2px;align-self:center}
.ag-slot[data-ag]{cursor:pointer}
.ag-slot[data-ag]:hover{background:#EEF4FC;border-color:var(--azul)}
.ag-slot.passou{opacity:.45}
.ag-faixa-dia .ag-slots{margin-top:4px}

/* resumo do dia (03/11) */
.ag-resumo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex-basis:100%;margin-top:6px;font-size:13px}
.ag-resumo>b{font-weight:600;color:#1E3A5F;margin-right:2px}
.ag-resumo-it{border:1px solid #DADDE2;background:#fff;border-radius:99px;padding:2px 10px;font:inherit;font-size:12px;cursor:pointer;color:#333}
.ag-resumo-it.verde-s{border-color:#BFE5CC;background:#EEF9F2;color:#1E6B3A}
.ag-resumo-it.amarelo{border-color:#F3DFA2;background:#FFF8E5;color:#7A5600}
.ag-resumo-it.vermelho{border-color:#F3C2C2;background:#FDEEEE;color:#A12828}
.ag-resumo-it:hover{border-color:var(--azul)}
.rs-abas{flex-wrap:wrap;margin-bottom:10px}
.rs-lista{display:flex;flex-direction:column;gap:6px}
.rs-it{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;text-align:left;background:#fff;border:1px solid #E1E4E8;border-radius:10px;padding:8px 12px;font:inherit;cursor:pointer}
.rs-it:hover{border-color:var(--azul)}
.rs-h{width:44px;flex:none}
.rs-n{flex:1;min-width:160px;display:flex;flex-direction:column}
.rs-n small{color:#7A8594}
.rs-tit{margin:4px 0 8px;font-size:13px;font-weight:600;color:#7A8594;text-transform:uppercase;letter-spacing:.05em}
.rs-tit~.rs-tit{margin-top:18px}
.rs-horas .ag-slots{margin:0 0 6px}
.ag-cel-data{cursor:pointer}

/* atendimento (03/11): a pílula de pendências na barra da agenda e a janela do atendimento */
.ag-pend{display:inline-flex;align-items:center;gap:6px;border:1px solid #F3C2C2;background:#FDEEEE;color:#A12828;border-radius:99px;padding:4px 12px;font:600 13px/1 inherit;cursor:pointer;margin-right:6px}
.ag-pend .ic{width:16px;height:16px}
.ag-pend:hover{border-color:#A12828}
.at-passo{display:flex;gap:12px;padding:14px 0;border-top:1px solid #EEF0F3}
.at-passo:first-of-type{border-top:0}
.at-num{width:28px;height:28px;flex:none;border-radius:50%;background:#EEF0F3;color:#5A6472;display:flex;align-items:center;justify-content:center;font-weight:700}
.at-passo.ok .at-num{background:#E3F4E8;color:#1E6B3A}
.at-num .ic{width:16px;height:16px}
.at-pc{flex:1;min-width:0}
.at-pc h4{margin:3px 0 8px;font-size:15px}
.at-evos{display:flex;flex-direction:column;gap:6px}
.at-evo{display:flex;flex-direction:column;border:1px solid #E1E4E8;border-radius:10px;padding:8px 12px}
.at-evo .mudo{font-size:12px}
.at-ret{display:flex;flex-wrap:wrap;gap:6px}
.at-op{border:1px solid #DADDE2;background:#fff;border-radius:99px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.at-op:hover{border-color:var(--azul)}
.at-op.ativo{background:var(--azul);border-color:var(--azul);color:#fff}
/* agendados pela Liv (03/11) */
.lv-it{cursor:default}
.lv-it.lv-ok{opacity:.75}
.lv-av{display:flex;align-items:center;gap:4px;color:#8A5A00 !important}
.lv-av .ic{width:13px;height:13px}

/* prévia da mensagem do pós como o paciente vê no WhatsApp (Dr., 03/11: "se tiver link, colocar botões") */
.wa-previa { background: #efeae2; border-radius: 12px; padding: 12px; max-width: 420px; display: flex; flex-direction: column; gap: 2px; }
.wa-balao { background: #fff; border-radius: 10px 10px 4px 4px; padding: 10px 12px; font-size: 14px; line-height: 1.45; color: #111b21; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-botao { background: #fff; border-radius: 4px; padding: 9px 12px; text-align: center; color: #027eb5; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-botao:last-child { border-radius: 4px 4px 10px 10px; }
.wa-botao svg { width: 16px; height: 16px; }

/* Consultório: fotos e pós imediato (item 56, 03/11) */
.cs-lista{display:flex;flex-direction:column;gap:8px}
.cs-it{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;text-align:left;background:#fff;border:1px solid #E1E4E8;border-radius:10px;padding:10px 14px;font:inherit;cursor:pointer}
.cs-it:hover{border-color:var(--azul-claro)}
.cs-h{font-size:16px;min-width:46px}
.cs-n{display:flex;flex-direction:column;flex:1;min-width:150px}
.cs-n small{color:var(--cinza)}
.cs-fotos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cs-mini{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--linha);display:block}
.cs-mini.enviada{opacity:.75}
.cs-nova{position:relative}
.cs-tirar{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:0;background:#333;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.cs-tirar svg.ic{width:14px;height:14px}
.cs-add{width:84px;height:84px;border:1px dashed var(--linha-2);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;text-align:center;color:var(--azul);cursor:pointer;padding:4px;background:#F8FAFC}
.cs-env{margin:8px 0 0;padding-left:18px;font-size:13.5px}
.cs-env li{margin-bottom:4px}

/* Chamar de volta (item 59, 03/11) */
.ch-ops{display:flex;flex-direction:column;gap:6px}
.ch-op{display:flex;align-items:center;gap:10px;border:1px solid #DADDE2;border-radius:10px;padding:10px 12px;cursor:pointer}
.ch-op:has(input:checked){border-color:var(--azul);background:#EEF4FC}
.ch-chip{display:inline-flex;align-items:center;gap:4px;cursor:pointer;border:0;font:inherit}
.ch-chip svg.ic{width:13px;height:13px}
.ch-cts{margin:8px 0 0;padding-left:18px}
.ch-cts li{margin-bottom:6px}
/* Placar do mês na lateral (Dr., 06/11), só para quem tem o fechamento da equipe */
.ag-placar-it { display: flex; align-items: center; width: 100%; border: 0; background: none; padding: 4px 6px; font: inherit; font-size: 13px; cursor: pointer; border-radius: 4px; text-align: left; color: inherit; }
.ag-placar-it:hover { background: var(--fundo); }
.ag-placar-nota { font-size: 11px; margin: 4px 6px 0; }
/* Placar no celular (Dr., 06/11), na barra da agenda, antes do atualizar; no computador fica no topo (elas) e na lateral (Dr. e gerente) */
.ag-placar-cel { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--linha-2); background: #fff; border-radius: 999px; padding: 3px 8px; font: inherit; font-size: 12px; color: var(--navy); cursor: pointer; white-space: nowrap; }
/* no celular, o número dela fica só aqui na agenda (não repete no topo) */
@media(max-width:760px){ body:has(.ag-placar-cel) .topo-cont{display:none} }
.ag-placar-cel .ic { width: 16px; height: 16px; }
.ag-placar-cel b { font-weight: 700; }
@media(max-width:760px){ .ag-placar-cel{order:8;margin-left:auto;padding:3px 6px;gap:2px} .ag-placar-cel + .ag-atualizar{margin-left:0} .ag-barra:has(.ag-placar-cel) > .espaco{display:none} }
@media(min-width:761px){ .ag-placar-cel{display:none} }
/* Espaço reservado como faixa de fundo (Dr., 06/11: "não precisa ficar tumultuado assim"): não ocupa coluna; cadeado na consulta do dono */
.ag-res-faixa { position: absolute; left: 0; right: 0; z-index: 1; background: repeating-linear-gradient(135deg, rgba(120,130,145,.10) 0 8px, rgba(120,130,145,.03) 8px 16px); border-left: 4px solid var(--c); cursor: pointer; overflow: hidden; }
.ag-res-faixa span { position: sticky; top: 0; display: inline-flex; align-items: center; gap: 4px; margin: 3px 4px; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.9); color: var(--tinta-2); font-size: 11px; font-weight: 600; max-width: calc(100% - 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-res-faixa .ic { width: 12px; height: 12px; flex: none; }
.ag-res-cad { position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--tinta-2); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ag-res-cad .ic { width: 13px; height: 13px; }
/* Pilha de fichas no mesmo horário (Dr., 06/11: "uma ficha em cima da outra... como se fosse um valetzinho") */
.ag-bloco.ag-pilha { cursor: pointer; }   /* 06/11 (Dr.): ocupa o espaço normal, sem a borda da ficha de trás; o número e a barrinha já dizem que são várias */
.ag-pilha-n { position: absolute; bottom: 3px; right: 3px; display: inline-flex; align-items: center; gap: 2px; background: var(--navy); color: #fff; border-radius: 999px; padding: 1px 7px 1px 5px; font-size: 11px; font-weight: 700; line-height: 16px; z-index: 2; }
.ag-pilha-n .ic { width: 11px; height: 11px; }
.ag-pilha-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ag-pilha-ficha { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; background: #fff; border: 1px solid var(--linha); border-left: 5px solid var(--c); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.ag-pilha-ficha:hover { background: var(--fundo); }
.ag-pilha-ficha b { font-size: 14px; color: var(--titulo); }
/* revezamento da pilha (Dr., 06/11): uma ficha por vez, barrinha de tempo embaixo; com o mouse em cima, para */
.ag-bloco.ag-pilha.ag-pilha-off { display: none; }
.ag-pilha-tempo { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(15,45,82,.10); overflow: hidden; }
.ag-pilha-tempo i { display: block; height: 100%; width: 100%; background: var(--navy); transform-origin: left; animation: agPilhaTempo 4s linear; }
.ag-pilha:hover .ag-pilha-tempo i { animation-play-state: paused; }
@keyframes agPilhaTempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ag-pilha-tempo { display: none; } }
.ag-pilha-n { bottom: 6px; }
.ag-pilha-pop { position: fixed; z-index: 950; width: 240px; background: #fff; border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 10px 30px -10px rgba(15,45,82,.35); padding: 8px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.ag-pilha-pop small { color: var(--tinta-2); font-size: 11px; padding: 0 2px; }
.ag-pp-it { border-left: 4px solid var(--c); padding: 3px 8px; display: flex; flex-direction: column; }
.ag-pp-it b { font-size: 13px; color: var(--titulo); }
.ag-pp-it span { font-size: 12px; color: var(--tinta-2); }
.btn.ag-btn-excl{color:var(--vermelho)}
/* arrastar a ficha (Dr., 06/11) */
.ag-bloco.ag-movendo { opacity: .35; }
.ag-fantasma { opacity: .85; outline: 2px dashed var(--navy); pointer-events: none; z-index: 5; }
.ag-fantasma::after { content: attr(data-hora); position: absolute; left: 4px; top: -20px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
@media (hover: hover) { .ag-bloco[data-id]:not([data-id^="res-"]):not([data-id^="blq-"]) { cursor: grab; } }
.ag-motivo-reag { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0; }
.ag-motivo-reag .radio { font-size: 14px; }
/* bolinhas de confirmação que a atendente toca (Dr., 06/11) */
.ag-conf-b { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha-2); background: #fff; color: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin-right: 4px; }
.ag-conf-b .ic { width: 14px; height: 14px; }
.ag-conf-b.ok { background: var(--verde); border-color: var(--verde); color: #fff; }
.ag-conf-b:hover { border-color: var(--verde); }
.btn.ag-btn-excl{margin-right:auto}
/* Remarcar no aviso de desmarcada (Dr., 06/11: "em vermelho... um botão com mais atenção") */
.btn.ag-btn-remarcar { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn.ag-btn-remarcar:hover { filter: brightness(.95); }
/* intenção de cancelar (Dr., 06/11: "algum círculo em volta"): anel laranja em volta da consulta; a dica diz "Entrar em contato" */
.ag-bloco.ag-intencao { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #E8740C !important; z-index: 3; }
.ag-intencao-aviso { border-left: 4px solid #E8740C; }
.ag-mk.liv{background:#E6F0FF;color:#1F3B63}
.ag-cel-it.ag-intencao { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #E8740C; border-radius: 10px; }
.ag-cel-it .corpo .ag-int-txt, .ag-int-txt { color: #B45309; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ag-int-txt .ic { width: 14px; height: 14px; }
/* horários livres do doutor, embaixo do Início (06/11) */
.ag-livres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 10px 44px; font-size: 13px; }
.ag-livres:empty { display: none; }
.ag-livres-tit { font-weight: 600; color: var(--texto, #1f2937); margin-right: 2px; }
.ag-livre { border: 1px solid #c7d7f5; background: #eef4ff; color: #1A73E8; border-radius: 999px; padding: 3px 10px; font: inherit; font-weight: 600; cursor: pointer; }
.ag-livre:hover { background: #dce8ff; }
.ag-livre.sel { background: #1A73E8; border-color: #1A73E8; color: #fff; }
.ag-livre.prox { font-weight: 500; }
.ag-livres .mudo { margin-left: 4px; }
@media (max-width: 760px) { .ag-livres { margin-left: 0; } }
.ag-do-chat { margin-bottom: 12px; }
/* Início como lista dos horários do doutor (06/11) */
.ag-ini-box { position: relative; display: flex; align-items: center; cursor: pointer; }
.ag-ini-box input { flex: 1; cursor: pointer; padding-right: 26px; }
.ag-ini-seta { position: absolute; right: 2px; display: inline-flex; color: var(--texto-2, #4b5563); }
.ag-ini-seta .ic, .ag-ini-seta svg { width: 18px; height: 18px; }
.ag-flut .ag-lista-sec { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; }
.ag-flut button.ag-h-ocup { opacity: .45; cursor: not-allowed; }
.ag-flut .ag-lista-pe { position: sticky; bottom: 0; background: #f7f9fc; border-top: 1px solid #e5e7eb; padding: 6px 12px; font-size: 12px; color: #6b7280; }
/* cabeçalho da lista do Início: os dois jeitos de escolher (06/11) */
.ag-flut .ag-hcab { position: sticky; top: 0; z-index: 1; background: #fff; border-bottom: 1px solid #e5e7eb; padding: 8px 10px 6px; }
.ag-hmodo { display: flex; background: #eef1f6; border-radius: 10px; padding: 3px; gap: 3px; }
.ag-hmodo button { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; font-weight: 600; color: #4b5563; cursor: pointer; }
.ag-hmodo button.on { background: #fff; color: #1A73E8; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.ag-hinfo { font-size: 12px; color: #6b7280; padding: 6px 2px 0; }
/* horário livre: meias horas para tocar (06/11) */
.ag-flut button.ag-cel30 { padding-top: 6px; padding-bottom: 6px; }
.ag-flut button.ag-hsel { background: #1A73E8; color: #fff; }
.ag-flut button.ag-hsel small { color: #dce8ff; }
.ag-flut button.ag-hsel + button.ag-hsel { border-top: 1px solid rgba(255,255,255,.35); }
.ag-hinfo .btn.link { margin-left: 4px; }
.ag-faixa-nav { display: inline-flex; align-items: center; gap: 2px; }
.ag-faixa-seta { border: 0; background: transparent; padding: 2px; border-radius: 6px; cursor: pointer; color: var(--tinta-2, #4b5563); display: inline-flex; }
.ag-faixa-seta:hover { background: #eef1f6; }
.ag-faixa-seta svg, .ag-faixa-seta .ic { width: 16px; height: 16px; }
.ag-cab-col.sel { box-shadow: inset 0 -3px 0 #1A73E8; color: #1A73E8; font-weight: 700; }
.ag-hinfo-sel { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #1f2937; font-size: 13px; }
.ag-hinfo-sel .btn { padding: 3px 12px; }
.ag-flut button.ag-h-dupla small { color: #B45309; }
/* alerta de dois pacientes no mesmo horário (06/11) */
.ag-alerta-duplo { font-size: 15px; padding: 14px 16px; border-width: 2px; }
.ag-alerta-duplo .ic, .ag-alerta-duplo svg { width: 24px; height: 24px; flex: none; }
.ag-alerta-duplo-p { margin: 12px 0 2px; font-size: 15px; font-weight: 600; }
.ab-dur-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-2, #4b5563); margin-right: 6px; }
.ab-dur-l select { width: auto; padding: 4px 8px; }
/* resumo da conversa no StaffChat, no cartão da consulta (06/11) */
.cv-sc { margin: 10px 0 4px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fafbfd; }
.cv-sc.vazio { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #6b7280; font-size: 13px; }
.cv-sc > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.cv-sc > summary::-webkit-details-marker { display: none; }
.cv-sc > summary > svg, .cv-sc > summary > .ic, .cv-sc.vazio > svg { width: 18px; height: 18px; flex: none; color: #1A73E8; }
.cv-sc > summary > svg:last-child { color: #6b7280; transition: transform .15s; }
.cv-sc[open] > summary > svg:last-child { transform: rotate(180deg); }
.cv-sc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cv-sc-t small { color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-sc-l { list-style: none; margin: 0; padding: 4px 12px 6px; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.cv-sc-l li { max-width: 88%; padding: 6px 10px; border-radius: 10px; font-size: 13px; display: flex; flex-direction: column; }
.cv-sc-l li.pac { align-self: flex-start; background: #fff; border: 1px solid #e5e7eb; }
.cv-sc-l li.nos { align-self: flex-end; background: #e8f0fe; }
.cv-sc-q { font-size: 11px; font-weight: 700; color: #4b5563; }
.cv-sc-q small { font-weight: 400; color: #6b7280; }
.cv-sc-pe { padding: 0 12px 8px; text-align: right; }
/* Horários deste dia: o grupo pintado é um bloco só, sem as linhas de meia hora por dentro (Dr., 06/11: "deixa sem a linha,
   senão confunde"); passar o mouse não destaca uma linha só, porque tocar apaga o grupo inteiro */
.ab-l.on:not(.ini), .ab-l.pv:not(.pvini) { border-top: 0; }
.ab-l.on:hover .ab-c { background: var(--azul); }
.ab-l.fimg .ab-c { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.ab-l.on.fimg + .ab-l.on.ini { border-top: 2px solid #fff; }
/* quadro livre de "Horários deste dia" (06/11): mover, encurtar, esticar; paciente marcado com a sua alça */
.ab-l .ab-c { position: relative; }
.ab-l.on .ab-c { cursor: grab; }
.ab-l.pv .ab-c { background: #4C8DF0 !important; }
.ab-l.ruim .ab-c { background: #F8C9C9 !important; }
.ab-rot { white-space: nowrap; }
.ab-res { position: absolute; left: 0; right: 0; height: 8px; cursor: ns-resize; z-index: 2; }
.ab-res.cima { top: -1px; }
.ab-res.baixo, .ab-res.pac { bottom: -1px; }
.ab-res::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 3px; margin: -1.5px 0 0 -13px; border-radius: 3px; background: rgba(255,255,255,.85); }
.ab-l.pac .ab-c { box-shadow: inset 6px 0 0 #E8A10C; }
.ab-l.pac:not(.on) .ab-c { background: #FFF4D6; color: #8A5A00; }
.ab-res.pac { left: 6px; }
.ab-res.pac::after { background: #E8A10C; }
.ab-l.pac .ab-c i { background: #FFF4D6; color: #8A5A00; }
.ab-faixas .ab-aj { background: #FFF4D6; color: #8A5A00; }
/* as alças só aparecem com o mouse em cima daquela borda (Dr., 06/11: "ficou com algumas marcações em alguns lugares que não
   eram para ficar") */
.ab-res::after { opacity: 0; transition: opacity .12s; }
.ab-l:hover .ab-res::after, .ab-res:hover::after { opacity: 1; }
@media (hover: none) { .ab-res::after { opacity: .6; } }
/* pré-reserva na agenda: tracejada, sem cor de consulta (06/11) */
.ag-bloco.ag-pre { background: repeating-linear-gradient(135deg, #FFF8E6 0 8px, #FFF1CC 8px 16px); border: 2px dashed #E8A10C; color: #7A4E00; }
.ag-bloco.ag-pre b { color: #7A4E00; }
.ag-cel-it.pre { border: 2px dashed #E8A10C; background: #FFF8E6; }
.pre-card .pre-l { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid #eef0f3; font-size: 14px; }
.pre-card .pre-l .r { width: 110px; flex: none; color: #6b7280; }
.pre-ate { display: flex; gap: 16px; margin: 4px 0 8px; }
.ab-l.pac .ab-c { padding-left: 14px; }
.ab-c i { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* tamanho do horário, discreto, no canto do bloco (06/11) */
.ab-durtxt { margin-left: auto; font-size: 11px; font-weight: 500; opacity: .8; padding-left: 8px; }
.ab-c i + .ab-durtxt { margin-left: 6px; }
/* blocos que não são atendimento (pausa, almoço, deslocamento) e a faixa de arrastar para o lado (06/11) */
.ab-l.on.pz .ab-c { background: #9AA3AF !important; }
.ab-faixas .ab-pz { background: #E5E7EB; color: #374151; }
.ab-rot svg, .ab-rot .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.ab-swipe { position: absolute; top: 2px; right: 4px; z-index: 3; display: flex; gap: 4px; background: rgba(255,255,255,.96); border-radius: 8px; padding: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.18); animation: ab-sw .14s ease-out; }
.ab-swipe button { border: 0; border-radius: 6px; padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 600; background: #eef1f6; color: #1f2937; cursor: pointer; white-space: nowrap; }
.ab-swipe button:hover { background: #dce8ff; color: #1A73E8; }
.ab-swipe button.ap { background: #fdecec; color: #b42318; }
@keyframes ab-sw { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.ab-k { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ab-fixo { margin: 4px 0 6px; }
.ab-swipe button { padding: 5px 7px; display: inline-flex; align-items: center; }
.ab-swipe button svg { width: 17px; height: 17px; }
.ab-swipe button.on { background: #1A73E8; color: #fff; }
/* arrastar para o lado, como no WhatsApp: o bloco encurta e os ícones aparecem atrás dele, à direita (06/11) */
.ab-l { position: relative; }
.ab-l .ab-c { transition: margin-right .18s ease; }
.ab-l.sw .ab-c { margin-right: 196px; }
.ab-swipe { top: 0; right: 0; left: auto; z-index: 1; width: 192px; border-radius: 0 0 8px 8px; padding: 0 4px; box-shadow: none; background: #eef1f6; align-items: flex-start; justify-content: space-around; animation: none; }
.ab-swipe button { margin-top: 3px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
@media (max-width: 760px) { .ab-l.sw .ab-c { margin-right: 176px; } .ab-swipe { width: 172px; } .ab-swipe button { padding: 6px; } }
/* atalhos do Compromisso: almoço, pausa, deslocamento (06/11) */
.ag-tit-at { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ag-tit-at button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #d7dde6; background: #fff; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 13px; color: #374151; cursor: pointer; }
.ag-tit-at button svg { width: 15px; height: 15px; }
.ag-tit-at button:hover { border-color: #1A73E8; color: #1A73E8; }
.ag-tit-at button.on { background: #1A73E8; border-color: #1A73E8; color: #fff; }
/* três ícones só (06/11) */
.ab-l.sw .ab-c { margin-right: 144px; }
.ab-swipe { width: 140px; }
@media (max-width: 760px) { .ab-l.sw .ab-c { margin-right: 140px; } .ab-swipe { width: 136px; } }
/* os ícones ocupam a altura toda do horário: grande no de 2h30, pequeno no curtinho (Dr., 06/11) */
.ab-swipe { align-items: stretch; gap: 4px; padding: 3px 4px; box-sizing: border-box; }
.ab-swipe button { flex: 1; margin: 0; height: auto; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 8px; min-height: 16px; }
.ab-swipe button svg { width: 20px; height: 20px; }
/* Horários deste dia mais limpo e cabendo no celular (06/11) */
.ab-tit { display: inline-flex; align-items: center; gap: 6px; }
.ab-auto-l { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ab-topo { grid-template-columns: 1fr 1fr !important; gap: 10px; }
@media (max-width: 760px) {
  .ab-quadro { max-height: 52vh; }
  .ab-topo .campo label { font-size: 12px; }
  .ab-acoes { margin: 4px 0 6px; }
  .ab-acoes .btn { padding: 4px 10px; }
  .ab-auto-l .check { font-size: 13px; }
}
@media (max-width: 760px) { .ab-quadro { max-height: calc(100vh - 330px); } }
.ab-acoes { flex-wrap: wrap; }
.ab-fechar-dia { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #b42318; border-color: #f1c4c0; }
.ab-fechar-dia svg { width: 14px; height: 14px; }
.ab-acoes .btn.contorno.ab-fechar-dia { color: #b42318; border-color: #f1c4c0; }
.ab-acoes .btn.contorno.ab-fechar-dia:hover { background: #fdecec; }
/* escala do sábado no alto do dia (06/11) */
.ag-di.ag-escala { background: #e8f0fe; color: #1a4fa0; border-left: 3px solid #1A73E8; display: flex; align-items: center; gap: 5px; font-weight: 600; }
.ag-di.ag-escala svg { width: 13px; height: 13px; flex: none; }
.ag-cel-escala { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #e8f0fe; color: #1a4fa0; font-size: 12px; font-weight: 600; }
.ag-cel-escala svg { width: 12px; height: 12px; }
.ag-cel-fechado.so-botoes { background: transparent; padding: 0; justify-content: flex-end; }
.ab-obs { margin: 10px 0 4px; }
.ag-cel-fechado.aberto { justify-content: flex-end; }
.ag-cel-fechado .ag-cel-fbts { display: flex; flex: none; gap: 14px; justify-content: flex-end; }
.ag-cel-fechado.aberto .ag-cel-fbts { flex: 1; }
/* prioridade quando o outro doutor divide o horário (06/11) */
.ag-h-tag { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-left: 8px; padding: 1px 6px; border-radius: 999px; vertical-align: 1px; }
.ag-h-tag.melhor { background: #e6f4ea; color: #1e7e34; }
.ag-h-tag.evite { background: #fdf0e1; color: #a85b00; }
/* 07/11 (Dr., no iPhone: "a grade onde tem as datas, no Clinicorp ela é bem dividida; aqui tá meio bagunçado"): grade com
   linhas claras em todos os dias, sem listras; dia fechado com cinza bem leve; feriado escrito em vermelho; dia de outro mês
   branco com o número apagado; a marca de horários pequena no canto */
.ag-cel-grade { border-top: 1px solid #D9DEE5; }
.ag-cel-dia { border-right: 1px solid #D9DEE5 !important; border-bottom: 1px solid #D9DEE5 !important; }
.ag-cel-dia:nth-child(7n) { border-right: 0 !important; }
.ag-cel-dia.fora:not(.sel) { background: #fff !important; color: #C3C9D2; }
.ag-cel-dia.fora:not(.sel) .n { color: #C3C9D2; }
.ag-cel-dia.fechado:not(.sel), .ag-cel-dia.feriado:not(.sel), .ag-cel-dia.feriado.fechado:not(.sel) { background: #F6F7F9 !important; }
.ag-cel-dia.fechado:not(.sel) .n { color: #8A94A3; }
.ag-cel-dia:not(.sel) .ag-cel-fer { color: #8A94A3 !important; font-weight: 600; letter-spacing: .02em; }
.ag-cel-marca { min-width: 22px; height: 18px; line-height: 18px; font-size: 11px; padding: 0 6px; right: 4px; bottom: 4px; }
.ag-cel-cab span { border-left: 0; font-weight: 600; }
/* 07/11 (Dr., no iPhone: "deixa as margens tanto do lado direito quanto do lado esquerdo mais folgado"): 16 dos dois lados */
@media (max-width:760px){
  .ag-cel-mes{margin-left:16px;margin-right:16px}
  .ag-cel-horarios{margin-left:16px;margin-right:16px}
  .ag-barra{padding-left:14px;padding-right:14px}
  .ag-cel-profs{padding-left:16px!important;padding-right:16px!important}
}
/* bonequinho: alguém trabalha nesse dia fora do normal (escala do sábado ou pedido aceito) */
.ag-cel-gente { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--azul-suave); color: var(--azul); display: flex; align-items: center; justify-content: center; }
.ag-cel-gente .ic { width: 11px; height: 11px; stroke-width: 2.4; }
.ag-cel-dia.sel .ag-cel-gente { background: rgba(255,255,255,.2); color: #fff; }
/* 07/11: o título curto (nov/26) nunca é cortado; ele é pequeno de propósito */
@media (max-width:760px){ .ag-titulo{flex:0 0 auto;overflow:visible} .ag-titulo .ct{white-space:nowrap} }
/* 07/11 (Dr.: "deixa com o mesmo design do botão de clínica fechada... e embaixo o botão maior escrito sem horários, como se
   fosse um agendamento normal, com um ícone em marca d'água") */
.ag-cel-escala { display: flex !important; align-items: center; gap: 8px !important; margin: 6px 0 4px !important; padding: 8px 10px !important; border-radius: 10px !important;
  background: #E4E9F0 !important; color: #334155 !important; font-size: 13px !important; font-weight: 400 !important; }
.ag-cel-escala svg { width: 16px !important; height: 16px !important; flex: none; color: #64748B; }
.ag-cel-escala b { color: #334155 !important; margin-left: 0 !important; }
.ag-cel-livre { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 64px; padding: 0 16px !important; margin: 0 0 8px !important;
  border: 1px solid var(--linha-2) !important; border-radius: 8px; background: #fff; color: var(--tinta-2) !important; font-size: 15px !important; }
.ag-cel-livre svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; color: var(--azul); opacity: .12; }
/* 07/11 (Dr.: "deixa os botões do mesmo tamanho... quando está tudo do mesmo tamanho dá uma sensação de organização"):
   escala, clínica fechada e sem horários com a mesma largura, altura mínima, cantos e margem */
.ag-cel-escala, .ag-cel-fechado:not(.aberto):not(.so-botoes), .ag-cel-livre {
  box-sizing: border-box; min-height: 56px; border-radius: 10px !important; padding: 8px 12px !important; margin: 0 0 8px !important; }
.ag-cel-diacab .ag-cel-escala { width: calc(100% + 8px); flex-basis: calc(100% + 8px) !important; max-width: none; margin: 6px -2px 2px !important; }
.ag-cel-livre svg { width: 40px; height: 40px; }
/* 07/11: dia em que um doutor fechou a agenda dele: cadeado pequeno no canto de baixo */
.ag-cel-trava { position: absolute; left: 4px; bottom: 4px; color: #8A94A3; display: flex; }
.ag-cel-trava .ic { width: 12px; height: 12px; }
.ag-cel-dia.sel .ag-cel-trava { color: #fff; }
/* 07/11 (Dr.: "o que eu falei para deixar no mesmo tamanho"): na tela estreita a "Clínica fechada" quebra em 3 linhas;
   as três faixas usam a mesma altura, a da maior */
.ag-cel-escala, .ag-cel-fechado:not(.aberto):not(.so-botoes), .ag-cel-livre { min-height: 72px; line-height: 1.35; }
/* 07/11: aviso de consulta desmarcada, em amarelo e numa faixa só */
.ag-desm-aviso { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 4px 0 10px; border: 1px solid #F1D48A; background: #FFF8E1; border-radius: 10px; color: #6B4E00; }
.ag-desm-aviso > .ic { width: 20px; height: 20px; flex: none; color: #B07D00; }
.ag-desm-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ag-desm-tx b { font-size: 14px; }
.ag-desm-tx small { font-size: 12.5px; color: #7A6122; }
.ag-desm-aviso .btn.ag-btn-remarcar { flex: none; background: #B07D00; border-color: #B07D00; color: #fff; height: 34px; padding: 0 12px; }
/* 07/11 (Dr.: a barra de cima passava da margem do calendário): barra, filtros e calendário na mesma linha de 16; o número
   do alarme fica dentro da margem */
@media (max-width:760px){
  .ag-barra{padding-left:16px!important;padding-right:16px!important}
  .ag-alarme{margin-right:6px}
}
/* 07/11 (Dr.: "acho grande esse botão"): Finalizar menor, o número num selo */
.ag-pend-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#A12828;color:#fff;font-size:11px;font-weight:700}
@media (max-width:760px){
  .ag-pend{padding:3px 6px 3px 8px;font-size:12px;gap:5px;height:28px}
  .ag-pend .ic{width:14px;height:14px}
}
/* 07/11 (Dr.: "filtros pode ser apenas o ícone"; "nessa página existem várias duplicidades... o que é necessário e o que não é"):
   no celular, Filtros vira só o funil; na visão Mês a gaveta não repete o calendário (a grade já é o calendário) nem os
   profissionais (os botões Todos/Jefferson/Janderson já estão na tela); "atualizado" e a frase do placar saem */
@media (max-width:760px){
  .ag-btn-lado .rot{display:none}
  .ag-btn-lado{width:38px;height:34px;padding:0;justify-content:center}
  .ag-tela.ag-v-mes .ag-lado .ag-mini,.ag-tela.ag-v-mes .ag-lado .ag-caixa.destaque{display:none}
  .ag-lado .ag-atualizado,.ag-lado .ag-placar-nota{display:none}
}
@media (max-width:760px){ .ag-lado{padding-left:16px!important;padding-right:16px!important} }
/* 07/11 (Dr.: duplicidade da barra do dia; "+" dentro da barrinha, mais arredondada; parte de cima "muito apertado... um
   pouquinho mais de folga"; gaveta só com o que faz sentido) */
.ag-cel-hcab { display: flex; align-items: center; gap: 8px; }
.ag-hcab-dt { font-weight: 700; }
.ag-hcab-hoje { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; }
.ag-hcab-mais { width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; }
.ag-hcab-mais .ic { width: 20px; height: 20px; }
.ag-cel-diacab.so-escala { margin: 0; padding: 0; border: 0; }
.ag-cel-diacab.so-escala:empty { display: none; }
@media (max-width:760px){
  .ag-cel-horarios .ag-cel-hcab { border-radius: 14px; margin: 0 0 10px; padding: 10px 10px 10px 16px; }
  .ag-cel-horarios { border-radius: 0 !important; overflow: visible !important; }
  .ag-barra { row-gap: 10px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .ag-cel-profs { padding-top: 10px !important; padding-bottom: 10px !important; }
  .ag-cel-mes { margin-top: 10px !important; }
  .ag-lado .ag-caixa.placar { display: none; }
}
.ag-hcab-menu .ic { width: 18px; height: 18px; }
.ag-dia-menu { display: flex; flex-direction: column; gap: 10px; }
.ag-dia-menu .btn { justify-content: flex-start; height: 46px; }
/* no celular, a linha só com "Mudar os horários · Fechar" (dia aberto) sai: as ações estão no "⋯" da barra do dia */
@media (max-width:760px){ .ag-cel-horarios.do-dia .ag-cel-fechado.aberto { display: none; } }
/* 07/11 (Dr., no iPhone: "ajusta esses ícones ali em cima, que está desalinhado"): a data esticava (flex:1) e jogava
   as setas para longe dela. Agora: data e setas juntas; Hoje e a engrenagem encostados à direita, a engrenagem
   na mesma coluna do despertador da linha de baixo. */
@media(max-width:760px){
  .ag-barra .ag-titulo{flex:none}
  .ag-barra .ag-ant{margin-left:2px}
  .ag-barra .ag-hoje{margin-left:auto}
  .ag-barra .ag-engr{margin-right:4px}
}