/* ==========================================================================
   MobSoft  -  folha de estilos principal
   --------------------------------------------------------------------------
   IDENTIDADE (justificada pela marca TG MobSoft e pelo publico tecnico):
   - Fonte: MESMA stack de sistema do SamFw (rapida, familiar, nada de "fonte
     de template"). Base 16px, linha 24px -> textos densos e legiveis no telemovel.
   - Paleta: em vez do roxo do SamFw, usamos PETROLEO/TEAL escuro + AMBAR.
     Petroleo = serio, tecnico, "bancada de reparacao"; ambar = ferramentas,
     alerta, energia. Zero gradiente roxo de SaaS, zero glassmorphism.
   - Cantos de 4px (iguais aos do SamFw) e cartoes com borda fina -> ar utilitario.
   ========================================================================== */

:root {
  /* Cores da marca - tema PRETO CARREGADO */
  --brand-dark:   #000000;  /* preto puro (barra de topo / hero)               */
  --brand-dark-2: #000000;  /* preto puro (profundidade / rodape)              */
  --accent:       #e58a0f;  /* ambar - accao principal (Registar, CTA)         */
  --accent-hover: #cf7a06;
  --accent-2:     #1c1c1c;  /* cinza muito escuro - accao secundaria (Login)   */
  --accent-2-hover:#2c2c2c;

  /* Neutros */
  --ink:      #0d0f11;      /* texto principal (quase preto, bem carregado)    */
  --ink-soft: #3d454c;      /* texto secundario / metadados (mais contraste)   */
  --line:     #e4e6e8;      /* linhas e bordas                                 */
  --bg:       #ffffff;      /* fundo geral                                     */
  --bg-soft:  #f4f6f7;      /* fundo de seccoes alternadas                     */
  --link:     #0f6674;      /* links                                           */

  /* Medidas */
  --radius: 4px;
  --maxw: 1160px;

  /* MESMA stack de fontes do SamFw */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji";
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;              /* base mais carregada */
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.1px;        /* aperta um pouco -> aspeto mais solido */
}
strong, b { font-weight: 800; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.3px; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}

/* ============================ BARRA DE TOPO ============================== */
.topbar {
  background: var(--brand-dark);
  color: #fff;
}
.topbar .container {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.2px;
}
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--accent);
  color: #10313a;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 15px;
}
.brand small { font-weight: 400; opacity: .7; font-size: 12px; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 14px;
}
.nav a {
  color: #fff;
  padding: 8px 11px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
}
.nav a:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }
.nav .highlight { color: var(--accent); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius);
  color: #fff;
  background: #444;
  line-height: 1.2;
}
.btn:hover { text-decoration: none; filter: brightness(1.04); }
.btn-login   { background: var(--accent-2); }
.btn-login:hover { background: var(--accent-2-hover); }
.btn-primary { background: var(--accent); color: #10313a; font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost   { background: transparent; border: 1px solid rgba(255,255,255,.35); }
.btn-block   { display: block; width: 100%; text-align: center; }
.btn-sm      { padding: 5px 10px; font-size: 13px; }
.btn-danger  { background: #b23b3b; }

/* Botao "hamburguer" (mobile) */
.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 18px;
  border-radius: var(--radius);
  padding: 6px 10px;
  cursor: pointer;
}

/* ================================ HERO ================================== */
.hero {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(229,138,15,.12), transparent 55%),
    linear-gradient(180deg, var(--brand-dark), var(--brand-dark-2));
  color: #fff;
  padding: 46px 0 40px;
  border-bottom: 3px solid var(--accent);
}
.hero h1 {
  margin: 0 0 6px;
  font-size: 42px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.5px;
}
.hero h1 .accent { color: var(--accent); }
.hero p.lead {
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 500;
  color: rgba(255,255,255,.9);
}
.hero .search {
  display: flex;
  max-width: 640px;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.hero .search .ico {
  display: grid; place-items: center;
  padding: 0 14px;
  color: var(--ink-soft);
  border-right: 1px solid var(--line);
}
.hero .search input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 13px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
}
.hero .search button {
  border: 0;
  background: var(--accent);
  color: #10313a;
  font-weight: 700;
  padding: 0 20px;
  cursor: pointer;
  font-family: inherit;
}
.hero .quick {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero .quick a {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 13px;
}
.hero .quick a:hover { background: rgba(255,255,255,.18); text-decoration: none; }

/* ============================ LAYOUT CONTEUDO =========================== */
.section { padding: 28px 0; }
/* Paginas que poem as duas classes no mesmo bloco: sem isto o padding de cima
   apagava as margens laterais do contentor e o texto colava-se a borda do ecra. */
.container.section { padding: 28px 16px; }
.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink);
  border-bottom: 2px solid var(--line);
  padding-bottom: 8px;
  margin: 0 0 16px;
}
.section-title i { color: var(--accent); }

/* Cartao de post na lista (denso, tipo forum) */
.post-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.post-item .thumb {
  width: 92px; height: 68px;
  flex: 0 0 92px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid; place-items: center;
  color: var(--accent-2);
  font-size: 24px;
  overflow: hidden;
  text-decoration: none;
}
.post-item a.thumb:hover { border-color: var(--accent); }
.post-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-item h3 {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
}
.post-item h3 a { color: var(--ink); }
.post-item h3 a:hover { color: var(--link); }
.post-item .meta {
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.post-item .meta i { margin-right: 4px; }
.post-item .excerpt {
  margin: 6px 0 0;
  font-size: 14px;
  color: #2f363d;
}

/* ============================== SIDEBAR ================================= */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 20px;
}
.card .card-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 14px;
  background: var(--bg-soft);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card .card-body { padding: 14px; }
.card ul.plain { list-style: none; margin: 0; padding: 0; }
.card ul.plain li { padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.card ul.plain li:last-child { border-bottom: 0; }

/* Espaco de ANUNCIO - caixa real e discreta (some para VIP).
   Os nomes (montra-caixa, montra-larga, casa) sao neutros de proposito: os
   bloqueadores de anuncios (o do Opera, o Brave, o uBlock) escondem tudo o que
   se chama "ad-slot" ou "ad-leaderboard" (lista EasyList), e escondiam ate as
   ferramentas da propria loja. */
.montra-caixa {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink-soft);
  text-align: center;
  border-radius: var(--radius);
  padding: 18px 12px;
  font-size: 13px;
}
.montra-caixa .label {
  display: block;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: 10px;
  font-weight: 700;
  color: #9aa4ad;
  margin-bottom: 6px;
}
.montra-larga { min-height: 90px; display: grid; place-items: center; margin: 20px 0; }

/* ============================ PAGINACAO ================================= */
.pagination {
  display: flex;
  gap: 6px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--ink);
}
.pagination .active { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.pagination a:hover { background: var(--bg-soft); text-decoration: none; }

/* ============================== FORMS ================================== */
.auth-wrap { max-width: 430px; margin: 40px auto; }
.form-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 26px;
  background: var(--surface);
}
.form-card h1 { margin: 0 0 4px; font-size: 22px; }
.form-card .sub { margin: 0 0 20px; color: var(--ink-soft); font-size: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  outline: none;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229,138,15,.18); }
/* Listas de escolha e caixas de texto grandes: iguais aos outros campos. */
.field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  outline: none;
}
.field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229,138,15,.18); }
.field .err { color: #b23b3b; font-size: 13px; margin-top: 4px; }
.form-foot { margin-top: 16px; font-size: 14px; text-align: center; color: var(--ink-soft); }

/* Mensagens (alertas) */
.alert { padding: 11px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; }
.alert-success { background: #e7f6ee; color: #1a7a48; border: 1px solid #bfe6d0; }
.alert-error   { background: #fdeaea; color: #b23b3b; border: 1px solid #f3cccc; }

/* ============================ POST DETALHE ============================== */
.article h1 { font-size: 30px; line-height: 1.15; margin: 0 0 8px; font-weight: 900; letter-spacing: -.3px; }
.article .cover { display:block; width:100%; max-height:380px; object-fit:cover; border:1px solid var(--line); border-radius:var(--radius); margin:4px 0 18px; }
/* A capa dentro de uma figura, com o credito da foto por baixo, discreto. */
.capa-figura { margin: 4px 0 18px; }
.capa-figura .cover { margin: 0; }
.capa-credito { margin-top: 5px; font-size: 11px; line-height: 1.4; color: var(--ink-soft); text-align: right; }
.capa-credito a { color: var(--ink-soft); }
.capa-credito a:hover { color: var(--link); }
/* Fotos dentro do texto de um artigo, com a legenda e o credito por baixo. */
.content figure { margin: 18px 0; }
.content figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.content figcaption { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.content figcaption small { display: block; font-size: 11px; margin-top: 2px; }
.article .content img { max-width:100%; height:auto; border-radius:var(--radius); margin:8px 0; }
.article .content a { color: var(--link); text-decoration: underline; }
.article .content h2 { font-size:20px; font-weight:800; margin:18px 0 8px; }
.article .content h3 { font-size:17px; font-weight:800; margin:16px 0 6px; }
.article .content ul, .article .content ol { padding-left: 22px; margin: 0 0 14px; }

/* ===== BOTAO DE DOWNLOAD TG MobSoft (reutilizavel: ficheiros e posts) =====
   Estrutura: [TG] | Download + nome/tamanho | seta. Preto com ambar da marca. */
.ms-dl {
  display: flex; align-items: stretch; width: 100%; max-width: 460px;
  margin: 14px 0; background: #000; color: #fff !important;
  border: 2px solid #000; border-radius: 6px; overflow: hidden;
  text-decoration: none !important; font-family: var(--font);
  box-shadow: 0 3px 0 var(--accent);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ms-dl:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--accent); }
.ms-dl:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--accent); }
.ms-dl .ms-dl-logo {
  flex: 0 0 56px; display: grid; place-items: center;
  background: var(--accent); color: #10313a; font-weight: 900; font-size: 18px; letter-spacing: -.5px;
}
.ms-dl .ms-dl-text { flex: 1; min-width: 0; padding: 9px 14px; display: flex; flex-direction: column; justify-content: center; }
.ms-dl .ms-dl-text b { font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; line-height: 1.2; }
.ms-dl .ms-dl-text small { font-size: 12px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-dl .ms-dl-ico { flex: 0 0 52px; display: grid; place-items: center; font-size: 20px; color: var(--accent); border-left: 1px solid rgba(255,255,255,.14); }
.ms-dl .ms-dl-ico i { display: none; }
.ms-dl .ms-dl-ico::before { content: "\2193"; font-weight: 900; font-size: 22px; line-height: 1; }
/* variante gratis: seta verde */
.ms-dl.free .ms-dl-ico { color: #3ddc84; }
/* Divisor inserido pelo editor */
.content hr, .ql-editor hr { border: 0; border-top: 2px solid var(--line); margin: 18px 0; }

/* ===== Painel da IA e do botao de download no editor ===== */
.ai-panel { border: 1px solid #000; border-radius: 6px; padding: 12px; margin-bottom: 14px; background: #0b0b0b; color: #fff; }
.ai-head { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; color: var(--accent); }
.ai-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-row select, .ai-row input { padding: 9px 10px; border: 1px solid #333; border-radius: 4px; background: #151515; color: #fff; font: inherit; }
.ai-row input { flex: 1; min-width: 220px; }
.ai-status { font-size: 13px; margin-top: 8px; color: rgba(255,255,255,.8); min-height: 18px; }
.dl-panel { border: 1px solid var(--line); border-top: 0; padding: 12px; background: var(--bg-soft); }
.dl-grid { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dl-grid input[type=url], .dl-grid input[type=text] { flex: 1; min-width: 200px; padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 4px; font: inherit; }
.dl-free { display: flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 700; }
.dl-preview-label { font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
.ql-toolbar.ql-snow .ql-formats button i { font-size: 13px; color: #444; }
.ql-toolbar.ql-snow .ql-formats button:hover i { color: var(--accent); }
.ql-editor .ms-dl { cursor: default; }

/* ===== Formatacao vinda do editor (fontes, tamanhos, alinhamento, recuos) ===== */
.ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.ql-font-monospace { font-family: Consolas, "Courier New", monospace; }
.ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
.ql-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.ql-font-tahoma { font-family: Tahoma, sans-serif; }
.ql-font-impact { font-family: Impact, "Arial Black", sans-serif; }
.ql-font-trebuchet { font-family: "Trebuchet MS", sans-serif; }
.ql-font-roboto { font-family: Roboto, "Segoe UI", Arial, sans-serif; }
.ql-size-small { font-size: .8em; }
.ql-size-large { font-size: 1.35em; }
.ql-size-huge { font-size: 1.9em; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-indent-1 { padding-left: 2em; } .ql-indent-2 { padding-left: 4em; } .ql-indent-3 { padding-left: 6em; }
.content .ms-note { border-left: 4px solid var(--accent); background: #fff8ec; padding: 10px 14px; margin: 14px 0; border-radius: 4px; }
/* Tabelas dentro de um artigo: no telemovel arrastam-se para o lado em vez de
   deitarem a pagina fora. */
.content table, .ql-editor table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; display: block; overflow-x: auto; }
.content table th, .content table td, .ql-editor table th, .ql-editor table td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.content table th, .ql-editor table th { background: var(--bg-soft); font-weight: 700; white-space: nowrap; }
.content table caption { caption-side: bottom; padding-top: 8px; font-size: 13px; color: var(--ink-soft); text-align: left; }
.ql-picker.ql-font .ql-picker-item[data-value]::before,
.ql-picker.ql-font .ql-picker-label[data-value]::before { content: attr(data-value); text-transform: capitalize; }

/* ===== Ficheiros: barra de filtros, chips de categoria e lista densa ===== */
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.filter-bar input[type=text] { flex:1; min-width:200px; padding:9px 12px; border:1px solid var(--input-border); border-radius:var(--radius); font:inherit; }
.filter-bar select { padding:9px 10px; border:1px solid var(--input-border); border-radius:var(--radius); font:inherit; background:var(--surface); }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.chips a { padding:5px 12px; border:1px solid var(--line); border-radius:3px; font-size:13px; font-weight:600; color:var(--ink); background:var(--surface); }
.chips a:hover { border-color:var(--accent); text-decoration:none; }
.chips a.on { background:#000; color:#fff; border-color:#000; }
.file-list { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.file-row { display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink); background:var(--surface); }
.file-row:last-child { border-bottom:0; }
.file-row:hover { background:var(--bg-soft); text-decoration:none; }
.fr-ico { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; background:#000; color:var(--accent); border-radius:var(--radius); font-size:11px; font-weight:800; letter-spacing:.4px; }
.fr-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.fr-title { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fr-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); }
.fr-price { font-weight:900; white-space:nowrap; }
.fr-price.free { color:#1a7a48; }

/* ===== Servicos ===== */
.lead-muted { color:var(--ink-soft); font-size:14px; margin:-6px 0 14px; }
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.svc-card { display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--line); border-top:3px solid #000; border-radius:var(--radius); background:var(--surface); color:var(--ink); }
.svc-card:hover { border-top-color:var(--accent); text-decoration:none; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.svc-brand { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); }
.svc-title { font-weight:800; line-height:1.3; }
.svc-foot { display:flex; justify-content:space-between; align-items:center; margin-top:auto; font-size:13px; }
.svc-price { font-weight:900; }
.status { font-size:12px; font-weight:800; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.st-pendente { background:#fff4e0; color:#8a5300; }
.st-em_curso { background:#e7eefc; color:#1f4fa8; }
.st-concluido { background:#e7f6ee; color:#1a7a48; }
.st-cancelado { background:#f1f1f1; color:#666; }
.delivery { margin-top:10px; padding:10px 12px; background:#000; color:#fff; border-radius:var(--radius); font-size:14px; }
.admin-order { padding:12px 0; border-bottom:1px solid var(--line); }
.admin-order:last-child { border-bottom:0; }

/* Selos de categoria / grupo */
/* Etiquetas de categoria: texto, nao autocolantes. Informam sem competir
   com o titulo do artigo. O VIP e o unico com cor, porque e um aviso de que
   o conteudo e pago. */
.badge { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
         letter-spacing:.7px; padding:0; border:0; background:none; border-radius:0;
         color:var(--ink-soft); }
.badge + .badge::before { content:""; display:inline-block; width:3px; height:3px;
                          border-radius:50%; background:currentColor; opacity:.55;
                          margin-right:8px; vertical-align:middle; }
.badge-cat, .badge-grp, .badge-mark { color:var(--ink-soft); }
.badge-vip { color:var(--accent); }
.article .meta { color: var(--ink-soft); font-size: 14px; margin-bottom: 18px; }
.article .content { font-size: 16px; line-height: 1.7; color: var(--ink); }
.article .content p { margin: 0 0 14px; }

.comment {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface);
}
.comment .who { font-weight: 600; font-size: 14px; }
.comment .when { color: var(--ink-soft); font-size: 12px; }
.comment .body { margin-top: 6px; font-size: 14px; }
textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
}

/* ============================== TABELAS (admin) ======================== */
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
table.data th { background: var(--bg-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); }
.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.stat {
  flex: 1; min-width: 150px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--surface);
}
.stat .n { font-size: 26px; font-weight: 800; }
.stat .l { font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; }

/* ================================ FOOTER =============================== */
.footer {
  margin-top: auto;
  background: var(--brand-dark-2);
  color: rgba(255,255,255,.75);
  padding: 30px 0 22px;
  font-size: 14px;
}
.footer { padding: 44px 0 0; }
/* Grelha: marca mais larga a esquerda + 4 colunas iguais a preencher a direita */
.footer .foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 36px;
  padding-bottom: 32px;
}
.footer .foot-brand .brand { margin-bottom: 12px; }
.footer .foot-brand .brand:hover { color: #fff; }
.footer .foot-brand p { margin: 0 0 16px; line-height: 1.6; max-width: 320px; }
.footer h4 { color: #fff; font-size: 13px; margin: 4px 0 14px; text-transform: uppercase; letter-spacing: .7px; font-weight: 800; }
.footer .foot-col a { color: rgba(255,255,255,.72); display: block; padding: 4px 0; font-size: 14px; }
.footer .foot-col a:hover { color: var(--accent); text-decoration: none; }
/* Barra final: legais a esquerda, copyright a direita */
.footer .foot-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 16px 0 20px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; font-size: 13px;
}
.footer .legal-bar { display:flex; flex-wrap:wrap; gap:18px; }
.footer .legal-bar a { color: rgba(255,255,255,.8); }
.footer .legal-bar a:hover { color:#fff; }

/* Redes sociais */
.footer .social-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.footer .soc {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: 13px; font-weight: 700;
  transition: transform .12s ease, background .12s ease;
}
.footer .soc:hover { transform: translateY(-2px); text-decoration: none; color: #fff; }
.footer .soc-wa:hover { background: #25D366; border-color: #25D366; }
.footer .soc-fb:hover { background: #1877F2; border-color: #1877F2; }
.footer .soc-ig:hover { background: #E1306C; border-color: #E1306C; }
.footer .soc-tg:hover { background: #229ED9; border-color: #229ED9; }
.footer .soc-yt:hover { background: #FF0000; border-color: #FF0000; }
.footer .soc-tk:hover { background: #000; border-color: #666; }

/* Barra de contadores (tecnicos registados / visitantes) */

/* Rodape responsivo: tablet = marca em cima + 2x2 colunas; telemovel = 2 colunas */
@media (max-width: 1024px) {
  .footer .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .footer .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer .foot-grid { gap: 22px 16px; }
  .footer .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* =============================== RESPONSIVO ============================= */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}
/* Menu compacto em ecras medios */
@media (max-width: 1240px) {
  .nav a { padding: 8px 7px; font-size: 14px; }
}
/* Tablets e abaixo: menu em hamburguer (muitos itens) */
@media (max-width: 1024px) {
  .nav, .nav-right { display: none; }
  .nav-toggle { display: inline-block; }
  .topbar .container.open { flex-wrap: wrap; height: auto; padding-bottom: 10px; }
  .topbar .container.open .nav,
  .topbar .container.open .nav-right {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; margin: 8px 0 0; gap: 2px;
  }
  .topbar .container.open .nav-right { border-top: 1px solid rgba(255,255,255,.15); padding-top: 8px; }
}
@media (max-width: 720px) {
  .nav, .nav-right { display: none; }
  .nav-toggle { display: inline-block; }
  .topbar .container.open { flex-wrap: wrap; height: auto; padding-bottom: 10px; }
  .topbar .container.open .nav,
  .topbar .container.open .nav-right {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; margin: 8px 0 0; gap: 2px;
  }
  .topbar .container.open .nav-right { border-top: 1px solid rgba(255,255,255,.15); padding-top: 8px; }
  .hero h1 { font-size: 30px; }
  .hero { padding: 34px 0 30px; }

  /* Tabelas rolam na horizontal em vez de rebentar o ecra */
  table.data { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  /* Colunas do rodape empilham */
  /* Formularios e cartoes com respiro */
  .form-card { padding: 18px; }
  .article h1 { font-size: 24px; }
  .article .cover { max-height: 220px; }
  /* Selo/pesquisa nunca causam scroll lateral */
  .hero .search { max-width: 100%; }
}

/* A barra do editor Quill quebra em varias linhas em ecras pequenos */
.ql-toolbar.ql-snow { flex-wrap: wrap; }
/* Nada empurra o ecra para o lado */
img, table, pre, iframe { max-width: 100%; }
iframe { width: 100%; }

/* ==========================================================================
   MODO ESCURO
   Como funciona: um pequeno script no <head> poe data-theme="dark" ou "light"
   no <html> (guardado no browser; por defeito segue o tema do sistema).
   Aqui so trocamos as VARIAVEIS de cor -> a estrutura e o layout nao mudam.
   ========================================================================== */
:root {
  color-scheme: light;
  --surface:      #ffffff;   /* fundo de cartoes, formularios, listas */
  --input-bg:     #ffffff;   /* fundo dos campos */
  --input-border: #cdd3d7;   /* borda dos campos */
}

[data-theme="dark"] {
  color-scheme: dark;
  --ink:          #e9edf1;
  --ink-soft:     #a3adb6;
  --line:         #262b31;
  --bg:           #0e1013;
  --bg-soft:      #1b1f24;
  --link:         #6ecfe0;
  --surface:      #16191d;
  --input-bg:     #1b1f24;
  --input-border: #343b43;
  --accent-2:     #22262b;
  --accent-2-hover:#2d3238;
}

/* Campos de formulario seguem o tema */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--input-bg);
  color: var(--ink);
  border-color: var(--input-border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6d7780; }

/* Avisos, selos e estados com contraste proprio no escuro */
[data-theme="dark"] .alert-success { background:#0f2a1c; color:#7fe0a8; border-color:#1d4a33; }
[data-theme="dark"] .alert-error   { background:#2c1416; color:#ff9c9c; border-color:#5a2429; }
[data-theme="dark"] .st-pendente  { background:#3a2a0d; color:#f0b95a; }
[data-theme="dark"] .st-em_curso  { background:#152742; color:#8ab4f8; }
[data-theme="dark"] .st-concluido { background:#0f2a1c; color:#7fe0a8; }
[data-theme="dark"] .st-cancelado { background:#23262a; color:#9aa4ad; }
[data-theme="dark"] .content .ms-note { background:#241d0c; }
[data-theme="dark"] .post-item .excerpt { color:#b9c2ca; }

/* Destaques: no escuro o preto nao contrasta -> usamos o ambar da marca */
[data-theme="dark"] .chips a.on,
[data-theme="dark"] .pagination .active { background: var(--accent); color:#10313a; border-color: var(--accent); }
[data-theme="dark"] .svc-card { border-top-color: var(--accent); }
[data-theme="dark"] .montra-caixa { background: var(--bg-soft); border-color: var(--line); }
[data-theme="dark"] .table.data th, [data-theme="dark"] table.data th { color: var(--ink-soft); }

/* Editor (Quill) no escuro */
[data-theme="dark"] .ql-toolbar.ql-snow,
[data-theme="dark"] .ql-container.ql-snow { border-color: var(--input-border); background: var(--surface); }
[data-theme="dark"] #editor { background: var(--input-bg) !important; color: var(--ink); }
[data-theme="dark"] .ql-snow .ql-stroke { stroke: #c7d0d8; }
[data-theme="dark"] .ql-snow .ql-fill { fill: #c7d0d8; }
[data-theme="dark"] .ql-snow .ql-picker-label, [data-theme="dark"] .ql-snow .ql-picker-options { color: var(--ink); background: var(--surface); }
[data-theme="dark"] .ql-toolbar.ql-snow .ql-formats button i { color: #c7d0d8; }
[data-theme="dark"] .ql-snow .ql-picker-options { border-color: var(--input-border); }
[data-theme="dark"] .ql-snow .ql-picker-item:hover,
[data-theme="dark"] .ql-snow .ql-picker-item.ql-selected { color: var(--accent); }
[data-theme="dark"] .ql-editor.ql-blank::before { color: #6d7780; }

/* Barras de scroll e selecao de texto tambem seguem o tema */
[data-theme="dark"] ::selection { background: var(--accent); color: #10313a; }
[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2f363d; border-radius: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3d454d; }

/* Botao de alternar tema (na barra de topo) */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}
.theme-toggle:hover { background: rgba(255,255,255,.12); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Texto ("Modo escuro" / "Modo claro") em vez de um icone. */
.theme-toggle { font-family: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; padding: 7px 10px; }
.nav-toggle { font-family: inherit; font-size: 14px; font-weight: 700; }
@media (max-width: 1024px) {
  .theme-toggle { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 9px 12px; }
}
/* Mostra o estado certo conforme o tema atual (icone + legenda) */
.theme-toggle .ico-light,
.theme-toggle .ico-dark { align-items: center; gap: 8px; }
.theme-toggle .ico-light { display: inline-flex; }
.theme-toggle .ico-dark { display: none; }
[data-theme="dark"] .theme-toggle .ico-dark { display: inline-flex; }
[data-theme="dark"] .theme-toggle .ico-light { display: none; }

/* ==========================================================================
   AVISO DE COOKIES (exigido pelas politicas do AdSense/Google)
   ========================================================================== */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #000; color: #fff; border-top: 3px solid var(--accent);
  padding: 14px 16px; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
/* Sem esta linha o display:flex acima venceria o atributo [hidden] e a barra
   aparecia sempre (mesmo sem anuncios configurados). */
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; max-width: 720px; }
.cookie-bar a { color: var(--accent); text-decoration: underline; }
.cookie-bar .cb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) { .cookie-bar { justify-content: flex-start; } }

/* ==========================================================================
   A LOJA: menu da conta, seccoes das ferramentas (aluguer e ativacao),
   cartoes, pagina de uma ferramenta, e as listas da pagina inicial.
   ========================================================================== */

/* O atributo hidden tem de ganhar aos display:flex/grid destes blocos (os filtros usam-no). */
.tool-card[hidden], .dir-item[hidden] { display: none; }

/* ---- Menu: a seccao em que se esta, o saldo e a conta ---- */
.nav a.on { background: rgba(255,255,255,.10); box-shadow: inset 0 -2px 0 var(--accent); }
.saldo-topo {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap;
  padding: 7px 10px; border-radius: var(--radius); background: rgba(255,255,255,.10);
}
.saldo-topo:hover { background: rgba(255,255,255,.18); text-decoration: none; color: #fff; }
details.conta { position: relative; }
details.conta summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap;
  padding: 6px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius);
}
details.conta summary::-webkit-details-marker { display: none; }
details.conta summary:hover { background: rgba(255,255,255,.10); }
details.conta summary .seta { font-size: 11px; opacity: .7; display: inline-block; }
details.conta[open] summary .seta { transform: rotate(180deg); }
.conta-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.conta-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.conta-menu a, .conta-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--radius); background: none;
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.conta-menu a:hover, .conta-menu button:hover { background: var(--bg-soft); text-decoration: none; }
@media (max-width: 1024px) {
  .saldo-topo { justify-content: flex-start; }
  details.conta summary { display: flex; }
  .conta-menu { position: static; min-width: 0; margin-top: 6px; box-shadow: none; }
}

/* ---- Caminho ate aqui (Inicio > Aluguer > UnlockTool) ---- */
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; }
.migalhas a { color: var(--ink-soft); font-weight: 600; }
.migalhas a:hover { color: var(--link); }
.migalhas .sep { opacity: .6; }

/* ---- Cabecalho de uma seccao ---- */
.sec-alt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-topo {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-bottom: 2px solid var(--line); padding-bottom: 10px; margin-bottom: 18px;
}
.sec-topo .lead-muted { margin: 4px 0 0; }
.sec-nome { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; line-height: 1.2; font-weight: 900; letter-spacing: -.4px; }
main > .sec-nome + .lead-muted, .container > .sec-nome + .lead-muted { margin: 6px 0 14px; }
.sec-mais { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* ---- Cartoes das ferramentas ---- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.tool-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tool-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 22px rgba(0,0,0,.10); }
.tool-img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.tool-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tool-img b { font-size: 34px; font-weight: 900; letter-spacing: -1px; color: #fff; }
/* Sem imagem: um quadro com as iniciais. Seis tons escuros, sempre o mesmo para a mesma ferramenta. */
.tool-img.sem { background: linear-gradient(140deg, #141414, #2b2b2b); }
.tool-img.sem.tom0 b { color: var(--accent); }
.tool-img.sem.tom1 { background: linear-gradient(140deg, #0c2f37, #17525f); }
.tool-img.sem.tom2 { background: linear-gradient(140deg, #3a2608, #6b4510); }
.tool-img.sem.tom3 { background: linear-gradient(140deg, #141d33, #26375f); }
.tool-img.sem.tom4 { background: linear-gradient(140deg, #331616, #5e2828); }
.tool-img.sem.tom5 { background: linear-gradient(140deg, #12301f, #1f5637); }
.tool-card { position: relative; }
/* Na procura aparecem as duas seccoes lado a lado: o cartao diz de qual e. */
.tool-selo { position: absolute; top: 8px; left: 8px; z-index: 1; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; padding: 3px 8px; border-radius: 20px; background: var(--accent); color: #10313a; }
.tool-nome { padding: 10px 12px 2px; font-weight: 800; line-height: 1.25; }
.tool-pe { margin-top: auto; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--ink-soft); }
.tool-pe b { font-size: 14px; color: var(--ink); font-weight: 800; }
.tool-pe b span { font-weight: 900; }
/* A oferta que o cartao mostra: no maximo duas linhas, para os cartoes ficarem todos da mesma altura. */
.tool-oferta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; min-height: 2.7em; }
.tool-pe b { font-size: 16px; margin-top: 3px; }
.tool-mais { height: 20px; line-height: 20px; overflow: hidden; }

/* ---- Como se compra, em tres passos ---- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 0; }
.section > .container > .passos:first-child { margin-top: 0; }
.passos > div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; color: var(--ink-soft); }
.passos b { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #10313a; font-size: 16px; font-weight: 900; }
.passos strong { color: var(--ink); }

/* ---- Faixa que leva a outra pagina (servicos por IMEI) ---- */
.faixa { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px 18px; border-radius: 8px; background: #000; color: #fff; }
.faixa:hover { text-decoration: none; color: #fff; }
.faixa-texto { flex: 1; display: flex; flex-direction: column; font-size: 14px; color: rgba(255,255,255,.8); }
.faixa-texto strong { font-size: 17px; color: #fff; }

/* ---- Pagina inicial: ficheiros e artigos mais recentes, lado a lado ---- */
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.linha { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.linha:hover { text-decoration: none; }
.linha:hover strong { color: var(--link); }
.linha-img { flex: 0 0 68px; height: 50px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); color: var(--ink-soft); font-size: 18px; }
.linha-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.linha-texto { min-width: 0; display: flex; flex-direction: column; }
.linha-texto strong { font-size: 15px; font-weight: 700; line-height: 1.3; }
.linha-texto small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-soft); }

/* ---- Pagina de uma ferramenta: o topo e as opcoes ---- */
.tool-topo { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.tool-img.grande { flex: 0 0 132px; width: 132px; border: 1px solid var(--line); border-radius: 8px; }
.tool-img.media { flex: 0 0 84px; width: 84px; border: 1px solid var(--line); border-radius: 8px; }
.tool-img.media b { font-size: 24px; }
.tool-topo h1 { margin: 2px 0 6px; font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: -.4px; }
.tool-topo p { margin: 0; font-size: 14px; color: var(--ink-soft); max-width: 520px; }
.tool-etiqueta { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; padding: 3px 9px; border-radius: 20px; background: var(--accent); color: #10313a; }
.opcoes { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.opcao { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.opcao:last-child { border-bottom: 0; }
.opcao:hover { background: var(--bg-soft); text-decoration: none; }
.op-nome { flex: 1; min-width: 0; font-weight: 700; line-height: 1.3; }
.op-prazo { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.op-preco { font-weight: 900; white-space: nowrap; }
.op-preco small { font-weight: 400; font-size: 11px; color: var(--ink-soft); }
.outra-seccao { margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--bg-soft); border-radius: var(--radius); font-size: 14px; }

/* ---- De que servidor e uma oferta (loja) e de que fornecedor e uma linha (painel) ----
   Com dois fornecedores a vender, a mesma oferta pode existir nos dois. A
   etiqueta diz de qual e, para nunca se confundirem: a do 1 so com contorno,
   a do 2 cheia. */
.srv { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; line-height: 16px; padding: 1px 8px; border-radius: 20px; white-space: nowrap; vertical-align: middle; border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.srv.srv-2 { background: var(--ink); color: var(--bg); }
/* A opcao que o cartao mostrou la fora, assinalada no meio das outras. */
.opcao.em-destaque { background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--accent); }
.op-selo { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; line-height: 16px; padding: 1px 8px; border-radius: 20px; white-space: nowrap; vertical-align: middle; background: var(--accent); color: #10313a; }
.nota-servidores { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
/* Quando e que um deposito entra na carteira: tem de se ler antes de pagar. */
.nota-deposito { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--bg-soft); border-radius: var(--radius); font-size: 14px; line-height: 1.6; }

/* ---- Barra das novidades do fornecedor (debaixo do menu, so na loja) ---- */
.nov-barra { border-top: 1px solid var(--line); background: var(--bg-soft); }
.nov-dentro { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.nov-selo { flex: 0 0 auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; padding: 3px 8px; border-radius: 20px; background: var(--accent); color: #10313a; }
/* Uma linha so: o que nao cabe arrasta-se para o lado (no telemovel com o dedo). */
.nov-lista { display: flex; gap: 18px; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.nov-lista::-webkit-scrollbar { display: none; }
.nov-lista a { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.nov-lista a:hover { color: var(--link); }

/* ---- Descarregar a ferramenta (pagina da ferramenta e pagina do servico) ---- */
.tool-descarga { display: inline-flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 9px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.tool-descarga:hover { background: var(--bg-soft); text-decoration: none; }
.td-txt { display: flex; flex-direction: column; min-width: 0; }
.td-txt b { font-size: 14px; font-weight: 800; line-height: 1.3; }
.td-txt small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-soft); }
.td-seta { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #10313a; font-weight: 900; font-size: 15px; }

/* ---- Pagina Servicos: os grupos, numa lista que se filtra ---- */
.dir-filtro { width: 100%; max-width: 420px; padding: 9px 12px; margin: 0 0 12px; border: 1px solid var(--input-border); border-radius: var(--radius); font: inherit; font-size: 14px; }
.dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.dir-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.dir-item:hover { background: var(--bg-soft); text-decoration: none; color: var(--link); }
.dir-item b { font-weight: 500; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* ---- Separadores (pagina Ficheiros) ---- */
.separadores { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 0 0 14px; }
.separadores a { padding: 8px 14px; margin-bottom: -2px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.separadores a:hover { color: var(--ink); text-decoration: none; }
.separadores a.on { color: var(--ink); border-bottom-color: var(--accent); }

/* ---- Painel: as ferramentas ---- */
.adm-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.adm-tool { display: flex; gap: 14px; padding: 14px; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.adm-tool.oculta { opacity: .6; }
.adm-tool > .tool-img { flex: 0 0 104px; width: 104px; align-self: flex-start; border: 1px solid var(--line); border-radius: 6px; }
.adm-tool-dados { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-tool-dados input[type=file] { padding: 6px; font-size: 13px; }
.adm-tool-opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; }
.adm-tool-opcoes label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.adm-tool-opcoes input { width: auto; }
.adm-tool-opcoes .btn { margin-left: auto; }

@media (max-width: 900px) {
  .duas { grid-template-columns: 1fr; gap: 26px; }
  .passos { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 720px) {
  .sec-nome { font-size: 20px; }
  .tool-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tool-img b { font-size: 28px; }
  .tool-topo { align-items: flex-start; gap: 12px; }
  .tool-img.grande { flex-basis: 88px; width: 88px; }
  .tool-topo h1 { font-size: 24px; }
  .opcao { flex-wrap: wrap; gap: 6px 12px; }
  .op-nome { flex-basis: 100%; }
  .opcao .btn { margin-left: auto; }
  .faixa { flex-wrap: wrap; }
  .faixa-texto { flex-basis: 100%; }
  .adm-tools { grid-template-columns: 1fr; }
  .dir { grid-template-columns: 1fr; }
}

/* No escuro: os destaques que eram pretos passam a ambar, como no resto do site. */
[data-theme="dark"] .faixa { background: var(--surface); border: 1px solid var(--line); }
[data-theme="dark"] .tool-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.5); }
[data-theme="dark"] .conta-menu { box-shadow: 0 10px 28px rgba(0,0,0,.6); }

/* ======================= REGISTO DE ATIVIDADE (admin) ================== */
.log-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.log-fuso { font-size: 13px; color: var(--ink-soft); }
.log-nota { color: var(--ink-soft); font-size: 13px; margin: -12px 0 18px; }
.log-resumo { margin-bottom: 18px; }
.log-resumo a.stat { color: var(--ink); text-decoration: none; min-width: 130px; }
.log-resumo a.stat:hover { border-color: var(--accent); }
.stat.mau { border-left-color: #b23b3b; }
.stat.mau .n { color: #b23b3b; }
.log-filtros { display: grid; grid-template-columns: 2fr 1.2fr 1.4fr 1fr auto; gap: 10px; align-items: end; }
.log-filtros .field { margin: 0; }
.log-botoes { display: flex; gap: 8px; }
.log-tabela td { vertical-align: top; }
.log-dia td { background: var(--bg-soft); font-weight: 800; font-size: 13px; padding: 7px 10px; }
.log-hora { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
.log-acao { font-weight: 700; }
.log-dinheiro { color: #1a7a48; }
.log-painel { color: #1f4fa8; }
.log-mau { color: #b23b3b; }
.log-detalhe { color: var(--ink-soft); font-size: 13px; white-space: normal; word-break: break-word; }
.log-ip { font-size: 12px; white-space: nowrap; }
.log-ip a { color: var(--ink-soft); }
[data-theme="dark"] .log-dinheiro { color: #5fce93; }
[data-theme="dark"] .log-painel { color: #8fb4ff; }
[data-theme="dark"] .log-mau, [data-theme="dark"] .stat.mau .n { color: #ff8f8f; }
@media (max-width: 900px) {
  .log-filtros { grid-template-columns: 1fr 1fr; }
  .log-botoes { grid-column: 1 / -1; }
}

/* ======================= FILA DE RECARGAS (admin) ====================== */
.rec { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; background: var(--surface); }
.rec.rec-aviso { border-left-color: #b23b3b; }
.rec-topo { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.rec-valor { font-size: 20px; margin-right: 6px; }
.rec-quando { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.rec-linha { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.rec-ref { font-size: 12px; }
.rec-prova { margin-top: 10px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; word-break: break-word; }
.rec-mau { color: #b23b3b; font-weight: 700; }
.rec-avisos { margin: 10px 0 0; padding: 10px 12px 10px 28px; background: #fdecec; color: #8a1f1f; border-radius: var(--radius); font-size: 13px; font-weight: 600; }
.rec-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between; margin-top: 12px; }
.rec-acoes form { margin: 0; }
.rec-confirmar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rec-confirmar label { font-size: 13px; font-weight: 700; }
.rec-confirmar input { width: 130px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
[data-theme="dark"] .rec-avisos { background: #3a1d1d; color: #ffb3b3; }
[data-theme="dark"] .rec-mau { color: #ff8f8f; }

/* ======================= PAINEL: menu por assunto e seguranca ========== */
.adm-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 20px; }
.adm-grupo { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.adm-grupo .btn { text-align: left; }
.adm-grupo-nome { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); margin-bottom: 2px; }
.seg-ok { color: #1a7a48; font-weight: 700; }
.seg-mau { color: #b23b3b; font-weight: 700; }
.seg-texto { color: var(--ink-soft); font-size: 13px; white-space: normal; }
table.data.seg td { white-space: normal; }
[data-theme="dark"] .seg-ok { color: #5fce93; }
[data-theme="dark"] .seg-mau { color: #ff8f8f; }

/* ===================== CAIXA "DA NOSSA LOJA" (publicidade da casa) ===================== */
.montra-caixa:has(.casa) { padding: 10px 12px; text-align: left; }
.casa { position: relative; width: 100%; }
.casa-rotulo { display: block; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.casa-item { display: none; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.casa-item.ativo { display: flex; animation: casa-entra .35s ease-out; }
.casa-item:hover { text-decoration: none; }
.casa-item:hover b { color: var(--accent); }
.casa-img { flex: 0 0 96px; width: 96px; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: grid; place-items: center; }
.casa-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.casa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.casa-txt small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); }
.casa-txt b { font-size: 16px; }
.casa-txt span { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casa-preco { white-space: nowrap; font-size: 13px; color: var(--ink-soft); }
.casa-preco b { font-size: 18px; color: var(--ink); }
@keyframes casa-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .casa-item.ativo { animation: none; } }
@media (max-width: 560px) {
  .casa-img { flex-basis: 72px; width: 72px; }
  .casa-ver { display: none; }
  .casa-txt b { font-size: 15px; }
}
.pub-opcoes { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; font-size: 14px; }
.pub-opcoes select { width: auto; display: inline-block; margin: 0 6px; padding: 4px 8px; }

/* Na coluna lateral (estreita) a caixa da loja fica em pe: imagem em cima, preco em baixo. */
.casa-vertical .casa-item.ativo { flex-direction: column; align-items: stretch; text-align: center; gap: 8px; }
.casa-vertical .casa-img { flex-basis: auto; width: 100%; max-width: 240px; margin: 0 auto; }
.casa-vertical .casa-txt span { white-space: normal; }
.casa-vertical .casa-ver { display: block; }

/* ============================ CLIENTES (admin) ========================= */
.cli-procura { display: flex; gap: 8px; flex-wrap: wrap; }
.cli-procura input { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.cli-selo { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin-left: 6px; }
.cli-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.cli-acoes .card { margin: 0; }
.seg-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

/* Campo-armadilha do registo: fora do ecra, mas presente para os robos que preenchem tudo.
   Nao e display:none de proposito: muitos robos saltam os campos escondidos assim. */
.campo-armadilha { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }