/* ============================================================
   BASE — variáveis, ecrãs, home, tiles, botões, scanner do aluno.
   Carrega PRIMEIRO: define as variáveis que os outros usam.
   ============================================================ */
:root{
  --cor-primaria:   #0B4EA2;
  --cor-secundaria: #F7B500;
  --cor-terciaria:  #1E7F4F;
  --raio: 26px;
  --alvo-min: 72px;
}
[data-bs-theme="light"] body{ background:#F2F4F8; }
[data-bs-theme="dark"]  body{ background:#0D1524; }

html,body{height:100%;overflow:hidden}
body{
  user-select:none; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  font-size:1.2rem;
}

.ecra{position:fixed;inset:0;display:none;flex-direction:column}

/* Utilitária: o JS usa .escondida em 35 sítios para mostrar/ocultar blocos.
   Só existiam regras prefixadas (.preinsc-passo.escondida, .ctt-logo.escondida...),
   por isso qualquer outro elemento com esta classe ficava SEMPRE visível. */
.escondida{ display:none !important; }
.ecra.ativo{display:flex;animation:entrar .25s ease}
@keyframes entrar{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ecra.ativo{animation:none}}

.btn{min-height:var(--alvo-min)}
.btn-primaria{background:var(--cor-primaria);border-color:var(--cor-primaria);color:#fff}
.btn-primaria:active,.btn-primaria:hover{
  background: color-mix(in srgb, var(--cor-primaria) 85%, black);
  border-color: color-mix(in srgb, var(--cor-primaria) 85%, black);
  color:#fff;
}

.logo{
  width:150px;height:150px;border-radius:36px;
  background:var(--cor-primaria);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;font-weight:800;
}
/* Logótipo em IMAGEM: a caixa deixa de ser quadrada.
   O quadrado de 150px foi feito para as letras "EC". Um logótipo largo
   — o do produto é 445x179 — dentro dele só aparecia com 60px de altura,
   porque o background-size:contain encolhe até caber na largura.
   Com 400x160 a imagem sai a ~398x160: mais do dobro do que se via.
   PARA AFINAR: mexer só na altura; a largura é o teto, não a medida. */
.logo.tem-imagem{
  width:400px; height:160px;
}
#btnIniciar{font-size:1.7rem;font-weight:800;min-height:110px;border-radius:var(--raio);padding:1rem 4.5rem}
.pulso{animation:pulso 2.4s ease-in-out infinite}
@keyframes pulso{
  0%,100%{box-shadow:0 8px 24px color-mix(in srgb, var(--cor-primaria) 25%, transparent), 0 0 0 0 color-mix(in srgb, var(--cor-primaria) 35%, transparent)}
  50%    {box-shadow:0 8px 24px color-mix(in srgb, var(--cor-primaria) 25%, transparent), 0 0 0 22px transparent}
}
@media (prefers-reduced-motion:reduce){.pulso{animation:none}}

#gridHome{flex:1;display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.tile{
  border-radius:var(--raio);
  background:var(--cor-primaria);color:#fff;border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  font-weight:800;text-align:center;padding:1.5rem;
  transition:transform .12s;
  position:relative;
  overflow:hidden;
}
.tile:active{transform:scale(.975)}
.tile i{font-size:3.6rem;line-height:1}
.tile span{font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.15}
.tile .subtitulo-seccao{
  font-size:clamp(.85rem,1.3vw,1.15rem); font-weight:500;
  opacity:.75; margin-top:.05rem; line-height:1.15;
}
.tile .bi-lock-fill{font-size:1.4rem;position:absolute;top:1.2rem;right:1.4rem;opacity:.75}

.tile::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:var(--cor-primaria);
  background-image:linear-gradient(color-mix(in srgb, var(--cor-primaria) 80%, transparent), color-mix(in srgb, var(--cor-primaria) 80%, transparent)), var(--img, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-blend-mode:normal, luminosity;
  z-index:0;
  opacity:0;
  animation:tileFade .6s ease forwards;
}
.tile > *{
  position:relative;
  z-index:1;
  color:#fff;
}

@keyframes tileFade{ to{ opacity:1; } }

.tile:nth-child(1)::before{ animation-delay:.05s }
.tile:nth-child(2)::before{ animation-delay:.10s }
.tile:nth-child(3)::before{ animation-delay:.15s }
.tile:nth-child(4)::before{ animation-delay:.20s }
.tile:nth-child(5)::before{ animation-delay:.25s }
.tile:nth-child(6)::before{ animation-delay:.30s }
.tile:nth-child(7)::before{ animation-delay:.35s }
.tile:nth-child(8)::before{ animation-delay:.40s }
.tile:nth-child(9)::before{ animation-delay:.45s }

.dropdown-menu{font-size:1.15rem;max-height:60vh;overflow-y:auto}
.dropdown-item{min-height:60px;display:flex;align-items:center;gap:.6rem}

/* Scanner de QR-Code do aluno */
.qr-scanner-container{
  position:relative;
  width:100%; aspect-ratio:1/1;
  max-width:340px; margin:0 auto;
  background:#000; border-radius:1rem;
  overflow:hidden;
}
#qrVideo{
  width:100%; height:100%;
  object-fit:cover;
  transform:scaleX(-1); /* espelhado para câmara frontal (natural) */
}
.qr-scanner-frame{
  position:absolute; inset:15%;
  border:3px solid var(--cor-secundaria);
  border-radius:.8rem;
  pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.35);
}
#qrStatus{ min-height:1.5em; }
#qrStatus.erro{ color:#c00; font-weight:600; }
#qrStatus.sucesso{ color:#080; font-weight:600; }

/* Os campos do login são .fw-bold e grandes, e o placeholder herdava isso:
   o "+351 912 345 678" parecia um número JÁ ESCRITO, não um exemplo.
   Aqui volta a peso normal e esbatido, como deve ser uma sugestão. */
#txtTelemovel::placeholder,
#txtCodigo::placeholder{
  font-weight:400;
  opacity:.38;
}

#relogio{
  font-family:"Datatype", monospace;
  font-optical-sizing:auto;
  font-weight:400;
  font-variation-settings:"wdth" 200;
  font-size:50px !important;
}

#diag{
  position:fixed;bottom:10px;left:10px;right:10px;
  background:#b00020;color:#fff;padding:.75rem 1rem;border-radius:12px;
  font-size:.95rem;z-index:9999;display:none;
}
#diag.mostrar{display:block}

/* Botões redondos partilhados (usados na home e no ecrã de páginas) */
.btn-redondo{
  width:2.8vw; height:2.8vw;
  padding:0; border:none;
  border-radius:50%;
  background:var(--cor-primaria); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2vw;
  box-shadow:0 0.15vw 0.4vw rgba(0,0,0,.15);
  transition:transform .1s, filter .15s;
}
.btn-redondo:hover{ filter:brightness(1.1); color:#fff; }
.btn-redondo:active{ transform:scale(.95); }
[data-bs-theme="dark"] .btn-redondo{ background:#93b9ff; color:#0e1420; }

/* Barra branca do topo (usada na home) */
#home .barra-branca{
  background:#fff;
  height:4vw;
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex; align-items:center;
  padding:0 1.2vw;
  position:relative;
}
[data-bs-theme="dark"] #home .barra-branca{
  background:#141c2d; border-bottom-color:rgba(255,255,255,.08);
}
#home .flutuantes-esq-inline{
  display:flex; gap:.5vw;
  z-index:2;
}
#home .titulo-barra{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:'Barlow Condensed','Oswald','Roboto Condensed','Montserrat',sans-serif;
  font-size:1.6vw; font-weight:700;
  color:var(--cor-primaria);
  text-transform:uppercase; letter-spacing:.05em;
}
[data-bs-theme="dark"] #home .titulo-barra{ color:#93b9ff; }

/* Flutuantes: canto superior esquerdo (páginas) */
#paginas .flutuantes-esq{
  position:absolute; top:0.8vw; left:1.2vw;
  display:flex; gap:.5vw; z-index:20;
}

/* Tabs das famílias — centradas, com margem à esquerda para os flutuantes */
/* Imagem de fundo da família: imgs/paginas/<slug>.jpg, se existir.
   Camada própria para poder entrar com fade (background-image não transiciona)
   e bem esbatida, para o texto continuar a ler-se. */
#paginas::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--pg-bg, none);
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .45s ease;
}
#paginas.bg-familia::before{ opacity:.13; }
[data-bs-theme="dark"] #paginas.bg-familia::before{ opacity:.09; }
#paginas .tabs, #paginas .corpo{ position:relative; z-index:1; }
/* Com fundo, a barra deixa-o passar um pouco — senão via-se um corte branco */
#paginas.bg-familia .tabs{ background:rgba(255,255,255,.80); }
[data-bs-theme="dark"] #paginas.bg-familia .tabs{ background:rgba(20,28,45,.80); }

#paginas .tabs{
  background:#fff;
  display:flex; justify-content:center; gap:0.6vw;
  border-bottom:1px solid rgba(0,0,0,.08);
  overflow-x:auto; scrollbar-width:none;
  padding:0 1vw 0 8vw;
}