/* Planejamento no celular: menos altura gasta em controles,
   sem os quadros vazios de outros meses. */
@media (max-width: 820px) {
  /* Dias que nao pertencem ao mes deixam de ocupar espaco visual */
  /* Celulas vazias somem de vez: os dias fluem em sequencia.
     O alinhamento com as colunas se perde, por isso cada dia mostra
     a inicial da semana (ver js/planejamento-dias.js). */
  .calendar-grid .day.empty { display: none !important; }
  .calendar-grid .day-name { display: none !important; }
  .calendar-grid .day > strong { display: flex !important; justify-content: space-between; align-items: baseline; }
  .calendar-grid .day .pap-sem {
    font-size: 8.5px !important;
    opacity: .45 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
  }

  /* Controles lado a lado em vez de empilhados */
  .calendar-summary { padding: 10px !important; gap: 8px !important; }
  .calendar-toolbar {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .calendar-toolbar .dash-filter { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; }
  .calendar-toggle { display: flex !important; gap: 4px !important; }
  .calendar-toggle .ghost {
    padding: 6px 8px !important;
    font-size: 12px !important;
    min-height: 0 !important;
  }
  .calendar-nav button {
    padding: 6px 10px !important;
    font-size: 12px !important;
    min-height: 0 !important;
  }
}