/* =========================================================================
   LACTOS360 — Design system
   Tokens → base → layout → componentes → utilitários → responsivo → impressão
   ========================================================================= */

@font-face { font-family: "Lato"; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-latin-900-normal.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Marca LACTOS360 (brandbook v1, out/2026): azul profundo = base, azul sistema = interface/links, ciano = conexão/ênfase */
  --azul-prof: #0A3158;
  --azul-sis: #146CC2;
  --ciano: #08A9D5;
  --gelo: #EDF6FB;
  --grafite: #183249;
  --cor: #146CC2;
  --cor-h: color-mix(in srgb, var(--cor) 86%, #000);
  --cor-l: color-mix(in srgb, var(--cor) 14%, var(--sup));
  --cor-xl: color-mix(in srgb, var(--cor) 7%, var(--sup));
  --cor-txt: #fff;
  --creme: #D18A28;   /* âmbar da marca (atenção): estrelas, realces */
  /* sequência de séries dos gráficos (brandbook: azul profundo, azul sistema, ciano, depois funcionais/neutros) */
  --g1: #0A3158; --g2: #146CC2; --g3: #08A9D5; --g4: #19866B; --g5: #D18A28; --g6: #60768A; --g7: #C14F5B; --g8: #9DB4C6;

  --bg: #F4F8FB;
  --sup: #FFFFFF;
  --sup2: #F8FBFD;
  --borda: #D8E5EC;
  --borda-forte: #BDD0DC;
  --borda-campo: #6F8798;   /* borda de campos e controles: contraste ≥ 3:1 com o fundo (WCAG 1.4.11) */
  --txt: #183249;
  --txt2: #43596D;
  --mudo: #4B6277;          /* texto secundário: ≥ 4,5:1 inclusive sobre --cor-l (WCAG 1.4.3) */
  --cor-t: color-mix(in srgb, var(--cor) 86%, #000);   /* a cor primária quando usada como TEXTO/ícone sobre fundo (links, abas ativas) */

  --ok: #167C62;       --ok-bg: #E3F4EE;
  --aviso: #855208;    --aviso-bg: #FCF1DC;
  --erro: #B8404D;     --erro-bg: #FBEBED;   --erro-forte: #9E303C;
  --info: #146CC2;     --info-bg: #E4EFFA;
  --neutro-bg: #EAF1F6;

  --raio: 12px;
  --raio-s: 8px;
  --sombra-1: 0 1px 2px rgb(10 49 88 / .06), 0 1px 1px rgb(10 49 88 / .04);
  --sombra-2: 0 6px 20px rgb(10 49 88 / .09), 0 2px 6px rgb(10 49 88 / .05);
  --sombra-3: 0 18px 50px rgb(10 49 88 / .20);

  --f-corpo: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-titulo: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --lateral: 268px;
  --lateral-mini: 72px;
  --topo: 64px;
  --nav-baixo: 64px;
  color-scheme: light;
}

:root[data-tema="escuro"] {
  --bg: #071C32; --sup: #0D2A47; --sup2: #12335A; --borda: #1E4166; --borda-forte: #2D5880;
  --txt: #E8F1F8; --txt2: #B4C8D8; --mudo: #9DB4C6; --borda-campo: #6B8CA6;
  --cor-t: color-mix(in srgb, var(--cor) 55%, #fff);
  --ok: #3DD598;  --ok-bg: #0F3B33;  --ok-txt: #062018;
  --aviso: #F2B552; --aviso-bg: #3A2C10;
  --erro: #FF8A94; --erro-bg: #40181F; --erro-txt: #2B0A0E; --erro-forte: #FF8A94;
  --info: #7DB4F5; --info-bg: #10305A;
  --neutro-bg: #15375C;
  --sombra-1: 0 1px 2px rgb(0 0 0 / .4);
  --sombra-2: 0 8px 24px rgb(0 0 0 / .45);
  --sombra-3: 0 20px 60px rgb(0 0 0 / .6);
  --cor-l: color-mix(in srgb, var(--cor) 28%, var(--sup));
  --cor-xl: color-mix(in srgb, var(--cor) 16%, var(--sup));
  --g1: #9CC4F0; --g2: #4A97E6; --g3: #2BC4EA; --g4: #3DD598; --g5: #F2B552; --g6: #8FA5B8; --g7: #FF8A94; --g8: #B4C8D8;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--txt);
  font: 400 15px/1.55 var(--f-corpo); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--f-titulo); line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 800; } h2 { font-size: 1.2rem; font-weight: 700; } h3 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--cor-t); text-decoration: none; } a:hover { text-decoration: underline; }
/* 1.17.0 (WCAG 1.4.1): link no meio de texto corrido não pode ser distinguido só pela cor */
.alerta a:not(.btn), .chk a, .ajuda a, p a:not([class]), label > span a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--borda); margin: 1.2em 0; }
small, .peq { font-size: .85em; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }
:focus-visible { outline: 3px solid var(--cor-t); outline-offset: 2px; }   /* foco sólido e forte (WCAG 2.4.7/2.4.11/1.4.11); sem transparência */
:focus-visible:is(.btn-pri, .pg.atual, [aria-current="page"], .nav-item.ativo) { outline-color: var(--txt); box-shadow: 0 0 0 2px var(--sup); }
::selection { background: color-mix(in srgb, var(--cor) 30%, transparent); }
[hidden] { display: none !important; }
.ic { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.2em; }
.ic-sm { width: 1em; height: 1em; } .ic-lg { width: 1.6em; height: 1.6em; } .ic-xl { width: 2.4em; height: 2.4em; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* link "Pular para o conteúdo": aparece quando recebe o foco (1º Tab da página) */
a.so-leitor:focus, a.so-leitor:active { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; overflow: visible; clip: auto; z-index: 5000; padding: 10px 18px; border-radius: 10px; background: var(--txt); color: var(--bg); font-weight: 700; text-decoration: none; box-shadow: var(--sombra-3); outline: 3px solid var(--cor-t); outline-offset: 2px; }
.mudo { color: var(--mudo); } .txt2 { color: var(--txt2); }
.dir { text-align: right; } .centro { text-align: center; }
.nowrap { white-space: nowrap; } .negrito { font-weight: 700; }
.ok { color: var(--ok); } .erro { color: var(--erro); } .aviso { color: var(--aviso); }
.flex { display: flex; } .gap { gap: 12px; } .gap-s { gap: 6px; } .gap-g { gap: 20px; } .wrap { flex-wrap: wrap; } .centraliza { align-items: center; } .entre { justify-content: space-between; } .cresce { flex: 1 1 auto; min-width: 0; }
.mt { margin-top: 16px; } .mt-g { margin-top: 28px; } .mb { margin-bottom: 16px; } .mb-0 { margin-bottom: 0; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Estrutura do app ---------- */
.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; transition: grid-template-columns .2s; }
.app.mini { grid-template-columns: var(--lateral-mini) 1fr; }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--sup);
  border-right: 1px solid var(--borda); z-index: 40; overflow: hidden;
}
.lateral-topo { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; min-height: var(--topo); }
.marca { display: flex; align-items: center; gap: 10px; font: 800 1.15rem var(--f-titulo); color: var(--txt); letter-spacing: -.02em; text-decoration: none !important; }
.marca-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--cor); color: var(--cor-txt); display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .15); flex: none; overflow: hidden; }
.marca-logo img { width: 100%; height: 100%; object-fit: cover; }
/* logotipo da empresa: aparece inteiro (sem recorte), na proporção original, sem o quadrado colorido atrás */
.marca-logo.tem-img { width: auto; height: auto; max-width: 112px; background: none; box-shadow: none; border-radius: 0; display: flex; align-items: center; }
.marca-logo.tem-img img { width: auto; height: auto; max-width: 112px; max-height: 40px; object-fit: contain; border-radius: 6px; }
.app.mini .marca-logo.tem-img, .app.mini .marca-logo.tem-img img { max-width: 44px; }
.app.mini .marca span.marca-logo { display: grid; } .app.mini .marca span.marca-logo.tem-img { display: flex; }
.marca b { color: var(--cor-t); }
.lateral-nav { flex: 1; overflow-y: auto; padding: 6px 12px 16px; scrollbar-width: thin; }
.nav-grupo { font: 700 .68rem var(--f-corpo); text-transform: uppercase; letter-spacing: .09em; color: var(--mudo); padding: 16px 10px 6px; white-space: nowrap; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 1px 0; border-radius: 10px; color: var(--txt2);
  font-weight: 500; font-size: .93rem; text-decoration: none !important; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; font-family: inherit;
}
.nav-item:hover { background: var(--sup2); color: var(--txt); }
.nav-item.ativo { background: var(--cor-l); color: var(--cor); font-weight: 700; }
:root[data-tema="escuro"] .nav-item.ativo { color: color-mix(in srgb, var(--cor) 40%, #fff); }
.nav-item .ic { opacity: .9; }
.nav-item .seta { margin-left: auto; transition: transform .2s; width: 1em; height: 1em; opacity: .6; }
.nav-item[aria-expanded="true"] .seta { transform: rotate(90deg); }
.nav-sub { margin: 2px 0 6px 22px; padding-left: 12px; border-left: 2px solid var(--borda); display: none; }
.nav-sub.aberto { display: block; }
.nav-sub a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--txt2); font-size: .9rem; text-decoration: none !important; }
.nav-sub a:hover { background: var(--sup2); color: var(--txt); }
.nav-sub a.ativo { color: var(--cor); font-weight: 700; background: var(--cor-xl); }
.nav-bloqueado { opacity: .62; }
.nav-bloqueado .pill-plano { margin-left: auto; }
.pill-plano { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: var(--creme); color: #4a3200; }
.lateral-rodape { padding: 10px 12px 14px; border-top: 1px solid var(--borda); }
.app.mini .nav-grupo, .app.mini .nav-sub, .app.mini .seta, .app.mini .pill-plano, .app.mini .marca span { display: none; }
/* menu compacto: o rótulo some só visualmente — continua sendo o nome acessível do item (WCAG 4.1.2) */
.app.mini .lateral .rot, .app.mini .lateral-rodape .rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app.mini .nav-item { justify-content: center; padding: 11px 0; }
.app.mini .lateral-topo { justify-content: center; padding-inline: 0; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 30; height: var(--topo); display: flex; align-items: center; gap: 10px; padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--borda);
}
.topo-busca {
  display: flex; align-items: center; gap: 10px; flex: 1 1 360px; max-width: 460px; height: 40px; padding: 0 14px; border-radius: 99px;
  background: var(--sup); border: 1px solid var(--borda); color: var(--mudo); cursor: pointer; font: inherit; text-align: left;
}
.topo-busca:hover { border-color: var(--borda-forte); }
.topo-busca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topo-busca kbd { white-space: nowrap; flex: none; }
.topo-busca kbd { margin-left: auto; font: 600 .72rem var(--f-corpo); border: 1px solid var(--borda); border-radius: 6px; padding: 1px 6px; color: var(--mudo); background: var(--sup2); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topo-busca { min-width: 40px; }
/* 1.66.1: a barra do topo nunca empurra o menu do usuário (Minha conta / Sair) para fora da tela: em telas médias os rótulos encolhem primeiro */
@media (max-width: 1500px) {
  .contexto { max-width: 190px; } .contexto .rot { min-width: 0; }
  .menu-usuario .rot { display: none; } .menu-usuario { padding: 3px; }
}
@media (max-width: 1180px) {
  .topo-busca { flex: 0 0 auto; width: 40px; padding: 0; justify-content: center; } .topo-busca span, .topo-busca kbd { display: none; }
}
@media (max-width: 1100px) {
  .contexto .rot { display: none; } .contexto { padding: 6px 10px; }
}
.btn-icone { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 99px; border: 0; background: transparent; color: var(--txt2); cursor: pointer; }
.btn-icone:hover { background: var(--sup); color: var(--txt); }
.btn-icone .ponto { position: absolute; top: 7px; right: 8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--erro); color: var(--erro-txt, #fff); font: 700 .65rem/17px var(--f-corpo); text-align: center; border: 2px solid var(--bg); box-sizing: content-box; }
.contexto { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: var(--sup); border: 1px solid var(--borda); font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--txt); font-family: inherit; max-width: 250px; }
.contexto:hover { border-color: var(--borda-forte); }
.avatar { width: 34px; height: 34px; border-radius: 99px; background: var(--cor-l); color: var(--cor-t); font: 700 .8rem var(--f-titulo); display: grid; place-items: center; flex: none; }
.menu-usuario { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 99px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--txt); font: inherit; }
.menu-usuario:hover { background: var(--sup); border-color: var(--borda); }

.conteudo { padding: 24px; width: 100%; max-width: 1480px; margin: 0 auto; flex: 1; }
.pagina-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pagina-topo h1 { margin: 0; }
.pagina-sub { color: var(--txt2); margin: 4px 0 0; }
.pagina-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; color: var(--mudo); margin-bottom: 8px; }
.migalhas a { color: var(--mudo); } .migalhas a:hover { color: var(--cor); }
.migalhas .ic { width: .9em; height: .9em; opacity: .6; }
.rodape-app { padding: 18px 24px 26px; color: var(--mudo); font-size: .8rem; text-align: center; }

/* Navegação inferior (mobile) */
.nav-baixo { display: none; }
.overlay { position: fixed; inset: 0; background: rgb(7 28 50 / .5); backdrop-filter: blur(2px); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .2s; }
.overlay.ativo { opacity: 1; pointer-events: auto; }

/* ---------- Cards e superfícies ---------- */
.card { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); }
.card-corpo { padding: 20px; }
.card-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.card-topo h2, .card-topo h3 { margin: 0; }
.card-rodape { padding: 14px 20px; border-top: 1px solid var(--borda); background: var(--sup2); border-radius: 0 0 var(--raio) var(--raio); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.grade { display: grid; gap: 16px; } .grade > * { min-width: 0; }   /* 1.17.0: item de grade não força a página a ficar mais larga que a tela (formulário de Pessoas no celular) */
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kpi { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); color: inherit; text-decoration: none !important; transition: transform .15s, box-shadow .15s, border-color .15s; }
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--borda-forte); }
.kpi-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cor-l); color: var(--cor); flex: none; }
.kpi-ic.ok { background: var(--ok-bg); color: var(--ok); } .kpi-ic.aviso { background: var(--aviso-bg); color: var(--aviso); } .kpi-ic.erro { background: var(--erro-bg); color: var(--erro); } .kpi-ic.info { background: var(--info-bg); color: var(--info); }
.kpi-rot { font-size: .82rem; color: var(--txt2); font-weight: 600; }
.kpi-val { font: 800 1.4rem/1.15 var(--f-titulo); letter-spacing: -.025em; margin-top: 2px; }
.kpi-val small { font-size: .62em; font-weight: 700; letter-spacing: 0; }   /* unidade ao lado do número: Bold e menor (o Lato Black é largo) */
.kpi-det { font-size: .8rem; color: var(--mudo); margin-top: 2px; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid transparent; font: 650 .9rem var(--f-corpo); cursor: pointer; text-decoration: none !important; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn-pri { background: var(--cor); color: var(--cor-txt); box-shadow: 0 1px 2px rgb(0 0 0 / .15), inset 0 -2px 0 rgb(0 0 0 / .12); }
.btn-pri:hover { background: var(--cor-h); color: var(--cor-txt); }
.btn-sec { background: var(--sup); color: var(--txt); border-color: var(--borda-forte); }
.btn-sec:hover { background: var(--sup2); border-color: var(--mudo); color: var(--txt); }
.btn-ghost { background: transparent; color: var(--txt2); } .btn-ghost:hover { background: var(--neutro-bg); color: var(--txt); }
.btn-perigo { background: var(--erro); color: var(--erro-txt, #fff); } .btn-perigo:hover { filter: brightness(.92); color: var(--erro-txt, #fff); }
.btn-perigo-sec { background: var(--sup); color: var(--erro); border-color: color-mix(in srgb, var(--erro) 40%, var(--borda)); } .btn-perigo-sec:hover { background: var(--erro-bg); }
.btn-ok { background: var(--ok); color: var(--ok-txt, #fff); }
.btn-s { height: 32px; padding: 0 11px; font-size: .82rem; border-radius: 8px; }
.btn-g { height: 48px; padding: 0 24px; font-size: 1rem; border-radius: 12px; }
.btn-bloco { width: 100%; }
.btn[disabled], .btn.carregando { opacity: .6; pointer-events: none; }
.btn.carregando::after { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.btn-grupo { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Formulários ---------- */
.form-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 16px; }
.col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label, .rotulo { font-weight: 650; font-size: .85rem; color: var(--txt); }
.campo .obrig { color: var(--erro); margin-left: 2px; }
.ajuda { font-size: .79rem; color: var(--mudo); }
.msg-erro { font-size: .8rem; color: var(--erro); font-weight: 600; }
.input, .select, .textarea {
  width: 100%; height: 42px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--borda-campo); background: var(--sup); color: var(--txt);
  font: 450 .95rem var(--f-corpo); transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none;
}
.textarea { height: auto; min-height: 96px; padding: 10px 13px; resize: vertical; line-height: 1.5; }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23758A94' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--mudo); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--cor); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor) 18%, transparent); }
.input::placeholder, .textarea::placeholder { color: var(--mudo); }
.input[readonly], .input:disabled, .select:disabled { background: var(--sup2); color: var(--txt2); }
.invalido, .campo.tem-erro .input, .campo.tem-erro .select, .campo.tem-erro .textarea { border-color: var(--erro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--erro) 14%, transparent); }
.input-grupo { position: relative; display: flex; }
.input-grupo .input { padding-right: 44px; }
.input-grupo .btn-icone { position: absolute; right: 2px; top: 1px; width: 40px; height: 40px; }
.input-pre { display: flex; align-items: stretch; }
.input-pre > span { display: grid; place-items: center; padding: 0 12px; background: var(--sup2); border: 1px solid var(--borda-campo); border-right: 0; border-radius: 10px 0 0 10px; color: var(--txt2); font-weight: 600; font-size: .9rem; }
.input-pre > .input { border-radius: 0 10px 10px 0; }
input[type="color"].input { padding: 4px; cursor: pointer; }
input[type="file"].input { padding: 8px 10px; height: auto; }
.chk { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; min-height: 42px; }
.chk input { width: 18px; height: 18px; accent-color: var(--cor); flex: none; }
.interruptor { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: 42px; font-weight: 500; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor .trilho { width: 44px; height: 26px; border-radius: 99px; background: var(--borda-campo); position: relative; transition: background .2s; flex: none; }
.interruptor .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s; }
.interruptor input:checked + .trilho { background: var(--cor); }
.interruptor input:checked + .trilho::after { transform: translateX(18px); }
.interruptor input:focus-visible + .trilho { outline: 3px solid color-mix(in srgb, var(--cor) 50%, transparent); outline-offset: 2px; }
.grupo-titulo { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font: 700 .78rem var(--f-corpo); text-transform: uppercase; letter-spacing: .08em; color: var(--mudo); margin-top: 8px; }
.grupo-titulo::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.grupo-titulo:first-child { margin-top: 0; }
.autocomplete { position: relative; }
.autocomplete-lista { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow: auto; background: var(--sup); border: 1px solid var(--borda-forte); border-radius: 10px; box-shadow: var(--sombra-2); padding: 4px; }
.autocomplete-lista button { display: block; width: 100%; text-align: left; padding: 9px 11px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--txt); font: inherit; }
.autocomplete-lista button:hover, .autocomplete-lista button.sel { background: var(--cor-l); }
.autocomplete-lista .vazio { padding: 10px; color: var(--mudo); font-size: .88rem; }
.autocomplete-lista button.com-det, .modal-escolha .escolha-lista button.com-det { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.com-det .op-txt { flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }
.com-det .op-det { flex: 0 0 auto; font-size: .82rem; font-weight: 600; color: var(--mudo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.com-det .op-det[data-tom="baixo"] { color: var(--aviso); }
.com-det .op-det[data-tom="zero"] { color: var(--erro); }

/* ---------- Tabelas ---------- */
.tabela-wrap { overflow-x: auto; border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th { text-align: left; font: 700 .72rem var(--f-corpo); text-transform: uppercase; letter-spacing: .06em; color: var(--mudo); padding: 11px 14px; background: var(--sup2); border-bottom: 1px solid var(--borda); white-space: nowrap; position: sticky; top: 0; }
.tabela th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.tabela th a:hover { color: var(--cor); }
.tabela td { padding: 12px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--cor-xl); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .acoes { text-align: right; white-space: nowrap; width: 1%; }
.tabela tr.inativo td, .tabela tr.inativo .celula-principal { color: var(--txt2); }
/* 1.36.0 — linhas canceladas, descartadas, inativas e bloqueadas se diferenciam das demais (parâmetro "Destacar linhas canceladas, inativas e bloqueadas":
   Configurações > Aparência, e a pessoa pode mudar em Minha conta). Sem cor forte: 'off' = fundo cinza leve e texto esmaecido; 'neg' = tom avermelhado leve.
   O selo da situação (.badge[data-situacao]) é marcado por badge() em PHP; a linha só precisa ter um selo assim, ou a classe .inativo, ou data-situacao-linha. */
@media screen {
  :root:not([data-destaque-linhas="0"]) tbody tr.inativo,
  :root:not([data-destaque-linhas="0"]) tbody tr.inativo > td,
  :root:not([data-destaque-linhas="0"]) tbody tr.inativo > th,
  :root:not([data-destaque-linhas="0"]) [data-situacao-linha="off"],
  :root:not([data-destaque-linhas="0"]) [data-situacao-linha="off"] > td { background: color-mix(in srgb, var(--txt) 6%, transparent); }
  :root:not([data-destaque-linhas="0"]) tbody tr.inativo > td,
  :root:not([data-destaque-linhas="0"]) tbody tr.inativo > th,
  :root:not([data-destaque-linhas="0"]) [data-situacao-linha="off"] > td { color: var(--mudo); }
  :root:not([data-destaque-linhas="0"]) [data-situacao-linha="neg"],
  :root:not([data-destaque-linhas="0"]) [data-situacao-linha="neg"] > td { background: color-mix(in srgb, var(--erro) 8%, transparent); }
  :root:not([data-destaque-linhas="0"]) [data-situacao-linha="neg"] > td { color: var(--txt2); }
}
@supports selector(:has(*)) {
  @media screen {
    :root:not([data-destaque-linhas="0"]) tbody tr:has(.badge[data-situacao="off"]),
    :root:not([data-destaque-linhas="0"]) tbody tr:has(.badge[data-situacao="off"]) > td,
    :root:not([data-destaque-linhas="0"]) tbody tr:has(.badge[data-situacao="off"]) > th { background: color-mix(in srgb, var(--txt) 6%, transparent); }
    :root:not([data-destaque-linhas="0"]) tbody tr:has(.badge[data-situacao="off"]) > td,
    :root:not([data-destaque-linhas="0"]) tbody tr:has(.badge[data-situacao="off"]) > th { color: var(--mudo); }
    :root:not([data-destaque-linhas="0"]) tbody tr:has(.badge[data-situacao="neg"]),
    :root:not([data-destaque-linhas="0"]) tbody tr:has(.badge[data-situacao="neg"]) > td,
    :root:not([data-destaque-linhas="0"]) tbody tr:has(.badge[data-situacao="neg"]) > th { background: color-mix(in srgb, var(--erro) 8%, transparent); }
    :root:not([data-destaque-linhas="0"]) tbody tr:has(.badge[data-situacao="neg"]) > td,
    :root:not([data-destaque-linhas="0"]) tbody tr:has(.badge[data-situacao="neg"]) > th { color: var(--txt2); }
    /* passar o mouse continua marcando a linha */
    :root:not([data-destaque-linhas="0"]) tbody tr:has(.badge[data-situacao]):hover > td,
    :root:not([data-destaque-linhas="0"]) tbody tr.inativo:hover > td { background: color-mix(in srgb, var(--cor-xl) 80%, var(--txt) 8%); }
  }
}
/* 1.17.0: link ao lado de outro texto na mesma célula/linha não se distingue só pela cor (WCAG 1.4.1) */
.lnk-sub, .celula-principal > a:has(~ .mudo) { text-decoration: underline; text-underline-offset: 2px; }
/* saldo negativo em linha de total (fundo tingido): o vermelho comum não alcança 4,5:1 */
.fin-dre tr.total .fin-saldo-neg, .contabil-rel tr.total .contabil-neg { color: var(--erro-forte); }   /* 1.17.0: antes opacity .55 (contraste < 4,5:1, WCAG 1.4.3) */
.tabela-total td { font-weight: 700; background: var(--sup2); }
.celula-principal { font-weight: 650; color: var(--txt); }
.vazio-estado { text-align: center; padding: 56px 20px; color: var(--txt2); }
.vazio-estado .ic { width: 3rem; height: 3rem; color: var(--mudo); margin-bottom: 8px; opacity: .7; }
.vazio-estado h3 { color: var(--txt); margin-bottom: 4px; }
.vazio-estado .simbolo-marca { width: 56px; height: 56px; margin-bottom: 10px; }   /* símbolo oficial em estados vazios de marca */
.simbolo-marca.s-escuro { display: none; }
:root[data-tema="escuro"] .simbolo-marca.s-claro { display: none; } :root[data-tema="escuro"] .simbolo-marca.s-escuro { display: inline-block; }
.barra-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.barra-filtros .campo { min-width: 160px; }
.barra-filtros .busca { flex: 1 1 260px; position: relative; }
.barra-filtros .busca .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--mudo); pointer-events: none; }
.barra-filtros .busca .input { padding-left: 40px; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--borda); font-size: .88rem; color: var(--txt2); }
.paginacao nav { display: flex; gap: 4px; }
.pg { min-width: 34px; height: 34px; padding: 0 8px; display: grid; place-items: center; border-radius: 8px; color: var(--txt2); border: 1px solid transparent; text-decoration: none !important; font-weight: 600; }
a.pg:hover { background: var(--neutro-bg); } .pg.atual { background: var(--cor); color: var(--cor-txt); } .pg.off { opacity: .4; }

/* ---------- Badges, alertas, abas ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font: 650 .75rem var(--f-corpo); background: var(--neutro-bg); color: var(--txt2); white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok); } .badge-aviso { background: var(--aviso-bg); color: var(--aviso); }
.badge-erro { background: var(--erro-bg); color: var(--erro); } .badge-info { background: var(--info-bg); color: var(--info); }
.badge-pri { background: var(--cor-l); color: var(--cor); } .badge-neutro { background: var(--neutro-bg); color: var(--txt2); }
.alerta { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: var(--raio-s); border: 1px solid; font-size: .92rem; margin-bottom: 14px; }
.alerta .ic { margin-top: 2px; }
.alerta-ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.alerta-erro { background: var(--erro-bg); border-color: color-mix(in srgb, var(--erro) 30%, transparent); color: var(--erro); }
.alerta-aviso { background: var(--aviso-bg); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); color: var(--aviso); }
.alerta-info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); }
.alerta > div { flex: 1; color: var(--txt); } .alerta .btn { align-self: center; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); overflow-x: auto; margin-bottom: 20px; scrollbar-width: none; }
.abas a, .abas button { padding: 11px 16px; font: 650 .9rem var(--f-corpo); color: var(--txt2); border: 0; background: none; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; text-decoration: none !important; }
.abas a:hover, .abas button:hover { color: var(--txt); }
.abas .ativo { color: var(--cor); border-bottom-color: var(--cor); }
.progresso { height: 8px; border-radius: 99px; background: var(--neutro-bg); overflow: hidden; }
.progresso > i { display: block; height: 100%; border-radius: 99px; background: var(--cor); transition: width .4s; }
.progresso.aviso > i { background: var(--aviso); } .progresso.erro > i { background: var(--erro); }
.lista-def { display: grid; grid-template-columns: minmax(84px, min(180px, 38%)) minmax(0, 1fr); gap: 10px 16px; margin: 0; }
.lista-def dt { color: var(--mudo); font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; } .lista-def dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cor-amostra { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; border: 1px solid var(--borda-forte); }
.linha-tempo { list-style: none; padding: 0; margin: 0; }
.linha-tempo li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--borda); margin-left: 6px; font-size: .88rem; }
.linha-tempo li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--sup); border: 3px solid var(--cor); }

/* ---------- Dropdown, modal, toast, busca ---------- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--sup); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra-2); padding: 6px; z-index: 60; display: none; }
.dropdown-menu.aberto { display: block; animation: surge .14s ease-out; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 9px; color: var(--txt); font: 500 .9rem var(--f-corpo); border: 0; background: none; cursor: pointer; text-decoration: none !important; text-align: left; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--neutro-bg); }
.dropdown-menu hr { margin: 6px 0; }
.dropdown-cab { padding: 10px 12px 8px; font-size: .82rem; color: var(--mudo); }
.dropdown-cab b { display: block; color: var(--txt); font-size: .95rem; }
@keyframes surge { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sino-lista { width: 360px; max-width: calc(100vw - 24px); padding: 0; }
.sino-item { display: block !important; padding: 12px 16px !important; border-radius: 0 !important; border-bottom: 1px solid var(--borda); }
.sino-item.nova { background: var(--cor-xl); } .sino-item b { display: block; font-size: .9rem; } .sino-item span { font-size: .82rem; color: var(--txt2); } .sino-item small { color: var(--mudo); }
dialog.modal { border: 0; border-radius: 18px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); background: var(--sup); color: var(--txt); box-shadow: var(--sombra-3); }
dialog.modal::backdrop { background: rgb(7 28 50 / .55); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: surge .18s ease-out; }
.modal-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 8px; } .modal-topo h3, .modal-topo h2 { margin: 0; font-size: 1.1rem; }
.modal-corpo { padding: 8px 22px 18px; overflow: auto; } .modal-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--borda); background: var(--sup2); }
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 36px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; background: var(--sup); border: 1px solid var(--borda); border-left: 5px solid var(--info); border-radius: 12px; box-shadow: var(--sombra-2); animation: entra .25s ease-out; font-size: .92rem; }
.toast.ok { border-left-color: var(--ok); } .toast.erro { border-left-color: var(--erro); } .toast.aviso { border-left-color: var(--aviso); }
.toast .ic { margin-top: 2px; } .toast.ok .ic { color: var(--ok); } .toast.erro .ic { color: var(--erro); } .toast.aviso .ic { color: var(--aviso); } .toast.info .ic { color: var(--info); }
.toast button { margin-left: auto; border: 0; background: none; color: var(--mudo); cursor: pointer; padding: 0 0 0 6px; }
@keyframes entra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.paleta { position: fixed; inset: 0; z-index: 90; display: none; align-items: flex-start; justify-content: center; padding: 11vh 14px 14px; background: rgb(7 28 50 / .55); backdrop-filter: blur(3px); }
.paleta.aberta { display: flex; }
.paleta-caixa { width: min(640px, 100%); background: var(--sup); border-radius: 18px; box-shadow: var(--sombra-3); overflow: hidden; border: 1px solid var(--borda); animation: surge .15s ease-out; }
.paleta-campo { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--borda); color: var(--mudo); }
.paleta-campo input { flex: 1; height: 58px; border: 0; background: none; color: var(--txt); font: 500 1.05rem var(--f-corpo); outline: none; }
.paleta-lista { max-height: 52vh; overflow: auto; padding: 8px; }
.paleta-grupo { padding: 10px 12px 4px; font: 700 .7rem var(--f-corpo); text-transform: uppercase; letter-spacing: .08em; color: var(--mudo); }
.paleta-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--txt); text-decoration: none !important; cursor: pointer; }
.paleta-item.sel, .paleta-item:hover { background: var(--cor-l); }
.paleta-item small { color: var(--mudo); display: block; }
.paleta-dica { padding: 10px 16px; border-top: 1px solid var(--borda); font-size: .78rem; color: var(--mudo); display: flex; gap: 14px; background: var(--sup2); }

/* ---------- Detalhes (mestre-detalhe) ---------- */
.itens-tabela td { padding: 6px 8px; vertical-align: top; } .itens-tabela .input, .itens-tabela .select { height: 38px; }
.itens-tabela .acoes { width: 44px; }

/* ---------- Painel / checklist ---------- */
.boas-vindas { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--cor), color-mix(in srgb, var(--cor) 60%, #000)); color: #fff; border-radius: 18px; padding: 26px 28px; margin-bottom: 20px; }
.boas-vindas::after { content: ""; position: absolute; right: -40px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgb(255 255 255 / .22), transparent 65%); }
.boas-vindas h1 { color: #fff; margin-bottom: 4px; } .boas-vindas p { margin: 0; opacity: .85; }
.passos { display: grid; gap: 10px; }
.passo { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; text-decoration: none !important; color: inherit; }
.passo:hover { border-color: var(--cor); background: var(--cor-xl); }
.passo .marca-passo { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--borda-forte); display: grid; place-items: center; color: transparent; flex: none; }
.passo.feito .marca-passo { background: var(--ok); border-color: var(--ok); color: #fff; } .passo.feito .cresce { color: var(--mudo); }
.passo b { display: block; } .passo span { font-size: .85rem; color: var(--txt2); }
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.atalho { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border-radius: 14px; background: var(--sup); border: 1px solid var(--borda); color: var(--txt); font-weight: 650; font-size: .88rem; text-decoration: none !important; text-align: center; transition: .15s; }
.atalho:hover { border-color: var(--cor); transform: translateY(-2px); box-shadow: var(--sombra-2); }
.atalho .ic { width: 28px; height: 28px; color: var(--cor); }

/* ---------- Planos / assinatura ---------- */
.plano { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: 18px; border: 1px solid var(--borda); background: var(--sup); }
.plano.destaque { border: 2px solid var(--cor); box-shadow: var(--sombra-2); }
.plano.atual { background: var(--cor-xl); }
.plano .etiqueta { position: absolute; top: -12px; left: 24px; background: var(--cor); color: var(--cor-txt); font: 700 .68rem var(--f-corpo); letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 99px; }
.plano .preco { font: 800 2rem var(--f-titulo); letter-spacing: -.03em; } .plano .preco small { font: 500 .85rem var(--f-corpo); color: var(--mudo); }
.plano ul { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 8px; flex: 1; font-size: .9rem; }
.plano li { display: flex; gap: 8px; } .plano li .ic { color: var(--ok); margin-top: 2px; }

/* ---------- Telas de autenticação ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--bg); }
.auth-lado { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 10% 0%, color-mix(in srgb, var(--cor) 80%, #fff) 0, transparent 60%), linear-gradient(160deg, var(--cor), color-mix(in srgb, var(--cor) 55%, #000)); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-lado::before, .auth-lado::after { content: ""; position: absolute; border-radius: 50%; background: rgb(255 255 255 / .07); }
.auth-lado::before { width: 520px; height: 520px; right: -180px; bottom: -160px; } .auth-lado::after { width: 280px; height: 280px; left: -90px; top: 38%; }
.auth-lado .marca { color: #fff; position: relative; z-index: 1; } .auth-lado .marca-logo { background: #fff; color: var(--cor); }
.auth-lado h2 { font-size: 2rem; font-weight: 800; color: #fff; max-width: 15em; position: relative; z-index: 1; line-height: 1.2; }
.auth-lado ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; position: relative; z-index: 1; opacity: .95; }
.auth-lado li { display: flex; gap: 12px; align-items: flex-start; } .auth-lado li .ic { margin-top: 3px; color: var(--creme); }
.auth-lado small { opacity: .7; position: relative; z-index: 1; }
.auth-form { display: grid; place-items: center; padding: 32px 20px; }
.auth-caixa { width: min(440px, 100%); }
.auth-caixa h1 { font-size: 1.7rem; } .auth-caixa .sub { color: var(--txt2); margin-bottom: 24px; }
.auth-caixa .marca { display: none; margin-bottom: 28px; }
.auth-rodape { text-align: center; margin-top: 22px; color: var(--txt2); font-size: .9rem; }
.forca { display: flex; gap: 4px; margin-top: 4px; } .forca i { flex: 1; height: 4px; border-radius: 4px; background: var(--neutro-bg); } .forca i.on1 { background: var(--erro); } .forca i.on2 { background: var(--aviso); } .forca i.on3 { background: var(--ok); }
.codigo-otp { text-align: center; letter-spacing: .5em; font: 700 1.6rem var(--f-titulo); height: 56px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Skeleton ---------- */
.skel { background: linear-gradient(90deg, var(--neutro-bg) 25%, var(--sup2) 37%, var(--neutro-bg) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; border-radius: 8px; }
@keyframes skel { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topo { padding: 0 16px; } .conteudo { padding: 18px 16px; }
}
@media (max-width: 900px) {
  .app, .app.mini { grid-template-columns: 1fr; }
  .btn { max-width: 100%; white-space: normal; height: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; text-align: center; } /* rótulo longo quebra em vez de gerar rolagem lateral (auditoria 1.15) */
  .lateral { z-index: 50; position: fixed; left: 0; top: 0; bottom: 0; width: min(310px, 86vw); transform: translateX(-102%); transition: transform .25s ease; box-shadow: var(--sombra-3); }
  .lateral.aberta { transform: none; }
  .app.mini .lateral .rot, .app.mini .lateral-rodape .rot { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .app.mini .nav-grupo, .app.mini .seta, .app.mini .marca span { display: revert; }
  .app.mini .nav-item { justify-content: flex-start; padding: 9px 10px; }
  .topo-busca { flex: 0 0 auto; width: 40px; padding: 0; justify-content: center; } .topo-busca span, .topo-busca kbd { display: none; }
  .contexto .rot { display: none; } .contexto { padding: 6px 10px; }
  .menu-usuario .rot { display: none; }
  .nav-baixo { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-baixo); z-index: 35; background: var(--sup); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; }
  .nav-baixo a, .nav-baixo button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 650 .68rem var(--f-corpo); color: var(--mudo); border: 0; background: none; text-decoration: none !important; cursor: pointer; }
  .nav-baixo .ativo { color: var(--cor); } .nav-baixo .ic { width: 23px; height: 23px; }
  .nav-baixo .destaque { position: relative; top: -14px; } .nav-baixo .destaque span { width: 52px; height: 52px; border-radius: 50%; background: var(--cor); color: var(--cor-txt); display: grid; place-items: center; box-shadow: 0 6px 16px color-mix(in srgb, var(--cor) 45%, transparent); }
  .conteudo { padding-bottom: calc(var(--nav-baixo) + 28px); }
  .toasts { bottom: calc(var(--nav-baixo) + 12px); }
  .auth { grid-template-columns: 1fr; } .auth-lado { display: none; } .auth-caixa .marca { display: flex; }
}
@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; }
  .form-grade { gap: 14px; } [class*="col-"] { grid-column: span 12; }
  .col-m6 { grid-column: span 6 !important; }
  .pagina-topo { align-items: stretch; } .pagina-acoes { width: 100%; } .pagina-acoes .btn { flex: 1; }
  .so-desktop { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  h1 { font-size: 1.35rem; }
  .lista-def { grid-template-columns: 1fr; gap: 2px; } .lista-def dd { margin-bottom: 10px; }
  .barra-filtros .campo { min-width: calc(50% - 6px); flex: 1; }
  /* tabela vira lista de cartões */
  .tabela.cartoes thead { display: none; }
  .tabela.cartoes, .tabela.cartoes tbody, .tabela.cartoes tr, .tabela.cartoes td { display: block; width: 100%; }
  .tabela.cartoes tr { padding: 12px 14px; border-bottom: 8px solid var(--bg); position: relative; }
  .tabela.cartoes td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 14px; text-align: right; }
  .tabela.cartoes td::before { content: attr(data-rot); color: var(--mudo); font-size: .78rem; font-weight: 650; text-align: left; flex: none; }
  .tabela.cartoes td.acoes { justify-content: flex-end; width: 100%; padding-top: 8px; } .tabela.cartoes td.acoes::before { display: none; }
  .tabela.cartoes td.titulo-cartao { font-size: 1rem; text-align: left; } .tabela.cartoes td.titulo-cartao::before { display: none; }
  .tabela.cartoes td a:not(.btn):not(.btn-icone) { text-decoration: underline; text-underline-offset: 2px; }   /* 1.17.0: link no cartão não se distingue só pela cor (WCAG 1.4.1) */
  dialog.modal { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: 92vh; }
  .paleta { padding-top: 6vh; }
  .boas-vindas { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Impressão ---------- */
@media print {
  .lateral, .topo, .nav-baixo, .toasts, .pagina-acoes, .barra-filtros, .paginacao, .btn, .rodape-app, .migalhas, .tab-exp { display: none !important; }
  .alerta-suporte { display: none !important; }
  html, body { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .app { display: block; min-height: 0 !important; height: auto !important; } body { background: #fff; color: #000; font-size: 11pt; }
  .conteudo { padding: 0; max-width: none; } .card { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* Exportar a tabela da tela (assets/js/exportar.js) */
.tab-exp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; margin: 0 0 6px; }
.tab-exp-rot { margin-right: 2px; }

/* Consulta automática de CEP/CNPJ (assets/js/consulta.js) */
.consulta-msg { display: block; margin-top: 4px; font-size: .8rem; color: var(--mudo); }
.consulta-msg[data-estado="ok"] { color: var(--ok, #1a7f4b); }
.consulta-msg[data-estado="erro"] { color: var(--erro, #b8404d); }
.consulta-msg[data-estado="aviso"] { color: #8a5a00; font-weight: 600; }
.consulta-msg[data-estado="busca"]::after { content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .4em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: consulta-gira .7s linear infinite; }
@keyframes consulta-gira { to { transform: rotate(360deg); } }

/* =========================================================================
   Marca LACTOS360 (1.29.0): barra lateral em azul profundo, logotipo oficial, login em azul/ciano.
   A lateral redefine os tokens só dentro dela: o resto do app segue claro (ou escuro, no tema escuro) e a cor da empresa não a afeta.
   ========================================================================= */
.lateral {
  --txt: #FFFFFF; --txt2: rgb(255 255 255 / .86); --mudo: #A9C6DD;
  --sup: #0A3158; --sup2: rgb(255 255 255 / .09); --borda: rgb(255 255 255 / .14); --borda-forte: rgb(255 255 255 / .28);
  --cor: #8FDDF5; --cor-t: #8FDDF5; --cor-l: rgb(8 169 213 / .26); --cor-xl: rgb(255 255 255 / .09); --cor-txt: #0A3158;
  background: var(--azul-prof); border-right: 0; color: #fff;
}
:root[data-tema="escuro"] .lateral { --sup: #061A2E; background: #061A2E; border-right: 1px solid var(--borda); }
.lateral .marca { color: #fff; }
.marca-completa { display: block; height: 34px; width: auto; max-width: 100%; }
.marca-simbolo { display: none; height: 34px; width: auto; }
.app.mini .marca-completa { display: none; } .app.mini .marca-simbolo { display: block; }
.marca .marca-logo.tem-img { background: #fff; padding: 4px 8px; border-radius: 8px; max-width: 150px; }
.marca .marca-logo.tem-img img { max-height: 32px; max-width: 134px; }
.nav-item { font-weight: 400; }
.nav-item.ativo, .nav-item.ativo:hover { background: rgb(8 169 213 / .24); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--ciano); }
.nav-sub { border-left-color: rgb(255 255 255 / .16); }
.nav-sub a.ativo, .nav-linha > a.ativo { color: #fff; background: rgb(8 169 213 / .22); font-weight: 700; }
.nav-item:hover, .nav-sub a:hover, .nav-linha > a:hover { color: #fff; }
.nav-grupo { color: #A9C6DD; }
.nav-fazer { border: 1px dashed rgb(255 255 255 / .4); background: rgb(255 255 255 / .07); color: #fff; }
.nav-fazer:hover { background: rgb(255 255 255 / .14); }
.pill-plano { background: var(--ciano); color: #052642; }
.lateral .nav-item:focus-visible, .lateral a:focus-visible, .lateral button:focus-visible { outline-color: #fff; }
.lateral .nav-estrela.on { color: #F2C260; }
.lateral-rodape { border-top-color: rgb(255 255 255 / .14); }
.lateral-rodape .nav-item[style] { background: rgb(255 255 255 / .09) !important; }
/* barra superior e título no estilo da marca */
.pagina-topo h1 { font-weight: 900; color: var(--txt); letter-spacing: -.015em; }
.btn-pri { box-shadow: 0 1px 2px rgb(10 49 88 / .2); }
/* login */
.auth-lado { background: radial-gradient(900px 520px at 100% 0%, rgb(8 169 213 / .28) 0, transparent 60%), linear-gradient(165deg, #0A3158 0%, #082744 100%); }
.auth-lado::before, .auth-lado::after { background: none; border-radius: 50%; }
.auth-lado::before { width: 640px; height: 640px; right: -260px; bottom: -280px; border: 56px solid rgb(20 108 194 / .55); }
.auth-lado::after { width: 380px; height: 380px; right: -120px; bottom: -120px; left: auto; top: auto; border: 40px solid rgb(8 169 213 / .7); }
.auth-lado li .ic { color: var(--ciano); }
.auth-lado .marca-completa { height: 44px; }
.auth-caixa .marca-completa { height: 40px; }
.auth-lado small { opacity: .75; }

/* 1.29.1: logotipo da empresa + LACTOS360 lado a lado na lateral; barras de rolagem no estilo da marca */
.marca { gap: 10px; min-width: 0; }
.marca .marca-logo.tem-img { max-width: 100px; flex: none; }
.marca .marca-logo.tem-img img { max-width: 84px; max-height: 30px; }
.marca-pequena { height: 24px; width: auto; flex: none; opacity: .95; }
.app.mini .marca-pequena { display: none; }
.app.mini .marca .marca-logo.tem-img { max-width: 52px; padding: 4px; }
.app.mini .marca .marca-logo.tem-img img { max-width: 44px; }
:root { scrollbar-color: #B3C6D4 transparent; }
:root[data-tema="escuro"] { scrollbar-color: #2D5880 transparent; }
.lateral, .lateral-nav { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .30) transparent; }
.lateral-nav:hover { scrollbar-color: rgb(255 255 255 / .48) transparent; }

/* 1.32.2 — peças comuns que estavam no CSS de um módulo só e eram usadas por telas de outros módulos */
.lista-simples { margin: 0 0 .5em; padding-left: 1.1em; display: grid; gap: 6px; color: var(--txt2); }
.acoes-linha { white-space: nowrap; text-align: right; }
.acoes-linha > * { vertical-align: middle; }
.tabela .acoes .so-mobile { display: none; }   /* texto dos botões só no celular, onde a linha vira cartão */
.tabela .acoes .btn + .btn { margin-left: 4px; }
@media (max-width: 760px) { .tabela .acoes .so-mobile { display: inline; } }

/* 1.32.2 — campo relacional (busca com lista) em janela */
.autocomplete-janela input[type=text] { cursor: pointer; }
.modal-escolha { width: min(540px, 94vw); padding: 0; border: 0; border-radius: 16px; background: var(--sup); color: var(--txt); box-shadow: var(--sombra-3); }
.modal-escolha::backdrop { background: rgb(10 49 88 / .4); }
.modal-escolha .escolha-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 8px; }
.modal-escolha .escolha-topo b { font: 800 1.02rem var(--f-corpo); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-escolha .escolha-topo button { border: 0; background: transparent; color: var(--mudo); font-size: 1.5rem; line-height: 1; width: 36px; height: 36px; border-radius: 99px; cursor: pointer; }
.modal-escolha .escolha-topo button:hover { background: var(--sup2); color: var(--txt); }
.modal-escolha .escolha-busca { display: flex; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 6px 10px; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--sup2); color: var(--mudo); }
.modal-escolha .escolha-busca input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--txt); font: 450 1rem var(--f-corpo); height: 30px; }
.modal-escolha .escolha-lista { max-height: min(56vh, 460px); overflow-y: auto; padding: 4px 8px 10px; overscroll-behavior: contain; }
.modal-escolha .escolha-lista button { display: block; width: 100%; text-align: left; padding: 11px 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--txt); font: inherit; overflow-wrap: anywhere; }
.modal-escolha .escolha-lista button:hover, .modal-escolha .escolha-lista button.sel { background: var(--cor-l); }
.modal-escolha .escolha-lista button.atual { font-weight: 700; box-shadow: inset 3px 0 0 var(--cor); }
.modal-escolha .escolha-lista .vazio { padding: 14px 12px; color: var(--mudo); }
.modal-escolha .escolha-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px 12px; border-top: 1px solid var(--borda); }

/* 1.32.2 — margem pequena em cima (antes só existia dentro do CSS do treinamento) */
.mt-s { margin-top: 8px; }

/* 1.38.0 — consulta rápida de produto (F2) */
.modal-consulta { width: min(960px, 96vw); max-height: min(86vh, 760px); padding: 0; border: 0; border-radius: 16px; background: var(--sup); color: var(--txt); box-shadow: var(--sombra-3); overflow: hidden; }
.modal-consulta[open] { display: flex; flex-direction: column; }
.modal-consulta:not([open]) { display: none; }
.modal-consulta::backdrop { background: rgb(10 49 88 / .4); }
.modal-consulta .cr-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 8px; }
.modal-consulta .cr-topo b { font: 800 1.05rem var(--f-corpo); }
.modal-consulta .cr-topo button { border: 0; background: transparent; color: var(--mudo); font-size: 1.5rem; line-height: 1; width: 38px; height: 38px; border-radius: 99px; cursor: pointer; }
.modal-consulta .cr-topo button:hover { background: var(--sup2); color: var(--txt); }
.modal-consulta .cr-busca { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 8px 12px; border: 1px solid var(--borda-forte); border-radius: 12px; background: var(--sup2); color: var(--mudo); }
.modal-consulta .cr-busca:focus-within { border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-l); }
.modal-consulta .cr-busca input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--txt); font: 500 1.1rem var(--f-corpo); height: 34px; }
.modal-consulta .cr-corpo { overflow-y: auto; padding: 0 10px 8px; flex: 1 1 auto; min-height: 120px; overscroll-behavior: contain; }
.modal-consulta .cr-vazio { padding: 28px 12px; text-align: center; color: var(--mudo); }
.modal-consulta .cr-cab, .modal-consulta .cr-item { display: grid; grid-template-columns: minmax(0, 1fr) repeat(auto-fit, minmax(130px, 150px)); gap: 6px 14px; align-items: center; padding: 10px 10px; }
.modal-consulta .cr-cab { position: sticky; top: 0; z-index: 1; background: var(--sup); font: 700 .74rem var(--f-corpo); letter-spacing: .04em; text-transform: uppercase; color: var(--mudo); border-bottom: 1px solid var(--borda); padding-top: 4px; padding-bottom: 6px; }
.modal-consulta .cr-item { border-bottom: 1px solid var(--borda); border-radius: 8px; }
.modal-consulta .cr-item.sel, .modal-consulta .cr-item:hover { background: var(--cor-l); }
.modal-consulta .cr-item.inativo { color: var(--mudo); }
.modal-consulta .num { text-align: right; }
.modal-consulta .cr-prod { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.modal-consulta .cr-prod a { color: inherit; text-decoration: none; }
.modal-consulta .cr-prod a:hover { text-decoration: underline; }
.modal-consulta .cr-cod { font-weight: 800; font-variant-numeric: tabular-nums; }
.modal-consulta .cr-marca { color: var(--mudo); font-size: .86rem; }
.modal-consulta .cr-tag { display: inline-block; font: 700 .68rem var(--f-corpo); padding: 1px 7px; border-radius: 99px; background: var(--sup2); color: var(--mudo); text-transform: uppercase; letter-spacing: .03em; }
.modal-consulta .cr-val { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.modal-consulta .cr-val b { font-size: 1.02rem; }
.modal-consulta .cr-val small { color: var(--mudo); font-size: .76rem; }
.modal-consulta .cr-est b { font-size: 1.12rem; }
.modal-consulta .cr-est b[data-tom="baixo"] { color: var(--aviso); }
.modal-consulta .cr-est b[data-tom="zero"] { color: var(--erro); }
.modal-consulta .cr-est b[data-tom="mudo"] { color: var(--mudo); font-weight: 600; }
.modal-consulta .cr-dica { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--borda); color: var(--mudo); font-size: .8rem; }
@media (max-width: 760px) {
  .modal-consulta { width: 100vw; max-width: 100vw; max-height: 94vh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .modal-consulta .cr-cab { display: none; }
  .modal-consulta .cr-item { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 8px; }
  .modal-consulta .cr-item .cr-prod { grid-column: 1 / -1; }
  .modal-consulta .cr-val { align-items: flex-start; }
  .modal-consulta .cr-val::before { content: attr(data-rot); font: 700 .68rem var(--f-corpo); text-transform: uppercase; letter-spacing: .04em; color: var(--mudo); }
  .modal-consulta .num { text-align: left; }
  .modal-consulta .cr-dica { display: none; }
}
/* 1.46.0 — acerto rápido de estoque (F4): reaproveita o modal da consulta rápida */
.modal-acerto { width: min(860px, 96vw); }
.modal-acerto .ac-corpo { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 0 16px 14px; overscroll-behavior: contain; }
.modal-acerto .ac-corpo > * { flex-shrink: 0; }
.modal-acerto .ac-corpo > .ac-lista { flex-shrink: 1; min-height: 120px; }
.modal-acerto .cr-busca { margin: 0 0 8px; }
.modal-acerto .cr-corpo { padding: 0; }
.modal-acerto .cr-dica { margin: 0 -16px -14px; }
.modal-acerto .ac-res { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 10px; border: 0; border-bottom: 1px solid var(--borda); background: transparent; color: var(--txt); border-radius: 8px; cursor: pointer; font: 500 1rem var(--f-corpo); }
.modal-acerto .ac-res.sel, .modal-acerto .ac-res:hover { background: var(--cor-l); }
.modal-acerto .ac-res-nome { min-width: 0; overflow-wrap: anywhere; }
.modal-acerto .ac-res-sal { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.modal-acerto .ac-res-sal[data-tom="zero"] { color: var(--erro); }
.modal-acerto .ac-res-sal[data-tom="baixo"] { color: var(--aviso); }
.modal-acerto .ac-prod { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0 8px; }
.modal-acerto .ac-prod small { color: var(--mudo); }
.modal-acerto .ac-linha-dep { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.modal-acerto .ac-linha-dep label { font-weight: 700; white-space: nowrap; }
.modal-acerto .ac-linha-dep .select { flex: 1; min-width: 0; }
.modal-acerto .ac-cab, .modal-acerto .ac-lin { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(90px, .8fr) minmax(170px, 1.2fr) minmax(90px, .8fr); gap: 6px 12px; align-items: center; padding: 8px 8px; }
.modal-acerto .ac-cab { font: 700 .74rem var(--f-corpo); letter-spacing: .04em; text-transform: uppercase; color: var(--mudo); border-bottom: 1px solid var(--borda); }
.modal-acerto .ac-lin { border-bottom: 1px solid var(--borda); }
.modal-acerto .ac-rot { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.modal-acerto .ac-rot small, .modal-acerto .ac-sis small { color: var(--mudo); font-size: .78rem; }
.modal-acerto .ac-st { color: var(--aviso) !important; font-weight: 700; }
.modal-acerto .num { text-align: right; font-variant-numeric: tabular-nums; }
.modal-acerto .ac-cont { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.modal-acerto .ac-cont input, .modal-acerto .ac-extra input, .modal-acerto .ac-novo-campos input { height: 40px; padding: 0 10px; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--sup2); color: var(--txt); font: 600 1rem var(--f-corpo); min-width: 0; }
.modal-acerto .ac-cont input { width: 100%; max-width: 130px; text-align: right; font-size: 1.1rem; }
.modal-acerto input:focus { outline: none; border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-l); }
.modal-acerto .cr-busca input:focus { border: 0; box-shadow: none; }
.modal-acerto .cr-busca input { border: 0; background: transparent; }
.modal-acerto .ac-dif { font-weight: 800; }
.modal-acerto .ac-dif[data-tom="mais"] { color: var(--ok); }
.modal-acerto .ac-dif[data-tom="menos"] { color: var(--erro); }
.modal-acerto .ac-dif[data-tom="erro"] { color: var(--erro); font-weight: 600; font-size: .82rem; }
.modal-acerto .ac-novo { background: var(--cor-l); border-radius: 10px; }
.modal-acerto .ac-novo-campos { gap: 6px; }
.modal-acerto .ac-novo-campos label { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--mudo); }
.modal-acerto .ac-add { padding: 10px 8px 0; }
.modal-acerto .ac-prev { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--sup2); min-height: 20px; }
.modal-acerto .ac-prev ul { margin: 6px 0 0; padding-left: 18px; }
.modal-acerto .ac-prev small { color: var(--mudo); }
.modal-acerto .ac-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.modal-acerto .ac-extra label { display: flex; flex-direction: column; gap: 4px; font: 700 .8rem var(--f-corpo); color: var(--mudo); }
.modal-acerto .ac-extra label[hidden] { display: none; }
.modal-acerto .ac-extra input { width: 100%; font-weight: 500; }
.modal-acerto .ac-rodape { position: sticky; bottom: 0; background: var(--sup); padding: 10px 0 2px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.modal-acerto .ac-dica-fim { margin-right: auto; color: var(--mudo); font-size: .8rem; }
.modal-acerto .ac-ok { text-align: center; padding: 18px 8px 4px; }
.modal-acerto .ac-ok-ic { color: var(--ok); font-size: 2.4rem; }
.modal-acerto .ac-ok-ic .ic { width: 44px; height: 44px; }
.modal-acerto .ac-movs { list-style: none; padding: 0; margin: 10px 0; text-align: left; display: inline-block; }
.modal-acerto .alerta { text-align: left; margin-top: 8px; }
.modal-acerto .mudo { color: var(--mudo); }
@media (max-width: 760px) {
  .modal-acerto { width: 100vw; }
  .modal-acerto .ac-cab { display: none; }
  .modal-acerto .ac-lin { grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px 6px; }
  .modal-acerto .ac-lin .ac-rot { grid-column: 1 / -1; }
  .modal-acerto .ac-lin .num, .modal-acerto .ac-lin .ac-cont { text-align: left; justify-content: flex-start; }
  .modal-acerto .ac-lin [data-rot]::before { content: attr(data-rot); display: block; font: 700 .68rem var(--f-corpo); text-transform: uppercase; letter-spacing: .04em; color: var(--mudo); }
  .modal-acerto .ac-cont { flex-wrap: wrap; }
  .modal-acerto .ac-cont::before { flex-basis: 100%; }
  .modal-acerto .ac-cont input { max-width: none; flex: 1; }
  .modal-acerto .ac-dica-fim, .modal-acerto .cr-dica { display: none; }
}
@media print { .modal-consulta, .modal-acerto { display: none !important; } }