/* Administração: desktop e tablet. Usa tokens e componentes. */

.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s-4); }
.login-form { width: min(380px, 100%); display: grid; gap: var(--s-4); }
.login-form h1 { font-size: 24px; }

.area { padding: var(--s-4); max-width: 1200px; margin: 0 auto; display: grid; gap: var(--s-4); }
.cabecalho { border-radius: var(--r-lg); border-bottom-width: 4px; }
.titulo-area { font-size: 24px; }

.grade { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s-4); align-items: start; }
.card h2 { font-size: 20px; margin-bottom: var(--s-3); }
.card h2.sub { margin-top: var(--s-6); }
.card h3 { margin: var(--s-6) 0 var(--s-2); }

.linha { display: flex; gap: var(--s-2); margin-bottom: var(--s-2); }
.linha .input { flex: 1; }

.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover { background: var(--acento-suave); }
.tabela tbody tr.ativa { background: var(--acento-suave); box-shadow: inset 4px 0 0 var(--acento); }
.tabela tbody tr[data-sem-clique] { cursor: default; }
.tabela tbody tr[data-sem-clique]:hover { background: transparent; }
.tabela .btn { min-height: 36px; padding: var(--s-1) var(--s-3); font-size: var(--tamanho-pequeno); }

.qr-linha { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.qr-linha img { background: var(--marca-caixa); padding: var(--s-2); border-radius: var(--r-md); }
.acoes { display: grid; gap: var(--s-2); }
.acoes .btn { width: 100%; }

.falhas { padding-left: var(--s-5); margin: 0; font-size: var(--tamanho-pequeno); }
.falhas li { margin: var(--s-1) 0; }

#login-erro { margin-top: 0; }

@media (max-width: 860px) {
  .grade { grid-template-columns: 1fr; }
  .cabecalho { justify-content: center; text-align: center; }
}