body {
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: #f8f9fb;
  margin: 0;
  padding: 0;
}
/* ============================
   GLOBAL TOPBAR RESPONSIVO
============================ */

.global-topbar {
    width: 100%;
    background: #1f2a40; /* azul escuro elegante */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 4px 10px;
    gap: 8px;
    height: 52px;
    flex-wrap: nowrap; /* força tudo numa só linha */
}

/* botão hamburguer (fica “fixo” à esquerda) */
.mobile-menu-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 4px;
    display: none; /* é mostrado mais abaixo em @media */
}

/* bloco da esquerda: logo + empresa (ocupa espaço flexível) */
.topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto; /* ocupa o espaço “elástico” */
    min-width: 0; /* permite encolher para ellipsis */
}

.top-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

/* selector empresa */
.company-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 600;
    min-width: 0; /* importante para o ellipsis funcionar */
}

#currentCompany {
    display: inline-block;
    max-width: 220px; /* largura base em desktop */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* mostra “Empresa Dem…” */
}

.company-drop {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
}

/* bloco da direita: ícones (não encolhe) */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.icon-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: opacity .2s, transform .2s;
}

    .icon-btn:hover {
        opacity: 0.7;
        transform: scale(1.1);
    }

/* ===== BREAKPOINTS ===== */

/* Tablets (iPad Air / Pro, etc.) */
@media (max-width: 1024px) {
    .global-topbar {
        padding: 4px 8px;
        gap: 6px;
    }

    #currentCompany {
        max-width: 170px; /* encurta um pouco o texto */
    }

    .topbar-right {
        gap: 8px;
    }

    .icon-btn {
        font-size: 17px;
    }
}

/* Telemóveis em pé (~430px) */
@media (max-width: 600px) {
    .global-topbar {
        padding: 4px 6px;
    }

    /* mostra o hambúrguer e esconde o menu horizontal (já tinhas para <900px) */
    .mobile-menu-btn {
        display: block;
    }

    #currentCompany {
        max-width: 110px; /* mais curto em mobile */
        font-size: 14px;
    }

    .top-logo {
        width: 24px;
        height: 24px;
    }

    .topbar-right {
        gap: 6px;
    }

    .icon-btn {
        font-size: 16px;
    }
}

/* === MENU PRINCIPAL === */
.top-menu {
  background-color: #222;
  color: #fff;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  position: relative;         /* <-- necessário para z-index */
  z-index: 1000;              /* <-- garante que os submenus ficam por cima */
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu-item {
  position: relative;
  padding: 0 20px;
  cursor: default;
  line-height: 40px;
  color: #fff;
  transition: background 0.2s;
  user-select: none;
}

.menu-item:hover { background-color: #444; }

.menu-item span { font-weight: 600; }

.submenu {
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #fff;
  min-width: 300px;          /* ← antes era 240px */
  max-width: 380px;          /* evita exageros em monitores largos */
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  border-radius: 8px;
  list-style: none;
  padding: 8px 0;
  display: none;
  z-index: 2000;
}

.submenu li a,
.submenu li span {
  display: block;
  color: #1f2937;
  text-decoration: none;
  padding: 5px 14px;      /* ↓ menos espaço vertical (de 9px → 5px) */
  line-height: 1.3;       /* ↓ compacidade */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, padding-left 0.15s;
  border-radius: 4px;
}

.submenu li a:hover,
.submenu li span:hover {
  background-color: #f3f4f6;
  padding-left: 18px;
}

.menu-item:hover > .submenu { display: block; }

.submenu.right { top: 0; left: 240px; }

.submenu li a,
.submenu li span {
  display: block;
  color: #1f2937;
  text-decoration: none;
  padding: 9px 14px;
  transition: background 0.15s, padding-left 0.15s;
  border-radius: 6px;
}

.submenu li a:hover,
.submenu li span:hover {
  background-color: #f3f4f6;
  padding-left: 18px;
}

/* === CONTEÚDO === */
.container { padding: 20px; }

.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  margin-bottom: 20px;
  padding: 20px;
  max-width: 520px;
}

.card h2 { font-size: 18px; margin-bottom: 10px; }

button {
  background-color: #2563eb;
  color: #fff;
  border: none;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, transform 0.05s;
}
button:hover { background-color: #1d4ed8; }
button:active { transform: translateY(1px); }

table { width: 100%; border-collapse: collapse; margin-top: 10px; }
table th {
  background: #f4f6f8;
  font-weight: 600;
  padding: 8px;
  text-align: left;
}
table td { padding: 8px; border-bottom: 1px solid #e5e7eb; }
/* === FORMULÁRIO PRINCIPAL DE DOCUMENTOS === */
.doc-wrapper {
    max-width: 1200px;
    margin: 0.4rem auto; /* antes era 1.5rem — reduz o espaço superior em ~60% */
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
    padding: 1.2rem 1.4rem;
}

/* === FORMULÁRIO DE DOCUMENTOS === */
.doc-header {   
  margin-bottom: 10px;
}
.doc-header h2 {
  margin: 0;
  color: #222;
  font-size: 22px;
}
.doc-subtitle {
  font-size: 13px;
  color: #777;
}

.doc-meta, .doc-linhas {
  margin-top: 10px;
}

.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.form-row label {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: #444;
}
.form-row input {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.tabela-wrapper {
  max-height: 350px;
  overflow-y: auto;
}
#tblLinhas {
  width: 100%;
  border-collapse: collapse;
}
#tblLinhas th, #tblLinhas td {
  border: 1px solid #ddd;
  padding: 6px;
  text-align: left;
}
#tblLinhas th {
  background: #f3f4f6;
  position: sticky;
  top: 0;
  z-index: 1;
}
.total-geral td {
  background: #eef2ff;
  font-weight: 700;
}

.btn {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 7px 14px;
  font-weight: 500;
  transition: background 0.2s;
}
.btn-add {
  background: #2563eb;
  color: #fff;
}
.btn-add:hover { background: #1d4ed8; }
.btn-save {
  background: #2563eb;
  color: #fff;
}
.btn-save:hover { background: #1d4ed8; }
.btn-close {
  background: #10b981;
  color: #fff;
}
.btn-close:hover { background: #059669; }
.btn-mini {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.doc-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.msg {
  margin-top: 10px;
  font-weight: 500;
}
.msg.success { color: #16a34a; }
.msg.error { color: #dc2626; }
#clienteSugestoes {
  list-style: none;
  margin: 0;
  padding: 0;
  background: white;
  border: 1px solid #ddd;
  max-height: 150px;
  overflow-y: auto;
  position: absolute;
  z-index: 10;
  width: 300px;
}
#clienteSugestoes li {
  padding: 6px 10px;
  cursor: pointer;
}
#clienteSugestoes li:hover {
  background: #eef;
}
.btn-new {
  background: #6366f1;
  color: #fff;
}
.btn-new:hover {
  background: #4f46e5;
}
.tabela-lista {
    width: 90%;
    margin: 20px auto;
    border-collapse: collapse;
}

    .tabela-lista th, .tabela-lista td {
        border: 1px solid #ccc;
        padding: 6px 10px;
    }

    .tabela-lista th {
        background: #f3f3f3;
        text-align: left;
    }

    .tabela-lista tr:nth-child(even) {
        background: #fafafa;
    }
/* header da página artigos */
.artigos-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 10px;
}

    .artigos-header h2 {
        margin: 0 0 8px 0;
    }

/* barra de botões tipo ERP */
.artigos-toolbar {
    background: #fffbe6;
    border: 1px solid #e0d9a8;
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-size: 14px;
}

.tb-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: #6c737f;
    padding: 4px 6px;
    border-radius: 4px;
}

    .tb-btn:hover {
        background: rgba(0,0,0,0.05);
        color: #000;
    }

/* filtro/pesquisa */
.artigos-filtros {
    margin: 10px 0;
}

.search-input {
    width: 60%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

    .search-input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0,123,255,0.4);
    }

/* tabela estilo ERP */
.tabela-artigos {
    width: 95%;
    margin: 0 auto 30px auto;
    border-collapse: collapse;
    font-size: 14px;
    background-color: white;
}

    .tabela-artigos thead th {
        background: #f5f5f5;
        border: 1px solid #ccc;
        padding: 6px 8px;
        text-align: left;
        white-space: nowrap;
        font-weight: 600;
        user-select: none;
    }

    .tabela-artigos tbody td {
        border: 1px solid #ddd;
        padding: 6px 8px;
        vertical-align: middle;
        white-space: nowrap;
    }

    .tabela-artigos tbody tr:nth-child(even) {
        background: #fafafa;
    }

    .tabela-artigos tbody tr:hover {
        background: #e8f2ff;
        cursor: pointer;
    }

.col-check {
    width: 28px;
    text-align: center;
}

.sortable {
    cursor: pointer;
}

    .sortable:hover {
        background: #e9ecef;
    }
.artigo-form-card {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    max-width: 900px;
    margin: 20px auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.artigo-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 12px 16px;
    margin-top: 10px;
}

    .artigo-form-grid label {
        font-size: 13px;
        font-weight: 500;
        color: #222;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .artigo-form-grid input[type="text"],
    .artigo-form-grid input[type="number"] {
        padding: 6px 8px;
        border: 1px solid #bbb;
        border-radius: 6px;
        font-size: 14px;
        width: 100%;
    }

.artigo-form-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.btn-prim {
    background: #2563eb;
    border: 0;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    padding: 8px 14px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    .btn-prim:hover {
        background: #1e4fd1;
    }

.btn-sec {
    background: #f0f0f0;
    border: 1px solid #bbb;
    border-radius: 6px;
    color: #333;
    font-size: 14px;
    padding: 8px 14px;
    cursor: pointer;
}

    .btn-sec:hover {
        background: #e2e2e2;
    }

.debug-box {
    background: #0f172a;
    color: #d1d5db;
    font-size: 12px;
    padding: 10px;
    border-radius: 6px;
    margin-top: 16px;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
}
/* ===== ESTILO CLIENTE REFORMULADO ===== */
.cliente-box {
    background: #fdfdfd;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.8rem;
    font-size: 13px;
    color: #222;
}

    .cliente-box label {
        font-weight: 600;
        color: #222;
        margin-right: 0.3rem;
    }

    .cliente-box input {
        border: 1px solid #cfcfcf;
        border-radius: 6px;
        padding: 0.4rem 0.5rem;
        font-size: 13px;
        flex: 1;
    }

.linha-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.input-destaque {
    background: #e8fff0;
    border: 1px solid #7ccf8a;
    font-weight: bold;
    color: #0a390a;
    width: 120px;
}

.linha,
.linha-dupla {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}

    .linha-dupla > div {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

.nome-longo {
    flex: 1;
}

.observacoes {
    width: 95%;
}

/* tamanho de fonte geral */
.doc-wrapper,
.doc-header,
input,
label,
button,
table {
    font-size: 13px;
}

/* ==== NOVO LAYOUT CLIENTE + BOTÕES ==== */

/* bloco cliente agora menor e mais compacto */
.cliente-box {
    /* flex: 0 0 50%; /* -25% de largura */
    background: #fdfdfd;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 0.6rem 0.9rem; /* -20% altura */
    display: flex;
    flex-direction: column;
    gap: 0.3rem; /* linhas mais próximas */
    font-size: 13px;
    color: #222;
    margin-left: 0; /* alinhado ao texto “Dados do cliente” */
}

    .cliente-box label {
        font-weight: 600;
        color: #222;
        margin-right: 0.3rem;
    }

    .cliente-box input {
        border: 1px solid #cfcfcf;
        border-radius: 6px;
        padding: 0.35rem 0.45rem;
        font-size: 13px;
        flex: 1;
    }

.linha-top,
.linha,
.linha-dupla {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    margin-bottom: 0.1rem;
}

    .linha-dupla > div {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

.input-destaque {
    background: #e8fff0;
    border: 1px solid #7ccf8a;
    font-weight: bold;
    color: #0a390a;
    width: 115px;
}

.nome-longo,
.observacoes {
    width: 100%;
}

/* coluna de botões */
.cliente-botoes {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: flex-start;
    margin-top: 0.2rem;
}

.btn-cli {
    background: #f8f8f8;
    border: 1px solid #cfd3cf;
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #222;
    font-weight: 500;
    transition: all 0.15s;
}

    .btn-cli:hover {
        background: #e8fff0;
        border-color: #7ccf8a;
        color: #0a390a;
    }
/* Evita cortar valores de desconto */
.desc-valor {
    min-width: 78px; /* largura confortável */
    width: 100%; /* adapta-se ao resto da coluna */
    text-align: right;
}
/* Ícone lápis — cinza + ponta laranja */
.edit-desc {
    color: #f97316 !important; /* Laranja elegante */
    opacity: 0.8;
}

    .edit-desc:hover {
        opacity: 1;
        transform: scale(1.15);
    }

/* Fundo cinza claro discreto */
.desc-edit-wrap {
    position: relative;
}

    .desc-edit-wrap button.edit-desc {
        background: #e5e7eb !important; /* cinza suave */
        border-radius: 4px;
    }
.edit-desc-global {
    margin-left: 4px;
    padding: 2px 4px;
    background: #e5e7eb;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    color: #f97316;
}
/* Campo em modo edição */
.editando {
    background: #fff3d4; /* laranja suave DURANTE edição */
    border-radius: 4px;
}

/* Quando sai da edição (classe removida) → volta a herdar totalmente */
[data-field="desc_1"]:not(.editando),
[data-field="desc_2"]:not(.editando) {
    background: transparent !important;
}


/* Botão lápis global ativo */
.edit-desc-global.ativo {
    background: #f97316 !important;
    color: white !important;
    border-color: #f97316 !important;
}
/* =============== LÁPIS INDIVIDUAL — só aparece no hover =============== */

/* Sempre escondido por defeito */
.desc-edit-wrap .edit-desc {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

/* Aparece quando o rato está por cima da célula */
.desc-edit-wrap:hover .edit-desc {
    opacity: 1;
}

/* Aparece também se o input está em edição manual (quando clicado no lápis) */
.desc-edit-wrap input:not([readonly]) + .edit-desc {
    opacity: 1 !important;
}
.desc-edit-wrap:hover .edit-desc {
    opacity: 0.65;
}
#tblLinhas td input[data-field="valor"] {
    text-align: right !important;
}

#tblLinhas td:last-child,
#tblLinhas td:nth-last-child(2) {
    text-align: right;
}
/* Botão remover (estilo minimalista, igual ao +) */
/* BOTÕES + e - minimalistas no final da linha */
.btn-line-action {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px !important;
    opacity: .85;
}

    .btn-line-action:hover {
        opacity: 1;
        transform: scale(1.15);
    }

/* Cores individuais */
.btn-add-inline {
    color: #16a34a !important; /* verde */
}

.btn-del-inline {
    color: #d33 !important; /* vermelho */
}

/* Alinhamento da última coluna */
#tblLinhas td:last-child,
#tblLinhas th:last-child {
    text-align: center !important;
    padding: 0 !important;
}


/* Forçar o botão apagar a ficar pequeno */
.del-linha {
    width: 15px !important;
    height: 15px !important;
    padding: 0 !important;
    margin: auto !important;
}
/* Botão inserir linha — minimalista */
.insert-row-btn,
.btn-add-row {
    background: transparent !important;
    border: none !important;
    color: #16a34a !important; /* verde elegante */
    font-size: 18px !important; /* tamanho ideal */
    cursor: pointer;
    line-height: 1;
    padding: 0 !important;
    margin: 0 auto !important; /* centrar */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .insert-row-btn:hover,
    .btn-add-row:hover {
        color: #15803d !important; /* verde mais forte no hover */
        transform: scale(1.15);
    }


/* alinhamento */
.col-insert {
    text-align: center !important;
    padding: 0 !important;
}
/* ===========================
   CAMPOS DO CABEÇALHO (CLIENTE)
   Ajustes de largura + responsivo
   =========================== */

/* Linha Nº cliente + Contribuinte */
#no_cf {
    width: 20px;
}

#nif_cf {
    width: 10px;
}

/* Nome do cliente */
#nome_cf {
    width: min(420px, 90%);
}

/* Morada */
#morada_cf {
    width: min(420px, 90%);
}

/* Localidade */
#localidade_cf {
    width: 100px;
}

/* Código postal */
#cod_post_cf {
    width: 70px;
}

/* Concelho */
#concelho_cf {
    width: 130px;
}

/* Observações */
#observacao {
    width: min(450px, 95%);
}

/* ===========================
   RESPONSIVO — mobile / tablets
   =========================== */
@media (max-width: 900px) {
    #no_cf,
    #nif_cf,
    #nome_cf,
    #morada_cf,
    #localidade_cf,
    #cod_post_cf,
    #concelho_cf,
    #observacao {
        width: 100% !important;
    }

    .linha-top,
    .linha,
    .linha-dupla {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
}
/* Campo Nº (cliente) mais curto + espaçamento até Contribuinte */
#no_cf {
    width: 50px !important; /* reduzido 75% */
    margin-right: 40px !important; /* espaço vazio até ao contribuinte */
}
/* ======== FORÇAR TAMANHO DO Nº CLIENTE ======== */
.cliente-box .linha-top #no_cf {
    width: 60px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    margin-right: 50px !important; /* espaço antes de Contribuinte */
}
/* Área do cabeçalho: Cliente + Conta Corrente + Comerciais + Botões */
.cliente-area {
    display: flex;
    justify-content: flex-start;
    /* align-items: flex-start; /* alinha todos os blocos pelo topo */
    align-items: flex-end;
    gap: 16px;
    margin-top: 10px;
}

/* Caixas principais do topo */
.cliente-box,
.cc-box,
.comercial-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
}

/* Larguras aproximadas: 30% / 15% / 30% / 15% */
.cliente-box {
    flex: 0 0 30%;
}

.cc-box {
    flex: 0 0 10%;
}

.comercial-box {
    flex: 0 0 30%;
}

/* Coluna dos botões à direita (~15%) */
.cliente-botoes {
    flex: 0 0 10%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 0; /* já está controlado pelo flex */
}

/* Layout interno das linhas (reutilizado) */
.linha {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.linha-dupla {
    display: flex;
    gap: 10px;
}

.campo-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .campo-inline input,
    .campo-inline select,
    .linha input,
    .linha select {
        flex: 1;
    }

.campo-cp {
    flex: 1.3;
}

    .campo-cp input:first-of-type {
        max-width: 110px; /* CP */
    }

.titulo-bloco {
    font-weight: 600;
    margin-bottom: 4px;
}

/* Responsivo: em tablets/telemóveis tudo em coluna */
@media (max-width: 1024px) {
    .cliente-area {
        flex-direction: column;
        align-items: flex-start;
    }

    .cliente-box,
    .cc-box,
    .comercial-box,
    .cliente-botoes {
        flex: 1 1 100%;
    }

    .cliente-botoes {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-cli {
        flex: 1 1 48%;
    }
}
/* Barra de secção tipo “Clientes” */
.secao-titulo {
    width: 100%;
    display: block; /* força ocupação total */
    background: #f4f6fb;
    border: 1px solid #d7dce5;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 15px;
    color: #333;
    border-radius: 6px;
    margin: 8px 0;
    box-sizing: border-box;
}
/* ================================
   NOVO LOOK BOTÕES ERP DO RODAPÉ
   ================================ */

.doc-actions-modern {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 8px; /* espaço entre botões */
    flex-wrap: wrap;
}

/* estilo base */
.btn-erp {
    padding: 0.45rem 1.0rem;
    font-size: 14px;
    border-radius: 7px;
    border: 1px solid #cfd3d8;
    cursor: pointer;
    font-weight: 600;
    background: #f5f6f7;
    color: #333;
    transition: all 0.18s ease;
    box-shadow: 0 2px 3px rgba(0,0,0,0.08);
}

    /* HOVER global */
    .btn-erp:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.12);
    }

/* BOTÃO NOVO — verde elegante */
.btn-green {
    background: #2ecc71;
    border-color: #27ae60;
    color: white;
}

    .btn-green:hover {
        background: #27ae60;
    }

/* BOTÃO APAGAR — vermelho pro */
.btn-red {
    background: #e74c3c;
    border-color: #c0392b;
    color: #fff;
}

    .btn-red:hover {
        background: #c0392b;
    }

/* CINZA elegante (Anterior, Seguinte, Último, Imprimir) */
.btn-gray {
    background: #eef1f5;
    border-color: #d0d4da;
    color: #333;
}

    .btn-gray:hover {
        background: #e0e4ea;
    }

/* AZUL suave para “Gravar” */
.btn-blue {
    background: #4f8cff;
    border-color: #3f78df;
    color: #fff;
}

    .btn-blue:hover {
        background: #3f78df;
    }

/* AZUL FORTE para Fechar doc */
.btn-blue-strong {
    background: #1f4bdc;
    border-color: #163bbb;
    color: #fff;
}

    .btn-blue-strong:hover {
        background: #163bbb;
    }

/* BOTÕES EM MOBILE */
@media (max-width: 700px) {
    .doc-actions-modern {
        justify-content: center;
    }

    .btn-erp {
        flex: 1 1 45%;
        text-align: center;
    }
}
/* === BARRA SUPERIOR DO DOCUMENTO === */
.doc-topbar-flex {
    display: flex !important; /* sobrepõe o display:block da secao-titulo */
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px; /* um pouco mais compacto */
}

/* Texto à esquerda */
.doc-topbar-left {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    white-space: nowrap;
}

/* Centro — mantém o layout original dos campos */
.doc-topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Direita — marca CP2R */
.doc-topbar-right {
    font-weight: 600;
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
}


/* Texto à esquerda */
.doc-topbar-left {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    white-space: nowrap;
}

/* Centro — mantém o layout original dos campos */
.doc-topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Right — marca CP2R */
.doc-topbar-right {
    font-weight: 600;
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
}

/* Ajuste dos campos no centro */
.doc-topline {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* ============================================================
   NOVO DARK THEME — versão 100% neutra baseada em #303030
   Aplicado sempre que o <body> tiver a classe .dark-mode
   ============================================================ */
body.dark-mode {
    background: #303030 !important;
    color: #f1f1f1 !important;
}

    /* EXTRA: dark-mode para cabeçalho e menus */
    body.dark-mode .doc-header {
        background: #333 !important;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    body.dark-mode .doc-topbar-left,
    body.dark-mode .doc-topbar-right,
    body.dark-mode .doc-topline label {
        color: #f5f5f5 !important;
    }

    body.dark-mode .top-menu {
        background: #111 !important;
        color: #fff !important;
    }

    body.dark-mode .menu-item span {
        color: #fff !important;
    }

    body.dark-mode .submenu {
        background: #111827 !important;
        border-color: rgba(255,255,255,0.12) !important;
    }

        body.dark-mode .submenu li a,
        body.dark-mode .submenu li span {
            color: #e5e7eb !important;
        }

            body.dark-mode .submenu li a:hover,
            body.dark-mode .submenu li span:hover {
                background: rgba(255,255,255,0.10) !important;
            }

    /* ---- BARRA GLOBAL SUPERIOR ---- */
    body.dark-mode .global-topbar {
        background: #1f1f1f !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    body.dark-mode .topbar-left span,
    body.dark-mode .topbar-right .icon-btn {
        color: #f1f1f1 !important;
    }

    /* ---- WRAPPER DOS DOCUMENTOS ---- */
    body.dark-mode .doc-wrapper {
        background: #383838 !important;
        border: 1px solid rgba(255,255,255,0.15);
    }

    /* ---- BARRAS DE SECÇÃO (“Clientes”, “Artigos”, etc.) ---- */
    body.dark-mode .secao-titulo {
        background: #2e2e2e !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
        color: #ffffff !important;
    }

    /* ---- PAINÉIS INTERIORES ---- */
    body.dark-mode .cliente-box,
    body.dark-mode .cc-box,
    body.dark-mode .comercial-box {
        background: #3a3a3a !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        color: #f1f1f1 !important;
    }

    /* ---- INPUTS ---- */
    body.dark-mode input,
    body.dark-mode select,
    body.dark-mode textarea {
        background: #444 !important;
        border: 1px solid #666 !important;
        color: #ffffff !important;
    }

        body.dark-mode input:read-only {
            background: #2f2f2f !important;
            color: #ccc !important;
        }

        /* ---- PLACEHOLDERS ---- */
        body.dark-mode input::placeholder,
        body.dark-mode textarea::placeholder {
            color: #b8b8b8 !important;
        }

    /* ---- TABELA ARTIGOS ---- */
    body.dark-mode #tblLinhas {
        background: #2e2e2e !important;
        color: #f1f1f1 !important;
    }

        body.dark-mode #tblLinhas th {
            background: #3a3a3a !important;
            color: #fafafa !important;
            border-bottom: 1px solid rgba(255,255,255,0.15);
        }

        body.dark-mode #tblLinhas td {
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        body.dark-mode #tblLinhas tbody tr:nth-child(even) {
            background: #333 !important;
        }

        body.dark-mode #tblLinhas tbody tr:hover {
            background: #444 !important;
        }

    /* ---- LUPAS E ICONES ---- */
    body.dark-mode .btn-lupa,
    body.dark-mode .btn-miva {
        background: #555 !important;
        border: 1px solid #777 !important;
        color: #f1f1f1 !important;
    }

    /* ---- TOTAIS ---- */
    body.dark-mode .doc-totais input {
        background: #222 !important;
        border: 1px solid #555 !important;
        color: #fff !important;
    }

    body.dark-mode .tot-bloco.totalzao input {
        background: #1a73e8 !important; /* mantém azul bonito para contraste */
        border: none !important;
        color: white !important;
    }

    /* ---- BOTÕES MODERNOS ---- */
    body.dark-mode .btn-erp {
        background: #555 !important;
        color: #fff !important;
        border: 1px solid #777 !important;
    }

    body.dark-mode .btn-green {
        background: #21a67a !important;
        color: #fff !important;
    }

    body.dark-mode .btn-blue {
        background: #4285f4 !important;
        color: #fff !important;
    }

    body.dark-mode .btn-blue-strong {
        background: #1a73e8 !important;
        color: #fff !important;
    }

    body.dark-mode .btn-red {
        background: #d9534f !important;
        color: #fff !important;
    }

    body.dark-mode .btn-gray {
        background: #666 !important;
        color: #fff !important;
    }

    /* ---- MODAL ---- */
    body.dark-mode .modal-box {
        background: #3b3b3b !important;
        color: #fff !important;
    }

    body.dark-mode #auto-list,
    body.dark-mode #sugestoesArtigos {
        background: #3b3b3b !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        color: #fff !important;
    }

    /* ---- MENU SUPERIOR (Ficheiros / Documentos Clientes / etc.) ---- */
    body.dark-mode nav,
    body.dark-mode .menu-bar,
    body.dark-mode .nav-item {
        background: #1f1f1f !important;
        color: #fff !important;
    }

        body.dark-mode .nav-item:hover {
            background: #333 !important;
        }
/* Ajuste final cabeçalho Clientes / Comerciais para portáteis/ecrãs largos */
@media (min-width: 1200px) {
    .cliente-area {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        flex-wrap: nowrap;
    }

    /* Cliente um pouco mais largo */
    .cliente-box {
        flex: 0 0 38%;
        min-width: 360px;
    }

    /* Conta-corrente mais estreita */
    .cc-box {
        flex: 0 0 10%;
        min-width: 150px;
    }

    /* Dados comerciais bem mais estreito */
    .comercial-box {
        flex: 0 0 20%;
        max-width: 380px;
    }

    /* Coluna dos botões */
    .cliente-botoes {
        flex: 0 0 13%;
    }
}

/* Em ecrãs mais pequenos continua tudo empilhado em coluna */
@media (max-width: 1199px) {
    .cliente-area {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .cliente-box,
    .cc-box,
    .comercial-box,
    .cliente-botoes {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
@media (min-width: 1200px) {
    .cliente-box {
        flex: 0 0 40%;
        min-width: 380px;
    }
    /* cliente um pouco maior */
    .cc-box {
        flex: 0 0 10%;
        min-width: 150px;
    }

    .comercial-box {
        flex: 0 0 18%;
        max-width: 340px;
    }
    /* comerciais mais estreito */
    .cliente-botoes {
        flex: 0 0 14%;
    }
}
/* Ajustes finos dos campos de Dados comerciais */
.comercial-box input,
.comercial-box select {
    font-size: 13px;
    padding: 4px 6px;
}

/* exemplos individuais (substitui pelos ids reais) */
#cond_pag {
    width: 100px;
}

#prazo {
    width: 20px;
    text-align: right;
}

#d_venc {
    width: 100px;
}

#operador {
    width: 50px;
    text-align: right;
}

#vendedor_select {
    width: 150px;
    text-align: left;
    padding: 4px 6px;
}

#centro_custo {
    width: 200px;
}

#miva_doc {
    width: 130px;
}

#desc_global {
    width: 20px;
}
/* se quiseres botões mais estreitos/compactos */
.cliente-botoes .btn-cli {
    padding: 0.4rem 0.45rem;
    font-size: 12px;
}
/* =========================
   CABEÇALHO CLIENTES / COMERCIAIS
   => inputs com largura manual
   ========================= */

/* 1) Desligar o flex:1 dos campos do cabeçalho */
.cliente-box .linha input,
.cliente-box .linha select,
.cliente-box .linha-dupla input,
.cliente-box .linha-dupla select,
.comercial-box .linha input,
.comercial-box .linha select,
.comercial-box .linha-dupla input,
.comercial-box .linha-dupla select {
    flex: 0 0 auto; /* deixa de esticar, respeita o width */
    max-width: 100%; /* não rebenta a coluna */
}

/* 2) Tamanhos individuais — AGORA estes passam a mandar mesmo */
/* 2) AGORA MUDA MESMO*/

/* Dados do cliente */
#no_cf {
    width: 70px; /* nº cliente curtinho */
    text-align: right;
}

#nif_cf {
    width: 130px;
}

#nome_cf {
    width: 350px;
}

#morada_cf {
    width: 350px;
}

#localidade_cf {
    width: 160px;
}

#cod_post_cf {
    width: 90px;
    text-align: center;
}

#concelho_cf {
    width: 130px;
}

#observacao {
    width: 420px;
}

/* Conta corrente */
#cc_saldo {
    width: 50px;
    text-align: right;
}

/* Dados comerciais */
#cond_pag {
    width: 180px;
}

#prazo_pag {
    width: 60px;
    text-align: right;
}

#d_venc {
    width: 130px;
}

#no_operador,
#no_vended {
    width: 60px;
    text-align: right;
}

#obra {
    width: 80px;
}

#miva_doc {
    width: 100px;
}

#desconto_comercial {
    width: 50px;
    text-align: right;
}

/* 3) Em tablets/telemóvel continua responsivo:
      voltamos a deixar os campos ocupar 100% da largura */
@media (max-width: 1024px) {
    .cliente-box .linha input,
    .cliente-box .linha select,
    .cliente-box .linha-dupla input,
    .cliente-box .linha-dupla select,
    .comercial-box .linha input,
    .comercial-box .linha select,
    .comercial-box .linha-dupla input,
    .comercial-box .linha-dupla select {
        flex: 1 1 auto;
        width: 100% !important;
        max-width: 100%;
    }
}
/* Remover a margem superior que estava a desalinhar o bloco Dados do cliente */
.cliente-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ================================
   Compactar o bloco Dados do cliente
   ================================ */
.cliente-box {
    padding: 12px 16px !important;
}

    .cliente-box label {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }

    .cliente-box input,
    .cliente-box select,
    .cliente-box textarea {
        padding: 4px 6px !important; /* mais compacto */
        font-size: 13px !important;
        height: 28px !important; /* mais baixo */
    }

    .cliente-box .linha,
    .cliente-box .linha-dupla {
        margin-bottom: 6px !important; /* espaço vertical mais curto */
    }
/* ===============================
   AJUSTES FINAIS CABEÇALHO CLIENTES - FUNCIONA OK TESTADO BY MM
   =============================== */

/* 1) Alinhar todos os blocos pelo topo */
.cliente-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-items: flex-start !important;
}

.cliente-box,
.cc-box,
.comercial-box,
.cliente-botoes {
    margin-top: 0 !important;
}

/* 2) Compactar o bloco "Dados do cliente" */
.cliente-box {
    padding: 10px 14px !important;
    gap: 4px !important;
}

    .cliente-box .linha,
    .cliente-box .linha-dupla {
        margin-bottom: 4px !important;
    }

    .cliente-box label {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }

    .cliente-box input,
    .cliente-box select,
    .cliente-box textarea {
        padding: 4px 6px !important;
        font-size: 13px !important;
        height: 18px !important;
    }

    /* 3) NO CABEÇALHO os inputs deixam de esticar.
      Passam a respeitar o width que definires. */
    .cliente-box .linha input,
    .cliente-box .linha select,
    .cliente-box .linha-dupla input,
    .cliente-box .linha-dupla select,
    .comercial-box .linha input,
    .comercial-box .linha select,
    .comercial-box .linha-dupla input,
    .comercial-box .linha-dupla select,
    .cliente-box .campo-inline input,
    .cliente-box .campo-inline select,
    .comercial-box .campo-inline input,
    .comercial-box .campo-inline select {
        flex: 0 0 auto !important;
        max-width: 100%;
    }

.comercial-box input,
.comercial-box select,
.comercial-box textarea {
    padding: 4px 6px !important;
    font-size: 13px !important;
    height: 12px !important;
}
/* 4) Tamanhos manuais dos campos (AGORA estes mandam mesmo).
   Podes brincar à vontade com estes valores. */

/* Dados do cliente */
#no_cf {
    width: 70px;
    text-align: right;
}

#nif_cf {
    width: 130px;
}

#nome_cf {
    width: 360px;
}

#morada_cf {
    width: 360px;
}

#localidade_cf {
    width: 160px;
}

#cod_post_cf {
    width: 90px;
    text-align: center;
}

#concelho_cf {
    width: 140px;
}

#observacao {
    width: 430px;
}

/* Conta corrente */
#cc_saldo {
    width: 70px;
    text-align: right;
}

/* Dados comerciais estes valors abaixo mexem na versao FUULLHD */

#cond_pag {
    width: 170px;
    height: 26px !important;
    min-height: 26px !important;
    line-height: 26px !important;
}

#prazo_pag {
    width: 60px;
    text-align: right;
}

#d_venc {
    width: 130px;
}

#no_operador,
#no_vended {
    width: 60px;
    text-align: right;
}

#vendedor_select {
    width: 170px;
    height: 26px !important;
    min-height: 26px !important;
    line-height: 26px !important;
}

#obra {
    width: 230px;
    height: 26px !important;
    min-height: 26px !important;
    line-height: 26px !important;
}


#miva_doc {
    width: 214px;
    height: 26px !important;
    min-height: 26px !important;
    line-height: 26px !important;
}

#desconto_comercial {
    width: 60px;
    text-align: right;
}

/* 5) Em tablets / telemóvel continua tudo fluido */
@media (max-width: 1024px) {
    .cliente-box .linha input,
    .cliente-box .linha select,
    .cliente-box .linha-dupla input,
    .cliente-box .linha-dupla select,
    .comercial-box .linha input,
    .comercial-box .linha select,
    .comercial-box .linha-dupla input,
    .comercial-box .linha-dupla select,
    .cliente-box .campo-inline input,
    .cliente-box .campo-inline select,
    .comercial-box .campo-inline input,
    .comercial-box .campo-inline select {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100%;
    }
}
/* ======================
      MOBILE MENU
====================== */
/* ======================
   MENU MOBILE (VERSÃO LIMPA)
   ====================== */

/* Botão hamburguer – escondido em desktop */
.mobile-menu-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    padding: 4px 6px;
    display: none; /* aparece só em <=900px */
}

/* Layout do menu lateral */
.mobile-menu {
    position: fixed;
    top: 52px; /* por baixo da global-topbar */
    left: -300px; /* escondido */
    width: 300px;
    height: calc(100vh - 52px);
    background: #111827;
    color: #fff;
    box-shadow: 4px 0 12px rgba(0,0,0,0.35);
    padding: 12px 0;
    z-index: 6000 !important;
    transition: left .25s ease;
    overflow-y: auto;
}

    /* quando aberto */
    .mobile-menu.open {
        left: 0;
    }

/* overlay */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    z-index: 5900 !important;
}

    .menu-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* lista base */
.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu li {
    padding: 3px 14px;
}

/* títulos de secção (Ficheiros, Documentos Clientes, …) */
.mobile-menu .section-title,
.mobile-menu a {
    display: block;
    color: #f9fafb;
    text-decoration: none;
    font-size: 14px;
}

.mobile-menu .menu-section {
    border-bottom: 1px solid rgba(148,163,184,0.25);
    padding-top: 6px;
    padding-bottom: 6px;
}

    .mobile-menu .menu-section > .section-title {
        padding: 10px 18px;
        font-size: 15px;
        line-height: 1.4;
    }

/* seta ▸ */
.mobile-menu .arrow {
    float: right;
    font-size: 12px;
    margin-left: 4px;
}

/* submenus (FR, FT, NC, Clientes, Fornecedores, …) */
.mobile-menu .submenu {
    position: static !important;
    display: block !important;
    max-height: 0;
    overflow: hidden;
    background: #111827;
    padding: 0 0 0 16px;
    margin-top: 4px;
    transition: max-height .30s ease;
}

/* aberto via JS com .open */
.mobile-menu .has-submenu.open > .submenu {
    max-height: 800px !important;
}

/* rodar a seta em aberto */
.mobile-menu .has-submenu.open .arrow {
    transform: rotate(90deg);
}

/* items dos submenus */
.mobile-menu .submenu li a,
.mobile-menu .submenu li span {
    color: #e5e7eb;
    font-size: 14px;
    padding: 4px 6px;
    line-height: 1.2;
}

    /* hover submenus */
    .mobile-menu .submenu li a:hover,
    .mobile-menu .submenu li span:hover {
        background: rgba(255,255,255,0.12);
        color: #fff;
        padding-left: 18px;
    }

/* hover das secções principais */
.mobile-menu .menu-section > .section-title:hover {
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

/* hover geral ao passar o dedo/rato por cima da secção */
.mobile-menu .menu-section:hover {
    background: rgba(255,255,255,0.05);
}

/* ========= RESPONSIVO ========= */

/* Em mobile (<=900px): mostra hamburguer e esconde menu de topo */
@media (max-width: 900px) {
    .mobile-menu-btn {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        z-index: 2000;
    }

        .mobile-menu-btn span {
            width: 24px;
            height: 3px;
            background: white;
            border-radius: 2px;
            transition: .3s;
        }

    /* esconde o menu horizontal desktop */
    .top-menu {
        display: none !important;
    }
}

/* Em desktop/tablet largo: esconde completamente menu mobile */
@media (min-width: 901px) {
    .mobile-menu,
    .menu-overlay {
        display: none !important;
    }
}

@media (max-width: 1200px) and (min-width: 901px) {

    /* diminuir altura ligeiramente */
    .top-menu {
        height: 34px;
        padding: 0 10px;
    }

    /* reduzir espaçamento lateral entre itens */
    .menu-item {
        padding: 0 12px !important;
    }

        /* reduzir tamanho da fonte */
        .menu-item span {
            font-size: 14px !important;
            line-height: 34px !important;
            white-space: nowrap; /* impede “Painel / Principal” em 2 linhas */
        }

    /* submenus mais compactos */
    .submenu {
        min-width: 240px;
    }
}
/* ==========================================
   FIXAR BARRA DE TOPO E MENU SUPERIOR
   ========================================== */

/* Barra de topo sempre fixa */
.global-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5000; /* acima do menu superior */
}

/* Espaço para que o conteúdo não fique por baixo da barra azul */
body {
    padding-top: 52px; /* altura da .global-topbar */
}

/* Fixar barra do menu superior (somente desktop/tablets > 900px) */
@media (min-width: 901px) {
    .top-menu {
        position: fixed;
        top: 52px; /* logo abaixo da barra de topo */
        left: 0;
        right: 0;
        z-index: 4000;
        background: #0f172a; /* fundo consistente */
    }

    /* empurrar conteúdo mais para baixo para não ficar escondido */
    body {
        padding-top: 52px; /* barra de topo */
        padding-bottom: 0;
    }

    main, .content, #page-content {
        margin-top: 40px; /* altura do menu superior */
    }
}

/* No mobile, NÃO fixamos o menu superior (porque ele nem aparece) */
@media (max-width: 900px) {
    body {
        padding-top: 52px; /* só a barra azul */
    }
}
/* ============================================================
   CABEÇALHO DOCUMENTO — MOBILE / TABLET ≤ 900px  (VERSÃO FINAL)
   ============================================================ */
@media (max-width: 900px) {

    /* Cabeçalho fixo logo abaixo da barra azul */
    .doc-header {
        position: sticky;
        top: 52px;
        z-index: 3500;
        background: #f9fafb;
    }

    /* Esconde “Documento” e “Cp2r Software by MIR” */
    .doc-topbar-left,
    .doc-topbar-right {
        display: none !important;
    }

    .doc-topbar-flex {
        flex-direction: column;
        padding: 6px 12px;
        gap: 6px;
    }

    /* ---------- 2 LINHAS: GRID RESPONSIVO ---------- */
    .doc-topline {
        display: grid !important;
        grid-template-columns: auto /* TD.: */
        auto /* TD valor */
        3.5fr /* Nome do documento (bem maior) */
        auto /* Nº.: */
        auto /* Nº + lupa */
        auto; /* Série */

        column-gap: 6px;
        row-gap: 4px;
        align-items: center;
        width: 100%;
    }

        /* ---------- LINHA 1 (TD, nome documento, Nº) ---------- */
        .doc-topline > :nth-child(1),
        .doc-topline > :nth-child(2),
        .doc-topline > :nth-child(3),
        .doc-topline > :nth-child(4),
        .doc-topline > :nth-child(5) {
            grid-row: 1;
        }

    /* Nome do documento → muito maior */
    #tdoc_nome {
        grid-column: 3 / span 1;
        font-weight: 600;
        padding: 4px 6px;
        width: 100%; /* ocupa toda a coluna */
        max-width: none; /* não fica preso a larguras anteriores */
    }

    /* Nº + lupa encostados */
    .num-box {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    #no_doc {
        width: 60px;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
    }

    #btnVerDocs {
        font-size: 20px;
        color: #6b7280;
        margin-left: -2px;
    }

    /* ---------- LINHA 2 (Ref, Data, Série) ---------- */
    .doc-topline > :nth-child(6),
    .doc-topline > :nth-child(7),
    .doc-topline > :nth-child(8),
    .doc-topline > :nth-child(9),
    .doc-topline > :nth-child(10),
    .doc-topline > :nth-child(11) {
        grid-row: 2;
    }

    /* Ref. */
    #referencia {
        max-width: 85px;
        width: 100%;
    }

    /* Data encostada à label */
    .doc-topline > :nth-child(9) {
        margin-left: 4px;
    }

    #d_doc {
        max-width: 130px;
        width: 100%;
        padding-right: 24px;
    }

    /* Série mais pequena */
    #ser_doc {
        width: 45px;
        text-align: center;
        font-weight: bold;
        margin-left: 2px;
    }
}
/* Encostar série */
.doc-topline label[for="ser_doc"] {
    margin-left: 6px !important;
}

#ser_doc {
    width: 50px !important;
    margin-left: 2px !important;
}
/* aproximar a label "Série:" */
.doc-topline label[for="ser_doc"] {
    margin-left: 4px;
}
/* =========================
   MODAL DOCUMENTOS ANTERIORES
   ========================= */

#modalDocs {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5000;
}

    #modalDocs .modal-box {
        background: #fff;
        width: min(92vw, 950px); /* 👈 controla largura máxima */
        max-height: 70vh;
        border-radius: 14px;
        padding: 18px 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.35);
        display: flex;
        flex-direction: column;
    }


    /* zona scrollável da tabela */
    #modalDocs .modal-content {
        overflow-y: auto;
        margin-top: 10px;
        flex: 1 1 auto;
    }
    .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #444;
}
.modal-close:hover {
    color: #000;
}
#tblDocsLista tbody tr:hover {
    background: #eef4ff;
}
#tblDocsLista {
    width: 100%;
    table-layout: fixed; /* 👈 essencial */
}

    #tblDocsLista th,
    #tblDocsLista td {
        padding: 8px 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }

        /* larguras individuais */
        #tblDocsLista th:nth-child(1),
        #tblDocsLista td:nth-child(1) {
            width: 70px;
        }
        /* Doc */

        #tblDocsLista th:nth-child(2),
        #tblDocsLista td:nth-child(2) {
            width: 95px;
        }
        /* Data */

        #tblDocsLista th:nth-child(3),
        #tblDocsLista td:nth-child(3) {
            width: 80px;
        }
        /* Num C/F */

        #tblDocsLista th:nth-child(4),
        #tblDocsLista td:nth-child(4) {
            width: 200px;
        }
        /* Nome */

        #tblDocsLista th:nth-child(5),
        #tblDocsLista td:nth-child(5) {
            width: 90px;
            text-align: right;
        }

        #tblDocsLista th:nth-child(6),
        #tblDocsLista td:nth-child(6) {
            width: 180px;
        }
        /* Ref */

        #tblDocsLista th:nth-child(7),
        #tblDocsLista td:nth-child(7) {
            width: 90px;
            text-align: center;
        }
/* =========================
   BOTÃO FECHAR – MODAL DOCS (DISCRETO)
   ========================= */

#modalDocs .modal-header > .close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    color: #dc2626;
    border: 1px solid rgba(220,38,38,0.35);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.65;
    transition: all .15s ease;
}

    #modalDocs .modal-header > .close-btn:hover {
        opacity: 1;
        background: #dc2626;
        color: #fff;
    }

#filtroDocs {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    background: #f9fafb;
    transition: all 0.2s ease;
}

    #filtroDocs:focus {
        outline: none;
        border-color: #16a34a; /* verde elegante */
        background: #fff;
        box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
    }
#tblDocsLista tbody tr:hover {
    background: #f1f5f9;
}
.estado-anulado {
    color: #dc2626;
    font-weight: 600;
}