/* Portal ihc.webtekpc.pt — as mesmas cores do curso: azul da hematoxilina e castanho do DAB. */
:root{
  --bg:#F2F3F7; --surface:#FFFFFF; --sunk:#E9EBF2; --ink:#1D2133; --muted:#596079; --line:#D8DBE6;
  --hema:#3D48A3; --hema-soft:#E3E6F7; --dab:#8A5728; --dab-soft:#F3E6D8;
  --good:#2D7A4C; --good-soft:#E1F2E7; --bad:#B0281F; --bad-soft:#FBE5E3; --warn:#9A6400; --warn-soft:#FBEFD5;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11131B; --surface:#1A1D28; --sunk:#151823; --ink:#E7E8F0; --muted:#A2A7BC; --line:#2C3042;
  --hema:#9EA8F2; --hema-soft:#232847; --dab:#D9A26C; --dab-soft:#33271B;
  --good:#6FCB90; --good-soft:#18301F; --bad:#F28A80; --bad-soft:#3A1C1A; --warn:#E8B34E; --warn-soft:#352914; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11131B; --surface:#1A1D28; --sunk:#151823; --ink:#E7E8F0; --muted:#A2A7BC; --line:#2C3042;
  --hema:#9EA8F2; --hema-soft:#232847; --dab:#D9A26C; --dab-soft:#33271B;
  --good:#6FCB90; --good-soft:#18301F; --bad:#F28A80; --bad-soft:#3A1C1A; --warn:#E8B34E; --warn-soft:#352914; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55}
a{color:var(--hema)}
h1,h2{font-family:var(--f-display);line-height:1.15;margin:0;text-wrap:balance}
button,input{font:inherit;color:inherit}

/* Topo */
.topo{background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);position:sticky;top:0;z-index:5}
.topo-in{max-width:980px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;justify-content:space-between}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.marca span{font-family:var(--f-display);font-weight:800;font-size:1.15rem;display:flex;flex-direction:column;line-height:1}
.marca small{font-family:var(--f-body);font-weight:700;font-size:.62rem;letter-spacing:.14em;color:var(--muted);margin-top:3px}
.topo-nav{display:flex;align-items:center;gap:14px;min-width:0}
.topo-nav a{font-weight:700;text-decoration:none}
.topo-nav form{margin:0}
.quem{color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26vw}
.sair{background:none;border:1px solid var(--line);border-radius:8px;padding:5px 11px;cursor:pointer;font-size:.88rem}
.sair:hover{border-color:var(--muted)}

.pagina{flex:1;width:100%;max-width:980px;margin:0 auto;padding:28px 16px 40px}
.rodape{text-align:center;color:var(--muted);font-size:.78rem;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))}

/* Entrar */
.entrar{max-width:380px;margin:8vh auto 0;text-align:center}
.entrar-icone{border-radius:18px;margin-bottom:14px}
.entrar h1{font-size:2rem;margin-bottom:8px}
.entrar p{color:var(--muted);margin:0 0 24px}
.entrar .entrar-nota{font-size:.86rem;margin:14px 0 0}
.entrar-dev{display:block;margin-top:22px;font-size:.85rem;color:var(--muted)}

/* Início */
.ola{margin-bottom:22px}
.ola h1{font-size:clamp(1.7rem,4vw,2.3rem)}
.ola p{color:var(--muted);margin:6px 0 0}
.modulos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.modulo{display:flex;gap:18px;align-items:center;padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.modulo:hover{border-color:var(--hema);transform:translateY(-2px)}
.modulo-arte{flex:none;width:92px;height:92px;border-radius:14px;display:grid;place-items:center;background:var(--hema-soft)}
.modulo-arte svg{width:78px;height:78px}
.a-membrana{fill:none;stroke:var(--dab);stroke-width:3}
.a-cito{fill:var(--surface)}
.a-nucleo{fill:var(--hema)}
.a-dab{fill:var(--dab)}
.modulo-texto{display:flex;flex-direction:column;gap:4px;min-width:0}
.modulo-texto strong{font-family:var(--f-display);font-size:1.2rem;line-height:1.2}
.modulo-texto span{color:var(--muted);font-size:.93rem}
.modulo-texto small{color:var(--muted);font-size:.8rem}
.modulo-prog{display:block;height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-top:6px}
.modulo-prog i{display:block;height:100%;background:var(--dab);border-radius:3px}

.espera{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:620px}
.espera h2{font-size:1.3rem;margin-bottom:8px}
.espera p{margin:0 0 10px}
.espera-email{color:var(--muted);font-size:.9rem}

/* Acessos */
.aviso{background:var(--hema-soft);border-radius:10px;padding:10px 14px;margin:0 0 16px}
.pilula{display:inline-block;font:700 .72rem var(--f-body);padding:2px 8px;border-radius:99px;background:var(--hema-soft);color:var(--hema);vertical-align:2px;margin-left:6px}
.pilula-pendente{background:var(--warn-soft);color:var(--warn)}
.pilula-bloqueado{background:var(--bad-soft);color:var(--bad)}
.bloco{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:16px}
.bloco summary{cursor:pointer;font-weight:700}
.form-acrescentar{display:grid;gap:10px;margin-top:12px;max-width:460px}
.form-acrescentar label{display:grid;gap:3px;font-size:.88rem;color:var(--muted)}
.form-acrescentar fieldset{border:0;padding:0;margin:0;display:grid;gap:4px}
.form-acrescentar legend{font-size:.88rem;color:var(--muted);margin-bottom:4px}
input[type=email],input[type=text]{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);min-width:0}
.caixa{display:flex !important;align-items:center;gap:7px;color:var(--ink) !important}
.nota{font-size:.82rem;color:var(--muted);margin:0}
.botao{justify-self:start;background:var(--hema);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer}
.botao-leve{background:var(--sunk);color:var(--ink)}
.botao-perigo{background:var(--bad);color:#fff}

.utilizadores{display:grid;gap:10px}
.pessoa{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.pessoa.estado-pendente{border-color:var(--warn)}
.pessoa.estado-bloqueado{opacity:.7}
.pessoa-sub{font-size:.84rem;color:var(--muted);overflow-wrap:anywhere}
.pessoa-modulos{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.pessoa-modulos form{margin:0}
.interruptor{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg);border-radius:99px;padding:5px 12px 5px 6px;cursor:pointer;font-size:.88rem}
.interruptor i{width:30px;height:18px;border-radius:9px;background:var(--line);position:relative;flex:none;transition:background .15s}
.interruptor i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.interruptor.ligado{border-color:var(--good);background:var(--good-soft)}
.interruptor.ligado i{background:var(--good)}
.interruptor.ligado i::after{left:14px}
.interruptor:disabled{cursor:default;opacity:.75}
.pessoa-prog{font-size:.85rem;color:var(--muted)}
.pessoa-mais{margin-top:8px}
.pessoa-mais summary{cursor:pointer;font-size:.85rem;color:var(--muted)}
.form-notas{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin:10px 0}
.form-notas label{display:grid;gap:3px;font-size:.84rem;color:var(--muted);flex:1;min-width:200px}
.pessoa-acoes{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.pessoa-acoes form{margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.form-apagar .caixa{font-size:.84rem}

@media (max-width:560px){
  .modulo{flex-direction:column;align-items:flex-start}
  .quem{display:none}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}

/* Convite a instalar a PWA (pwa.js) */
.instalar{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:18px}
.instalar[hidden]{display:none}
.instalar img{border-radius:10px;flex:none}
.instalar p{margin:0;flex:1;font-size:.92rem}
.instalar-fechar{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;padding:6px}

/* Língua (PT | EN) */
.lingua{font:700 .78rem var(--f-body);letter-spacing:.06em;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:4px 8px;color:var(--ink)}
.lingua:hover{border-color:var(--hema)}
.lingua-solta{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px}