/* ============================================================
   AUDIOLOGIC — design por área (v2.11.1)
   <html data-area="…"> é definido em src/ui/area.js:
     site          site público, entrar, registo, ecrãs de estado
     patient       paciente e responsável (inclui o jogo)
     professional  área do profissional — "Clínico editorial"
     admin         painel do administrador — "O som como identidade"
   Cada área redefine os tokens de app.css e ajusta os componentes
   partilhados. Telemóvel / tablet / computador: ver o fim do ficheiro.
   ============================================================ */

/* ---------- comum ---------- */
:root{
  --font-body:'Figtree',system-ui,sans-serif;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --bg:#F6F8FB;
  --linha:#E3E8F1;
  --radius:22px;
  --shadow-sm:0 1px 2px rgba(22,33,90,.06);
  --focus:#0B7F74;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
body{font-family:var(--font-body);}
h1,h2,h3,h4{font-family:var(--font-display);}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
.btn,.side-link,.bn-link,.admin-tab,.opt-btn,.filter-btn{min-height:44px;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

/* ============================================================
   PACIENTE (e site público) — ecrãs "Paciente — Hoje" / "Jogo em curso"
   ============================================================ */
html[data-area="patient"] .card,
html[data-area="site"] .card{border:1px solid var(--linha);box-shadow:var(--shadow-sm);}
html[data-area="patient"] .sidebar{background:#16215A;}
html[data-area="patient"] .side-link{color:#D3DAF0;font-weight:500;font-size:15px;}
html[data-area="patient"] .side-link.active{background:#fff;color:#16215A;font-weight:600;}
html[data-area="patient"] .side-link:hover:not(.active){background:rgba(255,255,255,.08);color:#fff;}
html[data-area="patient"] .view-head h1{font-size:34px;letter-spacing:-.02em;color:#16215A;}
html[data-area="patient"] .today-card{background:linear-gradient(120deg,#16215A 0%,#1F3B8A 65%,#128C82 100%);border:none;border-radius:26px;padding:28px;}
html[data-area="patient"] .today-card .btn-turquesa{border-radius:14px;}
html[data-area="patient"] .stat-box{border-radius:18px;}
html[data-area="patient"] .stat-box-streak{background:#fff;border:1px solid var(--linha);}
html[data-area="patient"] .stat-box-streak .num::after{content:'';}
html[data-area="patient"] .stat-box-streak .num{color:#C2410C;}
html[data-area="patient"] .bar-track{background:#EEF2F8;height:10px;}
html[data-area="patient"] .bar-fill{background:#0B9C8F;}
html[data-area="patient"] .btn{border-radius:14px;}
html[data-area="patient"] .play-card{border-radius:22px;}

/* jogo — v2.17.0: fundo neutro e opaco (cinza-claro liso), palco branco opaco ao centro.
   Os cenários e imagens pedagógicas dentro do palco mantêm-se; só o fundo da interface muda. */
html[data-area="patient"][data-view="jogo"] .main-area,
html[data-area="admin"][data-view="jogo"] .main-area,
html[data-area="professional"][data-view="jogo"] .main-area{background:#EEF1F5;min-height:100vh;}
html[data-view="jogo"] #view-jogo{max-width:1200px;margin:0 auto;}
html[data-view="jogo"] .game-shell{max-width:760px;}
html[data-view="jogo"] .game-header{color:#16215A;}
html[data-view="jogo"] .level-pill{background:#DDF3F0;color:#0B6259;font-family:var(--font-body);}
html[data-view="jogo"] .round-progress{background:#D9DEE8;height:8px;}
html[data-view="jogo"] .round-progress-fill{background:#1AA99B;}
html[data-view="jogo"] #game-training-note{color:#5B6690!important;}
html[data-view="jogo"] .game-stage{border-radius:30px;background:#FFFFFF;border:1px solid #E3E8F1;box-shadow:0 18px 40px -30px rgba(22,33,90,.35);}
html[data-view="jogo"] .game-stage.has-scene .stage-content{background:#FFFFFF;border-radius:26px;margin:22px;box-shadow:0 1px 0 rgba(22,33,90,.06);}
html[data-view="jogo"] .opt-btn{border-radius:18px;min-height:56px;min-width:64px;font-family:var(--font-body);font-size:17px;}
html[data-view="jogo"] .game-replay-bar{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:14px 0 4px;}
html[data-view="jogo"] .game-replay-bar.hidden{display:none;}
html[data-view="jogo"] .game-replay-bar .btn{min-height:48px;}
html[data-view="jogo"] .game-replay-status{flex-basis:100%;text-align:center;font-size:13px;color:#3E4A72;}
html[data-view="jogo"] .game-replay-status:empty{display:none;}
#game-stage-wrap.replay-after-wrong button[id$="-replay"],#game-stage-wrap.replay-after-wrong #loc-replay-btn{display:none!important;}

/* site público: mesma família visual do paciente */
html[data-area="site"] .btn{border-radius:14px;}
html[data-area="site"] #public-nav{background:rgba(246,248,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha);}
#public-nav .bar{padding:14px max(16px,env(safe-area-inset-left,0px));}
@media (min-width:921px){#public-nav .bar{padding:16px 24px;}}
html[data-area="site"] .auth-card{border:1px solid var(--linha);box-shadow:0 30px 60px -36px rgba(22,33,90,.35);}

/* ============================================================
   PROFISSIONAL — "Clínico editorial"
   ============================================================ */
html[data-area="professional"]{
  --font-display:'Newsreader',Georgia,serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;
  --bg:#FBFCFD; --bg-card:#FFFFFF; --linha:#E2E7EE;
  --ink:#16215A; --ink-soft:#3E4A72; --ink-faint:#5B6690;
  --radius:4px; --radius-sm:6px; --shadow:none; --shadow-sm:none;
  --focus:#0B7F74;
}
html[data-area="professional"] body{background:#FBFCFD;}
html[data-area="professional"] h1,html[data-area="professional"] h2,html[data-area="professional"] h3{font-weight:400;letter-spacing:-.01em;}
html[data-area="professional"] h4{font-family:var(--font-body);font-weight:600;}
html[data-area="professional"] .card{border:1px solid #DCE2EA;box-shadow:none;border-radius:4px;}
html[data-area="professional"] .btn{border-radius:8px;font-weight:600;}
html[data-area="professional"] .btn-primary{background:#16215A;}
html[data-area="professional"] .btn-ghost{border:1px solid #C9D1DD;background:#fff;}
html[data-area="professional"] .btn-turquesa{background:#0B7F74;color:#fff;}
html[data-area="professional"] .pill{border-radius:999px;background:#EEF1F5;color:#3E4A72;}
html[data-area="professional"] .view{max-width:1280px;margin:0 auto;}
html[data-area="professional"] .view-head{border-bottom:1px solid #E2E7EE;padding-bottom:22px;}
html[data-area="professional"] .view-head h1{font-size:52px;line-height:1;}
html[data-area="professional"] .admin-table th{color:#5B6690;text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;border-bottom:1px solid #16215A;}
html[data-area="professional"] .admin-table td{border-bottom:1px solid #EEF1F5;}
html[data-area="professional"] .admin-tabs{border-bottom:1px solid #E2E7EE;}
html[data-area="professional"] .admin-tab.active{color:#16215A;border-color:#16215A;}
html[data-area="professional"] .field input,html[data-area="professional"] .field select{border:1px solid #C9D1DD;border-radius:6px;}
html[data-area="professional"] .stat-box .num,html[data-area="professional"] .kpi-card .num{font-family:var(--font-display);font-weight:400;font-size:40px;}
html[data-area="professional"] .warn-box{border-radius:4px;}

/* menu em cima (computador e tablet deitado); em ecrãs pequenos fica a barra de baixo */
@media (min-width:921px){
  html[data-area="professional"] #app-shell.active{flex-direction:column;}
  html[data-area="professional"] .sidebar{width:100%;height:auto;position:sticky;top:0;z-index:20;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 26px;background:#fff;color:#16215A;border-bottom:1px solid #E2E7EE;padding:12px max(24px,calc((100% - 1232px)/2));overflow:visible;}
  html[data-area="professional"] .sidebar .logo{color:#16215A;margin:0 18px 0 0;padding:0;font-family:'Newsreader',serif;font-weight:500;font-size:24px;}
  html[data-area="professional"] .sidebar .logo .wave{display:none;}
  html[data-area="professional"] .side-group-label{display:none;}
  html[data-area="professional"] .side-link{width:auto;margin:0;padding:10px 0;border-radius:0;color:#3E4A72;font-weight:500;font-size:15px;border-bottom:2px solid transparent;background:none;}
  html[data-area="professional"] .side-link .ic{display:none;}
  html[data-area="professional"] .side-link.active,html[data-area="professional"] .side-link:hover{background:none;color:#16215A;border-bottom-color:#16215A;}
  html[data-area="professional"] .side-foot{margin:0 0 0 auto;padding:0;border:none;display:flex;align-items:center;gap:14px;}
  html[data-area="professional"] .side-foot > *{margin:0;}
  html[data-area="professional"] .side-user{padding:0;}
  html[data-area="professional"] .side-user .nm{color:#16215A;}
  html[data-area="professional"] .side-user .rl{color:#5B6690;}
  html[data-area="professional"] .avatar{background:#DFF3F0;color:#0B5C53;}
  html[data-area="professional"] .sidebar .app-version{color:#5B6690;}
  html[data-area="professional"] .main-area{padding-top:8px;}
}
html[data-area="professional"] .bottom-nav{background:#fff;border-top:1px solid #E2E7EE;}
html[data-area="professional"] .bn-link.active{color:#16215A;}

/* ============================================================
   ADMIN — "O som como identidade"
   ============================================================ */
html[data-area="admin"]{
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Atkinson Hyperlegible',system-ui,sans-serif;
  --bg:#0D1650; --bg-card:#131D5E; --linha:#26337A;
  --ink:#E8ECFF; --ink-soft:#B8C2EE; --ink-faint:#8E9AD6;
  /* !important: applyBranding() escreve --azul-profundo inline no <html> */
  --azul-profundo:#FFFFFF !important; --azul-profundo-2:#E8ECFF;
  --radius:18px; --radius-sm:12px; --shadow:none; --shadow-sm:none;
  --focus:#7FF0E4;
  color-scheme:dark;
}
html[data-area="admin"] body{background:#0D1650;color:#E8ECFF;}
html[data-area="admin"] a{color:#7FF0E4;}
html[data-area="admin"] h1,html[data-area="admin"] h2,html[data-area="admin"] h3{color:#fff;letter-spacing:-.03em;}
html[data-area="admin"] .view-head h1,html[data-area="admin"] #admin-section-title{font-weight:800;font-size:clamp(36px,4.4vw,60px);line-height:.95;letter-spacing:-.04em;}
html[data-area="admin"] .sidebar{background:#080E36;border-right:1px solid rgba(207,247,242,.14);}
html[data-area="admin"] .side-group-label{color:#8E9AD6;}
html[data-area="admin"] .side-link{color:#C7CEF2;font-weight:400;}
html[data-area="admin"] .side-link.active{background:#2FD4C4;color:#08103A;font-weight:700;}
html[data-area="admin"] .side-link:hover:not(.active){background:rgba(255,255,255,.06);color:#fff;}
html[data-area="admin"] .card{background:rgba(255,255,255,.05);border:1px solid rgba(207,247,242,.16);color:#E8ECFF;}
html[data-area="admin"] .btn-primary{background:#2FD4C4;color:#08103A;}
html[data-area="admin"] .btn-primary:hover{background:#7FF0E4;color:#08103A;}
html[data-area="admin"] .btn-ghost{color:#fff;border:2px solid rgba(207,247,242,.35);background:transparent;}
html[data-area="admin"] .btn-ghost:hover{border-color:#7FF0E4;}
html[data-area="admin"] .btn-turquesa{background:#2FD4C4;color:#08103A;}
html[data-area="admin"] .pill{background:rgba(255,255,255,.08);color:#E8ECFF;}
html[data-area="admin"] .tag-turquesa{background:rgba(47,212,196,.18);color:#7FF0E4;}
html[data-area="admin"] .tag-lilas{background:rgba(185,174,255,.18);color:#D9D2FF;}
html[data-area="admin"] .tag-amarelo{background:rgba(255,210,90,.18);color:#FFE1B0;}
html[data-area="admin"] .warn-box{background:rgba(255,197,107,.12);border-color:#FFC56B;color:#FFE1B0;}
html[data-area="admin"] .admin-table th{color:#8E9AD6;border-bottom-color:#26337A;}
html[data-area="admin"] .admin-table td{border-bottom-color:#1E2A70;}
html[data-area="admin"] .admin-table tbody tr:hover{background:rgba(255,255,255,.03);}
html[data-area="admin"] .admin-tab{color:#B8C2EE;}
html[data-area="admin"] .admin-tab.active{color:#fff;border-color:#2FD4C4;}
html[data-area="admin"] input,html[data-area="admin"] select,html[data-area="admin"] textarea{background:#0A1240;color:#fff;border:1px solid #3A4A9A;}
html[data-area="admin"] select,html[data-area="admin"] input:not([type=checkbox]):not([type=radio]):not([type=range]){min-height:44px;padding:9px 12px;border-radius:10px;font:inherit;font-size:14px;}
html[data-area="admin"] input::placeholder,html[data-area="admin"] textarea::placeholder{color:#8E9AD6;}
html[data-area="admin"] .field input,html[data-area="admin"] .field select,html[data-area="admin"] .list-filters input,html[data-area="admin"] .list-filters select{background:#0A1240;color:#fff;border-color:#3A4A9A;}
html[data-area="admin"] .choice-check{color:#E8ECFF;}
html[data-area="admin"] .opt-btn{background:#0A1240;color:#fff;}
html[data-area="admin"] .kpi-card .num,html[data-area="admin"] .stat-box .num{color:#fff;font-family:var(--font-display);font-weight:800;}
html[data-area="admin"] .bar-track{background:#1E2A70;}
html[data-area="admin"] .comm-badge{color:#08103A;background:#FFC56B;}
html[data-area="admin"] .aud-diff{background:#0A1240;}
html[data-area="admin"] .aud-before{color:#FF9EB3;}
html[data-area="admin"] .aud-after{color:#7FF0E4;}
html[data-area="admin"] .aud-role-admin{background:#2FD4C4;color:#08103A;}
html[data-area="admin"] .aud-role-professional{background:#B9AEFF;color:#120A40;}
html[data-area="admin"] .aud-role-guardian{background:#D9D2FF;color:#120A40;}
html[data-area="admin"] .aud-role-patient{background:#FFD25A;color:#2A1E00;}
html[data-area="admin"] .aud-role-system{background:#3A4A9A;color:#E8ECFF;}
html[data-area="admin"] .backup-status-ok{color:#7FF0E4;}
html[data-area="admin"] .backup-status-bad{color:#FF9EB3;}
html[data-area="admin"] .topbar-mobile{background:#080E36;border-color:rgba(207,247,242,.14);color:#fff;}
html[data-area="admin"] .topbar-mobile .logo{color:#fff;}
html[data-area="admin"] .topbar-mobile .btn-ghost{color:#fff;}
/* v2.12.1 — separadores/filtros não selecionados: o fundo branco da base com o texto claro do Admin ficava invisível */
html[data-area="admin"] .filter-btn{background:rgba(255,255,255,.06);color:#E8ECFF;border-color:rgba(207,247,242,.3);}
html[data-area="admin"] .filter-btn:hover:not(.active){background:rgba(255,255,255,.12);border-color:#7FF0E4;color:#fff;}
html[data-area="admin"] .au-chip{background:rgba(255,255,255,.06);color:#C7CEF2;border-color:rgba(207,247,242,.3);}
html[data-area="admin"] .au-chip b{color:#fff;}
html[data-area="admin"] .au-chip.ok b{color:#7FF0E4;}
html[data-area="admin"] .au-chip.bad b{color:#FF9EB3;}
html[data-area="admin"] .au-chip.active{border-color:#2FD4C4;box-shadow:0 0 0 2px rgba(47,212,196,.3);}
/* componentes que usam --azul-profundo como fundo (no Admin o token é branco) */
html[data-area="admin"] .filter-btn.active,html[data-area="admin"] .ticket-msg.mine,html[data-area="admin"] .choice .ic{background:#2FD4C4;color:#08103A;border-color:#2FD4C4;}
html[data-area="admin"] .an-bar-fill{background:#2FD4C4;}
html[data-area="admin"] .skill-card .ic,html[data-area="admin"] .play-card .thumb,html[data-area="admin"] .react-btn{background:#16215A;}
html[data-area="admin"] .kpi-compact .num{color:#fff;font-family:var(--font-display);font-weight:800;font-size:28px;}
html[data-area="admin"] .kpi-compact .lbl{font-size:13px;color:#B8C2EE;}
html[data-area="admin"] .an-kpi-sub{font-size:12px;color:#8E9AD6;}
html[data-area="admin"] #toast{background:#2FD4C4;color:#08103A;}
/* blocos com fundo branco escrito à mão nos módulos do Admin */
html[data-area="admin"] [style*="background:#fff"],html[data-area="admin"] [style*="background: #fff"],html[data-area="admin"] [style*="background:white"]{background:rgba(255,255,255,.05)!important;color:#E8ECFF;}
html[data-area="admin"] [style*="background:var(--bg)"],html[data-area="admin"] [style*="background: var(--bg)"]{background:#0A1240!important;}
html[data-area="admin"] [style*="color:#16215A"],html[data-area="admin"] [style*="color: #16215A"]{color:#fff!important;}

/* ============================================================
   MENU DO TELEMÓVEL (todas as áreas com menu lateral)
   ============================================================ */
.topbar-menu-btn{display:none;}
@media (max-width:920px){
  .topbar-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--linha);background:transparent;color:inherit;margin-right:10px;}
  html[data-area="admin"] .topbar-menu-btn{border-color:rgba(207,247,242,.25);}
  .sidebar.open{display:flex!important;position:fixed;inset:0 auto 0 0;width:min(320px,86vw);height:100vh;z-index:60;box-shadow:0 0 0 100vmax rgba(8,14,54,.55);}
  html[data-area="professional"] .sidebar.open{background:#fff;color:#16215A;}
  html[data-area="professional"] .sidebar.open .side-link{color:#16215A;}
  .bottom-nav{padding-bottom:calc(10px + var(--safe-bottom));}
  .main-area{padding-bottom:calc(90px + var(--safe-bottom));}
}

/* ============================================================
   TAMANHOS — telemóvel (≤ 600), tablet (601–1024), computador
   ============================================================ */
@media (max-width:600px){
  /* grelhas de 2 colunas escritas à mão nos módulos passam a 1 coluna */
  .main-area [style*="grid-template-columns:1fr 1fr"],.main-area [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important;}
  html[data-area="patient"] .view-head h1{font-size:28px;}
  html[data-area="professional"] .view-head h1{font-size:38px;}
  .today-card{padding:20px!important;}
  .admin-table{font-size:13px;}
  html[data-view="jogo"] .game-stage.has-scene .stage-content{margin:10px;padding:20px 14px;}
  html[data-view="jogo"] .opt-btn{flex:1 1 40%;}
}
@media (min-width:601px) and (max-width:1024px){
  .view{padding:28px 24px;}
  .dash-grid{grid-template-columns:1fr 1fr;}
}
@media (orientation:landscape) and (max-height:520px){
  html[data-view="jogo"] .game-stage,html[data-view="jogo"] .stage-content{min-height:auto;}
  html[data-view="jogo"] .stage-content{padding:16px;gap:12px;}
}

/* números dos indicadores no profissional: serifa editorial */
html[data-area="professional"] .kpi-compact .num{font-family:var(--font-display);font-weight:400;font-size:30px;color:#16215A;}
html[data-area="professional"] .kpi-compact .lbl{font-size:12.5px;color:#5B6690;}

/* v2.12.0: o palco do jogo é sempre claro, também em Admin → Testar Jogos */
html[data-area="admin"] .game-stage{--bg-card:#FFFFFF;--ink:#16215A;--ink-soft:#3E4A72;--ink-faint:#5B6690;--linha:#E3E8F1;--azul-profundo:#16215A;background:#fff;color:#16215A;}
html[data-area="admin"] .game-stage h2,html[data-area="admin"] .game-stage h3{color:#16215A;}
html[data-area="admin"] .game-stage .btn-ghost{color:#16215A;border-color:#C9D1DD;}
html[data-area="admin"] .game-stage input:not([type=range]),html[data-area="admin"] .game-stage textarea{background:#fff;color:#16215A;border-color:#C9D1DD;}