:root{
  --bg:#0B1220; --superficie:#101828; --superficie2:#16203A; --superficie3:#1C2A4A;
  --linha:rgba(141,177,255,.16); --linha-forte:rgba(141,177,255,.30);
  --texto:#E8EEFB; --suave:#93A3C4;
  --marca:#3B6FF5; --marca-texto:#fff; --marca-fraca:rgba(59,111,245,.16);
  --ouro:#E2B04A; --ouro-fraco:rgba(226,176,74,.16);
  --ok:#3DD68C; --ok-fraco:rgba(61,214,140,.16);
  --atraso:#FF7A8A; --atraso-fraco:rgba(255,122,138,.14);
  --sombra:0 10px 30px rgba(3,8,20,.45);
  --r:14px; --r-sm:10px;
  --display:"Archivo",system-ui,sans-serif; --corpo:"Public Sans",system-ui,sans-serif;
  --menu:248px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){ :root:not([data-tema="escuro"]){
  --bg:#F4F7FD; --superficie:#fff; --superficie2:#EDF2FC; --superficie3:#E2EAF8;
  --linha:#DCE4F4; --linha-forte:#C3D0EA; --texto:#0F172A; --suave:#55648A;
  --marca:#1D4ED8; --marca-fraca:rgba(29,78,216,.10);
  --ouro:#8A6110; --ouro-fraco:rgba(138,97,16,.12);
  --ok:#10824F; --ok-fraco:rgba(16,130,79,.12);
  --atraso:#C62B45; --atraso-fraco:rgba(198,43,69,.10);
  --sombra:0 8px 24px rgba(16,24,40,.08); color-scheme:light; } }
:root[data-tema="claro"]{
  --bg:#F4F7FD; --superficie:#fff; --superficie2:#EDF2FC; --superficie3:#E2EAF8;
  --linha:#DCE4F4; --linha-forte:#C3D0EA; --texto:#0F172A; --suave:#55648A;
  --marca:#1D4ED8; --marca-fraca:rgba(29,78,216,.10);
  --ouro:#8A6110; --ouro-fraco:rgba(138,97,16,.12);
  --ok:#10824F; --ok-fraco:rgba(16,130,79,.12);
  --atraso:#C62B45; --atraso-fraco:rgba(198,43,69,.10);
  --sombra:0 8px 24px rgba(16,24,40,.08); color-scheme:light; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--texto);font:15px/1.5 var(--corpo);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--marca)}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
::selection{background:var(--marca);color:#fff}

/* ---------------------------------------------------------- estrutura */
#raiz{min-height:100dvh}
.app{display:flex;min-height:100dvh}

.menu{display:none}
.conteudo{flex:1;min-width:0;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.faixa{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.area{width:100%;max-width:1180px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:18px}

/* topo no celular */
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--superficie);border-bottom:1px solid var(--linha)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--superficie)}
.topo-in{display:flex;align-items:center;gap:12px;padding-block:12px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  max-width:1180px;margin:0 auto}
.marca{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.04em;line-height:1}
.marca span{color:var(--marca)}
.marca small{display:block;font-size:9px;letter-spacing:.3em;color:var(--suave);font-weight:600;margin-top:2px}
.icone-btn{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--linha);background:var(--superficie2);
  display:grid;place-items:center;font-size:15px;flex:0 0 auto}
.icone-btn:hover{border-color:var(--linha-forte)}

/* barra inferior no celular */
.abas{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--superficie);border-top:1px solid var(--linha);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
.abas-in{display:grid;max-width:620px;margin:0 auto}
.aba{padding:9px 2px 11px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--suave);
  font-size:10.5px;font-weight:600}
.aba svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aba[aria-current="page"]{color:var(--marca)}

/* ----------------------------------------------- computador: >= 900px */
@media (min-width:900px){
  .topo{display:none}
  .abas{display:none}
  .conteudo{padding-bottom:0}
  .menu{display:flex;flex-direction:column;gap:4px;width:var(--menu);flex:0 0 var(--menu);
    background:var(--superficie);border-right:1px solid var(--linha);padding:20px 14px;
    position:sticky;top:0;height:100dvh;overflow-y:auto}
  .menu .marca{margin:4px 8px 18px}
  .menu-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
    color:var(--suave);font-weight:600;font-size:14px;width:100%;text-align:left}
  .menu-item svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .menu-item:hover{background:var(--superficie2);color:var(--texto)}
  .menu-item[aria-current="page"]{background:var(--marca-fraca);color:var(--marca)}
  .menu-rodape{margin-top:auto;border-top:1px solid var(--linha);padding-top:14px}
  .area{padding-block:32px}
  .duas{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
}
@media (min-width:1280px){ .area{padding-inline:40px} }

/* ------------------------------------------------------- componentes */
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);padding:18px;box-shadow:var(--sombra)}
.pilha{display:flex;flex-direction:column;gap:14px}
.sobre{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--suave)}
.sub{color:var(--suave);font-size:13px;margin:4px 0 0}
h1.titulo{font-size:22px;font-weight:700}
h2.titulo{font-size:17px;font-weight:700}
@media (min-width:900px){ h1.titulo{font-size:27px} }

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--linha);
  background:var(--superficie2);border-radius:var(--r-sm);padding:9px 14px;font-size:13.5px;font-weight:600;
  transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--linha-forte)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-principal{background:var(--marca);color:var(--marca-texto);border-color:var(--marca)}
.btn-principal:hover{filter:brightness(1.08)}
.btn-perigo{background:var(--atraso-fraco);color:var(--atraso);border-color:var(--atraso)}
.btn-grande{padding:13px 20px;font-size:15px;border-radius:12px}
.linha-btn{display:flex;gap:9px;flex-wrap:wrap}

.campo{display:block;margin-top:14px}
.campo span{display:block;font-size:12.5px;font-weight:600;color:var(--suave);margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;background:var(--superficie2);border:1px solid var(--linha);
  border-radius:var(--r-sm);padding:11px 13px;outline:0}
.campo input:focus,.campo select:focus{border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-fraca)}

.aviso{border-radius:var(--r);padding:12px 14px;font-size:13.5px;display:flex;gap:11px;align-items:center}
.aviso-erro{background:var(--atraso-fraco);border:1px solid var(--atraso);color:var(--texto)}
.aviso-ok{background:var(--ok-fraco);border:1px solid var(--ok)}
.aviso-atencao{background:var(--ouro-fraco);border:1px solid var(--ouro)}

.marcador{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;
  border-radius:999px;background:var(--marca-fraca);color:var(--marca);border:1px solid currentColor;white-space:nowrap}
.marcador.ouro{background:var(--ouro-fraco);color:var(--ouro)}
.marcador.verde{background:var(--ok-fraco);color:var(--ok)}
.marcador.vermelho{background:var(--atraso-fraco);color:var(--atraso)}

.barra{height:6px;border-radius:99px;background:var(--superficie2);overflow:hidden}
.barra i{display:block;height:100%;background:var(--marca);border-radius:99px;transition:width .3s}
.barra.ouro i{background:var(--ouro)} .barra.verde i{background:var(--ok)}

.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.numero{background:var(--bg);border:1px solid var(--linha);border-radius:var(--r-sm);padding:11px 13px;min-width:0}
.numero b{display:block;font-family:var(--display);font-size:19px;font-weight:700}
.numero span{font-size:10.5px;color:var(--suave);letter-spacing:.04em;text-transform:uppercase}

/* metas */
.meta{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);display:flex;
  overflow:hidden;box-shadow:var(--sombra)}
.meta .faixa-cor{width:5px;flex:0 0 5px;background:var(--marca)}
.meta[data-tipo="revisao"] .faixa-cor{background:var(--ouro)}
.meta[data-tipo="exercicio"] .faixa-cor{background:var(--ok)}
.meta[data-tipo="resumo"] .faixa-cor{background:var(--suave)}
.meta[data-atrasada="1"] .faixa-cor{background:var(--atraso)}
.meta-in{padding:14px 15px;flex:1;min-width:0}
.meta-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meta[data-tipo="revisao"] .marcador{background:var(--ouro-fraco);color:var(--ouro)}
.meta[data-tipo="exercicio"] .marcador{background:var(--ok-fraco);color:var(--ok)}
.meta .minutos{margin-left:auto;font-family:var(--display);font-weight:700;font-size:13px;color:var(--suave)}
.meta h3{font-size:15.5px;font-weight:700;margin-top:7px}
@media (min-width:900px){ .meta h3{font-size:16.5px} }
.meta .disc{font-size:12px;color:var(--suave);margin-top:3px}
.meta .legenda{display:flex;justify-content:space-between;font-size:11.5px;color:var(--suave);margin-top:5px;gap:10px}
.meta .dica{margin-top:11px;background:var(--superficie2);border-left:3px solid var(--ouro);border-radius:0 9px 9px 0;
  padding:9px 11px;font-size:12.5px}
.meta .dica b{color:var(--ouro);font-family:var(--display);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:3px}
.meta .acoes{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.meta.feita{opacity:.6}
.meta.feita h3{text-decoration:line-through;text-decoration-color:var(--suave)}

/* dias */
.dias{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.dias::-webkit-scrollbar{display:none}
.dia{flex:0 0 auto;width:54px;text-align:center;border:1px solid var(--linha);border-radius:12px;
  padding:8px 0;background:var(--superficie)}
.dia em{font-style:normal;display:block;font-size:10px;color:var(--suave);text-transform:uppercase;letter-spacing:.08em}
.dia b{font-family:var(--display);font-size:16px;display:block;margin-top:2px}
.dia i{display:block;width:5px;height:5px;border-radius:50%;margin:5px auto 0;background:var(--linha-forte)}
.dia.hoje{border-color:var(--marca);background:var(--marca-fraca)} .dia.hoje i{background:var(--marca)}
.dia.feito i{background:var(--ok)}

/* horas e ciclo */
.hlinha{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--linha)}
.hlinha:last-child{border-bottom:0}
.hlinha>span{flex:1}
.passo{display:flex;align-items:center;gap:9px}
.passo button{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--linha);background:var(--superficie2);
  display:grid;place-items:center;font-family:var(--display);font-size:17px}
.passo b{min-width:68px;text-align:center;font-family:var(--display);font-variant-numeric:tabular-nums;font-size:14px}

.ciclo{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;touch-action:pan-y}
.ciclo li{display:flex;align-items:center;gap:10px;background:var(--superficie2);border:1px solid var(--linha);
  border-radius:11px;padding:9px 11px}
.ciclo li.arrastando{border-color:var(--marca);box-shadow:var(--sombra);position:relative;z-index:5}
.ciclo .pos{width:24px;height:24px;flex:0 0 auto;border-radius:7px;background:var(--marca-fraca);color:var(--marca);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:11.5px}
.ciclo .nm{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pega{padding:4px 2px;color:var(--suave);font-size:16px;touch-action:none;line-height:1;cursor:grab}
.pega:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-radius:6px}
.tirar{padding:4px 2px;color:var(--suave);font-size:16px;line-height:1}
.tirar:hover{color:var(--atraso)}
.fichas{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ficha{border:1px dashed var(--linha-forte);border-radius:999px;padding:7px 12px;font-size:12.5px;color:var(--suave)}
.ficha:hover{border-style:solid;border-color:var(--marca);color:var(--marca)}

/* tabela do mentor */
.tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.tabela th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);
  padding:9px 10px;border-bottom:1px solid var(--linha);font-weight:700;white-space:nowrap}
.tabela td{padding:11px 10px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.rolagem{overflow-x:auto}

/* modais e avisos flutuantes */
dialog{border:1px solid var(--linha);background:var(--superficie);color:var(--texto);border-radius:16px;padding:0;
  max-width:420px;width:calc(100% - 32px);box-shadow:var(--sombra)}
dialog::backdrop{background:rgba(5,10,22,.65)}
.dlg{padding:22px}
.dlg h2{font-size:18px}
.dlg p{font-size:13.5px;color:var(--suave);margin:8px 0 0}
.opcao{display:block;width:100%;text-align:left;background:var(--superficie2);border:1px solid var(--linha);
  border-radius:11px;padding:13px;margin-top:9px}
.opcao:hover{border-color:var(--marca)}
.opcao b{display:block;font-family:var(--display);font-size:14px}
.opcao small{color:var(--suave);font-size:12px}

.recado{position:fixed;left:50%;transform:translateX(-50%) translateY(14px);
  bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--superficie);
  border:1px solid var(--marca);border-radius:11px;padding:11px 15px;font-size:13px;box-shadow:var(--sombra);
  max-width:calc(100% - 32px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.recado.visivel{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:900px){ .recado{bottom:28px} }

/* entrada */
.entrada{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.entrada .cartao{width:100%;max-width:400px}

.carregando{display:grid;place-items:center;min-height:50dvh;color:var(--suave);gap:12px}
.girando{width:30px;height:30px;border:3px solid var(--linha);border-top-color:var(--marca);border-radius:50%;
  animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}