/* ------------------------------------------------------------------ as gavetas (560 px) */

.gaveta.ag-gaveta { width: min(560px, 100vw); animation: ag-gaveta-entra .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes ag-gaveta-entra {
  from { transform: translateX(104%); }
  to { transform: translateX(0); }
}
/* O fundo da gaveta da Agenda fica desfocado, como na v2. */
.cortina.para-o-lado:has(.ag-gaveta) { background: rgba(14, 29, 24, .29); backdrop-filter: blur(2px); } /* véu verde-escuro */
.ag-gaveta .gv-topo { align-items: center; }
.ag-gaveta-titulo { display: grid; gap: 4px; flex: 1; min-width: 0; }
.ag-gaveta-titulo .ag-sobrelinha { font-size: var(--texto-selo); letter-spacing: .09em; }
.ag-gaveta-titulo b { color: var(--ag-gaveta-titulo); font-size: 18px; }
.ag-gaveta .gv-topo .x {
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 9px;
  background: var(--ag-fechar);
  color: var(--ag-fechar-texto);
  font-size: 21px;
}
/* DUAS COLUNAS: os pares da v2 lado a lado; o resto ocupa a linha inteira. */
.ag-gaveta .gv-corpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: start;
}
.ag-gaveta .gv-corpo > * { grid-column: 1 / -1; }
.ag-gaveta .gv-corpo > [data-campo="situacao"],
.ag-gaveta .gv-corpo > [data-campo="prioridade"],
.ag-gaveta .gv-corpo > [data-campo="comeca_em"],
.ag-gaveta .gv-corpo > [data-campo="termina_em"],
.ag-gaveta .gv-corpo > [data-campo="contato_id"],
.ag-gaveta .gv-corpo > [data-campo="negocio_id"],
.ag-gaveta .gv-corpo > [data-campo="local"],
.ag-gaveta .gv-corpo > [data-campo="link"],
.ag-gaveta.ag-nova .gv-corpo > [data-campo="responsavel_id"],
.ag-gaveta.ag-configurar .gv-corpo > [data-campo="nome"],
.ag-gaveta.ag-configurar .gv-corpo > [data-campo="responsavel_id"],
.ag-gaveta.ag-configurar .gv-corpo > [data-campo="formato"],
.ag-gaveta.ag-configurar .gv-corpo > [data-campo="duracao_minutos"],
.ag-gaveta.ag-configurar .gv-corpo > [data-campo="intervalo_minutos"],
.ag-gaveta.ag-configurar .gv-corpo > [data-campo="aviso_minimo_horas"],
.ag-gaveta.ag-configurar .gv-corpo > [data-campo="dias_a_frente"] { grid-column: auto; }
.ag-gaveta .campo { margin: 0; }
.ag-gaveta .campo input,
.ag-gaveta .campo select { height: 39px; }
.ag-escondido { display: none; }
.ag-tipos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ag-tipos button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 5px;
  border: 1px solid var(--ag-tipo-borda);
  border-radius: 9px;
  background: var(--ag-cartao);
  color: var(--ag-tipo-texto);
  font: 700 var(--texto-pp) Inter, sans-serif;
  cursor: pointer;
}
.ag-tipos button b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: var(--ag-tipo-icone);
  color: var(--ag-tipo-icone-texto);
  font-size: var(--texto-selo);
}
.ag-tipos button b svg {
  width: 18px;
  height: 18px;
}
.ag-tipos button.ativa { border-color: var(--ag-escolha-borda); background: var(--ag-escolha); color: var(--ag-escolha-texto); }
.ag-tipos button.ativa b { background: var(--ag-escolha-icone); color: var(--ag-escolha-icone-texto); }

/* AS AÇÕES RÁPIDAS, no corpo, com a pergunta ali mesmo. */
.ag-rapidas { display: grid; gap: 9px; margin-top: 6px; padding-top: 15px; border-top: 1px solid var(--ag-rapidas-linha); }
.ag-rapidas-titulo { color: var(--ag-apagado); font-size: var(--texto-pp); font-weight: 700; }
.ag-rapidas-botoes { display: flex; flex-wrap: wrap; gap: 7px; }
.ag-rapidas-botoes[hidden] { display: none; }
.ag-rapidas-botoes button {
  padding: 7px 10px;
  border: 1px solid var(--ag-rapida-borda);
  border-radius: 7px;
  background: var(--ag-cartao);
  color: var(--ag-rapida-texto);
  font: 700 var(--texto-pp) Inter, sans-serif;
  cursor: pointer;
}
.ag-rapidas-botoes button.perigo { border-color: var(--ag-perigo-borda); background: var(--ag-perigo); color: var(--ag-perigo-texto); }
.ag-rapidas-pergunta { padding: 11px 12px; border: 1px solid var(--ag-pergunta-borda); border-radius: 10px; background: var(--ag-pergunta); }
.ag-rapidas-pergunta p { margin: 0 0 9px; color: var(--ag-pergunta-texto); font-size: 11px; }
.ag-rapidas-pergunta > div { display: flex; gap: 7px; }

/* A PÁGINA DE AGENDAMENTO na gaveta: prévia do link, endereço com o começo fixo, horários,
 * dias em pílulas e o interruptor de disponível. */
.ag-previa {
  display: grid;
  gap: 3px;
  padding: 11px;
  border: 1px solid var(--ag-previa-borda);
  border-radius: 11px;
  background: var(--ag-previa);
}
.ag-previa span { color: var(--ag-apagado); font-size: var(--texto-pp); font-weight: 700; }
.ag-previa a { overflow: hidden; color: var(--ag-previa-link); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ag-endereco { gap: 0; flex-wrap: nowrap; }
.ag-endereco > span {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 8px;
  border: 1px solid var(--ag-divisa);
  border-right: 0;
  border-radius: 9px 0 0 9px;
  background: var(--ag-prefixo);
  color: var(--ag-prefixo-texto);
  font-size: 11px;
  white-space: nowrap;
}
.ag-endereco input { flex: 1; min-width: 0; border-radius: 0 9px 9px 0 !important; }
.ag-rotulo-livre { display: block; margin-bottom: 6px; color: var(--ag-rotulo-livre); font-size: 11px; font-weight: 700; }
.ag-faixa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.ag-faixa label { display: grid; gap: 4px; color: var(--ag-rotulo-livre); font-size: var(--texto-pp); font-weight: 600; }
.ag-faixa input {
  height: 39px;
  padding: 0 10px;
  border: 1px solid var(--ag-divisa);
  border-radius: 9px;
  background: var(--ag-cartao);
  color: var(--ag-campo-texto);
  font: inherit;
}
.ag-pilulas { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.ag-pilulas button {
  padding: 8px 2px;
  border: 1px solid var(--ag-divisa);
  border-radius: 7px;
  background: var(--ag-cartao);
  color: var(--ag-pilula-texto);
  font: 600 var(--texto-pp) Inter, sans-serif;
  cursor: pointer;
}
.ag-pilulas button.ativa { border-color: var(--ag-pilula-ativa-borda); background: var(--ag-pilula-ativa); color: var(--ag-pilula-ativa-texto); font-weight: 800; }
/* O INTERRUPTOR: a caixa da gaveta vira chave, e o rótulo continua dizendo o que ela faz. */
.ag-configurar [data-campo="ativa"] { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ag-configurar [data-campo="ativa"] input {
  appearance: none;
  position: relative;
  flex: none;
  width: 31px;
  height: 18px;
  margin: 0;
  border-radius: 99px;
  background: var(--ag-chave);
  cursor: pointer;
  transition: background .2s;
}
.ag-configurar [data-campo="ativa"] input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff; /* branco */
  transition: left .2s;
}
.ag-configurar [data-campo="ativa"] input:checked { background: #2a8062; } /* verde */
.ag-configurar [data-campo="ativa"] input:checked::after { left: 15px; }

/* ------------------------------------------------------------------ telas menores */

@media (max-width: 1250px) {
  .ag-metricas { grid-template-columns: repeat(2, 1fr); }
  .ag-busca { max-width: none; flex-basis: 260px; }
  .ag-vista { margin-left: 0; }
  /* NO NOTEBOOK a lateral desce para baixo da semana, e a semana fica com a largura toda. */
  .ag-conteudo { grid-template-columns: minmax(0, 1fr); }
  .ag-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-left: 0; border-top: 1px solid var(--ag-linha); }
}
@media (max-width: 850px) {
  .ag-topo p { display: none; }
  .ag-metricas { gap: 8px; }
  .ag-metrica { min-height: 92px; padding: 13px; }
  .ag-metrica strong { font-size: 18px; }
  .ag-conteudo { grid-template-columns: 1fr; }
  .ag-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-left: 0; border-top: 1px solid var(--ag-linha); }
  .ag-barra > select,
  .ag-busca { width: 100%; max-width: none; }
  .ag-navegar,
  .ag-vista { width: 100%; }
  .ag-vista button { flex: 1; }
  .ag-lista { overflow-x: auto; }
  .ag-lista > header,
  .ag-linha { min-width: 720px; }
}
@media (max-width: 580px) {
  .ag-topo h2 { font-size: 22px; }
  .ag-topo-acoes .btn.principal { display: none; }
  .ag-metricas { grid-template-columns: 1fr 1fr; }
  .ag-principal { padding: 9px; }
  .ag-lado { grid-template-columns: 1fr; }
  /* A gaveta em uma coluna, o rodapé sem "Cancelar" (o × fecha) e os dias 4 por linha. */
  .ag-gaveta .gv-corpo { grid-template-columns: 1fr; }
  .ag-gaveta .gv-corpo > * { grid-column: 1 / -1 !important; }
  .ag-gaveta .gv-pe .btn[data-fechar] { display: none; }
  .ag-pilulas { grid-template-columns: repeat(4, 1fr); }
  .ag-faixa { grid-template-columns: 1fr; }
}

/* Sem o bloco do título (15/10): só os botões do topo, à direita, colados no conteúdo. */
.ag-topo.ag-so-acoes { justify-content: flex-end; margin-bottom: 12px; }

/* OS CARTOES COMPACTOS, IGUAIS NAS TRES TELAS (Henrique, 15/10: "deixa compacto nas tres"):
 * o nome a esquerda e o numero a direita na mesma linha, a frase pequena embaixo. */
.ag-metrica {
  min-height: 0;
  padding: 10px 14px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
}
.ag-metrica span { grid-column: 1; margin-bottom: 0; font-size: 11.5px; }
.ag-metrica strong { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; line-height: 1; }
.ag-metrica small {
  grid-column: 1; margin-top: 0; font-size: var(--texto-pp);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* O CARTÃO DO RECORTE (22/10/2026): o cartão clicado abre a Lista com o que ele conta e
 * fica marcado — borda no verde da moldura, também no passar do mouse. */
.ag-metrica.ativa,
.ag-metrica.ativa:hover { border-color: var(--sag-green, #15866d); box-shadow: inset 0 0 0 1px var(--sag-green, #15866d); } /* verde */