/* Pecas especificas de cada tela. Cores so por variavel de base.css. */

.entrar { max-width: 360px; margin: 12vh auto 0; }

.busca { position: sticky; top: 0; z-index: 1; display: flex; gap: 8px; padding: 12px 0 8px; background: var(--fundo); }
.busca .campo__caixa { flex: 1; }

.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.numero { background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; }
.numero__valor { font-size: 22px; font-weight: 600; }

.barras { display: flex; align-items: flex-end; gap: 4px; height: 140px; border-bottom: 1px solid var(--borda); }
.barra { flex: 1; min-height: 3px; padding: 0; border: 0; border-radius: 4px 4px 0 0; background: var(--barra); cursor: pointer; }
.barra--escolhida { background: var(--marca); }
.barras__rotulos { display: flex; gap: 4px; font-size: 12px; color: var(--texto-fraco); }
.barras__rotulos span { flex: 1; text-align: center; }