/* Painel HF Ísis: cores só via tokens (packages/marca). Tema claro; faixas azul-marinho no topo e no login. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel-fundo); color: var(--papel-texto); font-family: var(--fonte-texto); font-size: var(--texto-base); line-height: var(--altura-linha-texto); }
.tema-escuro { background: var(--papel-fundo); color: var(--papel-texto); }
h1, h2, h3 { font-family: var(--fonte-display); line-height: var(--altura-linha-titulo); letter-spacing: var(--espaco-letra-titulo); margin: 0 0 var(--espaco-3); color: var(--papel-titulo); }
h1 { font-size: var(--texto-3xl); } h2 { font-size: var(--texto-xl); } h3 { font-size: var(--texto-lg); }
p { margin: 0 0 var(--espaco-3); } a { color: inherit; }
.suave { color: var(--papel-texto-suave); } .pequeno { font-size: var(--texto-sm); }
code { background: var(--papel-superficie); padding: 0 var(--espaco-1); border-radius: var(--raio-pequeno); }
:focus-visible { outline: 3px solid var(--papel-foco); outline-offset: 2px; border-radius: var(--raio-pequeno); }
.rotulo-ocul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Topo */
.topo { border-bottom: 3px solid var(--cor-ouro); }
.topo-in { max-width: 74rem; margin: 0 auto; padding: var(--espaco-3) var(--espaco-5); display: flex; align-items: center; gap: var(--espaco-5); flex-wrap: wrap; }
.marca { display: inline-flex; } .marca img { height: 38px; width: auto; }
.topo nav { flex: 1; } .topo nav ul { list-style: none; display: flex; gap: var(--espaco-4); margin: 0; padding: 0; flex-wrap: wrap; }
.topo nav a { text-decoration: none; padding: var(--espaco-2) 0; border-bottom: 2px solid transparent; color: var(--papel-texto); }
.topo nav a:hover, .topo nav a[aria-current="page"] { color: var(--papel-destaque); border-bottom-color: var(--papel-destaque); }
.sair { background: transparent; color: var(--papel-texto); border: 1px solid var(--papel-borda-campo); border-radius: var(--raio-pilula); padding: var(--espaco-1) var(--espaco-4); cursor: pointer; font: inherit; font-size: var(--texto-sm); }
.faixa-demo { background: var(--papel-superficie); color: var(--papel-texto-suave); text-align: center; font-size: var(--texto-xs); padding: var(--espaco-1) var(--espaco-3); letter-spacing: 0.06em; border-bottom: 1px solid var(--papel-borda); }

/* Páginas */
#conteudo { max-width: 74rem; margin: 0 auto; padding: var(--espaco-6) var(--espaco-5) var(--espaco-9); }
.pagina { display: block; } .titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); flex-wrap: wrap; margin-bottom: var(--espaco-3); }
.titulo-linha h1 { margin: 0; display: flex; align-items: center; gap: var(--espaco-2); }
.acoes { display: flex; gap: var(--espaco-3); flex-wrap: wrap; align-items: center; margin-top: var(--espaco-3); } .acoes.fim { justify-content: flex-end; margin-top: var(--espaco-5); }
.aviso { background: var(--papel-superficie); border: 1px solid var(--papel-borda); border-left: 4px solid var(--cor-ouro); padding: var(--espaco-3) var(--espaco-4); border-radius: var(--raio-medio); margin-bottom: var(--espaco-4); }
.alerta { background: var(--papel-superficie); border: 1px solid var(--papel-borda); border-left: 4px solid var(--cor-ouro); padding: var(--espaco-3) var(--espaco-4); border-radius: var(--raio-medio); } .alerta.forte { border-left-color: var(--papel-erro); color: var(--papel-erro); font-weight: var(--peso-semibold); }
.erro { color: var(--papel-erro); min-height: 1.2em; } .vazio { color: var(--papel-texto-suave); padding: var(--espaco-7) 0; text-align: center; }

/* Botões e campos */
.botao { display: inline-block; min-height: 2.75rem; padding: var(--espaco-3) var(--espaco-5); background: var(--papel-acao); color: var(--papel-acao-texto); border: 2px solid var(--papel-acao); border-radius: var(--raio-medio); font: inherit; font-weight: var(--peso-bold); cursor: pointer; text-decoration: none; }
.botao:hover { background: var(--cor-ouro-brilho); border-color: var(--cor-ouro-brilho); color: var(--cor-fundo); }
.btn-sec, .link-zap { display: inline-block; min-height: 2.5rem; padding: var(--espaco-2) var(--espaco-4); background: transparent; color: var(--papel-texto); border: 1px solid var(--papel-borda-campo); border-radius: var(--raio-medio); font: inherit; cursor: pointer; text-decoration: none; }
.btn-sec:hover, .link-zap:hover { background: var(--papel-superficie); }
.btn-txt { background: none; border: 0; color: var(--papel-texto-suave); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--texto-sm); padding: var(--espaco-2); }
label { display: block; font-size: var(--texto-sm); font-weight: var(--peso-medio); margin-bottom: var(--espaco-3); }
input:not([type=checkbox]), select, textarea { display: block; width: 100%; margin-top: var(--espaco-1); padding: var(--espaco-2) var(--espaco-3); font: inherit; color: var(--papel-texto); background: var(--papel-cartao); border: 1px solid var(--papel-borda-campo); border-radius: var(--raio-medio); min-height: 2.5rem; }
textarea { resize: vertical; }
.chave { display: inline-flex; align-items: center; gap: var(--espaco-2); font-weight: var(--peso-normal); cursor: pointer; } .chave input { width: 1.15rem; height: 1.15rem; accent-color: var(--cor-fundo); }
.barra { display: flex; gap: var(--espaco-3); flex-wrap: wrap; margin: var(--espaco-4) 0; } .barra input { max-width: 22rem; } .barra select { max-width: 16rem; }

/* Ajuda "?" */
.ajuda { position: relative; display: inline-block; font-family: var(--fonte-texto); }
.ajuda summary { list-style: none; cursor: pointer; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid var(--papel-borda-campo); border-radius: var(--raio-pilula); font-size: var(--texto-sm); color: var(--papel-texto-suave); }
.ajuda summary::-webkit-details-marker { display: none; }
.ajuda div { position: absolute; z-index: 5; left: 0; top: 2.1rem; width: min(22rem, 80vw); background: var(--papel-cartao); border: 1px solid var(--papel-borda); border-radius: var(--raio-medio); padding: var(--espaco-3) var(--espaco-4); box-shadow: var(--sombra-media); font-size: var(--texto-sm); font-weight: var(--peso-normal); letter-spacing: 0; color: var(--papel-texto); }

/* Vitrine */
.vitrine { list-style: none; margin: var(--espaco-4) 0 0; padding: 0; display: grid; gap: var(--espaco-4); grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); }
.produto { background: var(--papel-cartao); border: 1px solid var(--papel-borda); border-top: 3px solid var(--cor-ouro); border-radius: var(--raio-grande); box-shadow: var(--sombra-suave); display: flex; flex-direction: column; overflow: hidden; }
.produto.indisp { opacity: 0.62; }
.produto-foto { position: relative; aspect-ratio: 4 / 3; background: var(--papel-superficie); }
.produto-foto img { width: 100%; height: 100%; object-fit: cover; }
.sem-foto { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; background: linear-gradient(135deg, var(--papel-superficie), var(--papel-borda)); color: var(--papel-texto-suave); }
.sem-foto span { font-family: var(--fonte-display); font-size: 3.4rem; color: var(--papel-titulo); line-height: 1; } .sem-foto small { font-size: var(--texto-xs); }
.selo-ex { position: absolute; top: var(--espaco-2); left: var(--espaco-2); background: var(--papel-erro); color: #fff; font-size: var(--texto-xs); font-weight: var(--peso-bold); padding: 1px var(--espaco-2); border-radius: var(--raio-pilula); letter-spacing: 0.06em; }
td .selo-ex { position: static; display: inline-block; }
.produto-corpo { padding: var(--espaco-4); flex: 1; } .produto-corpo h3 { margin-bottom: var(--espaco-1); } .produto-corpo p { margin-bottom: var(--espaco-2); }
/* Padrão de cartão inspirado na referência (docs/referencia/oba-hortifruti-engenharia-reversa.md): foto 1:1, preço em pílula */
.produto-foto { aspect-ratio: 1 / 1; }
.preco { display: inline-block; font-size: var(--texto-base); font-weight: var(--peso-bold); background: var(--papel-acao); color: var(--papel-acao-texto); padding: var(--espaco-1) var(--espaco-3); border-radius: var(--raio-pilula); }
.preco .suave { background: transparent; color: var(--papel-texto-suave); font-weight: var(--peso-normal); }
.preco:has(.suave) { background: transparent; padding-left: 0; }
.produto-acoes { display: flex; justify-content: space-between; padding: 0 var(--espaco-4) var(--espaco-4); }
.produto.novo { border-style: dashed; border-top-style: dashed; box-shadow: none; background: transparent; }
.novo-btn { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 100%; min-height: 14rem; display: grid; place-content: center; text-align: center; gap: var(--espaco-2); color: var(--papel-texto-suave); }
.novo-btn span { font-size: 2.5rem; line-height: 1; color: var(--papel-titulo); } .novo-btn:hover { background: var(--papel-superficie); } .novo-btn:focus-visible { outline: 3px solid var(--papel-foco); }

/* Tabelas */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--papel-borda); border-radius: var(--raio-grande); background: var(--papel-cartao); margin-top: var(--espaco-4); }
.tabela { width: 100%; border-collapse: collapse; min-width: 40rem; } .tabela th, .tabela td { text-align: left; padding: var(--espaco-3) var(--espaco-4); border-bottom: 1px solid var(--papel-borda); vertical-align: middle; }
.tabela th { font-size: var(--texto-sm); color: var(--papel-texto-suave); background: var(--papel-superficie); } .tabela tbody tr:last-child td { border-bottom: 0; }
.moeda { color: var(--papel-texto-suave); margin-right: var(--espaco-2); } .in-preco { display: inline-block; width: 7rem; } .tabela td:nth-child(3) { white-space: nowrap; } .in-obs { min-width: 11rem; }

/* Lista e caixas */
.duas-colunas { display: grid; gap: var(--espaco-6); grid-template-columns: 1fr; margin-top: var(--espaco-4); } @media (min-width: 900px) { .duas-colunas { grid-template-columns: 1fr 1fr; align-items: start; } }
.msg { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--texto-sm); line-height: 1.5; }
.tabela-img { width: 100%; height: auto; border: 1px solid var(--papel-borda); border-radius: var(--raio-grande); background: var(--papel-cartao); box-shadow: var(--sombra-suave); }
.caixa { background: var(--papel-superficie); border: 1px solid var(--papel-borda); border-radius: var(--raio-grande); padding: var(--espaco-5); margin-top: var(--espaco-5); } .duas-colunas > .caixa { margin-top: 0; }

/* Modal */
dialog { width: min(34rem, 94vw); border: 1px solid var(--papel-borda); border-radius: var(--raio-grande); padding: var(--espaco-6); background: var(--papel-cartao); color: var(--papel-texto); box-shadow: var(--sombra-forte); }
dialog::backdrop { background: rgb(19 39 63 / 0.55); } .linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-3); }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--espaco-5); }
.login-cartao { width: min(26rem, 100%); background: var(--papel-superficie); border: 1px solid var(--papel-borda); border-top: 4px solid var(--cor-ouro); border-radius: var(--raio-grande); padding: var(--espaco-7) var(--espaco-6); box-shadow: var(--sombra-forte); }
.login-cartao img { margin: 0 auto var(--espaco-4); } .login-cartao h1 { text-align: center; color: var(--papel-destaque); } .login-cartao .botao { width: 100%; margin: var(--espaco-3) 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Login em etapas */
.qr { display: grid; place-items: center; background: #fff; border-radius: var(--raio-medio); padding: var(--espaco-3); margin: var(--espaco-3) 0; }
.codigos { list-style: none; margin: var(--espaco-3) 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-2); }
.codigos code { display: block; text-align: center; padding: var(--espaco-2); background: var(--papel-cartao); color: var(--papel-texto); border-radius: var(--raio-pequeno); font-size: var(--texto-base); }
.quem { font-size: var(--texto-xs); margin-left: auto; }