/* RotaQR — tela da portaria (seleção de lote para o monitor) ---------------- */
:root {
  --verde-950: #0b2e22;
  --verde-900: #0f3d2e;
  --verde-700: #17694e;
  --ambar: #f0b24a;
  --texto: #eaf3ee;
  --texto-suave: #a8c0b3;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body.quiosque {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1000px 600px at 12% -10%, rgba(28, 125, 92, .3), transparent 65%),
    linear-gradient(165deg, var(--verde-950), var(--verde-900) 70%);
  color: var(--texto);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.oculto { display: none !important; }

.coluna {
  max-width: 860px; margin: 0 auto; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 100vh;
}

.topo-quiosque { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca-logo {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 13px; background: var(--verde-700); color: #d9f2e4;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.marca-texto strong { font-size: 1.2rem; }
.marca-texto span { color: var(--ambar); }
.marca-texto small { display: block; color: var(--texto-suave); font-size: .8rem; }

.status {
  border-radius: 999px; padding: 9px 18px;
  background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .16);
  font-weight: 700; font-size: .95rem;
}
.status.ativo { background: rgba(240, 178, 74, .16); border-color: var(--ambar); color: var(--ambar); }

.campo-busca {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .1);
  border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 12px; padding: 0 14px; color: var(--texto-suave);
}
.campo-busca:focus-within { border-color: var(--ambar); }
.campo-busca input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--texto); font: inherit; font-size: 1.02rem; padding: 13px 0;
}
.campo-busca input::placeholder { color: var(--texto-suave); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chip {
  flex: none; border: 1.5px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06); color: var(--texto);
  font: inherit; font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.chip:hover { background: rgba(255, 255, 255, .14); }
.chip.ativo { background: var(--ambar); border-color: var(--ambar); color: var(--verde-950); }

.lista {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px;
  align-content: start;
}
.lista::-webkit-scrollbar { width: 8px; }
.lista::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 8px; }

.item-lote {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .12);
  border-radius: 14px; padding: 16px;
  color: var(--texto); font: inherit; text-align: left; cursor: pointer;
  min-height: 66px; transition: background .15s, transform .06s, border-color .15s;
}
.item-lote:hover { background: rgba(255, 255, 255, .13); }
.item-lote:active { transform: scale(.98); }
.item-lote.no-monitor { border-color: var(--ambar); background: rgba(240, 178, 74, .14); }
.item-lote .cod {
  font-family: ui-monospace, Menlo, monospace; font-weight: 700;
  background: var(--verde-700); border-radius: 9px; padding: 6px 11px; white-space: nowrap;
}
.item-lote .info { flex: 1; min-width: 0; }
.item-lote .info small {
  display: block; color: var(--texto-suave); font-size: .84rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-lote .sel {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: none; place-items: center; color: var(--verde-950); background: var(--ambar);
}
.item-lote.no-monitor .sel { display: grid; }

.lista-vazia { grid-column: 1 / -1; color: var(--texto-suave); text-align: center; padding: 26px; }

.pe-quiosque { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ajuda { flex: 1; margin: 0; color: var(--texto-suave); font-size: .88rem; min-width: 220px; }
.btn-limpar {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08); color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
}
.btn-limpar:hover { background: rgba(255, 255, 255, .16); }

/* aviso flutuante */
.aviso {
  position: fixed; z-index: 30; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ambar); color: var(--verde-950);
  padding: 13px 22px; border-radius: 999px;
  font-weight: 800; font-size: 1rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  animation: avisoEntra .25s ease;
}
@keyframes avisoEntra { from { opacity: 0; transform: translate(-50%, 12px); } }