/* =====================================================================
   Ponto de Venda Nostra — estilo base (mobile-first)
   Pensado para telemóvel: botões grandes, texto legível, pouca coisa.
   ===================================================================== */

:root{
  --verde:#1d9e75;
  --verde-escuro:#0f6e56;
  --texto:#2b2b29;
  --texto-fraco:#6b6b66;
  --fundo:#f5f4f1;
  --branco:#ffffff;
  --borda:#e2e0da;
  --erro:#a32d2d;
  --erro-fundo:#fceaea;
  --ok:#0f6e56;
  --ok-fundo:#e1f5ee;
  --aviso:#854f0b;
  --aviso-fundo:#faeeda;
  --raio:8px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.5;
  color:var(--texto);
  background:var(--fundo);
}

/* ---- Topo ---------------------------------------------------------- */
.topo{
  background:var(--verde-escuro);
  color:#fff;
  padding:12px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}
.topo-marca strong{display:block;font-size:16px}
.topo-produto{font-size:12px;opacity:.75}
.topo-util{display:flex;align-items:center;gap:10px;font-size:14px}
.topo-nome{opacity:.9}
.etiqueta{
  background:rgba(255,255,255,.18);
  padding:2px 8px;border-radius:20px;font-size:12px;
}
.botao-sair{
  color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.5);
  padding:4px 12px;border-radius:var(--raio);font-size:14px;
}
.botao-sair:hover{background:rgba(255,255,255,.15)}

/* ---- Conteúdo ------------------------------------------------------ */
.conteudo{max-width:900px;margin:0 auto;padding:20px 16px 40px}
.conteudo h1{font-size:20px;margin:0 0 16px}
.conteudo h2{font-size:17px;margin:24px 0 8px}

.cartao{
  background:var(--branco);border:1px solid var(--borda);
  border-radius:12px;padding:16px;margin-bottom:16px;
}

/* ---- Mensagens ----------------------------------------------------- */
.msg{padding:10px 12px;border-radius:var(--raio);font-size:14px;margin:0 0 12px}
.msg-ok{background:var(--ok-fundo);color:var(--ok)}
.msg-erro{background:var(--erro-fundo);color:var(--erro)}
.msg-aviso{background:var(--aviso-fundo);color:var(--aviso)}

/* ---- Formulários --------------------------------------------------- */
label{display:block;margin:14px 0 4px;font-size:14px;color:var(--texto-fraco)}
input,select,textarea{
  width:100%;padding:12px;font-size:16px;   /* 16px evita zoom no iPhone */
  border:1px solid #ccc9c2;border-radius:var(--raio);background:#fff;
}
input:focus,select:focus{outline:2px solid var(--verde);border-color:var(--verde)}
button,.botao{
  display:inline-block;margin-top:18px;width:100%;padding:14px;
  border:0;border-radius:var(--raio);background:var(--verde);color:#fff;
  font-size:16px;text-align:center;text-decoration:none;cursor:pointer;
}
button:hover,.botao:hover{background:var(--verde-escuro)}

/* ---- Login --------------------------------------------------------- */
.pagina-login{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:20px;
}
.cartao-login{
  width:100%;max-width:380px;background:var(--branco);
  border:1px solid var(--borda);border-radius:12px;padding:28px 24px;
}
.cartao-login h1{font-size:20px;margin:0}
.cartao-login .subtitulo{margin:2px 0 18px;color:var(--texto-fraco);font-size:14px}

/* ---- Rodapé -------------------------------------------------------- */
.rodape{
  text-align:center;color:var(--texto-fraco);
  font-size:12px;padding:20px;border-top:1px solid var(--borda);
}

/* ---- Ecrãs maiores ------------------------------------------------- */
@media (min-width:640px){
  button,.botao{width:auto;min-width:180px}
}

/* =====================================================================
   FASE 3 — menu, tabelas e barras de acção
   ===================================================================== */

/* ---- Menu ---------------------------------------------------------- */
.menu{
  background:var(--branco);border-bottom:1px solid var(--borda);
  display:flex;gap:2px;overflow-x:auto;padding:0 8px;
}
.menu a{
  padding:12px 14px;color:var(--texto-fraco);text-decoration:none;
  font-size:14px;white-space:nowrap;border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--texto)}
.menu a.ativo{color:var(--verde-escuro);border-bottom-color:var(--verde)}

/* ---- Tabelas ------------------------------------------------------- */
.tabela-caixa{overflow-x:auto;background:var(--branco);
  border:1px solid var(--borda);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--borda);
  vertical-align:middle}
th{background:#faf9f6;font-weight:500;color:var(--texto-fraco);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.acoes{white-space:nowrap;text-align:right}

/* ---- Etiquetas de estado ------------------------------------------- */
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px}
.tag-ativo{background:var(--ok-fundo);color:var(--ok)}
.tag-inativo{background:#eceae4;color:var(--texto-fraco)}
.tag-admin{background:#eeedfe;color:#3c3489}
.tag-supervisor{background:#e6f1fb;color:#0c447c}
.tag-promotora{background:var(--ok-fundo);color:var(--ok)}

/* ---- Botões pequenos ----------------------------------------------- */
.btn-min{
  display:inline-block;width:auto;margin:0 0 0 6px;padding:6px 12px;
  font-size:13px;border-radius:var(--raio);text-decoration:none;
  border:1px solid var(--borda);background:#fff;color:var(--texto);cursor:pointer;
}
.btn-min:hover{background:#f3f1ec;border-color:#ccc9c2}
.btn-min.perigo{color:var(--erro);border-color:#e8c9c9}
.btn-min.perigo:hover{background:var(--erro-fundo)}
form.em-linha{display:inline}

/* ---- Barra acima das tabelas --------------------------------------- */
.barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between;margin-bottom:14px}
.barra .botao{margin-top:0;width:auto}
.barra form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.barra select,.barra input{width:auto;padding:8px 10px;font-size:14px}
.barra label{margin:0;font-size:14px}

/* ---- Formulários em duas colunas (ecrãs grandes) -------------------- */
.form-duplo{display:grid;gap:0 16px}
@media (min-width:640px){ .form-duplo{grid-template-columns:1fr 1fr} }
.form-largo{grid-column:1/-1}
.ajuda{font-size:13px;color:var(--texto-fraco);margin:4px 0 0}

/* ---- Cartões de resumo (painel) ------------------------------------ */
.resumo{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-bottom:20px}
.resumo .cartao{margin:0;text-align:center;padding:16px 12px}
.resumo .numero{display:block;font-size:26px;color:var(--verde-escuro)}
.resumo .rotulo{font-size:13px;color:var(--texto-fraco)}
.vazio{color:var(--texto-fraco);font-size:14px;padding:16px;text-align:center}