/* Secao 628: emissao de NF-e no visual novo (/erp/nfe/nova e /erp/nfe/{id}/editar).
   Gabarito: mockup aprovado emissao-nfe.html. Usa as variaveis e classes gh-* de horas-novo.css;
   aqui so o que e desta tela: cartoes de secao, painel fixo, gaveta lateral e etiquetas fiscais. */

.nfe-nova { background: transparent; }
.nfe-nova h1 { font-family: var(--gh-titulo); font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--gh-tinta); }

/* duas colunas: documento a esquerda, painel fixo a direita */
.nfe-doc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.nfe-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; border: 0; padding: 0; margin: 0; }
.nfe-lado { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nfe-lado > .gh-bt { justify-content: center; padding: 12px; }

/* cartoes de secao */
.nfe-secao { background: var(--gh-folha); border: 1px solid var(--gh-linha); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; scroll-margin-top: 80px; }
.nfe-secao:focus { outline: 2px solid var(--gh-azul); outline-offset: 2px; }
.nfe-secao > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.nfe-secao > header h3 { display: flex; gap: 8px; align-items: center; }
.nfe-ic { font-style: normal; width: 24px; height: 24px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--gh-azul-suave); color: var(--gh-azul); font-size: 12px; flex: none; }
details.nfe-secao > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--gh-tinta); }
details.nfe-secao > summary::-webkit-details-marker { display: none; }
details.nfe-secao > summary::after { content: "\25BE"; color: var(--gh-tinta3); margin-left: auto; }
details.nfe-secao[open] > summary::after { content: "\25B4"; }
.nfe-sub { font-size: 12px; font-weight: 700; color: var(--gh-tinta3); text-transform: uppercase; letter-spacing: .06em; grid-column: 1 / -1; border-top: 1px solid var(--gh-linha); padding-top: 8px; margin-top: 2px; }

/* campos */
.nfe-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.nfe-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nfe-campo.largo { grid-column: 1 / -1; }
.nfe-campo > label { font-size: 12px; font-weight: 600; color: var(--gh-tinta2); margin: 0; }
.nfe-campo input, .nfe-campo select, .nfe-campo textarea, .nfe-inp {
    border: 1.5px solid var(--gh-linha); border-radius: 10px; padding: 7px 10px; background: var(--gh-folha); color: var(--gh-tinta);
    min-width: 0; width: 100%; font: inherit; font-size: 14px;
}
.nfe-campo input:focus, .nfe-campo select:focus, .nfe-campo textarea:focus, .nfe-inp:focus { outline: 2px solid var(--gh-azul); outline-offset: 0; border-color: var(--gh-azul); }
.nfe-campo input:disabled, .nfe-campo select:disabled, .nfe-campo textarea:disabled, .nfe-inp:disabled { background: var(--gh-fundo2); color: var(--gh-tinta2); }
.nfe-so { border: 1.5px dashed var(--gh-linha); border-radius: 10px; padding: 7px 10px; color: var(--gh-tinta2); font-family: var(--gh-num); font-size: 13px; word-break: break-all; user-select: all; }
.nfe-campo .nfe-dica { font-size: 11.5px; color: var(--gh-tinta3); }
.nfe-combo { display: flex; gap: 6px; }
.nfe-combo > select, .nfe-combo > input { flex: 1; min-width: 0; }
.nfe-combo > button { border: 1.5px solid var(--gh-linha); background: var(--gh-fundo2); color: var(--gh-tinta); border-radius: 10px; width: 40px; flex: none; cursor: pointer; }

/* emitente e destinatario */
.nfe-emit { display: flex; gap: 10px; align-items: center; min-width: 0; }
.nfe-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--gh-tinta); color: var(--gh-folha); display: grid; place-items: center; font-family: var(--gh-titulo); font-weight: 800; flex: none; }
.nfe-emit small, .nfe-dest small { display: block; color: var(--gh-tinta3); font-size: 12.5px; }
.nfe-dest { display: flex; gap: 12px; align-items: center; border: 1px solid var(--gh-linha); border-radius: 14px; padding: 10px 12px; background: var(--gh-fundo2); flex-wrap: wrap; }
.nfe-dest .gh-meio { flex: 1; min-width: 180px; }
.nfe-dest small.falta { color: var(--gh-vermelho); font-weight: 600; }

/* itens */
.nfe-itens-tab { border: 1px solid var(--gh-linha); border-radius: 12px; background: var(--gh-folha); }
.nfe-itens-tab table { border-collapse: collapse; width: 100%; font-size: 13px; color: var(--gh-tinta); margin: 0; }
.nfe-itens-tab th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gh-tinta3); background: var(--gh-fundo2); text-align: left; padding: 8px; white-space: nowrap; font-weight: 700; }
.nfe-itens-tab th:first-child { border-top-left-radius: 12px; } .nfe-itens-tab th:last-child { border-top-right-radius: 12px; }
.nfe-itens-tab td { padding: 6px 8px; border-top: 1px solid var(--gh-linha); vertical-align: top; }
.nfe-itens-tab tr:focus { outline: 2px solid var(--gh-azul); outline-offset: -2px; }
.nfe-itens-tab tr.sel td { background: var(--gh-azul-suave); }
.nfe-itens-tab .nfe-prod { min-width: 230px; }
.nfe-itens-tab .nfe-n { color: var(--gh-tinta3); font-family: var(--gh-num); font-size: 12px; width: 26px; padding-top: 12px; }
.nfe-itens-tab input.nfe-inp { padding: 5px 8px; border-radius: 8px; text-align: right; }
.nfe-itens-tab .nfe-tot { font-family: var(--gh-num); font-weight: 600; text-align: right; white-space: nowrap; padding-top: 12px; }
.nfe-fiscal { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; align-items: center; }
.nfe-fiscal .gh-pil { border: 0; cursor: pointer; font-family: var(--gh-num); font-weight: 600; }
.nfe-fiscal .gh-bt.pq { padding: 1px 8px; font-size: 12px; }
.nfe-tirar { border: 0; background: none; color: var(--gh-vermelho); cursor: pointer; padding: 6px; }
@media (min-width: 992px) { .nfe-itens-tab { overflow: visible; } }
@media (max-width: 991.98px) { .nfe-itens-tab { overflow-x: auto; } }

/* pagamento */
.nfe-parcelas { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.nfe-parcela { border: 1px solid var(--gh-linha); border-radius: 12px; padding: 8px 10px; background: var(--gh-fundo2); display: flex; flex-direction: column; gap: 1px; }
.nfe-parcela b { font-family: var(--gh-num); font-size: 14px; }
.nfe-parcela span:last-child { font-size: 12px; color: var(--gh-tinta3); }

/* painel fixo */
.nfe-totais { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13.5px; align-items: center; margin-top: 6px; }
.nfe-totais .nfe-grande { font-family: var(--gh-titulo); font-size: 26px; font-weight: 800; }
.nfe-totais input.nfe-inp { width: 110px; padding: 3px 8px; text-align: right; font-family: var(--gh-num); font-size: 13px; border-radius: 8px; }
.nfe-totais .nfe-linha { grid-column: 1 / -1; border-top: 1px solid var(--gh-linha); margin: 4px 0; }
.nfe-conf { margin: 0; padding: 0; list-style: none; }
.nfe-conf li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13px; list-style: none; }
.nfe-conf li > i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; flex: none; margin-top: 1px; color: #fff; font-weight: 700; }
.nfe-conf li.ok > i { background: var(--gh-verde); }
.nfe-conf li.ruim > i { background: var(--gh-vermelho); }
.nfe-conf li.aviso > i { background: var(--gh-ambar); }
.nfe-conf button { border: 0; background: none; color: var(--gh-azul); font-weight: 600; padding: 0; cursor: pointer; font-size: 12.5px; }
.nfe-lado .gh-bt.pri.pendente { background: var(--gh-folha); color: var(--gh-vermelho); border: 1.5px solid var(--gh-vermelho); }

/* A gaveta e renderizada FORA do <div class="gh"> da NfeNovaPage: sem as variaveis
   abaixo o fundo ficava transparente e os campos se misturavam com o Total e a
   Conferencia (visto em producao 11/11/2026). Mesmos valores do .gh (horas-novo.css). */
.nfe-gaveta {
    --gh-chao: #f1f3f7; --gh-folha: #ffffff; --gh-tinta: #17202d; --gh-tinta2: #5a6676; --gh-tinta3: #8a94a3;
    --gh-linha: #e2e6ee; --gh-fundo2: #f4f6fa;
    --gh-azul: #3d5bd9; --gh-azul-suave: #e9eefc; --gh-verde: #11866a; --gh-verde-suave: #dcf3ec;
    --gh-ambar: #a8670c; --gh-ambar-suave: #fbefd9; --gh-vermelho: #c2362b; --gh-vermelho-suave: #fbe1de;
    --gh-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --gh-texto: "Figtree", "Segoe UI", system-ui, sans-serif;
    font-family: var(--gh-texto); color: var(--gh-tinta);
}
[data-theme="dark"] .nfe-gaveta, [data-bs-theme="dark"] .nfe-gaveta {
    --gh-chao: #0d1118; --gh-folha: #161c26; --gh-tinta: #e8ecf2; --gh-tinta2: #a6afbd; --gh-tinta3: #7a8494; --gh-linha: #29313d; --gh-fundo2: #1d2430;
    --gh-azul: #7d95ff; --gh-azul-suave: #232c4a; --gh-verde: #4fcca6; --gh-verde-suave: #173a31; --gh-ambar: #f0b45a; --gh-ambar-suave: #3a2c15;
    --gh-vermelho: #ff7b6e; --gh-vermelho-suave: #3d1f1c;
}
.nfe-gaveta *, .nfe-gaveta *::before, .nfe-gaveta *::after { box-sizing: border-box; }
.nfe-gaveta h3 { font-size: 15px; font-weight: 700; margin: 0; color: var(--gh-tinta); }

/* gaveta lateral de impostos (nivel 1 = 1070; PartyModal/ProductModal por cima = 1080) */
.nfe-gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 100%); background: var(--gh-folha); border-left: 1px solid var(--gh-linha);
    box-shadow: -20px 0 40px -20px rgba(0, 0, 0, .35); z-index: 1070; display: flex; flex-direction: column; padding: 16px; gap: 12px; overflow: auto; }
.nfe-gaveta fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.nfe-gaveta-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.nfe-abas { display: flex; gap: 2px; border-bottom: 1px solid var(--gh-linha); flex-wrap: wrap; }
.nfe-abas button { border: 0; background: none; padding: 8px 12px; font-weight: 600; color: var(--gh-tinta2); border-bottom: 3px solid transparent; cursor: pointer; }
.nfe-abas button[aria-selected="true"] { color: var(--gh-azul); border-bottom-color: var(--gh-azul); }
.nfe-aplicar { border: 1.5px dashed var(--gh-azul); background: var(--gh-azul-suave); color: var(--gh-azul); border-radius: 12px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.nfe-aplicar > span { flex: 1; min-width: 160px; }
.nfe-sobre-gaveta > .modal { z-index: 1080 !important; }

@media (max-width: 1100px) {
    .nfe-doc { grid-template-columns: minmax(0, 1fr); }
    .nfe-lado { position: static; }
}