.carregando { padding: 40px 16px; text-align: center; color: var(--suave); }
.pagina { max-width: 1240px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 16px; }

/* Login */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.logo-login { width: 180px; height: auto; align-self: center; }
.centro { text-align: center; }
.login form { width: 100%; max-width: 340px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--suave); min-width: 0; }
.campo input, .campo select { background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); border-radius: 5px; padding: 8px 10px; font-size: 14px; max-width: 100%; }
.erro { background: var(--erro-fundo); color: var(--erro); border-radius: 5px; padding: 8px 10px; font-size: 13px; }

/* Botões */
.botao { background: var(--destaque); color: var(--destaque-texto); border: 0; border-radius: 5px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.botao[disabled] { opacity: .6; cursor: default; }
.botao.secundario { background: none; color: var(--destaque); border: 1px solid var(--linha); font-weight: 500; }

/* Cabeçalho */
.cabecalho { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--linha); }
.marca { display: flex; gap: 14px; align-items: center; }
.marca img { height: 52px; width: auto; }
.usuario { display: flex; gap: 12px; align-items: center; }

/* Resumo */
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: 6px; overflow: hidden; }
.resumo div { background: var(--superficie); padding: 10px 14px; }
.resumo b { display: block; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.resumo span { color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filtros .busca input { width: 240px; }

/* Tabela */
.caixa-tabela { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr.selecionada { background: var(--destaque-claro); }
tbody tr.selecionada td:first-child { box-shadow: inset 3px 0 0 var(--destaque); }
tbody tr:last-child td { border-bottom: 0; }
.sem-quebra { white-space: nowrap; }
.rodape-lista { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 8px; }

/* Etiquetas de situação */
.etiqueta { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.et-ok { background: var(--ok-fundo); color: var(--ok); }
.et-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.et-neutro { background: var(--neutro-fundo); color: var(--neutro); }
.et-erro { background: var(--erro-fundo); color: var(--erro); }

/* Detalhe */
.detalhe { background: var(--superficie); border: 1px solid var(--linha); border-left: 3px solid var(--destaque); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.detalhe-topo { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 20px; margin: 0; }
.dados dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.dados dd { margin: 0; overflow-wrap: anywhere; }
.mensagem { font-family: var(--mono); font-size: 12px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 5px; padding: 8px 10px; overflow-wrap: anywhere; user-select: all; }
.linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Blocos de tela e administração de usuários */
.bloco, .usuarios { display: flex; flex-direction: column; gap: 16px; }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-left: 3px solid var(--destaque); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 16px; }
.marcar { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.usuarios > .linha { justify-content: space-between; }

/* Canhoto e histórico no detalhe */
.canhoto { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.canhoto figure { margin: 0; display: flex; flex-direction: column; gap: 4px; max-width: 100%; }
.canhoto img { max-width: min(100%, 520px); max-height: 520px; border: 1px solid var(--linha); border-radius: 5px; display: block; }
.historico { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }

.ir-pagina { display: inline-flex; align-items: center; gap: 6px; }
.ir-pagina input { width: 72px; text-align: center; background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); border-radius: 5px; padding: 6px 4px; font-size: 14px; }