/* ═══════════════════════════════════════════════════════════════════
   Agenda

   Arquivo próprio, e não mais um bloco em telas.css, por dois motivos: a
   grade tem regra suficiente para virar uma seção que ninguém acha, e uma
   tela nova não deveria exigir editar o arquivo em que todas as outras
   moram.

   Nenhuma cor nova. Tudo sai dos tokens — é o que faz a Agenda parecer
   parte do sistema em vez de um calendário colado por cima dele.
   ═══════════════════════════════════════════════════════════════════ */

.ag { --ag-hora: 48px; --ag-rot: 56px; }

/* ─────────── barra de navegação ─────────── */

.ag__barra {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e-3);
  margin-bottom: var(--e-4);
}

.ag__titulo {
  font-size: var(--t-md); font-weight: 650;
  margin-left: var(--e-2);
  white-space: nowrap;
}
/* Só a primeira letra. `capitalize` transformaria "14 de setembro" em
   "14 De Setembro" — em português o "de" é minúsculo, e a tela estava
   escrevendo errado o nome do mês em todas as visualizações. */
.ag__titulo::first-letter { text-transform: uppercase; }

.ag__carregando {
  font-size: var(--t-xs); color: var(--txt-3);
  margin-left: var(--e-2);
}

/* Controle segmentado: uma peça só, com o selecionado elevado. Três botões
   soltos diriam a mesma coisa e pareceriam três decisões, não uma. */
.ag__vistas {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--r);
}
.ag__vista {
  height: 26px; padding: 0 12px;
  font-size: var(--t-xs); font-weight: 600;
  color: var(--txt-2);
  background: transparent; border: 0; border-radius: var(--r-sm);
  cursor: pointer; transition: background var(--rapido), color var(--rapido);
}
.ag__vista:hover { color: var(--txt); }
.ag__vista.is-ativo {
  background: var(--superficie-3); color: var(--txt);
  box-shadow: var(--sombra-1);
}

.ag__cartao { padding: 0; overflow: hidden; }

/* ─────────── pílula de evento (mês e faixa de dia inteiro) ─────────── */

.ag-pilula {
  display: flex; align-items: baseline; gap: 6px; width: 100%;
  padding: 3px 6px; margin-bottom: 2px;
  font-size: var(--t-xs); text-align: left;
  background: var(--acento-fraco);
  border: 0; border-left: 2px solid var(--acento);
  border-radius: var(--r-sm);
  color: var(--txt); cursor: pointer;
  transition: background var(--rapido);
}
.ag-pilula:hover { background: var(--superficie-3); }
.ag-pilula__h {
  font-family: var(--fonte-num); font-size: 10px;
  color: var(--txt-2); flex: none;
}
.ag-pilula__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Evento que não nasceu aqui: presente, mas sem a cor da marca — a agenda
   mostra a verdade inteira, e a cor diz de onde cada coisa veio. */
.ag-pilula.is-externo { background: var(--superficie-2); border-left-color: var(--linha-forte); }
/* Cor do Google: a mesma que pinta a agenda de quem vai à reunião. Entra como
   borda e como fundo translúcido — as cores do Google são pastéis, feitas para
   fundo claro, e chapadas aqui apagariam o texto. */
.ag-pilula.tem-cor {
  border-left-color: var(--ev-cor);
  background: color-mix(in srgb, var(--ev-cor) 16%, transparent);
}
.ag-pilula.is-cancelado { opacity: .55; }
.ag-pilula.is-cancelado .ag-pilula__t { text-decoration: line-through; }

/* ─────────── mês ─────────── */

.ag-mes__cabeca {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--linha);
  background: var(--superficie-2);
}
.ag-mes__dia-rot {
  padding: 8px; text-align: center;
  font-size: var(--t-xs); font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--txt-3);
}

.ag-mes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(108px, auto);
}
.ag-mes__cel {
  padding: 5px; min-width: 0;
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.ag-mes__cel:nth-child(7n) { border-right: 0; }
/* Dia de outro mês continua clicável e continua mostrando evento: escondê-lo
   faria a reunião de segunda sumir na semana que começa no dia 30. */
.ag-mes__cel.is-fora { background: #00000018; }
.ag-mes__cel.is-fora .ag-mes__num { color: var(--txt-3); }
.ag-mes__cel.is-hoje { background: var(--acento-fraco); }

.ag-mes__num {
  display: block; margin-bottom: 4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  font-family: var(--fonte-num); font-size: var(--t-xs); font-weight: 650;
  color: var(--txt-2); background: transparent;
  border: 0; border-radius: var(--r-full); cursor: pointer;
}
.ag-mes__num:hover { background: var(--superficie-3); color: var(--txt); }
.ag-mes__cel.is-hoje .ag-mes__num { background: var(--acento); color: #fff; }

.ag-mes__lista { display: flex; flex-direction: column; }
.ag-mes__mais {
  padding: 2px 6px; font-size: 10px; text-align: left;
  color: var(--txt-3); background: transparent; border: 0; cursor: pointer;
}
.ag-mes__mais:hover { color: var(--acento); }

/* ─────────── semana e dia ─────────── */

.ag-grade {
  display: grid;
  grid-template-columns: var(--ag-rot) repeat(var(--ag-colunas), minmax(0, 1fr));
  max-height: calc(100vh - 260px);
  overflow: auto;
  overscroll-behavior: contain;
}

.ag-grade__canto {
  position: sticky; top: 0; left: 0; z-index: 3;
  background: var(--superficie-2);
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.ag-grade__canto--todo {
  top: 46px; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 6px;
  font-size: 10px; color: var(--txt-3); text-align: right; line-height: 1.1;
}

.ag-grade__cabeca {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 4px;
  background: var(--superficie-2);
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.ag-grade__dia-rot {
  font-size: 10px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .05em; color: var(--txt-3);
}
.ag-grade__dia-num {
  min-width: 24px; height: 24px;
  font-family: var(--fonte-num); font-size: var(--t-sm); font-weight: 650;
  color: var(--txt); background: transparent;
  border: 0; border-radius: var(--r-full); cursor: pointer;
}
.ag-grade__dia-num:hover { background: var(--superficie-3); }
.ag-grade__cabeca.is-hoje .ag-grade__dia-num { background: var(--acento); color: #fff; }
.ag-grade__cabeca.is-hoje .ag-grade__dia-rot { color: var(--acento); }

.ag-grade__todo {
  position: sticky; top: 46px; z-index: 1;
  min-height: 26px; padding: 3px;
  background: var(--superficie);
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.ag-grade__horas {
  position: sticky; left: 0; z-index: 1;
  background: var(--superficie);
  border-right: 1px solid var(--linha);
}
.ag-grade__hora {
  height: var(--ag-hora);
  position: relative;
}
.ag-grade__hora span {
  position: absolute; top: -7px; right: 6px;
  font-family: var(--fonte-num); font-size: 10px; color: var(--txt-3);
}
.ag-grade__hora:first-child span { display: none; }

.ag-grade__col {
  position: relative;
  border-right: 1px solid var(--linha);
}
.ag-grade__col.is-hoje { background: #FF5C3808; }

/* A linha de cada hora é a borda da célula vazia — que também é o alvo de
   clique para marcar. Duas responsabilidades no mesmo elemento porque são a
   mesma coisa vista de dois ângulos: a faixa daquela hora. */
.ag-grade__vago {
  height: var(--ag-hora);
  border-bottom: 1px solid var(--linha);
  cursor: pointer;
  transition: background var(--rapido);
}
.ag-grade__vago:hover { background: var(--superficie-2); }

.ag-bloco {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; gap: 1px;
  padding: 3px 6px; overflow: hidden;
  text-align: left;
  background: var(--superficie-3);
  border: 1px solid var(--acento);
  border-left: 3px solid var(--acento);
  border-radius: var(--r-sm);
  color: var(--txt); cursor: pointer;
  box-shadow: var(--sombra-1);
  transition: transform var(--rapido), box-shadow var(--rapido);
}
.ag-bloco:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); z-index: 4; }
.ag-bloco__h {
  font-family: var(--fonte-num); font-size: 10px; color: var(--txt-2);
  white-space: nowrap;
}
.ag-bloco__t {
  font-size: var(--t-xs); font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
}
.ag-bloco__c {
  font-size: 10px; color: var(--txt-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ag-bloco.is-externo { border-color: var(--linha-forte); border-left-color: var(--info); }
.ag-bloco.tem-cor {
  border-color: color-mix(in srgb, var(--ev-cor) 55%, transparent);
  border-left-color: var(--ev-cor);
  background: color-mix(in srgb, var(--ev-cor) 14%, var(--superficie-3));
}
.ag-bloco.is-cancelado { opacity: .5; }
.ag-bloco.is-cancelado .ag-bloco__t { text-decoration: line-through; }

/* Onde o relógio está agora. Some nos outros dias — uma linha "agora" numa
   coluna de terça-feira passada não significa nada. */
.ag-agora {
  position: absolute; left: 0; right: 0; z-index: 3;
  height: 0; border-top: 1px solid var(--erro);
  pointer-events: none;
}
.ag-agora i {
  position: absolute; left: -3px; top: -3px;
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--erro);
}

/* ─────────── painel de detalhe ─────────── */

.ag-det { display: flex; flex-direction: column; gap: var(--e-3); }
.ag-det__linha { display: grid; grid-template-columns: 108px 1fr; gap: var(--e-3); }
.ag-det__rot {
  font-size: var(--t-xs); font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--txt-3); padding-top: 2px;
}
.ag-det__val { font-size: var(--t-sm); min-width: 0; overflow-wrap: anywhere; }
.ag-det__val a { color: var(--acento); }
.ag-det__texto { white-space: pre-wrap; line-height: 1.6; color: var(--txt-2); }
.ag-det__gente { display: flex; flex-wrap: wrap; gap: 4px; }
.ag-det__id {
  font-family: var(--fonte-num); font-size: 10px; color: var(--txt-3);
  overflow-wrap: anywhere;
}

/* ─────────── telas menores ─────────── */

/* Prioridade é o desktop, onde a agenda é usada o dia inteiro. No tablet a
   semana continua inteira, mais apertada. Abaixo disso a semana passa a
   rolar na horizontal em vez de espremer sete colunas em 380 px — coluna de
   40 px não mostra reunião nenhuma, só mostra que existe uma. */
@media (max-width: 1100px) {
  .ag { --ag-rot: 44px; }
  .ag-bloco__c { display: none; }
}

@media (max-width: 760px) {
  .ag__barra { flex-direction: column; align-items: stretch; }
  .ag__titulo { margin-left: 0; font-size: var(--t-sm); }
  .ag__vistas { align-self: stretch; }
  .ag__vista { flex: 1; }

  .ag-grade { grid-template-columns: var(--ag-rot) repeat(var(--ag-colunas), minmax(96px, 1fr)); }
  .ag-mes { grid-auto-rows: minmax(76px, auto); }
  .ag-mes__cel { padding: 3px; }
  .ag-pilula__h { display: none; }

  .ag-det__linha { grid-template-columns: 1fr; gap: 2px; }
}


/* ─────────── paleta de cor no formulário ─────────── */

.cor-paleta { display: flex; flex-wrap: wrap; gap: 6px; }
.cor-opcao {
  width: 26px; height: 26px; padding: 0;
  border: 2px solid transparent; border-radius: var(--r-sm);
  background: var(--superficie-2);
  color: var(--txt-3); font-size: 12px; line-height: 1;
  cursor: pointer; transition: transform var(--rapido), border-color var(--rapido);
}
.cor-opcao:hover { transform: scale(1.12); }
.cor-opcao.is-ativo { border-color: var(--txt); }