/* Emissor NFS-e — visual alinhado ao ecossistema (teal #0B4C5F + laranja #f39c12) */
:root {
    --teal: #0B4C5F;
    --teal-claro: #12708c;
    --laranja: #f39c12;
    --borda: #e2e8ec;
    --texto: #24333a;
    --suave: #6b7f88;
    --fundo: #f4f7f8;
    --ok: #1e8e5a;
    --erro: #c0392b;
}

* { box-sizing: border-box; }

/* Barra de rolagem vertical SEMPRE presente: sem isso a página "pula"
   horizontalmente ao alternar entre telas curtas (sem barra) e longas (com
   barra), porque a área útil muda de largura. `scrollbar-gutter` reserva o
   espaço nos navegadores modernos; o `overflow-y: scroll` cobre o resto. */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    font-size: 15px;
}

header.topo {
    background: var(--teal);
    color: #fff;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
header.topo .marca { font-weight: 700; letter-spacing: .3px; }
header.topo nav { display: flex; gap: 14px; margin-left: auto; align-items: center; }
header.topo a { color: #cfe6ec; text-decoration: none; }
header.topo a:hover { color: #fff; }

.selo-ambiente {
    background: var(--laranja);
    color: #3a2500;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.selo-ambiente.producao { background: #c0392b; color: #fff; }

main { max-width: 1080px; margin: 0 auto; padding: 22px 20px 60px; }

h1 { font-size: 22px; margin: 0 0 18px; color: var(--teal); }
h2 { font-size: 16px; margin: 26px 0 10px; color: var(--teal); }

.cartao {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 18px;
}

.linha { display: flex; gap: 14px; flex-wrap: wrap; }

/* Autocomplete das tabelas oficiais (município IBGE / NBS). */
.campo.ac { position: relative; }
.ac_lista {
    position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
    background: #fff; border: 1px solid var(--borda); border-top: none;
    border-radius: 0 0 4px 4px; max-height: 240px; overflow-y: auto;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.ac_lista .ac_item { padding: 7px 10px; font-size: 13px; cursor: pointer; }
.ac_lista .ac_item:hover, .ac_lista .ac_item.sel { background: var(--teal); color: #fff; }
.ac_rotulo { min-height: 14px; }
.campo { flex: 1 1 220px; margin-bottom: 12px; display: flex; flex-direction: column; }
.campo.curto { flex: 0 1 140px; }
label { font-size: 12px; color: var(--suave); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
input, select, textarea {
    border: 1px solid var(--borda);
    border-radius: 4px;
    padding: 8px 10px;
    font: inherit;
    background: #fff;
    color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal-claro); outline-offset: -1px; }
textarea { min-height: 74px; resize: vertical; }
.check { flex-direction: row; align-items: center; gap: 8px; }
.check label { text-transform: none; margin: 0; font-size: 14px; color: var(--texto); }

.botao {
    background: var(--teal);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.botao:hover { background: var(--teal-claro); }
.botao.secundario { background: #fff; color: var(--teal); border: 1px solid var(--teal); }
.botao.perigo { background: #fff; color: var(--erro); border: 1px solid var(--erro); }

/* Vínculo item vendido → nota de compra: a sugestão fica visível e os controles
   de troca ficam discretos embaixo, sem virar o assunto principal da linha. */
.origem_form { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.origem_form select, .origem_form input { font-size: 11px; padding: 3px 5px; max-width: 190px; }
.origem_form input { max-width: 130px; }

/* Alíquota de retenção do ISS: número que o emitente precisa ter na mão ao fazer
   a nota do mês seguinte, então ganha destaque próprio dentro do quadro. */
.destaque_iss {
    border: 1px solid var(--laranja);
    border-left-width: 4px;
    background: #fff8ec;
    border-radius: 4px;
    padding: 12px 14px;
    margin: 4px 0 12px;
}
.destaque_iss label { display: block; }
.destaque_iss strong { font-size: 26px; color: var(--teal); line-height: 1.1; }
.destaque_iss strong + small { color: var(--suave); font-size: 12px; margin-left: 8px; }
.destaque_iss p { margin: 8px 0 0; font-size: 12px; }

/* Abas de tela (apuração do Simples): o essencial fica na primeira; o resto é
   conferência e ajuste, cada um na sua aba. */
.abas {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--borda);
    margin: 22px 0 18px;
}
.abas button {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 9px 14px;
    font: inherit;
    font-weight: 600;
    color: var(--suave);
    cursor: pointer;
    margin-bottom: -1px;
}
.abas button:hover { color: var(--teal); }
.abas button.ativa { color: var(--teal); border-bottom-color: var(--laranja); }
.abas button .conta {
    font-size: 11px;
    font-weight: 700;
    background: var(--borda);
    color: var(--suave);
    border-radius: 9px;
    padding: 1px 7px;
    margin-left: 6px;
}
.aba_painel { display: none; }
.aba_painel.ativa { display: block; }
.aba_painel > h2:first-child { margin-top: 0; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
th { font-size: 12px; text-transform: uppercase; color: var(--suave); letter-spacing: .4px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.estado { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.estado.autorizada { background: #e3f5eb; color: var(--ok); }
.estado.rejeitada { background: #fbe6e3; color: var(--erro); }
.estado.enviando { background: #fdf0d9; color: #8a5b00; }
.estado.cancelada { background: #eceff1; color: var(--suave); }

.aviso { border-left: 4px solid var(--laranja); background: #fff8ec; padding: 12px 14px; border-radius: 4px; margin-bottom: 16px; }
.aviso.erro { border-color: var(--erro); background: #fdecea; }
.aviso.ok { border-color: var(--ok); background: #eaf7f0; }

.dica { font-size: 12px; color: var(--suave); margin-top: 4px; }
.campo small { font-size: 12px; color: var(--suave); margin-top: 4px; display: block; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 13px; word-break: break-all; }
pre.mono { background: #f7f9fa; border: 1px solid var(--borda); border-radius: 4px; padding: 12px; overflow: auto; max-height: 320px; }

/* Documentos do ADN: uma nota por linha, sem quebra. As colunas largas (nome e
   serviço) são cortadas com reticências e o conteúdo inteiro fica no title. */
table.docs { table-layout: fixed; }
table.docs th, table.docs td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
table.docs .c_data { width: 106px; }
/* Número da NFS-e: 96px cortava os números longos com reticências. 150px comporta
   o formato completo; a folga sai das colunas de texto (nome/serviço), que já
   truncam por natureza e mantêm o conteúdo inteiro no title. */
table.docs .c_nfse { width: 150px; }
table.docs .c_nome { width: 29%; }
table.docs .c_serv { width: 25%; }
table.docs .c_valor { width: 112px; }
table.docs .c_arq { width: 96px; }

/* Tabela-título-conteúdo: vira card no celular, com rótulo embutido */
@media (max-width: 700px) {
    table thead { display: none; }
    table, table tbody, table tr, table td { display: block; width: 100%; }
    table tr {
        background: #fff;
        border: 1px solid var(--borda);
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 6px 4px;
    }
    table td { border: 0; padding: 6px 12px; text-align: left; }
    /* No card do celular manda o layout de card, não a grade fixa do desktop. */
    table.docs { table-layout: auto; }
    table.docs td { width: auto; white-space: normal; }
    table td.num { text-align: left; }
    table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--suave);
    }
}