/* Calendário — Swiss Minimal: bordas finas de 1px, alinhamento rígido */

.cal {
  min-width: 0;
  border: var(--swiss-border) solid var(--brand-border);
  border-radius: var(--swiss-radius);
  background: var(--brand-surface);
  box-shadow: var(--swiss-shadow);
  overflow: hidden;
}

.cal__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-3); flex-wrap: wrap;
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--brand-border);
  background: var(--brand-surface-alt);
}
.cal__mes { display: flex; align-items: center; gap: var(--esp-2); }

/* Largura fixa de propósito: "Maio de 2026" e "Setembro de 2026" têm tamanhos
   bem diferentes, e sem isto a seta foge de debaixo do dedo a cada clique. */
.cal__mes strong {
  font-size: 15px; text-align: center;
  min-width: 142px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal__mes strong.cal__periodo { min-width: 232px; }

/* O atalho fica sempre no lugar; só apaga quando não há para onde ir */
.cal__mes .btn[disabled] { visibility: hidden; }

.cal__semana {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--brand-border);
}
.cal__semana span {
  padding: 7px var(--esp-2);
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--brand-secondary); text-align: center;
}

.cal__grade {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--brand-border);
  gap: 1px;
}

.dia {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; min-height: 118px;
  padding: 7px;
  background: var(--brand-surface);
  transition: background var(--transicao);
}
.dia--fora { background: var(--brand-surface-alt); }
.dia--fora .dia__num { color: var(--brand-secondary); }
.dia--fds { background: var(--brand-surface-alt); }
.dia--hoje { box-shadow: inset 0 0 0 2px var(--brand-primary); }

/* Sai até a borda da célula para virar faixa, não etiqueta solta */
.dia__cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  margin: -7px -7px 0; padding: 4px 7px;
  background: var(--cal-cabeca);
}
.dia__data { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.dia__num { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dia__sem {
  font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--brand-secondary);
}
.dia__add {
  width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--pill-radius);
  background: transparent; color: var(--brand-icon);
  cursor: pointer; opacity: 0;
  transition: opacity var(--transicao), background var(--transicao);
}
.dia:hover .dia__add, .dia__add:focus-visible { opacity: 1; }
.dia__add:hover { background: var(--brand-primary-soft); color: var(--brand-icon-hover); }

.dia__turnos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.turno-blk {
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--brand-border);
  border-radius: var(--swiss-radius);
  background: var(--brand-surface-alt);
  cursor: pointer; text-align: left;
  font: inherit;
  transition: border-color var(--transicao), background var(--transicao);
}
.turno-blk:hover { border-color: var(--brand-border-hover); background: var(--brand-surface); }
.turno-blk__cabeca {
  display: flex; align-items: flex-start; gap: 4px;
  min-width: 0;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand-secondary);
}
.turno-blk__titulo { min-width: 0; flex: 1 1 auto; }

/* Nome e horário, cada um numa linha e sem quebrar: um turno de nome comprido
   não pode deixar a caixa mais alta que a do dia ao lado. */
.turno-blk__tnome,
.turno-blk__thora {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.turno-blk__tnome { font-weight: 560; }
.turno-blk__thora { min-height: 1.3em; letter-spacing: .03em; }
.turno-blk__cabeca b { margin-left: auto; padding-left: 4px; flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.turno-blk--cheio .turno-blk__cabeca b { color: var(--brand-success); }
.turno-blk--sem .turno-blk__cabeca b { color: var(--brand-warning); }
.turno-blk__faixa {
  width: 3px; height: 9px; margin-top: 2px; border-radius: 2px; flex: none;
  background: var(--cor-turno, var(--brand-secondary));
}

/* Turno com cor ganha uma barra na lateral: lê-se de relance sem o calendário
   virar um vitral, que destoaria do resto do app. */
.turno-blk--cor { border-left: 3px solid var(--cor-turno); }
.gaveta-cor {
  width: 10px; height: 10px; flex: none;
  border-radius: 3px; background: var(--cor-turno);
}
/* A barrinha colorida tem 3px e o espaço depois dela 4px: recuando a coluna
   de nomes em 7px, tudo o que está dentro do bloco alinha com o nome do turno,
   e a cor fica sozinha na margem, marcando o turno. */
.turno-blk__nomes {
  display: flex; flex-direction: column; gap: 1px; margin-top: 2px;
  padding-left: 7px;
}
.turno-blk__nome {
  font-size: 12px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.turno-blk__falta { font-size: 11px; color: var(--brand-warning); padding-left: 7px; }

/* ---------- Visão da equipe ----------

   A caixa dos nomes ocupa sempre a altura das vagas do turno, cheia ou vazia:
   é o que faz todo dia do mês ter o mesmo tamanho, sem a grade pular de altura
   a cada semana. */

.turno-blk--fixo { cursor: default; }
.turno-blk--fixo .turno-blk__nomes { justify-content: flex-start; }
/* Turno sem ninguém tem a mesma caixa dos outros: o que muda é o "vago"
   dentro dela, não a borda. Tracejar picotava junto a barra de cor. */
.turno-blk--sem { background: var(--brand-surface-alt); }
/* "vago" diz o que o branco não dizia, na mesma cor das vagas abertas do app */
/* "vago" marcado por um traço vertical à esquerda e um fundo bem claro,
   na cor das vagas abertas. O traço e o respiro dele (2px + 4px) ficam no
   recuo da coluna de nomes, então a palavra começa na mesma linha dos
   nomes; à direita a faixa avança sobre o respiro do bloco (6px) e vai
   até a borda. */
.turno-blk__nome--vago {
  margin: 0 -6px 0 -6px; padding: 0 6px 0 4px;
  border-left: 2px solid var(--brand-warning);
  background: var(--brand-warning-soft);
  color: var(--brand-warning); font-style: italic;
}
.dia--alto .turno-blk__nome--vago { margin-right: -7px; padding-right: 7px; }

/* Semana: menos dias na tela, então cabe mais em cada um */
.dia--alto { min-height: 232px; }
.dia--alto .dia__cabeca { align-items: baseline; }
.dia--alto .turno-blk { padding: 5px 7px; }
.dia--alto .turno-blk__nome { font-size: 13px; line-height: 1.45; }

.pub-dia--hoje { box-shadow: inset 0 0 0 2px var(--brand-primary); }

/* Painel do dia (drawer — Swiss Minimal) */
.gaveta {
  position: fixed; inset: 0 0 0 auto; z-index: 65;
  width: min(430px, 100%);
  display: flex; flex-direction: column;
  border-left: var(--swiss-border) solid var(--brand-border);
  border-radius: var(--swiss-radius) 0 0 var(--swiss-radius);
  background: var(--brand-surface);
  box-shadow: -18px 0 42px #10182818;
}
.gaveta[hidden] { display: none; }
.gaveta__cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--brand-border);
}

/* Setas do dia e o fechar. flex-shrink:0 porque o título ao lado é longo
   ("Domingo, 2 de agosto") e espremeria os botões. */
.gaveta__navega {
  display: flex; align-items: center; gap: var(--esp-1);
  flex-shrink: 0;
}
.gaveta__corpo { padding: var(--esp-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--esp-5); }

.vaga {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border: var(--lista-border) solid var(--brand-border);
  border-radius: var(--lista-radius);
  background: var(--brand-surface);
  box-shadow: var(--lista-shadow);
  min-width: 0;
}
.vaga--livre { border-style: dashed; box-shadow: none; background: var(--brand-surface-alt); }
.vaga[draggable="true"] { cursor: grab; }
.vaga--arrastando { opacity: .45; }
.vaga--alvo { outline: 2px solid var(--brand-border-focus); outline-offset: 2px; }
/* As duas setas empilhadas, uma por cima da outra, à esquerda do nome.
   Gira só o desenho da seta, não o botão: girado, o fundo do hover de um
   invadia o outro. Cada um com o seu retângulo, separados por 2px. */
.vaga__ordem { display: flex; flex-direction: column; gap: 2px; flex: none; margin: -4px 0 -4px -6px; }
.vaga__ordem .bi { width: 24px; height: 18px; border-radius: 5px; }
.vaga__ordem .bi svg { transform: rotate(90deg); }
.vaga__ordem .bi[disabled] { background: transparent; opacity: .35; }
.vaga__corpo { min-width: 0; flex: 1 1 auto; }
.vaga__corpo strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vaga__corpo span { font-size: 12px; color: var(--brand-secondary); }

/* ---------- Página pública ---------- */

.publico { max-width: 1180px; margin: 0 auto; padding: var(--esp-5) var(--esp-4) var(--esp-7); }
/* Tudo centralizado e em linhas próprias: título, mês, legenda e controles.
   Deixá-los dividir a linha fazia a barra inteira mudar de lugar quando o
   subtítulo crescia, e a seta fugia de debaixo do dedo a cada clique. */
.publico__topo {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 2px;
  margin-bottom: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border: var(--swiss-border) solid var(--brand-border);
  border-radius: var(--swiss-radius);
  background: var(--brand-surface);
}
.publico__topo > * { min-width: 0; max-width: 100%; }
/* Fora da caixa do título e encostada à esquerda: a caixa fica só com o nome
   do local, e o controle vem logo antes do calendário, onde se usa. */
.publico__acoes {
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--esp-2); flex-wrap: wrap;
  margin-bottom: var(--esp-3);
}

/* A foto da unidade no alto da página da equipe */
.publico__foto {
  width: 48px; height: 48px; margin-bottom: 2px;
  border-radius: var(--lista-radius);
  object-fit: cover;
}

/* Lista do dia na versão pública (telas estreitas) */
.pub-dia {
  display: flex; gap: var(--esp-4); min-width: 0;
  padding: var(--esp-3) var(--esp-4);
  border: var(--lista-border) solid var(--brand-border);
  border-radius: var(--lista-radius);
  background: var(--brand-surface);
  box-shadow: var(--lista-shadow);
}
.pub-dia--fds { background: var(--brand-surface-alt); }
.pub-dia__data { flex: none; width: 54px; text-align: center; }
.pub-dia__data strong { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.pub-dia__data span { font-size: 11px; text-transform: uppercase; color: var(--brand-secondary); }
.pub-dia__turnos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pub-turno { display: flex; gap: var(--esp-3); min-width: 0; font-size: 13px; }
.pub-turno__nome { flex: none; width: 96px; color: var(--brand-secondary); font-size: 12px; }
.pub-turno__nomes { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }

@media (max-width: 768px) {
  .cal { display: none; }
  .cal--sempre { display: block; }
  .dia { min-height: 92px; }
}
@media (min-width: 769px) {
  .pub-lista { display: none; }
}

/* Margem zero: sem ela o navegador imprime o endereço do site no rodapé.
   O respiro da folha vem do corpo. */
@page { margin: 0; }

@media print {
  body { padding: 10mm; }
  .barra, .topo__acoes, .dia__add, .btn, .bi { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid var(--brand-border); }
}