/* Identidade 1001: navy na navegação, ciano nos detalhes e foco nos dados. */
:root {
  color-scheme: light dark;
  --fundo: #f2f5f8;
  --superficie: #ffffff;
  --texto: #172c44;
  --secundario: #53667a;
  --borda: #cad5df;
  --suave: #eaf1f6;
  --acao: #006a87;
  --acao-hover: #00536b;
  --foco: #007da0;
  --navy: #102c48;
  --ciano: #64d7ec;
  --erro: #a22535;
  --erro-fundo: #fff0f1;
  --sucesso: #1b6549;
  --sucesso-fundo: #edf8f1;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  background: var(--fundo);
  color: var(--texto);
  accent-color: var(--acao);
  caret-color: var(--acao);
  scrollbar-color: var(--secundario) var(--fundo);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--acao); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: #b8eaf4; color: #102c48; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; }
.somente-leitor, .pular-conteudo:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular-conteudo:focus { position: fixed; top: 1rem; left: 1rem; z-index: 10; padding: .75rem 1rem; background: var(--superficie); }
.area-interna { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.barra-lateral { background: var(--navy); color: #fff; padding: 2rem 1.25rem 1.25rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { display: block; padding: 0 .75rem; }
.marca-imagem { display: block; width: 164px; height: auto; }
.nome-produto { margin: 1.25rem .75rem 1.75rem; color: #d0e0ee; padding-top: 1rem; border-top: 1px solid #37516b; font-size: .9rem; }
.grupo-menu + .grupo-menu { margin-top: 1.3rem; }
.titulo-menu { color: #afc6da; font-size: .75rem; font-weight: 600; margin: 0 .75rem .4rem; }
.grupo-menu a { display: block; padding: .6rem .75rem; margin: .12rem 0; border-radius: 5px; color: #e5eef6; text-decoration: none; font-size: .9rem; }
.grupo-menu a:hover { background: #203f5c; }
.grupo-menu a[aria-current="page"] { background: #244d68; color: #fff; box-shadow: inset 2px 0 var(--ciano); font-weight: 650; }
.barra-lateral :focus-visible { outline-color: var(--ciano); }
.rodape-menu { margin-top: auto; padding-top: 2rem; }
.rodape-menu button { background: transparent; border-color: #658199; color: #e5eef6; width: 100%; }
.rodape-menu button:hover { background: #244d68; }
.area-principal { min-width: 0; display: flex; flex-direction: column; }
.cabecalho-app { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 2.5rem; background: var(--superficie); border-bottom: 1px solid var(--borda); font-size: .85rem; color: var(--secundario); }
.separador { padding: 0 .7rem; color: var(--secundario); }
main { width: 100%; max-width: 1500px; padding: 2.5rem; margin: 0 auto; flex: 1; min-width: 0; }
h1 { font-size: clamp(1.65rem, 2.5vw, 2.25rem); line-height: 1.2; font-weight: 650; letter-spacing: -.035em; margin: 0 0 1.75rem; text-wrap: balance; }
h2 { font-size: 1.2rem; line-height: 1.4; margin: 2rem 0 1rem; font-weight: 650; overflow-wrap: anywhere; }
p { margin: 0 0 1rem; }
.rodape-app { margin-top: auto; padding: 1rem 2.5rem; color: var(--secundario); font-size: .75rem; }
button, input, select, textarea { font: inherit; }
button, input[type="submit"], .botao { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .6rem 1rem; border: 1px solid transparent; border-radius: 5px; background: var(--acao); color: #fff; font-size: .875rem; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.4; }
button:hover, input[type="submit"]:hover, .botao:hover { background: var(--acao-hover); }
button:disabled, input:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
form[aria-busy="true"] input[type="submit"] { cursor: progress; opacity: .65; }
main > form:not(.button_to), .acesso form { padding: 1.5rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; }
label { display: inline-block; font-size: .875rem; font-weight: 600; margin-bottom: .4rem; }
input:not([type="submit"]):not([type="checkbox"]):not([type="hidden"]), select, textarea { width: 100%; max-width: 36rem; min-height: 44px; padding: .6rem .75rem; border: 1px solid var(--borda); border-radius: 4px; background: var(--superficie); color: var(--texto); }
input::placeholder, textarea::placeholder { color: var(--secundario); opacity: 1; }
input[type="checkbox"] { width: 1.15rem; height: 1.15rem; vertical-align: middle; margin-left: .5rem; }
input[type="date"] { max-width: 13rem !important; }
input[type="file"] { max-width: 100% !important; }
input::file-selector-button { border: 0; background: var(--suave); color: var(--texto); padding: .4rem .7rem; border-radius: 3px; margin-right: .75rem; cursor: pointer; }
.field_with_errors { display: contents; }
.field_with_errors input, .field_with_errors select { border-color: var(--erro) !important; }
.aviso { border: 1px solid var(--borda); background: var(--suave); border-radius: 5px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
ul.aviso { padding-left: 2.5rem; }
.aviso-erro { color: var(--erro); background: var(--erro-fundo); border-color: var(--erro); }
.aviso-sucesso { color: var(--sucesso); background: var(--sucesso-fundo); border-color: var(--sucesso); }
.tabela-rolagem { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; text-align: left; }
th, td { padding: .95rem 1rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
thead th { background: var(--suave); color: var(--secundario); font-size: .75rem; font-weight: 650; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--suave); }
tfoot th { background: var(--suave); border-bottom: 0; }
td { min-width: 100px; max-width: 32rem; overflow-wrap: anywhere; }
.valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td:has(.valor), td:first-child { font-variant-numeric: tabular-nums; }
td select { min-width: 10rem; }
td input[type="text"] { min-width: 7rem; }
td form:not(.button_to) { min-width: 15rem; display: grid; gap: .5rem; }
td .button_to { display: inline-block; margin: .35rem 0 0 .5rem; }
td .button_to button { color: var(--erro); background: transparent; border-color: var(--borda); padding: .4rem .65rem; font-size: .8rem; }
td .button_to button:hover { background: var(--erro-fundo); border-color: var(--erro); }
.area-acesso { min-height: 100vh; display: grid; place-items: center; border-top: 5px solid var(--acao); }
.area-acesso .area-principal { width: 100%; max-width: 510px; }
.area-acesso main { padding: 2rem; }
.acesso { padding: 2rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 12px 40px #102c4810; }
.marca-acesso { margin-bottom: 2.5rem; }
.marca-acesso img { width: 180px; max-width: 100%; height: auto; }
.logo-escura { display: none; }
.acesso h1 { font-size: 1.8rem; margin-bottom: .8rem; }
.texto-secundario { color: var(--secundario); font-size: .9rem; }
.acesso form { border: 0; padding: 1rem 0 0; }
.acesso label { display: block; }
.acesso input[type="submit"] { width: 100%; margin-top: .5rem; }
.area-acesso .rodape-app { text-align: center; }
@media (prefers-color-scheme: dark) {
  :root { --fundo: #0d1b2a; --superficie: #14283b; --texto: #e5edf5; --secundario: #afc1d2; --borda: #435b70; --suave: #1d354a; --acao: #8ae2f0; --acao-hover: #b0edf6; --foco: #8ae2f0; --erro: #ffb3ba; --erro-fundo: #3b242f; --sucesso: #9be1be; --sucesso-fundo: #17392f; }
  button, input[type="submit"], .botao { color: #102c48; }
  .logo-clara { display: none; }
  .logo-escura { display: block; }
}
@media (max-width: 1050px) {
  .area-interna { grid-template-columns: 215px minmax(0, 1fr); }
  main { padding: 1.75rem; }
  .cabecalho-app { padding: 1rem 1.75rem; }
}
@media (max-width: 760px) {
  .area-interna { display: block; }
  .barra-lateral { position: static; height: auto; padding: 1.25rem; }
  .marca { padding: 0; }
  .marca-imagem { width: 130px; }
  .nome-produto { margin: .75rem 0; padding-top: .6rem; }
  .barra-lateral nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
  .grupo-menu { display: flex; flex-wrap: wrap; align-content: start; gap: .15rem; }
  .grupo-menu + .grupo-menu { margin-top: 0; }
  .titulo-menu { width: 100%; margin-left: .5rem; }
  .grupo-menu a { padding: .55rem; }
  .rodape-menu { padding-top: .75rem; }
  .rodape-menu button { width: auto; }
  .cabecalho-app { flex-wrap: wrap; padding: 1rem; }
  main { padding: 1.5rem 1rem; }
  main > form:not(.button_to) { padding: 1rem; }
  .rodape-app { padding: 1rem; }
  th, td { padding: .8rem; }
  .area-acesso main { padding: 1.5rem 1rem; }
  .acesso { padding: 1.5rem; }
}
@media print {
  :root { color-scheme: light; --fundo: white; --superficie: white; --texto: black; --secundario: #333; --borda: #bbb; --suave: #eee; }
  .barra-lateral, .cabecalho-app, .rodape-app, .pular-conteudo, .botao, form { display: none !important; }
  .area-interna { display: block; }
  main { padding: 0; max-width: none; }
  .tabela-rolagem { overflow: visible; border: 0; }
  th, td { padding: .4rem; }
  tr { break-inside: avoid; }
}