/* GERADO por ds/scripts/build.mjs a partir de src/ui/periodo.module.css, do commit a7ae40a.
   Não edite aqui: edite a fonte e rode o script de novo. */
/* O seletor de período: atalho à esquerda, dois meses à direita, uma linha de rodapé.
   ⛔ Sem "Comparar" — e por isso sem os 140 px de vão que ele deixava (Alex, 21/09/2026). */

.envolve { position: relative; display: inline-block; }

.gatilho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h);
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-control);
  color: var(--text-primary);
  font-size: var(--text-ui);
  white-space: nowrap;
  transition: background-color var(--dur-cor) linear, transform var(--dur-toque) var(--ease);
}
.gatilhoSm { height: var(--control-h-sm); font-size: var(--text-caption); padding: 0 12px; }
.gatilho:active { transform: translateY(1px); }
.gatilhoAberto { background: var(--surface-dark); color: var(--text-on-dark); }
.seta { transition: transform var(--dur-mover) var(--ease); }
.setaAberta { transform: rotate(180deg); }

.painel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  /* ⚠️ `1fr` num painel de largura AUTOMÁTICA resolve para zero: não há espaço livre a dividir,
     e a coluna do calendário sumia inteira. A largura vem do conteúdo dos dois meses. */
  grid-template-columns: 172px max-content;
  background: var(--white);
  border-radius: var(--radius-card-sm);
  /* Mesma borda da gaveta: branca sobre card branco, sem sombra (24/09/2026). */
  border: 1px solid var(--border-outline);
  overflow: hidden;
  animation: abreGaveta var(--dur-gaveta) var(--ease);
  transform-origin: top right;
}

/* ── Atalhos ─────────────────────────────────────────────────────────────── */

.atalhos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  /* A coluna dos atalhos é o degrau 2 do painel branco: com o card cinza ela era o próprio card. */
  background: var(--surface-inset);
  border-right: 1px solid var(--border-divider);
}
.atalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  color: var(--text-primary);
  text-align: left;
  transition: background-color var(--dur-cor) linear;
}
.atalhoOn, .atalhoOn:hover { background: var(--sel-bg); color: var(--lime-ink); font-weight: var(--weight-medium); }

/* ── Calendário ──────────────────────────────────────────────────────────── */

.calendario { padding: 14px 16px 10px; }
.meses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mes { min-width: 0; }
.mesTopo { display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; align-items: center; margin-bottom: 8px; }
.mesNome { text-align: center; font-size: var(--text-caption); font-weight: var(--weight-medium); }
.navMes {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  transition: background-color var(--dur-cor) linear;
}
.navMes:disabled { opacity: .3; cursor: not-allowed; }
.navVazia { display: block; }

.malha { display: grid; grid-template-columns: repeat(7, 30px); gap: 2px; }
.semana {
  height: 22px;
  display: grid;
  place-items: center;
  font-size: var(--text-micro);
  color: var(--text-tertiary);
}
.dia {
  height: 30px;
  display: grid;
  place-items: center;
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-celula);
  color: var(--text-primary);
  transition: background-color var(--dur-cor) linear, color var(--dur-cor) linear;
}
.dia:disabled { color: var(--ink-150); cursor: not-allowed; }
/* O miolo do intervalo é o acento claro; as pontas são a tinta, que é o que se agarra com o olho. */
.diaDentro { background: var(--sel-bg); border-radius: 0; }
.diaInicio { border-radius: var(--radius-celula) 0 0 var(--radius-celula); }
.diaFim { border-radius: 0 var(--radius-celula) var(--radius-celula) 0; }
.diaInicio.diaFim { border-radius: var(--radius-celula); }
.diaInicio, .diaFim { background: var(--surface-dark); color: var(--text-on-dark); font-weight: var(--weight-medium); }
.diaHoje { outline: 1px solid var(--border-outline); outline-offset: -1px; }

/* ── Rodapé: uma linha, e nenhum vão ─────────────────────────────────────── */

.pe {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--border-divider);
}
.peTexto { font-size: var(--text-caption); color: var(--text-secondary); }
.peAcoes { display: inline-flex; align-items: center; gap: 8px; }
.cancelar, .aplicar {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  transition: background-color var(--dur-cor) linear, transform var(--dur-toque) var(--ease);
}
.cancelar { background: var(--surface-control); color: var(--text-primary); }
.aplicar { background: var(--surface-dark); color: var(--text-on-dark); }
.aplicar:disabled { opacity: .4; cursor: not-allowed; }
.cancelar:active, .aplicar:active:not(:disabled) { transform: translateY(1px); }

@media (max-width: 720px) {
  /* No estreito o painel vira uma coluna: os atalhos em cima, rolando na horizontal. */
  .painel { grid-template-columns: minmax(0, 1fr); width: 92vw; right: auto; left: 0; max-width: 92vw; }
  .atalhos { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-divider); scrollbar-width: none; }
  .atalhos::-webkit-scrollbar { display: none; }
  .atalho { white-space: nowrap; }
  .meses { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .malha { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (hover: hover) {
  .gatilho:hover { background: var(--gray-250); }
  .gatilhoAberto:hover { background: var(--surface-dark-hover); color: var(--text-on-dark); }
  .atalho:hover { background: var(--surface-control-on-card); }
  .navMes:hover:not(:disabled) { background: var(--surface-control-on-card); color: var(--text-primary); }
  .dia:hover:not(:disabled) { background: var(--surface-control-on-card); }
  .diaInicio:hover, .diaFim:hover { background: var(--surface-dark-hover); }
  .cancelar:hover { background: var(--gray-250); }
  .aplicar:hover:not(:disabled) { background: var(--surface-dark-hover); }
}

/* ── O campo de data: o mesmo gatilho, com cara de CAMPO ───────────────────
   Ele mora dentro de um `Campo`, ao lado de `Entrada` e `Selecao`, então ocupa a linha inteira e
   tem a altura e a borda dos outros campos — não a de um filtro. */
.gatilhoCampo {
  display: flex; width: 100%; justify-content: flex-start;
  height: var(--control-h); padding: 0 14px; gap: 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-outline);
  background: var(--surface-inset);
  font-size: var(--text-ui);
}
.gatilhoCampo .seta { margin-left: auto; }
.gatilhoVazio { color: var(--text-quaternary); }
/* ⛔ Um mês só: a grade de duas colunas do painel de período (atalhos + calendário) não vale
   aqui, e sem isto a malha de 7×30 px era espremida em 174 px — "sex" e "sáb" ficavam fora da
   caixa. Uma coluna, largura do conteúdo, e ancorado à ESQUERDA, que é onde o campo começa. */
.painelUm {
  grid-template-columns: max-content;
  width: max-content;
  right: auto;
  left: 0;
  transform-origin: top left;
}