/* Complemento do recepcao.css para a agenda. Só o que a tela de balcão não tinha:
   linha de agendamento, miniatura de mídia e etiqueta de status. */

.cresce { flex: 1; }

label.rotulado { display: flex; flex-direction: column; gap: 2px; }
label.rotulado span { font-size: 12px; font-weight: 700; color: var(--apagado); }

/* Um agendamento por linha, com a hora à esquerda em tamanho grande: a leitura do dia
   é "o que tem às 9h", não "quem é o cliente". */
.agendamento {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--borda);
}
.agendamento:last-child { border-bottom: none; }
.agendamento .hora {
  min-width: 76px;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.agendamento .hora small { display: block; font-size: 11px; font-weight: 600; color: var(--apagado); }
.agendamento .corpo { flex: 1; min-width: 0; }
.agendamento .corpo strong { font-size: 15px; }
.agendamento .meta { color: var(--apagado); font-size: 13px; margin-top: 2px; }
.agendamento .acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.agendamento .acoes button { padding: 7px 12px; font-size: 13px; }
.agendamento.CANCELADO { opacity: .55; }

.etiqueta {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; vertical-align: middle;
}
.etiqueta.AGENDADO { background: #fef3c7; color: #78350f; }
.etiqueta.CONFIRMADO { background: #dcfce7; color: #14532d; }
.etiqueta.CANCELADO { background: #fee2e2; color: #7f1d1d; }
.etiqueta.COMPARECEU { background: #dbeafe; color: #1e3a8a; }
.etiqueta.NAO_COMPARECEU { background: #e2e8f0; color: #334155; }
.etiqueta.PUBLICO { background: #ede9fe; color: #4c1d95; }

/* Mídia do cliente: é o insumo do orçamento, então precisa ser grande o suficiente para
   o dono decidir sem abrir cada arquivo. */
.midias-dono { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.midias-dono a { position: relative; display: block; }
.midias-dono img, .midias-dono video {
  width: 96px; height: 96px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--borda); background: #000;
}
.midias-dono .selo {
  position: absolute; left: 4px; bottom: 4px;
  background: rgba(15,23,42,.85); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
}

.janela {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--borda);
}
.janela:last-child { border-bottom: none; }
.janela .quando { min-width: 190px; font-weight: 600; }
.janela .faixa { font-variant-numeric: tabular-nums; }
.janela.bloqueio { color: var(--avaria); }
.janela button { padding: 6px 12px; font-size: 13px; }

.dia-semana {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--painel); cursor: pointer; font-size: 14px;
}
.dia-semana input { width: 18px; height: 18px; }

.link-publico {
  display: flex; align-items: center; gap: 8px;
  padding: 12px; margin: 10px 0;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; word-break: break-all;
}

.aviso-pendente {
  padding: 12px 14px; border-radius: 10px; margin-bottom: 12px;
  background: #fef3c7; color: #78350f; font-size: 14px; font-weight: 600;
}
.vazio { color: var(--apagado); padding: 18px 0; }