/* =======================================================
   ZIVAZI · VISUAL DO PAINEL
   Inspirado no visual do Fix360 (modelo "planilha"): cabeçalho escuro fino,
   menu logo abaixo do cabeçalho, listas compactas, números em fonte mono, cantos pequenos,
   sombras quase nulas. Cores da logo: azul-marinho na estrutura, laranja
   nas ações. Prefixo zn- para não colidir com o zivazi.css atual.
   Carregado pelo include/header.php em todas as telas do painel (body.zn),
   depois do zivazi.css. A camada no fim traduz os componentes zv-* para este visual.
   ======================================================= */

body.zn {
    /* Estrutura (azul da logo escurecido) */
    --zn-head: #0F2A44; --zn-head-ink: #BFD0E2; --zn-head-line: #27476A; --zn-head-hover: #18395A;
    /* Ação (laranja da logo) e informação (azul da logo) */
    --zn-acao: #E8650C; --zn-acao-hover: #CC5605; --zn-acao-suave: #FFF1E6;
    --zn-azul: #1EA0F2; --zn-azul-texto: #0A6FAF; --zn-azul-suave: #E6F3FC;
    /* Neutros */
    --zn-fundo: #F3F5F7; --zn-sup: #FFFFFF; --zn-tinta: #1D2426; --zn-apagado: #5E6A6E; --zn-fraco: #8A9599;
    --zn-linha: #E1E5EA; --zn-linha-suave: #EDF0F3; --zn-ctrl: #CFD6DD; --zn-linha-forte: #C9D0D7; --zn-linha-row: #E7EBEE;
    --zn-rotulo: #56626C; --zn-hover: #F6F8FB; --zn-grupo: #EDF0F3;
    --zn-ok: #1F8A4C; --zn-aviso: #C98A12; --zn-perigo: #B42318; --zn-off: #98A2AB;
    --zn-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
    --zn-cab-h: 52px; --zn-menu-h: 44px; --zn-topo-h: calc(var(--zn-cab-h) + var(--zn-menu-h));

    margin: 0;
    min-height: 100vh;
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--zn-tinta);
    background: var(--zn-fundo);
    -webkit-font-smoothing: antialiased;
}
body.zn *, body.zn *::before, body.zn *::after { box-sizing: border-box; }
body.zn a { color: inherit; text-decoration: none; }
body.zn :focus-visible { outline: 2px solid var(--zn-azul); outline-offset: 2px; }
body.zn button { font-family: inherit; }

/* ============ CABEÇALHO ============ */
.zn-cab { position: sticky; top: 0; z-index: 50; height: var(--zn-cab-h); color: var(--zn-head-ink); background: var(--zn-head); }
.zn-cab-in { display: flex; align-items: center; gap: 12px; max-width: 1600px; height: 100%; margin: 0 auto; padding: 0 16px; }
.zn-esq { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; }
.zn-dir { display: flex; flex: none; align-items: center; gap: 8px; }
.zn-marca { display: flex; flex: none; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #fff !important; }
.zn-logo { display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; background: #fff; border-radius: 7px; }
.zn-logo img { width: 24px; height: 24px; object-fit: contain; }
.zn-sep { flex: none; font-size: 18px; color: var(--zn-head-line); }
.zn-pagina { min-width: 0; overflow: hidden; font-weight: 600; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.zn-icone-cab { position: relative; display: grid; flex: none; place-items: center; width: 36px; height: 36px; color: #fff !important; background: transparent; border: 1px solid var(--zn-head-line); border-radius: 8px; cursor: pointer; }
.zn-icone-cab:hover { background: var(--zn-head-hover); }
.zn-usuario { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; color: #fff; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.zn-usuario:hover { background: var(--zn-head-hover); }
.zn-usuario b { display: block; font-size: 14px; font-weight: 600; line-height: 1.15; text-align: left; }
.zn-usuario small { display: block; font-size: 12px; line-height: 1.15; color: var(--zn-head-ink); text-align: left; }
.zn-avatar { display: grid; flex: none; place-items: center; width: 32px; height: 32px; font-size: 12px; font-weight: 700; color: var(--zn-head); background: #fff; border-radius: 50%; }
.zn-menu-usuario { position: absolute; top: calc(100% + 8px); right: 0; z-index: 99; min-width: 230px; padding: 6px; color: var(--zn-tinta); background: #fff; border: 1px solid var(--zn-linha); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 32, 58, .16); }
.zn-menu-usuario a, .zn-menu-usuario button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; font-size: 14px; color: var(--zn-tinta); text-align: left; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.zn-menu-usuario a:hover, .zn-menu-usuario button:hover { background: var(--zn-fundo); }
.zn-menu-usuario i { width: 16px; color: var(--zn-apagado); text-align: center; }
.zn-menu-usuario hr { margin: 5px 0; border: 0; border-top: 1px solid var(--zn-linha-suave); }
.zn-menu-usuario .zn-perigo, .zn-menu-usuario .zn-perigo i { color: var(--zn-perigo); }

/* ============ MENU (barra logo abaixo do cabeçalho) ============ */
.zn-menu { position: sticky; top: var(--zn-cab-h); z-index: 49; height: var(--zn-menu-h); background: var(--zn-sup); border-bottom: 1px solid var(--zn-linha); }
.zn-menu-in { display: flex; align-items: stretch; gap: 4px; max-width: 1600px; height: 100%; margin: 0 auto; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.zn-menu-in::-webkit-scrollbar { display: none; }
.zn-menu-item { display: flex; flex: none; align-items: center; gap: 7px; padding: 0 12px; font-size: 14px; color: var(--zn-apagado) !important; white-space: nowrap; border-bottom: 2px solid transparent; }
.zn-menu-item i { font-size: 15px; }
.zn-menu-item:hover { color: var(--zn-tinta) !important; background: var(--zn-fundo); }
.zn-menu-item.ativo { font-weight: 600; color: var(--zn-tinta) !important; border-bottom-color: var(--zn-acao); }
.zn-menu-item.ativo i { color: var(--zn-acao); }
/* ============ PÁGINA E BARRA DE TÍTULO ============ */
.zn-pag { display: flex; flex-direction: column; gap: 12px; max-width: 1600px; margin: 0 auto; padding: 16px 16px 24px; }
.zn-pag-estreita { max-width: 1180px; }
.zn-barra { background: var(--zn-sup); border: 1px solid var(--zn-linha); border-radius: 8px; }
.zn-barra-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 10px; }
.zn-barra-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zn-titulo { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.zn-sub { margin: 1px 0 0; font-size: 13px; color: var(--zn-apagado); }
.zn-voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 13px; color: var(--zn-apagado) !important; }
.zn-voltar:hover { color: var(--zn-acao) !important; }
.zn-barra-ferr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--zn-linha-suave); }
.zn-cresce { flex: 1; }
.zn-abas { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.zn-aba { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 14px; color: var(--zn-apagado); white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.zn-aba:hover { color: var(--zn-tinta); }
.zn-aba.ativo { font-weight: 600; color: var(--zn-tinta); border-color: var(--zn-acao); }
.zn-aba-n { padding: 0 7px; font-family: var(--zn-mono); font-size: 11px; font-weight: 500; line-height: 18px; color: #4E5A5E; background: #E9EDEE; border-radius: 999px; }

/* ============ BOTÕES ============ */
.zn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: #2A3640 !important; white-space: nowrap; background: var(--zn-sup); border: 1px solid var(--zn-ctrl); border-radius: 5px; cursor: pointer; }
.zn-btn:hover { background: var(--zn-fundo); }
.zn-btn:disabled { opacity: .5; cursor: not-allowed; }
.zn-btn-acao { font-weight: 600; color: #fff !important; background: var(--zn-acao); border-color: var(--zn-acao); }
.zn-btn-acao:hover { background: var(--zn-acao-hover); }
.zn-btn-perigo { color: var(--zn-perigo) !important; border-color: #F0C9C3; }
.zn-btn-perigo:hover { background: #FDF1EF; }
.zn-btn-grande { height: 46px; font-size: 15.5px; }
.zn-btn-bloco { width: 100%; }
.zn-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--zn-rotulo) !important; background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.zn-ico:hover { color: var(--zn-tinta) !important; background: #fff; border-color: var(--zn-ctrl); }
.zn-ico-perigo:hover { color: var(--zn-perigo) !important; background: #FDF1EF; border-color: #F0C9C3; }

/* ============ BUSCA ============ */
.zn-busca { display: flex; align-items: center; gap: 8px; width: 300px; max-width: 100%; padding: 0 9px; background: var(--zn-sup); border: 1px solid var(--zn-ctrl); border-radius: 5px; }
.zn-busca:focus-within { border-color: var(--zn-azul); box-shadow: 0 0 0 3px var(--zn-azul-suave); }
.zn-busca i { font-size: 12px; color: var(--zn-fraco); }
.zn-busca input { flex: 1; min-width: 0; padding: 6px 0; font-family: inherit; font-size: 14px; background: transparent; border: 0; outline: 0; }

/* ============ RESUMO EM FAIXA ============ */
.zn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--zn-sup); border: 1px solid var(--zn-linha); border-radius: 8px; }
.zn-kpi { display: block; min-width: 0; padding: 10px 16px; border-right: 1px solid var(--zn-linha-suave); }
.zn-kpi:last-child { border-right: 0; }
.zn-kpi b { display: block; font-family: var(--zn-mono); font-size: 22px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.zn-kpi span { display: block; font-size: 12.5px; color: var(--zn-rotulo); }
.zn-kpi.ok b { color: var(--zn-ok); }
.zn-kpi.acao b { color: var(--zn-acao); }
.zn-kpi.aviso b { color: #9A6200; }

/* ============ TABELA (planilha) ============ */
.zn-cartao { background: var(--zn-sup); border: 1px solid var(--zn-linha); border-radius: 8px; }
.zn-rolagem { overflow-x: auto; }
.zn-tabela { width: 100%; font-size: 14px; border-collapse: collapse; }
.zn-tabela thead th { position: sticky; top: var(--zn-topo-h); z-index: 5; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--zn-rotulo); text-align: left; white-space: nowrap; background: #fff; border-bottom: 1px solid var(--zn-linha-forte); }
.zn-rolagem .zn-tabela thead th { position: static; }
.zn-tabela thead th:first-child { border-top-left-radius: 8px; }
.zn-tabela thead th:last-child { border-top-right-radius: 8px; }
.zn-tabela td { padding: 6px 10px; vertical-align: middle; border-bottom: 1px solid var(--zn-linha-row); }
.zn-tabela tbody tr:last-child td { border-bottom: 0; }
.zn-tabela .zn-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zn-linha:hover td { background: var(--zn-hover); }
.zn-linha.inativa { opacity: .55; }
.zn-linha.oculta { display: none; }
.zn-mono { font-family: var(--zn-mono); font-size: 12.5px; color: #44505A; white-space: nowrap; }
.zn-forte { font-weight: 500; color: var(--zn-tinta); }
.zn-forte a:hover { text-decoration: underline; text-underline-offset: 2px; }
.zn-fraco { color: var(--zn-off); }
.zn-miniatura { display: inline-grid; place-items: center; width: 32px; height: 32px; overflow: hidden; font-size: 12px; color: var(--zn-off); vertical-align: middle; background: var(--zn-grupo); border-radius: 5px; }
.zn-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.zn-acoes { width: 1%; text-align: right; white-space: nowrap; }
.zn-acoes-in { display: inline-flex; align-items: center; gap: 4px; }
.zn-sec { opacity: 0; }
.zn-linha:hover .zn-sec, .zn-linha:focus-within .zn-sec { opacity: 1; }
@media (hover: none) { .zn-sec { opacity: 1; } }
.zn-grupo td { padding: 7px 12px; font-weight: 600; background: var(--zn-grupo); border-top: 1px solid var(--zn-linha-forte); border-bottom: 1px solid var(--zn-linha-forte); }
.zn-grupo .zn-meta { margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--zn-rotulo); }
.zn-total td { padding: 9px 12px; font-size: 13.5px; color: #fff; background: var(--zn-head); }
.zn-total b { font-family: var(--zn-mono); font-weight: 500; }
.zn-cartao > .zn-rolagem:last-child .zn-total td:first-child { border-bottom-left-radius: 7px; }
.zn-cartao > .zn-rolagem:last-child .zn-total td:last-child { border-bottom-right-radius: 7px; }
.zn-vazio { padding: 48px 20px; text-align: center; color: var(--zn-apagado); }
.zn-vazio b { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 600; color: var(--zn-tinta); }

/* Situação: bolinha + texto */
.zn-tag { --c: var(--zn-off); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.zn-tag::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--c); border-radius: 50%; }
.zn-tag.ok { --c: var(--zn-ok); } .zn-tag.aviso { --c: var(--zn-aviso); } .zn-tag.perigo { --c: var(--zn-perigo); }
.zn-tag.azul { --c: var(--zn-azul); } .zn-tag.apagado { --c: var(--zn-off); color: var(--zn-apagado); }
.zn-pilula { display: inline-block; padding: 0 8px; font-size: 11.5px; font-weight: 600; line-height: 19px; color: #4E5A5E; white-space: nowrap; background: #E9EDEE; border-radius: 999px; }
.zn-pilula.acao { color: #9A3F02; background: var(--zn-acao-suave); }
.zn-pilula.azul { color: var(--zn-azul-texto); background: var(--zn-azul-suave); }
.zn-pilula.ok { color: #17603A; background: #E3F3E9; }
.zn-pilula.ml { color: #2D3277; background: #FFF4A3; }

/* Liga/desliga compacto (Site / PDF) */
.zn-chave { position: relative; display: inline-block; width: 30px; height: 17px; vertical-align: middle; }
.zn-chave input { position: absolute; opacity: 0; }
.zn-chave span { position: absolute; inset: 0; background: var(--zn-ctrl); border-radius: 999px; transition: .15s; cursor: pointer; }
.zn-chave span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; background: #fff; border-radius: 50%; transition: .15s; }
.zn-chave input:checked + span { background: var(--zn-ok); }
.zn-chave input:checked + span::after { transform: translateX(13px); }
.zn-chave input:focus-visible + span { outline: 2px solid var(--zn-azul); outline-offset: 2px; }

/* ============ PAINEL, FICHA E FORMULÁRIO ============ */
.zn-painel { background: var(--zn-sup); border: 1px solid var(--zn-linha); border-radius: 8px; }
.zn-painel-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--zn-linha-suave); }
.zn-painel-cab h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
.zn-painel-cab small { font-size: 13px; color: var(--zn-apagado); }
.zn-painel-corpo { padding: 14px 16px; }
.zn-painel-pe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: #FAFBFC; border-top: 1px solid var(--zn-linha-suave); border-radius: 0 0 8px 8px; }
.zn-colunas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 12px; }
.zn-pilha { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.zn-ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.zn-ficha dt { font-size: 13px; color: var(--zn-rotulo); }
.zn-ficha dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

.zn-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; }
.zn-campo { display: flex; flex-direction: column; grid-column: span 12; gap: 4px; min-width: 0; }
.zn-campo.l6 { grid-column: span 6; } .zn-campo.l4 { grid-column: span 4; } .zn-campo.l3 { grid-column: span 3; } .zn-campo.l8 { grid-column: span 8; }
.zn-campo > label, .zn-rotulo { font-size: 13px; font-weight: 500; color: #34404A; }
.zn-campo .zn-ajuda { font-size: 12.5px; color: var(--zn-apagado); }
.zn-obrig { font-weight: 600; color: var(--zn-perigo); }
.zn-campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .zn-campo select, .zn-campo textarea, .zn-input {
    width: 100%; min-width: 0; height: 36px; padding: 0 10px; font-family: inherit; font-size: 14px; color: var(--zn-tinta);
    background: #fff; border: 1px solid var(--zn-ctrl); border-radius: 5px; box-shadow: none;
}
.zn-campo textarea { height: auto; min-height: 88px; padding: 8px 10px; line-height: 1.45; resize: vertical; }
.zn-campo :is(input, select, textarea):focus, .zn-input:focus { border-color: var(--zn-azul); outline: none; box-shadow: 0 0 0 3px var(--zn-azul-suave); }
.zn-com-unidade { display: flex; }
.zn-com-unidade input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.zn-com-unidade span { display: grid; place-items: center; padding: 0 10px; font-size: 13px; color: var(--zn-rotulo); background: #F7F9FB; border: 1px solid var(--zn-ctrl); border-left: 0; border-radius: 0 5px 5px 0; }

/* Grupo de opções com cara de segmento */
.zn-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--zn-ctrl); border-radius: 5px; }
.zn-seg-op { position: relative; display: inline-flex; border-right: 1px solid var(--zn-ctrl); cursor: pointer; }
.zn-seg-op:last-child { border-right: 0; }
.zn-seg-op input { position: absolute; opacity: 0; }
.zn-seg-op span { padding: 6px 14px; font-size: 13.5px; color: #34404A; white-space: nowrap; background: #fff; }
.zn-seg-op:hover span { background: var(--zn-fundo); }
.zn-seg-op input:checked + span { font-weight: 600; color: #fff; background: var(--zn-head); }
.zn-seg-op input:focus-visible + span { outline: 2px solid var(--zn-azul); outline-offset: -2px; }
.zn-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 10px; background: #fff; border: 1px solid var(--zn-ctrl); border-radius: 5px; }
.zn-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.zn-check input { width: 16px; height: 16px; accent-color: var(--zn-acao); }

.zn-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.zn-foto { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--zn-grupo); border: 1px solid var(--zn-linha); border-radius: 6px; }
.zn-foto img { width: 100%; height: 100%; object-fit: cover; }
.zn-foto.capa { border: 2px solid var(--zn-acao); }
.zn-foto .zn-pilula { position: absolute; bottom: 4px; left: 4px; }
.zn-foto-nova { display: grid; place-items: center; aspect-ratio: 1; font-size: 12.5px; color: var(--zn-apagado); text-align: center; background: #FAFBFC; border: 1px dashed var(--zn-linha-forte); border-radius: 6px; cursor: pointer; }
.zn-foto-nova:hover { color: var(--zn-acao); border-color: var(--zn-acao); }

/* Avisos */
.zn-aviso { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 14px; border-radius: 6px; }
.zn-aviso-info { color: #0B4F7C; background: var(--zn-azul-suave); }
.zn-aviso-atencao { color: #7A4A00; background: #FFF6E5; }
.zn-aviso-erro { color: #9A2E1B; background: #FDF0EE; }
.zn-aviso-ok { color: #17603A; background: #EAF6EE; }

/* ============ TELA DE ENTRADA (login) ============ */
body.zn-entrada { background: var(--zn-sup); }
.zne { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; font-size: 15px; }
.zne-lado { position: relative; display: flex; flex-direction: column; padding: 40px 56px; overflow: hidden; color: var(--zn-head-ink); background: var(--zn-head); }
.zne-lado::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(to right, rgba(143, 180, 214, .10) 1px, transparent 1px), linear-gradient(to bottom, rgba(143, 180, 214, .10) 1px, transparent 1px);
    background-size: 120px 36px; background-position: -1px -1px;
    -webkit-mask-image: linear-gradient(135deg, #000 10%, transparent 75%); mask-image: linear-gradient(135deg, #000 10%, transparent 75%);
}
.zne-lado::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; pointer-events: none; background: radial-gradient(circle, rgba(232, 101, 12, .35), transparent 65%); }
.zne-lado > * { position: relative; z-index: 1; }
.zne-marca { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.zne-marca .zn-logo { width: 34px; height: 34px; border-radius: 8px; }
.zne-marca .zn-logo img { width: 30px; height: 30px; }
.zne-corpo { max-width: 30em; margin: auto 0; padding-block: 48px; }
.zne-frase { margin: 0 0 14px; font-size: clamp(26px, 2.5vw, 36px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.zne-frase em { font-style: normal; color: #FFB27A; }
.zne-apoio { margin: 0 0 30px; font-size: 16px; }
.zne-etapas { overflow: hidden; background: rgba(8, 24, 40, .35); border: 1px solid var(--zn-head-line); border-radius: 8px; }
.zne-etapa { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--zn-head-line); }
.zne-etapa:first-child { border-top: 0; }
.zne-n { display: grid; place-items: center; align-self: stretch; font-family: var(--zn-mono); font-size: 12px; color: #8FB4D6; background: rgba(8, 24, 40, .35); border-right: 1px solid var(--zn-head-line); }
.zne-etapa div { padding: 11px 16px; }
.zne-etapa b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.zne-etapa span { font-size: 13.5px; }
.zne-etapa em { padding-right: 16px; font-family: var(--zn-mono); font-size: 12px; font-style: normal; color: #8FB4D6; white-space: nowrap; }
.zne-lado-pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 13.5px; color: #8FB4D6; }
.zne-lado-pe a:hover { color: #fff; }
.zne-principal { display: flex; flex-direction: column; padding: 40px 56px; background: var(--zn-sup); }
.zne-form { display: flex; flex-direction: column; align-self: center; gap: 18px; width: 100%; max-width: 380px; margin: auto 0; padding-block: 32px; }
.zne-titulo { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.zne-sub { margin: 6px 0 0; font-size: 15px; color: var(--zn-apagado); }
.zne-form .zn-campo > label { font-size: 14px; }
.zne-form .zn-campo input:not([type="checkbox"]) { height: 46px; padding: 0 14px; font-size: 15.5px; }
.zne-senha { position: relative; }
.zne-senha input { padding-right: 84px !important; }
.zne-senha button { position: absolute; top: 50%; right: 6px; padding: 6px 10px; font-size: 13px; font-weight: 500; color: var(--zn-azul-texto); background: none; border: 0; border-radius: 5px; transform: translateY(-50%); cursor: pointer; }
.zne-senha button:hover { background: var(--zn-azul-suave); }
.zne-ajuda { margin: 4px 0 0; font-size: 13.5px; color: var(--zn-apagado); text-align: center; }
.zne-ajuda a { font-weight: 500; color: var(--zn-azul-texto) !important; }
.zne-pe { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12.5px; color: var(--zn-fraco); }

/* ============ CELULAR ============ */
@media (max-width: 767px) {
    .zn-pag { padding: 10px 10px 16px; }
    .zn-busca { width: 100%; }
    .zn-colunas { grid-template-columns: minmax(0, 1fr); }
    .zn-campo.l6, .zn-campo.l4, .zn-campo.l3, .zn-campo.l8 { grid-column: span 12; }
    .zn-ficha { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .zn-ficha dd { margin-bottom: 8px; }
    .zn-kpi { border-bottom: 1px solid var(--zn-linha-suave); }
    .zn-some-m { display: none !important; }

    /* Tabela vira lista: título e lado em cima, detalhe e ações embaixo */
    .zn-resp thead { display: none; }
    .zn-resp, .zn-resp tbody { display: block; }
    .zn-resp .zn-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo lado" "meta acoes"; gap: 2px 10px; padding: 9px 12px; border-bottom: 1px solid var(--zn-linha-row); }
    .zn-resp .zn-linha.oculta { display: none; }
    .zn-resp .zn-linha > td { display: none; padding: 0; background: transparent !important; border: 0; }
    .zn-resp .zn-linha > td.m-titulo { display: block; grid-area: titulo; }
    .zn-resp .zn-linha > td.m-lado { display: block; grid-area: lado; text-align: right; }
    .zn-resp .zn-linha > td.m-meta { display: block; grid-area: meta; font-size: 13px; color: var(--zn-rotulo); }
    .zn-resp .zn-linha > td.zn-acoes { display: block; grid-area: acoes; width: auto; align-self: end; }
    .zn-resp .zn-grupo, .zn-resp .zn-grupo td, .zn-resp .zn-total, .zn-resp .zn-total td { display: block; }

    .zne { grid-template-columns: minmax(0, 1fr); }
    .zne-lado { padding: 28px 22px 24px; }
    .zne-corpo { padding-block: 20px 8px; }
    .zne-etapas, .zne-lado-pe { display: none; }
    .zne-principal { padding: 8px 22px 28px; }
}
@media (min-width: 768px) {
    .zn-so-m { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { body.zn * { transition: none !important; animation: none !important; } }

/* Utilitários */
.zn-rel { position: relative; }
.zn-seta { font-size: 11px; }
.zn-sem-margem { margin: 0; }

/* Mensagens (toasts do zivazi.js) no visual novo */
.zv-toasts { position: fixed; top: 64px; right: 16px; z-index: 1090; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.zv-toast { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; font-size: 14px; color: var(--zn-tinta); background: #fff; border: 1px solid var(--zn-linha); border-left: 3px solid var(--zn-azul); border-radius: 6px; box-shadow: 0 12px 32px rgba(16, 32, 58, .16); transition: opacity .3s, transform .3s; }
.zv-toast > span { flex: 1; }
.zv-toast.saindo { opacity: 0; transform: translateX(16px); }
.zv-toast-sucesso { border-left-color: var(--zn-ok); } .zv-toast-sucesso > i { color: var(--zn-ok); }
.zv-toast-erro { border-left-color: var(--zn-perigo); } .zv-toast-erro > i { color: var(--zn-perigo); }
.zv-toast-aviso { border-left-color: var(--zn-aviso); } .zv-toast-aviso > i { color: var(--zn-aviso); }
.zv-toast-fechar { padding: 2px 4px; color: var(--zn-fraco); background: none; border: 0; cursor: pointer; }
.zn-titulo .zn-mono { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--zn-fraco); }

/* =======================================================
   CAMADA: COMPONENTES zv-* (zivazi.css) NO VISUAL DO PAINEL
   As telas usam as classes do design system anterior. Em vez de
   reescrever cada uma, esta camada reinterpreta essas classes dentro
   de body.zn (mais específico que as regras do zivazi.css).
   ======================================================= */

/* Tokens do zivazi.css apontando para os do painel */
body.zn {
    --zv-texto: var(--zn-tinta); --zv-texto-2: var(--zn-apagado); --zv-texto-3: var(--zn-fraco);
    --zv-borda: var(--zn-linha); --zv-borda-forte: var(--zn-ctrl); --zv-fundo: var(--zn-fundo); --zv-superficie-2: #F7F9FB;
    --zv-azul-escuro: var(--zn-azul-texto); --zv-azul-suave: var(--zn-azul-suave);
    --zv-laranja-escuro: var(--zn-acao); --zv-laranja-hover: var(--zn-acao-hover); --zv-laranja-suave: var(--zn-acao-suave);
    --zv-sucesso: var(--zn-ok); --zv-erro: var(--zn-perigo);
    --zv-raio-sm: 5px; --zv-raio: 8px; --zv-raio-lg: 10px;
    --zv-sombra-sm: none; --zv-sombra: 0 1px 2px rgba(16, 32, 58, .06); --zv-sombra-lg: 0 12px 32px rgba(16, 32, 58, .16);
    --zv-fonte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-family: var(--zv-fonte); --bs-body-font-size: 14px; --bs-body-color: var(--zn-tinta); --bs-body-bg: var(--zn-fundo);
    display: block;
}
body.zn h1, body.zn h2, body.zn h3 { letter-spacing: -.01em; }

/* Página e cabeçalho da página → barra de título */
body.zn .zv-page { max-width: 1600px; padding: 16px 16px 24px; }
body.zn .zv-page-estreita { max-width: 1000px; }
body.zn .zv-page-header { align-items: center; margin-bottom: 12px; padding: 12px 16px; background: var(--zn-sup); border: 1px solid var(--zn-linha); border-radius: 8px; }
body.zn .zv-page-title { gap: 8px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
body.zn .zv-page-title .zv-card-icone { width: 32px; height: 32px; font-size: 1rem; }
body.zn .zv-page-subtitle { margin-top: 1px; font-size: 13px; }

/* Indicadores → faixa com números em mono */
body.zn .zv-stats { gap: 0; margin-bottom: 12px; overflow: hidden; background: var(--zn-sup); border: 1px solid var(--zn-linha); border-radius: 8px; }
body.zn .zv-stat { padding: 10px 16px; background: none; border: 0; border-right: 1px solid var(--zn-linha-suave); border-radius: 0; box-shadow: none; }
body.zn .zv-stat:last-child { border-right: 0; }
body.zn .zv-stat .zv-card-icone { display: none; }
body.zn .zv-stat > div { display: flex; flex-direction: column-reverse; }
body.zn .zv-stat-valor { font-family: var(--zn-mono); font-size: 22px; font-weight: 500; }
body.zn .zv-stat-rotulo { font-size: 12.5px; color: var(--zn-rotulo); }

/* Cartões */
body.zn .zv-card { border-radius: 8px; box-shadow: none; }
body.zn .zv-card-header { gap: 10px; padding: 10px 16px; border-bottom-color: var(--zn-linha-suave); }
body.zn .zv-card-title { font-size: 15px; font-weight: 600; }
body.zn .zv-card-desc { font-size: 13px; }
body.zn .zv-card-body { padding: 14px 16px; }
body.zn .zv-card-icone { width: 30px; height: 30px; font-size: .95rem; border-radius: 6px; }
body.zn .zv-card-toolbar { padding: 8px 16px; border-bottom-color: var(--zn-linha-suave); }

/* Busca */
body.zn .zv-search { max-width: 300px; padding: 0 9px; background: var(--zn-sup); border-color: var(--zn-ctrl); border-radius: 5px; }
body.zn .zv-search:focus-within { box-shadow: 0 0 0 3px var(--zn-azul-suave); }
body.zn .zv-search input { padding: 6px 0; font-size: 14px; }

/* Tabelas → planilha */
body.zn .zv-table th { padding: 8px 10px; font-size: 12.5px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--zn-rotulo); background: #fff; border-bottom: 1px solid var(--zn-linha-forte); }
body.zn .zv-table td { padding: 6px 10px; font-size: 14px; border-bottom-color: var(--zn-linha-row); }
body.zn .zv-table tbody tr:hover td { background: var(--zn-hover); }
body.zn .zv-codigo, body.zn .zv-preco { font-family: var(--zn-mono); font-size: 12.5px !important; font-weight: 400; color: #44505A !important; }
body.zn .zv-thumb { width: 32px; height: 32px; border-radius: 5px; }
body.zn .zv-item-cell { gap: 10px; }
body.zn .zv-item-nome { font-weight: 500; }
body.zn .zv-meta { font-size: 12.5px; }

/* Selos → pílulas */
body.zn .zv-badge { gap: 5px; padding: 0 8px; font-size: 11.5px; line-height: 19px; }

/* Botões */
body.zn .zv-btn { gap: 6px; padding: 6px 12px; font-size: 13.5px; font-weight: 500; border-radius: 5px; box-shadow: none; }
body.zn .zv-btn-primario { font-weight: 600; background: var(--zn-acao); border-color: var(--zn-acao); }
body.zn .zv-btn-primario:hover { background: var(--zn-acao-hover); box-shadow: none; }
body.zn .zv-btn-contorno { color: #2A3640; border-color: var(--zn-ctrl); }
body.zn .zv-btn-azul { background: var(--zn-head); }
body.zn .zv-btn-azul:hover { background: var(--zn-head-hover); }
body.zn .zv-btn-sm { padding: 3px 9px; font-size: 12.5px; }
body.zn .zv-btn-lg { padding: 9px 18px; font-size: 14.5px; }
body.zn .zv-icon-btn { width: 28px; height: 28px; font-size: .9rem; color: var(--zn-rotulo); background: transparent; border-color: transparent; border-radius: 5px; }
body.zn .zv-icon-btn:hover { background: #fff; border-color: var(--zn-ctrl); }
body.zn .zv-acoes { gap: 4px; }

/* Formulários */
body.zn .zv-label { margin-bottom: 4px; font-size: 13px; font-weight: 500; color: #34404A; }
body.zn .zv-ajuda { margin-top: 4px; font-size: 12.5px; color: var(--zn-apagado); }
body.zn .form-control, body.zn .form-select { min-height: 36px; padding: 6px 10px; font-size: 14px; border-color: var(--zn-ctrl); border-radius: 5px; }
body.zn .form-select { padding-right: 32px; }
body.zn .form-control:focus, body.zn .form-select:focus { border-color: var(--zn-azul); box-shadow: 0 0 0 3px var(--zn-azul-suave); }
body.zn .input-group-text { font-size: 13px; color: var(--zn-rotulo); background: #F7F9FB; border-color: var(--zn-ctrl); }
body.zn .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.zn .zv-box { padding: 12px 14px; background: #F7F9FB; border-radius: 6px; }
body.zn .zv-box-titulo { font-size: 13px; }
body.zn .zv-opcao > span { border-radius: 5px; }
body.zn .zv-opcao input:checked + span { background: var(--zn-azul-suave); border-color: var(--zn-azul); }
body.zn .zv-chip { border-radius: 5px; }
body.zn .zv-form-actions { bottom: 0; }

/* Janelas (modais) */
body.zn .zv-modal .modal-content { border: 1px solid var(--zn-linha); border-radius: 10px; box-shadow: 0 16px 40px rgba(16, 32, 58, .22); }
body.zn .zv-modal .modal-header { padding: 12px 16px; }
body.zn .zv-modal .modal-title { font-size: 16px; }
body.zn .zv-modal .modal-body { padding: 14px 16px; }
body.zn .zv-modal .modal-footer { padding: 10px 16px; background: #FAFBFC; }

/* Mensagens, avisos e lista vazia */
body.zn .zv-toasts { top: calc(var(--zn-topo-h) + 12px); }
body.zn .zv-toast { padding: 10px 12px; font-size: 14px; border-left-width: 3px; border-radius: 6px; }
body.zn .zv-alerta { padding: 8px 12px; font-size: 14px; border-radius: 6px; }
body.zn .zv-empty { padding: 48px 20px; }
body.zn .zv-empty-icone { width: 48px; height: 48px; font-size: 1.2rem; }
body.zn .zv-empty h3 { font-size: 16px; }

/* Avatar e dropdown do usuário */
body.zn .zv-avatar { background: var(--zn-head); }
body.zn .zv-dropdown { padding: 6px; border-radius: 10px; }
body.zn .zv-dropdown .dropdown-item { padding: 9px 10px; font-size: 14px; border-radius: 6px; }
body.zn .zv-dropdown .dropdown-item i { width: 16px; color: var(--zn-apagado); text-align: center; }
body.zn .zv-dropdown .zv-texto-erro i { color: var(--zn-perigo); }
body.zn .zv-dropdown-cab { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--zn-linha-suave); }
body.zn .zv-dropdown-cab b { display: block; font-weight: 600; }
body.zn .zv-dropdown-cab small { color: var(--zn-apagado); }

/* Abas dos modais e passo a passo no mesmo tom */
body.zn .zv-aba.active { color: var(--zn-tinta); border-bottom-color: var(--zn-acao); }
body.zn .zv-passos li:not(.feito)::before { background: var(--zn-azul-suave); }
/* O zivazi.css reservava espaço para o antigo menu no rodapé */
body.zn.zv-admin { padding-bottom: 0; }

/* Cadastro do produto (produto.php) */
.zn-lateral { position: sticky; top: calc(var(--zn-topo-h) + 16px); }
.zn-foto-botao { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; font-size: 11px; border: 0; border-radius: 50%; box-shadow: 0 1px 3px rgba(16, 32, 58, .25); cursor: pointer; }
.zn-foto-capa { bottom: 4px; left: 4px; color: #C98A12; background: rgba(255, 255, 255, .95); }
.zn-foto-remover { top: 4px; right: 4px; color: #fff; background: var(--zn-perigo); opacity: 0; transition: opacity .15s; }
.zn-foto:hover .zn-foto-remover, .zn-foto-remover:focus-visible { opacity: 1; }
@media (hover: none) { .zn-foto-remover { opacity: 1; } }
.zn-ico-ml:hover { color: #2D3277 !important; background: #FFF6A8; border-color: #E6C800; }
.zn-ico-shopee:hover { color: #EE4D2D !important; background: #FDEDE9; border-color: #F5B5A6; }
body.zn .zv-page-header .zn-voltar { display: inline-flex; }
body.zn .zv-page-title .zn-mono { margin-left: 4px; font-size: 14px; font-weight: 400; color: var(--zn-fraco); }
body.zn .zv-aba-selo { font-family: var(--zn-mono); }
@media (max-width: 767px) { .zn-lateral { position: static; } }

/* Ajuda da página: botão (i) no cabeçalho + painel lateral (include/ajuda.php) */
.zn-ajuda-botao { width: 30px; height: 30px; margin-left: 4px; font-size: 15px; }
.zn-painel-ajuda { --bs-offcanvas-width: 420px; font-size: 14px; color: var(--zn-tinta); }
.zn-painel-ajuda .offcanvas-header { background: var(--zn-head); color: #fff; }
body.zn .zn-painel-ajuda .offcanvas-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: #fff; }
.zn-painel-ajuda .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.zn-painel-ajuda h3 { margin: 18px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--zn-apagado); }
.zn-painel-ajuda ul { margin: 0; padding-left: 18px; }
.zn-painel-ajuda li { margin-bottom: 6px; line-height: 1.5; }
.zn-ajuda-resumo { margin: 0; padding: 10px 12px; background: #EEF6FD; border-left: 3px solid #1EA0F2; border-radius: 4px; }
.zn-ajuda-guia { display: flex; align-items: center; gap: 6px; margin-top: 22px; padding-top: 14px; font-weight: 600; border-top: 1px solid var(--zn-linha); }

/* Guia "Como funciona" (guia.php) */
.zn-guia { max-width: 900px; }
.zn-guia-indice { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.zn-guia-indice a { display: inline-block; padding: 5px 10px; font-size: 13px; color: var(--zn-tinta); text-decoration: none; background: var(--zn-sup); border: 1px solid var(--zn-linha); border-radius: 999px; }
.zn-guia-indice a:hover { border-color: #1EA0F2; }
.zn-guia section { scroll-margin-top: calc(var(--zn-topo-h) + 12px); }
.zn-guia h2 { display: flex; align-items: center; gap: 8px; }
.zn-guia p, .zn-guia li { line-height: 1.6; }
.zn-guia ol, .zn-guia ul { padding-left: 20px; }
.zn-guia li { margin-bottom: 6px; }
.zn-guia-quadro { margin: 12px 0; padding: 12px 14px; background: #F7F9FA; border: 1px solid var(--zn-linha); border-radius: 6px; }
.zn-guia-quadro.aviso { background: #FFF8E6; border-color: #F2D48A; }
.zn-guia table { width: 100%; margin: 10px 0; font-size: 13.5px; border-collapse: collapse; }
.zn-guia th, .zn-guia td { padding: 7px 9px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--zn-linha); }
.zn-guia th { font-weight: 600; background: #F3F5F7; }

/* Movimentos de estoque (lateral do produto) */
.zn-movimentos { margin: 0; padding: 0; list-style: none; }
.zn-movimentos li { display: flex; gap: 10px; padding: 7px 0; font-size: 12.5px; border-top: 1px solid var(--zn-linha, #E6EAEC); }
.zn-movimentos li:first-child { padding-top: 0; border-top: 0; }
.zn-movimentos li > .zn-mono { min-width: 30px; font-weight: 500; text-align: right; }
.zn-movimentos small { display: block; color: var(--zn-fraco); }
.zn-texto-ok { color: var(--zn-ok) !important; }
.zn-texto-perigo { color: var(--zn-perigo) !important; }
/* O Bootstrap pinta os campos com a cor de fundo da página (cinza no painel): campos sempre brancos */
body.zn .form-control, body.zn .form-select { background-color: #fff; }
body.zn .form-control:disabled, body.zn .form-select:disabled { background-color: #F3F5F7; }

/* Links dentro de textos continuam com cara de link (a base do painel tira o estilo dos <a> de navegação) */
body.zn main a:not([class]) { color: var(--zn-azul-texto); text-decoration: underline; text-underline-offset: 2px; }
body.zn main a:not([class]):hover { color: var(--zn-head); }