/* ═══════════════════════════════════════════════════════════════════
   GestorPRO — COMPONENTES COMUNS (gp-ui.css) · Fase A, 25-Set-2026
   ═══════════════════════════════════════════════════════════════════
   Auditoria visual de 25-Set-2026: cada módulo trazia o seu desenho
   (336 cores escritas à mão, 65 folhas de estilo dentro de ficheiros
   de programa, 49 ecrãs com cabeçalho próprio). Esta folha é o sítio
   único dos componentes que os módulos passam a usar, ecrã a ecrã:

     · escala de letra, cantos e cores com significado (tokens --gp-*)
     · cabeçalho de página  → gpCabecalho() no js/app.js
     · caixa de tabela, números à direita, linha vazia
     · avisos (info, atenção, erro, certo) e etiquetas de estado

   As cores vêm das do styles.css (--primary, --success, --warning,
   --danger…): aqui só se lhes dá o nome do que QUEREM DIZER. A cor de
   cada módulo fica no ícone do cabeçalho, e em mais lado nenhum.
   Carrega depois do styles.css e antes do responsivo.css. */

:root {
    /* Letra: sete tamanhos chegam para tudo */
    --gp-fs-xs:   11.5px;   /* etiquetas, notas de rodapé */
    --gp-fs-sm:   12.5px;   /* texto secundário, cabeçalho de tabela */
    --gp-fs:      13.5px;   /* corpo e células */
    --gp-fs-md:   15px;     /* títulos de cartão */
    --gp-fs-lg:   18px;     /* títulos de secção */
    --gp-fs-xl:   23px;     /* título da página */
    --gp-fs-num:  26px;     /* números de destaque */

    /* Cantos: três, e a cápsula */
    --gp-r-sm:    6px;
    --gp-r:       10px;
    --gp-r-lg:    14px;
    --gp-r-pill:  999px;

    /* Cores pelo que querem dizer */
    --gp-accao:        var(--primary);
    --gp-accao-bg:     var(--primary-alpha);
    --gp-bom:          var(--success);
    --gp-bom-bg:       var(--success-bg);
    --gp-atencao:      var(--warning);
    --gp-atencao-bg:   var(--warning-bg);
    --gp-erro:         var(--danger);
    --gp-erro-bg:      var(--danger-bg);
    --gp-info:         var(--info);
    --gp-info-bg:      var(--info-bg);
}

/* ── CABEÇALHO DE PÁGINA ───────────────────────────────────────────
   O mesmo .page-header de sempre, com o ícone do módulo quando o há.
   Gerado por gpCabecalho({ titulo, sub, icone, cor, accoes }). */
.gp-cab-id { display: flex; gap: 14px; align-items: center; min-width: min(260px, 100%); flex: 1 1 auto; }
.gp-cab-ic {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center; color: #fff; font-size: 19px;
    background: var(--gp-cab-cor, var(--primary));
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.gp-cab .page-header-info h1 { margin: 0; line-height: 1.2; }
.gp-cab .page-header-info p  { line-height: 1.5; }

/* ── TABELAS ───────────────────────────────────────────────────────
   O desenho das células é o do styles.css (th/td), para todas as
   tabelas. Aqui: a caixa que as leva e as ajudas de alinhamento. */
.gp-tabela-cx {
    overflow-x: auto; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: var(--gp-r);
}
.gp-tabela-cx > table { width: 100%; border-collapse: collapse; }
th.n, td.n, th.num, td.num {
    text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
tr.gp-total td { font-weight: 800; border-top: 2px solid var(--border); }
td.gp-vazio {
    text-align: center; padding: 28px 16px; color: var(--text-muted); font-size: var(--gp-fs);
}

/* ── AVISOS ───────────────────────────────────────────────────────── */
.gp-aviso {
    display: flex; gap: 10px; align-items: flex-start;
    border-radius: var(--gp-r); padding: 11px 14px; margin-bottom: 12px;
    font-size: var(--gp-fs); line-height: 1.6;
    background: var(--gp-info-bg); color: var(--gp-info);
    border: 1px solid color-mix(in srgb, var(--gp-info) 25%, transparent);
}
.gp-aviso > i { margin-top: 3px; }
.gp-aviso.atencao { background: var(--gp-atencao-bg); color: var(--gp-atencao); border-color: color-mix(in srgb, var(--gp-atencao) 30%, transparent); }
.gp-aviso.erro    { background: var(--gp-erro-bg);    color: var(--gp-erro);    border-color: color-mix(in srgb, var(--gp-erro) 30%, transparent); }
.gp-aviso.bom     { background: var(--gp-bom-bg);     color: var(--gp-bom);     border-color: color-mix(in srgb, var(--gp-bom) 30%, transparent); }

/* Título e texto dentro de um aviso */
.gp-aviso-tit { font-size: 14px; font-weight: 800; color: var(--text-primary); margin-bottom: 3px; }
.gp-aviso-txt { font-size: var(--gp-fs-sm); line-height: 1.65; color: var(--text-secondary); }
.gp-aviso-txt strong { color: var(--text-primary); }

/* ── CAIXA DE PROCURA ──────────────────────────────────────────────── */
.gp-busca { position: relative; display: flex; align-items: center; }
.gp-busca > i { position: absolute; left: 10px; font-size: 12px; color: var(--text-muted); pointer-events: none; }
.gp-busca input {
    padding: 7px 30px 7px 30px; border: 1px solid var(--border); border-radius: var(--gp-r-sm);
    font-family: inherit; font-size: 13px; min-width: 200px; background: var(--card-bg); color: var(--text-primary);
}
.gp-busca input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-alpha); }
.gp-busca-limpar {
    position: absolute; right: 6px; border: none; background: none; cursor: pointer;
    color: var(--text-muted); font-size: 12px; padding: 4px;
}

/* ── BOTÕES DE EMITIR (tipos de documento) ─────────────────────────── */
.gp-emitir { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.gp-emitir-b {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
    background: var(--card-bg); color: var(--primary-dark); border: 1px solid var(--border);
    border-radius: var(--gp-r-sm); cursor: pointer; font-family: inherit; font-weight: 800; font-size: 13px;
    transition: background .12s, border-color .12s;
}
.gp-emitir-b i { color: var(--primary); font-size: 13px; }
.gp-emitir-b:hover { border-color: var(--primary); background: var(--gp-accao-bg); }
.gp-emitir-b:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gp-sep-v { width: 1px; height: 28px; background: var(--border); margin: 0 2px; }

/* ── NÚMEROS DO TOPO (stat-card) ───────────────────────────────────── */
.gp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (max-width: 1000px) { .gp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .gp-kpis { grid-template-columns: 1fr; } }
@media (max-width: 768px)  { .gp-sep-v { display: none; } }

/* ── O NIF CONFERIDO NA AGT (nif.js) ─────────────────────────────── */
.nif-agt-aviso { font-size: 12px; line-height: 1.5; margin-top: 5px; color: var(--text-muted); }
.nif-agt-aviso.bom     { color: var(--gp-bom); }
.nif-agt-aviso.atencao { color: var(--gp-atencao); }
.nif-agt-aviso.erro    { color: var(--gp-erro); background: var(--gp-erro-bg); border-radius: var(--gp-r-sm); padding: 7px 9px; }
.nif-agt-aviso b { color: var(--text-primary); }

/* ── ETIQUETAS DE ESTADO ─────────────────────────────────────────────
   O .badge do styles.css é a etiqueta oficial (badge-success,
   badge-warning, badge-danger, badge-info, badge-gray). Não há outra. */

.gp-cab-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }

/* ── O ÍCONE DO TÍTULO EM QUADRADO (Fase C, 25-Set-2026) ────────────
   69 ecrãs já escreviam o título com o ícone do módulo à frente
   (<h1><i class="fas …" style="color:…"></i> Título</h1>). Em vez de os
   reescrever um a um, o ícone ganha o mesmo quadrado do gpCabecalho: a
   cor do quadrado é a que o ecrã já dava ao ícone (currentColor) e o
   desenho fica branco. Sem cor própria, vai o azul da marca. */
.page-header-info h1 > i.fas:first-child,
.page-header-info h1 > i.fa-solid:first-child {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
    background-color: currentColor; font-size: 17px; vertical-align: middle; margin: -4px 10px 0 0;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.page-header-info h1 > i.fas:first-child:not([style]),
.page-header-info h1 > i.fa-solid:first-child:not([style]) { color: var(--primary); }
.page-header-info h1 > i.fas:first-child::before,
.page-header-info h1 > i.fa-solid:first-child::before { color: #fff; }
@media print {
    .page-header-info h1 > i.fas:first-child,
    .page-header-info h1 > i.fa-solid:first-child { background: none; box-shadow: none; width: auto; height: auto; margin-right: 6px; }
    .page-header-info h1 > i.fas:first-child::before,
    .page-header-info h1 > i.fa-solid:first-child::before { color: inherit; }
}
@media (max-width: 480px) {
    .page-header-info h1 > i.fas:first-child,
    .page-header-info h1 > i.fa-solid:first-child { width: 34px; height: 34px; font-size: 15px; border-radius: 10px; }
}

/* ── GRELHAS ESCRITAS À MÃO, NO TELEMÓVEL ────────────────────────────
   Cerca de 50 filas de números e cartões fixam 3 a 6 colunas no próprio
   elemento (style="grid-template-columns:repeat(4,1fr)"). Num telemóvel
   ficavam espremidas. Até o ecrã ser reescrito com .gp-kpis, estas regras
   dobram-nas: 2 colunas num ecrã médio, 1 num telemóvel pequeno. */
@media (max-width: 900px) {
    [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns: repeat(5, 1fr)"],
    [style*="grid-template-columns:repeat(6,1fr)"], [style*="grid-template-columns: repeat(6, 1fr)"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 520px) {
    [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}
/* O subtítulo alinha com o título, e não debaixo do quadrado. */
.page-header-info:has(> h1 > i.fas:first-child) > p,
.page-header-info:has(> h1 > i.fa-solid:first-child) > p { padding-left: 50px; }
@media (max-width: 480px) {
    .page-header-info:has(> h1 > i.fas:first-child) > p,
    .page-header-info:has(> h1 > i.fa-solid:first-child) > p { padding-left: 44px; }
}
@media print {
    .page-header-info:has(> h1 > i.fas:first-child) > p { padding-left: 0; }
}

/* ── A IMAGEM DO ARTIGO (gpImagemArtigoHTML) ─────────────────────────
   As regras viviam dentro da folha do Balcão: na lista de Produtos,
   sem o Balcão aberto, a inicial ficava no canto de cima e parecia uma
   imagem partida (fotografia do João, 25-Set-2026). O Balcão continua a
   acertar as dele por cima destas. */
.gp-img-artigo {
    width: 100%; height: 100%; overflow: hidden; background: #fff;
    display: flex; align-items: center; justify-content: center;
}
.gp-img-artigo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gp-img-vazia {
    font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: -.02em;
    font-family: ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
}

/* ── CARTÃO DE NÚMERO SEM O INVÓLUCRO (25-Set-2026) ──────────────────
   O .stat-card é uma fila (ícone | texto). Vários ecrãs (Compras e mais
   ~40) põem o valor, o rótulo e a nota soltos dentro dele: viravam três
   colunas e o «Kz 0» partia-se em duas linhas. Soltos, empilham-se. */
.stat-card:has(> .stat-value) { flex-direction: column; align-items: stretch; gap: 2px; }
.stat-card > .stat-value { overflow-wrap: anywhere; }

/* ── O BOTÃO DENTRO DO ECRÃ VAZIO ────────────────────────────────────
   «.empty-state i» (48px, esbatido) apanhava também o ícone do botão:
   «Registar a primeira» saía com um + gigante. O ícone do botão volta
   ao tamanho do botão; e o botão fica com um pouco de ar por cima. */
.empty-state .btn i { font-size: inherit; margin: 0; opacity: 1; }
.empty-state .btn { margin-top: 8px; }


/* ══ COMERCIAL PROFISSIONAL (23-Out-2026) ════════════════════════════
   Peças que os ecrãs do Comercial passam a partilhar. */

/* O menu «Mais» do cabeçalho: as acções de todos os dias ficam à vista,
   as de uma vez por mês entram aqui. É um <details>, abre sem programa;
   o app.js fecha-o ao clicar fora. */
.gp-mais { position: relative; display: inline-block; }
.gp-mais > summary { list-style: none; cursor: pointer; }
.gp-mais > summary::-webkit-details-marker { display: none; }
.gp-mais[open] > summary { border-color: var(--primary); }
.gp-mais-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 250px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--gp-r);
    box-shadow: 0 14px 34px -14px rgba(15, 23, 42, .38); padding: 6px; display: grid; gap: 2px;
}
.gp-mais-menu > button {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 11px; border: none; background: none; border-radius: var(--gp-r-sm);
    font: inherit; font-size: 13px; color: var(--text-primary); cursor: pointer; white-space: nowrap;
}
.gp-mais-menu > button i { width: 16px; text-align: center; color: var(--text-muted); }
.gp-mais-menu > button:hover,
.gp-mais-menu > button:focus-visible { background: var(--gp-accao-bg); outline: none; }
.gp-mais-menu > hr { border: none; border-top: 1px solid var(--border); margin: 4px 2px; }

/* A barra de procura por cima de uma tabela (gpFiltrarTabela). */
.gp-filtros {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.gp-filtros .gp-busca { flex: 1 1 240px; max-width: 400px; }
.gp-filtros .gp-busca input { width: 100%; min-width: 0; }
.gp-filtros select.form-control { width: auto; min-width: 170px; }
.gp-filtros-conta { font-size: var(--gp-fs-xs); color: var(--text-muted); margin-left: auto; }

/* O botão de apagar, igual em todo o lado. */
.btn.btn-perigo {
    background: var(--danger-bg); color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}
.btn.btn-perigo:hover { background: var(--danger); color: #fff; }

/* A pergunta antes de apagar (gpConfirmar), por cima de tudo. */
.gp-conf-ov {
    position: fixed; inset: 0; z-index: 100000; background: rgba(15, 23, 42, .45);
    display: grid; place-items: center; padding: 16px;
}
.gp-conf {
    width: min(460px, 100%); background: var(--card-bg); border-radius: var(--gp-r-lg);
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .55); padding: 22px 22px 18px;
}
.gp-conf-cab { display: flex; gap: 14px; align-items: flex-start; }
.gp-conf-ic {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: var(--gp-accao-bg); color: var(--primary); font-size: 17px;
}
.gp-conf.perigo .gp-conf-ic { background: var(--gp-erro-bg); color: var(--gp-erro); }
.gp-conf-tit { font-size: var(--gp-fs-md); font-weight: 800; color: var(--text-primary); margin: 3px 0 6px; line-height: 1.35; }
.gp-conf-txt { font-size: var(--gp-fs); line-height: 1.6; color: var(--text-secondary); white-space: pre-wrap; max-height: 60vh; overflow: auto; }
.gp-conf-campo { margin-top: 12px; width: 100%; }
.gp-conf-acc { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.gp-conf.perigo .gp-conf-ok { background: var(--danger); border-color: var(--danger); color: #fff; }
@media print { .gp-conf-ov, .gp-mais-menu { display: none !important; } }


/* ── SEPARADORES DE UM ECRÃ (23-Out-2026, fase 2) ──────────────────────
   Um só desenho para os separadores da Caixa, Compras, Stock, AGT,
   Facturação Electrónica e Retenções — cada um tinha o seu, com cores
   escritas à mão e repintadas por programa. O escolhido leva .activo. */
.gp-seps {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 18px; max-width: 100%;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--gp-r);
}
.gp-seps > button {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
    border: none; border-radius: 7px; background: transparent; color: var(--text-secondary);
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.gp-seps > button:hover { color: var(--text-primary); }
.gp-seps > button.activo { background: var(--card-bg); color: var(--primary); box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }
.gp-seps-n { font-size: 11px; font-weight: 700; opacity: .65; }

/* Pastilhas de escolha rápida (períodos dos relatórios). */
.gp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-chips > button {
    padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--gp-r-pill); background: var(--card-bg); color: var(--text-secondary);
}
.gp-chips > button:hover { border-color: var(--primary); color: var(--primary); }
.gp-chips > button.activo { background: var(--primary); border-color: var(--primary); color: #fff; }
@media print { .gp-seps, .gp-chips { display: none !important; } }