:root {
    /* Paleta da marca Joka: azul-marinho e laranja */
    --azul: #0f2d6b;
    --azul-esc: #0a1f4d;
    --azul-claro: #e8eefb;
    --laranja: #f26b0f;
    --laranja-esc: #b04508;   /* texto laranja e hover: 5,6:1 sobre branco */
    --laranja-btn: #bf4e08;   /* fundo laranja com texto branco: 4,9:1 */
    --laranja-claro: #fff1e5;
    --cor-fundo: #f3f5fa;
    --cor-card: #fff;
    --cor-texto: #16213a;
    --cor-suave: #5f6b85;
    --cor-primaria: var(--azul);
    --cor-primaria-esc: var(--azul-esc);
    --cor-perigo: #b42318;
    --cor-aviso: #b54708;
    --cor-borda: #d5dbea;
    --raio: 8px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--cor-texto); background: var(--cor-fundo); }
a { color: var(--azul); }
a:hover { color: var(--laranja-esc); }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; color: var(--azul); padding-left: .6rem; border-left: 5px solid var(--laranja); }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; color: var(--azul); }

.topo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; padding: .4rem 1rem; background: #fff; border-bottom: 4px solid var(--laranja); box-shadow: 0 2px 8px rgba(15, 45, 107, .12); }
.topo a { color: var(--azul); text-decoration: none; }
.marca { display: flex; align-items: center; gap: .55rem; }
.marca img { display: block; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--laranja); }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-texto b { font-size: 1.55rem; font-weight: 900; letter-spacing: .02em; color: var(--azul); }
.marca-texto small { font-size: .78rem; font-weight: 800; letter-spacing: .22em; color: #fff; background: var(--laranja-btn); padding: .12rem .4rem; border-radius: 4px; margin-top: .15rem; }
.menu { display: flex; flex-wrap: wrap; gap: .1rem .3rem; flex: 1; }
.menu a { padding: .45rem .7rem; font-weight: 600; border-radius: var(--raio); }
.menu a:hover { background: var(--laranja-claro); color: var(--laranja-esc); }
.sair { display: flex; align-items: center; gap: .6rem; margin: 0; }
.quem { font-size: .9rem; color: var(--cor-suave); }
.btn-link { background: none; border: 0; color: var(--azul); text-decoration: underline; font: inherit; cursor: pointer; padding: .35rem 0; }
.btn-link:hover { color: var(--laranja-esc); }
.logo-grande { display: block; margin: 0 auto 1rem; max-width: 100%; height: auto; }

.pagina { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.card { background: var(--cor-card); border: 1px solid var(--cor-borda); border-top: 3px solid var(--azul); border-radius: var(--raio); padding: 1rem; margin-bottom: 1rem; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-top-color: var(--laranja); box-shadow: 0 2px 10px rgba(15, 45, 107, .15); }
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.num { font-size: 1.6rem; font-weight: 700; color: var(--azul); }
.suave { color: var(--cor-suave); font-size: .9rem; }

.aviso { padding: .7rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; border: 1px solid; }
.aviso-ok { background: #e6f4ea; border-color: #9fd3ae; }
.aviso-erro { background: #fdecea; border-color: #f1a9a2; color: var(--cor-perigo); }

label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
input, select, textarea { width: 100%; padding: .6rem .7rem; font: inherit; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: #fff; }
textarea { min-height: 5rem; }
.linha-form { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.btn { display: inline-block; padding: .65rem 1.1rem; border: 0; border-radius: var(--raio); background: var(--cor-primaria); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--laranja-esc); color: #fff; }
.btn-sec { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
.btn-sec:hover { background: var(--laranja-claro); color: var(--laranja-esc); border-color: var(--laranja-esc); }
.btn-perigo { background: var(--cor-perigo); }
.btn-perigo:hover { background: #8a1a11; }
.btn-peq { padding: .35rem .7rem; font-size: .9rem; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
form.inline { display: inline; }

.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--cor-card); }
th { background: var(--azul-claro); }
th, td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
th { font-size: .85rem; color: var(--azul); text-transform: uppercase; letter-spacing: .02em; }
td.dir, th.dir { text-align: right; white-space: nowrap; }

.selo { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #e5e7eb; }
.selo-aguardando_conferencia { background: var(--laranja-claro); color: var(--laranja-esc); }
.selo-disponivel { background: #dcf3e4; color: #14663a; }
.selo-pendente { background: #fde4e1; color: var(--cor-perigo); }
.selo-vendido { background: var(--azul-claro); color: var(--azul); }
.selo-baixado { background: #e5e7eb; color: #4b5563; }
.selo-defeito { background: #ffe8cc; color: var(--cor-aviso); }
.neg { color: var(--cor-perigo); }
.pos { color: #14663a; }

.fotos { display: flex; flex-wrap: wrap; gap: .6rem; }
.fotos figure { margin: 0; width: 130px; }
.fotos img { width: 130px; height: 130px; object-fit: cover; border-radius: var(--raio); border: 1px solid var(--cor-borda); }
.copiavel { white-space: pre-wrap; background: var(--laranja-claro); border: 1px dashed var(--laranja); border-radius: var(--raio); padding: .75rem; }

@media (min-width: 720px) { .pagina { padding: 1.5rem; } }

.centro { max-width: 420px; margin: 2rem auto; }
.estreito { max-width: 420px; }
.medio { max-width: 520px; }

/* Leitor de QR */
.scanner video { width: 100%; max-width: 480px; aspect-ratio: 4 / 3; background: #0a1f4d; border-radius: var(--raio); border: 3px solid var(--laranja); display: block; margin: 0 auto .6rem; object-fit: cover; }
.scanner-estado { text-align: center; color: var(--azul); font-weight: 600; min-height: 1.5rem; }
.scanner-estado.erro { color: var(--cor-perigo); }
.scanner .btn { display: block; margin: .5rem auto; font-size: 1.1rem; padding: .9rem 1.6rem; }
.menu a.destaque { background: var(--laranja-btn); color: #fff; }
.menu a.destaque:hover { background: var(--laranja-esc); color: #fff; }
.etiqueta-cod { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; letter-spacing: .06em; }

.btn-grande { display: block; text-align: center; font-size: 1.2rem; padding: 1rem; background: var(--laranja-btn); }
.btn-grande:hover { background: var(--laranja-esc); }

.filtro-linha th { background: #fff; padding: .35rem .4rem; text-transform: none; letter-spacing: 0; vertical-align: top; }
.filtro-linha input, .filtro-linha select { padding: .3rem .4rem; font-size: .85rem; font-weight: 400; min-width: 6rem; margin-bottom: .2rem; }
.filtro-linha th.dir input { text-align: right; max-width: 6.5rem; }
.nowrap { white-space: nowrap; }

/* ---- Acessibilidade e toque (revisão UI/UX) ---- */
.pular { position: absolute; left: -999px; top: 0; background: var(--azul); color: #fff; padding: .6rem 1rem; z-index: 50; border-radius: 0 0 var(--raio) 0; }
.pular:focus { left: 0; color: #fff; }
.btn, .btn-link, .menu a, select, label[for] { cursor: pointer; }
.btn, .menu a, a.card, input, select, textarea { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
button:disabled, .btn[disabled] { opacity: .6; cursor: progress; }
input:focus, select:focus, textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(242, 107, 15, .35); outline: none; }
/* Alvos de toque de pelo menos 44 px em telas de toque */
@media (pointer: coarse), (max-width: 720px) {
    .btn, .btn-peq, .btn-link, .menu a, .sair .btn-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-peq { padding: .55rem .9rem; }
    input, select, textarea { min-height: 44px; }
    td a { display: inline-block; padding: .68rem 0; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Cabeçalho no celular: logo + Sair na primeira linha, menu em faixa rolável embaixo */
@media (max-width: 720px) {
    .topo { gap: .2rem .8rem; padding: .4rem .8rem 0; }
    .marca { order: 1; }
    .sair { order: 2; margin-left: auto; }
    .menu { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: .2rem; padding-bottom: .3rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .menu::-webkit-scrollbar { display: none; }
    .menu a { flex: 0 0 auto; }
}

/* Câmera do item */
.camera { margin: .5rem 0 1rem; }
.camera video { width: 100%; max-width: 520px; aspect-ratio: 4 / 3; background: #0a1f4d; border-radius: var(--raio); border: 3px solid var(--laranja); display: block; margin: .6rem 0; object-fit: cover; }
.camera.flash video { filter: brightness(2.2); }
.camera-miniaturas { margin: .6rem 0; }
.camera-miniaturas figure { width: 120px; }
.camera-miniaturas img { width: 120px; height: auto; }
.camera [hidden] { display: none !important; }