@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap'); /* ============================================================ Painel FA47 Tema claro por padrão, escuro por data-tema="escuro" no . ============================================================ */ :root{ --papel:#ffffff; --tinta:#16130f; --tinta-fraca:#6b6459; --linha:#e4ded4; --linha-forte:#cfc6b8; --curso:#e2661a; --amarelo:#ffe45e; --azul:#9ed2f5; --rosa:#ffabd0; --verde:#a8e6a3; --roxo:#d3b4ee; --vermelho:#ff9a95; --prata:#d6d6d6; --laranja:#ffc178; --duas:#c9e4c5; --trilho:#f2efe9; --campo:#ffffff; --contorno:rgba(0,0,0,.2); --alerta:#c0392b; --realce:#fff8e8; } html[data-tema="escuro"]{ --papel:#131110; --tinta:#f0ebe2; --tinta-fraca:#9c948a; --linha:#2c2823; --linha-forte:#474038; --curso:#ff8c42; --amarelo:#d8b528; --azul:#4d9ed4; --rosa:#e0629b; --verde:#4fb04a; --roxo:#a06fd0; --vermelho:#e05c56; --prata:#8d8d8d; --laranja:#d98a30; --duas:#6fae79; --trilho:#241f1b; --campo:#1c1917; --contorno:rgba(255,255,255,.3); --alerta:#ff7a6b; --realce:#221d15; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--papel);color:var(--tinta); font-family:Archivo,system-ui,sans-serif;font-size:15px;line-height:1.5; } .wrap{max-width:1000px;margin:0 auto;padding:22px 18px 80px} [hidden]{display:none !important} /* Campos de texto nunca abaixo de 16px: no iOS isso faz a página dar zoom sozinha ao focar e desalinha a tela inteira. */ input[type=text],input[type=email],input[type=password],input[type=date], input[type=number],textarea,select{font-size:16px} /* ---------- entrada ---------- */ .entrada{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 18px} .entrada-caixa{width:100%;max-width:370px} .entrada .eyebrow{font-size:13px;color:var(--tinta-fraca)} .entrada h1{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:31px;line-height:1.1;margin:4px 0 22px} .entrada label{display:block;font-size:13px;font-weight:600;margin:14px 0 5px} .entrada input{ width:100%;font-family:inherit;padding:11px 12px; border:1px solid var(--linha-forte);background:var(--campo);color:var(--tinta); } .entrada input:focus-visible{outline:2px solid var(--curso);outline-offset:1px} .entrada button[type=submit]{ width:100%;margin-top:20px;font:inherit;font-size:15px;font-weight:600;padding:12px; border:1px solid var(--tinta);background:var(--tinta);color:var(--papel);cursor:pointer; } .entrada button[type=submit]:disabled{opacity:.5;cursor:default} .entrada .secundario{ display:block;margin:16px auto 0;appearance:none;border:0;background:none; font:inherit;font-size:13px;color:var(--tinta-fraca);text-decoration:underline;cursor:pointer; } .recado{margin-top:16px;font-size:13.5px;padding:10px 12px;border-left:3px solid var(--linha-forte)} .recado.ruim{border-left-color:var(--alerta);color:var(--alerta)} .recado.bom{border-left-color:var(--curso)} /* ---------- topo ---------- */ .topo{border-bottom:2px solid var(--tinta);padding-bottom:18px;margin-bottom:6px} .eyebrow{font-size:13px;color:var(--tinta-fraca);letter-spacing:.01em} h1{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:34px;line-height:1.08;margin:2px 0 16px} .metros{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:18px 26px} .metro b{font-size:13px;font-weight:600;display:block} .metro span{font-size:12px;color:var(--tinta-fraca)} .traco{position:relative;height:13px;margin:5px 0 3px;background:var(--trilho); clip-path:polygon(0 18%,99% 0,100% 82%,1% 100%)} .traco i{position:absolute;inset:0 auto 0 0;display:block;transition:width .35s ease} .t1 i{background:var(--amarelo)} .t2 i{background:var(--rosa)} .t3 i{background:var(--azul)} .t4 i{background:var(--verde)} /* ---------- abas ---------- */ nav{ display:flex;gap:2px;margin:22px 0 6px;border-bottom:1px solid var(--linha); overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; } nav::-webkit-scrollbar{display:none} nav button{ appearance:none;background:none;border:0;border-bottom:3px solid transparent; font:inherit;font-weight:600;color:var(--tinta-fraca);padding:11px 14px;cursor:pointer; white-space:nowrap;flex:0 0 auto; } nav button[aria-selected=true]{color:var(--tinta);border-bottom-color:var(--curso)} nav button:focus-visible{outline:2px solid var(--curso);outline-offset:-2px} .barra{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0 6px;font-size:13px;color:var(--tinta-fraca)} .sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;padding:6px 0} .sw input{width:18px;height:18px;accent-color:var(--curso);cursor:pointer} /* ---------- dias ---------- */ .dia{border-bottom:1px solid var(--linha);padding:14px 0} .dia-cab{display:flex;align-items:baseline;gap:12px} .dia-n{font-family:Newsreader,serif;font-size:21px;font-weight:600;min-width:62px} .dia-res{font-size:13px;color:var(--tinta-fraca);flex:1} .dia.ok .dia-n{color:var(--tinta-fraca);text-decoration:line-through;text-decoration-thickness:1px} .tarefas{margin:10px 0 0 0;padding:0;list-style:none} .tarefa{display:flex;gap:11px;align-items:flex-start;padding:4px 0} .tarefa label{cursor:pointer;flex:1;padding:6px 0} .tarefa .tt{display:block} .tarefa.feito .tt{color:var(--tinta-fraca);text-decoration:line-through;text-decoration-thickness:1px} .onde{display:block;font-size:12.5px;color:var(--tinta-fraca);margin-top:1px} .tag{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border:1px solid var(--linha-forte);border-radius:20px;margin-right:7px;vertical-align:1px;white-space:nowrap} .tag.envio{border-color:var(--curso);color:var(--curso)} .tag.leitura{border-color:#b9a98f} /* Caixa de marcar com alvo de toque de 44px, sem inchar o layout: o quadrado continua com 18px, quem cresce é a área clicável. */ .marcar{ position:relative;flex:0 0 auto;width:18px;height:18px;margin-top:8px; accent-color:var(--curso);cursor:pointer; } .marcar::before{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:44px;height:44px; } /* ---------- anotações ---------- */ .linha-acao{display:flex;align-items:center;gap:4px;flex:0 0 auto} .btn-nota{ appearance:none;border:1px solid transparent;background:none;cursor:pointer; font:inherit;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase; color:var(--tinta-fraca);padding:8px;border-radius:3px;line-height:1; } .btn-nota:hover{color:var(--tinta);border-color:var(--linha)} .btn-nota:focus-visible{outline:2px solid var(--curso);outline-offset:1px} .btn-nota.tem{color:var(--curso);border-color:var(--curso)} .nota-area{padding:2px 0 10px 29px} .nota-area textarea{ width:100%;font-family:inherit;line-height:1.45;padding:9px 11px;resize:vertical;min-height:70px; border:1px solid var(--linha-forte);background:var(--campo);color:var(--tinta); } .nota-area textarea:focus-visible{outline:2px solid var(--curso);outline-offset:1px} .nota-lida{ padding:2px 0 8px 29px;font-size:13.5px;color:var(--tinta-fraca); white-space:pre-wrap;overflow-wrap:anywhere; } .nota-lida b{display:block;font-size:11px;font-weight:600;letter-spacing:.03em; text-transform:uppercase;color:var(--curso);margin-bottom:2px} /* ---------- prazos ---------- */ .prazo{padding:12px 0;border-bottom:1px solid var(--linha)} .prazo-topo{display:flex;gap:12px;align-items:flex-start} .prazo .corpo{flex:1;min-width:0} .prazo .nome{font-weight:600;cursor:pointer;display:inline-block;padding:6px 0} .prazo.feito .nome{color:var(--tinta-fraca);text-decoration:line-through} .data{font-family:Newsreader,serif;font-size:15px;white-space:nowrap;text-align:right;min-width:92px;padding-top:6px} .restam{display:block;font-size:12px;font-weight:600} .r-hoje{color:var(--alerta)} .r-perto{color:var(--curso)} .r-longe{color:var(--tinta-fraca)} .r-pass{color:var(--alerta)} .nota{font-size:12.5px;color:var(--tinta-fraca);margin-top:3px} .caixa{border:1px solid var(--linha-forte);padding:14px 16px;margin:18px 0;font-size:13.5px} .caixa b{display:block;margin-bottom:6px} .caixa p{margin:4px 0} /* registro da correção */ .selo-nota{ display:inline-block;font-family:Newsreader,serif;font-size:14px;font-weight:600; border:1px solid var(--curso);color:var(--curso);border-radius:20px; padding:1px 10px;margin-left:8px;vertical-align:1px;white-space:nowrap; } .correcao{margin:10px 0 2px 29px;padding:12px 14px;background:var(--realce);border:1px solid var(--linha)} .correcao .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px} .correcao label{display:block;font-size:11px;font-weight:600;letter-spacing:.03em; text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:4px} .correcao input,.correcao textarea{ width:100%;font-family:inherit;padding:8px 10px; border:1px solid var(--linha-forte);background:var(--campo);color:var(--tinta); } .correcao textarea{margin-top:2px;min-height:76px;resize:vertical;line-height:1.45} .correcao .larga{margin-top:12px} .correcao input:focus-visible,.correcao textarea:focus-visible{outline:2px solid var(--curso);outline-offset:1px} .devolutiva-lida{margin:8px 0 0 29px;font-size:13.5px;color:var(--tinta-fraca);white-space:pre-wrap;overflow-wrap:anywhere} /* ---------- marcações da CLT ---------- */ .legenda{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0 2px} .chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linha-forte); background:none;color:var(--tinta);font:inherit;font-size:12.5px; padding:7px 12px 7px 8px;border-radius:20px;cursor:pointer} .chip[aria-pressed=true]{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)} .chip:focus-visible{outline:2px solid var(--curso);outline-offset:1px} .chip .bola{width:13px;height:13px;border-radius:3px;border:1px solid var(--contorno);flex:0 0 auto} .bloco{margin:26px 0 0} .bloco h3{font-family:Newsreader,serif;font-size:20px;font-weight:600;margin:0 0 2px} .bloco .sub{font-size:12.5px;color:var(--tinta-fraca);margin-bottom:9px} .grupo{border-top:1px solid var(--linha);padding:11px 0 3px} .grupo .gtit{font-size:13px;font-weight:600;margin-bottom:4px} .gtit .pg{font-weight:400;color:var(--tinta-fraca)} .mk{display:flex;gap:10px;align-items:flex-start;padding:2px 0} .mk label{cursor:pointer;flex:1;line-height:1.45;padding:6px 0} .ref{font-family:Newsreader,serif;font-size:16.5px} .mk.feito label{opacity:.55} .sobre{font-size:12.5px;color:var(--tinta-fraca)} .cor{display:inline-block;width:11px;height:11px;border-radius:2px;border:1px solid var(--contorno);margin-right:6px} .add{display:flex;gap:8px;margin:12px 0 4px;flex-wrap:wrap} .add input[type=text]{flex:1 1 200px;font-family:inherit;padding:9px 10px;border:1px solid var(--linha-forte);background:var(--campo);color:var(--tinta)} .add select{font-family:inherit;padding:9px;border:1px solid var(--linha-forte);background:var(--campo);color:var(--tinta)} .add button{font:inherit;font-size:15px;font-weight:600;padding:9px 16px;border:1px solid var(--tinta);background:var(--tinta);color:var(--papel);cursor:pointer} .del{appearance:none;border:0;background:none;color:var(--tinta-fraca);cursor:pointer;font:inherit;font-size:12px;padding:8px 6px} .del:hover{color:var(--alerta)} .vazio{color:var(--tinta-fraca);font-size:13.5px;padding:14px 0} .carregando{color:var(--tinta-fraca);font-size:13.5px;padding:40px 0;text-align:center} /* ---------- rodapé ---------- */ footer{margin-top:44px;padding-top:14px;border-top:1px solid var(--linha); font-size:12px;color:var(--tinta-fraca);display:flex;justify-content:space-between; gap:12px;flex-wrap:wrap;align-items:center} footer .quem{display:flex;align-items:center;gap:8px;flex-wrap:wrap} footer .acoes{display:flex;gap:8px;flex-wrap:wrap} footer button{appearance:none;border:1px solid var(--linha-forte);background:none; color:var(--tinta);font:inherit;font-size:12px;padding:7px 11px;cursor:pointer} footer button:hover{border-color:var(--tinta)} .sinal{display:inline-flex;align-items:center;gap:6px} .sinal::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verde);flex:0 0 auto} .sinal[data-estado="salvando"]::before{background:var(--laranja)} .sinal[data-estado="offline"]::before{background:var(--alerta)} .sinal[data-estado="offline"]{color:var(--alerta)} @media (max-width:560px){ .wrap{padding:18px 16px 70px} h1{font-size:27px} .dia-n{min-width:52px;font-size:19px} .data{min-width:74px;font-size:14px} .metros{grid-template-columns:1fr;gap:14px} .nota-area,.nota-lida,.correcao,.devolutiva-lida{margin-left:0;padding-left:0} .correcao{padding:12px 14px} footer{flex-direction:column;align-items:flex-start} } @media (prefers-reduced-motion:reduce){*{transition:none !important}}