/* telas/barbearia/estilo.css — PoC Barbearia (#108). Só tokens do tema; cor com significado = status. */
.bb { width: 100%; max-width: 1360px; min-width: 0; box-sizing: border-box; }
.bb-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.bb-cabeca h2 { margin: 0 0 4px; }
.bb-sussurro { color: var(--muted); font-size: 13px; margin: 0; }
.bb-dia { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.bb-dia input { min-height: 44px; }
.bb-abas { display: flex; gap: 4px; margin: 16px 0; border-bottom: 1px solid var(--line); }
.bb-abas button { min-height: 44px; padding: 0 16px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font: inherit; }
.bb-abas button.ativa { color: var(--ink); border-bottom-color: var(--ds-accent); font-weight: 600; }
.bb-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.bb-agenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.bb-col { border: 1px solid var(--line); border-radius: 8px; padding: 12px; min-width: 0; }
.bb-col h3 { font-size: 15px; margin: 0 0 8px; }
.bb-col h3 small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.bb-slot { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--line); }
.bb-slot.bb-cancelado { opacity: .55; }
.bb-hora { font-variant-numeric: tabular-nums; font-weight: 600; }
.bb-hora span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.bb-quem { display: flex; flex-direction: column; min-width: 0; }
.bb-quem strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-estado { padding: 24px; border: 1px dashed var(--line); border-radius: 8px; }
.bb-estado p { margin: 0 0 8px; }
@media (max-width: 640px) { .bb-agenda { grid-template-columns: 1fr; } }
.bb-sandbox { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; color: var(--muted); font-size: 13px; }