/* Base dos produtos LabTech (jogos e sistemas): cor da marca, tarja de demonstração e botões grandes (toque). */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800;900&display=swap');

:root {
  --marca: #dc2626;
  --marca-escura: #991b1b;
  --marca-clara: #fee2e2;
  --tinta: #0f172a;
  --fundo: #f8fafc;
  --ok: #16a34a;
  --erro: #dc2626;
  --tarja: 40px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-tap-highlight-color: transparent;
}

/* Tarja fixa no topo */
.lt-tarja {
  position: fixed; inset: 0 0 auto 0; height: var(--tarja); z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 12px; background: #0f172a; color: #fff; font-size: 12px; font-weight: 600;
}
.lt-tarja a { color: #fff; text-decoration: none; opacity: .9; white-space: nowrap; }
.lt-tarja a:hover { opacity: 1; text-decoration: underline; }
.lt-tarja .lt-selo { background: #fbbf24; color: #0f172a; padding: 3px 8px; border-radius: 6px; font-weight: 800; letter-spacing: .04em; font-size: 10px; white-space: nowrap; }
.lt-tarja label { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.lt-tarja input[type=color] { width: 26px; height: 26px; border: 2px solid #fff; border-radius: 6px; padding: 0; background: none; cursor: pointer; }
.lt-palco { padding-top: var(--tarja); min-height: 100%; }
@media (max-width: 560px) { .lt-tarja .lt-some-cel { display: none; } }

/* Marca fictícia */
.lt-logo {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed var(--marca); color: var(--marca); border-radius: 12px;
  padding: 8px 14px; font-weight: 900; letter-spacing: .06em; font-size: 14px; background: #fff;
}

/* Botões */
.lt-btn {
  font: inherit; font-weight: 800; border: 0; cursor: pointer; border-radius: 14px;
  padding: 14px 26px; font-size: 18px; color: #fff; background: var(--marca);
  box-shadow: 0 6px 0 var(--marca-escura); transition: transform .08s, box-shadow .08s;
}
.lt-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--marca-escura); }
.lt-btn.sec { background: #fff; color: var(--tinta); box-shadow: 0 6px 0 #cbd5e1; border: 2px solid #e2e8f0; }
.lt-btn:disabled { opacity: .5; cursor: not-allowed; }

.lt-cartao { background: #fff; border-radius: 20px; box-shadow: 0 10px 40px rgba(15, 23, 42, .08); border: 1px solid #e2e8f0; }
.lt-centro { display: grid; place-items: center; text-align: center; }
.lt-esconde { display: none !important; }
input.lt-campo {
  font: inherit; font-size: 18px; padding: 12px 16px; border-radius: 12px; border: 2px solid #e2e8f0; width: 100%;
}
input.lt-campo:focus { outline: none; border-color: var(--marca); }