/* Versão de computador (ecrã com 1200 px ou mais E rato). O index.html só aplica este ficheiro nesse caso
   (media="(min-width: 1200px) and (pointer: fine)"): telemóvel e tablet ficam exatamente como estão.
   A barra de baixo passa a menu à esquerda (todos os ecrãs, por grupos: menuComputador em app.js). */

:root { --lado: 252px; --altura-nav: 0px; }

/* Menu à esquerda */
body { padding-left: var(--lado); }
body:has(#separadores[hidden]), body:has(#separadores:empty), body.painel-pc { padding-left: 0; }
.separadores {
  top: 0; bottom: 0; right: auto; width: var(--lado); z-index: 5;
  display: flex; flex-direction: column; gap: 2px; padding: 28px 12px 24px;
  border-top: 0; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong, var(--line)) transparent;
}
.separadores .tab {
  flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
  min-height: 40px; padding: 8px 12px; border-radius: 8px;
  font-size: 11px; letter-spacing: 0.14em;
}
.separadores .tab .icone svg { width: 20px; height: 20px; }
.separadores .tab:hover { color: var(--text); background: var(--line); }
.separadores .tab--active { color: var(--text); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.separadores .tab--active::after { display: none; }
/* O número (avisos, registos, faturas…) no fim da linha, ao centro, em vez de preso ao canto como na barra do telemóvel */
#separadores .badge, #separadores .contador { position: static; margin-left: auto; flex: none; }
/* Letra do menu um pouco maior (também no estilo Moderno, que a fixa em 11 px) */
#separadores .tab { font-size: 13px; }
.menu-titulo { margin: 18px 12px 6px; color: var(--faint, var(--muted)); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }

/* Conteúdo ao centro, com largura confortável */
.topo { max-width: 1100px; padding-top: 32px; }
main { max-width: 1100px; padding-bottom: 64px; }
.rodape-fixo { left: var(--lado); bottom: 0; }

/* Formulários em janela no meio do ecrã (no telemóvel sobem de baixo) */
.fundo-modal { align-items: center; }
.modal { border-radius: 18px; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 24px; }

/* Com rato: as linhas reagem ao passar por cima */
#ecra .row[href]:hover, #ecra button.row:hover, #ecra .item-config:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }

/* ---------- D2: ecrãs que ganham com espaço ---------- */
main { max-width: 1400px; }
.topo { max-width: 1400px; }

/* Checklist com "Tudo": uma coluna por secção */
.colunas-seccoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.colunas-seccoes .coluna-titulo { margin-bottom: 8px; }

/* Fichas técnicas: lista à esquerda, ficha à direita (cada uma com a sua barra de deslocar) */
.mestre-detalhe { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 32px; align-items: start; }
.mestre, .detalhe { display: flex; flex-direction: column; gap: 12px; }
.mestre { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong, var(--line)) transparent; }
.mestre .item-custo.aberta { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.detalhe { border-left: 1px solid var(--line); padding-left: 32px; min-height: 60vh; }
.ficha-nome { margin: 0; }

/* Faturas: as fotos à esquerda (ficam à vista ao deslocar), os dados à direita */
.fatura-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.fatura-imagens { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.fatura-imagens img { width: 100%; border-radius: 8px; cursor: zoom-in; background: #fff; }
.fatura-dados { display: flex; flex-direction: column; gap: 12px; }

/* Tabelas (Produtos, Preços de venda): títulos que ordenam, linhas que reagem ao rato */
.tabela-pc { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-pc th { text-align: left; font-weight: 500; padding: 0 10px 8px; border-bottom: 1px solid var(--line-strong, var(--line)); white-space: nowrap; }
.tabela-pc td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabela-pc .num { text-align: right; white-space: nowrap; }
.tabela-pc th.num .th-ordem { justify-content: flex-end; width: 100%; }
.th-ordem { display: inline-flex; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.th-ordem:hover { color: var(--text); }
.tabela-pc tbody tr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.tabela-pc .linha-clicavel { cursor: pointer; }
.tabela-pc tr.inativo { opacity: .55; }
.tabela-pc .produto-nome { border: 0; background: none; padding: 0; min-height: 32px; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.tabela-pc .produto-nome:hover { color: var(--gold); }
.tabela-pc .stepper { justify-content: flex-end; gap: 6px; }
.tabela-pc .stepper__btn { min-width: 36px; min-height: 36px; }
.tabela-pc .stepper__value { min-width: 44px; height: 36px; font-size: 18px; }

/* ---------- Letra um pouco maior no computador (o telemóvel fica igual) ---------- */
:root { --fs-small: 14px; --fs-label: 12.5px; }
.segmento button, .sub-abas button { font-size: 14px; }
.field > span { font-size: 11.5px; }
.row__time { font-size: 13px; }
.traduzido { font-size: 12.5px; }
.aviso-li { font-size: 11.5px; }
.numero span, .uso-app th { font-size: 11.5px; }
.numero small { font-size: 12.5px; }
.g-eixo, .g-limite-texto { font-size: 12.5px; }
/* Painel do dono */
.pc-rot, .pc-tabela th, .pc-estado, .pc-marca span { font-size: 12.5px; }
.pc-grafico text { font-size: 12.5px; }
.pc-item.depois small { font-size: 11.5px; }