/*
 * Checklist ESEN — telas/agenda.css (#/agenda) — segue o DESIGN.md: painéis brancos sem contorno,
 * ação azul, badges sem borda, números tabulares, alvos de 44 px no toque.
 */
.agenda-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-5); }
.agenda-visoes { display: inline-flex; padding: 3px; gap: 2px; background: var(--cor-superficie-3); border-radius: var(--raio-2); }
.agenda-visao {
  min-width: 72px; height: 34px; padding: 0 var(--esp-3); border-radius: 5px; color: var(--cor-texto-2);
  font-size: var(--fs-corpo); line-height: 20px; font-weight: var(--peso-medio);
  transition: background-color var(--dur-rapida), color var(--dur-rapida);
}
.agenda-visao:hover { color: var(--cor-texto); }
.agenda-visao[aria-pressed="true"] { background: var(--cor-superficie-1); color: var(--cor-texto); box-shadow: 0 1px 2px rgba(27, 36, 48, 0.12); }
.agenda-visao:focus-visible { outline: var(--borda-foco) solid var(--cor-foco); outline-offset: 1px; }
.agenda-nav { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.agenda-periodo { margin-left: var(--esp-2); font-size: 17px; line-height: 24px; font-weight: var(--peso-forte); white-space: nowrap; }
.agenda-filtros { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-left: auto; }
.agenda-filtro { min-width: 200px; }
.agenda-filtro .campo__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Item de OS */
.agenda-lista { display: grid; gap: var(--esp-2); }
.agenda-os {
  display: grid; gap: 2px; padding: var(--esp-3); border-radius: var(--raio-2); background: var(--cor-superficie-1);
  color: inherit; text-decoration: none; border: var(--borda-largura) solid var(--cor-borda-sutil);
  transition: border-color var(--dur-rapida), background-color var(--dur-rapida);
}
.agenda-os:hover { border-color: var(--cor-destaque); }
.agenda-os:focus-visible { outline: var(--borda-foco) solid var(--cor-foco); outline-offset: 2px; }
.agenda-os__linha { display: flex; align-items: center; gap: var(--esp-2); }
.agenda-os__codigo { font-size: 12px; line-height: 16px; color: var(--cor-texto-3); }
.agenda-os__critico { display: inline-flex; color: var(--cor-perigo-texto); }
.agenda-os__titulo { font-weight: var(--peso-medio); color: var(--cor-texto); }
.agenda-os__local, .agenda-os__resp { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-os__resp { color: var(--cor-texto-3); }
.agenda-os__status { margin-top: var(--esp-1); }
.agenda-os--compacto { padding: var(--esp-2); }
.agenda-os--compacto .agenda-os__titulo { font-size: 13px; line-height: 18px; }

/* Dia: grupos por responsável */
.agenda-dia { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--esp-4); align-items: start; }
.agenda-grupo { padding: var(--esp-4); }
.agenda-grupo__cab { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.agenda-grupo__nome { font-size: 15px; line-height: 20px; font-weight: var(--peso-forte); }
.agenda-grupo__meta { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }
.agenda-dia .agenda-os { background: var(--cor-fundo); border-color: transparent; }
.agenda-dia .agenda-os:hover { border-color: var(--cor-destaque); }

/* Semana: 7 colunas */
.agenda-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--esp-2); align-items: start; }
.agenda-coluna { min-width: 0; min-height: 240px; padding: var(--esp-2); background: var(--cor-superficie-1); border-radius: var(--raio-3); }
.agenda-coluna--hoje { box-shadow: inset 0 0 0 2px var(--cor-destaque); }
.agenda-coluna__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); padding: var(--esp-1) var(--esp-1) var(--esp-2); }
.agenda-coluna__dia { display: inline-flex; align-items: baseline; gap: 6px; min-height: 32px; padding: 0 var(--esp-1); border-radius: var(--raio-2); color: var(--cor-texto); }
.agenda-coluna__dia:hover { color: var(--cor-destaque-texto); }
.agenda-coluna__dia:focus-visible { outline: var(--borda-foco) solid var(--cor-foco); outline-offset: 1px; }
.agenda-coluna__semana { font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-medio); color: var(--cor-texto-3); }
.agenda-coluna__num { font-size: 18px; line-height: 24px; font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.agenda-coluna--hoje .agenda-coluna__num { color: var(--cor-destaque-texto); }
.agenda-coluna__conta { font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-medio); color: var(--cor-texto-3); font-variant-numeric: tabular-nums; }
.agenda-coluna__vazio { padding: var(--esp-2) var(--esp-1); font-size: var(--fs-legenda); color: var(--cor-texto-3); }

/* Mês: calendário */
.agenda-mes { padding: var(--esp-2); }
.agenda-mes__semana, .agenda-mes__grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.agenda-mes__semana span { padding: var(--esp-2); font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-medio); color: var(--cor-texto-3); }
.agenda-mes__dia {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 92px; padding: var(--esp-2);
  border-radius: var(--raio-2); background: var(--cor-fundo); text-align: left; color: var(--cor-texto);
  transition: background-color var(--dur-rapida), box-shadow var(--dur-rapida);
}
.agenda-mes__dia:hover { background: var(--cor-destaque-fundo); }
.agenda-mes__dia:focus-visible { outline: var(--borda-foco) solid var(--cor-foco); outline-offset: 1px; }
.agenda-mes__dia--fora { background: transparent; color: var(--cor-texto-3); }
.agenda-mes__dia--hoje { box-shadow: inset 0 0 0 2px var(--cor-destaque); }
.agenda-mes__num { font-size: 13px; line-height: 18px; font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; }
.agenda-mes__dia--hoje .agenda-mes__num { color: var(--cor-destaque-texto); font-weight: var(--peso-forte); }
.agenda-mes__conta { margin-top: auto; font-size: 13px; line-height: 18px; color: var(--cor-texto-2); }
.agenda-mes__conta strong { font-size: 20px; line-height: 24px; font-weight: var(--peso-forte); color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.agenda-mes__pontos { display: flex; gap: 3px; }
.agenda-ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.agenda-ponto--perigo { background: var(--cor-perigo); }
.agenda-ponto--processo { background: var(--cor-processo); }
.agenda-ponto--neutro { background: var(--cor-texto-3); }
.agenda-ponto--atencao { background: var(--cor-atencao-texto); }
.agenda-ponto--sucesso { background: var(--cor-sucesso); }
.agenda-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); margin-top: var(--esp-2); font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-2); }
.agenda-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.agenda-nota { margin-top: var(--esp-3); font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }

/* Notebook: semana em 7 colunas estreitas — esconde o local */
@media (max-width: 1279px) { .agenda-semana .agenda-os__local { display: none; } }

/* Toque / celular */
@media (max-width: 1023px) {
  .agenda-barra { gap: var(--esp-3); }
  .agenda-visoes { width: 100%; }
  .agenda-visao { flex: 1; height: 44px; }
  .agenda-nav { width: 100%; }
  .agenda-periodo { flex: 1; font-size: 16px; text-align: right; white-space: normal; }
  .agenda-filtros { width: 100%; margin-left: 0; }
  .agenda-filtro { flex: 1 1 160px; min-width: 0; }
  .agenda-semana { grid-template-columns: minmax(0, 1fr); }
  .agenda-coluna { min-height: 0; }
  .agenda-coluna__dia { min-height: 44px; }
  .agenda-semana .agenda-os__local { display: block; }
  .agenda-dia { grid-template-columns: minmax(0, 1fr); }
  .agenda-mes { padding: var(--esp-1); }
  .agenda-mes__semana, .agenda-mes__grade { gap: 2px; }
  .agenda-mes__semana span { padding: var(--esp-1); text-align: center; }
  .agenda-mes__dia { min-height: 56px; padding: var(--esp-1); align-items: center; }
  .agenda-mes__os { display: none; }
  .agenda-mes__conta { margin-top: 0; }
  .agenda-mes__conta strong { font-size: 15px; line-height: 20px; }
  .agenda-mes__pontos { display: none; }
  .agenda-os__local, .agenda-os__resp { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
}

/* Badge dentro de colunas estreitas: reticências em vez de cortar */
.agenda-os__status .badge { max-width: 100%; }
.agenda-os__status .badge > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.agenda-mes__dia--com:not(.agenda-mes__dia--fora) { background: var(--cor-destaque-fundo); }
.agenda-mes__dia--com:not(.agenda-mes__dia--fora):hover { background: #DCE7FA; }
@media (max-width: 1023px) {
  .agenda-filtro { flex: 1 1 100%; }
  .agenda-coluna:not(:has(.agenda-lista)) { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--esp-2); }
  .agenda-coluna:not(:has(.agenda-lista)) .agenda-coluna__cab { padding: 0; }
  .agenda-coluna__vazio { padding: 0; }
  .agenda-semana { gap: var(--esp-2); }
}

/* Semana: cada cartão cabe na própria coluna (texto longo quebra ou vira reticências, nunca empurra a coluna vizinha);
   as 7 colunas têm a mesma largura e a mesma altura. */
.agenda-semana { align-items: stretch; }
.agenda-lista { grid-template-columns: minmax(0, 1fr); }
.agenda-lista > li { min-width: 0; }
.agenda-os { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.agenda-os > * { min-width: 0; }
.agenda-os__linha { min-width: 0; }
.agenda-os__codigo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-os__titulo { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.agenda-semana .agenda-os__status .badge { height: auto; min-height: var(--altura-badge); padding-top: 2px; padding-bottom: 2px; white-space: normal; text-align: left; }
.agenda-semana .agenda-os__status .badge > span { overflow: visible; }
.agenda-semana .agenda-os__status { display: flex; align-items: flex-start; gap: var(--esp-1); }
.agenda-semana .agenda-os__status .agenda-os__critico { margin-top: 4px; }
/* Colunas estreitas (até 1439 px): o status fica só com cor + texto, para "Não iniciado" caber numa linha */
@media (min-width: 1024px) and (max-width: 1439px) {
  .agenda-semana .agenda-os__status .badge > .icone { display: none; }
  .agenda-semana .agenda-os__status .badge { padding-left: var(--esp-2); }
}
/* Cliente em primeiro lugar no cartão da OS (até 2 linhas) */
.agenda-os__cliente { font-weight: var(--peso-forte); color: var(--cor-texto); overflow-wrap: break-word; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agenda-os--compacto .agenda-os__cliente { font-size: 13px; line-height: 18px; }
.agenda-os__cliente + .agenda-os__titulo { font-weight: var(--peso-medio); color: var(--cor-texto-2); }
.agenda-os--compacto .agenda-os__cliente + .agenda-os__titulo { font-size: 12px; line-height: 16px; }

/* ===== Mês: tarefas dentro de cada dia (cliente + serviço + cor do status), como na Semana ===== */
.agenda-mes__dia { position: relative; min-width: 0; align-items: stretch; }
.agenda-mes__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-1); }
.agenda-mes__abrir { display: inline-flex; align-items: center; min-height: 24px; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
/* o número do dia "cobre" a célula: clicar no espaço vazio abre a visão Dia */
.agenda-mes__abrir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.agenda-mes__abrir:focus-visible { outline: none; }
.agenda-mes__dia:has(.agenda-mes__abrir:focus-visible) { outline: var(--borda-foco) solid var(--cor-foco); outline-offset: 1px; }
.agenda-mes__qtd { font-size: 11px; line-height: 16px; color: var(--cor-texto-3); font-variant-numeric: tabular-nums; }
.agenda-mes__itens { display: grid; gap: 3px; min-width: 0; margin-top: 2px; }
.agenda-mes__itens > li { min-width: 0; }
.agenda-mes__tarefa {
  position: relative; z-index: 1; display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: start; gap: 6px;
  padding: 4px 6px; border-radius: var(--raio-1); background: var(--cor-superficie-1); color: var(--cor-texto); text-decoration: none;
  border: var(--borda-largura) solid var(--cor-borda-sutil);
}
.agenda-mes__tarefa:hover { border-color: var(--cor-destaque); }
.agenda-mes__tarefa:focus-visible { outline: var(--borda-foco) solid var(--cor-foco); outline-offset: 1px; }
.agenda-mes__tarefa .agenda-ponto { margin-top: 5px; }
.agenda-mes__tarefa-texto { display: flex; flex-direction: column; min-width: 0; }
.agenda-mes__tarefa-cli, .agenda-mes__tarefa-tipo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-mes__tarefa-cli { font-size: 12px; line-height: 16px; font-weight: var(--peso-forte); }
.agenda-mes__tarefa-tipo { font-size: 11px; line-height: 14px; color: var(--cor-texto-2); }
.agenda-mes__mais { position: relative; z-index: 1; align-self: flex-start; padding: 2px 4px; border: 0; background: none; border-radius: var(--raio-1);
  font: inherit; font-size: 12px; line-height: 16px; font-weight: var(--peso-medio); color: var(--cor-destaque-texto); cursor: pointer; }
.agenda-mes__mais:hover { text-decoration: underline; text-underline-offset: 3px; }
.agenda-mes__mais:focus-visible { outline: var(--borda-foco) solid var(--cor-foco); outline-offset: 1px; }
@media (min-width: 1024px) {
  .agenda-mes__dia { min-height: 132px; }
  .agenda-mes__dia--com:not(.agenda-mes__dia--fora) { background: var(--cor-fundo); }
  .agenda-mes__dia--com:not(.agenda-mes__dia--fora):hover { background: var(--cor-destaque-fundo); }
  .agenda-mes__conta, .agenda-mes__pontos { display: none; }
}
@media (max-width: 1023px) {
  .agenda-mes__itens, .agenda-mes__mais, .agenda-mes__qtd { display: none; }
  .agenda-mes__dia { align-items: center; }
  .agenda-mes__topo { justify-content: center; }
}