.modal-content.modal-calendar{ max-width: 520px; }

.cal-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}

.cal-title{
  flex: 1;
  text-align:center;
  font-weight: 700;
}

.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-dow{
  text-align:center;
  font-weight: 700;
  opacity: .8;
  padding: 6px 0;
}

.cal-day{
  border: 1px solid rgba(0,0,0,.25);
  background:#fff;
  height: 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}

.cal-day.muted{ opacity:.35; cursor: default; }
.cal-day.weekend{ background:#ffd1d8; }          /* rosa */
.cal-day.weekend.muted{ background:#ffe6ea; }     /* rosa pálido */
.cal-day.holiday{ background:#ff6b6b; color:#fff; } /* vermelho */
.cal-day.vacation{ background:#caa06a; color:#000; } /* castanho */

.cal-day.selected{
  outline: 3px solid rgba(60,90,200,.5);
}

/* Topo do calendário: não deixar fugir para fora */
.modal-content.modal-calendar{
  overflow-x: hidden;
}

.cal-top{
  flex-wrap: wrap;                 /* permite quebrar em ecrãs estreitos */
  justify-content: center;
}

.cal-title{
  flex: 1 1 180px;                 /* título encolhe/expande */
  min-width: 160px;
}

/* Botões do topo mais pequenos */
.cal-top .btn-pill{
  padding: 6px 10px;
  font-size: 14px;
}

/* Se quiseres o Fechar ainda mais pequeno (apenas o último botão) */
.cal-top button[data-close="modalCalendar"]{
  border-radius: 10px;   /* retangular arredondado */
  padding: 6px 14px;
  min-width: 90px;       /* cabe “Fechar” */
  white-space: nowrap;
}
/* Modal do calendário mais compacto */
.modal-content.modal-calendar{
  max-width: 360px;     /* era 520px */
  padding: 10px;
}
/* Dias mais pequenos */
.cal-day{
  height: 30px;         /* era 46px */
  font-size: 12px;
}
/* Menos espaço entre colunas/linhas */
.cal-grid{
  gap: 2px;             /* era 6px */
}
.cal-dow{
  padding: 2px 0;       /* era 6px */
  font-size: 12px;
}