/* ============================================================
   BootTax — interface da aplicação
   Construída sobre os tokens do Design System Mozaboot (wwwroot/ds).
   Estrutura de páginas inspirada no PHC GO: menu lateral, barra de
   topo, painel com indicadores, fichas organizadas por secções.
   ============================================================ */

:root {
  --lateral-largura: 16.5rem;
  --barra-altura: 4rem;
  --grelha-linha: var(--border-subtle);
}

html, body { height: 100%; }
body { background: var(--surface-page); }
p { margin: 0; }
.icone { flex: 0 0 auto; display: inline-block; vertical-align: middle; }

/* ---------- Estrutura: menu lateral + área principal ---------- */
.app {
  display: grid; grid-template-columns: var(--lateral-largura) minmax(0, 1fr); min-height: 100%;
  /* a coluna do menu mantém o azul-marinho em páginas mais altas do que o ecrã */
  background: linear-gradient(to right, var(--moz-navy-900) var(--lateral-largura), var(--surface-page) var(--lateral-largura));
}

.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  background: var(--bg-mesh-navy); color: var(--text-on-dark);
}
.lateral-marca { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2); }
.lateral-logo { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-height: 3.5rem; }
.lateral-logo img { display: block; max-width: 100%; max-height: 3.25rem; width: auto; height: auto; object-fit: contain; }
.lateral-nome { display: block; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--text-on-dark); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.lateral-mozaboot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-2); color: var(--text-on-dark-muted); font-size: var(--fs-caption); white-space: nowrap; }
.lateral-mozaboot img { height: 1.5rem; width: auto; opacity: 0.85; }
.lateral-mozaboot:hover { color: var(--text-on-dark); }
.lateral-mozaboot:hover img { opacity: 1; }
.lateral-produto {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-caption); color: var(--text-on-dark-muted); letter-spacing: var(--ls-wide);
}
.lateral-produto strong { color: var(--text-on-dark); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); font-size: var(--fs-body-sm); }
.lateral-produto .moz-gradient-rule { width: 1.5rem; height: 3px; }

.menu-grupo { display: flex; flex-direction: column; gap: 2px; }
.menu-grupo-titulo {
  font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: rgba(255, 255, 255, 0.45); padding: 0 var(--space-3) var(--space-1);
}
.menu-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0.4375rem var(--space-3); border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.78); font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.menu-item:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-on-dark); }
.menu-item.activo {
  background: rgba(255, 255, 255, 0.11); color: var(--text-on-dark); font-weight: var(--fw-semibold);
  box-shadow: var(--glass-highlight-navy);
}
.menu-item.activo .icone { color: var(--moz-azul-claro); }

.lateral-empresa {
  margin-top: auto; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
  background: var(--glass-tint-navy); border: var(--glass-border-navy);
  color: var(--text-on-dark); font-size: var(--fs-caption);
}
.lateral-empresa:hover { color: var(--text-on-dark); background: rgba(255, 255, 255, 0.08); }
.lateral-empresa strong { display: block; font-size: var(--fs-body-sm); line-height: var(--lh-snug); }
.lateral-empresa span { color: var(--text-on-dark-muted); }
.lateral-empresa .icone { color: var(--moz-azul-claro); }

.principal { min-width: 0; display: flex; flex-direction: column; }

/* Barra de topo (vidro sobre o fundo da página) */
.barra {
  position: sticky; top: 0; z-index: 20; height: var(--barra-altura);
  display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6);
  background: rgba(248, 249, 251, 0.82);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--border-subtle);
}
.barra-migalhas { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--text-muted); min-width: 0; }
.barra-migalhas strong { color: var(--text-strong); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-direita { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

.menu-conta { position: relative; }
.menu-conta > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-strong);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
}
.menu-conta > summary::-webkit-details-marker { display: none; }
.menu-conta > summary:hover { border-color: var(--border-default); }
.avatar {
  width: 2rem; height: 2rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center;
  background: var(--moz-gradient); color: var(--moz-navy-900); font-size: var(--fs-caption); font-weight: var(--fw-bold);
}
.menu-conta-lista {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); min-width: 15rem;
  display: flex; flex-direction: column; padding: var(--space-2);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.menu-conta-lista .quem-sou { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-2); }
.menu-conta-lista .quem-sou strong { display: block; color: var(--text-strong); }
.menu-conta-lista .quem-sou span { font-size: var(--fs-caption); color: var(--text-muted); }
.menu-conta-lista a, .menu-conta-lista button {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-body-sm); color: var(--text-body); background: none; border: 0; cursor: pointer; text-align: left;
}
.menu-conta-lista a:hover, .menu-conta-lista button:hover { background: var(--surface-sunken); color: var(--text-strong); }
.menu-conta-lista form { margin: 0; }

/* Botão com lista desdobrável (Novo documento) */
.menu-desdobravel { position: relative; }
.menu-desdobravel > summary { list-style: none; }
.menu-desdobravel > summary::-webkit-details-marker { display: none; }
.menu-desdobravel-lista {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 25; min-width: 16rem;
  display: flex; flex-direction: column; padding: var(--space-2);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.menu-desdobravel-lista a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-body); font-size: var(--fs-body-sm); }
.menu-desdobravel-lista a:hover { background: var(--surface-sunken); color: var(--text-strong); }
.menu-desdobravel-lista a strong { display: block; color: var(--text-strong); }
.menu-desdobravel-lista a .sub { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
.menu-desdobravel-lista a .icone { color: var(--moz-blue-500); }
.menu-desdobravel-lista .menu-grupo { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.menu-desdobravel-lista .menu-grupo + a { margin-top: 0; }
.menu-desdobravel-lista .menu-grupo:not(:first-child) { border-top: 1px solid var(--border-subtle); margin-top: var(--space-1); padding-top: var(--space-3); }

.conteudo { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }

/* Menu em ecrãs pequenos: o menu lateral passa a gaveta */
.menu-abrir { display: none; }
#menu-estado { position: absolute; opacity: 0; pointer-events: none; }
.menu-fundo { display: none; }

@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); background: var(--surface-page); }
  .lateral {
    position: fixed; z-index: 40; left: 0; top: 0; width: min(var(--lateral-largura), 85vw);
    transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out);
  }
  #menu-estado:checked ~ .lateral { transform: none; box-shadow: var(--shadow-xl); }
  #menu-estado:checked ~ .menu-fundo { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0, 6, 46, 0.4); }
  .menu-abrir {
    display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
    border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-strong); cursor: pointer;
  }
  .barra { padding: 0 var(--space-4); }
  .conteudo { padding: var(--space-4); }
  .menu-conta .nome-curto { display: none; }
}

/* ---------- Cabeçalho de página (como as fichas do PHC GO) ---------- */
.cabeca-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.cabeca-pagina > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.cabeca-pagina h1 { font-size: var(--fs-h3); letter-spacing: var(--ls-tight); }
.sobre { font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-accent); }
.sobre a { color: inherit; }
.sobre .estado { vertical-align: middle; }
.accoes { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.accoes form { margin: 0; }
.quem { font-size: var(--fs-body-sm); color: var(--text-muted); }

/* ---------- Botões (Button do Design System) ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap;
  padding: 0.6875rem 1rem; border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--action-primary); color: var(--action-primary-text);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.botao:hover { background: var(--action-primary-hover); color: var(--action-primary-text); }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.botao.destaque { background: var(--moz-gradient); color: var(--moz-navy-900); }
.botao.destaque:hover { box-shadow: var(--shadow-glow); color: var(--moz-navy-900); }
.botao.secundario { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-strong); }
.botao.secundario:hover { background: var(--moz-navy-50); border-color: var(--moz-navy-400); color: var(--text-strong); }
.botao.perigo { background: var(--moz-danger); color: var(--moz-white); }
.botao.perigo:hover { background: var(--moz-danger); filter: brightness(0.93); }
.botao.grande { font-size: var(--fs-body); padding: 0.875rem 1.25rem; }
.botao.largo-total { width: 100%; }
.ligacao { font: inherit; font-size: var(--fs-body-sm); background: none; border: 0; padding: 0; color: var(--text-link); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.ligacao:hover { color: var(--action-accent-hover); text-decoration: underline; }
.ligacao.perigo { color: var(--moz-danger); }

/* ---------- Superfícies ---------- */
.bloco {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-5); min-width: 0;
}
.bloco > h2, .bloco-titulo { font-size: var(--fs-h5); letter-spacing: var(--ls-tight); }
.bloco-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.bloco-cabeca h2 { font-size: var(--fs-h5); }
.bloco-cabeca p { font-size: var(--fs-caption); color: var(--text-muted); }

/* Secções recolhíveis, como "Detalhes" e "Financeiro" nas fichas do PHC GO */
.seccao { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.seccao > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); font-weight: var(--fw-semibold); color: var(--text-strong);
}
.seccao > summary::-webkit-details-marker { display: none; }
.seccao > summary .icone { color: var(--text-muted); transition: transform var(--dur-base) var(--ease-standard); }
.seccao[open] > summary .icone { transform: rotate(180deg); }
.seccao > summary:hover { background: var(--surface-sunken); border-radius: var(--radius-lg); }
.seccao-corpo { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); }

/* ---------- Formulários (Input/Select do Design System) ---------- */
.grelha-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: var(--space-4) var(--space-5); }
.grelha-form .largo { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 0.375rem; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-strong); min-width: 0; }
label.caixa { flex-direction: row; align-items: center; gap: var(--space-2); font-weight: var(--fw-medium); }
input, select, textarea {
  width: 100%; min-width: 0; font: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-regular); color: var(--text-body);
  background: var(--surface-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  padding: 0.625rem 0.75rem; line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
input[type="checkbox"] { width: 1.125rem; height: 1.125rem; accent-color: var(--action-accent); padding: 0; }
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--moz-blue-500); box-shadow: var(--shadow-focus); }
input[readonly] { background: var(--surface-sunken); color: var(--text-muted); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2345527F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
}
.campo-erro, .field-validation-error { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--moz-danger); }
.input-validation-error { border-color: var(--moz-danger); }

/* ---------- Avisos (Alert do Design System) ---------- */
.aviso { display: flex; gap: var(--space-3); align-items: flex-start; padding: 0.875rem 1rem; border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--fs-body-sm); color: var(--text-body); }
.aviso.ok { background: var(--moz-success-bg); border-color: #BFE6D4; }
.aviso.erro { background: var(--moz-danger-bg); border-color: #F4C9C6; }
.aviso.atencao { background: var(--moz-warning-bg); border-color: #F4DFB0; }
.aviso.info { background: var(--moz-info-bg); border-color: var(--moz-blue-100); }
.aviso .icone { margin-top: 1px; }
.aviso.ok .icone { color: var(--moz-success); }
.aviso.erro .icone { color: var(--moz-danger); }
.resumo-erros.validation-summary-valid { display: none; }
.resumo-erros ul { margin: 0; padding-left: 1.1em; }

/* ---------- Grelhas de dados (como as listas do PHC GO) ---------- */
.lista { padding: 0; overflow: hidden; }
.lista-ferramentas { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.lista-ferramentas label { min-width: 10rem; flex: 0 1 13rem; }
.lista-ferramentas .pesquisa { flex: 1 1 16rem; }
.campo-pesquisa { position: relative; display: flex; align-items: center; }
.campo-pesquisa .icone { position: absolute; left: 0.75rem; color: var(--text-subtle); pointer-events: none; }
.campo-pesquisa input { padding-left: 2.4rem; }
/* position: relative contém o texto só para leitores de ecrã (.sr-only) dentro do scroll */
.tabela-rolar { overflow-x: auto; position: relative; }
/* As acções nas tabelas expandem a linha para não serem cortadas pelo scroll. */
.tabela-rolar .menu-desdobravel[open] > .menu-desdobravel-lista {
  position: static; margin-top: var(--space-3); box-shadow: none; white-space: normal;
}
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
/* Células numa só linha: em ecrãs estreitos a tabela ganha scroll dentro do cartão em vez de partir datas e nomes */
.tabela th, .tabela td { text-align: left; padding: 0.7rem var(--space-4); border-bottom: 1px solid var(--grelha-linha); vertical-align: middle; white-space: nowrap; }
.tabela td.quebra { white-space: normal; min-width: 14rem; }
.tabela th { font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-sunken); white-space: nowrap; }
.tabela tbody tr:hover td { background: var(--moz-blue-50); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela .vazio { color: var(--text-muted); text-align: center; padding: var(--space-8) var(--space-4); }
.tabela a { font-weight: var(--fw-semibold); color: var(--text-strong); }
.tabela a:hover { color: var(--text-link); }
.tabela .sub { display: block; font-size: var(--fs-caption); color: var(--text-muted); font-weight: var(--fw-regular); }
.bloco .tabela th:first-child, .bloco .tabela td:first-child { padding-left: var(--space-3); }

/* Estado dos documentos (Badge do Design System) */
.estado { display: inline-flex; align-items: center; gap: 0.375em; font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1; padding: 0.3125rem 0.5625rem; border-radius: var(--radius-pill); white-space: nowrap; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado-R { background: var(--moz-warning-bg); color: #9A6405; }
.estado-E { background: var(--moz-success-bg); color: var(--moz-success); }
.estado-A { background: var(--moz-danger-bg); color: var(--moz-danger); }
.estado-V { background: var(--moz-danger-bg); color: var(--moz-danger); }

/* ---------- Painel (dashboard) ---------- */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); }
.indicador {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  color: inherit; min-width: 0;
}
a.indicador:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); color: inherit; }
.indicador-rotulo { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--text-muted); }
.indicador-rotulo .icone { color: var(--moz-blue-500); }
.indicador-valor { font-size: 1.75rem; font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tighter); color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.indicador-valor small { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-muted); letter-spacing: 0; }
.indicador-nota { font-size: var(--fs-caption); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.variacao-sobe { color: var(--moz-success); font-weight: var(--fw-semibold); }
.variacao-desce { color: var(--moz-danger); font-weight: var(--fw-semibold); }
.indicador.principal-destaque { position: relative; overflow: hidden; }
.indicador.principal-destaque::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--moz-gradient); }

.painel-grelha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); }
@media (max-width: 1100px) { .painel-grelha { grid-template-columns: minmax(0, 1fr); } }

/* Gráfico de barras em SVG (desenhado no servidor, à escala) */
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .grelha-y { stroke: var(--border-subtle); stroke-width: 1; }
.grafico .eixo-base { stroke: var(--border-default); stroke-width: 1; }
.grafico .rotulo { fill: var(--text-muted); font-size: 11px; font-family: var(--font-sans); }
.grafico .rotulo-forte { fill: var(--text-strong); font-size: 11px; font-weight: 600; font-family: var(--font-sans); }
.grafico .barra-dados { fill: var(--moz-blue-500); }
.grafico .barra-dados.actual { fill: var(--moz-blue-700); }
.grafico .alvo { fill: transparent; cursor: default; }
.grafico .alvo:hover + .barra-dados, .grafico g:hover .barra-dados { fill: var(--moz-blue-600); }

/* Barras horizontais (antiguidade dos saldos, maiores clientes) */
.barras-h { display: flex; flex-direction: column; gap: var(--space-3); }
.barra-h { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); font-size: var(--fs-body-sm); }
.barra-h-nome { color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-h-trilho { height: 0.75rem; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.barra-h-valor { display: block; height: 100%; background: var(--moz-blue-500); border-radius: var(--radius-pill); min-width: 4px; }
.barra-h-num { font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: var(--fw-semibold); white-space: nowrap; }
.ver-tabela { margin-top: var(--space-4); font-size: var(--fs-caption); color: var(--text-muted); }
.ver-tabela summary { cursor: pointer; color: var(--text-link); }
.ver-tabela .tabela { margin-top: var(--space-2); }

.dica {
  position: fixed; z-index: 60; pointer-events: none; padding: var(--space-2) var(--space-3);
  background: var(--moz-navy-900); color: var(--text-on-dark); border-radius: var(--radius-sm);
  font-size: var(--fs-caption); box-shadow: var(--shadow-md); white-space: nowrap;
}
.dica strong { display: block; font-size: var(--fs-body-sm); }

/* ---------- Rascunho: linhas e totais ---------- */
.nova-linha {
  display: grid; gap: var(--space-3); align-items: end; margin-top: var(--space-4); padding: var(--space-4);
  background: var(--surface-sunken); border-radius: var(--radius-md);
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.3fr) auto;
}
@media (max-width: 1280px) { .nova-linha { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nova-linha .botao { grid-column: 1 / -1; justify-self: end; } }
@media (max-width: 640px) { .nova-linha { grid-template-columns: minmax(0, 1fr); } .nova-linha .botao { justify-self: stretch; } }

.financeiro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: var(--space-5); margin-top: var(--space-5); align-items: start; }
@media (max-width: 760px) { .financeiro { grid-template-columns: minmax(0, 1fr); } }
.totais { display: grid; grid-template-columns: 1fr auto; margin: 0; font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.totais dt, .totais dd { margin: 0; padding: 0.55rem var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.totais dt { color: var(--text-muted); }
.totais dd { text-align: right; color: var(--text-strong); }
.totais .total { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); background: var(--surface-sunken); border-bottom: 0; }

/* ---------- Entrar ---------- */
.ecra-entrar { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--surface-page); }
.entrar-marca {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8);
  padding: var(--space-8) var(--space-9); color: var(--text-on-dark);
  background: var(--bg-dot), var(--bg-mesh-navy); background-size: var(--bg-dot-size), cover;
}
.entrar-marca::after {
  content: ""; position: absolute; right: -8rem; top: 18%; width: 22rem; height: 22rem; border-radius: 50%;
  background: var(--moz-gradient); opacity: 0.45; filter: blur(8px); pointer-events: none;
}
.entrar-marca > * { position: relative; z-index: 1; }
.entrar-marca img { height: 2.6rem; width: auto; align-self: flex-start; object-fit: contain; }
.entrar-marca h1 { color: var(--text-on-dark); font-size: var(--fs-display-2); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); max-width: 16ch; }
.entrar-marca p { color: var(--text-on-dark-muted); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: 46ch; margin-top: var(--space-4); }
.entrar-pontos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); max-width: 30rem; }
.entrar-pontos li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); font-size: var(--fs-body-sm); color: var(--text-on-dark); }
.entrar-pontos .icone { color: var(--moz-azul-claro); }
.entrar-rodape { font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.55); }

.entrar-formulario {
  display: flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-6);
  background: var(--bg-dot), var(--bg-mesh-light); background-size: var(--bg-dot-size), cover;
}
.entrar-cartao { width: 100%; max-width: 26rem; padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.entrar-cartao h2 { font-size: var(--fs-h3); }
.entrar-cartao form { display: flex; flex-direction: column; gap: var(--space-4); }
.entrar-cartao .logo-movel { display: none; height: 2rem; width: auto; }
.entrar-cartao > img { align-self: flex-start; height: 2rem; width: auto; object-fit: contain; }   /* num flex em coluna a imagem esticaria à largura */

@media (max-width: 900px) {
  .ecra-entrar { grid-template-columns: minmax(0, 1fr); }
  .entrar-marca { display: none; }
  .entrar-cartao .logo-movel { display: block; }
  .entrar-formulario { min-height: 100vh; padding: var(--space-5) var(--space-4); }
  .entrar-cartao { padding: var(--space-6) var(--space-5); }
}

.pagina-simples { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); background: var(--bg-dot), var(--bg-mesh-light); background-size: var(--bg-dot-size), cover; }
.pagina-simples .entrar-cartao { max-width: 32rem; }
.lista-escolha { display: flex; flex-direction: column; gap: var(--space-3); }
.escolha { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.escolha form { margin: 0; }

/* ---------- Documento emitido (folha A4) ---------- */
.folha { background: var(--moz-white); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); border-radius: var(--radius-sm); max-width: 210mm; width: 100%; margin: 0 auto; padding: 14mm 14mm 10mm; display: flex; flex-direction: column; gap: var(--space-4); position: relative; color: var(--moz-gray-900); font-size: var(--fs-body-sm); }
.folha-topo { display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.folha-emitente strong { font-size: var(--fs-body-lg); color: var(--text-strong); }
.folha-logo { display: block; max-height: 64px; max-width: 220px; width: auto; height: auto; margin-bottom: var(--space-2); }
.logo-preview { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3); min-width: 12rem; min-height: 5rem; }
.logo-preview img { max-width: 16rem; max-height: 5rem; width: auto; height: auto; object-fit: contain; }
.folha-titulo { text-align: right; }
.folha-titulo h1 { font-size: var(--fs-h4); }
.folha-titulo .via { font-size: var(--fs-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-muted); }
.folha-cliente { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-left: auto; width: min(100%, 55%); }
.folha-cliente .sobre { color: var(--text-muted); }
.folha-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.folha-meta div { padding: var(--space-2) var(--space-3); border-right: 1px solid var(--border-subtle); }
.folha-meta div:last-child { border-right: 0; }
.folha-meta span { display: block; font-size: var(--fs-overline); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.folha .tabela th { background: var(--moz-navy-50); }
.folha .tabela th, .folha .tabela td { padding: 0.45rem 0.6rem; }
.folha .tabela tbody tr:hover td { background: none; }
.folha-rodape { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.folha .totais { border-radius: var(--radius-sm); }
.folha-aviso { margin: 0; padding: var(--space-2) var(--space-3); border: 1px dashed var(--moz-navy-300); border-radius: var(--radius-sm); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-muted); text-align: center; }
.folha-legal { border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); font-size: var(--fs-caption); color: var(--text-muted); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.folha { overflow: hidden; }
.carimbo-anulado { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-size: clamp(2.5rem, 10vw, 4.5rem); font-weight: var(--fw-extrabold); letter-spacing: 0.1em; color: rgba(216, 68, 60, 0.2); border: 6px solid rgba(216, 68, 60, 0.2); padding: var(--space-1) var(--space-5); pointer-events: none; }
.caixa-extenso { background: var(--moz-navy-50); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.assinatura { margin-top: var(--space-7); margin-left: auto; width: 16rem; border-top: 1px solid var(--moz-navy-300); text-align: center; padding-top: var(--space-1); font-size: var(--fs-caption); color: var(--text-muted); }
@media (max-width: 700px) { .folha-rodape { grid-template-columns: minmax(0, 1fr); } .folha { padding: var(--space-4); } .folha-cliente { width: 100%; } }

/* Cartões de configuração */
.atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); }
.atalho { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: inherit; }
.atalho:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; transition: all var(--dur-base) var(--ease-out); }
.atalho-icone { display: inline-flex; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; border-radius: var(--radius-md); align-items: center; justify-content: center; background: var(--moz-blue-50); color: var(--moz-blue-600); }
.atalho strong { display: block; color: var(--text-strong); margin-bottom: var(--space-1); }
.atalho span { font-size: var(--fs-body-sm); color: var(--text-muted); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.zona-perigo > summary { color: var(--moz-danger); }

@page { size: A4; margin: 10mm; }
@media print {
  body { background: #fff; }
  .lateral, .barra, .nao-imprimir { display: none !important; }
  .app { display: block; }
  .conteudo { padding: 0; max-width: none; }
  .folha { border: 0; padding: 0; max-width: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Imagens (logótipos) nunca esticam: num flex/grid em coluna, align-self: stretch deformava-as */
img { align-self: flex-start; justify-self: start; object-fit: contain; }

/* Módulos de loja */
.opcao { display: flex; flex-direction: row; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--moz-blue-500); background: var(--moz-blue-50); }
.opcao input { margin-top: 0.2rem; width: auto; flex: 0 0 auto; }
.opcao .estado { flex: 0 0 auto; margin-top: 0.15rem; }
.opcao.inactivo { opacity: 0.7; }
.opcao strong { display: block; color: var(--text-strong); }
.opcao .sub { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
.texto-alerta { color: var(--moz-danger); }
.indicador.alerta .indicador-valor { color: var(--moz-danger); }
.periodo { align-items: end; gap: var(--space-2); }
.periodo .botao { padding-inline: var(--space-3); }

/* Venda rápida */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-5); align-items: start; }
.pos-esquerda { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.pos-procura { position: relative; }
.pos-procura .campo-pesquisa { width: 100%; }
.pos-procura input { font-size: var(--fs-body-lg, 1.05rem); padding-block: var(--space-3); }
.pos-resultados { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-1)); z-index: 20; margin: 0; padding: var(--space-1); list-style: none; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 22rem; overflow: auto; }
.pos-resultados li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; }
.pos-resultados li strong { display: block; color: var(--text-strong); }
.pos-resultados li .sub { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
.pos-resultados li.activo, .pos-resultados li:hover { background: var(--surface-sunken); }
.pos-carrinho td { vertical-align: middle; }
.pos-qtd { display: inline-flex; align-items: center; gap: 2px; }
.pos-qtd input { width: 4.5rem; text-align: center; padding: var(--space-1) var(--space-2); }
.pos-qtd button { width: 2rem; height: 2rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-strong); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.pos-qtd button:hover { background: var(--surface-sunken); }
.pos-preco { width: 6.5rem; text-align: right; padding: var(--space-1) var(--space-2); }
.pos-carrinho .remover { font-size: 1.2rem; line-height: 1; padding: 0 var(--space-2); }
.pos-direita { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); position: sticky; top: calc(var(--barra-altura, 64px) + var(--space-4)); }
.pos-total { text-align: right; }
.pos-total strong { display: block; font-size: 2.2rem; font-weight: var(--fw-extrabold); color: var(--text-strong); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pos-total .sub { display: block; color: var(--text-muted); font-size: var(--fs-caption); }
.pos-pagamento { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.pos-pagamento legend { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: var(--space-2); }
.pos-meio { position: relative; }
.pos-meio input { position: absolute; opacity: 0; inset: 0; }
.pos-meio span { display: block; text-align: center; padding: var(--space-2) var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--fs-body-sm); cursor: pointer; }
.pos-meio input:checked + span { border-color: var(--moz-blue-500); background: var(--moz-blue-50); color: var(--text-strong); font-weight: var(--fw-semibold); }
.pos-meio input:focus-visible + span { outline: 2px solid var(--moz-blue-500); outline-offset: 2px; }
.pos-troco { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: end; }
.pos-troco-valor { text-align: right; }
.pos-troco-valor strong { display: block; font-size: 1.4rem; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.pos-finalizar { width: 100%; justify-content: center; padding-block: var(--space-4); font-size: 1.05rem; }
.pos-finalizar kbd { margin-left: var(--space-2); font: inherit; font-size: var(--fs-caption); opacity: 0.8; border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; }
@media (max-width: 900px) {
  .pos { grid-template-columns: minmax(0, 1fr); }
  .pos-direita { position: static; }
}
@media (max-width: 700px) {
  /* No telemóvel o carrinho mostra só artigo, quantidade, total e remover; o preço edita-se no desktop */
  .pos-carrinho th:nth-child(3), .pos-carrinho td:nth-child(3),
  .pos-carrinho th:nth-child(4), .pos-carrinho td:nth-child(4),
  .pos-carrinho th:nth-child(6), .pos-carrinho td:nth-child(6) { display: none; }   /* o "−" até zero remove a linha */
  .pos-carrinho td:first-child { white-space: normal; min-width: 8rem; }
  .pos-carrinho td, .pos-carrinho th { padding-inline: var(--space-2); }
  .pos-qtd input { width: 3rem; }
  .pos-qtd button { width: 1.75rem; height: 1.75rem; }
  .pos-esquerda { padding: var(--space-3); }
}
@media print { .pos-procura, .pos-direita .botao { display: none; } }

/* Ajuda */
.barra-ajuda { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill, 999px); color: var(--text-body); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); margin-right: var(--space-2); }
.barra-ajuda:hover { background: var(--surface-sunken); color: var(--text-strong); }
@media (max-width: 700px) { .barra-ajuda span { display: none; } }
.ajuda { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.ajuda-indice { position: sticky; top: calc(var(--barra-altura) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-3); max-height: calc(100vh - var(--barra-altura) - var(--space-6)); overflow-y: auto; }
.ajuda-indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ajuda-indice li.nivel-2 { margin-top: var(--space-2); font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-muted); padding: 0 var(--space-2); }
.ajuda-indice li.nivel-2 a { color: inherit; }
.ajuda-indice li.nivel-3 a { display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--text-body); font-size: var(--fs-body-sm); }
.ajuda-indice li.nivel-3 a:hover, .ajuda-indice li.nivel-3.activo a { background: var(--moz-blue-50); color: var(--moz-blue-700, var(--text-strong)); }
.ajuda-texto { padding: var(--space-6) var(--space-7); max-width: 60rem; line-height: var(--lh-relaxed); }
.ajuda-texto h1 { font-size: var(--fs-h2); margin: 0 0 var(--space-3); }
.ajuda-texto h2 { font-size: var(--fs-h3); margin: var(--space-7) 0 var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); color: var(--text-strong); }
.ajuda-texto h3 { font-size: var(--fs-h4); margin: var(--space-6) 0 var(--space-3); color: var(--text-strong); scroll-margin-top: calc(var(--barra-altura) + var(--space-4)); }
.ajuda-texto h2 { scroll-margin-top: calc(var(--barra-altura) + var(--space-4)); }
.ajuda-texto hr { display: none; }
.ajuda-texto img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-md); margin: var(--space-3) 0 var(--space-4); }
.ajuda-texto ol, .ajuda-texto ul { padding-left: 1.4rem; }
.ajuda-texto li { margin: var(--space-1) 0; }
.ajuda-texto blockquote { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--moz-blue-500); background: var(--moz-blue-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ajuda-texto blockquote p { margin: 0; }
.ajuda-texto table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--fs-body-sm); }
.ajuda-texto th, .ajuda-texto td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.ajuda-texto th { background: var(--surface-sunken); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ajuda-texto code { background: var(--surface-sunken); padding: 0 0.3em; border-radius: 4px; font-size: 0.92em; }
.ajuda-texto strong { color: var(--text-strong); }
@media (max-width: 900px) { .ajuda { grid-template-columns: minmax(0, 1fr); } .ajuda-indice { position: static; max-height: none; } .ajuda-texto { padding: var(--space-4); } }
@media print { .ajuda { display: block; } .ajuda-texto { box-shadow: none; border: 0; max-width: none; } }

/* Registo público e recuperação */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.entrar-ligacoes { text-align: center; margin: 0; font-size: var(--fs-body-sm); }
.faixa-teste { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4); background: linear-gradient(135deg, var(--moz-blue-600, #0072FD), var(--moz-blue-400, #33A1FF)); color: #fff; font-size: var(--fs-body-sm); }
.faixa-teste strong { color: #fff; }
.faixa-teste a { color: #fff; text-decoration: underline; }
.faixa-teste.expirado { background: var(--moz-danger); }
.faixa-teste.atraso { background: var(--moz-warning, #B45309); }
.carimbo-teste { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-size: clamp(1.6rem, 6vw, 3rem); font-weight: var(--fw-extrabold); letter-spacing: 0.1em; color: rgba(0, 114, 253, 0.16); border: 5px solid rgba(0, 114, 253, 0.16); padding: var(--space-1) var(--space-4); pointer-events: none; white-space: nowrap; }

/* Primeiros passos */
.passos-lista { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.passos-lista li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.passos-lista li .icone { flex: 0 0 auto; margin-top: 2px; color: var(--moz-blue-500); }
.passos-lista li.feito { background: var(--moz-blue-50); border-color: transparent; }
.passos-lista li.feito .icone { color: var(--moz-success, #1C7C54); }
.passos-lista li a { color: var(--text-body); display: flex; flex-direction: column; gap: 2px; }
.passos-lista li strong { color: var(--text-strong); }
.passos-lista li span { font-size: var(--fs-caption); color: var(--text-muted); }
.passos-lista li.feito strong { text-decoration: line-through; color: var(--text-muted); }
@media (max-width: 900px) { .passos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .passos-lista { grid-template-columns: minmax(0, 1fr); } }