/* Painel · agenda (usa os tokens de admin.css) */

/* ── barra de controles ── */
.agenda-barra{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:12px}
.agenda-vistas{display:inline-flex; border:1px solid var(--border-2); border-radius:var(--raio-sm); overflow:hidden; background:var(--surface)}
.agenda-vistas .botao{border:0; border-radius:0; background:transparent; color:var(--ink-soft)}
.agenda-vistas .botao + .botao{border-left:1px solid var(--border-2)}
.agenda-vistas .botao[aria-pressed="true"]{background:var(--gold-wash); color:var(--acento); font-weight:600}
.agenda-vistas .botao:focus-visible{outline-offset:-3px}
.agenda-nav{display:inline-flex; gap:6px}
.agenda-seta-voltar svg{transform:scaleX(-1)}
select.entrada.agenda-filtro{width:auto; min-width:170px; max-width:100%}
.agenda-legenda{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 12px; padding:0; list-style:none; font-size:12.5px; color:var(--ink-soft)}
.agenda-legenda li{display:inline-flex; align-items:center; gap:7px}
.agenda-amostra-fora{display:inline-block; width:16px; height:11px; border-radius:3px; background:var(--bg); border:1px solid var(--border-2); flex:none}
/* amostra da legenda: a mesma borda e o mesmo ícone do atendimento na grade */
.agenda-amostra{display:inline-flex; align-items:center; justify-content:center; width:24px; height:16px; border:1px solid var(--border-2); border-left:3px solid var(--gold); border-radius:3px; background:var(--elev); flex:none}
.agenda-amostra--confirmado{border-left-color:var(--ok)}
.agenda-amostra--realizado{border-left-color:var(--info)}
.agenda-amostra--faltou{border-left-color:var(--perigo)}
.agenda-amostra--cancelado{border-style:dashed; border-left-color:var(--ink-dim); background:var(--surface)}
.agenda-amostra .agenda-icone-status{margin:0}
.agenda-dica{margin:0 0 10px}

/* ── grade da semana e do dia ── */
.agenda-rolagem{overflow-x:auto; border:1px solid var(--border); border-radius:var(--raio); background:var(--surface); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
.agenda-grade{--agenda-hora:52px; --agenda-evento-min:22px; --agenda-folga:4px; --col-min:0px; min-width:calc(56px + var(--dias) * var(--col-min))}
.agenda-grade--semana{--col-min:108px}
.agenda-cabeca, .agenda-corpo{display:grid; grid-template-columns:56px repeat(var(--dias), minmax(0, 1fr))}
.agenda-cabeca{background:var(--bg-2); border-bottom:1px solid var(--border); border-radius:var(--raio) var(--raio) 0 0}
.agenda-dia-cab{display:flex; align-items:center; justify-content:center; min-width:0; padding:5px 4px; border-left:1px solid var(--border)}
.agenda-dia-botao{display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; min-height:48px; padding:4px; border:0; border-radius:var(--raio-sm); background:none; color:var(--ink-soft); font:inherit; cursor:pointer}
.agenda-dia-botao:hover{background:var(--elev); color:var(--ink-2)}
.agenda-dia-sem{font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.agenda-dia-num{display:grid; place-items:center; min-width:30px; height:30px; padding:0 5px; border-radius:999px; font:600 16px/1 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums}
.agenda-dia-cab--hoje .agenda-dia-sem{color:var(--acento); font-weight:600}
.agenda-dia-cab--hoje .agenda-dia-num{background:var(--gold); color:#15171B}
.agenda-dia-titulo{padding:8px 10px; font-weight:600; color:var(--ink); text-align:center}
.agenda-dia-cab--hoje .agenda-dia-titulo{color:var(--acento)}

.agenda-horas{min-width:0}
.agenda-hora-rotulo{height:var(--agenda-hora); padding:3px 8px 0 0; text-align:right; font-size:11.5px; color:var(--ink-dim); font-variant-numeric:tabular-nums; border-top:1px solid transparent}
.agenda-coluna{position:relative; min-width:0; border-left:1px solid var(--border)}
.agenda-coluna--hoje{background:rgba(201,162,75,.05)}
:root[data-tema="claro"] .agenda-coluna--hoje{background:rgba(201,162,75,.08)}
.agenda-slot{display:block; width:100%; height:calc(var(--agenda-hora) / 2); margin:0; padding:0; border:0; border-top:1px solid transparent; background:transparent; cursor:pointer}
.agenda-slot--hora{border-top-color:var(--border)}
.agenda-slot:first-child{border-top-color:transparent}
.agenda-slot--fora{background:var(--bg)}
.agenda-slot:hover{background:var(--gold-wash); box-shadow:inset 0 0 0 1px var(--gold-line)}
.agenda-slot:focus-visible{outline-offset:-2px}

.agenda-agora{position:absolute; left:0; right:0; z-index:2; height:2px; margin-top:-1px; background:var(--perigo); pointer-events:none}
.agenda-agora::before{content:""; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--perigo)}

.agenda-evento{position:absolute; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-height:var(--agenda-evento-min);
  padding:3px 6px 3px 8px; overflow:hidden; border:1px solid var(--border-2); border-left:3px solid var(--gold); border-radius:6px;
  background:var(--elev); color:var(--ink-2); font:inherit; font-size:12px; line-height:1.25; text-align:left; cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:background-color .12s ease}
.agenda-evento:hover{background:var(--elev-2); z-index:3}
.agenda-evento:focus-visible{outline-offset:-2px; z-index:3}
.agenda-evento > span{display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.agenda-evento-hora{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.agenda-evento-titulo{color:var(--ink-2); font-weight:500}
.agenda-evento-sub{color:var(--ink-soft); font-size:11.5px}
/* situação visível (ícone e nome), não só a cor da borda */
.agenda-icone-status{display:inline-block; flex:none; margin-right:4px; vertical-align:-1px}
.agenda-evento-situacao{font-weight:500; font-size:11px; color:var(--ink-2)}
.agenda-evento--confirmado{border-left-color:var(--ok)}
.agenda-evento--realizado{border-left-color:var(--info)}
.agenda-evento--faltou{border-left-color:var(--perigo)}
.agenda-evento--cancelado{border-left-color:var(--ink-dim); border-style:dashed; background:var(--surface)}
.agenda-evento--cancelado .agenda-evento-titulo{text-decoration:line-through}
/* atendimento curto: sem a linha de baixo; bem curto: hora e título na mesma linha */
.agenda-evento--curto .agenda-evento-sub, .agenda-evento--mini .agenda-evento-sub{display:none}
.agenda-evento--mini{flex-direction:row; align-items:center; gap:5px; padding-top:1px; padding-bottom:1px}
.agenda-evento--mini .agenda-evento-hora{flex:none}
.agenda-evento--mini .agenda-evento-titulo{flex:1; min-width:0}
/* bem curto: o ícone fica e o nome da situação sai (sobra espaço para o nome do lead; a dica e o leitor de tela dizem a situação) */
.agenda-evento--mini .agenda-evento-situacao{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* "+N" na semana: atendimentos que não cabem lado a lado (abre o dia) */
.agenda-mais{align-items:center; justify-content:center; padding:2px; border:1px solid var(--border-2); background:var(--bg-2); color:var(--ink); text-align:center}
.agenda-mais:hover{background:var(--elev-2)}
.agenda-mais-num{font-weight:600; font-size:13px; font-variant-numeric:tabular-nums}
.agenda-mais--todos{align-items:flex-start; justify-content:flex-start; padding:3px 5px; text-align:left}
.agenda-evento.agenda-mais--todos .agenda-mais-num{font-size:11.5px; font-weight:500; color:var(--ink-2); white-space:normal}

/* ── lista de próximos (página e tela inicial) ── */
.agenda-lista{display:flex; flex-direction:column; gap:18px}
.agenda-grupo-titulo{margin:0 0 8px; font:600 13.5px/1.3 var(--sans); color:var(--ink-soft)}
.agenda-grupo-titulo::first-letter{text-transform:uppercase}
.agenda-itens{display:flex; flex-direction:column; margin:0; padding:0; list-style:none; border:1px solid var(--border); border-radius:var(--raio); background:var(--surface); overflow:hidden}
.agenda-itens > li + li{border-top:1px solid var(--border)}
.agenda-item{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:6px 12px 6px 6px}
.agenda-item-abrir{flex:1 1 230px; display:flex; align-items:center; gap:14px; min-width:0; min-height:44px; padding:6px 8px; border:0; border-radius:var(--raio-sm);
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.agenda-item-abrir:hover{background:var(--elev)}
.agenda-item-hora{display:flex; flex-direction:column; flex:none; min-width:62px; font:600 15px/1.2 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums}
.agenda-item-hora span{font:400 12px/1.4 var(--sans); color:var(--ink-soft)}
.agenda-item-info{display:flex; flex-direction:column; min-width:0}
.agenda-item-titulo{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.agenda-item-sub{font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.agenda-item-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-left:auto}
.agenda-item--cancelado .agenda-item-titulo{text-decoration:line-through}
.agenda-proximos{margin-bottom:22px}
.agenda-proximos .vazio{padding:28px 16px}
.agenda-proximos .agenda-itens{border-radius:var(--raio-sm)}
.agenda-selo{flex:none}

/* ── formulário de atendimento (dentro do Modal) ── */
.modal-caixa:has(.agenda-editor){width:min(600px, calc(100vw - 24px)); max-height:calc(100svh - 24px); overflow:auto; overscroll-behavior:contain}
.agenda-editor{display:flex; flex-direction:column; gap:12px; margin-top:8px}
.agenda-editor-topo{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
.agenda-campos{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
.agenda-busca{gap:6px}
.agenda-lead-escolhido{display:flex; align-items:center; gap:10px; min-width:0; padding:8px 10px; border:1px solid var(--border-2); border-radius:var(--raio-sm); background:var(--surface)}
.agenda-lead-escolhido > span:not(.avatar){display:flex; flex-direction:column; flex:1; min-width:0}
.agenda-busca-lista{max-height:236px; margin:0; padding:0; list-style:none; overflow-y:auto; border:1px solid var(--border-2); border-radius:var(--raio-sm); background:var(--surface)}
.agenda-busca-lista > li + li{border-top:1px solid var(--border)}
.agenda-busca-item{display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:6px 10px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer}
.agenda-busca-item:hover{background:var(--elev)}
.agenda-busca-item:focus-visible{outline-offset:-2px}
.agenda-busca-item > span:last-child{display:flex; flex-direction:column; min-width:0}
.agenda-aviso-fora{color:var(--ink-soft)}
.agenda-conflito{padding:12px 14px; border:1px solid rgba(233,178,96,.5); border-radius:var(--raio-sm); background:rgba(233,178,96,.1); color:var(--ink-2)}
.agenda-conflito p{margin-bottom:10px}
.agenda-conflito div{display:flex; flex-wrap:wrap; gap:8px}
.agenda-status{display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--border)}
.agenda-status .ajuda{color:var(--ink-soft); font-weight:500}
.agenda-status-botoes{display:flex; flex-wrap:wrap; gap:8px}
.agenda-editor .modal-acoes{flex-wrap:wrap; margin-top:6px}
/* o aviso (toast) aparece por cima do formulário: só informa, então deixa o clique passar para os botões */
body:has(.agenda-editor) .avisos, body:has(.agenda-editor) .aviso{pointer-events:none}
.agenda-abrir-lead{margin-right:auto}
.agenda-pendente{margin:0; color:var(--ink-soft)}

/* ── atendimentos na ficha do lead ── */
.ficha-atendimentos{display:flex; flex-direction:column; gap:8px}
.ficha-atendimentos h3{font:600 14px/1.3 var(--sans); color:var(--ink)}
.ficha-atendimentos-vazio{font-size:13px; color:var(--ink-soft)}
.ficha-atendimentos-lista{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none}
.ficha-atendimento{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; width:100%; min-height:44px; padding:8px 12px;
  border:1px solid var(--border); border-left:3px solid var(--gold); border-radius:var(--raio-sm); background:var(--surface); color:inherit; font:inherit; text-align:left; cursor:pointer}
.ficha-atendimento:hover{background:var(--elev)}
.ficha-atendimento--confirmado{border-left-color:var(--ok)}
.ficha-atendimento--realizado{border-left-color:var(--info)}
.ficha-atendimento--faltou{border-left-color:var(--perigo)}
.ficha-atendimento--cancelado{border-left-color:var(--ink-dim)}
.ficha-atendimento--cancelado .ficha-atendimento-quando{text-decoration:line-through}
.ficha-atendimento-quando{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.ficha-atendimento-sub{flex:1 1 150px; min-width:0; font-size:12.5px; color:var(--ink-soft)}
.evento .marca--agenda{background:var(--ok)}

/* ── telas menores ── */
@media (max-width:860px){
  .agenda-grade--semana{--col-min:96px}
  .agenda-barra{gap:8px}
  select.entrada.agenda-filtro{flex:1 1 160px}
}
@media (max-width:380px){
  .agenda-campos{grid-template-columns:1fr}
  .agenda-item-acoes{margin-left:0}
}
/* toque: alvos de 44px (meia hora da grade = 44px) */
@media (pointer:coarse){
  .agenda-grade{--agenda-hora:88px; --agenda-evento-min:44px; --agenda-folga:2px}
  .agenda-item-abrir, .agenda-busca-item, .agenda-dia-botao, .ficha-atendimento{min-height:48px}
}