/* ============================================================================
   public/css/comum/base.css — estilos comuns a todos os ecrãs do CYBERGYM
   Paleta CYBERSYS (a mesma do CYBERWATER): barra #1e293b · âmbar #f5a623
   Ecrãs verificados a 390 px, 820 px e 1280 px.
============================================================================ */

/* ── Cores e medidas ── */
:root {
  --cor-barra: #1e293b;            /* fundo da barra lateral */
  --cor-barra-texto: #cbd5e1;      /* texto da barra lateral */
  --cor-destaque: #f5a623;         /* âmbar da marca */
  --cor-destaque-escuro: #d98f14;  /* âmbar ao passar o rato */
  --cor-fundo: #f1f5f9;            /* fundo da área de trabalho */
  --cor-cartao: #ffffff;           /* fundo dos cartões e modais */
  --cor-texto: #0f172a;            /* texto principal */
  --cor-texto-suave: #64748b;      /* texto secundário */
  --cor-borda: #e2e8f0;            /* linhas e contornos */
  --cor-sucesso: #16a34a;          /* verde: activo, ok */
  --cor-aviso: #d97706;            /* laranja: suspenso, bloqueado */
  --cor-perigo: #dc2626;           /* vermelho: erro, perdido */
  --raio: 10px;                    /* cantos arredondados */
  --sombra: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 16px rgba(15, 23, 42, .06); /* sombra suave */
  --largura-da-barra: 240px;       /* largura da barra lateral */
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; } /* larguras incluem o padding */
html, body { margin: 0; padding: 0; }               /* sem margens do browser */
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; /* letra do sistema (sem CDN) */
  font-size: 15px;                 /* tamanho base */
  color: var(--cor-texto);         /* texto */
  background: var(--cor-fundo);    /* fundo */
  line-height: 1.45;               /* entrelinha confortável */
}
h1, h2, h3 { margin: 0; line-height: 1.2; } /* títulos sem margens soltas */
a { color: inherit; }                        /* ligações na cor do texto */
[hidden] { display: none !important; }       /* esconder é esconder */

/* ── Disposição: barra lateral + área principal ── */
.disposicao {
  display: flex;                   /* barra ao lado do conteúdo */
  min-height: 100vh;               /* ocupa a altura toda */
}
.area-principal {
  flex: 1;                         /* o resto da largura */
  min-width: 0;                    /* deixa as tabelas encolher sem rebentar */
  padding: 24px;                   /* margem interior */
}
.cabecalho-da-pagina {
  display: flex;                   /* título e acções lado a lado */
  align-items: center;             /* alinhados ao centro */
  justify-content: space-between;  /* título à esquerda, botões à direita */
  gap: 12px;                       /* espaço entre eles */
  flex-wrap: wrap;                 /* em ecrãs estreitos passa para baixo */
  margin-bottom: 18px;             /* espaço até ao conteúdo */
}
.cabecalho-da-pagina h1 { font-size: 22px; } /* título da página */
.subtitulo { color: var(--cor-texto-suave); font-size: 13px; margin-top: 4px; } /* linha por baixo do título */

/* ── Barra lateral ── */
.menu-lateral {
  width: var(--largura-da-barra);  /* largura fixa */
  flex-shrink: 0;                  /* não encolhe */
  background: var(--cor-barra);    /* fundo escuro */
  color: var(--cor-barra-texto);   /* texto claro */
  display: flex;                   /* blocos em coluna */
  flex-direction: column;          /* marca, navegação, rodapé */
  position: sticky;                /* fica fixa ao fazer scroll */
  top: 0;                          /* colada ao topo */
  height: 100vh;                   /* altura da janela */
}
.menu-marca {
  display: flex;                   /* logótipo e nome */
  align-items: center;             /* alinhados */
  gap: 10px;                       /* espaço */
  padding: 16px 18px 10px;         /* margem interior */
  color: #ffffff;                  /* nome a branco */
  font-weight: 700;                /* negrito */
  font-size: 18px;                 /* tamanho do nome */
  letter-spacing: .5px;            /* letras um pouco afastadas */
}
.menu-marca-icone {
  width: 34px;                     /* quadrado do logótipo */
  height: 34px;                    /* quadrado do logótipo */
  display: grid;                   /* centra a imagem */
  place-items: center;             /* ao centro */
  flex-shrink: 0;                  /* não encolhe */
}
.marca-imagem { width: 100%; height: 100%; object-fit: contain; display: block; } /* logótipo da CYBERSYS (PNG transparente) */
.menu-empresa { padding: 0 18px 12px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: #94a3b8; border-bottom: 1px solid rgba(255, 255, 255, .08); } /* nome do ginásio */
.menu-navegacao { flex: 1; overflow-y: auto; padding: 8px 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; } /* lista (scroll fino só se for preciso) */
.menu-ligacao {
  display: flex;                   /* ícone e texto */
  align-items: center;             /* alinhados */
  gap: 10px;                       /* espaço */
  padding: 8px 12px;               /* área de toque compacta */
  border-radius: 8px;              /* cantos */
  text-decoration: none;           /* sem sublinhado */
  color: var(--cor-barra-texto);   /* texto claro */
  font-size: 14px;                 /* tamanho */
  margin-bottom: 1px;              /* espaço entre ligações */
  border-left: 3px solid transparent; /* lugar da marca da página actual */
}
.menu-ligacao:hover { background: rgba(255, 255, 255, .06); color: #ffffff; } /* ao passar o rato */
.menu-ligacao.activa { background: rgba(245, 166, 35, .12); color: var(--cor-destaque); font-weight: 600; border-left-color: var(--cor-destaque); } /* página actual */
.menu-brevemente { opacity: .45; cursor: default; } /* módulo de uma fase seguinte */
.menu-bloqueado { width: 100%; border: 0; border-left: 3px solid transparent; background: transparent; font: inherit; text-align: left; opacity: .55; cursor: not-allowed; } /* pendência por resolver */
.menu-cadeado { font-size: 12px; margin-left: auto; } /* cadeado à direita */
.caixa-a-piscar { box-shadow: 0 0 0 3px var(--cor-destaque), var(--sombra); transition: box-shadow .3s; } /* "é aqui" */
.menu-brevemente:hover { background: transparent; color: var(--cor-barra-texto); } /* não reage ao rato */
.menu-ligacao-simbolo { width: 20px; text-align: center; font-size: 17px; flex-shrink: 0; } /* ícone à esquerda */
.menu-ligacao-texto { flex: 1; min-width: 0; } /* texto estica */
.menu-etiqueta { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #94a3b8; } /* "Fase 4" */
.menu-grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: #64748b; padding: 12px 12px 4px; font-weight: 700; } /* título de grupo */
.menu-rodape { display: flex; align-items: center; gap: 10px; padding: 12px 12px 14px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; } /* conta ligada numa linha */
.menu-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(245, 166, 35, .18); color: var(--cor-destaque); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; } /* iniciais */
.menu-rodape-identidade { flex: 1; min-width: 0; } /* nome e papel */
.menu-rodape-nome { color: #ffffff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* nome do utilizador */
.menu-rodape-papel { color: #94a3b8; font-size: 12px; } /* papel */
.menu-botao-icone { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: var(--cor-barra-texto); cursor: pointer; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; } /* senha e sair */
.menu-botao-icone:hover { background: rgba(255, 255, 255, .08); color: #ffffff; } /* ao passar o rato */
.menu-botao-icone.activo { background: rgba(245, 166, 35, .18); color: var(--cor-destaque); border-color: rgba(245, 166, 35, .4); } /* na página da conta */
a.menu-botao-icone { text-decoration: none; } /* ligação com cara de botão */
.menu-botao-sair:hover { color: #fca5a5; border-color: rgba(252, 165, 165, .4); } /* sair a vermelho */
.barra-movel { display: none; } /* barra de topo só em ecrãs estreitos */

/* ── Botões ── */
.botao {
  display: inline-flex;            /* ícone e texto */
  align-items: center;             /* alinhados */
  justify-content: center;         /* ao centro */
  gap: 6px;                        /* espaço */
  border: 1px solid var(--cor-borda); /* contorno */
  background: #ffffff;             /* fundo */
  color: var(--cor-texto);         /* texto */
  padding: 9px 16px;               /* área de toque */
  border-radius: 8px;              /* cantos */
  font: inherit;                   /* mesma letra */
  font-weight: 600;                /* meio negrito */
  cursor: pointer;                 /* mãozinha */
  min-height: 40px;                /* bom para o dedo */
}
.botao:hover { border-color: #cbd5e1; background: #f8fafc; } /* ao passar o rato */
.botao:disabled { opacity: .55; cursor: not-allowed; } /* desactivado */
.botao-principal { background: var(--cor-destaque); border-color: var(--cor-destaque); color: #1e293b; } /* acção principal */
.botao-principal:hover { background: var(--cor-destaque-escuro); border-color: var(--cor-destaque-escuro); } /* ao passar o rato */
.botao-perigo { color: var(--cor-perigo); border-color: #fecaca; } /* acção perigosa */
.botao-perigo:hover { background: #fef2f2; } /* ao passar o rato */
.botao-escuro { background: transparent; color: var(--cor-barra-texto); border-color: rgba(255, 255, 255, .15); } /* botão na barra escura */
.botao-escuro:hover { background: rgba(255, 255, 255, .06); color: #ffffff; } /* ao passar o rato */
.botao-pequeno { min-height: 32px; padding: 5px 10px; font-size: 13px; } /* botão de linha da tabela */

/* ── Cartões (caixas brancas) ── */
.caixa { background: var(--cor-cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; } /* caixa branca */
.caixa + .caixa { margin-top: 16px; } /* espaço entre caixas seguidas */
.caixa-titulo { font-size: 15px; font-weight: 700; margin-bottom: 12px; } /* título da caixa */

/* ── Formulários ── */
.grelha-do-formulario { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; } /* 3 colunas no computador */
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; } /* rótulo por cima */
.campo-largo { grid-column: 1 / -1; } /* ocupa a linha toda */
.campo-duplo { grid-column: span 2; } /* ocupa duas colunas */
.campo label { font-size: 13px; font-weight: 600; color: #334155; } /* rótulo */
.campo .obrigatorio { color: var(--cor-perigo); } /* asterisco */
.campo input, .campo select, .campo textarea, .entrada {
  width: 100%;                     /* largura toda */
  font: inherit;                   /* mesma letra */
  padding: 9px 11px;               /* margem interior */
  border: 1px solid #cbd5e1;       /* contorno */
  border-radius: 8px;              /* cantos */
  background: #ffffff;             /* fundo */
  color: var(--cor-texto);         /* texto */
  min-height: 40px;                /* bom para o dedo */
}
.campo textarea { min-height: 80px; resize: vertical; } /* caixa de texto */
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus { outline: 2px solid rgba(245, 166, 35, .45); border-color: var(--cor-destaque); } /* foco visível */
.ajuda-do-campo { font-size: 12px; color: var(--cor-texto-suave); } /* texto de ajuda */
.grupo-de-dias { display: flex; flex-wrap: wrap; gap: 6px; } /* caixas dos dias da semana */
.grupo-de-dias label { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; border: 1px solid var(--cor-borda); border-radius: 6px; padding: 5px 8px; cursor: pointer; } /* um dia */

/* ── Barra de filtros ── */
.barra-de-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } /* pesquisa e filtros */
.barra-de-filtros .entrada { flex: 1; min-width: 200px; } /* a pesquisa estica */
.barra-de-filtros select.entrada { flex: 0 0 170px; min-width: 0; } /* filtro de estado */

/* ── Tabelas ── */
.tabela-envolvente { overflow-x: auto; } /* tabela larga faz scroll só ela */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; } /* tabela */
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--cor-texto-suave); padding: 10px; border-bottom: 1px solid var(--cor-borda); white-space: nowrap; } /* cabeçalho */
.tabela td { padding: 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; } /* células */
.tabela tbody tr:hover { background: #f8fafc; } /* linha ao passar o rato */
.tabela .numero { text-align: right; white-space: nowrap; } /* valores à direita */
.tabela .accoes { text-align: right; white-space: nowrap; } /* botões à direita */
.tabela-vazia { text-align: center; color: var(--cor-texto-suave); padding: 28px 10px !important; } /* sem resultados */
.linha-clicavel { cursor: pointer; } /* linha que abre a ficha */
.celula-socio { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* nome do sócio numa linha só */
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--cor-texto-suave); flex-wrap: wrap; } /* páginas */

/* ── Etiquetas de estado ── */
.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } /* pastilha */
.etiqueta-activo { background: #dcfce7; color: #166534; }       /* verde */
.etiqueta-suspenso, .etiqueta-bloqueado { background: #fef3c7; color: #92400e; } /* âmbar */
.etiqueta-inactivo, .etiqueta-substituido { background: #f1f5f9; color: #475569; } /* cinzento */
.etiqueta-perdido, .etiqueta-anulada, .etiqueta-recusado { background: #fee2e2; color: #991b1b; } /* vermelho */
.etiqueta-valida, .etiqueta-activa, .etiqueta-permitido, .etiqueta-aberto, .etiqueta-paga { background: #dcfce7; color: #166534; } /* verde */
.etiqueta-fechado, .etiqueta-terminado { background: #f1f5f9; color: #475569; } /* cinzento */
.etiqueta-futuro { background: #dbeafe; color: #1e40af; } /* azul: ainda não começou */
.bi { line-height: 1; vertical-align: -0.125em; } /* ícones alinhados com o texto */
.botao .bi { font-size: 1.05em; } /* ícone dentro de botões */
.faixa { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--raio); margin-bottom: 16px; flex-wrap: wrap; } /* faixa de estado */
.faixa > .bi { font-size: 22px; } /* ícone grande */
.faixa-texto { flex: 1; min-width: 200px; } /* texto estica */
.faixa-aviso { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; } /* atenção */
.faixa-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; } /* tudo bem */
.lista-de-valores { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 0; font-size: 14px; } /* rótulo : valor */
.lista-de-valores dt { color: var(--cor-texto-suave); } /* rótulo */
.lista-de-valores dd { margin: 0; text-align: right; font-weight: 600; white-space: nowrap; } /* valor */
.resumo-do-fecho { background: #f8fafc; border-radius: 10px; padding: 12px 14px; align-self: end; } /* esperado e contado (caixa e fecho ao sair) */
.diferenca-falta { color: var(--cor-perigo) !important; } /* falta dinheiro */
.diferenca-sobra { color: var(--cor-aviso) !important; } /* sobra dinheiro */
.diferenca-certa { color: var(--cor-sucesso) !important; } /* bate certo */
.lista-de-valores .total { font-size: 16px; color: var(--cor-texto); border-top: 1px solid var(--cor-borda); padding-top: 6px; } /* linha do total */
.codigo { font-family: Consolas, "Courier New", monospace; font-size: 13px; white-space: nowrap; } /* códigos e números de cartão (nunca partem a meio) */

/* ── Modal (mínimo 70% da largura, regra do projecto) ── */
dialog.modal {
  width: max(70vw, min(94vw, 720px)); /* pelo menos 70% do ecrã; no telemóvel 94% */
  max-width: 1100px;               /* não fica gigante em ecrãs enormes */
  border: none;                    /* sem contorno do browser */
  border-radius: 14px;             /* cantos */
  padding: 0;                      /* o interior trata do espaço */
  box-shadow: 0 20px 60px rgba(15, 23, 42, .35); /* sombra forte */
  color: var(--cor-texto);         /* texto */
}
dialog.modal::backdrop { background: rgba(15, 23, 42, .55); } /* fundo escurecido */
.modal-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--cor-borda); } /* topo */
.modal-cabecalho h2 { font-size: 18px; } /* título */
.modal-fechar { border: none; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--cor-texto-suave); padding: 0 4px; } /* × */
.modal-corpo { padding: 18px 20px; max-height: calc(100vh - 190px); overflow-y: auto; } /* conteúdo com scroll */
.modal-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--cor-borda); flex-wrap: wrap; } /* botões */
.mensagem-de-erro { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 8px; padding: 9px 12px; font-size: 14px; margin-bottom: 12px; } /* erro dentro do modal */

/* ── Avisos (toasts) ── */
.zona-de-avisos { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; max-width: calc(100vw - 32px); } /* canto inferior direito */
.aviso { background: #1e293b; color: #ffffff; padding: 11px 16px; border-radius: 8px; box-shadow: var(--sombra); font-size: 14px; border-left: 4px solid var(--cor-sucesso); } /* aviso de sucesso */
.aviso-erro { border-left-color: var(--cor-perigo); } /* aviso de erro */

/* ── Telemóvel e tablet (até 820 px): barra lateral passa a gaveta ── */
@media (max-width: 820px) {
  .disposicao { flex-direction: column; } /* tudo em coluna */
  .barra-movel {
    display: flex;                 /* aparece a barra de topo */
    align-items: center;           /* alinhada */
    justify-content: space-between; /* marca à esquerda, botão à direita */
    background: var(--cor-barra);  /* escura */
    color: #ffffff;                /* texto branco */
    padding: 10px 16px;            /* margem interior */
    position: sticky;              /* fica no topo */
    top: 0;                        /* colada ao topo */
    z-index: 50;                   /* por cima do conteúdo */
  }
  .barra-movel .menu-marca { padding: 0; font-size: 16px; } /* marca mais pequena */
  .botao-do-menu { background: transparent; border: 1px solid rgba(255, 255, 255, .2); color: #ffffff; border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; min-height: 38px; } /* ☰ */
  .menu-lateral { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; width: 270px; } /* gaveta escondida */
  .menu-lateral.aberto { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .4); } /* gaveta aberta */
  .fundo-do-menu { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 55; } /* escurece o resto */
  .area-principal { padding: 16px; } /* menos margem */
  .grelha-do-formulario { grid-template-columns: repeat(2, 1fr); } /* 2 colunas no tablet */
}

/* ── Telemóvel (até 520 px) ── */
@media (max-width: 520px) {
  .grelha-do-formulario { grid-template-columns: 1fr; } /* 1 coluna */
  .campo-duplo { grid-column: 1 / -1; } /* linha toda */
  .cabecalho-da-pagina h1 { font-size: 19px; } /* título mais pequeno */
  .barra-de-filtros select.entrada { flex: 1 1 100%; } /* filtro na linha toda */
  .modal-rodape .botao { flex: 1; } /* botões do modal a toda a largura */
  .esconder-no-telemovel { display: none; } /* colunas menos importantes */
  .celula-socio { max-width: 150px; } /* nome mais curto */
  .texto-do-botao { display: none; } /* botões das linhas só com o ícone */
}

/* ── Impressão directa (public/js/comum/impressao.js) ── */
.iframe-de-impressao { position: fixed; left: -10000px; top: 0; width: 210mm; height: 297mm; border: 0; } /* fora do ecrã, mas com tamanho de papel (escondido com display:none não imprime) */
.a-preparar { cursor: progress !important; opacity: .6; } /* botão enquanto prepara a impressão */
.accoes-do-cabecalho { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* botões ao lado do título */
.etiqueta-por_pagar, .etiqueta-pendente { background: #fef3c7; color: #92400e; } /* âmbar: fatura por pagar, plano pendente */