:root {
    color-scheme: light;
    --marinho: #0a1f44;
    --marinho-2: #12336e;
    --marinho-3: #1b4a9c;
    --marinho-suave: #e8eef9;
    --fundo: #f3f6fb;
    --superficie: #ffffff;
    --texto: #0a1f44;
    --texto-2: #4b5c7a;
    --texto-lateral: #dbe5f7;
    --rotulo-lateral: #9fb6de;
    --linha: #dbe3f0;
    --serie: #1b4a9c;
    --acao: #12336e;
    --acao-texto: #ffffff;
    --aviso-fundo: #fff3d1;
    --aviso-texto: #6b4a00;
    --ok: #0b6b3f;
    --ok-fundo: #dff5ea;
    --erro: #b3261e;
    --erro-fundo: #fde7e5;
    --espera: #8a5a00;
    --espera-fundo: #fff3d1;
    --neutro-fundo: #e9edf4;
    --sombra: 0 1px 2px rgba(10, 31, 68, .06), 0 6px 18px rgba(10, 31, 68, .07);
    --sombra-alta: 0 10px 28px rgba(10, 31, 68, .22);
    --degrade: linear-gradient(135deg, var(--marinho) 0%, var(--marinho-2) 60%, var(--marinho-3) 100%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#app { display: flex; min-height: 100vh; }

.lateral {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    flex: 0 0 240px;
    height: 100vh;
    padding: 20px 14px 16px;
    background: linear-gradient(180deg, var(--marinho) 0%, #0d2a5c 100%);
    color: var(--acao-texto);
}
.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 8px 16px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.marca::before {
    content: "";
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--superficie) center / 20px no-repeat var(--logo);
}
.menu { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--marinho-3) transparent; }
.menu span {
    display: block;
    padding: 12px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rotulo-lateral);
}
.menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 1px;
    padding: 7px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--texto-lateral);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.menu button::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}
.menu button:hover { background: rgba(255, 255, 255, .1); color: var(--acao-texto); }
.menu button.ativa { background: var(--superficie); color: var(--marinho); font-weight: 700; box-shadow: var(--sombra-alta); }
.conta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 14px 8px 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: 14px;
}
.conta .acao { border-color: rgba(255, 255, 255, .4); background: none; color: var(--acao-texto); }
.conta .acao:hover { background: var(--superficie); border-color: var(--superficie); color: var(--marinho); }

.principal { flex: 1; min-width: 0; }
/* Marca d'água por cima do conteúdo: atrás dos cartões brancos ela ficaria escondida */
.principal::after {
    content: "";
    position: fixed;
    inset: 0 0 0 240px;
    z-index: 4;
    pointer-events: none;
    background: url("marca-dagua.png") center / min(560px, 60%) no-repeat;
    opacity: .09;
}
.topo {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 12px 32px;
    background: var(--superficie);
    box-shadow: 0 1px 0 var(--linha), 0 4px 14px rgba(10, 31, 68, .05);
}
.topo select { width: auto; max-width: 340px; margin: 0; font-weight: 700; color: var(--marinho); }
.sefaz {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 14px;
    background: var(--neutro-fundo);
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-2);
}
.sefaz:empty { display: none; }
.sefaz.ok { background: var(--ok-fundo); color: var(--ok); }
.sefaz.erro { background: var(--erro-fundo); color: var(--erro); }

.faixa {
    padding: 9px 32px;
    background: var(--aviso-fundo);
    color: var(--aviso-texto);
    font-size: 14px;
    font-weight: 600;
}

main { max-width: 1120px; margin: 0 auto; padding: 32px 32px 72px; animation: surgir .22s ease-out; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } }
h1 { margin: 0 0 18px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--marinho); }
h2 { margin: 0 0 18px; font-size: 18px; font-weight: 700; color: var(--marinho); }
h3 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--marinho); }
h4 {
    margin: 24px 0 12px;
    padding-left: 10px;
    border-left: 3px solid var(--marinho-3);
    font-size: 15px;
    font-weight: 700;
    color: var(--marinho);
}
h4:first-child { margin-top: 0; }
.nota { margin: -4px 0 10px; font-size: 13px; color: var(--texto-2); }
.consulta-cnpj { margin: 10px 0 0; }

.cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.cabecalho h1 { margin: 0; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 18px; }
.cartao, .bloco {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 16px;
    box-shadow: var(--sombra);
    padding: 22px;
}
.bloco { margin-bottom: 18px; }
.cartao { position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.cartao:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.cartao::after {
    content: "";
    position: absolute;
    top: -46px;
    right: -46px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--marinho-suave);
}
.cartao > * { position: relative; z-index: 1; }
.cartao span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.cartao b { font-size: 32px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cartao:nth-child(-n+2) { border: 0; background: var(--degrade); color: var(--acao-texto); }
.cartao:nth-child(2) { background: linear-gradient(135deg, var(--marinho-2) 0%, var(--marinho-3) 100%); }
.cartao:nth-child(-n+2) span { color: var(--texto-lateral); }
.cartao:nth-child(-n+2)::after { background: rgba(255, 255, 255, .09); }

.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: 240px; overflow: visible; }
.grafico text { fill: var(--texto-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafico .grade-linha { stroke: var(--linha); stroke-width: 1; }
.grafico .barra { fill: var(--serie); }
.grafico .alvo { fill: transparent; }
.grafico .alvo:hover { fill: color-mix(in srgb, var(--marinho-3) 10%, transparent); }
.vazio { color: var(--texto-2); padding: 24px 0; text-align: center; }

.dica {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -100%);
    background: var(--marinho);
    color: var(--superficie);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
}

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 16px; align-items: end; }
.grade .largo { grid-column: span 2; }

label { display: block; font-size: 14px; font-weight: 600; color: var(--texto-2); }
input:not([type=checkbox]), select, textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px;
    font: inherit;
    font-weight: 400;
    color: var(--texto);
    background: var(--superficie);
    border: 1.5px solid var(--linha);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):hover, select:hover, textarea:hover { border-color: #b3c3de; }
input:focus, select:focus, textarea:focus {
    outline: 0;
    border-color: var(--marinho-3);
    box-shadow: 0 0 0 3px rgba(27, 74, 156, .18);
}
input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--marinho-2); }
textarea { resize: vertical; }
.marcar { display: flex; gap: 8px; align-items: center; padding: 8px 0; font-weight: 500; color: var(--texto); }
.busca { max-width: 340px; margin: 0 0 14px; }

.linha-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 110px 150px 110px 28px;
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
}
.subtotal-caixa { font-size: 14px; color: var(--texto-2); }
.linha-item .remover { margin-top: 24px; }
.subtotal-caixa b { display: block; color: var(--texto); font-variant-numeric: tabular-nums; }
.remover {
    height: 38px;
    border: 0;
    background: none;
    color: var(--texto-2);
    font-size: 20px;
    cursor: pointer;
}
.remover:hover { color: var(--erro); }

.primario, .secundario, .acao, .filtro, .opcao { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.primario, .secundario, .acao { font: inherit; border-radius: 10px; cursor: pointer; }
.primario {
    border: 0;
    padding: 11px 22px;
    background: var(--degrade);
    color: var(--acao-texto);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(18, 51, 110, .32);
}
.primario:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(18, 51, 110, .4); }
.primario:disabled { opacity: .6; cursor: wait; }
.secundario, .acao { border: 1.5px solid var(--marinho-2); background: var(--superficie); color: var(--marinho-2); font-weight: 600; }
.secundario { padding: 9px 16px; }
.secundario:hover, .acao:hover { background: var(--marinho-2); color: var(--acao-texto); }
.acao { display: inline-block; padding: 4px 11px; border-width: 1px; font-size: 13px; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(27, 74, 156, .45); outline-offset: 2px; }

.rodape-form { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.rodape-form b { display: block; font-size: 28px; font-weight: 800; color: var(--marinho); font-variant-numeric: tabular-nums; }

.tabela { overflow-x: auto; border-radius: 12px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th {
    padding: 11px 12px;
    background: var(--marinho);
    color: var(--acao-texto);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
th:first-child { border-top-left-radius: 12px; }
th:last-child { border-top-right-radius: 12px; }
td { padding: 11px 12px; border-bottom: 1px solid var(--linha); }
tbody tr { transition: background-color .12s; }
tbody tr:hover td { background: var(--marinho-suave); }
tbody tr:last-child td { border-bottom: 0; }
td.quebra { min-width: 140px; }
tr.inativo td { color: var(--texto-2); }
.dir { text-align: right; font-variant-numeric: tabular-nums; }
td.botoes { text-align: right; white-space: nowrap; }
td.botoes > * { margin-left: 4px; }

.selo {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--neutro-fundo);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.selo.autorizada { background: var(--ok-fundo); color: var(--ok); }
.selo.rejeitada, .selo.denegada { background: var(--erro-fundo); color: var(--erro); }
.selo.pendente { background: var(--espera-fundo); color: var(--espera); }
.selo.cancelada { color: var(--texto-2); }
.opcao {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1.5px solid var(--linha);
    border-radius: 12px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.opcao:hover { border-color: var(--marinho-3); background: var(--marinho-suave); }
.opcao span { display: block; font-size: 13px; color: var(--texto-2); }
td.medio { width: 150px; }
.motivo { display: block; margin-top: 3px; font-size: 12px; color: var(--texto-2); max-width: 260px; }

#app:has(.acesso) { align-items: center; justify-content: center; padding: 16px; background: var(--degrade); }
.acesso {
    display: grid;
    gap: 16px;
    width: min(400px, 100%);
    padding: 36px 32px;
    background: var(--superficie);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.acesso::before {
    content: "";
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--marinho-suave) center / 30px no-repeat var(--logo);
}
.acesso h1, .acesso p { margin: 0; }
.acesso p { color: var(--texto-2); }
.acesso .primario { padding: 13px 22px; }

dialog {
    border: 0;
    border-top: 5px solid var(--marinho-2);
    border-radius: 16px;
    background: var(--superficie);
    color: var(--texto);
    padding: 26px;
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    box-shadow: 0 24px 60px rgba(10, 31, 68, .35);
}
dialog.largo { width: min(780px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(10, 31, 68, .55); backdrop-filter: blur(3px); }
.dialogo-corpo { overflow-wrap: anywhere; }
.dialogo-corpo ul { padding-left: 20px; margin: 8px 0; }
.dialogo-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 22px; }
.dialogo-acoes .acao { padding: 9px 14px; font-size: 15px; }

h1 + form, .cabecalho + .filtros { margin-top: 0; }
.acoes-topo { display: flex; gap: 8px; }
.linha-chave { display: flex; align-items: end; gap: 12px; }
.linha-chave label { flex: 1; }
.caixa-a3 { display: flex; align-items: end; gap: 12px; margin-top: 12px; }
.caixa-a3 label { flex: 1; }
.previa-pdf { display: block; width: 100%; height: 66vh; border: 1px solid var(--linha); border-radius: 10px; background: #fff; }
.acoes-nota { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.filtros { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 12px; background: var(--marinho-suave); }
.filtro {
    padding: 6px 16px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--marinho-2);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.filtro:hover { background: rgba(255, 255, 255, .7); }
.filtro.ativa { background: var(--marinho-2); color: var(--acao-texto); }
.saldo { display: block; margin: 4px 0 0; min-height: 18px; }
.alerta { color: var(--erro); font-size: 14px; }
tr.negativo td { color: var(--erro); }
td.pequeno { width: 84px; }
.linha-entrada { display: grid; grid-template-columns: minmax(180px, 1fr) 110px 140px 28px; gap: 12px; align-items: end; margin-bottom: 12px; }

@media (max-width: 760px) {
    #app { flex-direction: column; }
    #app:has(.acesso) { flex-direction: row; }
    .lateral { position: static; flex: none; height: auto; }
    .principal::after { left: 0; background-size: min(340px, 80%); }
    .menu { display: flex; flex-wrap: wrap; gap: 4px; }
    .menu span { display: none; }
    .menu button { width: auto; }
    .topo { position: static; padding: 10px 16px; }
    .faixa { padding: 8px 16px; }
    main { padding: 20px 16px 56px; }
    h1 { font-size: 26px; }
    .cabecalho { flex-wrap: wrap; }
    .linha-item { grid-template-columns: 1fr 1fr; }
    .linha-item label:first-child { grid-column: 1 / -1; }
    .grade .largo { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Ícones: ficam no CSS porque a política de segurança da página só carrega arquivos próprios */
:root { --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312336e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M9 14l2 2 4-4'/%3E%3C/svg%3E"); }
.menu button[data-tela=painel] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E"); }
.menu button[data-tela=nfe] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M8 13h8M8 17h6'/%3E%3C/svg%3E"); }
.menu button[data-tela=nfce] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v18l2.5-1.5L10 21l2-1.5 2 1.5 2.5-1.5L19 21V3l-2.5 1.5L14 3l-2 1.5L10 3 7.5 4.5z'/%3E%3Cpath d='M9 9h6M9 13h6'/%3E%3C/svg%3E"); }
.menu button[data-tela=entradaPropria] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M12 11v6M9 14l3 3 3-3'/%3E%3C/svg%3E"); }
.menu button[data-tela=rascunhos] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.menu button[data-tela=notas] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E"); }
.menu button[data-tela=dfe] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 10h-1.3A7 7 0 1 0 9 19h9a5 5 0 0 0 0-9z'/%3E%3Cpath d='M12 11v6M9.5 14.5 12 17l2.5-2.5'/%3E%3C/svg%3E"); }
.menu button[data-tela=entradas] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
.menu button[data-tela=estoque] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7z'/%3E%3Cpath d='M3.3 7 12 12l8.7-5M12 22V12'/%3E%3C/svg%3E"); }
.menu button[data-tela=clientes] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); }
.menu button[data-tela=produtos] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Cpath d='M8 8h.01'/%3E%3C/svg%3E"); }
.menu button[data-tela=regras] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M12 21s7-6.1 7-11a7 7 0 0 0-14 0c0 4.9 7 11 7 11z'/%3E%3C/svg%3E"); }
.menu button[data-tela=fornecedores] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h13v13H1zM14 9h4l4 4v4h-8z'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='19' r='2'/%3E%3C/svg%3E"); }
.menu button[data-tela=empresas] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v17M3 21h18'/%3E%3Cpath d='M10 7h.01M14 7h.01M10 11h.01M14 11h.01M10 15h.01M14 15h.01'/%3E%3C/svg%3E"); }
.menu button[data-tela=usuarios] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }