:root {
  --marca: #0F766E;
  --marca-rgb: 15, 118, 110;
  --escuro: #14232B;
  --fundo: #F3F6F7;
  --borda: #DDE5E8;
}
body { background: var(--fundo); color: var(--escuro); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--marca); }
.min-w-0 { min-width: 0; }
.btn-marca { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
.btn-marca:hover, .btn-marca:focus { background: var(--marca); border-color: var(--marca); color: #fff; filter: brightness(.9); }
.btn-marca:disabled { background: var(--marca); border-color: var(--marca); color: #fff; opacity: .55; }
.btn-outline-marca { border-color: var(--marca); color: var(--marca); font-weight: 600; background: transparent; }
.btn-outline-marca:hover, .btn-outline-marca:focus { background: var(--marca); border-color: var(--marca); color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--marca); box-shadow: 0 0 0 .2rem rgba(var(--marca-rgb), .18); }
.form-check-input:checked { background-color: var(--marca); border-color: var(--marca); }

.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 1px 2px rgba(20,35,43,.04); }
.titulo-pagina { font-weight: 700; letter-spacing: -.01em; }

/* Topo */
.barra-painel { background: var(--escuro); }
.barra-painel .navbar-brand { font-weight: 800; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: .5rem; }
.barra-painel .nav-link { color: rgba(255,255,255,.72); border-radius: 8px; padding: .45rem .8rem; white-space: nowrap; }
.barra-painel .nav-link:hover { color: #fff; }
.barra-painel .nav-link.ativo { color: #fff; background: rgba(255,255,255,.12); }
.barra-painel .btn { white-space: nowrap; }
.marca-logo { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--marca); color: #fff; font-size: .95rem; }
.marca-logo-grande { width: 56px; height: 56px; border-radius: 14px; font-size: 1.6rem; }
.marca-3d { color: #2DD4BF; }
.tela-acesso .marca-3d { color: var(--marca); }

/* Login */
.tela-acesso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.tela-acesso .cartao { width: 100%; max-width: 400px; padding: 2rem; }
.logo-texto { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }

/* Abas da fila */
.abas-fila { flex-wrap: nowrap; overflow-x: auto; gap: .35rem; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
.abas-fila .nav-link { white-space: nowrap; color: var(--escuro); background: #fff; border: 1px solid var(--borda); border-radius: 999px; font-weight: 600; }
.abas-fila .nav-link.active { background: var(--marca); border-color: var(--marca); color: #fff; }
.abas-fila .nav-todos { background: transparent; border-style: dashed; }
.abas-fila .contagem { display: inline-block; min-width: 1.5rem; padding: 0 .4rem; margin-left: .25rem; border-radius: 999px; background: rgba(20,35,43,.1); font-size: .8rem; text-align: center; }
.abas-fila .active .contagem { background: rgba(255,255,255,.25); }

/* Cartão de pedido */
.pedido-cartao { position: relative; background: #fff; border: 1px solid var(--borda); border-left: 5px solid var(--cor-etapa, var(--marca)); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(20,35,43,.04); }
.pedido-cartao.atrasado { border-color: #f1aeb5; border-left-color: #dc3545; background: #fffafa; }
.pedido-cliente { font-weight: 700; font-size: 1.1rem; color: var(--escuro); text-decoration: none; }
.pedido-cliente:hover { text-decoration: underline; }
.pedido-itens { color: #3b4a52; word-break: break-word; }
.obs-pedido { background: #f6f9fa; border: 1px dashed var(--borda); border-radius: 8px; padding: .35rem .6rem; color: #55656d; }
.pedido-foto, .foto-ref { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; border: 1px solid var(--borda); background: #eef2f3; }
.foto-ref { width: 120px; height: 120px; }
.badge-etapa { background: var(--cor-etapa, #6c757d); color: #fff; }
.pedido-posicao { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; width: 42px; flex-shrink: 0; }
.posicao-num { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--cor-etapa, var(--marca)); }
.btn-seta { border: 0; background: transparent; color: #8a99a1; padding: .15rem .5rem; border-radius: 8px; line-height: 1; }
.btn-seta:hover:not(:disabled) { background: #eef2f3; color: var(--escuro); }
.btn-seta:disabled { opacity: .25; }

/* Detalhe */
.tabela-itens th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7a82; font-weight: 600; white-space: nowrap; }
.historico li { padding: .5rem 0; border-bottom: 1px solid var(--borda); }
.historico li:last-child { border-bottom: 0; }

/* Formulário */
.item-linha { border: 1px solid var(--borda); border-radius: 12px; padding: .9rem; background: #fbfcfc; }
.foto-existente { width: 112px; cursor: pointer; }
.foto-existente img { width: 112px; height: 112px; object-fit: cover; border-radius: 12px; border: 2px solid var(--borda); }

@media (max-width: 575.98px) {
  .pedido-cartao { padding: .9rem; }
  .pedido-posicao { width: 34px; }
  .posicao-num { font-size: 1.25rem; }
}