/* Plataforma Mangue Sat — estilo v3.0.0 (2026-11-02)
   3.0.0: identidade visual Mangue Sat (logo, tokens de cor claro/escuro/alto contraste, escala tipográfica Ubuntu,
          barra superior translúcida, controles segmentados, alvos de toque de 44 px em telas de toque),
          referência: Apple Human Interface Guidelines (camada de controles sobre a camada de conteúdo,
          cor de destaque só na ação principal, contraste mínimo 4,5:1, movimento reduzido).
   2.1.0: botões M/O por ano. 2.0.0: seletor de projeto, cartões de projeto, retorno do treinamento.
   1.2.0: fonte Ubuntu em toda a interface. 1.1.0: faixa anual compacta, cursor de ano. */

/* ---------- tokens ---------- */
:root{
  /* marca */
  --marca:#0B6E5A; --marca-forte:#085646; --marca-suave:#E1F0EB; --agua:#0072B2;
  /* superfícies (fundo agrupado > painel > painel interno) */
  --bg:#F2F5F4; --panel:#FFFFFF; --panel2:#F6F8F7; --material:rgba(248,250,249,.78);
  --fill:rgba(60,80,72,.08); --fill-forte:rgba(60,80,72,.14);
  /* texto */
  --ink:#101614; --muted:#56615D; --terc:#87918D;
  /* linhas */
  --line:#DCE2DF; --line-forte:#C3CBC7;
  /* destaque (ação principal, seleção, links) */
  --accent:var(--marca); --accent-hover:var(--marca-forte); --accent-ink:#FFFFFF; --accent-soft:var(--marca-suave);
  /* dados (Okabe-Ito, seguros para daltonismo) */
  --mangue:#009E73; --outro:#E69F00; --sem:#C9CFCC; --chipbg:#E7ECEA;
  /* estados */
  --warn:#B4570A; --erro:#C0352B; --ok:#0B6E5A;
  --sombra:0 1px 2px rgba(16,22,20,.05),0 6px 20px rgba(16,22,20,.06);
  --sombra-seg:0 1px 2px rgba(16,22,20,.12),0 1px 1px rgba(16,22,20,.04);
  /* tipografia */
  --f-body:"Ubuntu",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-disp:"Ubuntu",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Ubuntu Mono",ui-monospace,Menlo,Consolas,monospace;
  --t-titulo-g:30px; --t-titulo1:24px; --t-titulo2:20px; --t-titulo3:17px; --t-corpo:15px; --t-sub:14px; --t-nota:13px; --t-leg:12px;
  /* forma */
  --r-cartao:14px; --r-controle:10px; --r-peq:6px; --alvo:36px;
  --dur:.16s;
}
@media (prefers-color-scheme:dark){:root{
  --marca:#3CC9A4; --marca-forte:#5ED6B5; --marca-suave:#143A31; --agua:#56B4E9;
  --bg:#0B0F0E; --panel:#161B1A; --panel2:#1D2321; --material:rgba(20,25,24,.74);
  --fill:rgba(170,190,182,.10); --fill-forte:rgba(170,190,182,.17);
  --ink:#EEF3F1; --muted:#A3ADA9; --terc:#76807C;
  --line:#2A3230; --line-forte:#3B4542;
  --accent-ink:#04140F;
  --mangue:#2FC596; --outro:#F0B43C; --sem:#3A4341; --chipbg:#232A28;
  --warn:#F39A55; --erro:#FF6B5E; --ok:#3CC9A4;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --sombra-seg:0 1px 2px rgba(0,0,0,.5);
  color-scheme:dark}}
@media (prefers-contrast:more){:root{
  --marca:#065040; --marca-forte:#043A2E; --muted:#3B4542; --line:#8C9692; --line-forte:#5F6A66; --fill:rgba(16,22,20,.14); --material:var(--panel); --erro:#9E1F17}}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){:root{
  --marca:#6FE3C2; --marca-forte:#9BEDD6; --muted:#CAD2CF; --line:#5C6763; --line-forte:#83908B; --fill:rgba(220,235,229,.18); --material:var(--panel); --erro:#FF8F85}}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:var(--t-corpo);line-height:1.47;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-hover)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px;border-radius:var(--r-peq)}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
h1,h2,h3{font-family:var(--f-disp);text-wrap:balance;letter-spacing:-.01em}
h1{font-size:var(--t-titulo1);font-weight:700;margin:4px 0 14px}
h2{font-size:var(--t-titulo2);font-weight:700}
h3{font-size:var(--t-titulo3);font-weight:500}

/* ---------- barra superior (camada de controles, translúcida sobre o conteúdo) ---------- */
.top{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
  background:var(--material);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;color:var(--ink);min-width:0}
.brand img{width:36px;height:36px;flex:none;border-radius:9px;box-shadow:var(--sombra-seg)}
.brand b{display:block;font-family:var(--f-disp);font-weight:700;font-size:18px;line-height:1.1;letter-spacing:-.01em}
.brand b span{font-weight:400;color:var(--accent)}
.brand small{display:block;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand:hover{color:var(--ink)}
/* navegação como controle segmentado */
nav{display:flex;gap:2px;flex-wrap:wrap;background:var(--fill);border-radius:var(--r-controle);padding:3px}
nav a{display:inline-flex;align-items:center;min-height:30px;border-radius:8px;padding:0 12px;font-size:var(--t-sub);font-weight:500;text-decoration:none;color:var(--ink);transition:background var(--dur)}
nav a:hover{background:var(--fill);color:var(--ink)}
nav a.on{background:var(--panel);color:var(--ink);box-shadow:var(--sombra-seg)}
.who{order:5;font-size:var(--t-nota);color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.badge{font-family:var(--f-body);font-size:var(--t-leg);font-weight:500;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:2px 9px;letter-spacing:.01em;white-space:nowrap}
@media (prefers-color-scheme:dark){.badge{color:var(--marca-forte)}}
.projsel{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-weight:500;text-decoration:none;color:var(--ink);background:var(--fill);border-radius:var(--r-controle);padding:0 12px;font-size:var(--t-sub)}
.projsel:hover{background:var(--fill-forte);color:var(--ink)}

/* ---------- página ---------- */
.wrap{padding:20px max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left));max-width:1500px;margin:0 auto}
.estreito{max-width:440px;margin:48px auto}
.marca-entrada{display:flex;flex-direction:column;align-items:center;gap:10px;margin:8px 0 22px;text-align:center}
.marca-entrada img{width:88px;height:88px;border-radius:20px;box-shadow:var(--sombra)}
.marca-entrada b{font-family:var(--f-disp);font-size:26px;font-weight:700;letter-spacing:-.01em}
.marca-entrada b span{font-weight:400;color:var(--accent)}
.marca-entrada small{font-size:var(--t-leg);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
footer{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:center;padding:22px 16px calc(22px + env(safe-area-inset-bottom));color:var(--muted);font-size:var(--t-nota);text-align:center;border-top:1px solid var(--line);margin-top:36px}
footer img{width:20px;height:20px;border-radius:5px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-cartao);padding:16px 18px;margin-bottom:16px}
.card h2,.card h3{margin:0 0 10px}
label.f{display:block;font-size:var(--t-nota);font-weight:500;color:var(--muted);margin:12px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;min-height:var(--alvo);padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-controle);background:var(--panel2);transition:border-color var(--dur),box-shadow var(--dur)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
input[type=number]{width:90px}
input[type=radio],input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;vertical-align:-3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--alvo);border:0;background:var(--fill);border-radius:var(--r-controle);padding:0 16px;font-size:var(--t-sub);font-weight:500;text-decoration:none;color:var(--ink);transition:background var(--dur),transform var(--dur)}
.btn:hover{background:var(--fill-forte);color:var(--ink)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);color:var(--accent-ink);font-weight:700}
.btn.primary:hover{background:var(--accent-hover)}
.btn.m{box-shadow:inset 0 0 0 1.5px var(--mangue)} .btn.o{box-shadow:inset 0 0 0 1.5px var(--outro)}
.btn.rapido{font-weight:700;box-shadow:none}
.btn.rapido::before{content:"";width:10px;height:10px;border-radius:3px;flex:none}
.btn.rapido.m{background:color-mix(in srgb,var(--mangue) 18%,var(--panel))} .btn.rapido.m::before{background:var(--mangue)}
.btn.rapido.o{background:color-mix(in srgb,var(--outro) 22%,var(--panel))} .btn.rapido.o::before{background:var(--outro)}
.btn.rapido.m:hover{background:color-mix(in srgb,var(--mangue) 28%,var(--panel))} .btn.rapido.o:hover{background:color-mix(in srgb,var(--outro) 32%,var(--panel))}
.btn kbd{background:transparent}
.btn.primary kbd{color:inherit;border-color:currentColor;opacity:.75}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.flash{padding:11px 14px 11px 16px;border-radius:var(--r-controle);margin-bottom:14px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.flash.erro{background:color-mix(in srgb,var(--erro) 10%,var(--panel));border-color:color-mix(in srgb,var(--erro) 40%,transparent)}
.hint{font-size:var(--t-nota);color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
table{border-collapse:collapse;font-size:var(--t-sub);font-variant-numeric:tabular-nums}
th,td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
th{font-size:var(--t-leg);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:500}
tr:last-child td{border-bottom:0}
.tscroll{overflow-x:auto}
code,.mono{font-family:var(--f-mono);font-size:14px}
code{background:var(--fill);border-radius:5px;padding:1px 5px}
kbd{font-family:var(--f-mono);font-size:11px;line-height:1.3;border:1px solid var(--line-forte);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--muted);background:var(--panel)}
.copybox{display:flex;gap:6px}.copybox input{font-family:var(--f-mono);font-size:13px}

/* ---------- interpretação ---------- */
.grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.grid{grid-template-columns:minmax(0,1fr)}}
.side{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-cartao);position:sticky;top:76px;max-height:calc(100vh - 100px);display:flex;flex-direction:column;overflow:hidden}
@media (max-width:860px){.side{position:static;max-height:300px}}
.side header{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.prog{height:6px;background:var(--fill-forte);border-radius:3px;overflow:hidden}.prog i{display:block;height:100%;background:var(--accent);border-radius:3px}
.filters{display:flex;gap:2px;flex-wrap:wrap;background:var(--fill);border-radius:9px;padding:2px}
.filters button{flex:1;border:0;background:transparent;border-radius:7px;padding:4px 8px;font-size:var(--t-nota);font-weight:500}
.filters button[aria-pressed=true]{background:var(--panel);box-shadow:var(--sombra-seg)}
.plist{overflow:auto;flex:1;min-height:0}
.pitem{display:grid;grid-template-columns:40px 1fr auto;gap:6px;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:8px 14px;font-size:var(--t-nota)}
.pitem:hover{background:var(--fill)}
.pitem[aria-current=true]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.pitem .n{font-family:var(--f-mono);color:var(--muted)}
.dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--terc)}
.dot.done{background:var(--accent);border-color:var(--accent)} .dot.rev{background:var(--warn);border-color:var(--warn)}
.phead{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.phead h2{font-size:var(--t-titulo1);margin:0}
.meta{font-family:var(--f-mono);font-size:var(--t-nota);color:var(--muted)}
.links{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;font-size:var(--t-nota);margin-top:6px}
.links .btn{min-height:28px}
.ctxrow{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;align-items:flex-start}
figure.ctx{margin:0}
figure.ctx figcaption{font-size:var(--t-leg);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500;margin-top:6px}
.chip{position:relative;display:block;background:var(--sem);overflow:hidden;border-radius:6px}
.chip img{display:block;width:100%;height:100%;image-rendering:pixelated}
.chip .px{position:absolute;border:1.5px solid #fff;outline:1px solid #000;pointer-events:none}
.chip .area{position:absolute;border:1px dashed rgba(255,255,255,.9);pointer-events:none}
.legend{font-size:var(--t-nota);color:var(--muted);max-width:46ch}
.legend b{color:var(--ink)}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 10px;align-items:center}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.yr{border:2px solid transparent;background:transparent;padding:2px;border-radius:9px;display:flex;flex-direction:column;gap:4px;text-align:left;min-width:0}
.yr .yrimg{border:0;padding:0;background:transparent;display:block;width:100%;border-radius:6px}.yr .yrimg:disabled{cursor:default}
.yr .mo{display:inline-flex;gap:2px;background:var(--fill);border-radius:6px;padding:1px}
.yr .mo button{border:0;background:transparent;border-radius:5px;font-family:var(--f-mono);font-size:11px;font-weight:700;line-height:1;padding:3px 6px;color:var(--muted)}
.yr .mo button:hover{background:var(--fill-forte);color:var(--ink)}
.yr .mo .mbtn.on{background:var(--mangue);color:#fff}.yr .mo .obtn.on{background:var(--outro);color:#111}
.yr .chip{width:100%;aspect-ratio:1/1}
.yr .lab{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:12px;padding:0 1px}
.yr .bar{height:7px;border-radius:4px;background:var(--sem)}
.yr.M .bar{background:var(--mangue)} .yr.O .bar{background:var(--outro)}
.yr.chg{border-color:var(--ink)} .yr.cur{outline:2px dashed var(--accent);outline-offset:1px} .yr:disabled{cursor:default}
.yr .noimg{width:100%;aspect-ratio:1/1;display:grid;place-items:center;background:var(--chipbg);color:var(--muted);font-size:12px;border-radius:6px;text-align:center}
.yr .irow{display:grid;grid-template-columns:14px 1fr;gap:3px;align-items:center;font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.yr .irow i{display:block;height:5px;border-radius:3px;background:var(--sem)}
.yr .irow i.M{background:var(--mangue)} .yr .irow i.O{background:var(--outro)}
.yr .irow.aud{color:var(--ink);font-weight:700} .yr .irow.aud i{height:8px}
.resumo{margin:14px 0;padding:10px 14px;background:var(--panel2);border-radius:var(--r-controle)}
.resumo .cls{font-weight:700}
.series svg{width:100%;height:auto;display:block}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 18px;margin-top:14px}
.form fieldset{border:1px solid var(--line);border-radius:var(--r-controle);padding:10px 12px;margin:0;min-width:0}
.form legend{font-size:var(--t-leg);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:500;padding:0 4px}
.form label{display:flex;gap:8px;align-items:center;padding:2px 0}
.seg{display:flex;gap:2px;background:var(--fill);border-radius:9px;padding:2px}
.seg button{flex:1;border:0;background:transparent;border-radius:7px;padding:5px;font-weight:500}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);box-shadow:var(--sombra-seg)}
.savebar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.irs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:12px 0}
.irs>div{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-controle);padding:10px 12px;font-size:13.5px;min-width:0}
.toast{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:var(--t-sub);font-weight:500;z-index:20;box-shadow:var(--sombra)}
.manual{max-width:76ch}.manual h2{margin-top:30px}.manual li{margin:5px 0}
.manual table{margin:8px 0 14px}
.tab td,.tab th{white-space:nowrap}

/* ---------- projetos e retorno do treinamento ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:16px}
.cards .card{margin:0;display:flex;flex-direction:column;gap:8px}
.card.proj.atual{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.retorno{border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:var(--accent-soft);border-radius:var(--r-controle);padding:12px 14px;margin-top:14px}
.retorno .faixa{display:grid;grid-template-columns:repeat(26,1fr);gap:2px;margin:6px 0}
.retorno .faixa i{height:10px;border-radius:2px;display:block}
.retorno .faixa i.M{background:var(--mangue)}.retorno .faixa i.O{background:var(--outro)}
.retorno .faixa i.dif{outline:2px solid var(--erro);outline-offset:-1px}

/* ---------- toque e movimento ---------- */
@media (pointer:coarse){:root{--alvo:44px} nav a{min-height:40px} .yr .mo button{padding:7px 9px;font-size:13px} .pitem{padding:12px 14px}}
@media (max-width:640px){.brand small{display:none} .top{gap:8px 10px} nav{width:100%;overflow-x:auto;flex-wrap:nowrap} nav a{flex:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (prefers-reduced-transparency:reduce){.top{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}