/* Paleta baseada no logotipo do condomínio: vermelho do arco,
   azul das casas e amarelo das janelas */
:root {
  --vinho: #d2222a;
  --vinho-escuro: #1e2c6b;
  --vinho-claro: #e8474e;
  --dourado: #f5c400;
  --dourado-claro: #fdeba0;
  --areia: #f7f8fb;
  --texto: #23262e;
  --texto-suave: #6d7280;
  --verde: #2e7d4f;
  --laranja: #c77618;
  --vermelho: #b23030;
  --borda: #e6e8f0;
  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .08);
  --sombra-forte: 0 4px 14px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05);
  --raio: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  background: var(--areia);
  color: var(--texto);
  min-height: 100vh;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }
a { color: var(--vinho); }

/* ---------- Ecrã de entrada ---------- */
#ecra-login {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    linear-gradient(rgba(18, 26, 62, .18), rgba(10, 14, 36, .30)),
    url('/assets/fundo.png') center/cover no-repeat,
    linear-gradient(135deg, #1e2c6b 0%, #2b3d8f 55%, #12193f 100%);
}
.cartao-login {
  background: rgba(255, 255, 255, .28);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
  width: 100%; max-width: 420px;
  padding: 40px 36px 32px;
  text-align: center;
}
.cartao-login .logo { background: #fff; }
.cartao-login .logo { margin: 0 auto 14px; }
.cartao-login h1 { font-size: 22px; color: var(--vinho); margin-bottom: 4px; text-shadow: 0 1px 2px rgba(255,255,255,.5); }
.cartao-login .sub { color: #2a3050; font-size: 14px; margin-bottom: 26px; font-weight: 600; }
.cartao-login .campo label { color: #232a4a; }
.cartao-login .campo input {
  background-color: rgba(255, 255, 255, .90);
  border-color: rgba(30, 44, 107, .22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}
.cartao-login .campo input:focus { border-color: var(--dourado); background-color: #fff; }

/* Campos apenas com ícone, como na aplicação móvel */
.campo-utilizador input, .campo-chave input {
  padding-left: 44px;
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 19px;
}
.campo-utilizador input::placeholder, .campo-chave input::placeholder {
  color: #6d7280;
  font-weight: 500;
}
.campo-utilizador input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236d7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
.campo-chave input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236d7280' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* Cada campo é um cartão branco assente sobre o vidro */
.cartao-login .campo-utilizador, .cartao-login .campo-chave {
  background: #fff;
  border: 1.5px solid rgba(30, 44, 107, .12);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(12, 18, 46, .18);
  margin-bottom: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.cartao-login .campo-utilizador:focus-within, .cartao-login .campo-chave:focus-within {
  border-color: var(--dourado);
  box-shadow: 0 12px 28px rgba(12, 18, 46, .26);
}
.cartao-login .campo-utilizador input, .cartao-login .campo-chave input {
  background-color: transparent;
  border: none;
  border-radius: 14px;
  box-shadow: none;
  padding: 15px 16px 15px 46px;
}
.cartao-login .rodape-login { color: #2a3050; }
.cartao-login form { text-align: left; }

/* Pedido de acesso — o formulário é mais largo e pode ter de rolar no telemóvel */
.cartao-login.largo { max-width: 560px; max-height: calc(100vh - 48px); overflow-y: auto; }
.cartao-login.largo h1 { margin-bottom: 6px; }
.cartao-login.largo .campo label { color: #1c2340; font-weight: 700; }
.cartao-login.largo .campo input,
.cartao-login.largo .campo select { background-color: rgba(255, 255, 255, .96); }

.accoes-acesso {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(30, 44, 107, .18);
  display: flex; flex-direction: column; gap: 10px;
}
.ligacao-acesso {
  background: none; border: none; padding: 4px;
  color: #23305e; font-size: 13px; font-weight: 600; text-decoration: underline;
}
.ligacao-acesso:hover { color: var(--vinho); }

/* Passos do pedido, para se perceber onde se está */
.passos-acesso {
  display: flex; gap: 6px; justify-content: center;
  margin: 0 0 20px; font-size: 12px; font-weight: 600; color: #4a5270;
}
.passos-acesso span { flex: 1; padding: 6px 4px; border-radius: 8px; background: rgba(255, 255, 255, .55); }
.passos-acesso span.activo { background: var(--vinho); color: #fff; }

.caixa-pedido {
  background: rgba(255, 255, 255, .92);
  border: 1.5px solid rgba(30, 44, 107, .16);
  border-radius: 14px; padding: 16px; margin-bottom: 16px; text-align: left;
}
.caixa-pedido .codigo {
  font-family: ui-monospace, Menlo, monospace; font-size: 24px; font-weight: 700;
  color: var(--vinho); letter-spacing: 1px; text-align: center; margin: 6px 0 10px;
}
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 13px; font-weight: 600; color: var(--texto-suave); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--borda); border-radius: 10px;
  background-color: #fdfcf9; outline: none;
  transition: border-color .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--dourado); }
.campo textarea { min-height: 96px; resize: vertical; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: none; border-radius: 10px;
  font-size: 15px; font-weight: 600;
  background: linear-gradient(135deg, var(--vinho), var(--vinho-claro));
  color: #fff; width: 100%;
  transition: transform .1s, box-shadow .15s;
}
.btn:hover { box-shadow: 0 6px 18px rgba(125, 26, 26, .35); transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.btn.secundario { background: #fff; color: var(--vinho); border: 1.5px solid var(--vinho); }
.btn.pequeno { width: auto; padding: 8px 16px; font-size: 13px; }
.btn.dourado { background: linear-gradient(135deg, #e0b400, var(--dourado)); color: var(--vinho-escuro); }
.btn.perigo { background: #fff; color: var(--vermelho); border: 1.5px solid var(--vermelho); }
.btn.verde { background: linear-gradient(135deg, #226340, var(--verde)); }

.aviso-erro {
  background: #fdeaea; color: #8c2020;
  border: 1px solid #f0c4c4; border-radius: 10px;
  padding: 10px 14px; font-size: 14px; margin-bottom: 14px;
  display: none;
}
.rodape-login { margin-top: 22px; font-size: 12px; color: var(--texto-suave); }

/* ---------- Logotipo ---------- */
.logo {
  width: 72px; height: 72px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, var(--vinho-claro), var(--vinho-escuro));
  color: var(--dourado-claro);
  font-weight: 800; font-size: 26px; letter-spacing: 1px;
  border: 2px solid var(--dourado);
  overflow: hidden; flex-shrink: 0;
}
.logo.mini { width: 42px; height: 42px; font-size: 16px; border-radius: 12px; }
/* O logotipo real é deitado (1696×927): num quadrado com "cover" ficava "Vila Chin".
   Com a imagem, a caixa ganha a proporção dele e mostra-o inteiro. */
.logo.com-imagem { background: #fff; padding: 3px 5px; }
.logo.com-imagem img { width: 100%; height: 100%; object-fit: contain; }
.cartao-login .logo.com-imagem { width: 150px; height: 84px; }
.logo.mini.com-imagem { width: 70px; height: 42px; padding: 2px 4px; }

/* ---------- Estrutura da aplicação ---------- */
#app { display: none; min-height: 100vh; flex-direction: column; }
#app.visivel { display: flex; }

/* Barra superior com a marca e o utilizador */
.cabecalho-topo {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-bottom: 1px solid var(--borda);
  padding: 0 28px; height: 64px;
  position: sticky; top: 0; z-index: 40;
}
.cabecalho-topo .marca { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; overflow: hidden; }
.cabecalho-topo .titulo { font-size: 15px; font-weight: 700; color: var(--vinho-escuro); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecalho-topo .titulo small { display: block; font-weight: 500; font-size: 11px; color: var(--texto-suave); letter-spacing: .2px; }
.acesso-utilizador { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.info-utilizador { text-align: right; line-height: 1.25; }
.info-utilizador .nome { font-size: 13px; font-weight: 600; color: var(--texto); }
.info-utilizador .papel { font-size: 11px; color: var(--texto-suave); }

.botao-sino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; border-radius: 10px;
  background: transparent; color: var(--texto-suave); transition: background .15s, color .15s;
}
.botao-sino:hover { background: var(--areia); color: var(--vinho-escuro); }
.botao-sino .badge {
  position: absolute; top: 4px; right: 4px; margin: 0;
  background: var(--vinho); color: #fff; border: 2px solid #fff;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}

/* Barra de navegação horizontal (uma linha) — o excesso vai para o menu "Mais" */
.barra-navegacao {
  display: flex; align-items: stretch; flex-wrap: nowrap; gap: 2px;
  background: #fff; border-bottom: 1px solid var(--borda);
  padding: 0 16px; position: relative;
}
.barra-navegacao > a {
  display: flex; align-items: center;
  padding: 13px 13px; font-size: 14px; font-weight: 500;
  color: var(--texto-suave); text-decoration: none; white-space: nowrap;
  border-bottom: 2.5px solid transparent; transition: color .15s, border-color .15s;
}
.barra-navegacao > a:hover { color: var(--vinho-escuro); }
.barra-navegacao > a.activo { color: var(--vinho); border-bottom-color: var(--vinho); font-weight: 600; }
.barra-navegacao > a.nav-admin { color: var(--vinho-escuro); }
.barra-navegacao > a.nav-admin:hover { color: var(--vinho); }

/* Botão "Mais" e o seu painel */
.nav-mais { position: relative; display: flex; align-items: stretch; }
.nav-mais-botao {
  border: none; background: transparent; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--texto-suave); padding: 13px 13px; white-space: nowrap; cursor: pointer;
  display: flex; align-items: center; gap: 5px; border-bottom: 2.5px solid transparent;
}
.nav-mais-botao:hover { color: var(--vinho-escuro); }
.nav-mais-botao .seta { font-size: 11px; transition: transform .15s; }
.nav-mais.aberto .nav-mais-botao .seta { transform: rotate(180deg); }
.nav-mais.activo .nav-mais-botao { color: var(--vinho); border-bottom-color: var(--vinho); font-weight: 600; }
.nav-mais-lista {
  position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: var(--sombra-forte); padding: 6px; display: none; z-index: 45;
}
.nav-mais-lista.aberto { display: block; }
.nav-mais-lista a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: var(--texto); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.nav-mais-lista a:hover { background: var(--areia); }
.nav-mais-lista a.activo { color: var(--vinho); background: #fdf5f5; font-weight: 600; }
.nav-mais-lista a.nav-admin { color: var(--vinho-escuro); }
.nav-grupo { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-suave); padding: 10px 12px 4px; }

.conteudo { padding: 32px 28px 64px; max-width: 1180px; width: 100%; margin: 0 auto; }
.cabecalho-pagina { margin-bottom: 26px; }
.cabecalho-pagina h2 { font-size: 22px; color: var(--vinho-escuro); font-weight: 700; letter-spacing: -.3px; }
.cabecalho-pagina p { color: var(--texto-suave); font-size: 14px; margin-top: 4px; }

/* ---------- Cartões e grelhas ---------- */
.grelha { display: grid; gap: 18px; }
.grelha.c2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grelha.c3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grelha.c4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.cartao {
  background: #fff; border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 24px;
  border: 1px solid var(--borda);
}
.cartao h3 {
  font-size: 15px; color: var(--vinho-escuro); margin-bottom: 16px; font-weight: 700;
  letter-spacing: -.2px;
}

.indicador { text-align: left; transition: box-shadow .2s, transform .2s; }
.indicador:hover { box-shadow: var(--sombra-forte); transform: translateY(-2px); }
.indicador .rotulo { font-size: 12px; color: var(--texto-suave); font-weight: 600; letter-spacing: .2px; }
.indicador .valor { font-size: 30px; font-weight: 700; color: var(--vinho-escuro); margin-top: 8px; letter-spacing: -1px; }
.indicador .valor.ok { color: var(--verde); }
.indicador .valor.mau { color: var(--vermelho); }
.indicador .nota { font-size: 12.5px; color: var(--texto-suave); margin-top: 6px; }
.indicador .nota a { font-weight: 600; }

/* ---------- Tabelas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  text-align: left; padding: 10px 12px;
  color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 2px solid var(--borda);
}
.tabela td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }

.etiqueta {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.etiqueta.paga, .etiqueta.confirmado, .etiqueta.resolvida, .etiqueta.aberta-vot { background: #e3f2e9; color: var(--verde); }
.etiqueta.pendente, .etiqueta.em_curso, .etiqueta.agendada { background: #fdf3e2; color: var(--laranja); }
.etiqueta.em_analise { background: #e8eefb; color: #2c55a0; }
.etiqueta.atraso, .etiqueta.rejeitado, .etiqueta.urgente { background: #fdeaea; color: var(--vermelho); }
.etiqueta.aberta, .etiqueta.importante { background: #fdf3e2; color: var(--laranja); }
.etiqueta.normal, .etiqueta.encerrada { background: #efece6; color: var(--texto-suave); }
.etiqueta.ok { background: #e3f2e9; color: var(--verde); }
.etiqueta.off { background: #efece6; color: var(--texto-suave); }
.erro-txt { color: var(--vermelho); font-size: 13px; max-width: 320px; }

/* ---------- Comunicados ---------- */
.comunicado { border-left: 4px solid var(--dourado); padding: 16px 18px; background: #fff; border-radius: 10px; box-shadow: var(--sombra); margin-bottom: 14px; }
.comunicado.urgente { border-left-color: var(--vermelho); }
.comunicado.importante { border-left-color: var(--laranja); }
.comunicado .topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.comunicado h4 { font-size: 16px; color: var(--texto); }
.comunicado .meta { font-size: 12px; color: var(--texto-suave); }
.comunicado p { font-size: 14px; line-height: 1.55; color: #4d453f; white-space: pre-line; }

/* ---------- Votações ---------- */
.opcao-voto {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--borda); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opcao-voto:hover { border-color: var(--dourado); background: #fffcf4; }
.opcao-voto.escolhida { border-color: var(--vinho); background: #fdf5f5; }
.opcao-voto input { accent-color: var(--vinho); width: 18px; height: 18px; }

.barra-resultado { background: #f0ebe2; border-radius: 8px; height: 30px; position: relative; overflow: hidden; margin: 6px 0 12px; }
.barra-resultado .preenchido {
  height: 100%; background: linear-gradient(90deg, var(--vinho), var(--vinho-claro));
  border-radius: 8px; min-width: 2px;
}
.barra-resultado .texto-barra {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--texto);
}

/* Gráfico de barras simples (relatórios) */
.grafico { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 10px; }
.grafico .coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.grafico .barra { width: 100%; max-width: 46px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--vinho-claro), var(--vinho)); }
.grafico .barra.despesa { background: linear-gradient(180deg, var(--dourado), #b8892f); }
.grafico .rotulo-mes { font-size: 11px; color: var(--texto-suave); }

/* ---------- Modal ---------- */
.fundo-modal {
  position: fixed; inset: 0; background: rgba(30, 10, 10, .55);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.fundo-modal.visivel { display: flex; }
.modal {
  background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 28px;
}
.modal h3 { color: var(--vinho); margin-bottom: 18px; }
.modal .accoes { display: flex; gap: 10px; margin-top: 20px; }
.modal .accoes .btn { width: auto; flex: 1; }

/* ---------- Diversos ---------- */
.mensagem-flutuante {
  position: fixed; bottom: 24px; right: 24px; z-index: 99;
  background: var(--vinho-escuro); color: #fff;
  padding: 14px 20px; border-radius: 12px; box-shadow: var(--sombra);
  font-size: 14px; display: none; max-width: 380px;
}
.mensagem-flutuante.visivel { display: block; }
.mensagem-flutuante.erro { background: var(--vermelho); }

.vazio { text-align: center; color: var(--texto-suave); padding: 36px 10px; font-size: 14px; }
.linha-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtros input, .filtros select { padding: 9px 12px; border: 1.5px solid var(--borda); border-radius: 10px; background: #fff; }

.caixa-dados-bancarios {
  background: #fbfaf6; border: 1px solid var(--borda); border-left: 3px solid var(--dourado);
  border-radius: 12px; padding: 16px 18px; font-size: 13px; line-height: 1.7; margin-bottom: 16px;
}


.notificacao { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 12px; box-shadow: var(--sombra); padding: 16px 18px; margin-bottom: 12px; border: 1px solid var(--borda); }
.notificacao.nao-lida { border-left: 4px solid var(--vinho); background: #fffdf5; }
.notificacao .icone { font-size: 22px; line-height: 1; }
.notificacao h4 { font-size: 14px; margin-bottom: 4px; }
.notificacao p { font-size: 13px; color: var(--texto-suave); line-height: 1.5; }
.notificacao .quando { font-size: 11px; color: var(--texto-suave); margin-top: 6px; }

@media (max-width: 720px) {
  .cabecalho-topo { padding: 0 16px; gap: 10px; }
  .cabecalho-topo .titulo { font-size: 14px; }
  .info-utilizador { display: none; }
  .barra-navegacao { padding: 0 10px; }
  .barra-navegacao > a, .nav-mais-botao { padding: 11px 10px; font-size: 13px; }
  .conteudo { padding: 22px 16px 60px; }

  /* No telemóvel as tabelas viram cartões: uma linha = um cartão, cada valor
     com o nome da coluna à esquerda. Deitadas, cortavam à direita justamente a
     coluna que importa (estado, botão de pagar, acções). Os rótulos vêm do
     cabeçalho — ver rotularTabelas() no app.js. */
  .tabela.em-cartoes, .tabela.em-cartoes tbody,
  .tabela.em-cartoes tr, .tabela.em-cartoes td { display: block; width: 100%; }
  .tabela.em-cartoes .linha-cabecalho { display: none; }
  .tabela.em-cartoes tr {
    border: 1px solid var(--borda); border-radius: 12px;
    padding: 4px 14px; margin-bottom: 12px; background: #fff;
  }
  .tabela.em-cartoes tr:last-child { margin-bottom: 0; }
  .tabela.em-cartoes td {
    display: flow-root; border: none; padding: 8px 0;
    text-align: right; white-space: normal !important;
  }
  .tabela.em-cartoes td + td { border-top: 1px dashed var(--borda); }
  .tabela.em-cartoes td[data-rotulo]::before {
    content: attr(data-rotulo); float: left; margin-right: 12px;
    color: var(--texto-suave); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; line-height: 20px;
  }
  /* 1.ª coluna = título do cartão; células sem cabeçalho = botões */
  .tabela.em-cartoes td:first-child { text-align: left; padding-top: 12px; }
  .tabela.em-cartoes td:first-child::before { content: none; }
  .tabela.em-cartoes td:not([data-rotulo]) { text-align: left; }
}
/* Telemóveis estreitos (≤360 px): o logotipo já diz "Vila Chinesa"; o subtítulo
   cortado a meio só fazia ruído ao lado do sino e do "Sair". */
@media (max-width: 360px) {
  .cabecalho-topo .titulo small { display: none; }
}

@media print {
  .cabecalho-topo, .barra-navegacao, .mensagem-flutuante, .btn { display: none !important; }
  .conteudo { padding: 0; max-width: none; }
}

/* ---- Funcionários ---- */
.cartao-funcionario { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cartao-funcionario.inactivo { opacity: .62; }
.foto-funcionario {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: #eef0f6; display: flex; align-items: center; justify-content: center;
}
.foto-funcionario img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-funcionario .sem-foto { font-size: 12px; color: var(--texto-suave); }
.foto-funcionario .estado-passe { position: absolute; top: 10px; left: 10px; }
.corpo-funcionario { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.corpo-funcionario h3 { font-size: 16px; color: var(--vinho); margin: 0; }
.corpo-funcionario .funcao { font-size: 13px; color: var(--texto); font-weight: 600; }
.corpo-funcionario .tel { font-size: 13px; color: var(--texto-suave); }
.accoes-funcionario { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.accoes-funcionario .btn { text-decoration: none; }

/* ---- Credenciais geradas ---- */
.caixa-credenciais {
  border: 1.5px solid var(--dourado); border-radius: 12px; overflow: hidden;
  background: #fffdf5;
}
.caixa-credenciais > div {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #f0ead2;
}
.caixa-credenciais > div:last-child { border-bottom: 0; }
.caixa-credenciais span { font-size: 13px; color: var(--texto-suave); }
.caixa-credenciais strong { font-size: 18px; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--vinho-escuro); letter-spacing: .5px; }
code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em;
  background: #f0ead2; color: var(--vinho-escuro); padding: 1px 6px; border-radius: 5px;
}

/* ---- Separador dentro de formulários ---- */
.separador-form {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--vinho-escuro); margin: 18px 0 12px; padding-top: 14px;
  border-top: 1px solid var(--borda);
}
.separador-form span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--texto-suave); }

/* ---- Directório de empresas ---- */
.empresa { display: flex; flex-direction: column; gap: 12px; }
.empresa-cabecalho { display: flex; align-items: center; gap: 12px; }
.empresa-inicial {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--vinho-escuro), #2b3d8f);
  color: #fff; font-size: 20px; font-weight: 700;
}
.empresa-cabecalho h3 { color: var(--vinho-escuro); font-size: 16px; }
.empresa-ramo { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }
.empresa-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--texto-suave); flex-wrap: wrap; }
.empresa-contacto { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--vinho); }
.empresa-contacto:hover { text-decoration: underline; }
.botao-apagar {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--borda); background: #fff; color: var(--texto-suave);
  font-size: 14px; line-height: 1; transition: background .15s, color .15s, border-color .15s;
}
.botao-apagar:hover { background: #fdeaea; color: var(--vermelho); border-color: #f0c4c4; }

/* ---- Câmaras de segurança ---- */
.nota-cameras {
  background: #eef1f8; border: 1px solid var(--borda); border-left: 3px solid var(--vinho-escuro);
  border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.6; color: #3a4260; margin-bottom: 18px;
}
.camera-grelha { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.camera-tile {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--borda);
  background: #fff; cursor: pointer; box-shadow: var(--sombra); transition: box-shadow .2s, transform .2s;
}
.camera-tile:hover { box-shadow: var(--sombra-forte); transform: translateY(-2px); }
.camera-video {
  position: relative; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #1c2740, #0a0e1a); color: #47516f;
}
.camera-video svg { width: 46px; height: 46px; }
.camera-video.grande { border-radius: 12px; }
.camera-estado {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, .45); padding: 4px 9px; border-radius: 20px; letter-spacing: .4px;
}
.camera-ponto { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 0 rgba(255, 59, 59, .6); animation: pulsar 1.6s infinite; }
.camera-ponto.off { background: #8892ad; animation: none; box-shadow: none; }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 rgba(255,59,59,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,59,59,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); } }
.camera-inativa { position: absolute; bottom: 10px; right: 10px; font-size: 11px; color: #cdd3e4; background: rgba(0,0,0,.4); padding: 3px 8px; border-radius: 6px; }
.camera-rodape { padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.camera-rodape .nome { font-weight: 600; font-size: 14px; color: var(--vinho-escuro); }
.camera-rodape .area { font-size: 12px; color: var(--texto-suave); margin-top: 1px; }

/* ---------- Pedidos de acesso (gestão) ---------- */
.pedido-acesso { margin-bottom: 16px; }
.pedido-topo {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--borda);
}
.pedido-topo strong { font-size: 16px; color: var(--vinho-escuro); }
.pedido-casa { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }
.pedido-corpo { display: flex; gap: 16px; flex-wrap: wrap; }
.pedido-documento {
  flex: 0 0 220px; display: block; text-decoration: none;
  border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; background: #f3f0e9;
}
.pedido-documento img { display: block; width: 100%; height: 150px; object-fit: cover; }
.pedido-documento span {
  display: block; padding: 7px 10px; font-size: 12px; font-weight: 600;
  color: var(--vinho); text-align: center;
}
.pedido-documento.vazio {
  display: flex; align-items: center; justify-content: center; height: 150px;
  font-size: 13px; color: var(--texto-suave);
}
.pedido-dados { flex: 1 1 260px; display: flex; flex-direction: column; gap: 7px; }
.pedido-dados > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pedido-dados span { color: var(--texto-suave); font-size: 13px; }
.nota-ficha {
  display: block !important; margin-top: 6px; padding: 9px 11px; border-radius: 9px;
  background: #f0f4ff; font-size: 13px; color: #2a3560;
}
.nota-ficha.vazia { background: #fdf6e3; color: #6b5a1e; }
.pedido-accoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pedido-decisao { margin-top: 14px; font-size: 13px; color: var(--texto-suave); }
.pedido-porentregar {
  margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--vinho-escuro);
}

/* ================================================================
   IDIOMAS
   ================================================================ */

/* Selector de língua: no cartão de entrada fica no canto de cima, discreto,
   mas tem de ser encontrado por quem não lê nada do que está no ecrã. */
.barra-idioma {
  display: flex; justify-content: flex-end; margin-bottom: 6px;
}
.selector-idioma {
  appearance: none;
  padding: 7px 30px 7px 12px; border-radius: 9px;
  border: 1px solid rgba(30, 44, 107, .22);
  background-color: rgba(255, 255, 255, .90);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d7280' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
  font-size: 14px; font-weight: 600; color: #232a4a; cursor: pointer;
}
.barra-idioma .selector-idioma { font-size: 13px; padding-block: 5px; }
.cartao .selector-idioma { width: 100%; background-color: #fff; }
.nota-campo { display: block; margin-top: 6px; font-size: 12px; color: var(--texto-suave); }

/* ---------------------------------------------------------------
   Árabe — da direita para a esquerda.
   Só se invertem as regras que fixam um lado; o resto do desenho
   (flex, grelhas, cores) já acompanha o dir do documento.
   --------------------------------------------------------------- */
[dir="rtl"] .cartao-login form,
[dir="rtl"] .caixa-dados-bancarios,
[dir="rtl"] .indicador,
[dir="rtl"] .opcao-voto { text-align: right; }

[dir="rtl"] .info-utilizador { text-align: left; }

[dir="rtl"] .barra-idioma { justify-content: flex-start; }

/* Os campos com ícone: o ícone passa para a direita e o texto afasta-se dele */
[dir="rtl"] .campo-utilizador input,
[dir="rtl"] .campo-chave input {
  padding-left: 14px; padding-right: 44px;
  background-position: right 14px center;
}
[dir="rtl"] .selector-idioma {
  padding: 7px 12px 7px 30px;
  background-position: left 10px center;
}

/* Elementos ancorados a um canto */
[dir="rtl"] .botao-sino .badge { right: auto; left: 4px; }
[dir="rtl"] .nav-mais-lista { right: auto; left: 0; }
[dir="rtl"] .fab { right: auto; left: 24px; }
[dir="rtl"] .foto-funcionario .estado-passe { left: auto; right: 10px; }
[dir="rtl"] .camera-estado { left: auto; right: 10px; }
[dir="rtl"] .camera-inativa { right: auto; left: 10px; }

/* O código do pedido e o IBAN são identificadores: lêem-se sempre da esquerda
   para a direita, mesmo dentro de uma página em árabe. */
[dir="rtl"] .codigo,
[dir="rtl"] code { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* A seta do menu "Mais" aponta para baixo — não se inverte, mas a margem sim */
[dir="rtl"] .nav-mais-botao .seta { margin-right: 2px; margin-left: 0; }

/* Opção com caixa de selecção numa linha, nos formulários de gestão */
.opcao-linha {
  display: flex; align-items: center; gap: 9px;
  margin-top: 10px; font-size: 14px; color: var(--texto); cursor: pointer;
}
.opcao-linha input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--vinho); cursor: pointer; }

/* Nota do campo da casa: confirma que já existe, ou avisa que está cheia */
.nota-campo.ok { color: #1d6b3f; font-weight: 600; }
.nota-campo.aviso { color: var(--vermelho); font-weight: 600; }